Nielsen Norman’s 10 Usability Heuristics for User Interface Designers are well-known throughout the UI design industry. However, it’s also important for UI developers to be aware of these design principles. Occasionally, even the best UI designers may design something that is difficult or impossible to code. Understanding these heuristics helps the developer to propose a solution that doesn’t violate these design principles.
“The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.”
Many times, designers don’t take this principle into account. It’s not typically initially wireframed, because the designer isn’t always aware of all of the system changes in the backend. Does your application autosave? Does your user delete or add items on a canvas? Modify data in a table? Your user needs to be informed that their actions are saved. And confirm that these changes have been successful. Snackbars are a great way to convey system messages to the user. And if the application auto-saves changes, a great place to put that save confirmation is where the user would look for a “save” button – at the top right or left.
“The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.”
I can’t even begin to tell you how many times I’ve had to steer a developer in a different direction with the language they try to convey on the front-end. Your end-users are most likely not developers. I typically think of my dad. He has no idea what I do, even though I’ve explained it a thousand times, in a language I thought he would understand. What language would your end-user understand? How would you translate the language into something your parent would understand?
“Users often perform actions by mistake. They need a clearly marked ‘emergency exit’ to leave the unwanted action without having to go through an extended process.”
Users need to be able to undo actions. This means that your database design needs to support undoing any actions the user may take. Have a mutation in your GraphQL layer? Guess what – be prepared to undo that mutation. When the user has a clearly defined ‘emergency exit’ it gives them confidence and a sense of control.
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”
Using industry conventions reduces the users’ cognitive load. If you’re using a UI library, such as Material-UI, then the designer should design to those specifications. The UI library shouldn’t be changed, except to adhere to your organization’s branding standards. This helps user interactions to be consistent. In addition to using a UI library, writing guidelines should also be used to help with consistency and in order to take different peoples’ opinions out of the picture. Chicago-Tribune and AP guidelines are used quite often in print. Microsoft has a great set of writing guidelines that are specifically for the screen. . Writing guidelines define standards such as capitalization, abbreviations, displaying time and dates, and units of measure.
“Good error messages are important, but the best designs carefully prevent problems 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.”
Does your application allow the user to perform a delete or another function that can’t be undone? Make sure you’re confirming with the user that they actually need to delete the item. Offer in-context tips on hover and constantly offer the user feedback so it’s clear that the user knows what they’re doing.
Stay tuned for the remaining 5 tips on Usability Heurtisitcs, which will be revealed in a few months. Note, if you have questions about testing your UI design or any usability concerns, feel free to reach out to us at info@keylimeinteractive.com.