Improve Your Interaction Design with 6 Principles

I gave this lecture on principles of interaction design to software engineering students as part of Google’s TechExchange program.

Design principles are tools to create easy-to-use, consistent user experiences. They’re not laws, but guidelines to help you keep users’ needs and capabilities in mind as you go through the design process. With interaction design, the focus goes beyond the item in development to include the way users will interact with it¹.

These principles will guide you in making good design decisions for your users and avoiding common mistakes.

#1 The Isolation Effect

Among multiple similar objects, the one that differs from the rest is most likely to be remembered². Interaction designers use the isolation effect to guide users by calling attention to certain interactions or content.

This is why call-to-actions (CTAs) look different from other secondary buttons on a site or application. A CTA is the action we want a user to take, like the “Next” button in a step-by-step process, so the isolation effect is used to make CTAs easily visible and memorable.

#2 Hick’s Law

As the number of choices increases, the time to make a decision increases logarithmically³. Limiting the number of choices a user has decreases task time and reduces cognitive load — the amount of mental resources required to operate a system i.e. “brain power”.

If you can’t avoid presenting many choices, try grouping them or limiting the number of choices in view at any given time.

#3 Jakob’s Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know⁴.

Using existing patterns is another way to reduce cognitive load. You’ll notice log in or sign in pages are similar across products — the same pattern is purposely used consistently to make it easier for users to the task.

#4 Affordances

Affordances help users understand that they can interact with something and how to interact with it. Good affordances give strong visual clues for how something works, such as draggable sliders or shadows on buttons. Giving incorrect visual cues can lead to frustration and ruin the user experience.

#5 Feedback

Feedback tells a user that an action has been taken and what has been achieved. Many forms of feedback exist in interaction design, including visual, tactile, audio, and more. Without feedback, users may get stuck on an interaction and abandon their task.

#6 Consistency

Consistency refers to presenting similar elements for achieving similar tasks. Consistent design is far easier to use, as users do not have to learn new representations for each task and will avoid confusion⁵.

Consistency isn’t limited to visual style, but also applies to things like text labels and layout.

Think about Mobile

Mobile has its own set of interaction principles, but some key ones to keep in mind are⁶:

  • Consider every type and size of a mobile device
  • Tell users which orientation works best
  • Design for noisy or crowded environments with distractions
  • Tap targets should be large enough to be tapped on comfortably with ample spacing between elements
  • Use larger font sizes and easy to read typefaces in order to reduce eye strain
  • Avoid hover interactions

Pop Quiz

This article is a summary of a lecture, so of course there’s a pop quiz :) So, what’s wrong with this user interface?

Well to start…

  • The CTA (Continue) is not differentiated from the other actions
  • The Reset button and Continue button look the same, but they have very different results
  • The form is very long with lots of choices, and lots of opportunities for mistakes

I’m sure you can now pinpoint many more. A’s for everyone!

Interaction designer @Google | Previously @Priceline.com and @UnitedAirlines