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

Pickers

Pickers let people select a date, or a range of dates

PreviousSwitchesNextInput Components

Last updated 1 year ago

Was this helpful?

Motion Functions

The function of motion in a picker is Didactic and Feedback. A picker allows for users to see the range they selected and how their selection is framed on a calendar. Feedback is provided by showcasing a range or selected date to the user.

Examples

In the above examples, the user selects a range of dates. The principle of value change is used to show the selection. Here the value is static and dates do not change so the user know they can make a selection within this range.

Here the picker is being used to select one specific date. The value change here is dynamic and can help the user choose the exact date from a carousel of available dates. The carousel also has an added layer of dimensionality to it which helps it mimic the structure and functions of a real-world flippable carousel, helping ground the interface.

Cover

Didactic Function

Cover

Feedback Function

Date Picker designed by ampersandrew
Date Picker designed by David Rodríguez Arias
Page Tool: Momentum by Edoardo Mercati