#399
UX基礎・原則
#399マッピング
マッピング
別名・表記:Mapping
UIXHERO Definition
コントロール(操作部)と、それによって動く対象との対応関係。自然なマッピングは、学習なしで直感的な操作を可能にする。
概要
ドナルド・ノーマンが提唱した概念。操作するためのパーツ(コントロール)と、それによって動く対象物との対応関係のこと。 「右のスイッチを押すと右の電気がつく」「ハンドルを右に回すと車が右に曲がる」といった自然で直感的な対応関係(ナチュラル・マッピング)がデザインされていれば、ユーザーは説明書なしで操作できる。逆にマッピングが悪いと、誤操作の原因になる。
UXでの活用
- 物理的な配置の模倣: 4つのコンロのスイッチを一直線に並べるのではなく、コンロの配置と同じ四角形に並べることで、どのスイッチがどのコンロに対応するかを一瞬で理解させる。
- スライダー操作: 音量を上げるときはバーを「上」か「右」に動かし、下げるときは「下」か「左」に動かす。これは物理世界のアナロジーに基づく。
- ドラッグ&ドロップ: 画面上のファイルをゴミ箱アイコンの上に移動させて離す操作は、現実世界の「物を捨てに行く」行為をマッピングしたものであり、直感的である。
💡 使いどころ
UIのコントロール配置。スライダー、ボリューム操作、スクロールなどは、物理的な動きや画面上の方向と一致させる。
⚠️ 注意点・誤用
「上にスワイプすると下にスクロールする(ナチュラルスクロール)」のように、デジタル特有のマッピングもあるため、プラットフォームの慣習に従うことが重要。
具体例
- コンロのスイッチの配置と、実際の火が出る場所の配置を一致させる
- 音量を上げるときはバーを「右」または「上」に動かす
出典・参考文献:
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.