その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいこと

プルダウン アイキャッチ

そのプルダウン、選びにくくありませんか

プルダウンメニュー(セレクトボックス、ドロップダウンとも呼びますね)は複数の選択肢から1つを選ばせたいときに便利なフォームのコンポーネントです。

プルダウンメニューの例。セレクトボックスやドロップダウンリストとも呼ばれます

プルダウンメニューの例。セレクトボックスやドロップダウンリストとも呼ばれます


その姿はさまざまなフォームで頻繁に見かけますが、実はこのプルダウンメニュー、やみくもに利用するとかえってユーザビリティを落とすことがあるのです!

本日はフォームでプルダウンメニュー(セレクトボックス、ドロップダウン)を用いる際に気をつけたいチェックポイントについてお伝えしたいと思います。

まずはプルダウンの選択肢数をチェック!

ずばり注目すべきはプルダウンの選択肢の量です。

今回取り上げるとくに注意が必要なパターンは下記の通りです。

  1. 選択肢が少ない場合(とくに3個以下)
  2. 選択肢が多い場合(とくに20個以上)

順番に見ていきます。

選択肢が少ない場合(とくに3個以下)

選択肢が少ない時、とくに3個以下の場合、言いたいことはひとつです。
結論からいうと、プルダウンではなく、ラジオボタンを使って下さい

もうお気づきの方もいるかもしれませんが、理由は大きく以下に取り上げる2点です。

選択肢を俯瞰できない

プルダウンは多くの選択肢をコンパクトに収納できる優れ物。
ですが選択肢が少ない場合は、その恩恵を発揮できないどころか、ラジオボタンに比べ選択肢を俯瞰できないという点で劣ってしまいます。

展開前のセレクトボックス

展開してみないと何を選ぶのかわかりません

選択肢が入力項目名を読めば誰でも想像に難くない、わかりきった内容ならばこの点はあまり問題になりませんが、
内容がそのフォーム独特の選択肢の場合は、ラジオボタンで表示しまましょう。
2~3の選択肢であれば、大抵の場合1行で収まってしまい、さほど場所を取ることもありません。

アクションが手間

下記の図の通り1つのプルダウンを選択するために必要なアクション回数は2クリック。

プルダウン選択時のアクション

プルダウン選択時のアクション

これに比べラジオボタンは1回のクリックのみで選択することができます。

アンケートフォームのように、大量の設問を選択をさせるようなフォームの場合を想像してみてください。
ラジオとプルダウン
プルダウンだと単純にクリック数が倍ですので、手間になるのがおわかりいただけるのではないでしょうか。

繰り返しになりますが、2~3の選択肢数であればさほどスペースを取りません。
消費するスペースが変わらないのであれば、クリック数が少なく済むラジオボタンを採用するほうがユーザーにとっては親切ですよね。

このように繰り返しの設問が多い場合はとくに、ラジオボタンを利用するようにしたいですね。

選択肢が多い場合(とくに20個以上)

次は反対に選択肢が多い場合です。

選択肢が多い場合は、「たくさんの項目をコンパクトに収納できる」よいうプルダウンメニューの強みを活かしているとはいえるのですが…
単純に、多いと選択しにくいのです。

みなさんも、このような場面で一度は面倒に感じたことがあるのではないでしょうか?
「都道府県、探すの面倒くさい」 生年月日

とくに西日本の住所を入力するときや、誕生日が20日~31日の方は「いつもスクロールするの面倒だな…」と感じている人も少なくないはず。
選択肢が多い場合に出現するプルダウンメニューのスクロールバーを操作することは、実は大きなストレスなのです。

別の入力手段の方が便利な場合がある

例えば、住所は郵便番号から自動入力すればこのようなストレスを感じなくてすみますし、生年月日は直接数値入力するほうがストレスが少ないこともあるでしょう。

選択肢の多いセレクトボックスは、別の入力手段でも検証を行うと良いでしょう。

配置を工夫するだけでも変化が

下の図をご覧ください。
都道府県を改良後日付を改良後


スクロールバーを操作しなくても、選択肢全体が俯瞰でき、かなり親切な内容となっています。

このように、実装に少し手間はかかってしまいますが、プルダウンの内容をデザインすることで選択しやすく改良することも可能ですね。

まとめ

いかがだったでしょうか。
今日はプルダウンの選択肢の数によって気をつけたいポイントをお伝えしました。
せひEFOに取り組まれる際に参考にしていただければ幸いです。

なお、フォーム設問内容やボリュームなどによりユーザーが感じる使いやすさは変化しうるため、今回紹介した条件(選択肢3個以下、20個以上)にかかわらず、対策をとるべき/必要ない場合もあるでしょう。

ぜひ、実際にフォームを使いながら、使い勝手について問題がなさそうか確かめてみることをおすすめします。

プルダウン アイキャッチ

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です