10 Usability tips for user interface design

The origins of UX design

To understand what usability for user interface design really is, we need to start with the origins. Donald Norman is considered the father of UX design with his studies into how the design of everyday things (such as doors and teapots) can help people understand how to use objects and systems, and conversely, poor design can lead to mistakes.

We often refer to these as ”human error”, however Don’s research suggested that design could be at the core of the problem.

Jakob Nielsen is a human-computer interaction researcher & web usability consultant. He is widely known for developing Nielsen’s 10 Usability Heuristics which are the basis of computer-based system design (web sites, computer systems, apps etc.).

Together, they co-founded the Nielsen Norman group which is a leader in user experience, conducting research into usability, training and certifying UX practitioners and providing UX consulting to clients.

So for this post, we’re going to explore 10 usability pillars. While these pillars are important for any website or digital experience, we are particularly interested in them for intranet experiences. We never want our employees to be frustrated with the tools we have invested in to give them a better and more productive working life.  

Jakob’s law

Users will anticipate what an experience will be like, based on their mental models of prior experiences on websites. When making changes to a design of a website, we need to try to minimize changes in order to maintain an ease of use. A simple example of this would be asking this question “Where would you automatically navigate to find a website search field?”. Almost no one would say anything other than “the top right hand corner”. So if your site design moves the search bar somewhere else, you’ll confuse your users. And the issue there is that search is a significant way in which users find information on your site – regardless of whether it is a commercial site or an intranet or something else.

Visibility of system status

The system should always keep the user informed about what is going on, through appropriate feedback within reasonable time. Here are some ways we can ensure this happens:

  • Keep users oriented and clear about where they are in the system or where they are up to in a process. 
  • Provide an indication of activity between the initiation of a command and its execution. 
  • Provide visual clues, like cursor shape and animation. 
  • Make it clear what has been saved and what hasn’t. 
  • Provide clear navigation clues. 
All of these tactics will minimise user frustration, and keep users on your site for longer.
visibility of system status

The importance of the connection between the system and the real world

The system should speak the user’s language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. This includes, but is not limited to:

  • Provide an intuitive visual layout
  • Concepts and processes that mirror what the user is familiar with 
  • Build a consistent model in user’s mind (mental model) 
  • Provide good mapping between the task and the system.
match between the real world and

User control and freedom

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. This is where we need to knuckle-down on the usability for user interface design.

When it’s easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated. Allow the user to control the interaction. 

  • Support multiple paths 
  • Allow users to backtrack 
  • Create a feeling of progress and achievement. 

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 

  • Conform to any existing processes or procedures. 
  • Be consistent across the system (words, objects, operations, behaviours). 
consistency and standards

Help users recognise, diagnose and recover from errors

Error messages should be expressed in plain language (no codes). 

  • Be as specific and precise as possible 
  • Be constructive: indicate what needs to be done 
  • Use a positive tone: avoid condemnation 
  • Keep consistent grammatical form, terminology and abbreviations 
  • Keep consistent visual format and placement.

Error prevention

Even better than good error messages is a careful design that prevents a problem from occurring in the first place. 

  • Avoid situations where errors are likely to occur. Errors should be predicted 
  • Provide only appropriate choices 
  • Warn users of potential problems before they take action 
  • Ask for confirmation of potential destructive actions. Use a message that clearly warns the user of the consequences of the requested action 
  • Provide a way to cancel the command.  
error prevention

Recognition rather than recall

Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 

  • Limit the number of items a user has to deal with at any given moment 
  • Let the design suggest the right action to do next 
  • Use task-focussed, user-centred labels and descriptive links
  • Reduce the user’s cognitive load (memory, calculating, understanding relationships). 
recognition rather than recall

Flexibility and efficiency of use

Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Provide alternative means of access and operation for users who differ from the “average” user (e.g., physical or cognitive ability, culture, language, etc.) 

  • Encourage exploration 
  • Support different methods to achieve the same end 
  • Accommodate a range of user sophistication and diverse user goals 
  • Provide logical information hierarchy 
  • Allow users to perform tasks in the fewest number of steps. 

Aesthetic and minimalist design

Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 

  • Create a layout that is aligned, clear and uncluttered 
  • Place information consistently 
  • Reduce complexity 
  • Use direct, active and positive language 
  • Group related tasks and give only a few choices any one time 
  • Provide suitable content and appropriate page length. 

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. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. 

  • Provide on-line help and guidance. 
  • Make it task focussed (“how do I…?”)
  • Make it easy to search
  • Keep it relatively short
  • Make it available in context (such as field level help)
  • List concrete steps to be carried out

References and further reading

If this post is of interest to you, we highly recommend Googling the following:
  • The Design of Everyday Things by Donald Norman
  • Emotional Design of Everyday Things by Donald Norman
  • Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, 3rd edition, by  Steve Krug
  • The Non-Designer’s Design Book, 4th edition, by Robin Williams

Online References

https://www.nngroup.com/

Get Insight!