Overview

Designing a digital interface is all about asking the right questions and then applying design heuristics and components to your design. Sound simple? It’s not.

This article will give you an overview of designing interfaces and what it takes to be an interaction designer. I’ll get into some detail about what you need to know as well as provide some details about understanding users and how to apply 6 best practices to fix problems in existing designs, as well as invent new ways of designing interfaces.

There are several best practices to consider when creating digital products that have interactive elements. Most Interaction Designers have been taught a set of 10 usability heuristics, created by Jakob Neilsen.

10 heuristics from Jakob Neilsen

  1. Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
  2. Match between system and the real world: The system should speak the users’ 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.
  3. User control and freedom: Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
  4. Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing.
  5. Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
  6. Recognition rather than recall: Minimize the user’s memory load by making 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.
  7. 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.
  8. Aesthetic and minimalist design: Dialogues should not contain information which 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.
  9. Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
  10. 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.

Another good reference is from Bruce “Tog” Tognazzini. He created a similar list that is also a great reference when designing digital interfaces.

Applying heuristics to your design process

The above 10 heuristics should be a reference point when you first start out as an Interaction Designer. Keep them close and refer to them as you design your site or application. You should also keep them in mind when you test the design with users. As you start to think about your design and user interactions make sure you refer back to the heuristics. You should begin to ask yourself questions in reference to your design which align to these 10 heuristics.

For instance, take the first heuristic from above, Visibility of system status. This might be the most important one (maybe). It’s critical to constantly inform the user about what is going on as they interact with the screen. A human’s eyes are constantly moving, searching the screen. It’s easy for us to lose track of the next best action or information that they should be focused on. This is especially true for users who are on the phone talking to customers. If your user is talking to a customer while trying to use a system it’s all about speed. This is true for your user and for the customer. Keeping the user informed of system status will help keep your user efficient and productive.

There are several ways to keep them informed. Depending on the situation you may want to use an animation to draw the attention of the user’s eye toward that part of the interface that needs their attention. There are consistent colors and icons that can indicate the state of an application at a given time and have become standard in the industry.

For example, the colors red, yellow, and green are typically used to convey meaning to the user. Consistent use of icons is also a way to indicate the state of the interface. A stop sign is pretty well known. As is an exclamation point and yield sign. These patterns and colors can vary from designer to designer but are a convention that most sites and apps use.

We addressed how to inform users about what is going on, now let’s look at a few more heuristics and ask some questions to understand how they apply to your design. One of my favorites is #5, Error prevention. The reason this one means so much to me is that it not only keeps the user from getting frustrated but also saves them time which saves the business money!

One way to keep users from making errors is to only allow them to select components and data that is allowed based on the use case and scenario. For instance, don’t allow them to select a date that is in the past if that will cause an error. Another reason I like this heuristic is that it is easy to apply. Think of it like this. If you create an interaction and the result is an error based on user interaction, then second guess the interaction, the data, and get to the core of the problem. Make the interactions available at the right time and for the right reasons and get rid of information or interactions that are not needed.

This last statement leads us to #8, Aesthetic and minimalist design. Only include the things that are needed for that step or interaction and get rid of everything else. Think about the page in layers. If you’ve ever used PhotoShop then you understand what I mean by layers. Another way to think about making a design as minimal as possible is to use progressive disclosure. This method allows a designer to unfold the page as the user takes actions. Thinking about your design in this way will also help you apply the previous heuristic, Error prevention. It forces you to think about the relationship between the data and what is needed by the user for a particular interaction.

While each heuristic is important another one of my favorites is #2, Match between the system and the real world. You have to understand what is really happening when you’re designing enterprise systems.

As an interaction designer you are not only responsible for designing the interface. You are designing a conversation between each of the departments and people involved with the project. – James Weaver

The user is having a conversation with the team behind the project that designed and developed the interface. All of the conversations that took place prior to the design and after it was published to the end user are as important to the designer as the tools he or she uses. In my opinion, understanding the conversation is actually the most important thing. You have to really understand what is needed in order to get the design correct. The design is “simply” a translation of that conversation.

I’ll wrap it up with another quote.

If you can’t explain it simply, you don’t understand it well enough. – Albert Einstein

 

Thanks for reading!