UX interactions

Getting started

This page includes working examples, references and reusable code to prototype user interfaces with more dynamic, interactive elements. Examine the code and copy-paste into your project. Use the examples as a reference for design and implementation

What are micro interactions?

UX microinteractions are small, focused interactions within a user interface that are designed to enhance the overall user experience. These microinteractions serve several purposes, such as providing feedback, aiding usability, and adding a sense of responsiveness to user actions. Here are some examples:

General

Action sheet modal Bottom sheet modal Component loader Open modal Progressive reveal Side panel Smooth scrolling Tabbed Navigation Tooltip

Form Interactions

Auto suggest search Character count in text input fields Checkboxes with images Contextual help - Disclosure element Drop zone - Drag and Drop Enable button on selecting the checkbox In field error handling Enable button on input

Layout and navigation

Accordion Pop overs

Accesibility

Guided tour

Visualizations and Media

Image zoom