The UX Factor /

10 Quick wins to improve your user experience

Written by: Edgar Viveros

September 3 • 5 min read

Reading Time: 5 minutes

Picture yourself in a restaurant with your closest friends. You are taking a look at the menu and deciding what to have for dinner. You could possibly analyze each option, the calories they contain, the price and even the flavor you expect the dish to have. This would get you the most optimal decision, however, it’s nowhere near a practical way of thinking.

Your brain, surrounded by tons of information is constantly striving with the decision-making process, so recurring to shortcuts is a game changer in terms of satisfaction, not optimization. In the words of Herbert Simon, “satisficing” (satisfy + suffice).

Those shortcuts that your brain falls back on are called heuristics, and fortunately, there are some heuristics regarding usability which you can use in your favor to deliver a better digital experience.


A super brief history lesson

The word heuristic (pronounced /hjʊəˈrɪstɪk/) comes from the ancient Greek, meaning to discover or to find. The term refers to an experience-based approach for reaching an immediate goal.
Take it as a rule of thumb that more than a law, serves as a guideline.


The 10 Usability Heuristics by Jakob Nielsen

The 10 Usability Heuristics for User Interface Design were synthesized in 1990 by Jakob Nielsen and Rolf Molich. They analyzed 249 common usability problems and determined that those problems could be prevented by keeping in mind the following points:

1. Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

How to apply it right now:
Double check your loader components: animations, color changes, remaining time and completed sounds (for accessibility).

Dropbox UI showing the user feedback about his upload

Dropbox UI showing the user feedback about his upload


2. Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

How to apply it right now:
Double check your call to actions and make sure you would easily tell the same in real life. Also, make sure your icons resemble a real-world item. A great free tool for that is Material Icons.

Neil Patel CTA: Yes, I want to work with Neil

Neil Patel emphasizes human language and enthusiasm on his CTAs


3. User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

How to apply it right now:
Double check that your user has a cancel or undo option if he/she tapped or clicked somewhere by mistake.

Gmail: conversation moved to the trash. Undo?

Gmail offers an undo action whenever a message is sent or a conversation is moved to the trash


4. Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

How to apply it right now:
Double check your UI kit to make sure every component is consistent across the site.

Material Design UI Kit

Material Design, an open-source design system by Google


5. Error prevention

Even better than good error messages is a careful design which prevents a problem 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.

How to apply it right now:
Double check that delete actions need a confirmation step to prevent the user from deleting by mistake.

Mailchimp Delete Confirmation modal

MailChimp asks users to type the word DELETE before deleting a list by accident


6. Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

How to apply it right now:
Provide the user with a search history in case he/she needs to revisit the same page again in the near future.

Amazon Recently viewed items UI

Amazon browsing history makes it super easy for users to buy a product they were interested in the past


7. Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

How to apply it right now:
As your user becomes an expert, you should provide him with a little heavier content and advanced features such as search filters.

Airbnb value proposition, search bar and background image as home

Airbnb home page for a new (not logged in) user

 

Airbnb home page for an advanced (logged in) user


8. Aesthetic and minimalist design

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

How to apply it right now:
Less is more, if a component does not add any value to the user, it might not be worth using that space.

Google home page

Google home page, simple, functional and straight to the point


9. Help users recognize, diagnose, and recover from errors

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

How to apply it right now:
Double check your 404 page speaks human and provides useful links to keep the browsing experience in case your user lands there. Remember that a 404-only message does not mean anything to the user.

Github 404: This is not the web page you are looking for

Github 404 page provides the user with useful links and a search bar to find code, projects or people


10. Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

How to apply it right now:
Double check your site has a brief Frequently Asked Questions, or a getting started section.

React docs page

React provides the user with the documentation and tutorials to help him reduce the learning curve

Recap

Usability Heuristics are a great starting point for every project, they can speed up your design process and a heuristic evaluation does not consume too many resources. However do not forget to treat them as guidelines, not as magic pills.

Bonus: If you are a Google Chrome user, you can download the UX Check extension, and you’ll have the usability heuristics at hand every time you need them, make annotations and share them with all your team.

Written by:

Edgar Viveros

Digital Designer & Front-End Dev

Edgar is a digital designer at espacioenblan.co with a background in front-end development. He is focused on helping businesses translate their value proposition into useful and attractive digital products.

Share the 💖