ウェブサイトのデザイン分析: 印象的な「登録とログイン」の詳細

[コアヒント] 印象的な登録ページとログインページの詳細 10 選

細部に宿る悪魔

「悪魔は細部に宿る」という格言は、デザインにおいては特に当てはまります。 Tumblr に Littlebigdetails という Web サイトがあることは、多くの人が知っていると思います。この Web サイトは、多くの人が簡単には気づかないようなインターフェース操作の詳細を記録することに専念しています。今日は、登録フォームとログインフォームの例をいくつか選びました。

ウェブサイトやモバイルアプリケーションの場合、登録とログインはユーザーが製品にアクセスするための最初のステップです。このステップのインターフェースとインタラクションデザインが細部において革新的で、ユーザーに明るい印象を与えることができれば、製品のユーザーコンバージョン率を大幅に向上させることができます。

登録とログインを同時に行う

1. 上の画像はTumblrの登録ページです。登録中に「開始」をクリックしてログインします。下の画像の古いバージョンの Wunderlist でも同じことが言えます。

2. もう一つの選択肢であるAmazonは、「登録ユーザーのログインと新規ユーザーの登録を容易にする」という目標を達成するために、下図に示すように、登録ユーザーと新規ユーザーを1つに統合しています。

パスワードセキュリティのヒント

3. Geeklist登録ページでパスワードを入力すると、右側にパスワードの解読に必要な時間が表示されます。

同様のページには Tumblr の登録ページや Twitter の登録ページがありますが、特定の時間がバーと色のプロンプトに変更され、赤は危険、緑は安全を示しています。

4. Gmail ログイン ページで古いパスワードを入力すると、パスワードが最後に変更された時刻が表示されます。

5. Facebook はパスワードのヒントもうまく機能しています。Google のように古いパスワードを入力すると最後にパスワードを変更した日時を思い出させるだけでなく、ユーザー名フィールドをユーザーの基本アカウント情報に直接変更して、ヒントを提供しようとします。

ダイナミックエフェクト/リアルタイムフィードバック

6. Kickstart 登録ページで、ユーザーが間違った電子メール サフィックスを入力すると (Gmail を Gmaill または Gmailil と入力するなど)、リアルタイムで修正プロンプトが表示されます。

8. Quora のログインページでメールアドレスを入力すると、メールアドレスに対応するアカウント情報 (ユーザー名とアバター) がリアルタイムで読み込まれ、入力内容が正しいかどうかをユーザーに確認します。

9. Path Web バージョン (旧バージョン) で登録ボタンをクリックすると、ジャンプ処理中にスマイリー フェイスが表示されます。次の図に示すように、Cloudapp ログイン ページでも同様の効果を確認できます。

10. レゴ社が制作したゲーム「レゴ・ユニバース（非公開）」のログインインターフェースはさらに面白い。ユーザーがパスワードを入力すると、下のレゴロボットが通常の状態（左に表示）から目を覆っている状態に変わります。とても愛らしいです。

上記以外にも、登録ページでメールアドレスを記入すると、メールサフィックスの先頭部分（通常はユーザーのニックネームや共通ID）を自動で取得し、その下のユーザー名欄に自動で記入してくれるなど、共通して優れた細かい点が多数ありますが、ここでは一つ一つ挙げることはしません。もちろん、ここで注目すべきは、上記のちょっとした詳細は、登録およびログイン フォームのエクスペリエンスを向上させるための単なるボーナス ポイントであり、すべてではないということです。

原題: ウェブサイトデザイン分析: 「登録とログイン」の詳細に触れるもの

キーワード: ウェブサイト、それら、感動、登録とログイン、詳細、コア、ヒント、大ヒット、感動、ウェブマスター、ウェブサイトのプロモーション、お金を稼ぐ