Microinteraction

A microinteraction is when a user action or system event triggers feedback. Feedback can be a motion-based effect that communicates element behavior or status.


What's new

Microinteraction is a new pattern for the Dell Design System v2. It consists of established behaviors and solutions to common use cases within an interactive experience.

Triggers

Microinteractions use a trigger to generate feedback effects. Users or systems can initiate a trigger.

User-initiated

Direct user action, such as hovering, typing or pressing an element, can trigger a microinteraction effect. Hover effects show motion or demonstrate further interactivity, such as pressing. Pressing or typing may confirm input and selection, such as on a form or when elements rearrange.

System-initiated

The fulfillment of specific conditions in a system triggers a microinteraction effect. System triggers include page load, new message arrivals, errors, or background task completion. These can result in effects that alert users to status changes or timely information.

Applying effects

When applying or creating effects, it’s important to consider context and intent. Key considerations include subtlety of the microinteraction, component size, and directional cues.

Subtlety

Microinteraction effects can be subtle or eye-catching, necessitating intentional application. Mandatory actions can make use of more dramatic effects. For example, a task that is time-sensitive and requires input before a user can proceed. Feedback for less important or repetitive interactions should be more subtle. This reduces fatigue and visual noise.

Size

Similar to subtlety concerns, component size plays a role in how effects are applied. Color and movement speed may appear exaggerated on large components but undetectable on smaller ones.

Direction

Consider pre-existing cues and how they’re informed by direction. For example, a right-facing arrow indicates forward progress in a workflow. Clockwise motion implies the passage of time. And a user who speaks English is likely to browse a page from left-to-right, top-to-bottom. Context, such as where content sits on or off the screen, is also a factor.

Effects

Effects are motion-based feedback, in the form of UI attribute changes. Attributes include color, shadow, opacity, overlay, size, and component-specific behavioral effects. They can be singular or combined to create animations. Effects show behavior, hierarchy, state, and user input confirmation.

Color change

Changing the color attribute in an element, in part or entirety, is one of the most common types of effects. Color changes can be subtle for interactivity or user input, or dramatic to reinforce mandatory actions. For example, using a contrasting red in tandem with an error message prompts a user to finish a task before moving on. Color can also be supplementary when combined with other effects to convey element movement, such as a tab color change in dropdown.

  • Hover: indicates interactivity, for example button or links in side navigation.
  • Press: confirms user input, for example checkbox selection.
  • System: prompts user action or alerts to error status, for example text input.

Lift and shadow

The lift effect uses shadow to elevate an object or experience, signifying priority or hierarchy. Learn more about shadow effects on the elevation foundation page.

  • Hover: shows interactivity and used similarly to color, for example items in an accordion.

Overlay

Overlay can be paired with other components to show hierarchy and urgency. It is a temporary, transparent element that covers the page content. This shifts the user’s focus to a new content element, such as a modal or drawer.

Containing element behaviors

Use expand/collapse, open/closed, and on/off behaviors to change the amount of content shown in a containing element. They may pair with color, elevation, or opacity changes to indicate interaction capability.

Expand down

Expand down behavior is used for elements that expand or collapse. When a user presses a component to expand, it changes the size and amount of information shown. It also shifts on-page content down to make room. It is often paired with chevron flips.

  • Press: containing element becomes larger or smaller, affecting on-page content placement, for example accordion or dropdown.

Open left/right

Open left/right behavior is used for elements that open or close. When press triggers a containing element, it slides in or out, resulting in more or less information being shown. Content typically sits off-screen and opens from the left or right, without affecting the placement of other page elements. This behavior may be paired with a chevron flip, such as in side navigation, where a right chevron signifies a closed state and a left chevron shows an open state.

Show pop-up element

Show pop-up element behavior is used for elements that can show or hide content. Content is in a hidden containing element that, when triggered, floats above the main content to display more information. Content may or may not be dismissible.

  • Hover or press: shows a pop-up with more information, usually triggered by a button or icon, for example popover or tooltip.

Chevron flip

The direction of chevron flip depends on the microinteraction. As a general rule, chevrons point to the direction in which content will expand or open. Chevrons flip when they change states. For example, a collapsed element with a downward-pointing chevron will flip to point up when the element expands.

Up/down

Chevrons when pointed down (also known as a “caret”) are best for collapsed content, such as dropdown or view more/less.

Right/left

Chevrons that point left or right can sometimes be associated with arrows or navigation elements. For this reason, they should be reserved for content that sits off-page until opened, like drawer or side navigation.

Timed fadeout

Timer effects are used as a countdown with a fadeout effect for auto-dismissal. For example, a user uploading multiple files may receive a “success” message for each upload. As messages stack up, auto-dismissing can help the user focus on the most important information. Timer effects give the user some context for why and when elements disappear through dismissal.

Loading

A loading effect can be used as a transition state between elements, to proactively communicate that the system is working on the user’s request. In the case of indeterminate progress, the animation consists of a spinner that rotates clockwise indefinitely around the circle ring. Other indicators can show percent load or a fill animation.

Accessibility

Allow users to pause, stop, or hide movement
Moving, blinking, or scrolling content that begins automatically, lasts more than five seconds, and is presented in parallel with other content must give the user a way to pause, stop, or hide it.
WCAG 2.1: 2.2.2: Pause, Stop, Hide


Avoid rapid flash-like animations that could cause seizures
Content must not flash more than three times per second. People are especially sensitive to red flashing. Most people with light or photosensitivity disorders are triggered by between 16 and 25 flashes per second. If multiple flash-like animations happen sequentially, it could violate the three or more times a second rule. For this reason, it’s worth thinking about the way different animations might interact with each other.
WCAG 2.1: 2.3.1: Three Flashes or Below Threshold


Differentiate between essential and non-essential animations
Animations and effects should be purposeful and predictable. Avoid parallax or non-essential element movement when a user scrolls to prevent distraction or nausea.
WCAG 2.1: 2.3.3: Animation from Interactions

Articles

Microinteractions in User Experience

Read the Nielsen Norman Group's article on microinteractions.

Accordion Icons: Which Signifiers Work Best?

Read the Nielsen Norman Group's article on accordion icons.