COMP3297 Software Engineering
USER EXPERIENCE DESIGN
Dr. Carmen Lam
Outline
• What is UX? What is UI?
• 7 essential UX elements
• Adobe’s 4 Golden Rules of UI Design • Some tips to your project
• Case study of previous projects
2
What is User Experience (UX)?
• UX is how people feel when they use a product or service.
WhatsApp’s delete message feature
Author/Copyright holder: Jorge Gonzalez. Author/Copyright holder: Nikki Sylianteng.
Source: WhatsApp
3
What is User Experience (UX)?
• Does the user find the site or application simple to use and navigate?
Source: Adobe
4
What is User Experience (UX)?
• Does the user actually enjoy using the site or the application?
Source: Adobe Source: Twitter
5
User Experience (UX) vs. User Interface (UI)
• UI: the interfaces look
• UX: the overall feel of the experience
• Both are crucial and work closely together.
• UX design usually comes first in the product development process, followed by UI.
• UX design: identifying and solving user problems
• UI design: creating intuitive, interactive, aesthetically-pleasing interfaces
6
7 essential UX elements
• In 2004, IA architect Peter Morville first posted the “user experience honeycomb”:
Photo credit: Peter Morville
1. Useful – Does the product solve the right problem?
2. Usable – Is the product easy to use?
3. Desirable – Is the product enjoyable to use?
4. Findable – Can users find relevant content easily?
5. Accessible – Is the product usable by people of varying abilities and disabilities?
6. Credible – Does the product feel trustworthy and reliable?
7. Valuable – Does the product provide business value?
7
1. Design for Usefulness
• Design thinking is a process for creative problem solving.
• The Hasso Plattner Institute of Design at Stanford (aka the d.school) describes design thinking as a five-stage process:
Go deep inside the mind of your users.
Create a clear problem statement.
Brainstorm ways to rectify the problem statement.
Build the best Test with users to ideas into a refine solution. testable
prototype.
8
1. Design for Usefulness
• Design thinking is a non-linear, iterative process. Learn about users through testing
Tests create new ideas
Learn from prototypes to spark new ideas
Tests reveal insights that redefine the problem
9
2. Designing for Usability
• Usability is concerned with enabling users to achieve their end objective with a product effectively and efficiently. There are a few core components:
◦ Learnable – A new user can easily figure out how to use the product for the first time. ◦ Learnability depends on context, e.g. WhatsApp vs. Google Drive
◦ Use clear signifiers and UI patterns.
Source: medium.com/@Ben.Olson
Source: http://ui-patterns.com/
10
2. Designing for Usability
• Usability is concerned with enabling users to achieve their end objective with a product effectively and efficiently. There are a few core components:
◦ Learnable – A new user can easily figure out how to use the product for the first time. ◦ Progressive disclosure – Reveal information gradually instead of all-at-once.
Example: Google Maps
11
2. Designing for Usability
• Usability is concerned with enabling users to achieve their end objective with a product effectively and efficiently. There are a few core components:
◦ Efficient – Users can accomplish tasks quickly and easily. ◦ Use color saturation to set visual hierarchy.
◦ Write out task flows.
◦ Time users during testing.
◦ Site or app performance do matters.
12
2. Designing for Usability
• Usability is concerned with enabling users to achieve their end objective with a product effectively and efficiently. There are a few core components:
◦ Forgiving – The design minimizes user errors through careful understanding of task flows. When errors are made, the design does not impose severe consequences and offers clear feedback for solutions.
◦ Forgiving format for inputs ◦ Undo vs. Confirm
◦ Autosaving
◦ Error feedback
Example: Google Calendar
13
Source: Dribbble
Source: https://uxdesign.cc/
2. Designing for Usability
• Usability is concerned with enabling users to achieve their end objective with a product effectively and efficiently. There are a few core components:
◦ Satisfying – The design is emotionally fulfilling.
◦ Microinteractions convey system status, support error prevention, prevent rework, etc.
14
2. Designing for Usability
• The 6-step process to improve usability:
1. Conduct user research
2. Map out content and user flow
3. Wireframe
4. Prototype
5. Test with users
6. Iterate and repeat until ready
Map out content and user flow.
Example: banking app
Scenario: someone wants to turn on auto deposit.
Source: lucidchart
15
3. Designing for Desirability
• Desire is relative to users
16
3. Designing for Desirability
• Is the product enjoyable to use?
• Desirable design exists on two levels: surface delight and meaningful delight.
Pleasurable Usable Reliable Functional
Surface delight e.g. beautiful UI, animation, transition, etc.
Deep (meaningful) delight
Products that are completely frictionless (minimizing pain points, frustration and anxiety that users may experience)
happy and productive,
i.e. a deeper level of delight.
17
4. Designing for Findability
• Findability relates to how well users can find relevant content in a site or web/mobile app’s navigation.
• To satisfy: time, convenience, understandability, and visual design.
• Work with: Information Architecture and Testing.
• Information architecture – designing navigational systems and constructing content in such a way that it’s intuitive to browse and understand on websites, web and mobile apps, software, and more.
18
4. Designing for Findability
• The information architecture components:
1.
Organization systems – a way to
categorize how information is divided.
◦ Hierarchical – using a visual hierarchy helps users determine the importance of each individual element.
◦ Sequential – creates a path for a user, e.g. checking out on Amazon.
◦ Matrix – allow users to browse content based on different kinds of groupings
19
4. Designing for Findability
• The information architecture components:
2. Navigation systems – to guide a user through the process of using an app/website ◦ Global navigation system is presented on every page throughout an interface.
20
4. Designing for Findability
• The information architecture components:
2. Navigation systems – to guide a user through the process of using an app/website ◦ Local navigation systems help users to explore what is nearby.
21
4. Designing for Findability
• The information architecture components:
3. Labeling systems – a way to simplify data representation and group multiple sets
of data and content, allowing for easier navigation.
4. Searching systems – allow users to enter search terms into a search bar and find what they want quickly.
22
5. Designing for Accessibility
• To design in such a way that the same features benefit regular users and the disabled alike.
• Some guidelines:
◦ Web Content Accessibility Guidelines 2.0 (WCAG) – A broad range of recommendations for
making web content accessible, that are not technology specific.
◦ User Agent Accessibility Guidelines 2.0 (UAAG) – Guidelines targeting developers for more accessible user agents, such as browsers, plug-ins, media players, and readers.
◦ Authoring Tool Accessibility Guidelines 2.0 (ATAG) – Guidelines for authoring tools to benefit both disabled users and creators of content.
◦ Accessibility guidelines for mobile usage.
23
6. Designing for Credibility
• Credibility relates to the ability of the user to trust in the product.
• First impressions are important!
• Studies1,2 show that polished aesthetics and intuitive usability are the two base ingredients for building trust.
References:
1. http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
2. http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ Source: chase.com
24
7. Designing for Value
• A product’s UX must account for the company’s goals, which extends beyond customer satisfaction, to show business value.
• Keep in mind the 5 business goals:
1. Increase revenue
2. Decrease costs
3. Bring in new business
4. Expand existing business
5. Increase shareholder value
25
Adobe’s 4 Golden Rules of UI Design
1. ◦
◦ ◦
Place users in control of the interface Create an easy-to-navigate interface
Make actions reversible – be forgiving
Provide informative feedback – be acknowledging
Source: Adobe
26
Adobe’s 4 Golden Rules of UI Design
2. Make it comfortable to interact with a product ◦ Engineer for errors
Source: Adobe
27
Adobe’s 4 Golden Rules of UI Design
3. ◦
◦
4. ◦
◦ ◦
Reduce cognitive load
Reduce the number of actions required to complete a task Promote visual clarity when designing layouts:
◦ ◦
Avoid presenting too much information at one time on the screen.
Apply the general principles of content organization such as grouping similar items together, numbering items, and using headings and prompt text.
Make user interfaces consistent Visual consistency (style) Functional consistency (behavior) Consistent with user expectations
Source: Adobe
28
Some tips to your project
• Consistent & clean design
• Usability & logical workflow
◦ Learnable – A new user can easily figure out how to use the product for the first time.
◦ Efficient – Users can accomplish tasks quickly and easily. Think about the logical workflow to complete a task.
◦ Forgiving – The design minimizes user errors through careful understanding of task flows. • Confirmations & failure notifications
29
References
• Eye-Opening Examples of Good & Bad UX Design
• Bad Design vs. Good Design: 5 Examples We can Learn From • 10 Classic UX Design Fails That Teach Us How Not To Do UX • 10 Examples of Good User Experience (UX)
• User experience honeycomb
• Stanford d.school
• Flight Guide to your Design Thinking Practice
• Complete Guide To Information Architecture In UX Design
• The 4 Golden Rules of UI Design
• User Interface Design Guidelines: 10 Rules of Thumb
• 20 Most Important UI Design Principles for UI
30