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. Selection Components

Switches

Switches toggle the state of a single item on or off

PreviousSlidersNextPickers

Last updated 1 year ago

Was this helpful?

Motion Functions

The function of motion in a switch is Structural and Feedback. Switches can provide the user access to other states and functions in the interface if turned on or off, enabling the user to access and control additional parts of the interface. Switches can also provide clear feedback to the user by showcasing the state that they transition to.

Examples

The above examples of switches all follow similar structures. They use the principle of transformation to transform from an "OFF" state to an "ON" state. The transformation is accompanied by a change in color to indicate this state change, along with icons that indicate the state.

The switch above uses a text-based segmented control to control two different states. There is no on or off, but rather a toggle between the two modes. The movement of the button from each state makes the relationship between them clear and informs the user which is the active state.

Cover

Structural Function

Cover

Feedback Function

Checkboxswitcher by Oleg Frolov
On/Off Switch by Anton Zaderaka
UI // Toggle Switch by Cosimo Scarpa
Segmented Control XII by Oleg Frolov