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 newCopy link to this section
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.
TriggersCopy link to this section
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 effectsCopy link to this section
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.
EffectsCopy link to this section
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.
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.
- Press: containing element opens or closes from the side, for example side navigation or drawer.
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.
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.
AccessibilityCopy link to this section
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