「映射(mapping)」是設計介面的時候一個非常重要的思考方式,所謂「映射」就是操作方式與介面和要操作的對象和結果有著相似的外觀或行為,如此一來,才能讓使用者非常直覺的使用這個裝置或軟體。
在 Donald Norman 的著作中最有名的例子就是下面這個瓦斯爐了。許多瓦斯爐都設計成左邊這種令人困擾的控制方式,上面有四個 2 x 2 排列瓦斯爐,但是瓦斯開關卻設計成一排四個,這樣到底誰能搞清楚哪個開關對應哪個爐子呢?最直覺的設計方法就是讓操作介面直接映射到操作對象上。像右邊那樣開關和爐子排列方式,大家才可以最直覺的一看就了解對應的開關和爐子。
另一個比較複雜的映射例子就是汽車的方向燈開關了。方向燈開關的設計乍看之下很不直覺,上下撥對應到汽車左右邊的方向燈。但是如果你仔細觀察,方向燈開關通常設計在方向盤的左邊,由於方向盤的設計很直接,反應了車子會前往的方向,因此當你的左手放在方向盤上時,往上撥開關的時候也帶動了方向盤右轉,理所當然的右邊的燈就亮了。左邊也是反之亦然,如此一來映射的設計也可以向這樣透過一個媒介(方向盤)來達成。
網站設計也需要正確的映射方式,尤其是在導覽的時候,像是部落格的單篇文章頁面,常常需要「上一頁」和「下一頁」的按鈕,通常提供向左或是向右箭頭的按鈕,可以讓使用者有如同翻書般的映射直覺。但是偶爾也有例外的時候,例如下面這個例子,這個網站的 prev 和 next 按鈕是提供向上和向下的箭頭,這是因為向下的按鈕會讓上面的內容往下捲動,而非左右捲動內容,如此才能滿足使用者預設的映射方式。
同一個網站在不同的地方就採用了左右的箭頭按鈕,讓使用者左右捲動畫面內容:
映射是使用者理解介面之後,預期目標會產生的結果。如果映射設計的好,那麼產品就能滿足使用者的心智模型,使用者有的時候和你想的不一樣,設計師應該採用正確的映射方式,才能讓設計更直覺,更好懂。
Image via , CC License.