新規会員登録などのフォーム入力の途中でユーザーが離脱してしまうことがあります。
サービスに興味のある熱心なユーザーだとしても、フォームを最後まで入力する前に離脱してしまうことも少なくありません。
セレクトメニューがユーザーを離脱させる
よくある理由の１つとして、フォームに複数のセレクトメニューがあることが挙げられます。セレクトメニューのあるフォームでは、ユーザーが離脱しやすいことが調査によってわかっています。
これは、セレクトメニューを選択することが、ユーザーに多くの時間と労力をかけさせるからです。
では、セレクトメニューはどのようにユーザーの離脱を促してしまうのでしょうか？
フォーム入力のフローを阻害する
ほとんどのフォームは、ユーザーが文字を入力するテキストフィールドから始まります。しかし、セレクトメニューが表示されると、ユーザーは選択肢を選ぶためにキーボードからマウスへと手を移動させなければなりません。そのため、タイピングの流れが阻害され、ユーザーのペースが落ちるのです。
選択肢の読みづらさ
いったんセレクトメニューを開くと、選択肢全体をよく見て、その後正しい選択肢を一つ選ばなければなりません。選択肢のテキストは読みづらいため、多くの時間と労力がかかってしまいます。長ったらしいリストがとても狭い行間に押しつぶされているように見えます。
マウス操作での難しさ
選択肢を選ぶためには、ユーザーはカーソルが正しい選択肢から離れないようにマウスを動かさなければなりません。ゆっくりと落ち着いてマウスを操作しなければ、間違った選択肢にカーソルをポイントしてしまうため、正しい選択肢を選ぶようにするにはマウスの器用な操作が必要となります。セレクトメニューのサイズは限られており、選択肢同士の隙間もとても狭いです。ほんの数ピクセルがずれるだけで、誤った選択肢をクリックしてしまうこともあります。
選択肢の間のパディングが小さいと、間違えたものを選びやすくなってしまいます。選択肢を選ぶには、ゆっくりと慎重にマウスを動かす必要があります。
また選択した後、ユーザーは正しい選択肢を選べているかどうか確認しなければなりません。その後、次のテキスト入力のために、手をマウスからキーボードに戻さなければなりません。ユーザーがセレクトメニューのあるフォームから離脱するのも当然ですね。
矢印キーで選択する面倒さ
ユーザーの中には、マウスの代わりにキーボードを使ってセレクトメニューを選択する人もいるでしょう。しかし、ユーザーは選択肢を移動するために↓の矢印キーを押さなければならなく、さらに作業が遅くなってしまいます。
モバイル端末でのフリック操作の難しさ
パソコンを使うユーザーはメニューの選択の操作に、器用さが求められます。しかし、モバイル端末を使うユーザーもまた、ピッカー（ドラムロール式の選択肢）をフリックするとき、慎重にならなければなりません。
ユーザーがモバイル端末のセレクトメニューを開くと、ピッカーのドラムロールが表示されます。ユーザーは、自分の選びたい選択肢にちょうど指が止まるように、ゆっくりとフリックしなければなりません。もし、ユーザーが注意深くフリックしなければ、正しい選択肢を通り過ぎて誤った選択肢を選んでしまいます。このことは、ユーザーに無駄な時間と労力を消費させてしまいます。
それだけでなく、長ったらしい選択肢の文章は、端が切れてしまう可能性があります。テキストの最後が省略されて表示され、ユーザーは全文を読むことができません。こうして、ユーザーは選択肢を選びづらくなり、離脱してしまうのです。
メニューを選ぶときのより良い代替案
あなたがフォームを作るときは、できるかぎりセレクトメニューを避けた方がよいでしょう。ユーザーのペースを落とさせず、かつ、タスクの流れを遮断しない方法があります。
ラジオボタンを使う
セレクトメニューの中に選択肢をつめこむ代わりに、選択肢をリストにしてラジオボタンを付ける方がはるかに良いです。そうすれば、メニューを開く必要はなく、かつ、それぞれの選択肢が視覚的に残るため、ユーザーは選択肢全体に目を通すことができます。ラジオボタンの場合、それぞれの選択肢をクリックするのに十分なスペースがありますし、自分の選びたい選択肢を通り過ぎても慌てずに済みます。
理想的なラジオボタン
ユーザーがラジオボタンをクリックすると、すぐに視覚的なフィードバックがあります。誤った選択肢をクリックしたとしても、メニューを再度スクロールする必要はありません。ユーザーがしなければならないことは、選択肢に目を通し、クリックする、ということだけです。
ラジオボタンは、ボタンのように見えなければなりません。十分なボタンの広さと、選択肢の周りに明確なボーダーが必要となります。また、ラジオボタンをクリックしたとき、クリックしたことが分かるように色や形が変わるようにしましょう。
オートコンプリートのテキストフィールドを使う
いくつか入力候補がある時は、オートコンプリート(自動補完機能付き)のテキストフィールドを使いましょう。オートコンプリート機能は、ユーザーの入力にマッチする候補をサジェストする機能です
理想的なオートコンプリートのテキストフィールド
ユーザーが入力していけばいくほど、より明確な入力候補がサジェストされます。自分の回答をすべて入力するよりも、サジェストされている入力候補を選択することで、ユーザーは時間を短縮することができます。
オートコンプリートは、ユーザーが入力したはじめの部分に合致する入力候補が表示されます。ユーザーが入力した部分と、サジェストの入力候補の部分と明確に分ける必要があります。入力したテキストと候補が一致する部分をハイライトしてコントラストをつけましょう。
編注：こちらは海外の事例ですので、日本語入力などを考慮しなければならない国内の場合はこの限りではないので、データの内容や文脈によって使い分けましょう。
セレクトメニューを唯一使うとき
セレクトメニューを使った方がよい場合が１つだけあります。それは、ユーザーに特定の単語を答えてほしいときです。
たとえば、ユーザーがどこの国・地域の人かを知りたい時は、具体的な回答の選択肢を用意しなければなりません。もし特定の選択肢を用意してなければ、ユーザーがあいまいな回答をするかもしれません。「中国人」の代わりに「アジア人」と入力したり、「ドイツ人」の代わりに「ヨーロッパ人」と入力したりする可能性があるのです。
まとめ
フォームを最後まできちんと入力する人は少ないです。フォームを離脱する理由をユーザーに与えてはいけません。セレクトメニューでのマウスの操作やフリックは、ユーザーが最もしたくないことです。
多くのサイトは、ユーザーにフォーム入力をしてもらうために努力をしていますが、セレクトメニューを使ってしまっているがためにユーザーを失ってしまっています。ユーザーの時間と労力の削減を考えてみてください。
ユーザーがフォームから離脱するきっかけを作らないために、よりよい選択をしてみませんか。
