ドロップダウン

定義

ドロップダウンは、たくさんの選択肢をふだんは折りたたんでおき、必要なときだけリストとして 広げて一つを選ばせる入力です。画面にはトリガーと呼ばれるボタンが一つだけ置かれていて、 ユーザーがそれを押すと、選択肢のリストが下に開きます。リストから項目を一つ選ぶとリストは また閉じ、トリガーにはいま選んだ値が入って残ります。このように選択肢を必要なときだけ 見せるので、項目が多くても画面を大きく占領せず、すっきりと整理できるのがドロップダウンの いちばんの利点です。つまり画面の場所と選択肢の数を引き換えにする道具なので、いつ 折りたたんでおき、いつ広げておくかを見極める感覚が大切になります。

なぜ重要か

ドロップダウンは、選択肢が多いときに画面の場所を節約できる効率のよい道具です。国や カテゴリーのように項目が十個、二十個とある場合、それをラジオボタンで全部広げてしまうと、 画面が選択肢だけで埋まってしまいます。ドロップダウンはこのリストをトリガー一つに 折りたたんでおき、画面をすっきり保ちます。ただし折りたたまれているという性質のため、 ユーザーは開くまでどんな値があるのか分からず、目当ての項目を探すにはリストを開いて 見渡す手間がかかります。ですから選択肢が少なかったり、互いに見比べながら選びたいときは、 かえってドロップダウンが不便になることもあります。結局のところ、場所を節約できる利点と、 もう一手間開かなければならない手間を天秤にかけ、状況に応じて別の入力と使い分ける判断が 必要です。

よくある間違い

• 選択肢が二つ三つしかないのにドロップダウンを使ってしまうことです。項目が少なければ、 ラジオボタンで一目で広げて見せるほうが親切です。わざわざ開いて閉じる動作をさせると、 ユーザーに余計な一手間を求めることになります。
• いま選ばれている値や、開いているか閉じているかの状態をはっきり見せないことです。 トリガーに選んだ値が残らなかったり矢印の表示がないと、ユーザーはこれが押して開く リストなのかどうかさえ気づきにくくなります。
• 項目が数十個もあるのに、検索なしで長いリストをただ広げておくことです。ユーザーは 目当ての項目を探そうと延々スクロールすることになり、その途中で疲れて適当に選んだり、 離脱してしまったりします。

実務のヒント

• 選択肢が五個以上に増えてきたらドロップダウンを使いましょう。項目が少なければラジオ ボタンのほうが速く、多くなるほど折りたたむドロップダウンが場所を節約し、画面を すっきり保ってくれます。
• トリガーには現在選ばれている値をつねに残し、開閉を矢印で示しましょう。上下に切り替わる 矢印があるだけで、ユーザーはこれが開いたり閉じたりできるリストだと即座に理解します。
• 項目がとても多いときは、リストの上に検索入力を添えましょう。数十個を一つずつスクロール して探す代わりに、数文字を打つだけで絞り込めるので、目当ての項目にずっと速くたどり 着けます。国のリストのように項目が決まっていて長い場合、この検索一行が特に大きな差を 生みます。

関連概念