Skip to main content

The Importance of Usefulness in UX and UI

Tl;dr - To determine if a UX/UI is ‘Useful,’ we combine two qualitative measures, ‘Usability’ and ‘Utility.’ Usability measures how easy and pleasant a feature is to use, while ‘Utility’ measures its functionality. We explore usability and utility through five major areas. Learnability, Efficiency, Memorability, Errors, and Satisfaction.

The Importance of Usefulness in UX and UI
Learnability Icon
Learnability
How easy is it for users to accomplish basic tasks the first time they encounter them?
Efficiency Icon
Efficiency
Once users have learned the design, how quickly can they perform the task?
Memorability Icon
Memorability
When users return after some time, how easy is it for them to reestablish proficiency?
Errors Icon
Errors
How many errors are users making, how severe are they, and how easily can they recover from them?
Satisfaction Icon
Satisfaction
How pleasant is the design to use?

Usability Evaluation Criteria / Things to keep in mind when designing

1. Keep users informed about their status appropriately and promptly. (Always show status)
Thumbnail of a good example of showing users their status
GOOD: The J.Crew site displays a notification that there are “Only a Few Left!” when the user moves the mouse over low-stock sizes of a product. Some sizes are already sold out, and thus shown crossed out in light gray.
Thumbnail of a bad example of showing users their status
BAD: The Paradise Drinking Water site lacks breadcrumbs to indicate the user’s location on the websites and no way for the user to move back and forth between the pages other than the main navigation bar.

2. Show information in ways users understand - how the real world operates and in the users' language. (Be human and talk like one)
Thumbnail of a good example of using users' language
GOOD: The Yummly website does an effective job using icons that reflect their real-world equivalents and terms that make sense to foodies of all levels.
Thumbnail of a bad example of using users' language
BAD: The Seascanner site under cruise finder doesn’t speak the users' language, with words, phrases and concepts familiar to the user, rather sticks to system-oriented terms.

3. Offer users control and let them undo errors easily. (Give users the freedom to fix mistakes easily and quickly)
Thumbnail of a good example of giving users control
GOOD: In Gmail, if a user attaches a file mistakenly, they have the option to cancel uploading before it's fully uploaded.
Thumbnail of a bad example of giving users control
BAD: The iMessage app has no way for users to recall a text message (a feature that other communication apps such as WhatsApp and Slack do provide).

4. Be consistent so users aren't confused over what different words, icons, etc., mean. (Set a standard and stick with it)
Thumbnail of a good example of being consistent
GOOD: Google uses conventional menu items in its online applications. These menu labels and icons follow patterns of other competing and similar applications to lessen the user’s need to learn something new.
Thumbnail of a bad example of being consistent
BAD: Ling’s car is a unique website that lacks familiarity with the well-established website conventions in terms of terminology, actions, layouts etc.

5. Prevent errors – a system should either avoid conditions where errors arise or warn users before they take risky actions. (Minimize human error)
Thumbnail of a good example of preventing errors
GOOD: When booking a plane ticket on their website, JetBlue does not allow users to pick a return date that is before their departure date in order to prevent users from accidentally choosing a date that is too early.
Thumbnail of a bad example of preventing errors
BAD: Bitly website isn’t demonstrating error prevention by not telling me whether my email address/username or password was entered wrong or if I even have an account to login.

6. Have visible information, instructions, etc., to let users recognize options, actions, etc., instead of forcing them to rely on memory. (Don't make me think)
Thumbnail of a good example of displaying information
GOOD: Google search typing suggestion is an excellent example of contextual recommendations. As the user starts typing, Google Search suggests the relevant query, and this helps users find the relevant query in less time.
Thumbnail of a bad example of displaying information
BAD: On Yale University School of Art’s website, the content has absolutely no structure, and in addition, the footer, header, and sidebar are poorly designed. Overall extremely hard for the user to navigate and find any relevant information or actions.

7. Be flexible, so experienced users find faster ways to attain goals. (Optimize to the level of the current user)
Thumbnail of a good example of being flexible
GOOD: When one searches for a specific animal on Google, it summarizes all the available resources/information into pre-refined categories to help user to efficiently navigate and consume relevant information.
Thumbnail of a bad example of being flexible
BAD: Craigslist is one of the most visited websites but they have a link-based structure for the users to follow to check the necessary location-based information and complete various actions but no shortcuts.

8. Have no clutter, containing only relevant information for current tasks. (Keep It Simple Stupid)
Thumbnail of a good example of keeping it simple
GOOD: The Apple website is an excellent example of minimalism. Minimalistic products focus on content and remove all unnecessary visual design details. Many pages of the website are centered around one particular product or idea, and this makes it easier to prioritize information.
Thumbnail of a bad example of keeping it simple
BAD: The Gates N Fences website is extremely cluttered and contains a lot of irrelevant information and information that is likely not to be used often, taking the focus off of the user’s main goal.

9. Provide plain-language help regarding errors and solutions. (Help users in clear language)
Thumbnail of a good example of providing help
GOOD: On Hotels.com website the details and payment form provides alerts of what is wrong and what needs to be done to recover. The fields with errors are highlighted and itemized instructions are listed adjacently, void of error codes or technical jargon.
Thumbnail of a bad example of providing help
BAD: Blogger.com’s 404 error page does not tell users anything about what went wrong or how they can fix it, which can easily confuse users.

10. List straightforward steps in lean, searchable documentation for overcoming problems. (A manual should not be required, but is there if needed)
Thumbnail of a good example of documentation
GOOD: Slack’s Slackbot offers users an easy and readily accessible way of getting help. All users have to do is message the bot with their question and it will help them by either answering it or providing the documentation necessary to answer their query.
Thumbnail of a bad example of documentation
BAD: Ling’s car website does not offer any visible help or documentation, preventing users from being able to access help when they need it.

Related Posts

The BrainG-UX Philosophy The BrainG-UX Philosophy

The BrainG-UX Philosophy

An authentic user experience goes far beyond giving customers what they say they want. So we go deeper and research the underlying wants and needs of the end-user. To provide a high-quality user experience, we have to be seamless in our disciplines, which we discuss in detail.

Personas and Scenarios in UX Personas and Scenarios in UX

Personas and Scenarios in UX

A key to BrainGu's product designs is that we design products around people rather than teach people how to use our products. To do so, we understand our customers - their behaviors, attitudes, needs, and goals. We get to know the end-users/operators to create a design that will satisfy their needs.

The BrainG-UX Philosophy The BrainG-UX Philosophy

The BrainG-UX Philosophy

An authentic user experience goes far beyond giving customers what they say they want. So we go deeper and research the underlying wants and needs of the end-user. To provide a high-quality user experience, we have to be seamless in our disciplines, which we discuss in detail.