登録フォームのユーザビリティを向上させる5つのポイント

Jenna Erickson

Codal社のクリエイティブ戦略家。Codal社はシカゴを拠点とするモバイル開発のソリューションを提供しています。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

5 Registration Form Usability Guidelines (2016-04-25)

Webページで犯しがちな間違いの一つとして、登録フォームに項目を作成しすぎることが挙げられます。

今後の販促のためにユーザーの情報をたくさん手にいれようと、サイトやアプリのフォームは項目で溢れかえってしまいます。これはユーザーのフラストレーションや苛立ちを誘う原因の一つになります。

ユーザーから情報を求める前に、なぜそもそも登録する必要があるか述べることはとても重要です。1、2文で端的に自社サイトに登録するメリットをまとめることです。そしてこの文章を登録ページの目立つところ(理想は登録フォームの近く)に表示するべきです。

割引クーポンや無料のE-book、その他の登録しなければ利用できない独占コンテンツのアクセス件を受け取るといったメリットを用意するのもよいでしょう。もし登録フォームに記入するという「うんざりする」作業に勝るメリットがなければ、ユーザーは単にサイトを良くて流し読み、ひどい場合は素通りしてしまうでしょう。

登録フォームで気をつけたい5つのこと

1.フォームの数を最小限に抑える

今日(こんにち)、ユーザーの情報は様々な方法で取得できるものです。アクセスした時点で取得できるような情報を項目に加える必要はありません。項目欄を2〜3個に絞って、不必要な項目を取り除きましょう。

単純に名前、メールアドレス、そしてパスワードくらいにしておくといいでしょう。メールアドレス、パスワードの再記入も必要ないでしょう。もし追加で情報が必要な場合は、事後登録でいつでも手に入れることが可能です。

Twitterは素晴らしい参考例で、たった3項目求めるだけという、比較的簡単な方法でユーザー登録させています。そして3項目の内の1つは、e-mailアドレスか電話番号どちらかのみ入力するだけという選択を与えています。

usability-guidelines-registration-form-twitter

Twitterの登録フォーム(画像元:Twitter)

一方で、Yahooなどのウェブサイトは、ほぼ2倍の情報を求めてきます。

http://usabilitygeek.com/5-registration-form-usability-guidelines/

Yahooの登録フォーム(画像元:Yahoo)

登録フォームの項目が少ないほど登録者が増え、結果収益性が上がることも証明されています。Expediaが項目を一つ取り除いた際には売り上げが急増しました。少し言い方を変えれば、一つの項目によって年に12億円も損していたそうです。

marketingtechblog.comによると、もし2、3個の項目数に抑えておけば、コンバージョン率が50%も上昇するといいます。極端に言うと、登録フォームが長すぎるだけで、売り上げ見込みの半分を失うということになるのです。年商の半分を失うことを考えると、侮れません。

2.プレースホルダーをアダプティブにする

フロートラベルは、入力欄内に表示することで入力を促すプレースホルダーと左右上に表示するラベルを兼ねていることから重宝され、登録フォームではかなり一般的です。一度入力フィールドをタップもしくはクリックすると、プレースホルダーの文字が消え、フィールドの左上に立ち上げります。

フロートラベルのアニメーションはとても簡素で、洗練されており、清楚感あるタッチです。見かけが良いだけではなく、フロートラベルを利用する主なメリットは、ユーザーが既に入力した情報をラベリングしているので、ユーザーが後で見返しやすいというところにあります。

ユーザビリティに精通した専門家は、項目の名前が消えることで、ユーザーの短期記憶の負担となり、送信前の記入チェックを難しくしているという事実を主張してきました。(登録フォーム内の名前、苗字の項目欄を考えてみてください。)対照的に、専門家の中ではサインインフォームは例外だと考える人もいます。これは基本的に2つの項目しかないからという理由です。従って、もし登録フォームがシンプルなら、フロートラベルを選んでも良いでしょう。

フロートラベルを超える改良版が「ユーザーの入力に適応して動くアダブティブ・プレースホルダー」です。これはフロートラベルにとても似ているのですが、ユーザーが項目をクリックすると、ラベルが若干上に現れます。Nielsen Norman GroupのKatie Sherwin氏は「ユーザーの入力に適応して動くプレースホルダー」はスペースを確保する一方で、フロートラベルにおけるレイアウトでの問題の大半を克服できると述べています。

usability-guidelines-registration-form-adaptive-placeholder

「アダブティブプレースホルダー」を使用した登録フォームの一例(画像元:Neural Prediction Model

編注:上記Nielsen Norman Groupの記事ではアダプティブプレースホルダーとフロートラベルはほぼ同義のものとしています。ここではラベルテキストのためにスペースを必要としないもの(故にモバイルに適している)がアダプティブプレースホルダーとしているようです。

3.ソーシャルログインを利用する

このご時世、ユーザーはあらゆるサービスやサイトでログインを強いられるので、メールアドレスとパスワードの組み合わせをよく忘れがちです。例外として、普段から随時ログインしているもの、もしくはユーザーネーム、パスワードの組み合わせをブラウザが保存している場合があるくらいです。

この問題の唯一の解決策は、サードパーティーのSNSプラットフォームを通して登録、ログインさせることです。Washington Postによると、1.35億の人がFacebookを使用しており、全世界で20%が最低でも月に1度はログインしているそうです。UXデザイナーとして、「Facebookから登録する」ボタンを設置し、ユーザーにとってワンクリックでログインできるという簡単な方法を無視するわけにはいかないでしょう。

ユーザーにとって第一に簡単な方法は、もし追加データの提供をユーザーが許可した場合(ソーシャルログインは何の情報を共有するのかポップアップウィンドウで表示しています)、ソーシャルメディアの方法だと、以前では取得することができなかったような顧客に関するデータをも取得する事ができるようになります。記事の前半にも述べた通り、フォームで項目が少ないほど、高いコンバージョン率を獲得します。たった一つのサインアップボタンを忠実に守ることで、マーケティングと営業チームに驚くべき効果をもたらします。

ソーシャルログインを使用する一つのマイナス点は、認証の読み込みに余計時間がかかることで、これにより、ユーザーが途中で中断する確率が高くなります。他のマイナス要素としては、たくさんの情報を共有するので、中には全ての情報を共有したくない人もいるということです。ではどうしたらよいのでしょうか。2〜3項目の短い登録フォームに記入してもらうか、もしくは他のソーシャルメディアプラットフォームを通して登録するか、という選択肢を与えることが解決となるでしょう。Spotifyはどうしているのか下記を見てみましょう。

http://usabilitygeek.com/5-registration-form-usability-guidelines/

Spotifyの登録フォーム(イメージ元:Spotify

4.色を使って状態を示す

ユーザーの入力したフォームの整合性をチェックさせるには、色の使用がかかせません。使いやすい登録フォームは主に3つの色を使用しているケースが多く、赤、緑、そして黄色は直観的に認識しやすい色です。これらの色を使用することで、ユーザーの混乱を簡単に解決できるのです。

大半のユーザーは赤は問題やエラーのメッセージ、黄色は警告、そして緑が確認や成功を表すことを認識します。よって、まず第一にこの3色の法則を守ることが大事になります。

ユーザビリティの専門家によっては赤を使用しないよう提案する人もいます。それは、赤色が大げさすぎる警告表示であり、ユーザーを怖がらせて遠ざける可能性があるからです。しかし、黄色のメッセージにすると、黄色はエラーと認識されているので、ユーザーを混乱させます。

色の理論に沿って戦略的なメッセージやアイコンを使用すると、登録フォームでユーザーの入力が正しいかどうかを表示する素晴らしい手段となります。3色の組み合わせは、登録フォームにおいて最高のユーザビリティを保証するでしょう。

5.すぐにアクセスを許可する

これはユーザビリティのガイドラインなどでもしばしば見落とされますが、一度ユーザーが登録したら、ログインできるようになる前に、メールアドレスの認証を必須としてはいけません。登録後にすぐアクセスを許可してしまい、特定の期間内にメールアドレスを確認してもらいましょう。

また、一度登録したら、すぐにユーザーをログイン状態にさせたほうがよいでしょう。たった今登録したユーザーをログインフォームに戻すことはユーザーネームやパスワードの組み合わせを再度入力させなくてはいけませんし、単純に、理にかなっていません。