Introducing interaction design to improve UX/UI

What is interaction design?

Interaction is smooth animated visual feedback to the user's actions or changes between application states. An interaction can be anything from simple text color change on hover to the most complex content transformation from one mode to another. Often interactions are mistakenly referenced as transitions and animations. While in reality, the two help build interactions.

UI/UX interactions help simplify some application flows and make products more user-friendly. Adding them into application could greatly vary in difficulty. This article explores typical applications of interactions and how to start experimenting with them.

Types of interaction design & examples

Two goals that drive successful interactions are those that help users navigate the application and those that entertain and engage users. The driving force behind realizing these goals are various types of interactions covered below.

Goal 1: User navigation

Users need to navigate the application easily and understand content. Simply put, the application needs to function well. The following are types of interactions (listed in order from easiest to most difficult) that support a successful navigation experience.

Local appearance feedback: The user interacts with a component that provides instant visual feedback, such as:

• A button changes (color, background, border, shadow, etc.) when it is hovered or clicked.

• A checkbox has a check appear as though it is being drawn.

• Toggleable content triggers an arrow direction change depending on whether the content is or is not opened.

Local state feedback: One component changes its state or simply appears, such as:

• The progress indicator shows a smooth animation when a user advances or digresses.

• The bar chart bar grows.

• The donut chart pieces fill in radially.

Local layout change: Expanding, sliding, fading, or any other visual (e.g., visibility, size, position, etc.) transition in and out when only one component is impacted, such as:

• The modal, sticky message, tooltip, or notification appears/disappears.

• Toggle-able content (e.g., a READ MORE button) expands and possibly pushes other content. However, no additional handling for pushing other content is required.

Major content change: Repeatable or well-defined layout elements move, such as:

• A list item is replaced by another item, or a list item is inserted.

• Cards switch places.

Content mode change: Multiple elements are added or removed anywhere with (multiple) transitions, such as:

• The read-only table goes into row selection mode. Checkboxes at the beginning of rows and additional controls somewhere on the page for making actions with selected rows appear.

Goal 2: Engaging and entertaining the user

• Content (i.e., illustrations or other visual content) transitions when the user takes action.

• Content animates from to time or continuously.

How interactions improve UI/UX

Before implementing interactions, make sure that they are valuable. Here is how they can improve the application:

• Instant and noticeable feedback for the user allows the person to gain confidence when using an application.

• Content appears and disappears smoothly and gradually, indicating where to concentrate.

• Clear transitions between states of application allow the user to perceive content changes easily.

• Making an impression of the user's progress improves the feeling of the application's responsiveness.

• Fun or clever effects make the application feel more responsive.

• If an application has no or basic level of interactions, it often feels outdated.

• Some interactions can replace redundant text explanations making UI cleaner.

It’s important to note that interactions should not impact web accessibility. They should not be used as the only way to convey the information to the user, but be treated as an auxiliary element and an alternative means to take action or get information.

Three tips for implementing interactions:

1. Make sure that they are useful for users

2. Keep interaction durations short:
   - Up to 200ms for small and simple interactions
   - Up to 400ms for bigger and complex interactions

3. Make them consistent and as simple as possible

How to determine interactions for web

An important step for a website or a specific project is to define success for interactions. The following are a few options for how to determine what to do to document interactions before implementation.

Option 1

1. Link to an example that shows a transition for similar context.

2. Front-end engineers will be responsible for choosing proper and consistent transition values with an application pattern.

The best time to use option 1 is when the application design is straightforward and relatively simple. It works well with local appearance feedback, local layout change, and major content change types.

Option 2

1. The example has unique specifications (e.g., the timing is very important, the situation is quite specific, and separate examples will not suffice).

2. A custom visual example is created by designers. Designers provide specific values for transition durations and functions. Or, if an example is made in specialized tools, then front-end engineers can get them from there.

The best time to use option 2 is when there are multiple moving parts. It works well with content mode change and complex local state feedback types.

Option 3

1. Animation for some content is required. Therefore, the team generates a range of ideas, preferably with priorities and preferences.

2. The front-end engineer is responsible for choosing between what is possible to implement and what is acceptable.

3. After implementation, designers and other team members, if applicable, review the interactions to ensure each look good and are consistent. The team identifies improvements for present and future use.

The best time to use option 3 is when there is a need for animation, the details are hard to define due to the complexity of the example, and it’s clear that the implementation will not take too long. It works well with miscellaneous content interactions and major content change types.

An important step is to identify interactions that will be needed for the feature before implementation. The result depends on situation specifics (i.e., whether interactions should be implemented with related features or after).

Interaction decisions and recommendations should be treated as a shared responsibility among the team, not just for front-end and design responsibility. Anyone can and should contribute ideas (i.e., perhaps something is done in another project, or the use case is similar to a well-known application). Recommendations should be discussed in grooming sessions and similar meetings. Interactions are not typically factored in when creating stories and designs. Involving as many people as possible during the initial stages of requirements gathering significantly improves the potential for a successful interaction implementation.

How to implement interactions successfully

Likely, some interactions are already implemented in the application design. For example, buttons hover with transition or menu sliding from outside of the viewport. Often Local Feedback and Local Layout Change interactions can be easily implemented by front-end engineers without much involvement from other team members. And usually, it is highly preferred that these interactions exist, so story estimates should often include this effort.

Even though you can do it by yourself, it is important to coordinate with others. First, it would be best to communicate with people involved in most processes that include interactions, so that would be designers and front-end engineers. Find out if everyone is in favor of adding interactions to the project.

Next, discuss the benefits of interactions with the development team and product owner, agree on capturing interactions in the backlog, and how much time can be allocated to implement them. Cooperate with the team to identify places where interactions could be helpful, inform what is easy to implement and what is better to avoid from a technical perspective.

When you know that interactions provide value to the application and convince the team to use them, you need to start adding them to your stories and implementing them.