ログインUX / より上手にサインアップする15のコツ

2021/07/02 08:54

Erik D. Kennedy
UI/UXデザイナー
この記事は、著者の許可を得て配信しています。
 15 Tips for Better Signup / Login UX 

この記事ではより便利なサインアップとログインフォームを作るためのUXをご紹介します。こういったUXは私のコース「Learn UI Design」と「Learn UX Design」から学んだものであり、何百もの新人デザイナーのログインフローを見てきた私の経験に基づいています。

では、さっそく始めましょう。

1. ファーストフィールドへのオートフォーカス

皮肉なことに、インタラクションデザインの基本ルールは「インタラクションをなくすこと」です。クリックをなくし、読むことをなくし、待つことをなくし、考えることをなくすということです。

例えば、サインアップフォームを開いた人のうち、文字通り95%の人がすぐに最初のフィールドをクリックすることがわかっている場合、その手間を省くために、最初のフィールドにオートフォーカスするようにします。

(なお、オートフォーカスはスクリーンリーダーを使用しているユーザーには違和感があるので、これを試す価値はあると思います👍)

2. 携帯電話専用のキーボードを使う

人生で唯一確実なことは、(a)死と、(b)メールアドレスに「@」と「.」が含まれていることです。幸いなことに、携帯電話にはこれらの文字を表示する専用のメール入力キーボードがあります。ただし、HTMLではテキストボックスのtype=emailを表示する必要があります。このように少し変更することで、携帯電話ユーザーの生活がより便利になります。

注:サインアップフローの電話番号(type=tel)、URL(type=url)、数字(type=num)にも適用されます。

3. フィールドをすぐにバリデーションする

エラーを指摘する前に、ユーザーがフォーム全体に記入するのを待つのではなく、システムがエラーを感知したらすぐに知らせるようにしてください。メールのようなものであれば、ユーザーが他のフィールドに注目しているときにバリデーションする方がよいでしょう。

一般的には、無効なメールアドレスだけでなく、空白のメールアドレスも検出するようにします。

4. ラベルをクリック可能にする

ラベル付きのテキスト入力では、クリックできるラベルが必要です。これがHTMLのデフォルトで行われていないのは不思議ですが、単にinput要素をそれぞれのlabel要素の中に追加するだけでOKです。これにより、(a) 不意にラベルをクリックして入力を開始することができるようになるだけでなく、(b) 不器用に過ってテキストボックスを少しだけ外してしまった場合にも役立ちます。

(アクセシビリティに関するヒント☝️ - スクリーンリーダーはラベル内の入力をうまく処理できません。そのため、入力を説明するテキストを固有のIDを持つ別のスパンで囲み、「aria-labelledby="my-unique-id "」を入力に追加してください👍)

5. ユーザーがパスワードを選択する際に、パスワードの要件を表示する

ユーザーがパスワードの要件を推測する必要はありません。関連性がある場合は表示してすべきでしょう(ちなみに、関連性がない場合は削除してください)。

6. ユーザーにパスワードを見せる

ユーザーが入力したパスワードを確認できるようにすることで、意図しないパスワードを選択してしまうというUX上の問題を取り除くことができます。また、パスワードを2回入力させるよりも負担が少なくなります。

(とはいえ、後者の方法でも何もしないよりははるかにマシですが)

7. ボタンのテキストを使って、ボタンの向こう側でユーザーを待っている価値を明らかにする

ボタンのラベルは、もちろんユーザーにクリックしてもらうためのチャンスです。もし、ボタンのラベルに平凡な言葉や特徴のない言葉(例:「続く」や「提出」)が書かれているとしたら、それはとても残念なことです。

しかし、自分自身に問いかけてみてください。その向こう側でユーザーを待っているのはどんな価値なのでしょうか?それは、私の無料アカウントを設定することでしょうか?私は30秒後に未来のワークを体験できるのでしょうか?教えてください、お願いします。

8. シングルサインオンを可能にする

私たちが提供するちっぽけなサービスのために、ユーザーに別のユーザー名とパスワードを選ばせる必要があるでしょうか?既存の名前とパスワードを使えるようにしたらどうでしょう?例えば、GmailのアカウントやTwitterのハンドルネームなどのことです!

おかしいですよね?

しかし、これこそが私たちができることなのです。特別な理由がない限り、これは非常にお勧めです。

(あとは、ユーザーがこのオプションをクリックしたときに、サイト側がリマインドしてくれればいいのですが...)

9. ユーザーが利用規約に同意したことを通知することで、クリック数を削減する(ユーザーの明示的な許可を必要とせずに)

OK、ではまず最初に、これはどこでも合法というわけではありません。例えばEUでは、サイトがユーザーにサイトの規約に同意するというボックスを明示的にチェックすることを要求しています。私の意見は?私の意見は、「プライバシーシアター」であり、「悪いUX」であるというものです。許可されている場合は、ユーザーのクリック数を減らしましょう。

10. 「サインイン」と「サインアップ」という言葉をしっかりと使い分ける

半分寝ながらでも完了できるくらいシンプルなサインインにしてください。

そのためには、例えば「サインイン」と「サインアップ」のように、「イン」なのか「アップ」なのか、どっちなのか考えなければならないような紛らわしい言葉を使うのはやめてください。それだけでユーザーは0.5秒くらいは迷うはずです。

その代わりに、「レジスター(登録)」と「サインイン」のように、全く似ていない言葉を使ってください。例えそうしても、ユーザーにとってはたった0.5秒の節約にしかならないかもしれませんが、もし今0.5秒でも節約ができないのであれば、アプリの残りの部分へも悪影響が出ることは間違いありません😬

11. 「サインイン」と「サインアップ」を簡単に切り替えられるようにしておく

誰かが間違った選択肢をクリックしてしまった場合、登録とログイン、またはその逆を簡単に切り替えることができるようにしたいものです。

最も一般的な方法は、フォームの下部にあるリンク(ボタンではありません - 新人のデザイナーがよく犯すミスです)で表示することです。

12. ユーザー名ではなくメールでログインする

ユーザーネームは、個々のサービスごとに覚えるのが大変で、いつものもの以外を選ばざるを得なかったという方も多いのではないでしょうか。電子メールを使えば、もっと簡単にログインできます。

13. ユーザーが無効なパスワードを推測した場合、なぜそれが無効なのかを伝える

ユーザーが推測したパスワードが(a)間違っていて、(b)パスワードの要件を満たしていない場合、どの要件を満たしていないのかをユーザーに伝えてください。「パスワードが正しくありません」と言うだけで、それを修正する方法のヒントをユーザーに与えないのはいい選択肢とは言えません。

14. パスワード試行時に入力した値を記憶する

ユーザーがパスワードの入力に失敗した場合、メールを再度入力する必要はありません。実際、ユーザーが自分のパスワードを見ることができるようにした場合、そのパスワードも消さないでください。ユーザーが自分で打ち間違いをしていないか、確認できるからです。

15.「パスワードのリセット」画面では、既に入力したメールを覚えさせておくべき

「パスワードを忘れました」をクリックすると、わずか30秒前に入力したメールを再度入力させられることがあまりにも多いのです。ユーザーが自分のパスワードを推測し尽くしてリセットしたいと思う頃には、すでに知っている情報をしつこく聞き出すようなことはしないでください。

サインアップのUXに関する他の質問がある方へ

初期のデザイナーが作った何百ものサインアップフローを見てきた私の経験から、この記事で提案したアドバイスは、よくある問題を解決するのに大変役に立つものだと考えています。これらのヒントをすべて実践すれば、自然と分かりやすいログインUXを手に入れることができます。

覚えておいてほしいのは、誰もがあなたのアプリにログインすることだけが目的というわけではないということです。ほとんどのユーザーは、特定の目的をできるだけ早く達成して、どんどん先に進みたいと思っているだけなのです。

優れたUXデザイナーとして、ユーザーのせっかちな気持ちを尊重し、できるだけシンプルにしましょう。

appstore
googleplay
会員登録

会員登録して、もっと便利に利用しよう

  • 1.

    記事をストックできる
    気になる記事をピックして、いつでも読み返すことができます。
  • 2.

    新着ニュースをカスタマイズできます
    好きなニュースフィードをフォローすると、新着ニュースが受け取れます。