DailyUI #001 Sign Up
DailyUI の第1回目は『Sign Up』を制作しました。
Sign Up は新規登録で、新規登録画面の UI をデザインしています。
登録する項目はメールアドレス、パスワードだけとなるべくシンプルに設計しました。新しいサービスへの登録はユーザーにとって心理的なハードルが高いように思い、最低限の情報で簡単に登録できるようにしています。
必要な情報はサービスによって異なりますが、サインインという要件を満たすにはこの2つがあれば十分です。
プロフィールを始めその他の情報は編集画面や必要になった際に登録するようにしました。ID やユーザー名を登録させるとユーザーは何を入力しようか悩み離脱率が上がると考え、ユーザーが考える時間を生まないようにしています。
またユーザーの操作を減らす目的でバリデーションチェックはページ遷移をしなくても実施される設計です。
ユーザーの入力操作のタイミングに合わせてエラーを表示することですぐに修正できるようにします。また新規登録ボタンは入力内容が登録可能な状態のみ有効になります。
登録ボタンは最後のひと押しになるように文言に無料というワードを含めています。ユーザーに登録への安心感を与えたり、世界観があるサービスであればそこにユーザーが参加するワクワク感を与えたりすることができます。
以降は各入力フィールドのポイントを紹介します。
メールアドレス入力フィールド
メールアドレス入力フィールドです。下記のサンプルで実際の動作を再現しています。
入力値のバリデーションチェックは入力が完了しフォーカスが外れたタイミングで行うようにしています。これは入力途中にエラーを表示すると、条件を達成しようとしている途中の状態を否定することになりユーザーのストレスになる為です。
エラーメッセージは「できていない」という否定ではなく「○○してください」という解決策をアドバイスすることでユーザーの登録という目的達成を応援します。
パスワード入力フィールド
続いてパスワード入力フィールドのアイディアです。こちらのサンプルも実際に入力を試すことができます。
パスワード入力フィールドは1文字入力される毎にチェックするリアルタイムバリデーションで実装しています。パスワードは複雑な条件になりやすいかつ入力した文字が見えない為この形式にしました。
ユーザーが入力途中の段階でチェックするので「できていない」「○○してください」という指摘ではなく「達成している」という状態を表示するようにしています。
ただ条件が満たされていない場合はエラーであることを伝えたいので、フォーカスが外れた時にはエラーのスタイルを適用しています。
パスワードの入力フィールドは通常入力した文字がマスクされ見られません。ショルダーハック防止策になるのでマスクは必須ですが、時には入力したユーザー本人が文字を確認したいシーンも考えられます。その為、入力フィールドに確認用のボタンも用意しています。
まとめ
新規登録画面の目的はユーザーに登録してもらうことです。
登録画面にアクセスしている時点でユーザーには登録の意思があるので、モチベーションを落とさず登録まで導くことが重要です。その為なるべくシンプルな構成にすることでエラーになる要素の数を抑え、ユーザーの行動を阻害せずスムーズに登録できるようにします。またメッセージも否定的な表現を避け解決策をアドバイスすることで、エラーの指摘からユーザーの応援に変えることができます。
ユーザーにサービスに登録してもらうことは勿論、気持ち良いスタートも提供していければと思います。