Loading...

The Importance of Usefulness in UX and UI

2 min read

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.

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.

Who Is BrainGu?

BrainGu is a cutting-edge software innovation lab that dreams of, incubates, and scales technology that is dedicated to advancing our customers' mission. For us, developing software is job number one. We combine critical analysis, creativity, and technology to solve problems. Our goal is to develop mission-critical solutions built on the latest DevSecOps & Cloud Native innovations.

The solutions we build and deploy improve outcomes for the operators and end-users by automating the most time-consuming and error-prone aspects of their workflows. Our customers realize the kinds of change that finish tasks in days, not weeks, at a volume of thousands, not hundreds.

We focus on clean and well-documented interfaces for both humans and machines. Our data-centric approach to optimizing artificial intelligence and machine learning through well-defined schemas allows efficient reuse of components across highly scalable technology stacks.

About Us