「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
アプリ設計を成功させる方法はたくさんありますが、そのなかでも特に大事なのはスマートなモバイルUIでしょう。
ストアで上位にランクインしているアプリは、ほとんどが記憶に残りやすいユーザーインターフェイスを用いています。インパクトがすべてとはいいません。さまざまな要素が最適に組みあわせられたときに、良いデザインは生まれます。身近なパターンデザインを照らしあわせて、どれが一番使いやすくてベストなデザインかを探すべきです。
今回は、ログインにまつわるデザインにおける注意点をご紹介します。
Sam Atmore / dribbble
デザインが心理学的もたらす効果を知ることは、ユーザーの心を動かすデザインへの近道です。ユーザーをイライラさせることのないように、むしろ使っていてワクワクさせるインターフェイスを目指しましょう。
まずは、気をつけるべき8つのポイントを紹介したいと思います。
jokinL / dribbble
ログインを必要とするサービスならば、情報入力エリアのデザインを優先的に改善しましょう。
できるだけ見やすくクリアーに、ユーザーが余計な手間を踏むことなくアプリを使えるようにしましょう。
おすすめのデザインは、アプリを立ち上げたらすぐにログイン画面が開くスタイルです。従来型のログインボタンやサインインボタンではなく、もっとクリエイティブなデザインにしてみるのもいいでしょう。ログインデータを保存し自動ログインできるようにすると親切です。
通常、サインアップとサインインのボタンは同じ画面に表示されていますよね。言葉が似ていることもあり、実はユーザーからするとややこしい場合があるのです。
間違ったボタンを押してしまった場合、ユーザーが機嫌を損ねてアプリを離れてしまうケースも考えられます。
紛らわしいものは別々の場所に置くことを心がけましょう。そして、違いがわかりやすいように言葉を変えたり、デザインを変えるようにするのがいいですね。基本的に、アプリ内に表示するものは、読みやすくて簡単に理解できる必要があります。
Charmie Kapoor / dribbble
似た言葉のほかに、似たような入力フォームもユーザーを惑わせてしまいがちです。
たとえば、登録画面とログイン画面を見比べたとき、どちらにもユーザー名、メールアドレス、パスワード、の入力欄があります。しかも似たようなデザインであることが多いです。
それぞれの画面に違う入力方法を採用すれば、新規ユーザーが間違ってログイン画面に入力してしまうことを防げます。
Muhamad Reza Adityawarman / dribbble
多くのユーザーが犯してしまう間違い、それがパスワードの入力ミスです。特に、モバイル機器の小さいキーボードではミスタイプが多発します。
セキュリティー上の理由でパスワードは見えないようになっているのが普通ですが、キーボード慣れしている人でも、入力ミスをしてしまうことがしばしばあります。
これを防ぐためにおすすめなのが、パスワードを一時的に表示する機能です。ユーザーは入力ミスに気づきやすくなります。
ユーザーが間違ったパスワードやメールアドレスを入力してログインに失敗したときは、そのことを伝える警告メッセージを出しましょう。
理由もわからずに何度もログイン情報を求められたらストレスになってしまい、それが原因でアプリを離れてしまうかもしれません。
「メールかパスワードが間違っています」のような、セキュリティーを気にしつつもユーザーフレンドリーなメッセージや、解決方法をすぐさま提示するようにしましょう。
leima / dribbble
あまりに多くのWebサービスがアカウントを発行するので、あなたのサービスのユーザー名は時間とともに忘れられてしまうかもしれません。
他人と被らないユーザー名にするために、数字や記号を必要以上に追加したり、さらには本名で登録してしまったりするケースがあります。そのとき限りのユーザー名では、覚えておくのはおよそ不可能でしょう。また、本名での登録は、プライバシーの観点から避けるべきです。
ログイン時にユーザー名の入力欄があることで、そもそもユーザー名を作っていないユーザーが、ユーザー名でログインしようとしてしまう問題も起こり得ます。
これらの問題を避けるためにも、メールアドレスや電話番号とパスワードでログインしてもらうことを心がけましょう。
Benaz Irani / dribbble
誰もが一度や二度は、パスワードを忘れてログインできない! なんて状況になったことがあると思います。
ログインページから直接パスワードリセットできるようにしましょう。ユーザーが足踏みすることなく次のステップに進めます。
入力フォームのすぐ下に「パスワードをお忘れですか?」と書かれたリンクを設置して、指定のメールアドレスや電話番号にリカバリーコードを送るように設定しましょう。ユーザーのイライラを劇的に解消できます。
多くのWebサイトやアプリでは、セキュリティー上の理由からある一定回数以上入力を間違うと、アカウントをロックしてしまうことがあります。
もちろんセキュリティーは大事ですが、ロックしてしまう前に警告メッセージを表示してユーザーを驚かさないようにしましょう。あと何回でロックされてしまうかを表示したり、10分間は入力できません、などのメッセージを表示させるのが有効的です。
少し前まで、ログインフォームの質は注目されにくく、どのアプリでも同じようなデザインでした。
最近では、オリジナリティのあるログインフォームを作ることが求められています。ユーザーインターフェースが重要な役割を果たすモバイル機器では、特にその傾向があります。特に自作アプリや自社サービスで独自のブランドを確立したいと考えるクリエイターには重要な課題です。
ログインフォームの重要性に気づいたデザイナーや開発者は、見た目にこだわった、より良いデザインを目指してアプリを作っています。
ここからは、モバイル機器向けログインフォームのデザインを紹介したいと思います。デザインのヒントにしてください。
unknown / dribbble
Tom Woodhouse / dribbble
Nabil / dribbble
Ranjith Alingal / dribbble
Gareth Johnson / dribbble
Adit Septian / dribbble
Yaroslav Samoilov / dribbble
Shea Lewis / dribbble
unknown / dribbble
Michela Bragie / dribbble
Herve Rbna / dribbble
Michal Ptaszynski / dribbble
ログインという行動自体が、ユーザーにとってある程度複雑なことです。見慣れないフォームはなるべく使わないようにし、小難しさを払拭しましょう。初心者におすすめなのは、自分のアプリと同じカテゴリーで人気があるアプリを参考にして、その仕組みを真似することです。
クリアーでわかりやすい入力フォームをうまくデザインして、ユーザーに楽しんでもらえるアプリやサービスを作れるといいですね。
(翻訳:Juri Ando)