デザイン・オープンブック

入力への反応: キーパッドと入力欄

キーパッドや入力欄で、押した反応やエラーをどう見せればいいですか? 押下反応は100ms以内に見せ、間違えたときは揺れだけでなく理由を文章でも示し、リアルタイム検証は欄を離れたときから始めます。

入力は、押されたか、合っているかをすぐに見せる必要があります。反応が遅いと、同じキーを2回押してしまいます。

名前とプレビュー

プレビューをタップすると止まり、もう一度タップすると再生します。

  1. 押下反応

    Press feedback

    押した瞬間に少し小さくなったり、色が変わったりする

  2. ドットの塗りつぶし

    PIN dot fill

    パスワードの桁の点が1つずつ埋まる

  3. シェイク

    Shake on error

    間違えると入力欄が左右に短く揺れる

  4. フローティングラベル

    Floating label

    欄の中のラベルが、入力を始めると上へ上がって小さくなる

  5. リアルタイム検証

    Inline validation

    入力中に、すぐ下へ正誤を表示する

使い方

  • 押下反応は、指を離す前の、押した瞬間に見せます(100ms以内)。
  • 間違えたとき、揺れだけを見せず、何が間違いかを文章でも示します。揺れだけでは、スクリーンリーダーの利用者に伝わりません。
  • リアルタイム検証は、欄を離れたときに始めます。最初の1文字から赤いエラーを出すと、叱られた気分になります。
  • 数字の並びをシャッフルするセキュリティキーパッドは、セキュリティ要件があるときだけ使います。使い勝手は確実に悪くなります。

コピーして使うプロンプト

6桁のPIN

6桁のPIN入力画面を作ってください。
- 数字キーを押した瞬間に押下反応(Press feedback): scale 0.94、100ms。
- 上部の点6つが1つずつ埋まるドットの塗りつぶし(PIN dot fill)。
- 間違えたら点の列がシェイク(Shake on error)300msしてからクリアし、下に「暗証番号が正しくありません(残り4回)」と表示。
- キーのサイズは最小48px。

登録フォームの入力欄

会員登録フォームの入力欄を作ってください。
- フローティングラベル(Floating label): 入力を始めるとラベルが上へ上がって小さくなる、150ms。
- リアルタイム検証(Inline validation)は欄を離れたときに開始。間違っていたら、欄の下に理由を1行で表示。
- 正しく直したら、エラー文言はすぐに消えるようにしてください。

参考にした投稿: @ui_motion_prompts, @ui_motion_prompts

すべてのカード (27)