Better user interface design? Check out these 10 must knows
When it comes to user interface design, usability or interaction design, Jacob Nielsen is the name for that game. He is one of the pioneers in the user experience research and one of his most famous article is about 10 Usability Heuristics for User Interface Design. In my opinion Jacob has done great job by defining general rules which makes better user experience whether you are designing new mobile application, backend software or whole new concepts. These are the must-knows that acts as solid backbone for your design work. I would like to explain these with some real-life examples.
Visibility of system status
Example of this is downloading bars or indication of remaining waiting time. For example, Google Chrome web browser has this kind of visibility when web page is loading:
Match between system and the real world
For example, usually home page for application or software is represented with this:
In general system should speak user´s language and there is no need for cryptic system-oriented terms or conventions.
User control and freedom
There should be emergency exits and support for undo and redo. Gladly undo and redo are quite common functions with icons like these:
Or for example in Microsoft´s PowerPoint you get the dialog in case you want to exit without any changes:
Consistency and standards
There is no need to confuse users with your own cryptic words, icons or actions. Just use the common conventions that users are used to in general.
For example, if you want to refresh something, this is usually the icon for that kind of action:
Or this is to indicate for shut down or start:
“Even better than good error messages is a careful design which prevents a problem from occurring in the first place.”
One example of this is the requirement to retype new password if you are about to change current one:
This is to prevent the errors and problems in case you type your new password by mistake incorrectly.
Recognition rather than recall
“Minimize the user’s memory load by making objects, actions, and options visible”. Most simplified example of this is well-known functionality for copy-paste. Press Ctrl + C on your keyboard and paste it with Ctrl + V. In most of the modern applications you can copy-paste the information from another screen or from another application without any need to recall the information. Unfortunately, there are still some solutions which do not allow this for example via VPN but luckily amount of these solutions are getting smaller and smaller.
Flexibility and efficiency of use
Own preferences, user parameters or defaults are great concepts to increase the efficiency of use. For example, with Microsoft´s Outlook you are able to create your own signature which is always added to the end of the email message:
In this way you don’t always have retype your signature to each and every email that you send out.
Aesthetic and minimalist design
Less is more, they say. You don´t have to try to express your artistic feelings and emotions with super-duper colors and ornaments. Another bad way is to fulfill web pages with banners and blinking headers. It is far away from aesthetic design. You can get your message through also with minimalist design.
Help users recognize, diagnose, and recover from errors
In the age of internet, I think most classical errors are the 404-errors. Some of them are quite plain but some of them are actually helping the users to proceed or recover. For example, Airbnb has great 404-page:
Message clearly states what is wrong and also guides to check some another links in the page.
Help and documentation
“Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation”.
One example of this is in Visme.co. Help and documentation is nicely embedded in the user interface and you can hover on the (?)-icons to gain help and documentation immediately. Dialog can be understood easily and user knows what different choices mean:
Tuukka Martikainen, tuukka.martikainen (at) headstart.fi