Product Design using Nielsen’s Usability Heuristics

User Interface enables user to interact with the system, but User Experience makes user loves or hates your product. We’re gonna walkthrough on how to design your product from scratch using 10 Nielsen’s Usability Heuristics

Photo by Alvaro Reyes on Unsplash

First, Wireframe

Sounds cool right? Wireframe is an architectural blueprint of your product or people usually called it low fidelity (lo-fi) design. As a designer, wireframe helps you understand how your product structured, user flow, functionality, and intended behaviors.

Wireframe is a common practice in design process. It allows you or your team to present your stakeholders to agree where the information should be placed before actually make an actual design of it.

Wireframe should be cheap and quick, means that you should keep it as minimal as possible. Here’s some guidelines on wireframe:

  • Grayscale, no color at all, use your layout with various gray tones
  • No image, you can use square with an X in the middle to represent it’s an image
  • Use any font you want, its not crucial in wireframe process, make sure you can change the font’s weight and size

There’s a lot of wireframe tools available. Most popular one is wireframe.cc or Figma. Below is an example of our wireframe in our project,

Our project dashboard wireframe

Second, Mockups

After you’ve done with wireframe, there’s another process called Mockups. Mockup is a visual model of your product or high-fidelity (hi-fi) design. It means that it is closer to the actual design of the product.

Mockup includes visual detail as:

  • Colors
  • Typography
  • Spacing

Usually if your project under some company, they have product design guidelines you need to use in designing your mockup. Below is our mockup example using SIRCLO’s design guideline.

Our project dashboard mockup

Implementation of Nielsen’s 10 Usability Heuristics

Usability Heuristics for Bots. We review Nielsen’s seminal work on… | by Kevin Scott | Chatbots Magazine

They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines

In designing your product, you need to follow these heuristics cause its the golden standard of UI/UX design. Let’s explore one by one and our PPL project implementations.

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time

This heuristic means that user needs to know what’s the state of your product now. In our project, we bold user keyword to know that there is results answered.

TIPS:

  • Communicate clearly to users what the system’s state is.
  • Present feedback to the user as quickly as possible, you can tell users that the product is loading.

The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

This heuristics means that, when a design follows real-world conventions and have expected outcome, it’s easier for users to learn and remember how the interface works.

three dots

In our project, we use three dots to convey that there’s more information available in file hierarchies.

TIPS:

  • Make sure users can understand meaning without needing to search what it means.
  • Never assume your understanding of words or concepts will match those of your users, you should know your userbase.

Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.

This heuristics means that, when a product can undo an action, it give users the sense of control .

search bar

In our project, we use “X” on the search bar to allow users to clear the results.

TIPS:

  • Support Undo and Redo
  • Show a clear to way to exit, like an “X” or Cancel button

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

This heuristic means that, your product should be consistent all the boards, so that users know that he/ she still on that product. Our team follow design guidelines from SIRCLO because our userbase are SIRCLOs, like color blue, specific typography, and many others.

TIPS:

  • Maintain consistency within a single or family of products
  • Follow established industry conventions

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

This heuristic means that, user need to know how to prevent errors in a clear and informative way. In our project, we inform users that their search result returns nothing and gave users how to solve it.

no results found

TIPS:

  • Prevent mistakes by removing memory burdens, supporting undo, and warn your users.

Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

This heuristic means that, we need to minimize the user needs to remember how to use your product. In our mobile layout, we use hamburger menu to convey that there’s another layout to use.

mobile layout
when opened

TIPS:

  • Reduce the information that users have to remember
  • Let people recognize information in the interface

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

In login page, user can login with Google and there is no sign up process for it.

landing page

In dashboard, user can tailor search results using filter feature.

filter

TIPS:

  • Provide accelerators like keyboard shortcuts and touch gestures.
  • Provide personalization by tailoring content and functionality for individual users.

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

In dashboard, search results can return the information that user needs, like author, data created, modified by, and file location.

file component

TIPS:

  • Keep the UI content focus on the essentials.
  • Prioritize the content and features to support primary goals.

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

In login page, only specific people can login. When an anonymous person login, the product inform users that they not allowed to login with their account.

TIPS:

  • Use traditional error message visuals, like bold, red text.
  • Tell users what went wrong in language they will understand.

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

We currently does not apply this heuristics, cause the product is pretty straight forward, just search Google Drive documents and also because our userbase is known to know technical stuffs.

TIPS:

  • List concrete steps to be carried out.

TL;DR

Product User Interface is important in product development, because it is the first thing user sees when using the product. To design an User Interface, first we need to make wireframe, and then mockups. In designing your product, there is a 10 heuristic rules you need to follow to make your product more enjoyable to use.

That’s all i have right now, see you on the next one!

References:

What Exactly Is Wireframing? A Guide To Wireframes (careerfoundry.com)

10 Usability Heuristics for User Interface Design (nngroup.com)

Computer Science Student of Universitas Indonesia