6 Principles of Effective Interaction Design

交互设计之间的关系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 gooduser experienceand 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 ofdesign principlesrooted 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’scognitive 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

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

Use popular interaction patterns

Jakob's Lawof 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 happenbeforethe 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:

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 andinternationalizationas 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

如果用户不能找到你的产品,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 goodmobile app onboardingto 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.

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.

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.

Visual hierarchy

Visual hierarchyconcerns 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 yourinformation 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.

Limit the number of items users have to interact

Hick’s lawstates 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 aminimalist web designapproach and get rid of unnecessary content and features. Leave only content and actions that are absolutely necessary.
• Use smart defaults to minimizecognitive 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.

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.