この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
今回はログイン画面について対話しました。
これまでの共有会
情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。
そもそもログインって？
ログイン
事前に登録したIDとパスワードを入力して本人確認をし、アカウント情報にアクセスするための仕組みです。「IDとパスワードで認証」するのが一般的なのです。
初めてログインする場合（新規登録）
ログインのやり方は「IDとパスワードを入力する」だけです。 ただし、初めてログインする場合は、新規登録する必要があります。IDとパスワードを登録して事前にアカウントを作成します。
ログインのタイミング
ログインのタイミングは、サービスによって異なり、大きく分けて2つあると考えます。
1つ目は、アプリ起動時すぐのタイミング。
ログインしないとそもそもサービスが使えないものです。
例えば、銀行アプリが該当します。
例：スプラッシュ画面後のログイン画面
2つ目は、サービス利用中のタイミング。
ログインしなくても、一定の機能は使えますが、一定以上の機能を使う場合にログインが必要になります。
例えば、旅行予約や通販サービスが該当します。まず、何があるか、どんなサービスなのかを見せ、「使いたい」と思わせてからログインを要求します。
ログインのタイミングによって、画面内に必要な要素も少し変わるので順番に紹介していきます。
例：商品を購入する時のログイン画面
ログイン画面に必要な要素
ログイン画面に最低限必要な要素は、下記6項目が上がりました。
- ログインID
- パスワード
- パスワードの再設定
- ログイン（送信）ボタン
- 新規登録
- ログイン画面を閉じる機能（※）
※ログイン画面を閉じる機能は前述した「サービス利用中に、ログインする」場合に必要になります。よく見られるものとして「ログインせずに使う」という文言のボタンがあります
次は、項目毎に深掘りしていきます。
1.ログインID
ログインIDは、ユーザー名ではなくメールアドレスか電話番号
ほとんどの場合、ユーザー名やメールアドレス、電話番号でログインIDを設定します。
ログインIDは、パスワード再設定時にも使用するため、覚える必要があります。
そのため、サービス毎に異なるユーザー名より、使用頻度の高いメールアドレスか電話番号を設定する方が好ましいです。
2.パスワード
表示/非表示の切り替え機能
パスワードはセキュリティー上、非表示にする方が好ましいですが、非表示のままだとパスワードを正確に入力できているか分かりません。そこで、必要になるのがパスワードの表示/非表示の切り替え機能です。
機能の示し方
表示/非表示の切り替え機能を示す手段に「目のアイコン」と「文字」の2通りがあります。
知識や経験がある方は「目のアイコン」が「表示/非表示の切り替え機能を示している」と理解し、機能を使うことが出来ますが、そうでない方はどうでしょうか？
アイコンの解釈に時間がかかる、また、その機能に気づかない可能性があります。
アイコンは、相手のリテラシーによって解釈が変わることを理解した上で「アイコン」と「文字」の使い分けをしていきましょう。
3.パスワードの再設定
ユーザーの入力する負担を減らす
パスワードはほとんどの場合、ログインIDの情報を使用し再設定することが出来ます。ログインを何度か試みた後、パスワードの再設定に移る方が多いのではないでしょうか。
そのため、再設定に必要なログインIDの情報は入力済みの場合がほとんどです。
再設定する画面では、既に入力した情報を引き継ぎ、ユーザーの入力する負担を減らしましょう。
赤く塗りつぶしている箇所は、同じ情報を入力する部分です。
Aパターンは2回に対し、情報を引き継ぐBパターンは、0回ということが分かります
4~5.ログインと新規登録
直感的な判別
「ログイン」と「新規登録」と当記事では扱っていますが、他に「サインイン」と「サインアップ」のように言い換えることもできます。
ただ、同じ画面上に似た言葉があると、直感的に判別出来ません。また、サインインとサインアップの入力フォームは似ていることもあり、より混乱を招く恐れがあります。
「ログイン」と「新規登録」のように言葉の使い分けをするほか、見た目のスタイルを変えると直感的に分かりやすくなり、ユーザーに優しいログイン画面になります。
また、切り替えが簡単だと誤ってクリックした場合でも、スムーズにログインすることが出来ます。
6.ログイン画面を閉じる機能
離脱を防ぐ
サービス利用中にログイン画面を表示するものには、「閉じる」機能も用意しましょう。
サービスを使用するか吟味している時に、ログインしかできないような一歩通行の要求をすると離脱する恐れがあります。ログイン画面を「閉じる」機能も用意し、心地よくサービスを使ってもらいましょう。
「閉じる」機能のパターン例
他にもこんな話が出ました
本人認証
ログインするときに、本人認証する場合があります。登録したメールに認証メール、電話番号の場合はSMSに認証コードが届きます。
不正アクセスやなりすまし対策ができる他に、新規登録の場合は現在使用中のものか確認が取れ特定することが出来ます。
デザイナーとして機能の理解もしておくと、スムーズに提案・対応ができますね。
さいごに
ログインは、多くのサービスで必要になる大切な機能です。サービスを使いたいユーザーに、ログインで手間や時間を取らせないよう最善を尽くしていきましょう。今回の内容が少しでもお役に立てれば幸いです。
4
