この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2015 の投稿記事です。

こんにちは、デザイナーの石黒です。

現在は英語サプリ、受験サプリでUX・UI設計ディレクションを担当しています。

今回は受験サプリで行ったスマホにおけるエントリーフォーム改善のお話をしたいと思います。

受験サプリとは受験生の2人に1人が利用するオンライン学習サービスです。大学受験や苦手克服、定期テスト対策に役立つ機能に加え、カリスマ講師が教える豊富な講義ラインナップで苦手克服をしたい高校1、2年生から難関大学を目指す受験生まで自分にあった講義をご活用いただけます。いつでも、どこでも、何度でも、空いた時間や好きな場所で勉強でき全ての機能を980円（税抜き）で使い放題なサービスです。

エントリーフォームのUI改善とは

改善前の受験サプリのスマホ版エントリーフォームは、『PC版エントリーフォームをスマホ版にリサイズしただけ』と言われても仕方がない状態でした。

「長い」という印象を持ってしまいますね。ユーザーが会員になってもらうためには、必ず登録を行なう必要があります。ユーザーはこの導線を突破することで、はじめてコンテンツを利用できるようになるため、非常に重要な通り道と言えます。この通り道で余計なストレスを与えず、いかにスムーズに通り抜けてもらうかがエントリーフォーム改善に置いて需要なテーマとなってます。私自身も、登録作業に煩わしさを感じてしまったらやる気の熱が冷めてしまうことがよくあります。ビジネスの目線からも、登録導線の離脱率を下げることで獲得数を最大化させるという命題があります。

エントリーフォームを改善する上でまず『入力項目を減らす』ことを考えると思いますが、今回は入力項目を減らすことが出来ないという制約条件が存在しました。そこで、何が課題であるかを明らかにすることにしました。

課題とユーザーの明確化

定量データを見るだけでなく、自分たちがユーザーとなって会員登録を体験し何を感じたか可視化していくことで、『課題の自分事』を進めていきました。

忘れてはいけないことは『受験サプリのユーザーが高校生である』ことです。社会人の感覚だけで判断していては、思わぬ落とし穴にハマる可能性があります。本来であれば、高校生にユーザーテストを行なうアプローチが最善ですが、リソースと納期の関係上今回は実施できませんでした。

受験サプリでは、日々たくさんの高校現場にて活用していただいております。活用してくださった高校の生徒に向けて登録をサポートする場を設けさせていただいております。何十人もの高校生の登録をサポートしているステークホルダーに『登録するときはどうなのか』『どこを間違えやすいのか』をヒアリングすることで高校生の声を吸い上げることにしました。

以下、改善前のエントリーフォームの大きな3つの課題点。

1. 間違いを誘発させやすい ( 高校生は思ったより間違えやすい ) 
   • 1画面に情報が多すぎる ⇒ 入力に集中できない
   • 小さくて押しづらい ( textbox など ) ⇒ 誤タップしやすい
   • サジェスト機能が少ない ⇒ 全て入力しなければならない
2. 間違えたとしても、すぐに気づくことができない
   • 全て入力した後に画面遷移するタイミングでエラーを判断される ⇒ 最後に間違えがわかる
3. どこを間違いたのか理解できない
   • エラーが出た場合、画面上部に戻ってしまうためどこがエラーかすぐに判断できない ⇒ どこを間違えたか瞬間的にわからない

最適化するための3つの基本方針

課題が明確になったところで、ユーザーのモチベーションを維持し、余計なストレスを与えずいかにスムーズに登録してもらうために必要な3つの基本方針を立てました。

1. 間違いがすくなく
2. 間違えたとしても、すぐに気づくことができ
3. どこを間違いたのか理解できる

課題に対して素直な基本方針を立てました。とても基本的なことだと思います。このシンプルな基本方針を掲げることで、これを実現するためにどこまで出来るかを理想と現実で摺り合わせていきました。

スマホに最適化を意識したステップ・バイ・ステップ方式のUI設計

スマホに最適化 × ユーザー（高校生）を考慮した結果、ひとつの入力項目を確実に完了させて次の入力に進んでもらえるステップ・バイ・ステップ方式のUI設計を取り入れました。ステップ・バイ・ステップ方式とは、1画面にひとつの入力項目にすることを原則とし、段階的に登録を進めてもらうUI設計のことです。

ステップ・バイ・ステップ方式を採用したことで、UX・UI・分析の3つの観点でメリットが生まれます。

1. UX面
   • 何をすれば良いのか簡潔に理解でき、ユーザーは集中して入力できる
     • 入力する画面から無駄な情報をなくすことができる
   •  スクロール量が最小限に抑えられる
     • 無駄な指の動作を減らせるため、テンポよく入力することができる
2. UI面
   • 画面を大きく使えるため、タイトルやtextboxなどを大きくできる
   • 押しやすさや、視認性の向上
3. 分析面
   • どの画面から離脱したのか判断できるため、今後の改善に活かせる

3つの基本方針に基づく改善策

それぞれの方針で、どのような改善を行ったか具体的に書いていきたいと思います。

1. 間違いがすくなく
   • ステップ・バイ・ステップ方式にすることでスクロール量を減らし、入力に集中してもらう
     • あと何ステップあるかを常に表示させる
     • 1画面あたりの入力項目をひとつにすることで、入力ミスを防ぐ
       • 何をしてほしいのか簡潔にタイトルで記載する
   • 入力項目の順序について検討することができる
     • 前半：考えなくても入力出来るモノ（学年とか在籍高校）
     • 後半：考えて（悩んで）入力するモノ（アダ名など）
   • 任意の項目や、はじめから表示しなくても良い項目に関しては、段階を持って表示させていく
     • ex ) 住所など
   • 入力において『半角全角大文字小文字ハイフンありなしetc』が原因となるエラーをなくす
   • サジェスト機能の向上
2. 間違えたとしても、すぐに気づくことができ
   • リアルタイムバリデーションでエラーをすぐに表示させる
   • 正しく入力しないと、次の入力項目へは遷移できないようにする（ボタンがアクションにならない）
   • 確認画面から修正したい場合は、その箇所のみに遷移し修正できる
3. どこを間違いたのか理解できる
   • エラーメッセージで何を間違えたか伝える

とにかく実機で触って確かめる

1. とにかく実機で自分で触る
2. とにかく実機で他の人に触ってもらう

ワイヤーの段階から実機で触ることを意識しました。なぜなら、仕様を理解している自分がストレスを感じるモノを提供しても、ユーザーがよりストレスを感じてしまうためです。

実装されないとわからない箇所の使い心地などに関しては、開発途中に何度も触ってフィードバックしました。また、開発メンバー以外のステークホルダーにも触ってもらいました。このように実機で触るという行為をいつも行なうことで、課題点の共有や洗い出しができました。

まとめ

実際にこのUI設計がスマホに最適化されているか否かはわかりません。ですが、詳細な数値は明かせないものの、改善前と比較して登録CVRは大幅に向上しました。理想と現実を摺り合わせて進めていたため、工数観点から要件漏れした細かい機能もあります。そのため、ここで終わりにせずユーザーがスムーズに登録できるように絶えず改善をしていくことが大切であると感じています。そして、エントリーフォームの改善は『スマホに最適化 × ユーザーに最適化』させたモノが必要であると考えます。

参考リンク

• 勝手にEFO比較分析 | EFO・フォーム改善ブログ