如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

本文聚焦 Airbnb 產(chǎn)品，描述10大可用性原則的應(yīng)用場景，希望能夠幫助你更系統(tǒng)地理解10大可用性原則。

一、系統(tǒng)狀態(tài)的可見性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系統(tǒng)應(yīng)該在合理的時間內(nèi)通過適當(dāng)?shù)姆答?，始終讓用戶了解正在發(fā)生的事情。

這項原則通常被遵循并使用在如下幾個場景：

• 系統(tǒng)導(dǎo)航、Toast。讓用戶明確知道「我在哪」；
• 按鈕、圖片等元素可被交互的表達與反饋。通過視覺、與空間上的反饋，向用戶傳達頁面元素是可以被交互的，引導(dǎo)用戶前往下一站；
• 用戶完成交互動作和系統(tǒng)操作后，系統(tǒng)需要給予用戶對應(yīng)的反饋。比如操作成功、完成注冊等；

Airbnb 的房源詳情頁頂部導(dǎo)航，可以通過點擊快速定位到房源的某類信息，讓用戶清晰地知道「我在哪？我還能去哪？」

在發(fā)布房源時，系統(tǒng)頂部模擬了進度條，顯示出了當(dāng)前步驟，以及當(dāng)前的發(fā)布進度。

二、貼近用戶的真實環(huán)境

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

系統(tǒng)應(yīng)該說用戶的語言，用戶熟悉的單詞，短語和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實世界的約定，使信息以自然和合乎邏輯的順序出現(xiàn)。

這項原則說的直白一些，就是：「說人話」。

產(chǎn)品簡單到傻瓜也能操作，是喬布斯和張小龍做產(chǎn)品的核心理念。坐擁10億用戶的微信之父張小龍說過，做產(chǎn)品要有傻瓜心態(tài)。不要炫耀自己的智商，不要讓用戶覺得自己是白癡，請用最簡單直白的語言描述狀況；就好比自然世界里，你和他人說話的時候必然使用簡單的白話文進行直白的溝通以保證交流順暢。

在房源的詳情頁、Airbnb PLUS 介紹頁，系統(tǒng)用了大量高質(zhì)量的攝影圖片傳達一種空間氛圍感。同時，在介紹文案的措辭方面，簡潔易懂，語言邏輯清晰。

三、用戶有控制和來去自由的權(quán)利

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

用戶通常會錯誤地選擇了系統(tǒng)的某個功能，并且需要一個明確標(biāo)記的」緊急出口「來離開不想要的狀態(tài)，而不必進行擴展對話。支持撤消和重做。

用戶擁有自由使用和控制系統(tǒng)的權(quán)利，最為常見的就是系統(tǒng)會為用戶提供「撤銷、重做、返回」的入口。

在故事專欄，當(dāng)用戶在瀏覽器當(dāng)前標(biāo)簽頁進入下一級頁面時，系統(tǒng)都為用戶提供了返回按鈕，一方面方便用戶來去自由，另一方營造出了一定的沉浸式瀏覽體驗。

四、系統(tǒng)的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用戶不應(yīng)該懷疑不同的話語、情況或行為是否在表達同樣的一件事情。系統(tǒng)設(shè)計需遵循平臺慣例。

• 移動端 APP 內(nèi)的返回按鈕位置通常會被放在左上角，當(dāng)然有些 APP 會將返回按鈕統(tǒng)一放在左下角，雖然返回按鈕的位置不同于大多數(shù) APP，但對于此 APP 的返回交互來說，其實還是一致的；
• 除常用按鈕位置需要符合一致性原則外，icon 的視覺設(shè)計也要遵循一致性原則，一個對象對應(yīng)一個 icon.

在房源、故事集列表頁，系統(tǒng)統(tǒng)一用了卡片式的視覺風(fēng)格，并且每個卡片里的文字與背景圖片的層次也都保持一致。

在房源詳情頁，系統(tǒng)使用了統(tǒng)一的 iocn 風(fēng)格和文字風(fēng)格，傳達房源的設(shè)施屬性。

五、防止錯誤

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

比良好的錯誤提示信息更好的方法是：一個走心的設(shè)計可以提前防止錯誤的發(fā)生。系統(tǒng)要么消除容易出錯的情況，要么檢查它們，并在用戶采取行動之前向用戶提供確認選項。

• 比如某些操作不能進行，那就置灰或隱藏，不要在用戶點擊后才提醒不能操作。如果有某些內(nèi)容不能選擇，就置灰或者隱藏，不要等用戶點擊完成時才告知不能使用；
• 同樣，在用戶容易出現(xiàn)錯誤操作的場景下，需要給出二次確認，如：刪除和取消重要信息的操作。

如果房源在某天或多天已被預(yù)定或暫時不開放，則日歷里將這些不可預(yù)定的日期置灰。

用戶在修改個人重要信息后，系統(tǒng)會讓用戶輸入密碼二次確認。

六、系統(tǒng)識別勝過用戶記憶

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

通過使用對象，動作和選項的可視化表達，最大限度地減輕用戶的記憶負擔(dān)。用戶不應(yīng)該記住從對話的一部分到另一部分的信息。

• 為用戶保留查看和搜索歷史是一個很常見的系統(tǒng)識別的例子；
• 用戶在填寫一個長頁面表單時，系統(tǒng)可以根據(jù)實際情況提供一個實時預(yù)覽的功能，避免出現(xiàn)用戶填了下面忘了上面的情況；
• 用戶在填寫完表單（比如訂單頁面）后，系統(tǒng)可以再次向用戶展示所填信息，以最終確認；
• 用戶為了完成一項目標(biāo)任務(wù)，從一個頁面跳轉(zhuǎn)到另一個頁面后，系統(tǒng)可以再次展示上一個頁面內(nèi)與目標(biāo)任務(wù)相關(guān)的核心信息，以減輕用戶的記憶負擔(dān)。

系統(tǒng)會在首頁第一屏為用戶展示瀏覽歷史（登錄后）。

搜索框也會保留最近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

一些被精心設(shè)計的體驗也許會被專家用戶察覺到，使系統(tǒng)需要能夠滿足無經(jīng)驗和有經(jīng)驗的用戶。允許用戶進行頻繁的操作。

當(dāng)用戶在滾動屏幕瀏覽房源詳細信息時，系統(tǒng)將預(yù)定的基本信息（如：價格、日期、人數(shù)等）固定在瀏覽器的右側(cè)，方便用戶在瀏覽過程中隨時開始預(yù)定步驟。

八、美觀和簡約的設(shè)計

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

對話中不應(yīng)該包含無關(guān)緊要或很少需要的信息。在對話中每增加一個相對重要的信息，就意味著需要弱化其他信息。

高顏值不需要理由。

九、幫助用戶識別，診斷，并從錯誤中恢復(fù)

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

錯誤信息應(yīng)該用通俗易懂的語言表達（不要用代碼），較準(zhǔn)確的反應(yīng)問題，并且提出解決方案。

實在無法避免的報錯時，不要單純只是報錯，要提供解決方案。就好比小時候犯錯，你絕不能光說：「啊，我錯了。」老師或家長必然會追問：「錯哪兒啦？」你要是說不出緣由，則必定被認為認錯不誠懇不真心。

當(dāng)用戶填寫錯誤時，系統(tǒng)會及時給出提示以及解決方法。

十、幫助文檔

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

如果系統(tǒng)能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專注于用戶的目標(biāo)任務(wù)，并列出具體的步驟來告知用戶。

• 對于一些可以用一句話說清楚的幫助，可以直接在對象旁邊提供鼠標(biāo)懸停出發(fā)的 tips，或者簡明的輔助說明；
• 對于較復(fù)雜的，一兩句話說不清楚的幫助，則需要跳轉(zhuǎn)至對應(yīng)的幫助頁面；
• 系統(tǒng)需要有一個幫助中心，為用戶提供模糊搜索、分類搜索，來為用戶提供更全面的幫助。

在個人資料頁面，對于用戶關(guān)心的隱私信息，系統(tǒng)會給出非常有親和力的解釋文案。此外，在系統(tǒng)很多頁面都有對應(yīng)功能的幫助鏈接以跳轉(zhuǎn)至幫助中心。

系統(tǒng)的幫助中心，提供了搜索和問題分類引導(dǎo)，方便用戶快速定位問題。

△ 本文圖片版權(quán)歸 Airbnb 所有

總結(jié)

號稱以設(shè)計驅(qū)動的 Airbnb 公司，的確在產(chǎn)品設(shè)計、用戶研究、UX設(shè)計方面展現(xiàn)出了較高的功力。網(wǎng)站甚至移動端APP 的框架層、范圍層、視覺層的設(shè)計都體現(xiàn)出了高度的用戶體驗一致性和品牌感。可以看出，Airbnb 對 design system 的重視一級高度的執(zhí)行力。什么是好的產(chǎn)品品牌認知和識別，我可以簡單的理解為：「脫掉」Logo，用戶照樣認識你。

藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)