Written by Fatima Kanji

Akendi is a user experience design firm that uses their own guidelines when designing or re-evaluating an existing system.  These guidelines can be broken down into 7 design principles for optimal user interaction.


 

At Akendi, we use design principles when designing, conducting heuristic reviews or analyzing the results of a usability test. These design principles help keep users and the purpose of our design at the centre of our process.

We recently updated our design principles to create a shorter, more memorable and encompassing list. Our hope is that these design principles will also help you guide your design process or evaluate your existing system – be it a website, mobile app, wearable or any other user interface.

There are seven Akendi Design Principles:

  1. Show Users What They Need
  2. Build on What Users Already Know
  3. Empower Users
  4. Save Users Time and Effort
  5. Respond to User Actions
  6. Help Users Out of Trouble
  7. Support Users’ Capabilities

In this post we’ll first explain how these principles fit into a model of Human information processing and then delve into each principle more deeply.

The Model

The principles are organized around Wickens’ Model for Human Information Processing (for more details see the blog post “Using the Wickens’ Model When Designing).

The model illustrates the stages of interaction between a user and a system (website, application, product, service, etc.). For every interaction the user must perceive information (see), internalize information (understand), decide on a course of action (decide) and then put a plan into action (act). The system’s job is to respond (react).

Akendi’s design principles map to each interaction stage, as shown in the diagram below. The first four principles are applicable to the user interaction steps of see, understand, decide and act. Principles 5 and 6 are relevant to the reaction of the system. The final principle, “Supporting User’s Capabilities” applies to all stages of interaction.

Interaction Model between the user and the system and how Akendi’s Design Principles align with the stages of the interaction.

 

The Principles

art_Blog-Principle 1 Principle 1: Show Users What They Need

Information must be presented to users in a way that is easily recognized and understood. The information that is most important to the user should be more salient than the surrounding noise and presented redundantly where possible.

  • Select colour to ensure appropriate contrast
  • Size targets (e.g. buttons, links) so that the user can easily find them
  • Reduce distractions that can be confused with the target

No matter what type of system you are designing, people will interact with it to do something. Ideally, everything that users need to accomplish their goals should be clearly visible and not hidden by unnecessary information.

Two things are important to consider in this regard: knowing what your users’ primary tasks are and creating an interface with clear calls to action for those tasks. Even if your user simply needs to get information, it is critical to ensure that information is legible for the particular context of use.

For example, for a 10-foot TV experience, the size and the contrast of the font should be readable in a dark room from 10 feet away. Similarly, for an airline website, the section where users can book a flight should be the most prominent and visible feature on the page. Imagine if you had to spend time searching for where to start? It would be frustrating to say the least.

 


art_Blog-Principle 2

 

Principle 2: Build on What Users Already Know

Users possess a large amount of prior knowledge or experience with similar systems. The closer the design aligns with existing knowledge and experience, the less learning required.

  • Match users’ mental models
  • Maintain conventions with other systems and within your system
  • Use clear and unambiguous language

As users gain experience they build an understanding about how things work. Consider the gear icon and what it means to you. It has been used in so many places that people naturally associate it with settings. Creating a new icon for settings in your system may just confuse those who expect to see the same universal conventions across the board.

Even before some of these common conventions became universally recognizable, they were designed with the intent to build on what users already know. For example, the gear icon originated from the inner workings of a watch and the trash icon from an actual garbage can; each of these metaphors helped users understand system behaviour based on how things work in the real world. Using metaphors or structuring your design to mimic workings in the “real” world will help users understand new concepts or make sense of what might otherwise be deemed as too technical.

It is also important to maintain consistency within your own system. For example, if all of the calls-to-action are placed on the bottom right in one part your design, be sure to maintain this convention throughout your design. Keeping things consistent across your interface, even in different sections, will not only help users become comfortable with your system, it will save time and prevent mistakes.

Finally, using plain language in your design will help ensure people understand what they are reading. Technical jargon or ambiguous menu labels and calls to action can stop users in their tracks or lead them down the wrong path.

 


art_Blog-Principle 3Principle 3: Empower Users

The flexibility to attempt novel actions without the fear of repercussions encourages user exploration and improves the transition from novice to expert.

  • Provide clear, visible navigation structures
  • Support multiple paths to a goal
  • Have a familiar, “safe” location to which users can always return

Users should always be aware of their current location within the system, know what options are available to them and understand how to get to where they need to go. A clearly evident or visible navigation structure helps in this regard and empowers users to achieve their goals. If people cannot discover features, they will likely never learn of their existence. Very few attempt novel actions for fear of “messing something up” and even fewer will resort to the manual or scour the Internet to master your interface. If they are confused and have another option, they may choose to go with your competitor.

Not all navigation structures are equal. With smaller screen sizes, we often see menu bars that are hidden. Becoming more pervasive is the three-line hamburger icon that provides access to navigation with a smaller footprint. However, all users do not yet recognize this icon, and when the menu spans multiple levels, it can be disorienting when moving between levels. A consistently visible navigation structure typically outperforms the hamburger menu and is a better orientation tool, although it may not always be a viable option if it takes up too much room on the page.

It is often a good idea to provide multiple methods to get to a particular destination. For users who may not discover the hamburger icon, having links on the home page that lead out to key content areas provides a redundant path that may be more discoverable. Similarly, redundancy within a menu can be helpful. For example, one person might search for a lawnmower in the garden section of a website while another might simply look for power tools; having a path to a lawnmower in both sections helps both users accomplish their goal.

When people do get lost in an interface, they look to an easy and quick way to get back to where they started. In most cases, this is the home button or home screen. Usually, the company logo, a home icon or a button with the word “Home” is well understood. Additionally, many users also look for “breadcrumbs” to help orient them or guide them back to where they started. No matter what the method, it is essential to ensure that users can return to that familiar location or state of the system.

 


art_Blog-Principle 4Principle 4: Save Users Time and Effort

Don’t make tasks unnecessarily difficult for the user. Provide support for improved efficiency for expert users.

  • Use defaults, or automation to reduce effort
  • Provide shortcuts for expert users and guidance for novice users
  • Structure your layout so that users can efficiently quickly complete tasks

Extra steps, repeat data entry… all those things that bog people down and seem highly unnecessary can often be eliminated. Streamlining a user’s process will make an interface more enjoyable and save time and frustration. A simple example of this is a checkbox that sets the shipping address to match the billing address, saving the need to enter in the same information twice. Going one step further, providing smart defaults also allows users to get through tasks more quickly. If the majority of people select the same options on a form, prefilling the form with the most common values not only saves time, it also serves as an example for novices and helps prevent error. Most go with the default behaviour, so the creation and selection of default values should be carefully considered.

Depending on the interface, novices and experts may need to be supported in different ways. For example, walking first time users through tax return software via a step-by-step wizard will save them from having to figure out what forms they need and in which order to fill them out. On the other hand, wizards may not be the ideal method for experts who may just want direct access to the forms. Supporting each of these groups in their own way will help them be more efficient.

The layout of an interface can also affect a user’s efficiency. Fitts’ law teaches us that it will require more effort to move between two targets if they are physically farther from each other on screen. Thus, it is best to keep tasks that are performed together in close proximity to each other. Similarly, a small button will be harder to accurately click/press than a large button. Think about using a mobile site that has very tiny links; it often requires time to zoom in and accurately tap on the button you want, and if you make a mistake, there are even more steps involved to correct it.

 


art_Blog-Principle 5 Principle 5: Respond to User Actions

For every user action there must be an appropriate response. This is dependent on the task, the context and the user and should be clearly communicated by the system.

  • Provide feedback about the completion of actions
  • Respond to actions in a manner that is timely and meaningful
  • Show state changes clearly

Have you ever clicked on a button, waited a few seconds, and then wondered if you were successful at clicking on the button? When this happens, users are left unsure of their actions and the state of the system. Good designs provide feedback when actions are initiated or completed and communicate what the system is doing. Feedback also prevents people from clicking on the same button repeatedly and slowing the system further.

Where possible, it is important to ensure that system response is timely or that users can continue doing their tasks while the system catches up in the background. When there are delays, it is important to keep users informed about the state of the system. If the delay is only a couple of seconds, a spinner or hourglass icon may suffice. For anything longer, indicating the length of the wait via a progress bar or some other means is recommended.

Other state changes are also important to clearly communicate. Have you ever used a conference line, a headset or even your cell phone and frantically worried whether or not you were actually on mute? A clear indicator of state helps avoid this confusion and keeps users at ease.

 


art_Blog-Principle 6Principle 6: Help Users Out of Trouble

Design forgiving systems and prevent error where possible. When error occurs, minimize the harm and help the user recover.

  • Prevent potential errors and suggest alternative paths
  • Allow users to recover from error and minimize the effort required to do so
  • Provide meaningful, in-context error messages that include recovery instructions

The best way to help users out of trouble is to prevent them from getting there in the first place. When possible, design to prevent error by using constraints and suggestions. For example, limiting a phone number entry to 10 digits and using separated input boxes or automatically formatting the phone number (with dashes, spaces or parentheses) tells users that an area code is required, helps them easily recognize mistakes and also prevents them from entering too many digits. Similarly, search suggestions help place users on the right path when they enter a search term that is unlikely to generate results. Additionally, people expect to be informed if an action they take is not reversible. For example, when deleting multiple items, provide a warning message that gives users the option to cancel before any permanent damage is done.

It is always a good idea to design a system that is forgiving and protects people’s work. In some situations, errors cannot be anticipated. For example, there may be a network interruption or a person may decide to go back a step in a form to change something. Saving a user’s work (e.g. data already entered) or place (e.g. position in a multi-step process) goes a long way towards reducing the frustration associated with these kinds of errors.

When errors do occur, it is important to let users know before they proceed too far. If someone is filling out a multi-step form and enters incorrect information (e.g. an invalid postal code), inform them within that step and prevent them from moving on to the next step. Providing an error notification in context, rather than toward the end of a long process helps people recover quickly and with less frustration. The manner in which error messages are presented greatly impacts a person’s ability to recover. An error message should be clear and designed for a user to understand, not a developer. Obscure number codes don’t help people figure out what is going on. Plain language error messages that indicate how an error can be fixed are a better way to go.

 


art_Blog-Principle 7Principle 7: Support Users’ Capabilities

The manner in which the user can interact with the system will be restricted by the limits of the individual. While automation can alleviate some demands placed on the user, the user should never be completely out of the loop.

  • Limit cognitive workload
  • Reduce physical effort
  • Ensure accessibility for users of different abilities

Inherently, everyone has limitations on how much they can remember or mentally process at a time.   The Hick-Hyman law shows us that as the number or complexity of choice increases, so does processing time. The context a user is in can also divert mental resources away from a system. With mobile platforms, for example, it is hard to predict how distracted one will be when using a device. Thus, it is important to reduce cognitive workload when designing interactions. Progressive disclosure is a popular method that initially shows only the essential features needed for the task at hand and later discloses advanced features as necessary on a second screen. This method helps keep users focused without overwhelming them and speeds up processing time without completely hiding secondary features.

Reducing physical effort is also an important factor to consider. Have you ever used a menu that required you to continuously press on an item to see the submenu items in the list, or press and hold for a really long time to perform an action on a touch screen? Even seemingly easy tasks, when repeated multiple times can feel physically demanding. Automating repetitive tasks can go a long way in reducing both cognitive and physical effort, as long as users are kept informed of what is happening with the system.

Everyone comes with differing capabilities and limitations. When designing, it is important to consider the wide spectrum of audiences who may use your system, be it individuals with visual or hearing difficulties, mobility impairments, or cognitive disabilities. Redundant coding, for example, using icons, text or contrast in addition to colour will help convey information to those who may be colour blind or have limited vision. There are many resources online that can help you design or even evaluate your design for accessibility.