頭條楓林網
文章摘要： 使用者完成互動動作和系統操作後系統都為使用者提供了返回按鈕
本文聚焦 Airbnb 產品，描述10大可用性原則的應用場景，希望能夠幫助你更系統地理解10大可用性原則。
一、系統狀態的可見性
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson
系統應該在合理的時間內通過適當的反饋，始終讓使用者瞭解正在發生的事情。
這項原則通常被遵循並使用在如下幾個場景：
- 系統導航、Toast。讓使用者明確知道「我在哪」；
- 按鈕、圖片等元素可被互動的表達與反饋。通過視覺、與空間上的反饋，向用戶傳達頁面元素是可以被互動的，引導使用者前往下一站；
- 使用者完成互動動作和系統操作後，系統需要給予使用者對應的反饋。比如操作成功、完成註冊等；
Airbnb 的房源詳情頁頂部導航，可以通過點選快速定位到房源的某類資訊，讓使用者清晰地知道「我在哪？我還能去哪？」
在釋出房源時，系統頂部模擬了進度條，顯示出了當前步驟，以及當前的釋出進度。
二、貼近使用者的真實環境
Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson
系統應該說使用者的語言，使用者熟悉的單詞，短語和概念，而不是系統導向的術語。遵循現實世界的約定，使資訊以自然和合乎邏輯的順序出現。
這項原則說的直白一些，就是：「說人話」。
產品簡單到傻瓜也能操作，是喬布斯和張小龍做產品的核心理念。坐擁10億使用者的微信之父張小龍說過，做產品要有傻瓜心態。不要炫耀自己的智商，不要讓使用者覺得自己是白痴，請用最簡單直白的語言描述狀況；就好比自然世界裏，你和他人說話的時候必然使用簡單的白話文進行直白的溝通以保證交流順暢。
在房源的詳情頁、Airbnb PLUS 介紹頁，系統用了大量高質量的攝影圖片傳達一種空間氛圍感。同時，在介紹文案的措辭方面，簡潔易懂，語言邏輯清晰。
三、使用者有控制和來去自由的權利
User control and freedom
Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson
使用者通常會錯誤地選擇了系統的某個功能，並且需要一個明確標記的」緊急出口「來離開不想要的狀態，而不必進行擴充套件對話。支援撤消和重做。
使用者擁有自由使用和控制系統的權利，最為常見的就是系統會為使用者提供「撤銷、重做、返回」的入口。
在故事專欄，當用戶在瀏覽器當前標籤頁進入下一級頁面時，系統都為使用者提供了返回按鈕，一方面方便使用者來去自由，另一方營造出了一定的沉浸式瀏覽體驗。
四、系統的一致性
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson
使用者不應該懷疑不同的話語、情況或行為是否在表達同樣的一件事情。系統設計需遵循平臺慣例。
- 移動端 APP 內的返回按鈕位置通常會被放在左上角，當然有些 APP 會將返回按鈕統一放在左下角，雖然返回按鈕的位置不同於大多數 APP，但對於此 APP 的返回互動來說，其實還是一致的；
- 除常用按鈕位置需要符合一致性原則外，icon 的視覺設計也要遵循一致性原則，一個物件對應一個 icon.
在房源、故事集列表頁，系統統一用了卡片式的視覺風格，並且每個卡片裡的文字與背景圖片的層次也都保持一致。
在房源詳情頁，系統使用了統一的 iocn 風格和文字風格，傳達房源的設施屬性。
五、防止錯誤
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson
比良好的錯誤提示資訊更好的方法是：一個走心的設計可以提前防止錯誤的發生。系統要麼消除容易出錯的情況，要麼檢查它們，並在使用者採取行動之前向用戶提供確認選項。
- 比如某些操作不能進行，那就置灰或隱藏，不要在使用者點選後才提醒不能操作。如果有某些內容不能選擇，就置灰或者隱藏，不要等使用者點選完成時才告知不能使用；
- 同樣，在使用者容易出現錯誤操作的場景下，需要給出二次確認，如：刪除和取消重要資訊的操作。
如果房源在某天或多天已被預定或暫時不開放，則日曆裡將這些不可預定的日期置灰。
使用者在修改個人重要資訊後，系統會讓使用者輸入密碼二次確認。
六、系統識別勝過使用者記憶
Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson
通過使用物件，動作和選項的視覺化表達，最大限度地減輕使用者的記憶負擔。使用者不應該記住從對話的一部分到另一部分的資訊。
- 為使用者保留檢視和搜尋歷史是一個很常見的系統識別的例子；
- 使用者在填寫一個長頁面表單時，系統可以根據實際情況提供一個實時預覽的功能，避免出現使用者填了下面忘了上面的情況；
- 使用者在填寫完表單（比如訂單頁面）後，系統可以再次向用戶展示所填資訊，以最終確認；
- 使用者爲了完成一專案標任務，從一個頁面跳轉到另一個頁面後，系統可以再次展示上一個頁面內與目標任務相關的核心資訊，以減輕使用者的記憶負擔。
系統會在首頁第一屏為使用者展示瀏覽歷史（登入後）。
搜尋框也會保留最近5次的搜尋歷史。
七、靈活易用的使用體驗
Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson
一些被精心設計的體驗也許會被專家使用者察覺到，使系統需要能夠滿足無經驗和有經驗的使用者。允許使用者進行頻繁的操作。
當用戶在滾動螢幕瀏覽房源詳細資訊時，系統將預定的基本資訊（如：價格、日期、人數等）固定在瀏覽器的右側，方便使用者在瀏覽過程中隨時開始預定步驟。
八、美觀和簡約的設計
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson
對話中不應該包含無關緊要或很少需要的資訊。在對話中每增加一個相對重要的資訊，就意味著需要弱化其他資訊。
高顏值不需要理由。
九、幫助使用者識別，診斷，並從錯誤中恢復
Help users recognize, diagnose,and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson
錯誤資訊應該用通俗易懂的語言表達（不要用程式碼），較準確的反應問題，並且提出解決方案。
實在無法避免的報錯時，不要單純只是報錯，要提供解決方案。就好比小時候犯錯，你絕不能光說：「啊，我錯了。」老師或家長必然會追問：「錯哪兒啦？」你要是說不出緣由，則必定被認為認錯不誠懇不真心。
當用戶填寫錯誤時，系統會及時給出提示以及解決方法。
十、幫助文件
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson
如果系統能讓使用者不需要閱讀文件就會使用那是最好的，但通常情況下還是需要幫助文件的。任何資訊應該容易被搜尋，且專注於使用者的目標任務，並列出具體的步驟來告知使用者。
- 對於一些可以用一句話說清楚的幫助，可以直接在物件旁邊提供滑鼠懸停出發的 tips，或者簡明的輔助說明；
- 對於較複雜的，一兩句話說不清楚的幫助，則需要跳轉至對應的幫助頁面；
- 系統需要有一個幫助中心，為使用者提供模糊搜尋、分類搜尋，來為使用者提供更全面的幫助。
在個人資料頁面，對於使用者關心的隱私資訊，系統會給出非常有親和力的解釋文案。此外，在系統很多頁面都有對應功能的幫助連結以跳轉至幫助中心。
系統的幫助中心，提供了搜尋和問題分類引導，方便使用者快速定位問題。
△ 本文圖片版權歸 Airbnb 所有
總結
號稱以設計驅動的 Airbnb 公司，的確在產品設計、使用者研究、UX設計方面展現出了較高的功力。網站甚至移動端APP 的框架層、範圍層、視覺層的設計都體現出了高度的使用者體驗一致性和品牌感。可以看出，Airbnb 對 design system 的重視一級高度的執行力。什麼是好的產品品牌認知和識別，我可以簡單的理解為：「脫掉」Logo，使用者照樣認識你。
歡迎關注作者的微信公眾號：「從你的視界路過」
圖片素材作者：Animade