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