登録フォームのユーザー体験のガイドライン

Marcin Treder

Marcin Treder氏は最高のユーザーエクスペリエンスデザイン制作を追求するデザインエンスーです。ユーザーエクスペリエンスデザイナー兼ユーザーエクスペリエンスの企業経営者として何年か活躍した後、自身のスタートアップ企業UXPin創設に尽力しました。

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

The Ultimate UX Design of: the Sign-Up Form (2017/5/17)

登録フォームには、いくつかのフォームフィールドと決定ボタンがあります。もっとも一般的なのは、メールアドレス、パスワード、そして奇妙な「パスワードの再入力」の3つです。この最小限の登録フォームにデザインにおいて、さらなる改善の余地はあるでしょうか? 注目するにはシンプルすぎるでしょうか?

残念ながら、多くの非デザイナーや一部のデザイナーは、登録フォームのデザインは重要でないと考えているようです。シンプルで小さな登録フォームはデザインしなくてもよいのでは? デザインするだけ時間の無駄と考えるようです。ですが、それはまったくの間違いです。

私はデザインの素人に対して説明を試みましたが、彼は次に述べるような人たちがいることを信じてくれませんでした。Webサイトを訪れ、ホームページの大きな「登録」のボタンをクリックしたにもかかわらず、簡単なフォーム入力をやめて登録しない人たちのことです。彼らは「もう登録することに決めていたのに、3つの入力をためらう人がいるなんて信じられない」というのです。

途中で登録をあきらめる人はよくいるのです。私はGoogle Analyticsのデータをその人に見せました。データは、登録ボタンを押した人の23%がメールアドレス、パスワード、パスワードの再入力の3つの項目を入力せずにやめてしまうことを示していました。23%は多いです。ほぼ1/4の人がフォーム入力に躊躇するということですから。

私は、登録フォームの入力をやめる人がいる原因を調べてみました。すると親切にも70%の人が自由記入式の質問事項にまで回答してくれました。驚いたことに、いつもメールアドレスをどこにも入力せずに登録を考え直す主な理由として、「スパムメールが送られてくるのではないか」という不安を33%もの人が挙げました。(不必要だと思われがちな)フォームの複雑さと登録に時間を費やしたくないというのが次に多い理由で、21%を占めました。

なぜ登録をせずにフォームを離れたのですか?(左から「スパムが怖いから」「フォームが複雑だから」「理解しづらいから」「わからない」)

多数の登録フォームを調べた上で私が気づいたことがあります。多くのフォームは、上記のような残念な欠陥のせいで失敗を招いているのです。つまり、万全ではないのです。

では、完璧な登録フォームの作り方を学習しましょう。まず、いくつかの例やお手本に目を通していきましょう。そして、安全性、明瞭な説明、最小限のフォーム、魅力的なコピーのみに焦点を当て、独自の完璧なフォームを作り上げましょう。

以下の例は、プロトタイピングアプリ UXPin-The UX Design にそれぞれ直接アップロードできるテンプレートも紹介しています。

安全性

まず第一に、登録フォームを使用する理由を考えましょう。私は以下のように考えます。

  • ユーザーのセンシティブな情報を安全に保持するため(例:Mint.com、UXPin.comなど)
  • 特定のデータの所有者としてユーザーを認識するため(例:Facebookなど)
  • サービスへのアクセスを制限するため(例、イントラネット全般)
  • 商用目的でユーザーデータを集めるため

これを念頭に、ユーザーが登録フォームを目の前にしたときにどのような気持ちになるか考えてみましょう。一般のインターネットユーザーにとっては、登録フォームの目的が不明瞭なことが多いのです。私たちはわからないと不安を感じます。疑いながら騙されやしないかと恐れフォーム入力をあきらめる人が多いのも納得できます。

ほとんどの場合、登録フォームがあることで利益を得るのは制作者のあなたです。そのため、ユーザーが安心感を持てるようにする責任はあなたにあるのです。

とても奇妙なことに、ほとんどの登録フォームは、この問題に対処できていません。メールアドレスを入力しても安全だという説明をしなかったことで、ユーザーになりそうな人が登録を考え直してしまうかもしれません。あなたはそんな危険を冒しますか?

登録フォームの数少ない良い例として、Mintのフォームがあります。

Mintの登録フォームは安全性を実感できるようにデザインされた優れた例です。

Mintは視覚的表現(施錠アイコン)を使い登録の全過程が安全だということを暗示します。NortonとTRUSTeのシールがさらにフォームの安全性を保証しています。

Mintが登録によって得られるユーザーの利益を繰り返して説明しているところにも注目しましょう。情緒的な表現(「あなたがMint.comを愛するようになる理由」)を用いて親密さや想い入れといった感情を起こさせます。これこそが、登録フォームのこの段階で顧客がサービスに対して持つ疑いを完全になくすのに必要なものなのです。

Mint.comのワイヤーフレームテンプレートをUX Pinからダウンロードする

登録フォームへの安心感を高める興味深い例として、Songkickの登録フォームも挙げられます。Songkickは、定番の登録フォームと共にSNSへのサインインも採用したよくある形式を使用しています。

Songkickの登録フォームは、SNSへのサインインを採用した良い形式です。

適切なSNS連携は、とても強力な手法です。時間を省きトラブルを回避します。しかし、より危険を感じさせる可能性もあります。SNSの場合、スパムメールでユーザーのメール受信箱だけでなく、その友達の受信箱までもが攻撃されることがあるのです。これは厄介なことです。この種の登録プロセスでは安全性の強調がきわめて重要です。

その点、Songkickは小さいながら力強いフォームです。初めに「許可なくしてはFacebookに通知しません」と明記しています。それは単なる記述で、ユーザーの絶大な信用を得ようとしていることに変わりはありませんが、このように明記することによって、少なくとも顧客の心配に向き合い丁寧に不安を和らげようとしているのです。

顧客が不安を抱いていることがあれば、逃げ隠れせずに立ち向かい対処しましょう。

Songkickの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

説明

「安全性を強調する」コンテンツの例に続き、登録フォームのコンバージョン率を向上させユーザーに親しみを持ってもらうためのとても重要でありながら軽視されているポイントについて考えましょう。

それはそう、説明です。

登録プロセスは人工的です。「オフラインの世界」ではほとんど通用しないものであり、見ればわかるものではないのです。我々にとって便利で安全なフォーマットでユーザーにデータを提供してもらおうとするのに、その目的を説明しなかったり、必要なフォーマットさえも知らせなかったりということがかなり頻繁にあります。

パスワードが短すぎた、あるいは数字が一切含まれていなかったということを知らせるフォームを何回も見たことがあるでしょう。頻繁にあります。パスワードのフォーマットについてのお知らせは前もってすべきです。

GitHubの登録フォームを見てみましょう。

GitHubのフォームでは、フォームを送信する前にパスワードのフォーマットについて知らせています

GitHubのフォームは完璧ではありません。及第点といったところです。実際、私は入力フィールド内にプレースホルダーでラベルを表示していたり、一番最初に「ユーザーネーム」を入力させる理由が理解できません。

ですが、このフォームのとても素晴らしいところは、パスワードについての注の部分です。「注:1つ以上の数字と7文字以上の文字を用いましょう」という注意書きによりユーザーは時間と労力を節約できます。これに対し、入力したパスワードが短すぎたり数字を含まなかったりしたときに、エラーメッセージでこうした注意書きを表示するサービスがほとんどです。決してユーザーにとって親切な解決策とはいえません。

GitHubのワイヤーフレームテンプレートをUX Pinでダウンロードする

 

Facebookは、誕生日のフォームフィールドの入力時に、同じように説明を表示しています。登録フォームに誕生日に関する質問があることに違和感を覚えるユーザーが多いことを把握し、短い説明とリンクを貼ったのです。「どうして私は誕生日を教える必要があるのでしょうか?」という疑問に答える素晴らしい試みです。

Facebookの登録フォームには賢いアイデアが含まれています。

Facebookの登録フォームのラベルをよく見てみましょう。「新しいパスワード」というラベルがありますでしょう。これは安全性に配慮した良い例です。他サービスで頻繁に使用しているパスワードを使わずに新しいパスワードを作るように顧客に促しているのです。賢いデザインです。

FacebookのサインフォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

ユーザーのためにデザインする

登録フォームをデザインする際に必要なこととして、以下ようなポイントが挙げられます。

  • スパムメールの不安をなくす
  • わかりやすいフォームを作る
  • 不必要に複雑にしない

フォームの効率は、フォーム全体の簡単さに依存します。ユーザー候補が10分も登録フォームとにらめっこするようなことは避けなくてはなりません。数秒のうちにデータ入力および登録が完了できるようにしましょう。

私の知る優れた登録フォームでは、ユーザーのためにさまざまなことをしています。

Hunchのフォームを見てみましょう。無駄な時間と労力を省くために、FacebookやTwitterアカウントでサインインするように促しています。“Why be old-fashioned?”(その方法、古臭くない?)という直接的でくだけた表現が親しみやすさを演出しています。

HunchのSNSサインインは時間と労力を節約する

登録とサインインフォームに戸惑いしかもすでにアカウントを持っている人(よくあるケースなのです!)のために、 Hunchは正式なフォームに移行するためのわかりやすいオプションも用意しています。

Hunchの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

私のお気に入りの登録フォームの1つに、Podioの優秀な制作チームがデザインしたフォームが挙げられます。Podioの2つの登録フォームは、ユーザーのために徹した良い例です。

ホームページ上で最初に現れるフォームは、1つのフィールドと4つのアイコン、説明で構成されたショートカットです。何の心配もありません。数字の1,2,3と同じくらい見てわかりやすいフォームです。

Podioのミニサイズの登録フォーム。限りなく簡単。

この登録フォームでは時間の無駄だと捉えられることはないでしょう。メールアドレスの入力や適切なSNSサインイン選択に10秒もかかりません。これはとても印象的な構想です。

Podioのミニサイズ登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

Podioの登録フォームの大きい版(メインサイズ)はさらに優秀です。わかりやすく説得力のあるシンプルなフォームから、Podioのデザイナーたちの広い知識がうかがえます。

Podioのメインサイズ登録フォーム

Podioのフォームフィールドは、たったの1つです。しかしSNSサインインのオプションはよりわかりやすくなっています。一般的なFacebookやTwitterでの登録以外にも、GoToMeetingでのサインインなど仕事目的での利用を考える顧客にも対応しています。

Podioのメインサイズフォームのマイクロコピーはただただ秀逸です。「Good decision.」という見出しを付けることにより、全登録過程を含む積極的なフレームを形成しています。私はこれが単純に好きです。また、Podioでは強力な視覚的表現による社会的証明をうまく利用しています。つまり、Podioの利用者を表示するのです。彼ら利用者にとって有益ならば、あなたにとっても有益ではないかというのです。

Podioが完璧だと言えないのは、「アスタリスク」の使い方で手抜きが見られるからです。

第一に、1つのフィールドしかない場合、その中にアスタリスクが必要です。第二に、フォームラベルの隣にアスタリスクを付けるのであればその説明が必要です。

Podioの登録フォームをUX Pinからダウンロードする

コピーの数

Podioの登録フォームの事例から、登録フォームをデザインする上で優れたコピーがいかに役に立つかということが分かりました。登録プロセスに製品を売り込む気の利いた情緒的なコピーを入れることで、ユーザーの不安をなくしています。

Basecampでは、彼らの実際の顧客を写真と「先週7,087の企業がBasecampに登録しプロジェクトを運営しています。今日は貴社の番です。」というコピーを表示することで社会的証明をうまく活用しています。これは強力な解決策です。

Basecampの説得力のある登録フォーム

Basecampではまた、「登録は1分もたたずに終わります」と明記し、登録プロセスが簡単ですぐに終わることを強調しています。さらに、アカウントがある人は、フォームに入力する必要がありません。「ログインはここから」からログインできるのです。

このBasecampのフォームは私が見てきた中で一番説得力のあるフォームです。

Basecampの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

秀逸なコピーは、細かいディテールまでこだわるべきです。コールトゥアクション(CTA)は、小さなものかもしれませんが非常に重要です。驚いたことに、「フリートライアルを始める」や「無料登録」などの標準的なCTAを採用しているフォームがほとんどです。コンテキストを意識したCTAの優れた例としてTumblrの登録フォームが挙げられます。

Tumblrの登録フォーム

TumblrのCTAは、「投稿を始めましょう!」という表現のみです。この表現はユーザーの行動を促進するものであり、標準的なCTAよりも的確です。

CTAはどのようなフォームにおいても影響の強い要素なため、十分にABテストがなされるべきです。

Tumblrの登録フォームのワイヤーフレームテンプレートをUX Pinからダウンロードする

段階的チュートリアル

さて、今までに得た知識を使って完璧な登録フォームをデザインする過程を考察してみましょう。

今回はUX Pinを使って説明しますが、もし同じように登録フォームを作る場合は好きなアプリを使ってください。

1. 基本構造

まずキャンバスを設定します。インターフェースに関しては既にアイデアがあるので、コンテントを3つのボックスで分割します。それぞれのボックスには、重要な情報を表示することになります。

2.  見出しと区切りを入れる

まず、見出しを追加して、ユーザーにポジティブな感情を持ってもらえるようにします。ここではPodioの登録フォームのアイデアをうまく取り入れます。ログインフォームへのリンクにも小見出しを付けます。

フォーム全体を2つの重要なステップに分け、それぞれを線で区切ります。

3. フォーム

簡単なSNS連携登録と2つのフィールドからなる標準的な登録フォームを追加しようと思います。このCTAはかなり一般的なものですが、実際のサービスの登録フォームならば、(上記で述べたTumblrの例のように)コンテキストに沿ったものにするでしょう。

より安心感を与えるマイクロコピーを作っていこうと思います。FacebookやTwitterで登録する人を後押しするために、「入力の時間を省略できます」と説明します。

4. 安全性

登録プロセスで顧客が安心感を持つように、以下のようなポリシーとルールを記します。

  • ユーザーにスパムメールを送りません
  • 許可なくユーザーのFacebook/Twitterに投稿しません
  • 安全上の理由から、長いパスワードの設定をお勧めします
  • 問題がなくてもアカウントが取り消される場合がございます。

こういった記述は、われわれが良い意図を持ち、あくまでも正直であることをユーザーに強調します。

5、パスワードのチェック

わたしは「パスワードのチェック」形式の大ファンです。思うに、「パスワードの繰り返し入力」といったフィールドは行き過ぎです。最初にパスワードを間違えないようにユーザーに強調しておけば、繰り返し入力させずに「パスワードを表示する」というチェックボックスを用意しておけば良いでしょう。

1クリックで済むオプションを簡単に用意できるのに、わざわざ2度もパスワードを入力させる必要はありません。

6、社会的証明

最後に、社会的証明を追加します。わたしは社会的証明を安全ベルトと同じようなものと捉えています。つまり、ユーザーの疑いをなくすため、サービスが安全で大勢から支持され受け入れられていることをさらに証明するものです。