<h2>Triggers</h2>
<p>Microinteractions use a trigger to generate feedback effects. Users or systems can initiate a trigger.</p>
<h3>User-initiated</h3>
<p>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 <a href="/patterns/form/">form</a> or when elements rearrange.</p>
<h3>System-initiated</h3>
<p>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.</p>
<h2>Applying effects</h2>
<p>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.</p>
<h3>Subtlety</h3>
<p>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.</p>
<h3>Size</h3>
<p>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.</p>
<h3>Direction</h3>
<p>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.</p>
<h2>Effects</h2>
<p>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.</p>
<h3>Color change</h3>
<p>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. <a href="/foundations/color/">Color</a> can also be supplementary when combined with other effects to convey element movement, such as a tab color change in <a href="/components/dropdown/">dropdown</a>.<br></br></p>
<ul>
<li><strong>Hover</strong>: indicates interactivity, for example <a href="/components/button/">button</a> or <a href="/components/link/">links</a> in <a href="/components/side-navigation/">side navigation</a>.</li>
<li><strong>Press</strong>: confirms user input, for example <a href="/components/checkbox/">checkbox</a> selection.</li>
<li><strong>System</strong>: prompts user action or alerts to error status, for example <a href="/components/text-input/">text input</a>.</li>
</ul>
<h3>Lift and shadow</h3>
<p>The lift effect uses shadow to elevate an object or experience, signifying priority or hierarchy. Learn more about shadow effects on the <a href="/foundations/elevation/">elevation foundation page</a>.<br></br></p>
<ul>
<li><strong>Hover</strong>: shows interactivity and used similarly to color, for example items in an <a href="/components/accordion/">accordion</a>.</li>
</ul>
<h3>Overlay</h3>
<p><a href="/components/overlay/">Overlay</a> 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 <a href="/components/modal/">modal</a> or <a href="/components/drawer/">drawer</a>.</p>
<h3>Containing element behaviors</h3>
<p>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.</p>
<h4>Expand down</h4>
<p>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.<br></br></p>
<ul>
<li><strong>Press</strong>: containing element becomes larger or smaller, affecting on-page content placement, for example <a href="/components/accordion/">accordion</a> or <a href="/components/dropdown/">dropdown</a>.</li>
</ul>
<h4>Open left/right</h4>
<p>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.<br></br></p>
<ul>
<li><strong>Press</strong>: containing element opens or closes from the side, for example <a href="/components/side-navigation/">side navigation</a> or <a href="/components/drawer/">drawer</a>.</li>
</ul>
<h4>Show pop-up element</h4>
<p>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.<br></br></p>
<ul>
<li><strong>Hover or press</strong>: shows a pop-up with more information, usually triggered by a button or icon, for example <a href="/components/popover/">popover</a> or <a href="/components/tooltip/">tooltip</a>.</li>
</ul>
<h3>Chevron flip</h3>
<p>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.</p>
<h4>Up/down</h4>
<p>Chevrons when pointed down (also known as a “caret”) are best for collapsed content, such as <a href="/components/dropdown/">dropdown</a> or <a href="/components/view-more-less/">view more/less</a>.</p>
<h4>Right/left</h4>
<p>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 <a href="/components/drawer/">drawer</a> or <a href="/components/side-navigation/">side navigation</a>.</p>
<h3>Timed fadeout</h3>
<p>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.</p>
<h3>Loading</h3>
<p>A <a href="/components/loading-indicator/">loading</a> 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.</p>
<h2>Accessibility</h2>
<p><strong>Allow users to pause, stop, or hide movement</strong><br>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.<br>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html">2.2.2: Pause, Stop, Hide</a><br><br><strong>Avoid rapid flash-like animations that could cause seizures</strong><br>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.<br>WCAG 2.2: <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">2.3.1: Three Flashes or Below Threshold</a><br><br><strong>Differentiate between essential and non-essential animations</strong><br>Animations and effects should be purposeful and predictable. Avoid parallax or non-essential element movement when a user scrolls to prevent distraction or nausea.<br>WCAG 2.2: <a href="https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html">2.3.3: Animation from Interactions</a></p>
<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/microinteractions/","type":"External"},"title":"Microinteractions in User Experience","description":"Read the Nielsen Norman Group&#39;s article on microinteractions.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/accordion-icons/","type":"External"},"title":"Accordion Icons: Which Signifiers Work Best?","description":"Read the Nielsen Norman Group&#39;s article on accordion icons.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Chat Toolkit (Restricted)","path":"https://dell.sharepoint.com/sites/AIDesignCoE/SitePages/AI-Chat-Toolkit.aspx","type":"External"},"title":"AI Chat Toolkit","description":"Enhance user interaction with an AI chatbot, ensuring a seamless experience from welcome message to \"End Chat\".","icon":"sparkles"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


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.

Microinteraction

Home

About DDS

Figma

Vanilla

Angular

React

Data visualization

Migration guide

A11y annotation kit

AI chat toolkit

Getting started

Changelog

Roadmap

Updates

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Table

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Chart customization

Empty state

Filter

Form

Sign-in

Table view

Patterns

Accessibility

Brand

Partners

Dell Design System v1

FAQs

Case studies

DDS builder

Videos

Resources

Send feedback

Find us on Teams

Contact