Usability Examples: Good UI vs. Bad UI and How to Improve

You often hear that usability is high or low, but when asked what concrete examples there are, many people may not immediately picture one. This article, after organizing what usability is, explains concrete examples of good UI and bad UI and how to improve them, in a way that is easy for beginners to understand.

What is usability?

Usability refers to the ease of use of a product or service. It expresses how well a user can achieve their goal without getting lost, without stress, and correctly, and is distinguished from mere good looks.

The elements that make up usability

Usability is made up of several elements: ease of learning, efficiency of operation, resistance to errors, ease of memory, and satisfaction. Seeing these through concrete examples makes the substance of ease of use easier to picture.

Usability examples (good UI and bad UI)

Let's look at examples of high and low usability for familiar situations.

Input form example

• Bad example: the reason for an input error is not shown, the input format (such as whether hyphens are needed) is too strict, and required fields are hard to tell.
• Improved example: show the error location and how to fix it concretely, auto-correct the input format, and clearly indicate required versus optional fields.

Button and link example

• Bad example: it is hard to tell whether something is clickable, the button wording is ambiguous (unclear whether it means submit or register), and the tappable area is small.
• Improved example: make it visually obvious at a glance that it is a button, use wording that conveys the action such as start for free, and ensure an easily tappable size.

Navigation example

• Bad example: the menu categories are inconsistent so you cannot reach the target page, and it is unclear where you currently are.
• Improved example: organize the categories to match users' intuition, show the current location (such as breadcrumbs), and provide a search function.

Error message example

• Bad example: only an error occurred is shown, so you cannot tell what caused it or how to fix it.
• Improved example: show what the problem is and how it can be resolved in plain language, and where possible provide a path to the fix.

Problems that arise when usability is low

Low usability affects the business more than appearances suggest.

• Increased dropout and defection: difficulty of use increases the number of users who leave partway through.
• Increased inquiries: a confusing design increases inquiries to support.
• Lower conversion: stumbling right before purchase or registration greatly lowers results.

Points for improving usability

Based on the concrete examples, keep the following points in mind to raise usability.

1. Observe user behavior: watch actual operation and grasp where users get lost or stumble.
2. Reduce the effort to complete a task: reduce input fields and the number of clicks so the goal can be reached in the shortest path.
3. Keep consistency: give the same operation the same look and position, making the design predictable for users.
4. Measure and keep improving: repeat improvements while looking at data such as completion rate and dropout rate.

Summary

Usability is the ease of use of a product or service, and differences appear in familiar examples such as input forms, buttons, navigation, and error messages. Good UI is designed so users can achieve their goal without getting lost, while bad UI invites stumbling and dropout. Comparing good and bad examples and reducing effort while observing user behavior is the key to improving usability. Start by reviewing your own screens from the perspective of good examples and bad examples.