本日は米国UX movementから選択メニューを正しく使うためのチェックポイントをまとめた海外記事の内容を紹介させていただきます。
フォームの選択メニューの代表格、セレクトボックス(プルダウンメニュー)。
ドロップダウンメニューについては過去に記事のテーマとして取り上げたこともあり、選択肢の数に応じてセレクトボックス以外のコンポーネント(ラジオボタンやテキストボックスなど)を使用するべきという点を中心にお伝えしています。
その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいこと
https://f-tra.jp/blog/column/2960

今回紹介する記事では、上記の内容も含むさらに踏み込んだセレクトボックス使用時の注意点が盛り込まれていました。
さっそく紹介に移りたいと思います。

セレクトボックスを使用するべき時

選択時の数に応じて、使用するべきフォームコンポーネントを変えるべきだと筆者は述べています。具体的には、

  • 選択肢が5個未満ならラジオボタン
  • 15個以上ならテキストフォールド

をかわりに使用するべきとしています。
これは、以前の記事「その選択肢…」の内容と似ていますね。当該記事内では「3個以下/20個以上」という選択肢数の条件としていましたが、導きたい結論は同じです。
プルダウン選択時のアクション
プルダウン選択時のアクションは2回なのに対し、ラジオボタンなら1アクションで完結するうえに俯瞰できるというメリットがある点は先般の記事でもお伝えした通りですね。

選択肢が多すぎるとスクロールするのが面倒

また、選択肢が多すぎると下のほうにある選択肢は、さらに「スクロール」というアクションを加えなければ選択できません。もちろん俯瞰することもできません。
テキストボックスで代替することはもちろん、入力サジェストなどを使って入力補助できると理想的ですね。

セレクトボックスのラベル

次はラベルについてです。
セレクトボックスは外側だけでなく内側にもラベルを持つと親切です。
その場合、「選択して下さい」という一般的なラベルよりもより具体的にすると、ユーザーは混乱することなく迅速に行動できると述べています。

スバルのカタログ請求サイト。ラベルが具体的で直感的に選択開始できる
スバルのカタログ請求サイト。ラベルが具体的で直感的に選択開始できる

セレクトボックスのデフォルト値

次はデフォルト値についてです。
以前下記の記事で紹介した内容と似ています。
適切な【フォーム項目の初期値】設定で、ユーザーの入力を楽にするコツ
https://f-tra.jp/blog/column/2651

セレクトボックスの場合、選択肢を見落とした場合に誤った情報を送信してしまう可能性があるために、通常はデフォルト値を設定するべきではありませんが、ユーザーの90%以上がその選択肢を使用することが確実なときにデフォルト値を設定したほうが便利だとしています。

えきねっと予約画面。
えきねっと予約画面。ほぼ100%、未来の日付けを入力するために、日付欄の初期値は今日を基準に設定すると、無駄が少ない

選択肢のグルーピング

セレクトボックスの選択肢は、optgroupというタグを使用すればグルーピングすることができます。

optgroupの使用例
optgroupの使用例

選択肢が多めのときは、グルーピングされているほうが迅速に目的の選択肢を見つけることができますね。

ナビゲーションとして使う時

多くのサイトで、セレクトボックスをページのナビゲーションとして使用している例があります。
例えは、コンテンツのフィルタリングや並び替えなどでセレクトボックスをよく見かけますよね。
ただし筆者はアクセシビリティやSEOなどの観点から、セレクトボックスはナビゲーションとして使用するには適さないと述べています。
CSSやjavascriptを用いてドロップダウンのUIを提供することが理想的のようです。

まとめ

いかがだったでしょうか。本日はセレクトボックス(プルダウン)の正しい使い方を紹介する海外のEFO関連記事をご紹介しました。
選択メニューだからといってむやみやたらにセレクトボックスを使うのではなく、状況に応じて適切なコンポーネントを適切な使い方で採用したいですね。
参考記事:Stop Misusing Select Menus – UX Movement