Shopify

6 Principles Of Effective Interaction Design

6-principles-of-effective-interaction-design

Interaction design is the relationship between the user and product they use. Bad interactions—both in the physical and digital worlds—create obstacles between a user and a product. Effective interaction design, on the other hand, aids good user experience and enables the user to achieve their goals in the best possible way.

Interaction design is a broad field; it lies at the intersection of many different disciplines such as sociology, psychology, ergonomics, and user experience (UX) design. To design effective interactions, you need a solid understanding of design principles rooted in those disciplines. The principles listed below work as a system and help you improve usability and increase user engagement with your product.

1. Familiarity

Familiar design minimizes the user’s cognitive load (the effort required to complete a task). It helps users understand how the user interface is organized and sets accurate expectations about what will happen before the interaction has occurred. 

Introduce affordances

Affordance refers to an attribute of an object that helps people understand how to use it. For example, in the physical world, the shape of a light switch helps you understand how you can click it, flip it, or twist it. A similar principle works for digital interfaces.

While designing user interfaces, you should always consider how the user sees and perceives the objects in the interface. Think of affordance as a clue that you give to your users. When an object has strong affordances, it becomes clear how to use it.

interaction design: Good interaction design includes user interface elements that demonstrate how it works. This animated user interface element is a slider for a color scale. As the cursor is drags the button across the slider, the background color changes according to the cursor's position on the slider.
Visual appearance of UI elements gives users a clue about how it functions. This UI object looks like a slider and helps users understand how to interact with it. Image by Rogie King.

Use popular interaction patterns

Jakob’s Law of the Internet User Experience states that users spend most of their time on other websites and apps. It means that users prefer your product to work the same way as all the other products they already know. 

To create familiar interactions, you need to rely on popular interaction patterns—patterns that are familiar to the majority of users. For example, most web visitors expect that they can click on the site logo to return to the home page. By utilizing this pattern, you make it easier for users to navigate your product. 

2. Predictability

People should not guess when interacting with a product. Instead, they should be able to observe an interface, and understand how to interact with it right from the first time. Effective interaction design is predictable—it sets accurate expectations about what will happen before the interaction takes place.

Clear language

The words you use in your design have a tremendous impact on how users understand your product. The language should be meaningful and simple to understand. For example, when users read a label on a button, they should be able to predict what will happen after they click it. 

Same rule applies when you design error messages. For clarity, you need to remove the technical terms and use understandable words and phrases. For example, when a user mistypes a password you:

Shouldn’t write: System error (code #0f3213a): An authentication error has occurred

Should write: Sign-in error: You entered an incorrect password

Mind the order of UI elements

Arrange information and functional controls in a logical, natural order from the user’s perspective. This is especially important when you design data input forms and ask users to provide information. For example, when you design a shipping form, you typically ask for the user’s full name, and only after that ask for their shipping address. It’s also important to consider your target market and internationalization as you scale, as the order of user interface (UI) elements could change depending on localized conventions.

You might also like: Symmetry vs. Asymmetry in Layout Design.

3. Discoverability

If users cannot find something in your product, it does not exist for them. Both content and functional elements should be easily discoverable. Otherwise, users won’t know that they’re available in the first place. 

Be careful with gestures

Gestures are a very popular interaction pattern on mobile. Designers love them because gestures help to save screen estate. At the same time, gestures have one significant downside—they are hidden. Gestures don’t reveal themselves unless the user knows they can swipe, pinch or do something else. That’s why it’s important to design good mobile app onboarding to help users educate what’s possible.

4. Control

Effective interaction design incorporates a sense of control. If users feel in control of the system, they are more confident in their abilities and are more willing to explore and try different things. 

Visibility of system status

The system should never leave the user guessing about what is happening. Whether the system is loading, searching, uploading, or does anything else, it should provide a current system status through appropriate feedback (visual, audio, haptic) in a reasonable time. Feedback acts as an acknowledgment of user interactions and information about the outcomes. When the system cannot provide feedback, it usually leads to unnecessary repetition of actions (multiple clicks or taps) and ends up in error state conditions. 

interaction design: In this example of good interaction design, this animated submit button transforms into a progress indicator to show that the operation is loading.
This submit button transforms into the progress indicator to demonstrate the current state of the operation. Image: Colin Garven.

Undo/redo operations

Undo acts as a safeguard against incorrect actions. When you allow users to undo operations, they are more willing to explore the product and try different features in it. 

interaction design: Screenshot of the undo, redo, and repeat functions in microsoft word.
Undo, redo, or repeat an action in Microsoft Word. Image by Microsoft.

5. Findability

It’s vital to help users find the content or functionality they’re looking for. When you make users search for something, you’re interrupting their state of flow. As a result, they switch from what they want to achieve (their goal) to learning your user interface. 

Visual representation of UI objects has a direct relationship to findability:

Use visual weight to convey importance

Every object on the page has its visual weight—a force that attracts the user’s attention. The more weight an object has, the more the eye is attracted to it. Size and contrast are two attributes that determine visual weight. Large contrasting objects attract the eye more than small, low-contrast ones. 

interaction design: A big part of interaction design is using visual weight to convey importance. In this screenshot of the Trello homepage, the hero caption “Trello helps teams move work forward” and contrasting call to action button “Sign up—it’s free!” are two elements that attract the viewer’s attention on the Trello landing page.
The hero caption “Trello helps teams move work forward” and contrasting call to action button “Sign up—it’s free!” are two elements that attract the viewer’s attention on the Trello landing page.

Visual hierarchy

Visual hierarchy concerns the arrangement of elements in a way that indicates ranking by importance and the order you want users to view them.Visual hierarchy also helps reduce cognitive load. You need to review your design and prioritize content and functional elements accordingly. Show only users what they need to see in each moment. Keep visual hierarchy in mind as you’re planning your information architecture, which is especially important the more complex your product becomes.

You might also like: Skeuomorphism in Digital Product Design.

6. Learnability

Learnability is the user’s ability to learn how to use the interface easily. Interactions should be easy to understand and easy to remember. 

“Interactions should be easy to understand and easy to remember.”

Leverage consistent elements throughout design

By leveraging consistent elements throughout your entire design, you make it easier for your users to interact with your product. When designs are consistent in appearance and behavior, users aren’t distracted by unexpected changes. They can rely on their experiences from one part of a product to another.

interaction design: Effective interaction design means leveraging consistent elements throughout your design. In this Material Design UI kit, the same color scheme is used in various places to create a cohesive appearance.
The same color scheme is used in various places in the Material Design UI kit. Image by Material Design.

Limit the number of items users have to interact

Hick’s law states that the greater the number of choices, the longer it takes to make a decision. 

When you offer users a lot of choices, you make it harder for them to learn what each option does. 

“When you offer users a lot of choices, you make it harder for them to learn what each option does.”

Here are a few things you can do to limit the number of choices:

  • Design with aesthetics and minimalism in mind. Don’t overwhelm users with information or actions. Follow a minimalist web design approach and get rid of unnecessary content and features. Leave only content and actions that are absolutely necessary.
  • Use smart defaults to minimize cognitive load. It’s possible to use pre-populated fields in forms (such as prefill the user’s ZIP code based on user geolocation) to simplify user input. 
  • Break down complex tasks into manageable sub-tasks. For example, you can break the checkout process into manageable steps.
interaction design: The Adidas checkout is a good example of interaction design. In this screenshot of the Adidas checkout, there are four steps in the checkout process: 1. Bag. 2. Delivery. 3. Payment. 4. Order Complete. For step two, delivery options offer free standard delivery with a 4-8 day delivery or a pickup in store option.
Adidas breaks down the checkout process into four simple steps. Image by Adidas

You might also like: Progressive Disclosure: Simplifying the Complexity.

Use constraints

Constraints limit the possible interactions for the user. Constraints might sound like restrictions, but in reality, they aim to simplify the interaction with a system and prevent users from making mistakes. Designers should:

  • Constrain inputs in forms. For example, use radio buttons instead of input fields when users have to select a particular option. 
  • Disable functions that aren’t relevant to the current situation. 

Twitter warns users when they exceed that limit of characters and disables the Tweet button. Image by Twitter.

Interaction design creates comfortable human experiences 

The ultimate goal of interaction design is to shape better communication between machines and humans. Interaction between the user and the computer should resemble a natural human-to-human conversation. Digital products shouldn’t make people think like computers, instead products should adjust to human needs and create comfortable experiences. 

Grow your business with the Shopify Partner Program

Whether you offer web design and development services or want to build apps for the Shopify App Store, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, developer preview environments, and educational resources.

Sign up

Special thanks to our friends at the Shopify Partner Blog for their insights on this topic.

About the author

Steve Hutt

Steve has entrepreneurship in his DNA, starting in the early days of online commerce when he achieved Power Seller status through his eBay store. This propelled him to become a co-founder of VisionPros.com, a contact lens and eyewear retailer. With a successful exit from his startup, he embarked on his next journey into agency work in e-commerce and digital strategy.

Currently, Steve is a Senior Merchant Success Manager at Shopify Plus, where he helps identify, navigate, and accelerate growth in the complex world of commerce.

To maintain his competitive edge, Steve also hosts the eCommerce Fastlane Podcast and Shopify Founder Stories, a top-rated twice-weekly podcast where he interviews Shopify Partners and subject matter experts who share the latest marketing strategy, tactics, platforms, and must-have apps, to help Shopify brands improve efficiencies, grow revenue, profit, and lifetime customer loyalty.

Add Comment

Click here to post a comment