Design Openbook

Hand-Driven Elements: Swipe, FAB, Carousel, Menu

How should swipe actions, FABs, carousels and menus behave in a mobile UI? They should follow the finger and carry its speed after release; offer a non-gesture alternative to swipes, show a peek of the next carousel card, and grow menus from the tapped button.

Elements you drag or push must follow the finger exactly. After the finger lifts, they should carry its speed to move naturally.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Swipe actions

    Swiping a list row sideways reveals delete or archive buttons

  2. Speed dial FAB

    Tapping the floating button opens several sub-buttons

  3. Hide-on-scroll FAB

    Hides when scrolling down and returns when scrolling up

  4. Carousel

    A set of cards you swipe through sideways

  5. Peek

    Shows a sliver of the next card at the edge

  6. Scroll snap

    When you let go, the card stops at an exact position

  7. Menu reveal

    The menu grows from the position of the tapped button

How to use it

  • For any feature done by swiping to delete, always provide another way too (such as a kebab menu). Swiping is hidden, and many people do not know it.
  • After a swipe delete, show an undo snackbar.
  • Show 10 to 20% of the next card in a carousel to signal there is more. Do not auto-advance.
  • Menus and popovers should grow from the button that was tapped (transform-origin). If they grow from the screen center, it is unclear where they came from.

Prompts to copy

Mail list swipe

Add Swipe actions to the mail list.
- Swipe left for a red [Delete], swipe right for [Archive].
- The row follows the finger. If released after moving 40% or more of the screen width, run the action. Otherwise return to place with a spring.
- After the action, show a "Deleted [Undo]" snackbar for 4 seconds.
- Also add the same actions to a Kebab menu on each row.

Card carousel

Build a recommended-products Carousel.
- Peek: show 15% of the next card on the right.
- Scroll snap: stops card by card when released.
- No auto-advance. Add position dots below.

Source posts: @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts

All cards (27)