A UX Guide to Microinteractions
  • Basics
    • Introduction
  • Criterion
    • Criteria
    • Component Groups
    • Motion Functions
    • Motion Principles
  • The System
    • Action Components
      • Button
      • Floating Action Button
      • Icon Button
    • Communication Components
      • Onboarding
      • Progress Indicators
      • System Status
    • Navigation Components
      • Nav Bar
    • Selection Components
      • Checkbox
      • Radio Button
      • Sliders
      • Switches
      • Pickers
    • Input Components
      • Text Input
      • Audio Input
  • References
    • Cited Works
Powered by GitBook
On this page
  • Motion Functions
  • Examples

Was this helpful?

  1. The System
  2. Action Components

Icon Button

Icon buttons help people take supplementary actions with a single tap.

PreviousFloating Action ButtonNextCommunication Components

Last updated 1 year ago

Was this helpful?

Motion Functions

Icon buttons are often used to represent a specific action or function and are designed to provide a visual cue to the user about its purpose. The primary function of an icon button is Identification. Animations and motion within an icon button can give the user an idea of the button's task.

The icon buttons can convey a sense of delight with their aesthetic design choice and emotional appeal. Motion Principles can be used to arrive at these functions of the animation.

Examples

The icon button here leverages the principle of transformation and dimensionality to change shape from a person to a camera. Along with the direction arrows, this icon helps the user identify what state the camera is in and shows a change of state by moving the arrow and transforming the shape from the front of the screen to the back of the phone. The action mimics rotating a phone, and the added dimensionality to the microinteractions helps ground it in reality.

The bookmarks show dimensionality and a state change when pressed, helping the user identify the action performed and a way to undo the action. The stylistic interpretation of the examples are different, but convey the same information.

The like animation microinteraction leans heavily on aesthetics to convey the emotion of having "liked" something. It leverages the principles of offset and delay along with an accelerated easing curve to pack emotion into a tiny, liked-sized package.

This search microinteraction uses a morphing interaction to transform from a magnifying glass to an x-icon to communicate to the user the change in state. The handle of the magnifying glass conveys the idea that the glass has transformed into a button and the interaction state has changed.

Cover

Identification Function

Cover

Aesthetic Function

Cover

Emotive Function

Front to Back Camera Switch Microinteraction by Oleksandr Pronskyi
Bookmark by Aaron Iker
Add to Bookmark Interaction by Paarth Desai
Custom Like Animation by Margarita Ivanchikova
Search & Close Microinteraction by Paarth Desai