ユーザビリティのヒント（3）

虫眼鏡のアイコンは『検索』か『拡大』か？
「インタラクションデザイン」

ソシオメディア　上野 学
2006/9/13

「消去」と「削除」、「ショッピングカート」と「買い物かご」、「ホーム」と「トップ」、ユーザーにしっくりくるのはどちらか。白黒付け難いナビゲーションの概念を考えよう

　「ユーザビリティのヒント」の3回目は、主にアイコンやラベルについてのTipsをご紹介しながら、ユーザーインターフェイスやインタラクションデザインについて考えていきたいと思います。

説明が必要なアイコンは用いない

　 GUIの特徴は、当然のことながら、ユーザーインターフェイスをグラフィックで表現することです。その際、「ユーザーが選びやすいフォームのカタチを考えよう」でも書いたとおり、GUIではウィンドウやメニューなどと並んで、アイコンを使ってオブジェクトや機能を画面上に配置してユーザーに提示することがよくあります。

　アイコンは、メタファーを使った端的なグラフィックを用いて、抽象的な概念を感覚的に伝えると同時に、画面上での操作可能領域を明示するのに役立ちます。しかし、グラフィックだけでその意味を完全に表現するのは常に難しいものです。ですから、アイコンには基本的に、文字によるラベルを付けるべきです。分かりやすいラベルがあって初めて、アイコンが適切に機能するわけです。

　ただしアイコンとラベルは、グラフィックが持つ表現力と文字が持つ表現力が互いに補完し合う関係であることが理想です。例えばフォルダのアイコンの横にフォルダ名のラベルがある場合、ユーザーは、アイコンを見てそれがフォルダというオブジェクトのインスタンスであることを（そういう言葉は知らなくても）視覚的に把握し、そしてラベルを見てそれをアイデンティファイする名称を知るわけです。どちらが欠けても分かりにくくなります。

　しかしさまざまなアイコンとラベルの使い方を見ていると、多くの場合、アイコンの意味を説明するためにラベルが付けられているようです。もしくは、「何かそこにあるよ」というアイキャッチのために、ラベルにアイコンが付けられているといってもよいかもしれません。

画面1 アイキャッチとしての意味合いが強いアイコン 出典：http://www.rakuten.co.jp

　 アイキャッチとしてのアイコンが悪いというわけではなく、画面の中で特に重要な操作対象をほかと区別したい場合には有効な表現となりますが、そのような表現が増えると画面が乱雑になりますし、結局、説明としてのラベルを読まなければ意味が分からないので、GUIのデザインとしてはあまり効果的ではありません。

　また当然、アイコン自体のデザインが、グラフィックとしてよくその意味合いを体現したものでないとユーザーを混乱させてしまいます。アイコンは視覚言語として、複数からなるセットとして用いるのが普通ですが、その際、セットしてトーンに統一感を持たせながらも、1つ1つが区別しやすいことが大切です。

　メタファーとしての適切さも重要で、例えばフォルダ、ファイル、ショッピングカート、など、慣例的になっているものであれば問題ありません。ただし、虫眼鏡のアイコンが場合によって「検索」や「拡大」のように違う意味に理解されることもありますので（画面1では目的特化型ナビゲーションを意味しているようです）、注意が必要です。

処理を開始するスイッチをアイコンに頼らない

　では、そもそもアイコンにはどのような種類があるでしょうか。いろいろ見てみると、アイコンが表すものには、次のようなものがあるようです。

1. 開く対象となるオブジェクト（デスクトップのフォルダなど）
2. 別なUIを呼び出すナビゲーション（ヘルプボタンなど）
3. プロパティを変更するスイッチ（行ぞろえを変更するボタンなど）
4. 処理を開始するスイッチ（ツールバーの「保存」など）

　ほかにも複合的な意味を持たせたものがあり、アイコンの使い方を一概には定義できませんが、上記の中で特に注意が必要なのは、「4. 処理を開始するスイッチ」に利用するアイコンです。処理を開始するスイッチには、「開く」や「保存」など、ある動作を示唆するグラフィックが必要になります。

画面2 これらは「処理を開始するスイッチ」。すべて分かるだろうか？ （新規作成、開く、保存、アラームの設定、プリント、プリントプレビュー、ブラウザでプレビュー、カット、コピー、ペースト、書式のコピー／ペースト、元に戻す、やり直し）

　しかし、動作を絵で表現するのはとても難しいのです。ましてや、ラベルがなくアイコンだけを見せられた場合、その意味を予測したり、短時間で学習（というより記憶）するのはユーザーにとって大きな認知的負荷となってしまいます。

　情報を感覚的に伝えるのがアイコンの役割ですが、もともとユーザーにとって抽象的なものである「コンピュータの動作」をアイコンで表現すると、ユーザーはその意味を頭の中で言葉に置き換えながら推測しなければならず、かえって分かりにくくなってしまうのです。

画面3　これらは「プロパティを変更するスイッチ」。比較的分かりやすい （太字、斜体、下線、囲み線、文字の網掛け、文字の拡大／縮小、両端ぞろえ、中央ぞろえ、右ぞろえ、均等割り付け、段落番号、個条書き、インデント解除、インデント）

　 一方、1〜3は、動作ではなく、対象物もしくは得られる結果をグラフィックで表現すればよいので、具体化しやすく、アイコンの効果を発揮できます。

1/3

INDEX
ユーザビリティのヒント（3）
	Page1 説明が必要なアイコンは用いない 処理を開始するスイッチをアイコンに頼らない
	Page2 制限コントロールの選択肢に否定文を使わない 肯定ボタンのラベルにあいまいな文言を用いない
	Page3 ナビゲーションをアクションのように見せない そのほか、紛らわしいアイコンやラベルは再考する

関連記事

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