より良い新規登録・ログインフォームの条件について考える
こんにちは！今回は書籍「Form Design Patterns―シンプルでインクルーシブなフォーム制作実践ガイド」を元に、より良い新規登録・ログインフォームの条件について考えてみます。
はじめに
今回の記事の参考書籍はこちらです。
シーン別に章分けされており分かりやすく、登録から経費申請・複雑なフォームまで、さまざまなラインナップが掲載されています。
読む前は「シンプルでインクルーシブ」ってどんな意味？という感じでした（直訳すると「簡潔で分かりやすく、包含性がある」という意味）が、読み終わって振り返ると まさにその通りにフォームについての学びを得ることができたように感じます。パターンごとのHTMLタグについても丁寧に解説があり、詳細に例も載っていたのでエンジニアの方にもおすすめです！
きっかけは、Daily UI 001 に感じた高い壁
DailyUIとは、1日1つのお題で100日間、つまり100個UIデザインのお題をメールで送ってくれるサービスです。デザイン力向上のための訓練として知られており、さらにはアウトプットを習慣化できる素晴らしいサービスです。
デザインスキル向上させたい！100までやるぞ！そう思って入社一年目の時始めたDailyUIでしたが、恥ずかしながら 001 でまずつまずきました。経験ある方はご存知だと思いますが、送られてきたのは
SignUp
の一言。当時知識もインプット量も圧倒的に少なかった私は戸惑い、手当たり次第色々なサービスの新規登録フォーム画面を調べてまわることにしました。
（余談）Daily UI 開始と同時に挫折した私のような人へ
少し話はずれますが、DailyUI はこれ以外もけっこう抽象的なお題が来るので初心者で自信がないという方は設定が詳細に決められている Cocoda! のWeekly Appチャレンジ🔥などがおすすめです。
ペルソナやヒントなどがすごく丁寧に書かれているので、Cocoda！である程度練習をして慣れてきたらDailyUIに挑戦するとやりやすいと思います。何より進め方が書いてあるので初心者に非常に優しいです。私もDaily UI の001で「今の私にはまだハードルが高いな...」と心が折れかけた時、Cocoda！の名刺交換のUI作成で設計や考え方を勉強しました。
また、こちらの記事にはDailyUIを続ける工夫が書いてあって非常に参考になりました。
この記事を読んで、私の挫折の理由は「考えすぎ」だったことに気がつきました。取り組む目的もわからず闇雲に始めるべきではありませんでしたし、
・時間を決めて数をこなす
・しっかりアウトプットを続ける
これらを意識することが大切でした。「こだわりだしたらきりがない」とは本当にその通りです。限られた時間でどれだけの結果を出せるかが重要ですね。少しずつ、あいた時間でリベンジしていこうと思います。
さて、話を戻します。挫折もありましたが、とりあえず世の中にある Sign Up のデザインを見漁り、当時もそれっぽい見た目ものは完成させることはできました。しかし「本当にこれで使いやすいといえるのか」というモヤモヤは抱いたまま...。
↑当時の振り返りです
加えて、ある程度経験を積んだ今はさらにフォームという UI の奥深さを実感しています。そこで今回、より良い新規登録画面について改めて考えてみることにしました。
前提。期待感をアップさせる工夫
まず「Sign up（新規登録）画面がサービスにとってどんな存在か」について考えます。
新規登録画面はおおよその場合、アプリ・サービスと出会って間もない時点でユーザーが触れるものです。そのため、その手前にそのサービスならではの特色が出た概要説明や、分かりやすくてかっこいいウォークスルー（オンボーディング）などがあると「使ってみたい！」という期待を高めてフォームの入力に挑んでくれそうですよね。
もちろんこのような導入は逆に邪魔になってしまう場合もあるので、その都度判断は必要です。
フォーム以前の話にはなりますが、どんな UI でも、それ単体だけで捉えるのではなく体験全体の流れを踏まえることが大事ですよね。これは日々 UI デザインをする中で実感しています。
ハードルを下げる簡潔さ
もちろん、いくら素敵なデザインであってもその先にある登録フォームがいまいちでは台無しです。また、フォームの煩雑な様相によってユーザーのせっかくの「使いたい！」を邪魔しないように気をつけたいです。フォームは簡潔かつ入力しやすそうなデザインにして、
「すぐ済みそうだし、登録してみよう！」
と思わせたいですね。
ただ見た目が「入力しやすそう」「すぐ済みそう」で、きれいなだけでは良いUXを提供できないのがフォームの難しさです。例えば「すぐ済みそう」な見た目にするのであれば、入力必須項目の数を減らすことである程度対処はできると思います。しかし、いざ使ってみるとデバイスに最適化されていなかったり、どこを指しているのかよく分からないエラーが何度も返ってきたり...。
このような使いづらいフォームでは、せっかく興味を持ってくれたユーザーも「登録するのをやめようかな...」と思ってしまう可能性があります。
イラっとさせないバリデーション
そこで分かりやすいバリデーションが役に立ちます。さて、例えば何かのサービスにログインする時、こんなエラーに出会ったことはありませんか？
ユーザーIDとパスワードが一致しません
IDかパスワードのいずれかが違うのか、はたまた両方違うのか、分からないので困りますよね。
「ユーザーIDは合っている・パスワードが違うと教えてしまった場合、そのIDを使って考えうるパスワードが試されてしまう」と、防犯的にこのような形をとっているケースもあると思います。しかし書籍「Form Design Patterns」には、該当するユーザーIDでアカウント登録を試みて見ればそのIDが存在するかどうか簡単に確認できてしまうため、ここに防犯的意味はないと書かれていました。一番避けるべきはユーザーが面倒に思って離脱してしまうことなので、IDとパスワードのどちらが違うのかを明示する必要があるといいます。
このケースに限らず、エラーではユーザーに
・何がいけなかったのか
・どうすれば良いのか
を明確に教えてあげる必要があります。
新規登録の画面については、一例ですが上記のような方法が考えられます。こう書いてみると当たり前に思えますが、良いUXには小さな配慮の積み重ねが大切ですし、細かいところであってもなるべくユーザーが戸惑わないようにしたいですね。
SNS連携で、スイスイ登録できる工夫
ソーシャルログインは情報の入力を省略できるので便利ですよね。最近は中でもLINEログインが多く使われているようです。
ユーザーの手間が省けるのはもちろんですが、登録時の離脱が減ったり、ユーザー情報を取得できたりとサービス側にもメリットが多くあります。
ただし、さまざまなサービスを取りそろえれば良いという訳ではありません。あまり多くのSNSが並ぶと、ユーザーが以前どのアカウントでログインしたか忘れてしまったり、そもそもどれで登録すれば良いか迷ってしまうといったケースも考えられます。
まとめ
では、改めて良い新規登録・ログイン画面を作るための条件について振り返ってみます。フォームについては以下の3つ考えられました。
・何を入力すべきか、項目名やバリデーションを使って明確にすること
・適切かつ簡潔な項目量・形式であること
・SNSログインを用いるなど、ユーザーの負担を減らす工夫をすること
設計においては総じてその場面における「適切」を考えること、さらに冒頭に記載させていただいた通りフォームの前段階で「使ってみたい」と思わせることも同じくらい重要と私は考えています。
もちろんサービスやユーザーとの関わり方によって条件は都度変わってきますし、これらの条件がすべてに適応されるかというとそうでがありませんが、より良い新規登録・ログイン画面におけるフォームを作成するための参考材料となれば幸いです。
参考サイト
紹介する必要もあんまりなさそうですが、Daily UI で戸惑っては何度も訪れた Dribbbleを貼っておきます。インスピレーションとして、海外の素敵なデザインを見ているとモチベーションも上がります。
Mobbin は先輩に教えてもらいました。アプリのUI を考える時によく参考に見ています。
参考書籍
冒頭にも記載しましたが、今回の記事の参考書籍はこちらです。
参考記事
最後に、素敵な新規登録画面のアプリUIをまとめて挙げてくださった記事をご紹介します。どれも日本のサービスなので、非常に参考になりました！
ここまで読んでいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？