The Principles of User Interface Design
“A bad UI is like an elephant in a room of blind people.”
A user interface is a medium through which a human being interacts with a machine or computer.
The goal of user interface design (or UI design) is to produce an interface that makes it easy and enjoyable for the user to carry out their desired task.
For example, it should be straightforward for a customer of a photo-sharing website to upload, organise and share their images.
When done poorly, user interface design can cost companies millions of dollars.
In the case of the large US financial institution, Citibank, a confusing layout on the bank’s debt repayment platform meant a bank employee accidentally sent $500 million to their creditors instead of only their interest payments which totalled $7.8 million. Oops!
Imagine that phone call….
”Hi there, slight problem, I accidentally overpaid our bill by $492.2 million, can we have that money back please?” 😂
As we alluded to earlier in the course, there are many principles to consider when it comes to UI design.
One of the most comprehensive is Jakob Nielsen’s 10 Usability Heuristics which are as follows:
#1: Visibility of system status
The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time.
E.g. “You Are Here” indicators on mall maps have to show people where they currently are to help them understand where to go next.
#2: Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
E.g. When stovetop controls match the layout of heating elements, users can quickly understand which control maps to which heating element.
#3: User control and freedom
Users often perform actions by mistake. Therefore, they need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
E.g. Digital spaces need quick “emergency exits,” just like physical spaces do.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. See Jakob’s Law.
E.g. Check-in counters are usually located at the front of hotels. This consistency meets customers’ expectations.
#5: Error prevention
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 committing to the action.
E.g. Guard rails on curvy mountain roads prevent drivers from falling off cliffs.
#6: Recognition rather than recall
Minimise 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.
E.g. It’s easier for most people to recognise the capitals of countries, instead of having to remember them. People are more likely to correctly answer the question ‘Is Lisbon the capital of Portugal?’ rather than ‘What’s the capital of Portugal?’
#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.
E.g. Regular routes are listed on maps, but locals with more knowledge of the area can take shortcuts.
#8: Aesthetic and minimalist design
Interfaces should not contain information that is irrelevant or rarely needed. This is because every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
E.g. An ornate teapot may have excessive decorative elements that can interfere with usability, like an uncomfortable handle or hard to wash nozzle.
#9: Help users recognise, 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.
E.g. Wrong way signs on the road remind drivers that they are heading in the wrong direction and ask them to stop.
#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.
E.g. Information kiosks at airports are easily recognisable and solve customers’ problems in context and immediately.
If you found the above helpful, then you might enjoy our upcoming UX Design course made in partnership with the world-renowned Parsons School of Design.
It’s packed full of industry case studies, expert practitioners and practical tools and techniques you can start using straight away.
