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

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

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

GUIにおける可視性とフィードバック

　GUIでは、ウィンドウ、アイコン、メニューなどのグラフィックでユーザーインターフェイスが構成されていますので、当然、可視性とフィードバックはユーザーにとっての操作感を決定する重要なテーマとなります。

　そもそもコンピュータ内部で情報が処理される様子は目に見えないものであり、ディレクトリやファイル、インターネットやWebサービスといった情報の組織は極めて概念的な存在で、その実態を直接見ることができません。コンピュータは、処理されたデジタルデータを概念上のモデルに沿ってディスプレイなどに出力し、同じモデルに沿ってキーボードやマウスからの入力をデジタルデータに変換します。GUIは、まさにこの概念上のモデルを手掛かりにしながら、さらにそれを親しみやすい日常のメタファーを使ってユーザーの入力内容やシステムからの出力結果を提示しているのです。

　ユーザーインターフェイスの可視性とフィードバックには、いくつかの段階があります。普段これらの違いを意識することは少ないかもしれませんが、インタラクションを設計したり評価したりするうえでは重要な手掛かりとなります。

・作業に関係する要素の可視性とフィードバック

　ユーザーインターフェイスを視覚化する第一歩は、まず、ユーザーがそのシステムで行う作業に関係する要素を画面上に表示することです。ユーザーはマウスやキーボードを使いながら、画面上で何かを選択したり、文字を入力したり、システムに命令を伝えたり、処理結果を確認したりします。ユーザーはこれらの作業を、文字列、アイコン、ボタン、フォームコントロールなどを操作することで進めていきます。もし作業に関係する要素が何も視覚化されていなければ、画面は真っ白になってしまいます。

図2 これは何をする画面？

・現在のフォーカスについての可視性とフィードバック

　ユーザーの作業に関係する要素として必要なのは、システムの現在のフォーカスを視覚的に表現することです。例えば、パソコンは起動しているか、どのアプリケーションのどのウィンドウがフォーカスされているのか、ウィンドウ内のどのコントロールにフォーカスがあって、それはユーザーの入力を受け付ける状態なのか。そういったシステムの状態が目で見て分からなければ、ユーザーは次に取るべき行動について考えることができません。

図3 テキストボックスのカーソルは、現在のフォーカスを示す重要な要素

・命令を発動するスイッチについての可視性とフィードバック

　システムの状態が視覚的に表現されたうえで、次に重要なことが、システムに対して命令を発動するスイッチを視覚的に明示することです。例えば、「開く」といったボタンがこれに当たります。「開く」機能を実行するためのスイッチが、ボタンのように「押せそう」な視覚表現で画面上に見えていれば、ユーザーはいま「開く」機能を使うことができるということが分かります。当然このボタンは押すことができなければいけませんし、押すと「開く」機能が実行されなければいけません。

図4 ボタンの存在は自身の役割と振る舞いを示唆している

　Webの画面では、すべてのアンカー要素が命令を発動するスイッチだといえます。ユーザーがそれをクリックするとハイパーリンクが起動し、指定された場所（URI）が呼び出されるわけです。

　命令を発動するスイッチが画面に見えていることで、ユーザーは抽象的なコマンドをいくつも記憶したり、それを正確にタイプしたりしなくても済みます。そして記憶の負荷が軽減されて、作業が単純な行為の組み合わせとなり、分かりやすくなります。

2/5

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

関連記事

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