Home > Knowledge Bank > Best Practice Guides > User Interaction Design

User Interaction Design


What is User Interaction Design? 

According to the Interaction Design Association, Interaction design (IxD) defines the structure and behavior of interactive systems. Generally speaking interactive systems are all types of devices and systems that interact with humans. For our discussion, we only consider web interaction design.

For our consideration, we will talk about interaction design for the web. One important note to emphasize regarding web interaction design is that people often confuse interaction design with graphic design which is not totally wrong but also not totally true. Graphic design is only one part of interaction design. Designing a beautifully looking payment system doesn’t necessarily mean that people will like it due to the fact that there is more to the interaction than just the “graphic” part.

interaction design.001

Figure 1: Interaction Design Principles

Nowadays we live in a world where technology is getting embedded more and more into our life styles. People build their own interaction experiences through interacting with technology.  Interaction design is centered around people behaviors and how they think and the way they expect the interface to work. Remember: you are designing for people.

Next, we discuss the main user interaction design principles. There are five interaction design principles, these principles provide guidelines for interaction designers to promote their designs and richen users’ experiences.  The principles are:

1- Consistent

As humans we are always attracted by changes and differences, changes always grab our attention. When designing an interaction, we should think about the parts of the interaction that needs user attention and the parts that don’t. Differences and changes can lead to unwanted attention in which something that is irrelevant to the main interaction gets user attention or leads to confusion. An example of this is a navigation  system in which the navigation menu changes position, looks different, or behave differently across pages. This doesn’t mean that changes and differences across pages are bad, but it means that they should have meanings. Moreover, consistency also gives a sense of professionality to the design. The following are some guidelines for consistency in for web applications consistency:

  • Typographic consistency: font face, font size, font decoration, etc.
  • Color consistency: text color, background color, border color, etc.
  • Navigation consistency: navigation menu design, positioning, and behaviour, etc.
  • Hyperlinks consistency: should be in the same color throughout the website and should be distinguishable.
  • Content consistency: if a word or a phrase used in the interaction meant one thing, then it should mean the same thing wherever it is used throughout the interaction.

2- Perceivable

In order for people to actually interact, they need to know that the opportunity exists. It should be obvious to them when to start the interaction and it should not be left for luck or chance. Always provide hints that help identify chances for interaction such arrow that says click here, using different color to emphasize interactive elements from non interactive ones, etc. The following is a list of the things that improves perceivability:

  • Text should be legible. 
  • Icons should be easy to distinguish and read. 
  • Hyperlinks should be in different color and should be consistent. 

3- Learnable

When designing an interface, it should be easy to learn. In an ideal scenario, users  should be able to use an interface once, learn it, and remember the experience forever. Learnability is also related to harnessing users’ past experience, for example in a word processor application, an icon with the letter (B) should do what you expect it to do, depending on our past experience with word processors, to change the text into bold face. Practically speaking, users will have to interact with the interface a couple of times in order for them to learn it, the more they use it, the more they will learn it. Some guidelines for learnability:

  • Maximize usage of users’ past experience in your design. Anything that can be done such that it is similar to an interaction that users are already familiar with then do it.
  • If trying to do something new, then get some users to test it and get their feedback before launching it live. This often helps refining the interaction such that you end up with a more acceptable design and matches the requirements of the targeted audience.
  • Design for reuse: make your interaction design blocks as generic as possible so that you can use them in more than one part of the overall interaction.
  • Use language and symbols that are understandable by the targeted audience.

4- Predictable

In order for an interaction to be predictable, it should have clear answers to the following questions: where are the interaction opportunities?, what can be done? and what will be the outcome?. For example, landing on a payment page, users expect to intuitively identify how to proceed with the process, see how many steps are there, a way to go back and fix there any mistake they made with previous steps, and what will be the next step. The guidelines are:

  • Make your design as intuitive as possible.
  • Provide numbering for any process comprised of steps so users know how many steps left, clearly indicate which step they are currently in, and a rough estimation of how much time it would take to finish these steps. See Figure 2. 
  • Always make sure that things do what people expect them to do. For example, people know that buttons are clickable, so a button should always afford the behaviour of being clickable. 

Screen Shot 2013-07-31 at 10.54.11 AM

Figure 2: Predictable Interaction (Numbered Steps)

5- Feedback

Always provide feedback to users. Users need to be aware of whats happening inside the application, whether it is still working, having a problem, or done. However, feedback can take several forms and for a UI designer, the design should be as intuitive as possible. An example of this, when deleting an item from a list, a good intuitive feedback is to remove it from the list. Once its gone, it is then clear for the user that the action has been done successfully. One extra note here is not to overdo feedback this is particularly important as overdoing feedback often leads to irritate users. An example of overdoing feedback is to show a dialog box that says your document has been saved successfully and waits for the user to press “OK”. If I saved a document just save it and give me a hint, why should I take my hands off the keyboard to press a button for that?. The following are some guidelines for providing feedback in user interaction design:

  • Always provide feedback for lengthy processes so that people know when a process has started, how much time until it finishes (e.g. using progress bars), and what can be done while the process is being performed.
  • Feedback messages should be cheerful, polite and friendly. Error messages must use polite language.
  • Do not push it too far: provide enough feedback without irritating users. Too much feedback is often considered annoying.
  • Provide feedback about whats important to users. For example, users don’t have to know about any cleanup processes in the background!!!.

Screen Shot 2013-07-31 at 11.01.11 AM

Figure 3: Feedback of what happened and what can be done

For further reading on user interaction design, you may refer to following:

  1.  Helander M. G., Landauer T. K., and Prablhu P. V., Handbook of Human-Computer Interaction, 2nd Ed, Elsevier, Amsterdam, 1997. 
  2. Benyon D., Turner P., and Turner S., Designing Interactive Systems: People, Activities, Contexts, Technologies, Addison Wesley, Harlow, 2005.
  3. Sears A. and Jacko J. A., The Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies and Emerging Applications, Lawrence Erlbaum Associates, 2008.
  4. Zaphiris P. and Ang C. S., Human Computer Interaction: Concepts, Methodologies, Tools, and Applications, Information Science Reference, New York, 2009.
  5. Preece, Rogers, and Sharp, Interaction Design: Beyound Human-Computer Interaction, John Wiley & Sons, Inc., 2002.
  6. Kramer J., Noronha S., and John Vergo,  user-centered design approach to personalization, Communications of the ACM, Vol. 43, Issue 8, Aug. 2000.
  7. Jin S., design guidelines for improving learning from dynamic and interactive digital text,Computers & Education, Elsevier, Vol. 64, April 2013.