KNOWLEDGE
KNOWLEDGE

登録フォーム改善!toCサービスのオンボーディング参考事例を紹介

前回、サービスのコンバージョンを上げるためのEFO(Entry Form Optimisation)の基本について説明いたしました。

今回は、その続きとなり前回の内容を踏まえた、オンボーディングに一工夫されているtoCサービスをいくつか実例としてご紹介いたします。

オンボーディングと一括りで表現しましたが、そのフェーズはサービスの導入~定着にまで及びます。今回は、その中でも特にEFOとも関わりのある登録フェーズの事例をアプリ・web問わずタイプ別に4つほど集めました。

NETFLIX

まずはじめに、前回ご紹介したポイントを踏まえたお手本のような事例です。

言わずと知れた動画ストリーミングサービスの「NETFLIX」。本記事をご覧の方も、登録されている方は多いのではないでしょうか?
まずはNETFLIXの登録導線を見てみましょう。

前回の記事では、以下の点を基本としてご紹介いたしました。

  1. ユーザーの現在地や進捗状況がわかるインジケーターを設置。
  2. 必須の情報をわかりやすくラベリングする。
  3. 入力内容が分かりやすいようプレースホルダーやヘルパーテキストを設置。
  4. 入力内容をリアルタイムバリデーションでミスがないかチェック
  5. 余計な導線は設けず、入力フォームからの離脱要素を無くす。
  6. そもそも情報量を減らし、ユーザーがゴールに辿り着きやすいようにする。

NETFLIXの場合、
1つ目のポイントでは「ステップ1/3」のように、ユーザーの現在地やゴールまでの距離を示しています。初めて訪問したユーザーにとってはどれほどの情報を登録しなければならないのか不明であるため、NETFLIXのように登録する情報量が少なくても、ゴールを明確にしてあげるのがベストであるとよくわかる事例ですね。

2つ、3つ目のポイントに関しては、そもそも全てが必須であり入力せずに進める認識を持たないシンプルな項目であるためラベルなどは設置されていません。この場合はラベルなどは逆に余計な要素となってしまうかもしれません。

6つめのポイントである「情報量」はとてもシンプルに設計されています。登録するのはメールアドレス、パスワード、プラン、支払い情報のみとなっており、サービスへの登録までのプロセスではこれ以上ないほどシンプルに情報を削ぎ落としています。

snap.me

次に、コンバージョンのハードルが高いサービスでの事例です。

snaq.meは、新しいおやつ体験を届けてくれるサブスクリプション型のおやつ宅配サービスです。サブスクリプションという点だけで見れば、似た支払い形式のNETFLIXと比べても、登録までの道のりは少し遠く設計されています。

扱うコンテンツが全く異なるということはもちろんですが、登録前の体験としてNETFLIXと大きく違う点は「サービス利用開始後の体験をイメージしやすいか」というものがあり、すぐにコンバージョンに至りにくい(他サービスなどとの検討フェーズも入るため)タイプのサービスではないかと思われます。

snaq.meでは、本登録前に「診断」と称してユーザーの好みや傾向を取得し、「それに基づいたお菓子をセレクトして送ってくれるんだ」というホスピタリティや、届いた時のワクワクを感じさせることを工夫し、サービスへの登録ハードルの高さを演出やデザインで上手く解決しているように感じられますね。

診断後の登録フォームに関しては、前回ご紹介した基本的なポイントの多くは抑えられていますが、ユーザーの位置を示すインジケーターがsegmented controlのような動的な要素に見えてしまったり、バリデーションの返し方などは改善の余地が残っていそうです。

Twitch

次は基本無料で利用できる、登録ハードルの低いサービスの事例です。

「Twitch」は、ゲームや雑談などを配信するライブストリーミングプラットフォームです。基本的には無料で利用できるプラットフォームのため、登録の導線はモーダルのみと至ってシンプルです。

シンプルに必要な情報だけを簡潔にモーダルにまとめているだけではなく、情報入力後のインタラクションやエラーの返し方などが非常に親切で、前回ご紹介したポイントを完璧にクリアしています。

特に、パスワード設定時のインタラクションは非常に親切で、パスワードの強度可視化からユーザーに寄り添ったライティングまで、シンプルながら最適なUIとなっているように感じます。
TwitterなどのSNSもこういった形式に近く、登録せずともコンテンツを閲覧でき、登録時も最低限の情報のみ必要であるサービスの場合はこういったサービスの登録導線を参考にしてはいかがでしょうか?

FiNC

最後にご紹介するのは、パーソナライズされた情報を提供するため、少々デリケートな情報を登録する必要があるサービスの事例です。

「FiNC」は、体重や運動量などのパーソナルなデータを基に、AIを用いて健康・美容のアドバイスといったサポートをするアプリとなっています。

プロダクトの特性上、登録~利用開始までの間に多くの情報を取得しなければなりませんが、FiNCの場合はチャット風のUIで会話するように登録できるのが特徴です。

性別からアプリの利用目的、年齢、身長や体重、ニックネーム、就寝時間、メールアドレス、パスワード、各種通知の許可設定など。書き出してみると情報量はそこまで多くありませんが、会話形式で進むことで情報の量という点があまり気になりません。多くのスマホユーザーはLINEなどのチャットツールを利用しているため、受け答えするUIにもあまり抵抗がないように感じます。
また推測になってしまいますが、整然と並んでいる入力フォームの場合、並んでいる情報をユーザーが能動的に読み込み、理解し入力することになりますが、チャット形式のUIであると情報を受け取りながら返答していく形式になるため、情報処理におけるストレスも低減されるのではないかと感じました。

その他にも、会話の中でさりげなく自然と情報が公開されないことなども示しており、普通の登録フォームでは注釈などで少し堅い伝え方になってしまうところを上手く読ませているように感じます。
プロダクトの特性や世界観、アプリならではのユーザーが負担を感じにくい情報の取得方法など、全体的に工夫されているように感じる導線ですね。

最後に

いかがでしたか?
今回はtoCサービスのオンボーディング、その中でもサービスの利用開始に至るまでの登録フェーズについて、シンプルなものから特徴的なものまで4つほどご紹介させていただきました。

上記のサービス以外にも、特徴的なものや工夫されているサービスはまだまだ存在するため、またの機会に紹介できればと思います。

登録フェーズでは、わかりやすく登録しやすいことが重要であることはもちろん、サービスの戦略や世界観、登録前後の体験も繋げて考えながら、そのサービスに適した登録フォームをデザインできるよう心がけたいですね。今回紹介させていただいたものが少しでも参考になれば幸いです。

UXUIデザイン支援資料

セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。