Disclaimer
Some of the solutions for bad examples are not associated with the official software/hardware product of that company. It’s purely based on educational purposes.
My responsibilities & contributions
- Participate & organize the activity, and documenting all the key points.
- Design of the cover art for each heuristic.
- Designing solutions for bad examples of each heuristic.
Jakob Nielsen’s 10 general principles for interaction design. They are called “heuristics” because they are broad rules of thumb and not specific usability guidelines — NNGroup
Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. These 10 Heuristics are also used while doing a usability review for a interactive system.
1. Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
1.1 Good examples
a. Internet Download Manager (IDM)
Clear visibility of system status
All the essential information (download state, completion percentage, time left, transfer rate, and the last try date) required to track a file download are clearly visible.
Better control of the system
Clear visibility of download status helps the user to take better control of the system with right actions.
Ex. If the download is stopped unknowingly, there’s no transfer happening which helps the user to resume the download.
Clearer progress information
Clearly showing the overall download progress bar, and the individual connection’s progress bar. This helps users to have better understanding of the system’s state.
Clear communication builds trust
Communicating the Resume capability of the server is the most important piece of information for a user to know. It helps users if they can pause the download or not.
Appropriate and specific feedback for the user
Clearly mentioning the state of the download as complete along with some essential information like, file size, download location, server address. Plus, it suggests some useful actions to take after the completion.
b. Amazon order tracking
Clear visibility of system status
The current status of the package is clearly shown along with when was the status updated. On a quick glance, the date of delivery is displayed in big letters to improve visibility.
Clearer progress information
The overall progress of the order is visible clearly on timely basis.
Clear communication builds trust
In-detail transit information updated right from the date of order placed to out for delivery builds trust and patience in Amazon’s customers.
1.2 Bad examples
a. Slack’s UWP(Universal Windows Platform) app
✖ Clear visibility of system status
There are no shimmers or any message that displays the app’s current status (successfully running or some runtime error).
✖ Clearer progress information
There’s a blank screen which is be visible for 4–8 seconds during the app’s startup. It would really help users to know the progress information of the app’s launch.
Solution (Slack loading state)
b. ASUS X555LB’s keyboard (Caps lock, Number lock key)
✖ Clear visibility of system status
It is highly impossible to know whether the lock is turned ON/OFF without typing something. In physical keyboards, there are LEDs to indicate this status.
✖ Clear communication
There should be a always-on communication of the state. If having the LEDs hinders the aesthetics of the laptop, they can at least have a software stats indicator.
✖ Better control of the system
Having a clear and visible communication of system status promotes users to have better control of the system. If they want to perform any action, they will first have to check the status manually, and then perform the desired action.
Solution 1 (LEDs in keys)
Solution 2 (Software alert)
c. [BONUS] Marsboy portable Bluetooth speaker
✖ Clear visibility of system status
When the battery is very low, it does not explicitly indicate that to the user. We may have to assume that the battery is dead when it does not turn on.
✖ Clear communication
It does not indicate the battery status explicitly. Even if it is not very precise for example like 59%, it can somehow show what’s the battery status.
Solution (LED Indicator)
2. Match between system and 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.
2.1 Good examples
a. Zoom meeting (Recording icon)
Following real-world convention
In the real-world, a red diode (LED) for indicating the state of recording was widely used in portable camcorders or the Handycam.
Familiarity with potential user group
Most of the people from 15–20 years who use zoom in a company (Business users) can easily relate this icon with the traditional camcorder’s red LED.
b. Apple notes app & keyboard
Following real-world convention
The color scheme, interface texture, minute inner shadows are precisely used to relate to the real-world notepad.
Familiarity with potential user group
The potential user groups (students, home users, office users) would surely have used a notepad in real. This design helps them to revoke their cognitive memory and mental models while using a real notepad.
Using natural order
Generally, we write the title on the top, and then the date on the right. And, then we start to write our content with the support of the horizontal lines. This is an actual order of our writing style while using a real notepad.
Using design metaphors right
The little bumps in the keys “F & J” help users to easily relate with the real keyboard. Of course, it does not have any functional value but helps them feel familiar.
2.2 Bad examples
a. Windows file structure
✖ Familiarity with potential user group and speak users language
The concept of organizing files in windows was inspired by file structuring in office workspaces. When windows was introduced to the personal computers for home users, it was hard for the users to relate Folders and files in their daily life. The words directory, folder, root, etc were very new to the home users.
✖ Using natural order
In real-world, individual files are placed in a folder before organizing them in a cabinet. On the contrary, we can place the files in any level of the hierarchy in the windows file structure (Root directory, directory, etc.)
✖ Following real-world convention
In the real-world, you would not store music or video or photo albums inside an office folder. A major contradiction occurs between the office terminologies and the daily life use cases.
Solution (Spotlight / tutorial UI)
This helps new users to learn about the internal terminologies of the Operating system and how to use them? Using a pictorial representation along with an explanation helps them to relate with the real-world example.
This also promotes familiarity about the terminologies and concepts among general users. Thus, helping them to efficiently use the system. Plus, it can also be used to explain the user that a file can be placed anywhere in Windows.
b. Windows error message
✖ Following real-world convention
In real-world errors are not encountered with a scary sound like the one in Windows XP. And, error messages should me more human, understandable by anyone, and help the user to recover.
✖ Familiarity with potential user group and speak users language
Not every user is an expert in computers. So, using the error codes, technical language cannot help the normal users to resolve or understand the error state.
✖ Using natural order
In the real world, if someone informs us about an error we could ask for the possible solution or the way to resolve. But in computers, the user cannot easily ask the computer for suggestions to resolve the error unless some possible error resolutions are shown along with the message.
Solution (Better error message)
✔ Error sound can be changed to something that doesn’t cause any discomfort.
✔ The error messages can be more understandable to a normal user along with the possible cause of the error.
✔ The error messages can also suggest the user with possible solutions to resolve the error.
3. User control and freedom
Users often perform actions by mistake while trying to explore or accomplish a task. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process. Providing the options to undo or redo fosters a sense of freedom and control.
3.1 Good examples
a. YouTube Music’s premium subscription
Quickly backtrack on choices made
Once the subscription is purchased, the users can easily deactivate the subscription whenever they feel like. Making this easily discoverable adds an additional layer of trust, and dismissing the feeling of entrapment.
Not displaying action links in a new tab/page
Making the navigation easier by using pop-ups or lightboxes instead of redirecting users to a new webpage (new browser tab). Being able to accomplish their task on the same page gives the feeling of control to the users.
Make exit links easily discoverable
The subscription option is found inside the profile section on the top-right making it easily discoverable.
Support Undo
Providing additional options to go back from a state “Go back” and “Pause instead” brings more flexibility (Of course, there’s a business intent haha).
b. Amazon’s product details page
Quickly backtrack on choices made
Users can go back to top section after they’ve read the reviews and questions instantly without having to scroll all the way up. This could also be taken as a way to undo the actions.
Not displaying action links in a new tab/page
“Scrolling (Local links)” is another nice approach to display action links’ content instead of redirecting users to a new page/tab.
Make exit links easily discoverable
“Back to top” button is easily discoverable with its nice contrast ratio, and size.
3.2 Bad examples
a. You Only Need One (YONO) app from State Bank of India (SBI)
✖ Quickly backtrack on choices made
It is quite the struggle to go back in the navigation lane of the app. The only way to go back is to use the back icon on the top-left, and the other options like using the system back or gestures leads to exit the application.
✖ Not displaying action links in a new tab/page
Most of the actions take users to a new page which might not be a friendly to users in terms of trust and ease-of-use.
Solution (Bottom sheets)
Use of bottom sheets for quick user inputs could really improve the overall experience especially for reducing the navigation-based errors, and gives the freedom and control to the users. The easily dismissible nature of Bottom sheets is the key!
✔ The progress bar clearly indicates the current state of the process, thus giving the sense of understanding and control to the user.
✔ By using bottom sheets, users can stay at the same screen, but with an overlay. This can promote the reduction of cognitive load for the users. Thus, avoids jumping across multiple screens.
✔ With this solution, users can backtrack their actions anytime during the process.
b. Parachute coconut oil bottle
✖ Quickly backtrack on choices made
Since it has lid outlet on top for fetching the oil from the bottle with a non-removable cap. Once excess oil has been out, it can’t be put back inside because the top-cap is non-removable.
Solution (Removable cap)
Adding a removable cap to the bottle can facilitate people to put the excess oil back into the bottle. And, could eventually reuse the bottle for refilling the oil.
COMING SOON…
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose and recover from errors
10. Help and documentation
