10 Usability Heuristics for UI Developers - Part 2

10 Usability Heuristics for UI Developers - Part 2

In my previous blog article, I discussed the first five usability heuristics for UI developers including, visibility of system status, the match between the system and the real world, user control and freedom, consistency, and standards, and error prevention. Continue reading to discover the last 5 usability heuristics.

#6 Recognition rather than recall

“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.”

Offer in-help context, with the use of tooltips on hover. Keep icons consistent. You may have multiple designers on a project and not enough communication between the UX/UI designers. Or perhaps there isn’t a design system. Every set of eyes on the application helps keep consistency.

#7 Flexibility and efficiency of use

“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.”

One of the easiest shortcuts to implement is shortkeys. How often do you use them while working? Experienced users are adept at using shortkeys, and will learn them quickly. Has a user performed the same action multiple times within one hour? Building in keystroke events is just as easy as building onClick events. And, the more key events you have, the more accessible your application. Have a snackbar open on the top center, letting the user know that a shortkey is available for that action.

#8 Aesthetic and minimalist design

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.”

This isn’t the early 2000’s – Flash has officially been deprecated, and overkill animations make your site look outdated. People don’t come to a website or application to be “wowed”. They come for a purpose. Unless your website is purely for entertainment, don’t bother with overkill animations. Animations should be to convey change, and be quick and short. If a designer includes something that seems superfluous, ask if it has to be included. In the application I’m currently working on, we have so much information to keep on the page, that we’re only including information that’s absolutely necessary.

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

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

If a user visits a website, and the only thing they see on the page is “500 error”, only developers will understand that’s a server error, and there’s nothing they can do about it. Very similar if you’re only returning Java errors in system language. Create case statements to return human-readable language. For instance, if you’re validating data against data type integer, then returning “NaN” is very confusing to the user. You should return: “Incorrect number format. Only characters 0-9 are permitted”. Always give users an avenue to fix the error. 

#10 Help and documentation

“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.”

The best system absolutely has in-context information to help the user, whether it be tooltips on icons, or a general info icon with a popover. However, the user sometimes needs more guidance, depending on the complexity of your system. A help document typically fits very well in a right drawer that pops out either beside or on top of your system. This allows the user to read the documentation as they’re using your system, without having to flip back and forth between the two. Consistently keep a help icon either on the top right or bottom left of the system.

 

 

New call-to-action

 

About Author

Comments

Add Comment