今回も米国UX movementから会員登録やログインをシンプル化する方法の記事を紹介させていただきます。
本日取り上げるのは、「会員登録とログインをシンプルにするためのテクニック」というタイトルで投稿された記事で、より多くのユーザーを取得するための方法を紹介しています。
前編では、この記事から会員登録をより効率的にする方法を紹介しました。
後編はログインを効率的にする方法を紹介していきます。
ログインをシンプルにするためのテクニック 7選
さっそく、効率的な手法の内容紹介に移りましょう。
ログインのシンプル化で紹介されていたポイントは下記のとおりでした。
ログインのシンプル化
- 自分のメールアドレスを使ってログイン可能にする
- ログイン時に現在のページから離脱させないようにする
- フォームを表示したときに最初のテキスト欄にオートフォーカスする
- パスワードのマスクの解除を可能にする
- 疑問符のアイコンをパスワード回復用リンクに使用する
- ログインボタンをテキスト欄と同じくらい幅広くする
- FacebookやTwitter、またはOpenID経由でログイン可能にする
ログインのシンプル化の大まかなポイント／意図を紹介します。
自分のメールアドレスを使ってログイン可能にする
筆者はこのように述べています。
ユーザー名は自己管理しなければならず、覚えにくいものです。多くの人は基本的にEメールを使用しているため、自分のメールアドレスを覚えています。
ユーザ名を記憶するよりもメールアドレスを記憶するほうが簡単だったりします。
さらに自分のメールアドレスだけでなく、ユーザー名でログインできるオプションも加えます。
こうすることで、それらを忘れてしまった場合でも、思い出すのに悩む時間を少なくしてくれます。
ごもっとも、と言えることを述べていますね。自分のメールアドレスのほうがすぐに入力できる人が多いと思います。
メールアドレスが長くて複雑でも、ユーザーが単語(辞書)登録ですぐに入力できるようにすれば、より素早くログインができますね。
ログイン時に現在のページから離脱させないようにする
どこからでもログインできるのが一般的であり、ログイン直後はそれまで開いていたページへ戻るようにすると良いそうです。素早くログインができるとユーザーも安心です。
これを可能にするための方法は、プルダウンメニュー（セレクトボックス、ドロップダウンとも呼びますね）、またはモーダルウィンドウなどがあります。
プルダウンメニュー（セレクトボックス、ドロップダウン)は、ページのごく一部を占めるだけですぐに開き、簡単なオプションが作られているくらいなので、ユーザーもあまり離脱しません。
モーダルウインドウも、現在開いているページにユーザーをキープできますが、こちらは完全にページの中央に開くので、ログインフォームに補足情報を加えるような形になります。
ログインしたときの状態をどのようにすべきか、そしてその方法を紹介してくれています。
やはりここでもユーザーを困惑させないようにさせることが一番のようですね。
フォームを表示したときに最初のテキスト欄にオートフォーカスする
ログインフォームを開いたときに、自動的に最初のテキスト欄にフォーカスされていると、手順をより効率的にします。
これはキーボードに手を置いてすぐに入力を開始することができて、ホバリングやクリックの時間と労力を節約できます。
この方法は、すぐに入力を開始できることがわかるように、テキスト欄を強調して表示する必要があります。
パスワードのマスクの解除を可能にする
このオプションは会員登録のときと同様に役に立ちます。ユーザーがテキスト欄の文字を見れない場合、パスワードを誤って入力してしまいがちです。
パスワード入力ミスでエラーが出た場合、正しいパスワードの再入力が必要になります。
ここでの問題は、ユーザーがどの文字を入力ミスしたか分からないので、再入力で修正することができないことです。
これで余計なタスクが生まれ、ユーザーの入力速度を低下させてしまいます。
パスワードのマスクを解除できるチェックボックスを追加すれば、再入力時の余計なタスクを回避できます。
パスワードのマスク解除については、前回の会員登録のシンプル化でも述べられています。
会員登録とログインをシンプルにするためのテクニック14選 (前編)
https://f-tra.jp/blog/overseas/5257
会員登録とログインをシンプルにするためのテクニック14選 (前編)
パスワード入力に関しては、いつもこの機能を活用しても良いかもしれませんね。
疑問符のアイコンをパスワード回復用リンクに使用する
パスワード回復用リンクを見つけづらくしてはいけません。「パスワードを忘れてしまった」というリンクを使用する代わりに、
場所を取らない疑問符の「？」のボタンを使用することを検討してください。
「？」はサポートで良く使われるマークなので、このトラブルの際に迷うことがなくなります。
ここでのポイントは、フォームをすっきりさせつつ、ユーザーに分かりやすくすることですね。
アイコンは直感的に認識できるものなので、とても良いアイデアだと思います。
ログインボタンをテキスト欄と同じくらい幅広くする
ログインボタンは、ログインするためだけではありません。どのような動作となるかもユーザーにわかるようにしましょう。
小さいログインボタンは、印象が悪くなりがちで、ログインに対して不安を感じさせます。
大きく広めのデザインのログインボタンは、ログインに対して信頼感を与え、ボタンのラベル文言でログインすることがはっきりと分かります。
ログインボタンの大きさによるフォームの印象についても筆者は述べています。
確かに小さいボタンや質素なボタンだと「ここはちゃんと運営しているサイトだろうか？」と不安になりますね。
サイトの入口、玄関にもあたるので、ユーザーがログインをためらわないボタンのデザインも考えていきましょう。
FacebookやTwitter、またはOpenID経由でログイン可能にする
多くの人々がフェイスブックやツイッター、OpenIDのアカウントを持っていて、それを使ってログインさせることで大きなメリットをもたらします。
会員登録の手間をかけることなく、すぐにウェブサイトを利用できます。また、各ホームページのユーザー名とパスワードを管理する必要がなくなります。
多くの人に幅広く利用されているサイトのアカウントが使用できれば、広告やリンク、口コミでも新しいユーザーを獲得できますね。
最近では何かとコラボという方法もあるかと思います。
筆者は最後にまとめとして、
会員登録やログインの入力フォームで日常生活を苦にさせてはいけません。必要事項の入力にかける時間は誰かのパーティーについて考える時間ではありません。
これらのテクニックは、会員登録やログインをしたら、すぐにコンテンツを楽しんでもらえるようになり、フォームがシンプルで効率的なものになります。
と述べています。
いかがでしたでしょうか。
いざこういったポイントを知ると、理解しているようで実際にはしていなかった部分が多いのではないでしょうか。
この記事で述べられていた手法をまとめると、ユーザーに対しては、
手間をかけさせない、困惑させない、自動的な機能を取り入れる、離脱させないようにする、
といったことを意識したフォームであることが大事だと感じました。
みなさんも導入できそうなものからフォームの改善を意識してみてはいかがでしょうか。
参考記事：Innovative Techniques to Simplify Sign Ups and Logins – UX Movement
