メニュー項目の表示をわかりやすく

GUI中心のコンピュータでは、命令や項目の選択にメニューが使われる。メニュー項目にはいろいろな機能や操作方法が含まれるものの、それを上手に表現してはいない。操作方法を的確に伝えることで、ユーザーの迷いを少しは減らせる。その改善点をまとめてみた。

メニュー項目の設定方法がわかるように改良する

　Macでは、画面の上部に表示されるメニューバーだけでなく、ポップアップ形式などでもメニューを使っている。命令や項目の選択がおもな役割だ。メニューを構成する項目には、簡単なルールが決められている。グループ分けは区切り線とか、選んだ項目は「レ」記号を前に付ける──といったものだ。
　メニュー項目として用意した設定には、複数の中から１つだけ選ぶものと、項目ごとにオンオフするものがある。問題なのは、これらが区別して表示されない点だ（図１左）。どちらの操作方法かは、割り当てられた機能を見て判断するしかない。「フォント」メニューなら１つだけを選ぶとか。しかし、使ったことのない機能では、わからないこともある。また、このようなルールだと、初心者が混乱しやすい。同じような機能は、ダイアログならラジオボタンやチェックボックスとして分かれている。メニューの表示も、ダイアログと同様に区別して表示したほうがわかりやすい。しかし、新しいデザインの表示を用意すると、ユーザーが覚える内容が増える。理想的には、ダイアログとメニューで同じデザインの設定を用いるべきである。

図１、設定方法の種類を見分けられるように、メニューの表示を改良した例。ダイアログ上と同じデザインを採用することで、覚えることを減らせる。理想的には、両方に適した新しいデザインを採用すべき

　試しに、既存のラジオボタンとチェックボックスを用いて、新しいメニューを作ってみた（図１右）。ダイアログ用に作られたデザインなので少し違和感があるものの、現在のメニューよりは操作方法がわかりやすい。しかし、この方法を採用するなら、メニューでもダイアログでも使えるデザインを新たに用意したほうがよい。
　メニューでもダイアログでも、ラジオボタンで複数を選んだ状態の表示が必要なことがある。選択した範囲内で、別な書体を設定されているようなケースだ。この表示方法も、きちんと標準化して統一したい。
　１つのメニュー内でメニュー項目を区分けするときは、間に線を挿入して区切りを示す（図２左）。区切りはわかるものの、どんな基準で分けたのかまでは不明だ。原因はグループ分けの見出しがないためなので、メニューに加えればよい。ただし、メニュー項目と同じ形で追加すると縦に長くなる。また、グループ内のメニュー項目を字下げする必要もあり、メニューの幅も少し広がる。メニューのサイズをできるだけ増やしたくないなら、既存の区切り線の部分に見出しを表示するしかない。一番上のグループだけは上に区切り線がないので、それを追加する分だけ縦に長くなる。通常のメニュー項目と区別する意味から、少し小さな文字サイズを用いる（図２右）。また、区切り線を邪魔しないように、少し字下げした位置から文字を描く。これでグループ分けの意味が伝わり、機能を推測しやすい。

図２、メニュー項目を複数に区分けしたときは、各グループごとの見出しを付ける。メニュー項目と間違われないように、文字サイズを小さくして色を薄くする

覚える必要のないメニュー表示に変える

　メニュー項目の中には、それを選んだとき直接実行するのでなく、ダイアログやウィンドウを表示させるタイプもある。すぐに実行しないため、安心してメニュー項目を選べ、ウィンドウを表示させてから実行するかどうかを考えればよい。そのようなメニュー項目では、項目名の後ろに「...」を加えてユーザーに知らせる（図３左）。ところが「...」の意味を知らないと、この表示も役に立たない。デベロッパーの中にも知らない人がいるぐらいなので、意外と知らない人も多いようだ。機能自体はよいのだが、機能を上手に伝える表示ルールになっていない。そこで見ただけで機能が伝わるように、もっと直接的な表現を用いるべきである。「...」の代わりに、「→」記号とダイアログやウィンドウを示す小さな絵を表示する方法がよい（図３右）。モーダルとモードレスで異なる絵を表示すれば、違いをメニュー上で伝えられる。

図３、「...」の代わりに「→」記号とダイアログの種類を表示すれば、メニュー項目を選んだときの動作を直感的に伝えられる

　パレットを表示するメニュー項目は少し変わっていて、表示と隠すを交互に繰り返す。これも「→」と「←」記号を用い、パレットを意味する小さな絵と組み合わせる。２つの矢印記号は、表示が「→」で隠すが「←」と使い分ける。隠すほうの表示に少し工夫が足りないものの、より理解しやすい表示になる。
　メニュー項目の右側には、キーボード・ショートカットを表示する。ここで初心者が混乱するのは、commandキー以外の修飾キーの表示が、キーボード上の表記と異なる記号を用いている点（図４左）。記号は標準化されているので、キーボードに表記を付けるべきだ。直ってない現状では、メニュー項目のほうを直すしかなく、英字での表記ぐらいしか方法はない（図４右）。

図４、キーボード・ショートカットの表示は、キーボード上の表記と合わせるのが基本。キーボード側の修飾キーに記号が付いてない以上、メニュー上では文字で表すしかない

　一部のソフトでは、optionなどの修飾キーを押しつつ実行すると、別な機能になるメニュー項目を持つ。たとえば、エクセルでのセル範囲のコピーなどだ。通常の操作ならセルデータとしてのコピーだが、shiftキーを押しつつだと画像としてのコピーに変わる。shiftキーを押しつつメニューを表示させると、メニュー項目が「画像としてコピー」に変わり、機能が違うことを確認できる。しかし、通常のメニュー表示からは機能が見つけられないので、知っている人しか使えない。修飾キーはいくつかあり、その全部を試して機能を見つけるのはばかげている。修飾キーによる別機能があることを、通常の表示で知らせるべきだ。機能が変わるマークを用意して、関係する修飾キーと一緒に表示する方法もある。しかし、マークのデザインが適切でないと、マークの意味を覚える必要が生じる。
　余談だが、修飾キーとの組み合わせで機能を増やす方法は、マウス操作にも数多く見られる。その最大の欠点は、メニュー項目と同じで、表示から機能を見つけられないことだ。この件に関しての改良案は、別なテーマのときに述べたい。
　メニューの場合は、別の逃げ道がある。階層メニューを使うことで、メニュー項目を増やせるからだ（図５）。そのため、前述の記号による表示はお勧めしない。階層メニューは、メニュー項目を選ぶ操作が少し面倒という欠点を持つものの、全部の機能を表示するメリットがある。加えて、それぞれのキーボード・ショートカットも一緒に表示できる。欠点に関しては、使用頻度の高いメニュー項目だけサブメニューの外に出すことで、操作性の低下は最小限に抑えられる。

図５、階層メニューを使うことで、すべての機能をメニュー項目として表示できる。この方法なら、修飾キーによる別機能を組み込まなくて済む

　以上のように、メニューの表示もまだまだ改善の余地がある。ユーザーが覚えなければならない部分を最小限にしつつ、機能の区別を上手に伝えることで、わかりやすさを向上できる。