アプリのログインでストレスを感じさせないUIを作る８つのポイント

アプリ設計を成功させる方法はたくさんありますが、そのなかでも特に大事なのはスマートなモバイルUIでしょう。

ストアで上位にランクインしているアプリは、ほとんどが記憶に残りやすいユーザーインターフェイスを用いています。インパクトがすべてとはいいません。さまざまな要素が最適に組みあわせられたときに、良いデザインは生まれます。身近なパターンデザインを照らしあわせて、どれが一番使いやすくてベストなデザインかを探すべきです。

今回は、ログインにまつわるデザインにおける注意点をご紹介します。

Sam Atmore / dribbble

ログインフォーム設計時に気をつけるべき８つのポイント

デザインが心理学的もたらす効果を知ることは、ユーザーの心を動かすデザインへの近道です。ユーザーをイライラさせることのないように、むしろ使っていてワクワクさせるインターフェイスを目指しましょう。

まずは、気をつけるべき８つのポイントを紹介したいと思います。

1. テキスト入力画面を設ける

jokinL / dribbble

ログインを必要とするサービスならば、情報入力エリアのデザインを優先的に改善しましょう。

できるだけ見やすくクリアーに、ユーザーが余計な手間を踏むことなくアプリを使えるようにしましょう。

おすすめのデザインは、アプリを立ち上げたらすぐにログイン画面が開くスタイルです。従来型のログインボタンやサインインボタンではなく、もっとクリエイティブなデザインにしてみるのもいいでしょう。ログインデータを保存し自動ログインできるようにすると親切です。

2. サインアップとサインインを別の場所にする

通常、サインアップとサインインのボタンは同じ画面に表示されていますよね。言葉が似ていることもあり、実はユーザーからするとややこしい場合があるのです。

間違ったボタンを押してしまった場合、ユーザーが機嫌を損ねてアプリを離れてしまうケースも考えられます。

紛らわしいものは別々の場所に置くことを心がけましょう。そして、違いがわかりやすいように言葉を変えたり、デザインを変えるようにするのがいいですね。基本的に、アプリ内に表示するものは、読みやすくて簡単に理解できる必要があります。

3. 登録画面とログイン画面の入力フォームを別々のスタイルにする

Charmie Kapoor / dribbble

似た言葉のほかに、似たような入力フォームもユーザーを惑わせてしまいがちです。

たとえば、登録画面とログイン画面を見比べたとき、どちらにもユーザー名、メールアドレス、パスワード、の入力欄があります。しかも似たようなデザインであることが多いです。

それぞれの画面に違う入力方法を採用すれば、新規ユーザーが間違ってログイン画面に入力してしまうことを防げます。

4. パスワードが見えるようにする

Muhamad Reza Adityawarman / dribbble

多くのユーザーが犯してしまう間違い、それがパスワードの入力ミスです。特に、モバイル機器の小さいキーボードではミスタイプが多発します。

セキュリティー上の理由でパスワードは見えないようになっているのが普通ですが、キーボード慣れしている人でも、入力ミスをしてしまうことがしばしばあります。

これを防ぐためにおすすめなのが、パスワードを一時的に表示する機能です。ユーザーは入力ミスに気づきやすくなります。

5. エラーの内容を表示する

ユーザーが間違ったパスワードやメールアドレスを入力してログインに失敗したときは、そのことを伝える警告メッセージを出しましょう。

理由もわからずに何度もログイン情報を求められたらストレスになってしまい、それが原因でアプリを離れてしまうかもしれません。

「メールかパスワードが間違っています」のような、セキュリティーを気にしつつもユーザーフレンドリーなメッセージや、解決方法をすぐさま提示するようにしましょう。

6. ユーザー名ではなく、メールか電話番号で登録してもらう

leima / dribbble

あまりに多くのWebサービスがアカウントを発行するので、あなたのサービスのユーザー名は時間とともに忘れられてしまうかもしれません。

他人と被らないユーザー名にするために、数字や記号を必要以上に追加したり、さらには本名で登録してしまったりするケースがあります。そのとき限りのユーザー名では、覚えておくのはおよそ不可能でしょう。また、本名での登録は、プライバシーの観点から避けるべきです。

ログイン時にユーザー名の入力欄があることで、そもそもユーザー名を作っていないユーザーが、ユーザー名でログインしようとしてしまう問題も起こり得ます。

これらの問題を避けるためにも、メールアドレスや電話番号とパスワードでログインしてもらうことを心がけましょう。

7. パスワード再発行ボタンをつける

Benaz Irani / dribbble

誰もが一度や二度は、パスワードを忘れてログインできない！ なんて状況になったことがあると思います。

ログインページから直接パスワードリセットできるようにしましょう。ユーザーが足踏みすることなく次のステップに進めます。

入力フォームのすぐ下に「パスワードをお忘れですか？」と書かれたリンクを設置して、指定のメールアドレスや電話番号にリカバリーコードを送るように設定しましょう。ユーザーのイライラを劇的に解消できます。

8. 警告なしにログインペナルティーを与えない

多くのWebサイトやアプリでは、セキュリティー上の理由からある一定回数以上入力を間違うと、アカウントをロックしてしまうことがあります。

もちろんセキュリティーは大事ですが、ロックしてしまう前に警告メッセージを表示してユーザーを驚かさないようにしましょう。あと何回でロックされてしまうかを表示したり、10分間は入力できません、などのメッセージを表示させるのが有効的です。

良いログインフォームの事例集

少し前まで、ログインフォームの質は注目されにくく、どのアプリでも同じようなデザインでした。

最近では、オリジナリティのあるログインフォームを作ることが求められています。ユーザーインターフェースが重要な役割を果たすモバイル機器では、特にその傾向があります。特に自作アプリや自社サービスで独自のブランドを確立したいと考えるクリエイターには重要な課題です。

ログインフォームの重要性に気づいたデザイナーや開発者は、見た目にこだわった、より良いデザインを目指してアプリを作っています。

ここからは、モバイル機器向けログインフォームのデザインを紹介したいと思います。デザインのヒントにしてください。

Roostio Login Screen

Login Screen

unknown / dribbble

Job Board – Company Profile / Login

Tom Woodhouse / dribbble

Shopping app

Nabil / dribbble

Tailslife: Login

Ranjith Alingal / dribbble

Moody Sign Up/In Screen

Gareth Johnson / dribbble

Bandio App Login & Sign Up

Adit Septian / dribbble

Parts – login dark side

Yaroslav Samoilov / dribbble

Login Screens

Shea Lewis / dribbble

ZSSK – login and route detail

unknown / dribbble

Daily UI Day001

Michela Bragie / dribbble

Skype Redesign

Herve Rbna / dribbble

Sign Up Window – Daily UI #001

Michal Ptaszynski / dribbble

最後に

ログインという行動自体が、ユーザーにとってある程度複雑なことです。見慣れないフォームはなるべく使わないようにし、小難しさを払拭しましょう。初心者におすすめなのは、自分のアプリと同じカテゴリーで人気があるアプリを参考にして、その仕組みを真似することです。

クリアーでわかりやすい入力フォームをうまくデザインして、ユーザーに楽しんでもらえるアプリやサービスを作れるといいですね。

（翻訳：Juri Ando）