設計法則「映射」: 讓你的設計更符合直覺

1 評論 9956 瀏覽 31 收藏 13 分鐘

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

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

這也就是用戶體驗基本考量標準之一,「可用性」的考量。當然,影響一個東西好不好用的因素有很多,本文將從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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 前端時間剛看了設計心理學1和3,今天讀到作者文章,感覺又有一些更深的思考和收獲,感謝作者~

    來自四川 回復