ドロップダウンメニューは控えめに

ドロップダウンメニューは、有益であるよりも問題であることの方が多い。ウェブデザイナーがいくつかの異なった目的のために流用したために、混乱の元にもなっている。また、スクロールするメニューのせいで、ユーザがひと目で全オプションを見渡せない場合、ユーザビリティは低下する。

ドロップダウンメニューが、効果的なウェブデザインを行う上で一定の役割を担っていることは明らかである。しかしながら、インタラクションに利用できる部品が少ないことから、デザイナーはドロップダウンメニューを濫用し、誤用するようになった。これがユーザビリティ上の問題と混乱の原因になっている。ますます多くのデザイナーが、ドロップダウンメニューを、様々に違った目的のために利用するようになってきた。

  • コマンドメニュー:ここでユーザが選択したオプションにしたがってなんらかのアクションが起こる。
  • ナビゲーションメニュー:これによってユーザは新しい場所に移動する。
  • 穴埋めフォーム:フォーム入力欄に記入するオプションをこれで選択する。
  • 属性選択:選択可能な範囲を示したメニューから値を選択する。

現在、ウェブブラウザのドロップダウンメニューに利用されているこのGUI部品に関して言えば、伝統的な解釈に適合しているのは一番最後のものだけだ。特にコマンドメニューははっきりと見た目を変えておくべきだし、標準的なメニューバーにのみ配置すべきものである。MacとWindowsではメニューの実装が違うが、この両者とも、コマンドメニューは、属性選択メニューとは変えてある。事実、Macintosh Human Interface Guidelinesの87ページには、はっきりとこう書いてある:「ポップアップメニューをコマンドに利用してはならない」。

改善の見通し

ウェブでは、標準的なインタラクション部品を豊富に利用できるというのは確かだ。少なくとも、1980年代後期にMacが提供したデザインパレットと同等の豊かさではある。もっと豊富であってほしいところだ。ボキャブラリの幅が広がれば、デザイナーもそれぞれの目的にぴったり合った表現を利用できるようになり、ユーザも環境をコントロールしている感覚をもっと持てるようになるだろう。ボキャブラリをごちゃまぜにして異なったアクションを混ぜ合わせるデザイナーが増えると、ユーザは、その時その場で何が可能かを理解できなくなっていく。

残念ながら、近いうちにもっとまともなウェブブラウザが登場する見込みはない。それに、たとえデザインボキャブラリが増強されたとしても、その利用を薦められるようになるまでには2年か、あるいはもっと長い期間が必要だ。ブラウザアップグレードの浸透率が遅いからである。

以上のように、われわれは単一の、不快なGUI部品 – ドロップダウンメニュー – を、複数の重複した目的に利用することから生み出される混乱に、当面の間は甘んじる以外ない。

避けるべきデザイン

ドロップダウンメニューにも長所はある。まず、これによって画面スペースを節約できる。また、ユーザが間違ったデータを入力するのを防げる。選択肢に無意味なものが入っていないからだ。最後に、(たとえ不快なものではあっても)標準的部品であることから、ユーザは、見た瞬間にドロップダウンメニューの使い方が理解できる。

こういった利点はあるにせよ、ウェブユーザビリティを向上させようと思うなら、デザイナーはドロップダウンメニューの利用を控えめにすべきである。このために、以下、デザイン上避けるべき実例をいくつか挙げておく。

  • 反応するメニュー:同一ページ内のあるメニューでの選択結果によって、別のメニューの選択肢が変化するもの。選択肢がくるくる変わると、ユーザは非常に混乱する。また、別の部品の選択結果に依存している場合、希望する選択肢が見えにくくなることも多い。
  • 長すぎるメニュー:スクロールが必要なくらい長いために、ユーザはすべての選択肢をひと目で見渡せない。それほど長いリストなら、たいていは伝統的なハイパーテキストリンクからなる普通のHTMLリストにした方がよい。
  • 州名略称のメニュー:合衆国内の郵送用住所のようなもののことだ。スクロールが必要なドロップダウンメニューから州名を選択するより、ユーザが自分で、例えば「NY」と入力した方が速い。自由形式の入力欄に制約のある選択肢を入力させると、バックエンドではデータの検証が必要になるが、ユーザビリティの見地から言うと、それがベストである場合が多い。
  • ユーザにとって当たり前なデータのメニュー:生まれた月や年といったもののことである。こういった情報は、ユーザの指に染み付いていることが多い。こういったものを、メニューから選択肢で選ばせようとすると、情報入力の標準的パラダイムから外れることになり、ユーザにとって、かえって手間が増えることにすらなりかねない。以下の例がこのことを示している。

最近ニューヨークで行われたInternet Worldカンファレンスで、Kara Pernice Coyneと私は、ウェブユーザビリティ手法に関する講演を行った。プレゼンテーションの一部として、聴衆を対象にちょっとしたユーザテストを行った。登録ページの記入を終える際に、テストユーザはフォームに自分の住所を入力しなくてはならない。ストリートの名前はテキスト欄に、だが、ストリートの種類(Avenue、Boulevard、 Court、Drive、その他)はドロップダウンメニューから選択するという方式だ。結果をご想像いただきたい。テストユーザは、テキスト入力欄にストリートを含んだ住所を全部入力した。なぜなら、今までいつもそうやって来たからだ。ドロップダウンメニューは彼女にとってまったく意外なものであり、テキスト欄に戻って、すでに入力し終わった住所情報の一部を削除することになった。

何百人もの聴衆を前に行われたこのちょっとした調査から、時にはひとりのユーザでテストするだけでも、問題点を明らかにするには十分なことがあるということがわかる。実際にこういった混乱を目のあたりにすれば、ユーザのキー入力を節約する「助けになる」はずのドロップダウンメニューが、かえって害になることもあるということが理解できるだろう。

2000年11月12日

公開:2000年11月12日(原文:2000年11月12日)
著者:ニールセン博士
原文:Drop-Down Menus: Use Sparingly

分類キーワード:

↑次の記事:
↓前の記事: