Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
All Articles
Sep 14
Web Development
Eric Phung

Engaging Micro Interactions: Enhancing User Experience on the Web

A website interaction is any kind of movement, communication, or interactivity between a user and a website. Explore the endless microinteraction possibilities on your website.

Engaging Micro Interactions: Enhancing User Experience on the Web

Explore the best microinteraction on the web with animated examples

1. Click Interaction: User clicks on an element with a mouse or trackpad.

⚡️ Microinteractions: Upload Button by Anton Lapko on Dribbble

2. Hover Interaction: User hovers the cursor over an element without clicking.

Alt-Button Hover Interaction by Ryan Duffy on Dribbble

3. Tap Interaction: User taps on an element with their finger on touch-enabled devices.

Pin on ☆幼児デザイン

4. Double-click Interaction: User rapidly clicks twice on an element.

Clicks-mouse GIFs - Get the best GIF on GIPHY

5. Long-press Interaction: User presses and holds on an element for an extended period.

framer by Wilson Levy | Dribbble

6. Drag Interaction: User clicks and drags an element to move it around.

Drag & drop interaction with a spring effect by Jackson ...

7. Drop Interaction: User releases a dragged element in a specific location or container.

Drag & Drop Interaction by Laurids on Dribbble

8. Scroll Interaction: User scrolls the web page up or down using the mouse, trackpad, or touch gesture.

Scroll Icon Animation – CodeMyUI

9. Swipe Interaction: User swipes their finger across the screen on touch-enabled devices.

Swipe Tutorial Animation by Jeff Broderick on Dribbble

10. Pinch Interaction: User uses two fingers to pinch or expand an element on touch-enabled devices (e.g., zooming in/out).

Zoom Fingers GIF - Zoom Fingers Touch - Discover & Share GIFs

11. Zoom Interaction: User zooms in or out using the mouse scroll wheel or pinch gesture.

Mouse scroll - Outline - Wired - Lordicon

12. Rotate Interaction: User rotates an element using touch gestures on compatible devices.

Carousel with 3D Rotation | Interactive design, Carousel designs, Carousel

13. Shake Interaction: User shakes their device or clicks a button to trigger an action.

Interactive concept v1 - Shake App by Andrew Bro on Dribbble

14. Tilt Interaction: User tilts their device to affect the content or create a parallax effect.

Phone Tilt Instructions by Brielle Garcia on Dribbble

15. Keyboard Interaction: User interacts with elements using keyboard inputs (e.g., arrow keys, tab key).

5 Steps to Design Apps with Keyboard Accessibility in Mind

16. Input Field Interaction: User enters data into input fields using the keyboard or on-screen keyboard.

Search Input Field Interaction by TIB Digital on Dribbble

17. Form Submission Interaction: User submits a form by clicking a submit button or hitting Enter after filling it.

Submit Button - Micro Interaction by Sailesh Gunasekaran on Dribbble

18. Swipe-to-Dismiss Interaction: User swipes an element or card to dismiss it or remove it from view.

Swipe to Dismiss [Freebie] | Interactive design, App design inspiration,  App design

19. Pull-to-Refresh Interaction: User pulls the page or content down to refresh or load new content.

Email App Pull to Refresh Interaction by Paarth Desai on Dribbble

20. Infinite Scroll Interaction: New content is loaded automatically as the user scrolls down the page.

Websites With 'Infinite Scrolling' Pages, And How Google Crawls The  Unlimited | Eyerys

21. Autocomplete Interaction: Suggestions or predictions appear as the user types in an input field.

Autocomplete search box | Intro youtube, Aesthetic gif, Memo template

22. Accordion Interaction: User clicks on a section to expand or collapse its content.


23. Carousel Interaction: Users navigate through a series of content or images in a carousel/slider format.

Carousel slider - Bravo Studio Help Center

24. Dropdown Interaction: User clicks on a dropdown menu to reveal additional options.

Interaction - Dropdown by Nanda | Dribbble

25. Toggle Interaction: User switches an element between two states (e.g., on/off, open/close).

toggle switch micro interaction | Toggle switch, Interactive, Toggle

26. Context Menu Interaction: User right-clicks or long-presses to access a contextual menu.

Context Menu in Android with Example - GeeksforGeeks

27. Contextual Hover Interaction: User hovers over an element to reveal additional information or actions.

Mouse hover effect on button using CSS on Behance

28. Audio Interaction: User interacts with audio elements, such as play, pause, volume control, etc.

Audio Player | Motion graphics design, Interactive design, Logo design set

29. Video Interaction: User interacts with video elements, such as play, pause, seek, etc.

Simple video player

30. Live Search Interaction: Search results update in real-time as the user types in a search bar.

How to integrate Zendesk with Algolia | Algolia

31. Auto-scrolling Interaction: Content automatically scrolls horizontally or vertically without user input.

Photoshop GIF How-to: Scrolling Animation - Lara Lee

32. Show More/Less Interaction: User clicks on "Show More" or "Show Less" to expand or collapse content.

How to create Show More and Show Less functionality for hiding text using  JavaScript ? - GeeksforGeeks

33. Notification Interaction: User interacts with notifications, such as dismissing or clicking on them.

Notification Bell Animation by Marina Bošnjak | Logo design video, Youtube  logo, Youtube banner backgrounds

34. Lightbox Interaction: Clicking on an image or link opens it in a modal/lightbox for a closer view.

What Is a Lightbox & How Do I Make One?

35. Share Interaction: User clicks on share buttons to share content on social media or other platforms.

Dribbble - Share-Button.gif by Joshua Aditya