使いやすいアカウント登録フォームを考える

はじめましての方もこんにちは。デジタルプロダクトデザイナーのさだこえと申します。

今記事では、サービスにユーザーを定着させるために重要な要素であるアカウント登録フォームについて考えていきたいと思います。(SNS認証ではなく、メールアドレスとパスワードを用いた認証がメインです)

まずは使いやすいを定義するより、どんなアカウント登録フォームが使いにくいのかを考えます。なぜなら使いにくいを言語化し、それを解決するデザインが結果的に「使いやすい」に繋がるからです。

1. エラーのバリデーションが厳しすぎる

(入力中にも関わらず、エラー判定されてしまう図)

フォームのエラーはリアルタイム、もしくは送信後の2つに大きく分けることが出来ます。個人的に使いにくいと感じるのは、入力中にバリデーションが判定されてしまう挙動です。

入力中のタイミングでバリデーションさせるのではなく、フォームからFocusが外れたタイミングにすることでユーザーのストレスを低減させることができます。

2. コピー・アンド・ペーストできない

パスワードやメールアドレスはサービス毎ではなく、ある程度共通で使っているユーザーが多いと思いますが、セキュアを意識した結果、コピー・アンド・ペーストを禁止したアカウント登録フォームをたまに見かけます。

もしパスワードが20~30文字数である場合、キーボードで手打ち入力するのはとても不便なため、よほどの理由がない限りアカウント登録のフォームはコピペ禁止にしない方がベターです。

3. パスワードの再確認入力を求められる

パスワードの再確認入力って何故必要なんでしょうか? 恐らく普段利用しているパスワードと間違って登録されるのを防ぐためだと思いますが、仮に普段使っているパスワードで間違って登録しても、その後パスワードの変更をサービス内で行えばよいので、アカウント登録フォームで入力する項目を増やす必要は無いかなと考えています。

余談ですがAppleも登録の際に、パスワードの再確認入力を求めていますね...。

4. パスワードの表示切り替えが無い

前述に関係してくることですが、アカウント登録フォームでパスワードの表示、非表示切り替え機能は非常に有効な機能です。(よくある 👁のボタンですね)パスワードが20~30文字で、手入力だと最終的に間違ってないか確認したいのですが、type="password"で「********」だと、間違っていないかを確認する手段がないので、表示、非表示切り替えはマストだなと感じます。

上記例はチェックボックスのパターンです。利便性かなり変わるので、基本的には導入したほうが良いと思います。

5. Placeholderにフォームのラベルが書かれている

一度入力してしまうと、そのPlaceholderに書かれている内容は確認できないので、パスワードの仕様(8文字以上)などの内容をPlaceholderに書くのはあまりユーザーフレンドリーじゃないと思います。

フォームのデザインをミニマルにしたいために、自分自身、上記のようなデザインをした経験が多々あるのですが、普通に使いにくいですね...。

余談ですが、Instagramのログインの挙動のように、Placeholderがにゅいっと上にアニメーションしてラベルになる挙動ならアリだと思います。(Androidアプリでもよく見かける挙動ですね)

まとめ

5つほど使いにくいアカウント登録フォームの例を上げましたが、使いやすくするには下記の項目に注意することで、使いやすいアカウント登録フォームをデザイン出来ると思います。

1.エラーのバリデーションはFocusが外れたタイミングにする。

2.コピー・アンド・ペーストを禁止しない

3.パスワードの再確認フォームを削除する

4.パスワードフォームの表示/非表示機能をつける

5.Placeholderにフォームのラベルは書かない

上記項目をもとに、アカウント登録フォームのUIをデザインしてみました。一見シンプルに見えますが、サービスのCVRに大きく関わってくる重要な要素です。他のサービスのUIをただ真似するのではなく、なぜ使いにくいのかを言語化して、それを解決するデザインがスキルとして求められるのかなと思います。

----------------------------

Twitterはこちら! 

ポートフォリオはこちら!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

頂いたサポートは記事執筆のための活動費や、書籍購入費用に当てさせて頂きます!💪また記事を読んで思うことがあったら、Twitterなどで感想やFBを頂けると大変うれしいです!

わーい!これからもがんばります😂
102

MAMORU KIJIMA

「◯◯を考える」

デジタルプロダクトデザイン関係の記事をまとめています。
7つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。