Improve Your Interaction Design with 6 Principles

4 min readMay 16, 2021

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.

The “Start” CTA for directions on Google Maps has a blue background and uppercase label to differentiate it from surrounding actions. The CalFresh application CTAs use a different color and elevation to stand out.

#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.

In this visual above, on the left the user has many options to choose from and will take longer to decide. You can make this easier by limiting the number of options in view, but the best solution is to limit the total number of options.

#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.

Log in or sign in pages are similar across products to make it easier for users to complete and reduce cognitive load.

#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.

The “Slide to Unlock” interaction uses a text label, an arrow icon, and the metaphor of a physical slider to afford how to unlock the device.

#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.

This example from Adobe XD shows a good example of feedback, where the user understands that the Save task is occurring or is complete. In the bad example, there is no feedback to indicate to the user that anything is happening as a result of their click.

#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.

Amazon uses many different button styles throughout their web e-commerce experience. This can lead to confusion if the same task or purpose is achieved by two different button styles.

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

This visualization by Steven Hoober summarizes the different ways people hold and use their phone.

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?

The Worst Online Giving Form I’ve Ever Seen by Matt Chandler

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!