PPL2021 — UI Design — 10 Rules To Make Your Design Spectacular
“Make it simple, but significant.” –Don Draper
When designing a digital product, such as website design, interface design, and etcetera. We often struggle with how to design a good design. Fortunately, Jakob Nielsen has already done extensive research, so you don’t have to. Nielsen’s comes up with ten usability heuristic for user interface design to become the ‘rule of thumb’ when designing a new design. A big company such as Apple has diligently adhered to Nielsen’s rule when designing its operating systems (iOS and Mac OS) and its website. And the feedback of the design usually is overwhelmingly positive. If a big company can get away with it, I’m sure we can too. This article will discuss 10 Nielsen’s Rule and how we can implement it in our project.
Visibility of System Status
The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time. By giving out the status, the user will know whether they have completed their task or not. For example, when designing e-commerce, the user wants to add an item to their cart. Every time the user succeeds in adding an item, a modal pop up that tells the user has successfully added an item like the picture below:
Avoid showing the status too slow. Too slow showing the status will makes the user wonder if the system is working correctly. Another tip for implementing this concept in your design are:
- Communicate clearly to users what the system’s state. The system should inform the user about their action to the system.
- Present feedback to the user immediately.
- Build your user’s trust by establishing open and continuous communication about the system’s status.
Match between system and the real world
Your user should able to understand each action meaning without you have to explain it to them explicitly. You can use wordings, pictures, symbols, and icons resembling accurate word and natural human language. For example, in the status bar below on my project, you can quickly know the bell icons will represent any new notifications. At the same time, the cart icon will convey about the user cart. And the user profile picture will tell about the user profile. Another example in the Twitter interface below is that you can quickly know the love icon represents likes, the arrow button means re-tweet and so forth.
Another tip to implement this concept in your design:
- Ensure that users can understand each icon, symbols, or wording in your design without looking it up.
- Apply universal design. Never assume user understand what you mean.
- Conduct user research to gain more perspective about your user.
User Control and Freedom
Accidents do happen. When it’s easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated. For example, the user could accidentally send an incomplete email or sending to the wrong recipient. With cancel message features, the user could undo their action easily.
A bad example is Instagram navigation. Even though many user backlashes about the notification item now replaced by the shopping tab. Instagram still go ahead with this decision. Please note that Instagram is a social media app, not e-commerce apps.
Another tip from Nielsen about implementing this concept to your design is :
- Support Undo and Redo.
- Show a straightforward way to exit the current interaction (back button, exit button, close button, etc.)
- Make sure that the exit is easily visible to the user.
Consistency and Standards
Consistency is crucially essential when designing a new product. The user has a limited cognitive load. If the user faces an inconsistent interface, it could increase the user’s cognitive load and make the user more prone to confusion. The excellent consistency can be seen above on the example cart. Using red colour for deleting items can help the user to identify which colour represents which action. Another good consistency is using the same indentation, font, and colour throughout your interface. For example, in my project, I use the same navigation icon on all my page. This will help the user to understand which action they can always expect from the navigation bar.
Another tip from Nielsen about implementing this concept to your design is :
- Improve learnability by maintaining both types of consistency: internal and external.
- Maintain consistency within a single product or a family of products (internal consistency).
- Follow established industry conventions (external consistency).
Error Prevention
According to Nielsen. Error should be handle gracefully, and the message should not condemn the user for what they are doing is wrong. But, preventing error before the error could happen is even better. According to Nielsen, there are two types of errors: slips and mistakes. Slips are unconscious errors caused by inattention. Mistakes are conscious errors based on a mismatch between the user’s mental model and the design. For example, in my project, Petani (farmer) wants to ask the operational teams. There will be a pop-up showing whether the user is sure they want to ask this question. This will prevent incidental asking a question they don’t want to ask.
Another tip from Nielson about implementing this concept is:
- Prioritise your effort: Prevent high-cost errors first, then minor frustrations.
- Avoid slips by providing helpful constraints and good default.
- Prevent mistakes by removing memory burdens, supporting undo, and warning your users.
Recognition rather than recall
Minimise 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. For example, in my project, the user could easily recognise the pattern of their order. From all, packing, shipping, arrived, or previous order. This will lighten the user information so that they could achieve their goal quickly.
Another tip from Nielsen when implementing this concept is:
- Let user recognise information in the interface.
- Offer help in context instead of giving users a lengthy tutorial to memorise.
- Reduce the information that users have to remember
Flexibility and Efficiency of Use
Shortcuts — may speed up the interaction of user that frequently use our website. Frequently visited features should be able to access easily. For example, in my example, the user wishlist without having to move from their cart page.
According to Nielsen, there is some tip that could be applied to your website to adhered to this rule, there are:
- Provide accelerators like keyboard shortcuts and touch gestures.
- Provide personalisation by tailoring content and functionality for individual users
- Allow for customisation, so users can make a selection about how they want the product to work.
Aesthetic and Minimalist Design
Have you ever see a well-designed website such as the Apple website, Twitter, Glints, Google, Tokopedia and many more. Even though this website designed by a different designer. They adhered to the same rule, minimalistic. Minimalist design has the same characteristics. They try not to overwhelm the user with unnecessary information. They also prioritise the content and features that user will most likely use. In our project, as you can see from the home screen. We only include a feature and content that matter the most, such as the navigation bar, search bar, and product list.
Another tip from Nielsen to implement this concept is:
- Keep the content and visual design of UI focus on the essentials.
- Don’t let unnecessary elements distract the user from their goals.
- Prioritise content and featured to support primary goals.
Help User recognize, diagnose, and recover from errors
Have you ever found an error when navigating some apps or website. And the error message make you more confused and don’t know what to do? That is an example of a bad implementation of error recovery. According to Nielsen, error messages should be expressed in plain languages where user can understand. Also, try to give shortcut or recommendation to the user on how to overcome their error. In our project, there will be so many errors that can occur. For example, when the user is logging in using unknown credentials or adding an empty stock item, we will always try to let the user know what went wrong and what they could do
Another tips from Nielsen to apply this concept is:
- Use traditional error messages, like bold red text.
- Use simple language.
- Offer a shortcut to solve the error.
Help and Documentation
Sometimes, documentation is essential. Some new users or non-tech-savvy users try to use your product. They need the documentation. You should provide documentation or tutorial if the user needs it. It could be shaped as a tutorial, FAQ, or dedicated pages that list all problems and how they should solve them. According to Nielsen’s, there are some tips that you could implement this concept:
- Ensure that help documentation is easy to search.
- Whenever possible, present the documentation in context right when the user requests it (such as a walkthrough tutorial).
- List concrete steps to be carried out.
We are reaching the end of this article. I hope my writing could help you design a better design for your digital product. Cheers!
