選択式フォームの最適な表示方法は？ドロップダウンメニューだけじゃない！

モバイルにおける選択式フォームインターフェイスといえば、ドロップダウンメニューが最も一般的なのではないでしょうか。

「スペースをそれほど取らない」「自動で入力認証ができる」「どのブラウザーでも使える」などの理由から、多くのモバイルサイトに取り入れられ、ほとんどのユーザーが使い方を知っています。

しかし、実際に間違った使い方をされることも多いのがドロップダウンメニュー。

選択肢の数にあったフォームデザインを選ぼう

場合ごとに分けて、適切な選択フォームの形を考えました。

ふたつしか選択肢がない場合

性別の選択のような、ふたつしか選択肢がない場合にドロップダウンメニューを使うのは効果的でありません。チェックボックスやトグルスイッチを使うようにしましょう。

選択肢が Yes/No や On/Off しかない場合はシンプルなボックス形式にしましょう。下の画像の左側が間違った例で、右側が参考にするべき例です。

選択肢が少ない場合は、選択肢を全部表示してしまい、ラジオボタンを使ったり、セグメントコントロールという下の画像の右にあるような表示方法がおすすめです。よりシンプルになりますね。

セグメントコントロールを使うときは、選択肢の数が5個以上にならないように注意しましょう。

選択肢が多くて、内容が限られている場合

ユーザーが何を求めているかわかっている場合は、”start typing…”のように入力を促して、一文字か二文字が入力された後にフィルターを通すことで出てきた結果を表示する方法があります。

フィルターを通すので、表示するオプションの数は少なくて見やすくなります。これは、市や都道府県を選択する時に便利ですね。

選択肢が多くて内容も広範囲の場合

ユーザーデータを参考に、一番選択される可能性の高いオプションから表示しましょう。こうすることで、９割のユーザーは即時に適切な選択肢を見つけることができるでしょう。

“その他”を選ばなくてはならないユーザーもいますが、大多数のユーザーエクスペリエンスを向上させることができます。

入力されるデータを予想する

回答がそれほど長くない文字数の場合、リストから選択するよりタイピングする方が簡単な場合があります。

たとえば生まれ年など。

一般的に、モバイル機器ではリストからスクロールして選ぶより、実際に入力する方が効率的と言われています。

もしも入力されるデータにフォーマットがある場合は、”start typing…”を使うことで簡単に、そして正確な情報の入力が可能になります。

下の画像から、アメリカの州を選ぶ時はアルファベット一文字でもかなり絞ることができるのがわかると思います。

このフィルター機能は、選択肢の順番があいまいな時に特に役に立ちます。下の画像にあるように、通貨の検索が良い例です。

また、200以上もある国の中から一つを選ぶ時にも、フィルター機能は便利ですね。

チケット数や乗組員の数など、数字を扱う場合はステッパーというものを使うと良いでしょう。

ワンタップで簡単に数の追加や削除ができるので便利です。

数値の範囲が広かったり、整数で表せない場合は、スライダーを使ってみましょう。

コツとしては、最小と最大の数字を表示することで、直感的に使えるようになります。

現在の時間と近い日付を選ぶ場合は、カレンダー方式にすることで日付の選択が直感的で簡単になります。

しかし注意するポイントは、誕生日を入力する時だけは、カレンダー方式を使わないようにすることです。

ドロップダウンフォームをより適切に表示させるコツ

ここまではさまざまな代用例を紹介してきましたが、ドロップダウンメニューが必ずしも悪いという訳ではありません。

時には、ドロップダウンメニューが一番ふさわしいという状況もあります。そのような時は、なるべくユーザーフレンドリーになるように心がけることがコツです。

使用する際のポイントを紹介しましょう。

ラベルのタイトルは明確に

メニューラベルの名前や説明は明確に、そしてリストを開いている時でも見えるようにしましょう。また、選択メニューの中は説明的なラベルにしましょう。たとえば、ただの”選んでください”ではなく、”国を選んでください”にするなど。

使いやすく分類する

ユーザーデータに基づいて、よく選ばれる選択肢をリスト上部にもってきたり、一番人気のものを初期値として選択しておくと使いやすくなります。

スマートに初期値を設定する

モバイル機器やブラウザーは、現在地や日付などの情報をすでに知っています。その情報を使って初期値を設定しておくことでユーザーが入力する手間を省けます。

入力フィールドを減らして自動入力を増やす

例えば、郵便番号を入力するだけで都道府県と市の名前はわかります。クレジットカードも番号を入力するだけでカード会社がわかります。これらを上手く利用することで、ユーザーが余計な入力をしなくて済みます。

APIを使ってみる

Facebookでログインする機能は、サインアップの入力フォームを埋めるより簡単だと思います。Paypalでの支払いも、クレジットカード情報を入力するより簡単です。

ドロップダウンリストを使うデメリット

ここでいくつかの問題点をあげてみましょう。

• メニューを開くまで選択肢がわからない。つまり、メニューの中身が2つであろうと50個であろうと、ユーザーはまるで予測できない。
• モバイル機器の場合、ドロップダウンメニューを開くためのステップが多くなってしまう。メニューを開いてから、目的の選択肢を見つけるまでスクロールして、さらに上まで戻ってメニューを閉じなければなりません。
• 簡単であるがゆえにデザイナーをだらけさせる。ただ選択肢を追加するだけのドロップダウンメニューは、作るのがとても簡単です。そして優先順位も決めなくて良いので、ハンバーガーメニューのようになってしまいます。
• 選択肢が多いと使いづらくなる。例えば国や都道府県を選択するときです。特に、モバイル機器ではキーワード検索ができないのでユーザーエクスペリエンスを相当悪くしてしまいます。
• スクロールできる範囲が狭いと使いづらい。モバイル機器の種類によっては、スクロールできる部分がとても小さいことがある。

まとめ

選択式フォームでなるべくストレスを減らせば、ユーザーに最後まで入力してもらいやすくなります。この記事を参考に、フォームをブラッシュアップしてみてください。

（翻訳：Juri Ando）