Usability Heuristic #1 with examples
When I start the redesign of a product that has poor usability and time or resources are strapped, I often run a heuristic analysis as one of the first actions of the design process.
Heuristic evaluations provides me a baseline assessment to understand what corrective actions may be needed to be taken.
I personally use Jakob Neilsen’s 10 Usability Heuristics and I will present them in a series of posts with visual examples to make it easy for those who are not familiar, to identify them.
Let’s move further to see the first heuristic principle with examples! 🚀
1. Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
For every action, there must be a reaction.
This heuristic make it clear where you are and where you can go, keep the user informed about what is going on and what will happen next, so the user has all the information available when making decisions. That reaction or feedback can be in the form of 👁️ Visual , 👂Audio & 🖐️Haptic.
1.1 Important and timely feedback
When a user interacts with a system, the most important thing that needs to know is whether their action has been recognized. Getting feedback relays to the user that the system is working and reduces uncertainty about the user’s action.
Example 1, Thinkö
The following sign up process gives real-time feedback letting the user know, which password requirements have been fulfilled as typing, saving user’s time, energy, and uncertainty during the process.
Example 2,Wetransfer
A progress bar can be used to show how far along it is in a process. In addition, in this example we can see how the system notifies the user that the document has been sent correctly, detailing in turn, the name of the recipient and the file sent.
Example 3, National Geographic
On the other hand, a loader or spinner is helpful way to avoid showing the wait or load time rested. Skeleton states are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet. In most cases, action components (e.g. buttons, input fields, checkboxes, toggles) do not need to have a skeleton state.
Example 4, Monte de Piedad
Chips are a visual component used to display the information or to show some kind of action or filter. In this case, are used to show the filters applied on a results page.
1.2 Where the user is within the platform
Getting lost is not a pleasant situation. When navigating a digital product, is essential that users are informed of their current location and from where they get there.
Example 5, ASOS
The brand uses breadcrumbs and unfolded menu labels to indicates user’s location on the website and its journey.
1.3 Open communication
Users should always be informed of any changes or other king of info made in the system as well as communicate clearly the consequences of their actions.
Example 6, Linkedin
LinkedIn Thank you message. After applying for a position the service acknowledges the user that their job application has been sent successfully to the respective company.
Example 7, Iphone Toast tray
Toast notifications display the small message which was performed by the user or needs to be attended. The toast notification visible time varies from a short period to a long span of time. It totally depends on the requirement of that product.
The examples above are from real products and are great examples as a first approach to the visibility of system status.
The first heuristic principle encourages continuous and open communication. Uninformed users who don’t know about the system status can’t decide what to do and live in the uncertainty of not knowing what will happen next.
Thanks for reading! I would appreciate feedback and lots of love ❤️