編輯導語：用戶體驗是產品設計落地后的衡量依據之一。那么，如何做好產品可用性、提升用戶體驗、進而推動用戶留存呢？本篇文章里，作者結合了映射法則，結合實際案例，探討了建立良好映射關系以提升用戶體驗的思路。一起來看一下。

作為一個用戶體驗設計師，當別人問我什么是用戶體驗時，我通常會說：最基本的，就是一個東西你覺得好不好用，如果用起來很簡單順利，那就是好的用戶體驗，否則就不好。

這也就是用戶體驗基本考量標準之一，「可用性」的考量。當然，影響一個東西好不好用的因素有很多，本文將從125條通用設計法則中的「映射Mapping」出發，探討一下這個法則對事物可用性的影響。

一、為什么你會覺得有些東西不好用？

要回答這個問題，我們先來了解諾曼在《設計心理學1：日常的設計》中所描述的——一個人在做一件事情是所經歷的過程，大致可以分為3大階段：

1. 首先，明白做這件事情的目標；
2. 然后，采取行動；
3. 最后，看自己的目標是否達到。

正如上述所列，執行鴻溝和評估鴻溝，正是讓你在做某些事情時感到困難的原因。降低這兩個鴻溝，可以顯著提升用戶體驗。

二、如何降低執行鴻溝和評估鴻溝？

讓我們來把上述文字轉化為下面這張圖。

先看產生執行鴻溝連接的兩方事物：

1. 用戶計劃：由用戶的目的產生。
2. 系統可操作的功能：由前饋信息，即系統可被感知的外在元素透出。

前饋信息（feedforward）：有助于回答執行類問題的信息，幫助你知道能做什么?！对O計心理學1：日常的設計》

也就是說，如果系統設置了足夠的前饋信息，且與其功能建立良好的映射關系。那么用戶就可以通過外在元素，得出自己的結論：這個系統可操作的功能有哪些？這個結論越接近用戶的計劃，那么執行鴻溝越小。

再看評估鴻溝連接的兩方事物：

1. 評估標準：由用戶的目的而產生。
2. 系統的狀態：由其釋放的反饋信息透出。

也就是說，如果系統提供完整持續的反饋信息，且與其狀態建立良好的映射關系。那么用戶就可以通過反饋，得出自己的結論：這個系統當前的狀態如何？這個結論越容易和用戶的評估標準進行對比，那么評估鴻溝越小。

通過上述分析，可以得出影響可用性的三個要素：

1. 足夠的前饋信息；
2. 足夠的反饋信息；
3. 良好的前饋信息與系統功能，反饋信息與系統狀態的映射關系。

其中第三點，關于「映射」的解讀，一部分來自于諾曼的《設計心理學1:日常的設計》（「映射」這一概念的奠基之作）。書中將映射認為是表達“控制——效果”關系的一種方式，即如何用正確的控制形式（前饋）表達出系統功能的效果。

個人認為，可以將映射進一步拓展到“狀態——反饋”關系的表達方式，即如何用正確的反饋形式表達出操作之后的系統狀態。本文將從這兩個角度出發討論如何建立良好的映射關系。

三、如何建立良好的映射關系？

用戶得出映射關系結論的依據往往是自己的心理模型（Mental Model），所以為了能夠得出盡可能準確的結論，良好的映射關系就會更符合人們的心理模型。

心理模型（Mental Model）：人們通過經驗、訓練和教導，對自己、他人、環境以及接觸到的事物形成的模型。

《設計心理學1：日常的設計》中提到，建立良好映射關系的就是兩大類：

1. 利用物理環境類比（Physical Analogies）：比如空間位置類比。
2. 利用文化標準（Cultural Standards）：比如升高表示增加。當然需要注意的是，不同文化間的差異，可能會帶來映射關系理解的偏差。

下面讓我們用實際案例去進一步解讀。

四、案例分析：在線文檔多人實時協同

我目前在為一款在線文檔編輯和知識管理工具——語雀（給自家產品打個小廣告）做設計。最近語雀上線了很多用戶期盼已久的文檔的多人實時協同功能。在用戶的反饋中，我們了解到大家一般需要在以下情景中使用這個功能：

1. 組內一起在一篇語雀文檔里寫周報；
2. 一起完成一份項目計劃書；
3. 一起記錄會議紀要；
4. ……

因此，我們可以利用真實場景去填充上面這張理論圖。

其中設計師可以發揮點，就是設置足夠（并非越多越好）的前饋信息和反饋信息，然后建立良好的映射關系，以達到以下目標：

• 前饋信息讓用戶知道語雀有符合其計劃的功能。
• 反饋信息讓用戶知道語雀文檔的狀態如何，且容易與評估標準進行對比。

1. 前饋信息設計 &「前饋信息——系統功能」映射關系建立

做設計的時候很容易忽略前饋信息的設計，因為大家更容易直接上來就開始設計這個功能該如何如何使用，使用完之后給到用戶什么樣的反饋。但是往往忽略了如何可以讓用戶知道這個功能。你看，要不是我寫了這篇文章，我還沒意識到我真的忘了給語雀的多人協同編輯功能設計前饋信息。

原先使用語雀文檔，需要等待上一個用戶完成編輯后，另一個用戶才能進入編輯。然后當用戶點擊編輯按鈕之前，他是無法知道當前是否有其他人正在編輯此文章。只有他點擊了“編輯”按鈕，系統才會給出提示，這種體驗自然是令人沮喪。

幸好，上線多人實時編輯功能后，用戶可以不再受到其他編輯者的限制。但是讓一個用戶知道這個功能呢?

其實針對本功能上，用戶即使事先不知道這個功能也無大礙，因為直接編輯文檔就是了，只不過可能某一次突然發現當前還有別人也在編輯文檔，這時恍然大悟：原來語雀已經支持多人實時編輯了。

當然，我們還是可以在設計上多做一點，畢竟這么大一個功能上線，還是希望用戶早點發現。除了常見的新功能上線的彈窗廣告，我還做了一個設計，就是當只有一個人編輯文檔，語雀文檔也會顯示當前編輯者的頭像，懸浮到頭像上會有提示：語雀已支持多人同時編輯文檔。

分析業界其他競品，我們也可以看到其他前饋信息的設計方式，例如像Confluence文檔，直接在頭像旁設置「?」。類似于語雀的協作按鈕。

上述提到的前饋信息與系統功能建立映射關系的方式是：

• 頭像加tooltip?！霸卷敳坎僮鳈诓]有頭像，突然現在多了一個自己的頭像，這是什么情況？”這樣的疑問會引導用戶嘗試與頭像發生交互，從而可以看到tooltip中的說明。
• 加號。運用的是文化標準，頭像旁邊的加號，暗示著加人，自然讓人理解為添加編輯者。

《設計心理學1:日常的設計》中有一個概念叫意符，上述的頭像+tooltip、加號都是一個明顯可被發現讓人，告訴用戶可采取什么行為且怎么操作的意符。

說到這兒，我實在忍不住不吐槽一下《設計心理學1:日常的設計》里面的概念太多，一會兒「意符」，一會兒「前饋信息」，感覺這兩個概念真的很相似。我理解的區別大概「意符」是僅指視覺方面的「前饋信息」。而「前饋信息」還可以包括其他感覺：聽覺、嗅覺、觸覺等。歡迎大家探討。

2. 反饋信息設計 &「反饋信息-系統狀態」映射關系建立

在這個案例里，用戶的目標是大家一起在短時間內成功完成一份項目規劃書。根據目標推導出目標完成的評估標準：

1. 大家是否一同進入編寫？
2. 大家是否在各自負責的部分編寫？
3. 大家是否編寫了正確內容？

要容易完成上述評估，用戶需要知道語雀文檔的一些狀態：

• 目前有n個人正在同時編輯這篇項目規劃書；
• 這些人都是……
• 每個人正在編輯的部分是……
• 每個人修改了……

想要獲得上述信息，我們可以設計系統給出相應的反饋信息。下表闡述了目前一些常見的多人實時編輯時的反饋信息類型，以及它們如何和系統狀態建立映射關系。

以上都是業界多人實時編輯工具常見的反饋信息設計，可以發現，其中好幾種反饋信息都映射到了同一個系統狀態。

或許這些反饋信息是互補的，需要組合使用，才能夠完整了解系統的某個狀態；也可能這些反饋信息是重復的，那么只需要保留最夠用的那個即可（過多信息，也會加大認知負荷，所以夠用即可）。我需要從中判斷哪些適合語雀文檔，或者有沒有其他更好的反饋信息設計。

以下就是語雀多人實時編輯功能最終采取的反饋信息。為什么選了這幾種呢，主要是考慮到后續設計的拓展性。

1. 用戶頭像的展示；
2. 彩色光標。

以上就是自己在最近的實戰中結合設計理論知識的心得。歡迎大家一起來討論。

作者：Eleven幺幺，螞蟻集團設計師

本文由 @Ant Design 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議