Webアプリケーションのユーザーインターフェイス[7]

すでに入り口にいるのに、ホームに導くボタンは親切か
「可視性とフィードバック」

ソシオメディア　上野 学
2006/2/15

モードを減らす

　ある操作の意味が状況によって変化するとき、モードが生まれていることになります。モードが多くなるとユーザーは、ある操作がどのモードのときにどういう意味を持つのかということを知識として知っていなければならなくなり、操作が難しくなります。

　とはいえ、コンピュータは1つの機械でいろいろな種類の仕事ができるという点が最も大きな利点ですから、必然的にたくさんのモードを持つことになります。例えば、キーボードの Enter キーは状況によって「入力の確定」「改行文字の挿入」「デフォルトボタンの押下」のようにその意味を変化させます。重要なのはできるだけモードを減らすことですが、モードを生成する必要がある場合には、現在システムが（あるいはフォーカスされたウィンドウやコントロールが）どういうモードにあるのかということをユーザーがはっきり認識できるようにすることです。

　例えば、画面の上部にシステム全体の主要な機能群をふかんするナビゲーションが水平に配置され、画面の左側には現在選択されている機能のサブシステムが縦に並んでいるようなレイアウトがあったとき、ユーザーが作業を進めているうちにいつの間にかサブシステムの項目が変化してしまい、必要なリンクを見失ってしまうような場面があります。

　これは、ユーザーが画面を遷移していく中でほかの主要機能の画面にジャンプしたときに「モードが変わった」ことに気付かず、付随するサブシステムの変化が恣意的なものに感じられてしまうことが原因です。この場合は、画面の目立つところにモード名（主要機能名）を見せるなどして、モードが変化したときにそのことがユーザーに分かるようにする必要があります。

　機能の変化がユーザーの注意の所在にあって、その意味が理解されていれば、モードは単なるフィードバックとなり、問題になりません。Photoshopで「鉛筆ツール」から「ブラシツール」に持ち替えるとき、それはユーザーが自主的に行うモードの切り替えであって、しかもマウスポインタの形状もツールに応じて変化するため、モードの生成は問題になりません。

操作対象とそれ以外を視覚的に区別する

　画面上でユーザーの操作が可能な部分は、それ以外の要素と明確に区別されていなければなりません。例えば、単なる見出しのように見える部分が実はクリックできるようになっている場合、ユーザーは重要なリンクを見逃してしまう恐れがあります。操作対象となるアンカー要素には、「クリックできそう」に見えるデザインを施すことが大切です。

　「クリックできそう」なデザインとは、まずそれがテキストリンクであれば、一般的な表現を踏襲して、「青色で下線付き」にしておくことが無難です。独自のスタイルにする場合も、少なくとも「青色」「下線付き」のどちらかは残しておくべきです。同時に、画面の中でリンクではない文字列はできるだけ青色でも下線付きでもないスタイルにしておくことをお勧めします。

　画像でリンクやボタンを作る場合には、その要素がクリック可能であることを表現するために、次のような条件を満たすようにするとよいでしょう。

四角形もしくは角丸四角形 周囲とはっきり領域を区別できるようなボーダー、ベベル、ドロップシャドウなどがある 画面の中で目立つように、背景とのコントラストが高い配色 ラベルもしくは絵によってクリックしたときに何が起きるかを明示する

　問題となるのは、アイコンのような表現が、単に装飾のためのものであったり、もしくは何らかのステータスを表現しているだけでクリックはできないようになっている場合です。イメージマップのようにクリック可能な範囲の境界が不明瞭な場合もユーザーを混乱させます。GUIでは基本的に、画面上で周囲から独立した存在に見えるオブジェクトはすべて操作対象となっていることが望ましいため、クリックできそうに見えてしまう要素はできるだけなくす必要があるでしょう。

マウスオーバー効果に重要な役割を持たせない

　Webに限らず最近のGUIでは、マウスオーバーによってコントロールがハイライトするような表現が多くなっています。こういった演出は「そこがクリック可能である」ということを明確にするために意味があるように思えますが、本来は、マウスオーバーによるハイライト表現がなくても初めからそこがクリックできそうに見えているべきなのです。

　マウスオーバーでハイライト表現を行い始めると、「クリック可能な個所はマウスオーバーでハイライトする」という振る舞いに一貫性を持たせるために、画面内のすべての操作可能な要素にマウスオーバー効果を作らなければなりません（実際 Windows のユーザーインターフェイスではこのことが徹底されておらず、恣意的な演出に感じられます）。

　またそのことによって、すべての操作可能な要素に対して、「アイドル（イネーブル）状態」「マウスオーバー状態」「マウスダウン状態」「選択中状態」「ディスエーブル状態」を表すグラフィックのバリエーションを「すべて違いが分かるように」準備しておかなくてはならなくなります。これではデザインするのが難しく、また画面全体の状態表現が複雑になってしまいます。

　こういったグラフィックデザイン上の問題と同時に、マウスオーバー効果にはさらに大きな問題として、「そこにマウスオーバー効果が用意されていることを、実際にマウスオーバーするまでユーザーは知るすべがない」ということがあります。例えば、マウスオーバーするとポップアップメニューが出現するとか、マウスオーバーすると画面の別な個所の写真が切り替わるといった凝った仕掛けが用意されていても、ユーザーがその仕掛けに気付かずに重要な情報や機能を見落としてしまう恐れがあるのです。これでは、ユーザーはマウスポインタを画面上のあらゆる座標に合わせて宝探しをしなければなりません。

　つまり、システムを利用するうえで重要な情報や機能にアクセスする方法をマウスオーバー効果で行わせるべきではないのです。マウスオーバー効果を使うのであれば、クリックできる領域を明示する、簡単なツールティップをポップアップさせる、といった補足的な用途に限定するべきです。

　同様に、ダブルクリックにも注意が必要です。ある要素に対してユーザーはシングルクリックすべきかダブルクリックすべきかを実際にやってみずに知るすべはありません。幸いWebの画面では一部の例外（テキスト中の単語を選択するなど）を除いてダブルクリックは使わない習慣になっているので、この問題はあまり発生していません。しかし今後、リッチクライアントによる画面実装が増えるにつれてこの問題が顕在化する恐れがあるので注意が必要です。

感覚的な表現

　ここまで見てきたように、システムの状態を可視化するフィードバックにはいろいろな方法があります。ポイントとしては、Webアプリケーションを含むGUIにおけるフィードバックは、文字情報による説明ではなく、グラフィックやアニメーション（グラフィックの部分的変化）による感覚的な表現にするべきだということです。例えば、「登録をする場合には下のボタンをクリックしてください」といった説明文を提示するよりも、「登録する」というラベルを持ったボタンを「押せそう」な表現で提示することが大切です。

　一定以上の複雑さを持ったシステムでは、どうしても決まった手続きで作業を進める「電車式」の画面遷移を含まざるを得ません。「電車式」の画面遷移はユーザーにとって恣意的に感じられるので、ユーザーインターフェイスは説明調になりがちです（アプリケーションのインストールウィザードを思い出してください）。そのため、より感覚的な操作感を提供するためには、できるだけ「自動車式」の画面遷移にすることです。ユーザーがシステムの全体像を把握しながら、自分なりの使い方で効率的にタスクを進行できるようにするのです。

5/5

INDEX
Webアプリケーションのユーザーインターフェイス（7）
	Page1＜経験則その3：可視性とフィードバック／目に見えることと反応があること＞
	Page2＜GUIにおける可視性とフィードバック／作業に関係する要素の可視性とフィードバック／現在のフォーカスについての可視性とフィードバック）／どこからでも利用できる／デメリット（不十分なインタラクション表現／やりとりが煩わしい／見た目に関する一貫性の欠如）＞
	Page3＜「電車式」と「自動車式」、使いやすいのはどっち？／対象の可視性とフィードバック／操作内容についての可視性とフィードバック／処理結果の可視性とフィードバック／明快なフィードバックを迅速に返す／人は同時に1つのものにしか意識を集中できない、を考える／＞
	Page4＜主観的一貫性を優先する／ホームからホームへのリンクに関する議論／操作の有効性をイネーブル／ディスエーブルで表す＞
	Page5＜モードを減らす／操作対象とそれ以外を視覚的に区別する／マウスオーバー効果に重要な役割を持たせない／感覚的な表現＞

関連記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）