UI Design Checklist 2024 for Improving Product Usability (Part2)

4: Consistency and Standards

What it Means:

Maintain consistency in your design by using familiar icons, terminology, and behavior across the product. When different parts of the system follow similar rules, users can apply their existing knowledge to new contexts.

Best Practices:

• Visual consistency: Use a uniform color scheme, typography, and iconography across the interface.
• Interaction patterns: Ensure that buttons, menus, and controls function similarly throughout the platform.
• Adhere to platform conventions: Follow design guidelines specific to iOS, Android, or web standards to meet user expectations for each platform.

4-1. Use the same title on the page after transition

Users may feel uneasy if the wording of the button and the title of the page after transition differ, therefore please use the same phrases whenever possible. By carefully selecting displayed words and phrases and paying attention to variations in notation and wording within the product, you can assure users and give them confidence in their actions.

4-2. Use consistent icon styles

If your icons are inconsistently styled, with a mixture of filled and outlined icons for example, it may confuse users. A filled icon can be interpreted as an element being selected. Outlining all icons with a 1.5 to 2 pt line weight and rounded corners improves consistency and gives each icon a similar visual weight.

4-3. Match function and color

Color has a great influence, and more than 80% of visual information is said to be "color information." Although there are some individual differences, it is known that colors have almost the same impression on people. For example, when it comes to the colors of signs, red is associated with "danger, prohibition, or error," yellow is associated with "caution," and green is associated with "safety/normality."

In design, colors that differ from the actual function or common user intuition should not be used. Using green to give a sense of security when the user's action is successful, and red for irreversible actions like the "delete" button can alert the user to the danger.

4-4. Differentiate between links and buttons

The line between buttons and links is blurry. Call to Action (CTA) buttons in apps often direct users to a new page when they perform that action. However, for accessibility, it's important to style buttons as buttons and links as links. So, if your app's CTA only takes users to a new page, use a link instead.

Buttons are used for actions that affect the front or back end of your website, and links are used for navigation and actions that don't affect your website at all.

5: Error Prevention

What it means:

Preventing errors is more efficient than allowing users to make mistakes and then correcting them. Design systems that guide users through tasks in a way that minimizes the possibility of errors.

Best Practice:

• Preventative constraints: Disable or hide buttons and options that don’t apply or that might lead to errors.
• Inline validation: Use real-time form validation to alert users of potential issues before they submit.
• Confirmation steps: For sensitive actions, like submitting forms or deleting items, require users to confirm their choices.

5-1. Maintain sufficient spacing between link actions

Larger buttons have a wider click area, which makes them easier to press; nevertheless, small buttons are arranged closely together, which increases the chance that you will press the wrong button by accident. Make sure the buttons are easy to press and minimize accidental clicks by adjusting the spacing between them based on their respective sizes.

5-2. Place buttons for irreversible actions far away.

To prevent users from inadvertently clicking the "delete" button, avoid placing irreversible actions like this next to other content.

5-3. Set tappable/clickable area to be wider

Users don't click or tap with the accuracy we believe. When they believe they have pressed something but are unable to, or when the place they should be able to press doesn't react, users become anxious or frustrated. Make a region clickable or tappable that is bigger than the displayed element.

5-4. Clarify the achievement status of conditions with real-time validation

To avoid mistakes when filling out forms with conditions, set up real-time validation. By making it obvious which condition is being met at any given time, input errors can be avoided, especially in forms with many conditions. Messages like "Please enter a valid email address" should be avoided because they are vague and leave users unsure of how to resolve the issue.

5-5. Display conditions before the user takes action

Nobody enjoys seeing their labor go unnoticed, and systems are no exception. Have you ever noticed a change in the perceived requirements for selecting a password after you tried to create one? Like being informed that passwords for the service you are trying to use are required to be 8 characters and yours was 7. Or the type or size restriction for files that you were trying to upload were made available to you only after you have put in the effort to upload it and instead got an error with the information?

The user experiences frustrations with inefficiency when the conditions of the system are revealed to them after the fact. Expectations, limitations, and requirements of the user should be made clear before the user puts in effort to interact with a system.

6: Recognition Rather than Recall

What it means:

Minimize the user’s memory load by making options, actions, and information visible. Instead of relying on users to remember details from one screen to another, provide cues and prompts.

Best Practice:

• Tooltips and hints: Offer helpful tips or descriptions when users hover over or select unfamiliar features.
• Pre-filled forms: Where possible, pre-fill fields with known information to save users time.
• Recent actions: Display recent searches, visited pages, or previously entered information to avoid making users re-enter data.

6-1. Display input suggestions

Typing strains the user's eyes and makes mistakes like typos and omissions more likely. Show text entry suggestions that correspond to the character you are typing. You can manage the time required to type by inferring what the user is trying to type as well as suggestions that are related.

7: Flexibility and Efficiency of Use

What it means:

Design should cater to both novice and experienced users. While beginners may prefer guided workflows, advanced users often seek shortcuts and ways to perform tasks more quickly.

Best Practice:

• Keyboard shortcuts: Provide power users with shortcuts to speed up interactions.
• Customization: Allow users to customize their interface, such as adjusting layouts or creating shortcuts to frequently used features.
• Streamlined workflows: Offer quick paths for advanced users while keeping more detailed instructions available for beginners.

7-1. Use radio buttons instead of select elements when there are three or fewer choices

When you wish to display options compactly to not sacrifice valuable screen real estate, choose elements are helpful UI components. For example; a drop-down menu's drawback over radio buttons is that you can't see all of the possibilities at once and it takes time to expand the options. When there are few options, use radio buttons; when there are many, use pick boxes. Keep these drawbacks in mind.

7-2. Differentiate between switches and checkboxes

Both switches and checkboxes can be used to set an item, but they operate differently in terms of when the setting is applied. You can choose a setting without pressing the "save" button because the switch is a toggle button. It is employed in situations where conditions must be met right away, such as when we flip a switch in real life.

For more nuanced or complex actions like configuring settings or preferences, we should use checkboxes. Only when the user presses an action button, such as the "Save" button, is the checkbox finally applied. If you need to make several changes at once, use checkboxes. If you only need to make changes in a few areas or a single change quickly, use switches.

If you are interested in the continuation of this series, you can read part 3 here.