インターフェースの妙は「マッピング(対応付け)」!

前回のコラムで「気持ちのいい!」Webサイト」を構築するには、「良い概念モデル」を目指すことが求められるということを提言したのですが、では、「良い概念モデル」を実現するために重要なことは何なのでしょうか。今回は、マッピング(対応付け)について説明します。

20081028_1

上の写真は、弊社オフィスの照明のスイッチです。どこにでもあるスイッチですが、仮に、左下のスイッチをONにすると、どこの照明がつくのか、部屋の照明の配置とスイッチの関係を知らなければ判断できません。下記のようなマッピング(対応付け)が行われていれば、左下のスイッチをONにすると、向かって「左手前」のエリアの照明がつくはずです。

◎正しいマッピング例

(1) 右上スイッチ⇒右上エリアの照明が点灯
(2) 右下スイッチ⇒右下エリアの照明が点灯
(3) 左上スイッチ⇒左上エリアの照明が点灯
(4) 左下スイッチ⇒左下エリアの照明が点灯
しかし、実際のところはスイッチと照明の対応が下記のようになっているため、毎回、スイッチのON/OFFは、思った通りにいきません。これは、機能(ファンクション)と内容(コンテンツ)が、うまく一致していないために起こるマッピングの問題です。

×正しくないマッピング例
(1) 右上スイッチ⇒中央下エリアの照明が点灯
(2) 右下スイッチ⇒右エリアの照明が点灯
(3) 左上スイッチ⇒中央上エリアの照明が点灯
(4) 左下スイッチ⇒左エリアの照明が点灯

20081028_2
Webサイトは、平面ではなく、ツリー(階層)構造で管理されているため、さらにマッピングの問題は複雑になってきます。例えば、Topページに、2階層目と4階層目の複数のリンクが全く同じようにデザインされている場合、クリックするたびに飛ぶページと階層の関係や優先度について混乱し、次のアクションに迷うことでしょう。これでは「良い概念モデル」とはいえませんね。
この場合、2階層目と4階層目のリンクのデザインや配置は、明示的に変化をもたせ、ユーザーにとってストレスのないマッピングを追求する必要があります。ユーザーが特に意識せずにクリックできるまで、マッピングが洗練されていれば言うことありません。

Webサイトを「良い概念モデル」にしていくために、常に、機能(ファンクション)と内容(コンテンツ)のマッピングを心掛けていきましょう。

※この記事は2008年9月~ All About Profile に掲載していたものを移設しています。
cCopyright 2009 xyz corporation. All Rights Reserved.

カテゴリー: Webデザイン   タグ:   この投稿のパーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>