Your user interface is a critical component of your software product. It's the tool that your users use to access the application. If your UI is effective and efficient, your users won’t notice it, which is why most UI designers follow some fundamental principles.
In this article, we’d like to share a few key UI design principles. These are based on Jakob Nielsen’s 10 Usability Heuristics for UI Design, Ben Shneiderman’s The Eight Golden Rules of Interface Design, and Bruce Tognazzini’s Principles of Interaction Design, as well as some of our own thoughts.
1. Use Aesthetic and Minimalist Design
Keep your UI to a minimum. Don’t clutter it with unnecessary visual elements. Eliminate any information that doesn’t help the user in their immediate task. Reduce your display to only the necessary components without sacrificing the information they do need at the time. Anything that doesn’t belong won’t just get in the way - it will actually confuse your users.
Additionally, use language that is easy to read and understand. The system should speak the user’s language. You shouldn’t force the user to learn new system-oriented terms just to use the product.
Finally, it’s important to design your UIs for people of all ability levels, including those with low vision, hearing impairments, color challenges, or motor impairments. Great UIs are accessible to all groups.
2. Strive for Consistency
A consistent interface is one where the same design patterns and action sequences are used for similar situations. This includes layout, typography, color, language, screen flow, commands, menu items, and other elements.
For example, buttons that confirm actions should be styled similarly so users know they are committing to something. If you use a check mark icon to indicate that an action is complete, you should use that icon for all completed actions. But don’t use that icon for anything else!
3. Give Users Shortcuts
Frequent users who grow comfortable with your product want tools to use it faster. Provide them with abbreviations, macros, functions, or other shortcuts to help them personalize their experience and complete tasks quickly. Note how this menu offers shortcuts for functions you might repeat often.
That said, it’s important to keep the traditional methods of taking action available. You shouldn’t, for instance, remove your action menu from a screen because you assume the user will just use a shortcut.
4. Provide Clear System Feedback
It’s important to keep your users informed about what’s happening during each stage or screen of your application, especially if they just took some kind of action. This type of feedback should be relevant, clear, and meaningful.
The loading bar is the clearest example of this. A simple percentage indicator is often enough to make users feel comfortable that things are moving along, if they don’t understand what’s happening.
5. Make it Easy to “Undo”
Have you ever clicked the wrong button or made a mistake and panicked a little because you thought you did something irrevocable? We all have, which is why it’s so important to give users an opportunity to reverse. Plus, simply knowing they won’t be held accountable for their mistakes makes users much more comfortable with your product.
How you give users this power will depend on the nature of your product. In some cases, a simple “undo” button is all they need. In other cases, you may want to give them access to an entire log of action or a history of versions.
6. Provide Help Documentation
If a user requires help, ensure that there’s somewhere to learn more about the problem and solve their issues. You might store your documentation on a knowledge base site or include within the application using tooltips. Make sure that the content of your help documentation is relevant and useful.
Notice how Photoshop makes their help documentation accessible directly within the app. Users can open the help window in numerous ways so it’s always right there when they need it.
7. Reduce Short-Term Memory Load
Our attention span is limited. We can only maintain around five items in our short-term memory at one time, so we shouldn’t expect users to remember much. It’s more effective, therefore, to ask them to recognize information rather than recall it.
For instance, an ecommerce app might remind users what they recently viewed or purchased instead of expecting them to remember. Even a simple prompt such as “Are you sure you want to delete photo.jpg?” prevents the user from having to remember what they selected to delete.
Furthermore, you can reduce their cognitive load by limiting the number of actions required to complete a task. Long sequences are tedious and frustrating, so any task should be achievable in three clicks or less.
8. Give Plenty of Closure
Each sequence of action should have a beginning and end (and sometimes a middle). The purpose here is to close the gap so users aren’t left confused.
The beginning is the user’s action, such as clicking a button. The middle would be the information feedback that the action is happening (such as a loading icon). The end would be a message or indication that the action is complete or an error message that explains why it wasn’t completed.
Oh, and speaking of errors…
9. Make Error Handling Simple
Ideally your app won’t have any errors, but that’s not really possible. When an error occurs, your application should clearly explain what happened and how the user can solve it. Often this is as simple as adding an in-app message that explains the problem so the user can fix it.
In other cases, an in-app solution may not be possible. It’s important to make your error text unique so users can look it up in your documentation. You can also pair it with an error code.
10. Match Your System to the Real World
Aligning your app with the real world is key. Wherever possible, you should match the language and concepts users find in the real world to the same language and concepts in your application. This makes your app intuitive and helps users understand and operate it quickly.
For instance, most menus in the world use a logical flow where parent items represent broad categories and child items represent smaller categories. This hierarchical design is everywhere - restaurant menus, road signs, newspaper articles, etc. If you deviate from this style, you will most likely confuse your users.
The recycling bin on your desktop is another common example. It’s not a real recycling bin, obviously, but its visual representation helps users understand the concept.
11. Gives Users a Locus of Control
Locus of control refers to the degree in which people believe they have control over an outcome. It’s important for your users to feel like they have freedom and agency within your system. This means you can’t hijack them with interruptions, forced or locked sequences, and other surprises.
Aim to let your users be the initiators of every action. Does this mean you should never prompt them? No, but if you do interrupt them, make sure it’s for a good reason.
Final Thoughts
We’ve given you a set of UI design best practices that will push you in the right direction. They are applicable to most interfaces, but they are only the beginning. These design rules can only take you so far. Use them as a starting place, then run your own experiments to determine what works best for your application and users.