Testing UI/UX - HCI Framework | Checklist
A comprehensive framework and checklist designed to evaluate the user interface (UI) and user experience (UX) of a product, following principles of Human-Computer Interaction (HCI).
Introduction - Why UI/UX and design foundation rules are important for a designer and product manager
UI/UX (User Interface/User Experience) rules are important for both designers and product managers because they play a crucial role in creating successful and user-friendly products. Here are some reasons why UI/UX rules are important for designers and product managers:
User-Centric Approach: UI/UX rules help ensure that the design and functionality of a product are centered around the needs and preferences of the users. By following established UI/UX principles, designers and product managers can create experiences that are intuitive, efficient, and enjoyable for the target audience.
Streamlining Development Process: UI/UX rules provide a framework that enables efficient collaboration between designers, product managers, and developers. When everyone involved in the product development process follows the same set of UI/UX principles, it reduces ambiguity, facilitates communication, and streamlines the development workflow. Clear UI/UX guidelines also help in making design decisions and resolving conflicts effectively.
User Satisfaction and Business Success: Ultimately, adhering to UI/UX rules leads to increased user satisfaction, which in turn drives business success. A well-designed and user-friendly product enhances user engagement, encourages repeat usage, and generates positive word-of-mouth referrals. Satisfied users are more likely to become loyal customers and contribute to the product's growth and profitability.
UI/UX Testing Framework
Doherty Threshold
Fitts law
Pareto Principle
Hick's Law
Miller's law
Jakob's law
Von Restoff Effect
Zeigarnik Effect
Tesler's law
Peak end Rule
Goal gradient effect
Pareto Principle
For many events, roughly 80 percent of the effects come from 20 percent of the causes.
The principle is named after Italian economist Vilfredo Pareto, who noted the 80/20 connection in his work, Cours d'économie politique. In this, Pareto showed that approximately 80 percent of the land in Italy was owned by 20 percent of the population.
In product design, the Pareto Principle can be applied to optimization efforts. Within any given system, only a few main variables affect the outcomes, while most other factors will return little to no impact. For example, [Microsoft noted](https://en.wikipedia.org/wiki/Pareto_principle) that by fixing the top 20 percent of their most-reported bugs, 80 percent of the related errors and crashes in a given system would be eliminated.
Use Case:
1. Focus the majority of the effort on the areas that will bring the largest benefits to the most users.
2. A large group may contain only a few meaningful contributors to the desired outcome.
3. Inputs and outputs are often not evenly distributed.
Doherty Threshold
Productivity increases when a computer and its users interact at a pace that ensures that neither has to wait on the other.
Response time is the delay between the user’s request and the computer’s response. If the response time is too long, the user tends to lose patience. Experts at IBM measured the ideal response time that keeps users engaged. In 1982, Walter J. Doherty and Ahrvind J. Thadani published a research paper that set the requirement for computer response time to be no longer than [400 milliseconds](https://jlelliotton.blogspot.com/p/the-economic-value-of-rapid-response.html).
Use Case:
Don’t make users wait; provide system feedback within 400ms in order to keep users’ attention.
If a given process takes more than 400ms to complete, you should show a loading animation or other visual/audio feedback indicating that the process will take some time. Based on Jakob Nielsen’s research about response times, 10 seconds is the limit for users to keep their attention on a task. After this, users grow impatient if they don’t have enough information on how long they have to wait for the result.
Attention Span
Adapt design for short attention spans: Don’t overwhelm users with too much information
An attention span is defined as the amount of time someone concentrates on a task without becoming distracted. A 2015 study conducted by Microsoft found that the average human attention span has declined from 12 seconds to 8 seconds. This means that we now have a shorter attention span than goldfish. Designers need to adjust to cope with this behavior, with the goal of getting people the information they need as quickly as possible.
The average attention span of humans:
in 2000 - 12 Seconds
in 2014 - 8 seconds
in 2020 - 6 seconds
In 2021 - Tiktok and Instagram reels took over social media
Use Case:
Clear and Concise Information: Present information in a concise and easily digestible manner. Use clear and straightforward language, bullet points, and visual aids to convey key messages quickly. Avoid overwhelming users with long paragraphs or excessive details that may cause them to lose interest.
Visual Hierarchy and Scannability: Design interfaces with a clear visual hierarchy that guides users' attention to the most important elements. Utilize headings, subheadings, and visual cues (such as color, size, and spacing) to highlight essential information. Make sure the content is scannable, allowing users to quickly identify relevant sections and skip non-essential details.
Engaging and Interactive Elements: Incorporate interactive and engaging elements to capture users' attention and maintain their interest. This can include animations, micro-interactions, and gamification elements that provide immediate feedback and encourage user participation. Interactive elements can help mitigate the effects of a short attention span by creating a more dynamic and captivating user experience.
Fitt’s Law
Ease interactions through the careful sizing and positioning of interactive elements.
Fitt’s Law states that the time required to acquire a target is a function of the distance to and size of the target. The longer the distance and the smaller the target’s size, the longer it takes to acquire the target.
Use Case:
Button Placement and Size: Fitts's Law can guide the placement and sizing of buttons to optimize user interactions.
Increase the size of frequently used buttons, such as "Submit" or "Next," to make them easier to target, reducing the time it takes for users to click on them.
Navigation and Menu Design: Fitts's Law can be applied to enhance the usability of navigation menus and improve user efficiency.
Group related items together to create larger target areas, facilitating quick and accurate selection, especially on touchscreens or mobile devices.
Mobile App Design: Fitts's Law is particularly relevant for mobile app interfaces due to the smaller screen size and touch-based input.
Design larger and well-spaced interactive elements, such as buttons or swipe gestures, to accommodate touch input accuracy and reduce accidental touches.
Hick's law
The time it takes for a person to make a decision increases with the number and complexity of choices. Minimize choices to drive decision-making.
Many designers think that they’re improving user experience by offering lots of choices, but in reality, they’re adding extra cognitive burden. The more choices a user is confronted with, the more likely it is that they will face decision paralysis. This can be especially problematic in an e-commerce context, where users have to browse dozens of products that have similar properties.
Use Case:
1. Minimize choices when response times are critical to increasing decision time.
2. Break complex tasks into smaller steps in order to decrease the cognitive load.
3. Avoid overwhelming users by highlighting recommended options.
Von Restorff Effect (or Isolation Effect)
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
The Von Restorff Effect, also known as the Isolation Effect, was coined by German psychiatrist and pediatrician Hedwig von Restorff. In her 1933 study, she found that when participants were presented with a list of categorically similar items grouped with one distinctive item, people better memorized the distinctive item.
The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Use Case:
1. Make important information or key actions visually distinctive.
2. Use restraint when placing emphasis on visual elements to avoid them competing with one another and to ensure salient items don’t get mistakenly identified as ads.
3. Don’t exclude those with a color vision deficiency or low vision by relying exclusively on color to communicate contrast.
Miller’s Law
Humans can’t hold much information in their short-term memory. The average person can only keep 7 (plus or minus 2) items in their working memory at one time.
Miller’s Law (also known as “The Magical Number Seven, Plus or Minus Two”) was coined by cognitive psychologist George A. Miller. According to this law, our brain has a limited capacity for processing information the number of perceptual ‘chunks’ an average person can hold in working memory is 7 ± 2. This law can be easily applied to UI design: the more chunks of information you add to a UI, the more difficult it becomes to work with it.
Key takeaways:
- When showing telephone numbers, chunk the information so that it can be held easily in working memory. Instead of displaying a number like +16501251612, space the numbers out +1 (650) 125-16-12.
- Use chunking to present groups of content in a manageable way. Organize elements of information in categories no larger than 9, but preferably 5 chunks.
- Don’t use the “magical number seven” to justify unnecessary design limitations.
- Organize content into smaller chunks to help users process, understand, and memorize easily.
- Remember that short-term memory capacity will vary per individual, based on their prior knowledge and situational context.
Use Case:
Content Chunking: Breaking information into smaller, meaningful chunks can aid in memory retention and cognitive processing.
When presenting a list of features or options, group them into categories or clusters of three to five items. For example, organizing product features into three main categories: "Performance," "Design," and "Functionality."
When designing a step-by-step process, divide it into smaller, manageable chunks with three to five steps per chunk. For instance, breaking down a registration process into "Account Setup," "Personal Information," and "Verification."
Navigation and Menu Design: Applying Miller's Law can help streamline navigation and menu structures for better user comprehension.
Limit the number of main navigation options to seven, or ideally fewer, to prevent overwhelming users with too many choices. For example, a website with seven top-level categories in its main navigation menu.
Form and Input Design: Miller's Law can guide the design of forms and input fields to optimize the user experience and completion rates.
Limit the number of required form fields to a maximum of seven, prioritizing essential information. Avoid requesting excessive data that may deter users from completing the form.
Occam’s Razor
Entities should not be multiplied without necessity.
Occam's Razor is a problem-solving principle that states that when we have two explanations for an occurrence, the one that requires the least speculation is usually correct. This idea is attributed to the English Franciscan friar William of Ockham.
Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.
Key takeaways:
- Analyze each element and remove as many as possible, without compromising the overall function.
- The best method for reducing complexity is to avoid it in the first place.
- Analyze each element and remove as many as possible, without compromising the overall function.
- Consider completion only when no additional items can be removed.
Use Case:
Interface Simplicity: Occam's Razor can guide designers to prioritize simplicity in interface design, reducing complexity and cognitive load for users.
Streamline the interface by removing unnecessary elements, features, or steps that do not contribute to the core functionality or user goals.
User Flow and Navigation: Occam's Razor can inform decision-making regarding user flow and navigation to minimize confusion and maximize usability.
Limit the number of steps or interactions required to complete common tasks, reducing friction and improving the overall user experience.
Error Prevention and Recovery: Applying Occam's Razor can help identify potential sources of errors and simplify error prevention and recovery mechanisms.
Design error messages that are concise, specific, and actionable, providing users with clear guidance on how to resolve the issue.
Zeigarnik Effect
The Zeigarnik Effect is a psychological phenomenon named after Bluma Zeigarnik, a Soviet psychologist who first studied it in the 1920s. It refers to the tendency of people to remember and has a better recall of uncompleted or interrupted tasks compared to completed ones. In other words, unfinished tasks or unresolved situations tend to occupy our thoughts and memory more than completed tasks.
The Zeigarnik Effect suggests that when we initiate a task but do not complete it, it creates a state of cognitive tension or mental "open loop." This tension makes us more likely to remember the unfinished task and experience a sense of mental discomfort until it is resolved or completed. Once the task is finished, the tension dissipates, and our memory of it tends to diminish.
Use Case:
1. Invite content discovery by providing clear signifiers of additional content.
2. Providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task.
3. Provide a clear indication of progress in order to motivate users to complete tasks.
Goal-Gradient Effect
The Goal Gradient effect states that people are more motivated by how much is left to reach their target, rather than how far they have come.
The tendency to approach a goal increases with proximity to the goal.
How to apply the Goal Gradient Effect
Think of the Goal Gradient Effect as a virtual finish line. The closer customers get to winning, the more encouraged they become.
You’ll often see the Goal Gradient Effect in UX elements like progress bars and profile completion — users are encouraged to complete a task by achieving objectives.
Uber applies this principle by illustrating what’s happening behind the scenes while customers are waiting. They explain each step in the process, making customers feel they are making continuous progress toward their goal.
Use Case:
1. The closer users are to completing a task, the faster they work towards reaching it
2. Providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task.
3. Provide a clear indication of progress in order to motivate users to complete tasks.
Conclusion:
In summary, UI/UX rules are important for designers and product managers because they prioritize the needs of users, provide guidelines for creating consistent and intuitive interfaces, enhance usability, strengthen branding, streamline the development process, and contribute to overall user satisfaction and business success.