覚えておこう！気持ちいいログイン体験のつくり方 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

優れたログイン体験とは、それ自体をユーザーに気づかせないことかもしれません。

ログイン時のフロー設計は、ユーザー体験の鍵となる部分です。この記事では、アクセシビリティやセキュリティなども含めた、ログイン体験のベストプラクティスを紹介します。

Touch ID (指紋認証) やFace ID (顔認証) などの新しい技術によってサービスへのログイン方法が変わりつつありますが、デバイスやプラットフォーム間でそれが完全にユビキタスとなる日はまだまだ遠いと言ええそうです。ログイン画面はデジタル体験の中の随所で目にします。ユーザーの自己申告によると、通常平日に行う認証は1日あたり15回です。ログインフォームをいかにうまく設計するかは、これからもUXデザイナーの非常に重要な仕事になるでしょう。

シングルタップによるログインの未来の案。一般的に採用されてはいない。画像提供: @lukew

ログインフォームはありふれているため、設計に頭を悩ますものではないように思えるかもしれません。しかし、ログインにまつわるさまざまな標準化の努力にも関わらず、多くの場合に、驚くほど大きな伸び代があるのです。主要な考慮点を見ていきましょう。

ログイン画面の要素

Kit and Aceのサインイン画面には、電子メールアドレスフィールド、パスワードフィールド、パスワードが不明な場合のリンク、サインインボタンといった、見慣れた基本要素がすべて含まれている。

Webとモバイル体験には、効果的なログイン画面を作成するために必要な、主要な基本要素があります。それは次の項目です。

• ユーザー名／電子メール
• パスワード
• パスワードが不明な場合のリンク
• ログインボタン

これらの要素とともに使用される、追加要素もいくつかあります。

• パスワード表示オプション
• ログイン状態を維持するオプション
• ソーシャルメディア/その他のアカウントによるログインオプション

これらのオプションを使用するかどうかは、たとえば、サービスがソーシャルメディアのアカウントによるログインをサポートしているかどうかといった状況によって決まります。

一般的に活用できるベストプラクティス

アカウントへのログイン成功がユーザーの一番の目的であることは実にまれです。ユーザーが実行したいのは、情報の投稿、コンテンツの閲覧、ショッピングの決済、またはメールを読むことなどです。ログインは、そうした目的を達成するための手段です。ユーザーは、しばしば広い目標の中にある二次的なタスクを達成しようとしています。

これを踏まえるなら、ログインを迷わず簡単に行えることはとても重要です。タスクを実行するときの障害物が増えると、タスクそのものを放棄するリスクが増えます。これはデザイナーにとっては悪い知らせです。たとえば、あるオンラインショップのUIE (User Interface Engineering) に関する調査では、パスワードを要求されると、Eコマース利用者の75%が購入を中断したことが明らかになっています。

デザインする際は、次の項目に留意しましょう。

• ログインしなくても、ユーザーが利用可能な機能とコンテンツを探して、理解できるようにしましょう。ニールセン・ノーマングループが、ログインという壁がユーザーにもたらす不満とそれが相互依存の原則にどのように反するかを詳しく説明しています。Eコマース サイトにおいては、カートの放棄を防ぐため、いかにゲストにチェックアウトさせるかが要です。
• ログイン機能と、アカウント作成や登録機能の違いを明確にしましょう。多くの体験では未だにこれらの違いが十分に示されていないため、ユーザーは登録フォームからログインしたり、ログインフォームから登録しようとしています。これらは、視覚的に異なり、さらに明確に区別できる言葉で示されている必要があります。たとえば、「サインイン」と「サインアップ」の代わりに「ログイン」と「登録」を使用することができるでしょう。
• ログイン用のフォームフィールドを、ボタン操作の後や別のページに表示するのではなく、直接ページ上に配置しましょう。フィールドを隠すと、ユーザーの手順が一つ増えてしまいます。
• Vimeoのログインフォームは非表示になっており、ユーザーがページの上部にある「ログイン」オプションをクリックするとポップアップ表示される仕組みになっている。

Facebookのログインフォームはホームページの上部に常に表示されている。

アクセシブルなログイン体験の設計

ログイン画面を設計する際にアクセシビリティを考慮しておくと、誰もがより良いユーザー体験を得ることができ、さらに誰もアプリやWebサイトへのアクセスから排除されることがありません。アメリカ疾病管理予防センターが発表した2015年の調査結果によると、アメリカの成人の22パーセントが何らかの障がいとともに生活しています。Webサイトやアプリの体験は、視覚障がい、認知障がい、および運動障がいにより差が出ることがあります。たとえば、色覚異常のあるユーザーやキーボードのみで操作するユーザーの体験は異なるものになるでしょう。

アクセシビリティを考慮した簡単な例を、いくつか紹介しましょう。

• フォームフィールドと、ログインボタンなどのタップ領域に十分な大きさを持たせましょう。WCAG 2.0のガイドラインでは、タップ領域のサイズは最低9㎜四方とし、かつその周囲に操作対象外のスペースを設けることが推奨されています。
• 適切な色コントラストの使用は、視覚的なアクセシビリティで重要です。カラー・コントラスト・アナライザー (CCA) などのアプリやPhotoshopに組み込まれているツールを使用して、デザインを検証できます。
• キーボードによるフォーカスの移動順の指定を、開発時に忘れずに行いましょう。公開用のビルドが完成したら、キーボードのみでログインページを検証し、キーボードに依存するユーザーの体験に対応していることを確認します。

Photoshopには、第一色覚異常または第二色覚異常の人にデザインがどのように見えるかを示すツールが含まれている。画面表示のアクセシビリティを考慮したデザインの検証に最適。

セキュリティとユーザビリティのバランス

ログインのUXでは、セキュリティとユーザビリティが相容れない関係にあります。パスワードで保護されたアカウントとログイン機能は、ユーザーIDに関連付けられた個人情報を保護するために存在するものですが、パスワードを忘れたなどのログイン時のトラブルは、セキュリティとユーザビリティが相反する結果として、ごく一般的に発生する、非常に苛立たしい体験です。

この課題に取り組むには、次のようなアプローチがあります。

• 適切な場合は、「パスワード表示」オプションを配置し、パスワードのマスキングをデフォルト設定としましょう。特に、モバイルデバイスを使用しているユーザーの場合は、このオプションによってパスワード入力にミスがないことに自信を持てるでしょう。ただし、バンキング用途のアプリなど、特定の状況においては、ユーザーがこのオプションの安全性に不安を感じるかもしれません。
• ユーザー名とパスワードのどちらが誤っているかをユーザーが理解できるエラーメッセージを使用しましょう。この方法は安全なベストプラクティスではないと議論するユーザーもいますが、反論として、登録フォームを使用して、どの電子メールが登録済みアカウントに使用されているかを調べることができるという意見もあります。
• ソーシャルメディアなどの他社サイトのIDを使用してログインするオプションを提供しましょう。このオプションを使用したがらないユーザーもいますが、記憶しておくアカウントとパスワードの数を減らしたいと考えているユーザーもいます。
• MailChimpには、パスワードの表示/非表示をユーザーが切り替えるオプションがある。

ログインからその先へ！

ログイン画面は、多くのユーザー体験の始まりで、よくできたものなら、非常に素早く楽に使えるため、体験そのものにほとんど気づくことがありません。ログインページの基本要素は一見シンプルですが、スムーズで快い体験にするには、考慮すべき側面が数多くあります。一般的なベストプラクティス、アクセシビリティ、セキュリティは、どれもが、ユーザーが写真を投稿したり、メールを読んだり、欲しかった新しい服を購入したりするためのログインをデザインするのに重要なポイントです。

この記事はEverything You Need to Know About Creating Smooth Login Experiences（著者:Linn Vizard）の抄訳です