This blog primarily covers backend topics and APIs. But if you’re a backend specialist and have to create or evaluate a user interface, where do you start? What’s the Effective Java equivalent for UI design?
Similar to the API Design Maxims for backend design, the Nielsen Heuristics are the closest thing that I’ve found to a cheat sheet when it comes to UIs. At least for me, this stuff was never covered in school, so they have served as a great reference in my work. In the end, it doesn’t matter how amazingly clean your backend APIs are if your frontend is clunky and poorly designed. These guidelines are incredibly valuable, so let’s dive in!
1. System Status
The system should clearly indicate its current state. If a user starts a process, the system should tell them what’s going on, how long it could take, and if there’s any action required on the part of the user.
2. Terms, Concepts, and Symbols
Stay away from technical jargon. Use clear, unambiguous language and symbols to represent functions so that they are interpretable and recognizable.
3. Freedom and Control
Overly constrained interaction might prevent mistakes, but they make people feel frustrated and hemmed in. Most of us learn by exploring functions in a system. That is a good thing. Just make sure the signposts are clear and provide an easily marked exit path when users make a wrong turn.
Not all users want the same display. Customizable interfaces help build operator trust.
4. Consistent with Established Standards
A user should not have to ask themselves, "Now, what does that icon mean?" Reusing a recognizable feature or resource is almost always preferable to reinventing something that is widely understood. Interface elements should behave predictably, based on what people have come to expect while interacting with similar systems. Similar components should be implemented identically within the same application.
This is essentially the principle of least astonishment applied to UIs.
5. Prevent Unforced Errors
A system should never lead users into making a mistake. Make sure everything is clearly labeled. Use features that will steer inattentive users into the least-damaging outcome if they hit the wrong button. Confirmation dialogs can be lifesavers.
6. Error Recovery
When something bad does happen, the system should clearly explain what is wrong and provide a way to diagnose and fix the problem.
7. Minimalist Aesthetic
Most interfaces have too much stuff crammed into them. If an element is irrelevant, rarely needed, or merely decorative, get rid of it. Visual noise makes interfaces difficult to learn, remember, and navigate. A well-designed interface clearly supports the top tasks, while organizing secondary, tertiary and other supporting elements in a sensible, navigable architecture to facilitate feature discovery when the users go looking for a specialized tool.