Design Openbook

Input Feedback: Keypads and Fields

How should an app respond visually when a user types in a keypad or form field? Show press feedback within 100ms, fill PIN dots one by one, shake on error with a text explanation, use floating labels, and validate inline only after the user leaves the field.

Input must immediately show whether it registered and whether it was right. If the response is slow, people press the same key twice.

Terms and previews

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

  1. Press feedback

    Shrinks slightly or changes color the moment it is pressed

  2. PIN dot fill

    The password dots fill in one by one

  3. Shake on error

    The input field shakes briefly left and right when wrong

  4. Floating label

    The label inside the field moves up and shrinks when typing starts

  5. Inline validation

    Right or wrong is shown just below the field while typing

How to use it

  • Show press feedback at the moment of pressing, before the finger lifts (within 100ms).
  • When something is wrong, do not rely on a shake alone. Also say in text what is wrong. A shake does not reach screen reader users.
  • Start inline validation when the user leaves the field. Showing a red error from the first character feels like being scolded.
  • Use a security keypad that shuffles the digits only when security requires it. It is clearly less convenient to use.

Prompts to copy

6-digit PIN

Build a 6-digit PIN entry screen.
- The moment a number key is pressed, show Press feedback: scale 0.94, 100ms.
- Six dots at the top fill in one by one (PIN dot fill).
- If wrong, the row of dots does a Shake on error for 300ms and then clears, and below it shows "Incorrect PIN (4 attempts left)".
- Keys are at least 48px.

Sign-up form fields

Build the input fields of a sign-up form.
- Floating label: when typing starts, the label moves up and shrinks, 150ms.
- Start Inline validation when the user leaves the field. If wrong, give the reason in one line below the field.
- When the user fixes it, the error text disappears right away.

Source posts: @ui_motion_prompts, @ui_motion_prompts

All cards (27)