如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
本文聚焦 Airbnb 產(chǎn)品，描述10大可用性原則的應(yīng)用場(chǎng)景，希望能夠幫助你更系統(tǒng)地理解10大可用性原則。
一、系統(tǒng)狀態(tài)的可見(jiàn)性
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)該在合理的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答仯冀K讓用戶(hù)了解正在發(fā)生的事情。
這項(xiàng)原則通常被遵循并使用在如下幾個(gè)場(chǎng)景：
-
系統(tǒng)導(dǎo)航、Toast。讓用戶(hù)明確知道「我在哪」；
-
按鈕、圖片等元素可被交互的表達(dá)與反饋。通過(guò)視覺(jué)、與空間上的反饋，向用戶(hù)傳達(dá)頁(yè)面元素是可以被交互的，引導(dǎo)用戶(hù)前往下一站；
-
用戶(hù)完成交互動(dòng)作和系統(tǒng)操作后，系統(tǒng)需要給予用戶(hù)對(duì)應(yīng)的反饋。比如操作成功、完成注冊(cè)等；
Airbnb 的房源詳情頁(yè)頂部導(dǎo)航，可以通過(guò)點(diǎn)擊快速定位到房源的某類(lèi)信息，讓用戶(hù)清晰地知道「我在哪？我還能去哪？」
在發(fā)布房源時(shí)，系統(tǒng)頂部模擬了進(jìn)度條，顯示出了當(dāng)前步驟，以及當(dāng)前的發(fā)布進(jìn)度。
二、貼近用戶(hù)的真實(shí)環(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)該說(shuō)用戶(hù)的語(yǔ)言，用戶(hù)熟悉的單詞，短語(yǔ)和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語(yǔ)。遵循現(xiàn)實(shí)世界的約定，使信息以自然和合乎邏輯的順序出現(xiàn)。
這項(xiàng)原則說(shuō)的直白一些，就是：「說(shuō)人話(huà)」。
產(chǎn)品簡(jiǎn)單到傻瓜也能操作，是喬布斯和張小龍做產(chǎn)品的核心理念。坐擁10億用戶(hù)的微信之父張小龍說(shuō)過(guò)，做產(chǎn)品要有傻瓜心態(tài)。不要炫耀自己的智商，不要讓用戶(hù)覺(jué)得自己是白癡，請(qǐng)用最簡(jiǎn)單直白的語(yǔ)言描述狀況；就好比自然世界里，你和他人說(shuō)話(huà)的時(shí)候必然使用簡(jiǎn)單的白話(huà)文進(jìn)行直白的溝通以保證交流順暢。
在房源的詳情頁(yè)、Airbnb PLUS 介紹頁(yè)，系統(tǒng)用了大量高質(zhì)量的攝影圖片傳達(dá)一種空間氛圍感。同時(shí)，在介紹文案的措辭方面，簡(jiǎn)潔易懂，語(yǔ)言邏輯清晰。
三、用戶(hù)有控制和來(lái)去自由的權(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
用戶(hù)通常會(huì)錯(cuò)誤地選擇了系統(tǒng)的某個(gè)功能，并且需要一個(gè)明確標(biāo)記的」緊急出口「來(lái)離開(kāi)不想要的狀態(tài)，而不必進(jìn)行擴(kuò)展對(duì)話(huà)。支持撤消和重做。
用戶(hù)擁有自由使用和控制系統(tǒng)的權(quán)利，最為常見(jiàn)的就是系統(tǒng)會(huì)為用戶(hù)提供「撤銷(xiāo)、重做、返回」的入口。
在故事專(zhuān)欄，當(dāng)用戶(hù)在瀏覽器當(dāng)前標(biāo)簽頁(yè)進(jìn)入下一級(jí)頁(yè)面時(shí)，系統(tǒng)都為用戶(hù)提供了返回按鈕，一方面方便用戶(hù)來(lái)去自由，另一方營(yíng)造出了一定的沉浸式瀏覽體驗(yàn)。
四、系統(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
用戶(hù)不應(yīng)該懷疑不同的話(huà)語(yǔ)、情況或行為是否在表達(dá)同樣的一件事情。系統(tǒng)設(shè)計(jì)需遵循平臺(tái)慣例。
-
移動(dòng)端 APP 內(nèi)的返回按鈕位置通常會(huì)被放在左上角，當(dāng)然有些 APP 會(huì)將返回按鈕統(tǒng)一放在左下角，雖然返回按鈕的位置不同于大多數(shù) APP，但對(duì)于此 APP 的返回交互來(lái)說(shuō)，其實(shí)還是一致的；
-
除常用按鈕位置需要符合一致性原則外，icon 的視覺(jué)設(shè)計(jì)也要遵循一致性原則，一個(gè)對(duì)象對(duì)應(yīng)一個(gè) icon.
在房源、故事集列表頁(yè)，系統(tǒng)統(tǒng)一用了卡片式的視覺(jué)風(fēng)格，并且每個(gè)卡片里的文字與背景圖片的層次也都保持一致。
在房源詳情頁(yè)，系統(tǒng)使用了統(tǒng)一的 iocn 風(fēng)格和文字風(fēng)格，傳達(dá)房源的設(shè)施屬性。
五、防止錯(cuò)誤
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
比良好的錯(cuò)誤提示信息更好的方法是：一個(gè)走心的設(shè)計(jì)可以提前防止錯(cuò)誤的發(fā)生。系統(tǒng)要么消除容易出錯(cuò)的情況，要么檢查它們，并在用戶(hù)采取行動(dòng)之前向用戶(hù)提供確認(rèn)選項(xiàng)。
-
比如某些操作不能進(jìn)行，那就置灰或隱藏，不要在用戶(hù)點(diǎn)擊后才提醒不能操作。如果有某些內(nèi)容不能選擇，就置灰或者隱藏，不要等用戶(hù)點(diǎn)擊完成時(shí)才告知不能使用；
-
同樣，在用戶(hù)容易出現(xiàn)錯(cuò)誤操作的場(chǎng)景下，需要給出二次確認(rèn)，如：刪除和取消重要信息的操作。
如果房源在某天或多天已被預(yù)定或暫時(shí)不開(kāi)放，則日歷里將這些不可預(yù)定的日期置灰。
用戶(hù)在修改個(gè)人重要信息后，系統(tǒng)會(huì)讓用戶(hù)輸入密碼二次確認(rèn)。
六、系統(tǒng)識(shí)別勝過(guò)用戶(hù)記憶
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
通過(guò)使用對(duì)象，動(dòng)作和選項(xiàng)的可視化表達(dá)，最大限度地減輕用戶(hù)的記憶負(fù)擔(dān)。用戶(hù)不應(yīng)該記住從對(duì)話(huà)的一部分到另一部分的信息。
-
為用戶(hù)保留查看和搜索歷史是一個(gè)很常見(jiàn)的系統(tǒng)識(shí)別的例子；
-
用戶(hù)在填寫(xiě)一個(gè)長(zhǎng)頁(yè)面表單時(shí)，系統(tǒng)可以根據(jù)實(shí)際情況提供一個(gè)實(shí)時(shí)預(yù)覽的功能，避免出現(xiàn)用戶(hù)填了下面忘了上面的情況；
-
用戶(hù)在填寫(xiě)完表單（比如訂單頁(yè)面）后，系統(tǒng)可以再次向用戶(hù)展示所填信息，以最終確認(rèn)；
-
用戶(hù)為了完成一項(xiàng)目標(biāo)任務(wù)，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面后，系統(tǒng)可以再次展示上一個(gè)頁(yè)面內(nèi)與目標(biāo)任務(wù)相關(guān)的核心信息，以減輕用戶(hù)的記憶負(fù)擔(dān)。
系統(tǒng)會(huì)在首頁(yè)第一屏為用戶(hù)展示瀏覽歷史（登錄后）。
搜索框也會(huì)保留最近5次的搜索歷史。
七、靈活易用的使用體驗(yàn)
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è)計(jì)的體驗(yàn)也許會(huì)被專(zhuān)家用戶(hù)察覺(jué)到，使系統(tǒng)需要能夠滿(mǎn)足無(wú)經(jīng)驗(yàn)和有經(jīng)驗(yàn)的用戶(hù)。允許用戶(hù)進(jìn)行頻繁的操作。
當(dāng)用戶(hù)在滾動(dòng)屏幕瀏覽房源詳細(xì)信息時(shí)，系統(tǒng)將預(yù)定的基本信息（如：價(jià)格、日期、人數(shù)等）固定在瀏覽器的右側(cè)，方便用戶(hù)在瀏覽過(guò)程中隨時(shí)開(kāi)始預(yù)定步驟。
八、美觀(guān)和簡(jiǎn)約的設(shè)計(jì)
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
對(duì)話(huà)中不應(yīng)該包含無(wú)關(guān)緊要或很少需要的信息。在對(duì)話(huà)中每增加一個(gè)相對(duì)重要的信息，就意味著需要弱化其他信息。
高顏值不需要理由。
九、幫助用戶(hù)識(shí)別，診斷，并從錯(cuò)誤中恢復(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
錯(cuò)誤信息應(yīng)該用通俗易懂的語(yǔ)言表達(dá)（不要用代碼），較準(zhǔn)確的反應(yīng)問(wèn)題，并且提出解決方案。
實(shí)在無(wú)法避免的報(bào)錯(cuò)時(shí)，不要單純只是報(bào)錯(cuò)，要提供解決方案。就好比小時(shí)候犯錯(cuò)，你絕不能光說(shuō)：「啊，我錯(cuò)了。」老師或家長(zhǎng)必然會(huì)追問(wèn)：「錯(cuò)哪兒啦？」你要是說(shuō)不出緣由，則必定被認(rèn)為認(rèn)錯(cuò)不誠(chéng)懇不真心。
當(dāng)用戶(hù)填寫(xiě)錯(cuò)誤時(shí)，系統(tǒng)會(huì)及時(shí)給出提示以及解決方法。
十、幫助文檔
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)能讓用戶(hù)不需要閱讀文檔就會(huì)使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專(zhuān)注于用戶(hù)的目標(biāo)任務(wù)，并列出具體的步驟來(lái)告知用戶(hù)。
-
對(duì)于一些可以用一句話(huà)說(shuō)清楚的幫助，可以直接在對(duì)象旁邊提供鼠標(biāo)懸停出發(fā)的 tips，或者簡(jiǎn)明的輔助說(shuō)明；
-
對(duì)于較復(fù)雜的，一兩句話(huà)說(shuō)不清楚的幫助，則需要跳轉(zhuǎn)至對(duì)應(yīng)的幫助頁(yè)面；
-
系統(tǒng)需要有一個(gè)幫助中心，為用戶(hù)提供模糊搜索、分類(lèi)搜索，來(lái)為用戶(hù)提供更全面的幫助。
在個(gè)人資料頁(yè)面，對(duì)于用戶(hù)關(guān)心的隱私信息，系統(tǒng)會(huì)給出非常有親和力的解釋文案。此外，在系統(tǒng)很多頁(yè)面都有對(duì)應(yīng)功能的幫助鏈接以跳轉(zhuǎn)至幫助中心。
系統(tǒng)的幫助中心，提供了搜索和問(wèn)題分類(lèi)引導(dǎo)，方便用戶(hù)快速定位問(wèn)題。
△ 本文圖片版權(quán)歸 Airbnb 所有
總結(jié)
號(hào)稱(chēng)以設(shè)計(jì)驅(qū)動(dòng)的 Airbnb 公司，的確在產(chǎn)品設(shè)計(jì)、用戶(hù)研究、UX設(shè)計(jì)方面展現(xiàn)出了較高的功力。網(wǎng)站甚至移動(dòng)端APP 的框架層、范圍層、視覺(jué)層的設(shè)計(jì)都體現(xiàn)出了高度的用戶(hù)體驗(yàn)一致性和品牌感。可以看出，Airbnb 對(duì) design system 的重視一級(jí)高度的執(zhí)行力。什么是好的產(chǎn)品品牌認(rèn)知和識(shí)別，我可以簡(jiǎn)單的理解為：「脫掉」Logo，用戶(hù)照樣認(rèn)識(shí)你。
藍(lán)藍(lán)設(shè)計(jì)( www.devb.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
