UI Details JP

A collection of micro-interactions. Inspired by "Little Big Details".

Airbnb - Signup

  • テキストフィールドのプレースホルダーにラベルが付いていてわかりやすい上に省スペースになっている
  • テキストフィールド(電話番号)にフォーカスするとアウトラインのカラー、太さ、形状が変わり一目でフォーカスしているのが分かる
  • 電話番号を入力すると自動でハイフンを追加してくれて、ユーザーの手間が少ない
  • 電話番号の桁数が正しいときにだけ、続行ボタンがアクティブになる。それ以外は disabled になりバリデーションしている
  • 不正な電話番号だと、その枠がエラーとなりわかりやすい。またエラー状態でフォーカスすると、フェードで通常の入力状態になる。よくある、入力中にエラー表示が出るということがなく、ユーザーの心理を和らげている
  • 続行ボタンや、下部の「Appleで続ける」ボタンを押下すると、ボタンのテキストがローディングアイコンになり、押下したアクションに対して通信中を示すフィードバックを行なっている
  • 続行ボタンがプライマリボタンで、優先順位が分かりやすい