起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識互聯網產品設計之可用性
可用性定義：產品可用性也叫用戶可用性，是指產品真正能夠提供客戶功能信息的實用性。假設所有的功能都是沒問題的，那接下來的工作就是確保它能夠按用戶期望的方式行事。
產品功能的可見性
如果一個元素（鏈接，選項，按鈕…）不能被看見和被確認，那它就不存在。
如果用戶看不到自己想要找的東西，或者原本應該看到的東西，那就是遇到了嚴重的可用性問題。如果你正在進行產品設計，不要指望用戶會耐心十足地到處點擊去尋找重要的輔助信息，閱讀合同條款中晦澀難懂的條文，或者做一些可能從根本上影響用戶操作的事情。
以下幾種情況會使得功能元素“不可見”，在產品設計中應避免：
- 不在用戶要尋找的位置；
- 被其他元素擋住了；
- 即使在顯眼的位置也不能被識別；
- 根本就不存在。
在報紙還是單頁印刷的時代，報攤的報紙都是折疊著擺放的。因此，除非有人拿起報紙打開它，否則只能看到頭版的部分信息，其他部分就被稱為“不明顯位置”。區分可見部分與不可見部分的就是“折痕“。
隨著網站的出現，“折痕”被賦予了新的意義。“折痕以下”意味著這些內容都不是即時可見的，除非用戶向下滾動頁面。和報紙不同，瀏覽器窗口中的“折痕”并沒有確切的位置。因為折痕的位置取決于瀏覽器窗口的大小，如果你使用的是大屏幕，并且把瀏覽器窗口放到最大，就會看到網頁的更多內容。但是，如果你把窗口變小一些，看到的內容也會變少。在智能手機或上網本上，最大可見區域通常比全尺寸電腦顯示器上的可見區域小。
另外，屏幕分辨率可以大大影響瀏覽器窗口中看到的內容，屏幕分辨率越低折痕越高，下圖中亞馬遜官網在1920*1080與1280*720分辨率下的折痕位置：
亞馬遜官網（1920*1080分辨率）
亞馬遜官網（1280*720分辨率）
事實上，亞馬遜網站的主頁非常長。有些內容是必需的，因為它們可能有助于搜索引擎的優化。但是這些內容處于頁面很不明顯的位置，很多人有可能永遠也不會看到它們。
網站中有些內容是要明顯顯示的，下面列出了絕對要顯示在明顯位置的內容：
- 品牌和主要導航
- 幫助信息
- 站內搜索框
- 購物車和結算鏈接
- 咨詢鏈接
- 語言切換入口
- 快速應用的關鍵輸入區
- 關鍵輸出區（置于輸入區的附近）
通常可以放心地置于頁面底部的內容包括：法律聲明；隱私政策；地址和聯系電話。
創建適于滾動的頁面
所謂適于滾動的頁面，是利用布局向用戶傳遞強烈的信號，告訴用戶要進行頁面滾動還能看到更多內容。無論折痕落在什么位置，都要讓布局穿過某個元素（比如圖片），讓用戶知道滾動頁面可以看到更多的內容。適于滾動的訣竅就是在圖形消逝的地方讓內容中斷。網頁的下邊緣越干凈，就越不適于滾動。
底部圖片中斷，利于頁面滾動
假若一個設計從物理上把兩個相關的信息分開，也可能會帶來問題。比方說，我要在頁面頂端的一個輸入框提交信息，我就會希望輸出結果也顯示在輸入框所在的位置（比如，提交內容）。即使在適于滾動的界面上，我們也不希望用戶過多地滾動頁面。為了點擊屏幕外的提交按鈕，不得不滾動一點頁面，真是讓人極其惱火。隨著屏幕變小，越多越多的按鈕、輸入框以及輸出框，需要在頁面的頂端或底端出現，這也是人體工程學方面的考慮。
微博發表文字信息，發送按鈕位于右上角
位于底部的發布按鈕
避免設計廣告盲區
廣告盲區是指人們忽視網站上各種Banner廣告的傾向。USATODAY.com通過采訪和網站統計了解到，大多數用戶對三件事情感興趣：運動、天氣和股票。所以，網站的設計方案是把這三項內容都放在吸引人的彩色方框中，并置于網頁的頂端。這樣做的結果是什么？沒有人點擊這些內容，于是出現了廣告盲區。
紅框內即為廣告盲區
在產品設計中，可以采用以下方式避免廣告盲區：
- 讓特定的用戶看到特定廣告，達到精準投放效果。
- 將廣告設于頁面底部，而非頂部。最新的研究顯示，獲得最高關注的不是頁面頂端，而是在第一屏的底部。這對廣告設計有著直接的應用借鑒，能夠避免廣告盲區效應的損害。
- 以對聯形式懸掛于首頁兩側， 規格較大，不會產生上下的廣告盲區，廣告位置可以強烈沖擊訪客視覺。
- 網站的重要內容避免過度設計
避免遮擋重要內容
網頁瀏覽總的體驗極大地影響著用戶購買產品、繼續使用服務乃至注冊的欲望。然而我們都知道，有些網站只能有限度地瀏覽，唯有付費后才能看更多的內容。用戶必須注冊并提供個人信息、付一些錢，或是做其他事情才能訪問頁面。
京東的做法是一個正面的案例，京東提供了未登錄也可選擇商品加入購物車的技術支持，具體來說就是，一個未登陸用戶訪問了京東網站，這個客戶在 2 點、 3 點、 4 點分別加了三件商品入購物車，這樣京東的后臺也記錄了這個用戶的購物車里面已經有三件商品，并且只要每次該用戶查看自己的購物車，京東后臺都能夠展示相應的數據（涉及session與cookie技術，本文暫不深入），在用戶最后要結算的時候才會提示用戶登錄/注冊賬號。
我們在產品設計中要確保產品的可見性，試著在設計中解決如下問題：
- 重要的信息不要隱藏在用戶找不到的地方。
- 不要讓任何東西擋住要顯示的信息。
- 避免將重要的信息設計成了廣告盲區。。
- 在有折痕的頁面中對信息進行分組，不要將重要的信息隱藏到折痕下面。
- 付費方式不要對免費體驗的部分造成影響。
?產品要讓用戶易于理解
在可用性方面，說到“易于理解”，就是讓用戶的回答必須是“是”！
?共同參照概念
共同參照的意思，是指無論是誰使用某個東西，都可以和它的設計者保持相同一致的理解
?文字
文字描述在產品設計中一直都發揮著重要的作用。比如，圖書中的文字往往多于圖片，iPhone上有了非常炫酷的圖標也還要有關聯文字。文字構成了大多數使用手冊、菜單、產品說明、以及公共內容等的核心內容。
關于文字的可用性，要記住兩件事情：
- 無論描述什么，都要簡潔、明確表述
- 不要認為每個人都能正確理解你寫的信息
用戶不能理解的錯誤提示
創建共同參照的要點方法：
- 不要認為一切都是理所當然的
- 提前考慮用戶可能遇到的問題
- 回答用戶沒有想到的問題
- 根據用戶的實際使用情境檢查內容
- 不同的使用情境，會隨時影響所需（提供）的信息
圖片
一張圖片會勝過千言萬語。圖像可以提升文字效果。最重要的是，圖像可以形象地說明一個僅用文字很難描述清楚的事物。文字能夠很好地傳達事實和數據。但是照片、圖形等往往能更好地傳達物體微妙且常常富于情感方面的內容。
此外，圖片可以展示一些東西如何使用、穿戴，等等。如果產品的使用方式略微與眾不同，圖片就會相當有用。
最后，只用圖片和圖像或許不能展示全部的內容。為了把信息表述清楚，請使用兩種以上的共同參照要點方法。
天貓顯示的商品圖，不僅展示了商品細節、如何使用使用，還結合視頻全面展示商品，這是一個很好的共同參照
圖標
我們知道，圖標固然很有吸引力，但它實際上在溝通起來相當遜色。事實上，只有4個圖標最終被大多數人認可：
- 放大鏡（查找）
- 房子（主頁）
- 信封（聯系我們/郵件）
- 打印機（打?。?/strong>
經驗告訴我們，如果你真的需要一個圖標，最好使用類似微軟、蘋果或谷歌的設計。人們通過網站或應用程序學習東西，也期望能把這些知識應用到其他網站和應用程序中。不要設計太有創意的圖標。雖然它們很漂亮，但設計成本很高。真正有創意的圖標一般只有被點擊才有意義，否則做得再好看也沒有用。產品中任何東西的理念都是它可以做什么，而不是它看起來怎么樣。
QQ的圖標也會加入鼠標移入顯示文字，這樣做讓用戶更容易理解圖標的含義
音頻、視頻
帶寬增大、格式標準化的統一和易于使用的第三方服務的出現，使得人們可以將真正的多媒體內容快速地添加到網站和應用中。視頻與音頻的出現增加了用戶交互的趣味性，人們可以通過聽和看視頻更快速的獲取想要得到的資源。視頻和音頻往往都會是比較好的共同參照。
為保證我們的產品能夠讓用戶易于理解，我們要做到以下幾點：
- 說明、幫助文案要精確而全面。
- 不要使用讓用戶可能難以理解的縮寫、官話或生僻詞匯。
- 使用正確建立共同參照的圖片。
- 要讓所有用戶都能理解網頁內容或者線下流程。
- 使圖標包含描述性文字，包括alt屬性（當鼠標懸停在一個詞或圖像上，就會自動彈出一個小黃框）。
- 從視覺設計的角度來創建成熟的共同參照。
- 可視化描述內容不要誤導用戶。
?產品的一致性
產品規則不會出乎意料地改變。
一致性是實現清晰簡潔的功能設計的關鍵之一，它讓我們周圍的世界變得更容易理解，從而使得我們的生活變得簡單。蘋果公司的設計師曾經說過，‘當事物表現不同時，應該保持視覺上的不一致；而當事物表現相同時，應該保持視覺上的一致性?！?/p>
例如，如果你一直把“提交”作為按鈕標簽，就不要突然將它改為“發送”和“接受”，以免大家疑惑。不要只是出于創意而混用術語。一旦建立了自己的語言習慣，就要堅持使用，特別是在有關表單和對話框的地方。
保持事物的單一性
既想要保持用詞的標準性，也要為用戶提供簡單直接的選擇。比如，選擇性別時：
- 男；
- 女；
這是一個單一列表，其中所有的詞語（把這些想象成網站上的菜單標簽）都有明確的區別，沒有任何重復，用戶也可以輕易的做出選擇。如果換成下面的情況，你會怎么選？
- 男；
- 女；
- 未成年人；
菜單分類清晰、明確
用標準化提升一致性
使用標準化的設計可以為用戶的使用保駕護航，比如，做一款安卓應用要符合Google的相關規范，同樣，iOS也有著自己的設計規范。標準化的關鍵不是阻礙創新，而是讓解決方案清晰可見。
在設計不同客戶端產品時，我們要確保熟練掌握其設計規范，這樣才能設計出符合用戶使用習慣的產品。
一個按鈕，一個功能
多按鈕的遙控器
我們都見到過讓人討厭的遙控器，面板上有很多個按鈕。盡管這個東西有很多其他的可用性問題，但至少它沒有多功能按鈕。如果你希望一個按鈕有多種功能，那基本上就是在自討苦吃。人們總是不理解為什么一個應用程序或一個網站突然就切入到“不同的模式”里了。
例如，我可以使用遙控器上的菜單按鈕來激活或關閉電視屏幕上的菜單。這很好。但是在菜單鍵周圍還有四個光標按鈕用于導航。左箭頭按鈕為后退功能，而在菜單關閉的情況下，它可以快速瀏覽12個不同的屏幕高寬比（寬屏，電影擴展16∶9，字幕變焦，等等）。如果我同時按下左箭頭和右箭頭，就會看到設置菜單，但它不同于按下菜單鍵時看到的菜單?？傊喙δ馨粹o可以說是非常糟糕的。
蘋果公司在消除多功能按鈕和避免多用途方面做得十分出色。iPhone只有一個按鈕，并且它只做一件事情：返回手機主屏幕。其他所有的操作都通過觸摸屏上的“軟”按鈕完成。蘋果鼠標也只有一個按鈕。也就是說，如果你按住蘋果鼠標一兩秒鐘，就會看到另一個菜單，就像PC上的鼠標右鍵。這是一個折中的方法，但它能正常工作并且易于操作。
當然，一鍵并不總是更為簡單。多按鈕也不總是壞事，只要它們能夠合理分組，表明按鈕的相關功能，并且不會在不同的時間代表不同的功能。
一個圖標，一個功能
與按鈕密切相關的是圖標的操作。例如，谷歌備受歡迎的Gmail應用程序曾經是出了名地愛重復使用圖標。畢竟，設置圖標是為了對隱藏在圖標背后的功能提供快速的認知提示。
當然，并不是只有谷歌這么做。Windows產品，也同樣也有重用圖標的案例。
由此看來，盡管經過多年的研究和消費者投訴，就連那些大企業都還沒有真正接受“一個圖標，一個功能”的最佳實踐理念。
不同的圖標提供不同的功能，這樣才能讓用戶對我們的產品不產生疑慮。
網易云音樂，細致的圖標
讓我們的產品具備一致性是極其重要的，我們要做到以下幾點：
- 設計中不要存在看起來相同，但實際操作不相同的東西。
- 設計中不要存在看起來不同，但操作相同的東西。
- 不要為了創新而犧牲了對象或功能的一致性。
- 不要重復利用圖標來實現不同的功能。
- 嘗試在你的產品或服務中增加功能的一致性，也可采用他人開發的最佳實踐。
- 使用顏色和物理分組對按鈕和其他控件進行分類，讓用戶馬上明白它們是有關聯的。
產品的可預見性
讓用戶清楚地知道下一步會發生什么。
一致性與可預見性的一個顯著區別是：一致性意味著某些東西每次都做相同的事情，可預見性意味著它會做你期望它做的事情。舉一個簡單的例子，花瓣網上每一個素材都有收藏的圖標，這是一致性。用戶點擊圖標意味著收藏了該素材，這是可預見性。
一致性與可預見性
讓用戶知道該期待什么
可預見性意味著某樣事物會做你希望它做的事情。知道該期待什么的關鍵在于，在交互活動真正發生之前設置預期。
我敢打賭，在去一個餐廳之前你一定會通過‘大眾點評’查看評論，來了解商戶是否值得信賴。在購買圖書（或其它商品）之前，你也一定會在評論區查看該書的評價。
當用戶觸發一個操作后，適當的提示可以為用戶建立預期。
倒計時跳轉頁面提示，給予用戶期待
品牌、客戶滿意度和預期
從營銷意義上說，品牌也與設定預期有關。其中一個關鍵部分就是對產品或服務進行市場定位。例如，我們認為沃爾沃是安全型汽車，捷豹是舒適的運動型汽車，雪佛蘭是實用性汽車。
客戶滿意度和預期是緊密相關的。例如，國外的調查顯示，并不因良好服務而著稱且不涉人情的折扣商店沃爾瑪，得到的客戶滿意度要高于以服務自詡的諾德斯特姆。為什么呢？因為沒有人真正期望會從沃爾瑪得到良好的服務，所以工作人員做任何一件讓購物者更方便的小事都會令人印象深刻。但人們對諾德斯特姆的服務預期已相當高，所以他們需要更努力才能為客戶留下深刻的印象。這等同于商業中的位高則任重。
所以，我們從中學到的是，如果人們不抱有期望，那就幫助他們建立期望；如果他們懷有期望，你超出期望越多，那么人們就會感受到更好的可用性。也就是，要做到超出用戶的預期。
讓用戶知道有多少步驟
多次點擊并不一定會使產品變糟糕，只要用戶認為每次點擊會使他們更接近目標，就會多次點擊。因此，我們最可能預見的往往是那些提前告訴人們要點擊多少次的過程。
如果有多步過程，請確保用文字或圖片明示出來。
展示出過程的步驟
把東西放在用戶期待看到的地方
讓東西可見意味著把它們放在它們應該出現的地方。說到可預見性，將東西放在人們期望找到的地方也很重要。例如，在現實世界中，我希望電燈開關緊挨著門，希望在廚房里找到鍋碗瓢盆。簡而言之，用戶希望所有東西就在需要用到的地方附近，并以合理的方式進行分組。
為確保我們的產品具備可預見性，我們可以嘗試如下方法：
- 幫助用戶利用過去的經驗。
- 讓用戶知曉應該提前知道的事情。
- 提前告訴用戶有幾個步驟。
- 提供某種可見狀態表明產品的不可用狀態。
- 在產品的使用過程中確保符合用戶的預期。
相關閱讀
作者：流年，互聯網產品設計師，4年互聯網產品設計經驗。
本文由 @流年 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
mark
蠻好，最好結尾可以總結下