UI Design Checklist 2024 for Improving Product Usability (Part3)

8. Aesthetic and minimalist design

What it means:

Less is more. Interfaces should present only the information that’s necessary and with minimal distractions. Visual clutter can overwhelm users, making it harder for them to focus on their primary tasks.

Best Practices:

• Readability: Control sufficient whitespace and typography to improve readability
• Prioritization: Highlight the most important information and hide or deprioritize less relevant details
• Simplified layout: Too many buttons, links, or sections on a single page, as well as meaningless decorations, increase the user's cognitive load.

8-1. Use interface elements that clear a contrast ratio of 3:1

To ensure that people with visual impairments can see interface details clearly, we aim to meet at least the color contrast requirements of Web Content Accessibility Guidelines (WCAG). The success criterion 1.4.11 specifies that the minimum contrast ratio for Graphical Objects and User Interface Components such as form fields, icons, and buttons should also be 3:1.

The issue with low-contrast buttons is that people with poor vision may not be able to see the button's shape and thus may not recognize it as a button. Increasing the contrast ratio of the buttons to 3:1 or higher will make them easier to use and correct the visual hierarchy.

8-2. Use text colors that clear a contrast ratio of 4.5:1

Success Criterion 1.4.3 Contrast Minimum of the WCAG (Web Contents Accessibility Guideline) specifies that for text and pictures of text a contrast ratio of at least 4.5:1 is required.

• Small text (18 pixels or less) should have a minimum contrast of 4.5:1.
• Larger text (18 pixels or more for bold text, 24 pixels or more for standard bold text) requires a minimum 3:1 contrast.

There are some exceptions to the above indicators, which do not apply to the following.

• Exception 1) Incidental text: There is no contrast requirement for text that is an inactive element, text as decoration, or part of a photograph.
• Exception 2) Logos: There is no contrast requirement for logos.

Useful tools for measuring color contrast include the Web AIM Online Contrast Check Tool and the Contrast Figma plug-in.

8-3. Use vertical lowercase typefaces

The mean height of the lowercase letters in a typeface is called the x-height. A typeface with a higher x-height is more legible in smaller font sizes because the white space within each letter further separates the lines in the letter, and helps distinguish the letters from one-another.

This is preferable for readability over fonts with letters that have a low x-height. Their lines of their letters being closer together make them blurrier at a higher font size compared to fonts with high x-height. Look for typefaces with high lowercase letter heights and wide letter spacing, as they are generally easier to read at smaller sizes.

This example uses Fututa PT, which has a relatively low x-height. Changing the typeface to a typeface with a larger x-height, such as Inter, will improve readability.

8-4. Restrict the use of uppercase letters

Unless you are capitalizing letters for grammatic reasons, or shouting at people, there is not much justification for using capital letters. This is because capital letters are loud and difficult to read.

When reading, look at the shape of the word, not at each letter. If you look at the shape, you will recognize the word more quickly. All uppercase words have the same rectangular shape. Therefore, each letter must be read one at a time.

In this example, the place text is capitalized. Changing this to sentence capitals and capitalizing only the first word and proper nouns (names of people, places, and things) will improve readability.

8-5. Use only standard and bold fonts

Just because there are many font weights available for a typeface does not mean you need to use them all in your UI design. Using a variety of font weights can add noise and clutter to the interface. It also makes it difficult to use each font weight consistently.

Keep the design system simple and concise by using only standard and bold fonts. Some typefaces have a semi-bold font option that can be used in place of bold if bold is too heavy.

A quick usage tip:

• To emphasize headings, use a bold font.
• For other small text, use normal font-weight.
• Use very thin or bold fonts only for headings and large text, as they may be difficult to read at smaller sizes.

8-6. Use at least 1.5 line height for body text

Line height is the vertical distance between two lines of text. An adequate line height improves the appearance and readability of your text and helps prevent people from re-reading the same line.

For accessibility and readability, make sure your line height is at least 1.5 (150%), especially if you have long body text. Keeping your line height between 1.5 and 2 usually works well.

8-7. Avoid pure black text

When choosing colors for your design, it is important to consider the needs of your users according to their visual abilities. For users with visual impairments, high contrast between text and background is very important. On the other hand, for users with normal vision, prolonged exposure to a high-contrast interface can cause discomfort and eye strain.

Generally, it is safest to avoid pure black-and-white combinations and opt for dark gray instead. You need to find a balance between the benefits of high contrast for users with low vision and the negative effects of high contrast for users with normal vision.

8-8. Change the expression by considering the priority of the button

If multiple buttons are lined up on a screen with the same appearance, it will be difficult to tell at a glance what each button is, and users will have to focus on the text and icons to determine what they are, which will take time to correctly recognize them. To prevent this, clearly differentiate between the appearances of each button by considering priorities, etc, so that users can quickly identify what type of action each button represents.

8-9. Don't rely solely on color

The percentage of people with color vision deficiency varies slightly depending on race and region, but overall statistics suggest that it is approximately 8% of men (1 in 12.5 people) and approximately 0.5% of women (1 in 200 people). To make interfaces accessible to people with color vision deficiency, designs that rely solely on color to convey meaning or distinguish visual elements must be avoided, and information must be conveyed without color.

Avoid distinguishing information solely by color differences, assuming that some users have difficulty distinguishing colors. Assist users in identifying information by using decorations such as borders and underlines, mapping by shape or position, and supplemental text.

8-10. Use a chart type that accurately conveys information

The choice of graph depends on what information you are trying to convey, but the human eye is not very good at accurately interpreting areas and angles when trying to quickly grasp quantitative data. Shapes representing sections (pie slices) are composed of different angles and arranged in different ways.

This makes pie charts more difficult to read than other charts, but there are ways to make them work by placing items closer to each other and adjusting the color scheme of their neighbors.

8-11. Limit the number of information chunks to seven or less

Psychologist George Miller discovered that the amount of information that humans can process in short-term memory is 7±2 items.

When there is a lot of information, it is better not to simply choke on it, but to prioritize it and organize it by relationship, so that the number of items in each memory is 7±2 or less.

9: Help Users Recognize, Diagnose, and Recover from Errors

What it means:

When users encounter errors, they should be able to understand what went wrong and how to fix it. Clear, actionable error messages are crucial to helping users recover quickly.

Best Practice:

• Human-readable error messages: Avoid technical jargon. Instead, explain the error in plain language.
• Offer solutions: Provide clear instructions or options to fix the problem.
• Visual cues: Use color coding (e.g., red for errors, green for success) and icons to draw attention to errors and guide users.

10: Help and Documentation

What it Means:

While a good interface should be intuitive, some users will still need help. Offer clear and easily accessible documentation and support features to guide users through unfamiliar or complex processes.

Best Practices:

• Contextual help: Provide help directly within the interface, such as tooltips or “Learn More” links near complex features.
• Searchable knowledge base: Create a comprehensive, searchable library of articles, FAQs, and tutorials.
• Customer support: Ensure users can quickly access support options like live chat or contact forms when needed.

10-1. Don't rely only on just icons

Icons are effective in intuitively conveying functionality, but if they don't convey meaning, users will misunderstand and become confused. It is preferable to use icons in conjunction with labels and to use them only to support the meaning of the labels. Even if you use an icon by itself, be sure to limit it to common icons that convey the meaning, and use tools such as tooltips to help users understand.

References:

• Broin, U. Ó. (2018). Heuristic Evaluation of User Interfaces: Exploration and Evaluation.
• 10 Usability Heuristics for User Interface Design (nngroup.com)