Usability
"… Usability is about people and how they understand and use things, not about technology."
— Steve Krug
How to improve usability
Usability improves as the product design incorporates user research findings along with proven usability and interaction design principles.
Usability principles
How easy is it to use a product? Usability measures how easy or difficult it is for a person to use that product. There are five aspects to usability with principles you should follow:
Learnability
How easy is it for users to accomplish basic tasks the first time they encounter the design?
- Be consistent; use standards: Be consistent to support learning. Don’t make users guess. Follow the standards in this design system. Don’t make users wonder whether different words, situations, or actions mean the same thing.
- Match between system and the real world: Make sure your application or website “speaks” the same language your users do. Use words, phrases and concepts that are familiar to them. In other words, use plain language and avoid techno-speak. Learn more about plain language.
- Help and documentation: Even though it’s better if the system can be used without documentation, it may be necessary to provide help and documentation. Make it easy to search, and make sure it lists actionable steps. Make it easy to read instructions or find them through tooltips.
Efficiency
Once users have learned the design, how quickly can they perform tasks?
- Visibility of system status: Always keep users informed about the status of the system (that is, your website or application) using feedback within reasonable time. Progress indicators, feedback messages and wizard controls are examples of ways to keep users updated. Learn more about visibility of system status.
- User control and freedom: Users often choose commands by mistake and need a clearly marked "emergency exit" to escape the unwanted state. Make sure users can cancel or escape from dialogs. Support undo and redo when possible.
- Flexibility and efficiency of use: Allow for shortcuts and previews. Consider Fitts's law.
Memorability
When users return to the design after a period of not using it, how easily can they reestablish proficiency?
- Recognition vs. recall: Short-term memory disappears quickly. In fact, each time you present a new page or screen to a user, you’re effectively wiping out your user’s short-term memory. Reduce cognitive load by making objects, actions, and options visible. Don’t make a user remember information from part of a page or application to another. Learn more about recognition vs. recall.
Errors
How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
- Prevent errors: Even better than good error messages is a careful design which prevents problems in the first place. If you can’t eliminate an error-prone situation, give users a confirmation option before they commit to the action. Learn how to prevent errors.
- Help users recognize, diagnose, and recover from errors: Write error messages using plain language. Clearly describe the problem and suggest ways they can fix the issue.
Satisfaction
How pleasant is it to use the design?
- Aesthetic and minimalist design: Clean, simple and aesthetic designs are perceived to be more usable than cluttered ones. (Read about aesthetic-usability bias.) Keep interfaces simple and avoid clutter. Keep content simple, too. Omit needless words.
Source: 10 Usability Heuristics for User Interface Design, Jakob Nielsen, April 1994
Interaction design principles
Recommended reading
Growth Design's psychology of design: 101 cognitive biases & principles that affect your UX (with examples and tips).
Aesthetics
Aesthetic impressions are instantaneous — taking less than 50 milliseconds to form. Aesthetic designs are:
- Perceived as easier to use (aesthetic-usability bias)
- Support faster task completion
- Foster positive attitudes and make people more tolerant of design problems
- Also see Usability principles: Satisfaction
Fitts's law
Named after psychologist Paul Fitts, who demonstrated that fast movements and smaller targets were prone to more error than larger targets and shorter distances.
Position elements in close proximity to the user and make them easily selectable.
Insights & best practices
- What's under mouse pointer is fastest target
- What's near the mouse pointer is also very fast
- A user's mouse tracks the user's eye (automatically and unconsciously)
- Increase size of desirable targets and place them close to user's center of interest
- Consider making 'dangerous targets' smaller (e.g. Cancel, Undo)
Hick's law
Named after psychologists Edmund Hick and Ray Hyman, who found a relationship between the number of stimuli and a human's reaction time.
The time it takes to make decisions increases as the number or complexity of choices increases.
Insights & best practices
- “Complex things will require complexity. It is the job of the designer to manage that complexity with skill and grace.” — Don Norman
- Simplify processes or choices for the user by breaking complex decisions into smaller steps. Consider a wizard.
- Making things simple is hard work. Read more on user testing to see how it can reveal where users struggle.
Laws of perceptual organization
Gestalt psychology studies how humans interpret the world and have given us principles or "laws of perceptual organization" which point us toward organization that will allow our digital products to feel intuitive. Here we discuss the categories of common region, proximity, similarity, continuity and connectedness, and closure.
Common region
Elements will be perceived as groups if they share an area with clearly defined boundary.
Common region insights & best practices
- Give related elements a frame
Common region example
Proximity
People tend to group elements together that are near to each other.
Proximity insights & best practices
- If elements related: keep close to each other
- If elements not related: add space to separate
Proximity fail
Similarity
People understand elements that look alike to be a group or pattern.
Similarity insights & best practices
- Maintaining patterns builds on this principle and allows digital products to be intuitive.
- User confusion can happen when UI styles are not consistent.
Continuity & connectedness
Elements either connected with a line or aligned in a line or along a soft curve will be perceived to be more related than elements that appear random or follow a sharp curve.
Continuity & connectedness insights & best practices
- Elements will be perceived as being united if connected to other elements.
- Some of the best examples are flowcharts where an arrow leads a user to a destination or goal.
Closure
Humans want a full picture and the human brain will fill in gaps.
Closure insights & best practices
- This is the law that allows us to simplify lines for icons
- And, when we see images or words only partially visible on a screen, we intuitively know to scroll.
Metaphors
Well-chosen metaphors help people learn or intuit how a digital product works, because they creates a bridge connecting the unfamiliar with the familiar.
"People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences — whether rooted in the real or digital world" (Source: Apple's iOS Human Interface Guidelines). On mobile devices, the user's ability to manipulate on-screen content as they drag and swipe content, is metaphor in action.
Relates to the usability principle: Learnability
Signal-to-noise ratio
Increase the signal-to-noise ratio by simplifying designs, allowing the useful information (signal) to 'speak' louder than the noise.
- Visual noise
- Even content or text on a page can become noise (Relates to usability principle: Learnability)
- Whitespace is your friend! More space around elements attracts the eye.
User control
Successful digital products grant users control over the interface while also enabling them to make best decisions.
"An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway" (Source: Apple's iOS Human Interface Guidelines).
Relates to the usability principles: Errors and Efficiency
Research and tools for user-centered design
“Supposing is good but finding out is better.”
— Mark Twain
User personas, journey maps and user testing are design tools we use to build empathy with users and their needs.
User research
We strive to continually refine our understanding of user needs in order to solve for actual problems and needs. No one tool or test can give a full accounting of user needs, so we use a variety of methods and tools to sharpen our understanding.
OPTN website focus groups: Actionable items to help members and patients
To build on our understanding of the needs of visitors and improve the OPTN website, the UNOS Design and User Experience Team conducted five focus group sessions in January and February 2020 and tree tests in August 2020 to evaluate and propose ways to improve the OPTN website navigation.
Presentations and report
Additional findings for UNet apps, Data Services reports, video, and email
Full report (For internal use only)
Presentation includes:
- Top user needs for improved user experience
- A day-in-the-life summary of our customers
- Actionable items
- Proposed OPTN site navigation based on tree test results
User personas
Developed from user research, a persona is a "fictional, yet realistic, description of a typical or target user of the product" that enables designers and developers to have a shared reference point to guide design decisions.
User persona created from user interviews
Choose details that will help inform design decisions. A photo humanizes this tool and is a memory aid for developers and designers. Goals and challenges point to pain points. Quotes can capture an attitude.
User journey maps
A journey map traces the steps a user takes to reach a goal or complete a task. A journey map can be created for multiple user personas in order to understand how goals or needs vary.
Creating a journey map and the resulting artifact builds empathy for the users, reveals design opportunities, and is a memorable summary that helps the design and development team und user needs and pain points.
Learn more: Journey mapping 101 article and video and template.
Example of a user journey
An example of a simplistic, high-level customer-journey map depicting how the persona “Jumping Jamie” switches her mobile plan. While all comprehensive journey maps should include key components, what the map chooses to prioritize can (and should) depend on the goal of the journey-mapping initiative.
(Image: NN/g)
User testing
User testing, also called usability testing, is watching a user complete a task on a digital product (at any stage of development) in order to discover usability issues. Ultimately, we are testing the design, not the user.
Testing with 5 users uncovers 85% of the issues
Writing tasks: general strategies
Do:
- Focus the test: determine what you're testing:
- Discoverability
- Findability
- Usability
- all three of these
- Consider the goal of the task
- Make it realistic
- Give minimal context (not overly scenario-based)
- Involve team in writing and/or reviewing tasks
- Keep language neutral, unbiased, and understandable
- Have a clear call-to-action
Avoid:
- Don’t try to be funny
- Don't give clues or hints
- Avoid micro-steps
- Don't make it overly scenario-based