起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識關注以用戶為中心的體驗設計
做好體驗設計需要先了解整個用戶產品使用的過程，然后才能針對性做設計。這篇文章，作者系統分析了體驗設計的方法和設計，希望能幫到大家。
在軟件產品設計過程中，用戶體驗的設計是一個不可忽視的課題。
對于互聯網產品，用戶是否喜歡我們的產品，取決于他使用產品所獲得的好處，也取決于他在產品中獲得的體驗。
而用戶的體驗往往會影響用戶的口碑，口碑影響產品的成敗，產品的成敗也影響了產品經理的利益。
對于B端軟件產品，由于業務特性讓產品設計人員更加關注業務需求和多角色協同流程，往往忽視了終端用戶的訴求和單一用戶視圖。
不好的體驗往往會影響項目的交付和公司的形象，從而影響了公司的利益。
既然用戶體驗這么重要，那我們應該如何做好用戶體驗設計呢？
一、影響用戶體驗的三要素
體驗以用戶為中心，那么我們就以用戶的視角觀察一下產品的體驗。
假設某天因為用戶體驗設計的問題困擾你，你想通過”人人都是產品經理“找到相關的文章為你解決問題提供解幫助。
于是你打開網站，點擊搜索，輸入關鍵字，敲擊回車后，瀏覽目標文章，通過簡要說明找到可能讓你關注的文章后，點擊查看文章，如果滿足你的要求時，你還可能會收藏備用。
整個過程中，會涉及到以下三種體驗要素：
1. 別讓我等
用戶的耐心是非常用限的，一方面是生命是有限的，另一個更主要的方面是傳統媒體教育的結果。我們打開圖書、打開電視時得到的都是即使的體驗。
此外，像電腦瀏覽器可以同時找開多個頁簽，手機可以多窗口的切換等技術的支持也讓用戶習慣了在有限的時間內追求體驗程度最大化。
許多研究表明，用戶最滿意的網頁打開時間是2秒以下，等待12秒以上絕大多數用戶會關閉網頁（通過進度條等手段可以延長至38秒），用戶也更傾向于認為打開速度較快的網站質量更高、更可信、也更有趣。
2. 別讓我想
懶惰是人性的組成部分，用戶不喜歡被迫進行思考或學習。
當用戶觸達你的網站時，發現網頁一團糟，不知道里面是干什么的，也懶的學習，于是他眼都不眨一下的關掉了網站。
這個絕對不是用戶的錯，他會開電腦，用鼠標和鍵盤，會打開瀏覽器進入到你的網站。
所以留給產品經理的問題是：怎么留住到來的用戶？
3. 別讓我煩
網站效率低，會令人煩躁，用戶完成任務難度與所需步驟成平方正比。
一次又一次的重復操作絕對不是用戶想要的，如何進行高效的設計縮短用戶完成任務的路徑是產品經理要面臨的挑戰。
二、合理規劃任務流程
從用戶角度理解完用戶體驗之后，我們再從產品的角度規劃產品功能。設計之前，我們需要依據場景合理規劃任務流程。
任務流程是”需求“到“設計”之間的連接線，用戶使用你的產品時，一般都有特定的需求。
所以用戶需要在合理的引導下完成任務，滿足自己的需求。合理指要符合用戶的心智即要符合用戶的思維習慣與行動習慣。
這里介紹C端產品設計中非常經典的一款用戶體驗分析工具“用戶故事地圖”：
1. 用戶故事地圖
用戶故事地圖可以幫助產品經理分析用戶在使用產品時為了達成某個目的的關鍵步驟和動線，并據此從場景的角度來拆解設計軟件的功能點。
用戶的操作動線在每個層面被拆解，以得到第一級別的場景，即Activity。
再從第一級場景進一步拆解出第二級場景，即Back Bone ,它就像敘述故事的骨架。
在二級場景下，可以進一步更加細致地列出所有相關的功能點，即用戶任務User Task。
用戶地圖中的最小顆粒度就是用戶任務。
用戶任務即敏捷開發中的用戶故事（User Story）,每個用戶故事可以用“作為（誰），我想要（什么），這是為什么（為什么）”這樣的結構進行描述。
以下為某購物平臺用戶下單購物的簡化用戶故事地圖如下：
2. 主要任務和次要任務
按照優先級和迭代計劃將用戶任務進行分組就可以得到Release One、Release Two、Release Three…。
每個Release就是迭代中的一個沖刺（Sprint）。按照任務與用戶的目標期望達成度可以將任務分為主要任務和次要任務。主要任務指完成用戶目標必須需要的任務，次要任務是出于部分用戶的分支需求，亦或是出于商業的需求。
Release One由主要任務組成，要以理解為這套產品的第一個最小可執行版本（MVP)。
三、基于三要素的用戶體驗設計
清楚了任務流程和版本功能點后，我們需要考慮如何將必要的信息有效組織起來分門別類的呈現給用戶，別讓用戶想，讓用戶快速找到自己想要的信息。
同時，我們還需要考慮對界面的信息進行排列和一系列的引導，別讓用戶煩，幫助用戶快速理解信息并完成任務。
最后，我們需要通過一定的技術實現方式解決用戶等的問題。
下面我們逐一展開分析：
1. 解決用戶想的問題：讓用戶快速找到自己想要的信息；減少用戶思考和學習的成本
1）Logo
a）我們辨別一個人，并不需要記住他從頭到腳的所有細節，最重要的是看他的臉；當我們辨別一個產品時，最重要的是通過Logo。Logo能讓用戶輕松的知道產品是什么。
b）Logo的旁邊或下面會有細化的規格或分類，提供更具體的信息告訴用戶當前模塊/頻道是什么。
c）Logo旁邊或下面有時還會有一個簡明扼要的Slogan，告訴用戶產品能夠給客戶提供什么樣的服務，帶來什么樣價值。
比如下圖所示：
2）關注用戶任務，給予正確的指引
導航設計是信息組織與分類的基礎，在產品設計中扮演著重要的角色。虛擬的網絡世界沒有現實現世界中明顯的方向感，不明確的導航和位置容易導致用戶迷失，成功的導航設計可以自我解釋，讓用戶清楚的認識信息結構和自己所處的位置，能為用戶清楚的解釋我從哪里來，我現在在哪里，我能到哪里去。
設計導航時，要注意深廣度平衡與導航形式選擇：
a）導航層級的數目稱為深度，每層級中包含的選項數稱為廣度。
導航深度建議不超過5層，過深的導航容易流失用戶，一些細小的信息隱藏過深用戶很難發現，而且過深的層級關系也容易讓用戶迷失方向。
與深度相比，廣度導航更利于用戶發現信息，但廣度超過7個選項，用戶就很難記住，一次性展示過多選項會讓用戶患上選擇恐懼癥，很難選出哪一項是自己要的。
如下圖所示：
b）就移動端產品來說，主要導航的形式包括底部的Tab導航、標簽式導航、陀式導航、抽屜式導航、宮格式導航和列表式導航。
Tab導航比較常見，對于僅有3~5個常用功能的產品，直接將功能選項暴露在產品首頁。
標簽式導航一般位于界面頂部，比底部Tab導航更具有擴展性，常與Tab導航組合使用，Tab導航做為一級功能分類，標簽導航做為二級擴展分類。
陀式導航與Tab導航類似，不同之處在于會有一個非常突出的選項，這個選項通常為主要觸發按扭。
抽屜式導航通過點擊屏幕呼出側邊欄導航內容，感覺像拉抽屜一樣拉出菜單，常用于主要功能突出，次要功能使用頻次較低的產品。
宮格式導航將產品主要功能集中于首頁，每個功能都是一個獨立的入口，適用于體量大、功能多的產品。
列表導航常用于二級導航，結構清晰便于分組，適用于需要分組的功能或內容。
如下圖所示：
導航是面向整個產品功能的，對于單一場景的用戶需要完成目標任務，還需要做好任務引導的設計。
使用向導控件完成跨越多個界面的用戶任務，是一種常用的方法，這種控件多用于web端，引導用戶完成多步操作。
在同一界面中對用戶進行引導，可以使用相似性引導、方向性引導和運動元素引導這三種方法讓用戶自然順暢的完成操作步驟。
相似性引導就是如果大小、色彩、形態等因素相似，那么這些因素就可以牽引用戶的視覺。
方向性引是對操作步驟較多的任務時，利用有指向性的箭頭進行方向性引導（包括箭頭和無形引導）。
運動元素引導就是使用元素的動態效果引導用戶視線，帶領用戶走到下一步。
如下圖所示：
色彩、形態相似的引導
方向性引導
運動元素引導（添加成后的動態效果）
要想讓用戶不花費很多精力閱讀，而是通過掃描一下界面找出吸引其注意力的內容，特別對于信息量大的界面，就就要求設計人員組織好這些信息，并進行精心的設計。
這里提供三個層面的參考幫助設計人員提高產品的用戶體驗：
a）讓界面層次清晰：界面清晰實際上就是界面簡潔易懂、有重點、有邏輯、有層次。
首先，我們需要將大段的信息分解成易于理解的信息模塊，再將這些模塊依據用戶的瀏覽習慣排列優先級并放置到相應的界面位置上。
其次，在視覺呈現上通過間距、分割線、卡片，讓用戶能夠區分不同模塊并突出模塊之間的邏輯關系；模塊的內容，存在重要程度不同和邏輯關系嵌套的，可以在視覺呈現上體現出差異。
最后，可以通過不同的樣式幫助用戶辨別不同層級的信息。
如下圖所示：
b）突出重點信息：通過強化某些設計元素，如加大加粗、運用色彩比對、添加背景色、適度留白等方式強調界面的重點信息，然后讓非重點的信息稍加弱化從而使界面的重點信息自然而然的跳出來。
如下圖所示：
c）隱藏次要信息：隨著產品功能的增加，界面上的元素也越來越，為了不影響新手和中間用戶，需要將次要的信息隱藏起來，待用戶需要時再次他們展示出來。
隱藏次要信息不僅可以讓界面重點信息更加突出，也會減少復雜信息對用戶的干擾，幫助用戶更便捷的操作。
如下圖所示：
3）盡可能降低用戶學習成本
探討界面交互體驗設計問題時，我們可以遵循尼爾森的十大可用性原則，其中在解決用戶想的問題上主要包括如下六條：
a）隱喻原則：在提到隱喻原則之前，有必要提及一下擬物化的視覺。最直接借鑒現實世界的方式就是擬物化，通過模擬現實中的物體，使用戶產生熟悉感，讓信息與功能更加易于識別和理解。
隨著大家對電子產品接受度越來越高，擬物化細節過于復雜，會讓用戶感覺累，從而設計師抽象出物體中最有特征的部分，將繁雜的視覺元素進行簡化處理，由擬物化轉向扁平化。
而擬物化的界面設計有一定的局限性，并不是界面中的每個元素在現實世界中都可以找到對應的物品，設計師通過用戶熟悉的語句、短語、符號來表達意思，遵循真實現世界的認知、習慣、讓信息呈現更加自然，易于辨別和接受，這就是隱喻原則。
例如：播放器的功能按扭，如下圖所示：
b）防錯原則：避免錯誤的發生要好過出錯后再給提示。設計時，要先考慮如何避免錯誤的發生，其次再檢查校驗異常。
例如：在填寫表單時，可以通地提示文字避免用戶填寫錯誤，填寫完成后可以檢查用戶填寫信息是否準確。
c）一致性原則：同樣的情景、環境下，用戶進行相同操作，結果應該一致。系統或平臺的風格應保持一致。當用戶已經習慣了固有的規范，我們設計時應遵循慣例，不要盲目標新立異。
例如：下圖的我的圖標放第一個位置是不是有些別扭？
d）記憶原則：讓系統的相關信息在需要的時候顯示出來，減輕用戶的記憶負擔。
例如：大部分APP搜索的時候，會保留用戶最近使用過的搜索關鍵詞。
e）簡約設計：用戶的信息交互內容不應該包含無關或沒必要的信息；增加或強化一些信息意味著弱化另一些信息。
f）容錯原則：錯誤信息應用通俗易懂的語言說明，而不是只向用戶提示錯誤代碼，提示信息應包含解決方案。例如：訪問網站報告404的錯誤。
2. 解決用戶煩的問題：讓用戶快速理解信息并完成任務，縮短完成路徑幫助用戶偷懶。
1）靈活易用：系統中往往中級用戶較多，而初高級用戶較少。所以系統設計應為大多數人設計，同時兼顧少數人的需求，做到靈活易用。
2）及時的反饋：系統應該在合理的時間、用正確的方式向用用戶提示或反饋目前系統在做什么、發生了什么。與用戶保持溝通和信息傳遞，不會讓用戶感到失控和焦慮。
3）回退原則：用戶因不小心誤操作，需要有一個功能讓程序恢復到錯誤發生之前的狀態。對于誤操作概率高的用戶，讓他有反悔的機會，會讓他感到有安全感。比如，大部分商城下單后，可以在一定條件下取消訂單。
4）減少功能性，視覺聽覺的騷擾：減少廣告、走馬燈一類的效果吸引用戶將視線移開，讓用戶分心并且煩躁。
5）減少用戶產品使用過程中感受到的壓力：不要為了增加用戶關注度而強迫他們去做他們不關心的事。
3. 等：界面設計 & 技術方案
加載比較大的頁面元素內容，復雜的操作運算（涉及后臺運算或數據的調用）、代碼非最優方案導致加載頁面或某個操作需要消耗太多時長。這時候我們解決方案有：
1）技術方案
a）減少Http請求數
b）使用內容分發網絡（CDN)
c）壓縮網頁元素
d）把樣式放在網頁的Head部分
e）把腳本文件放在網頁底部
f）把樣式和腳本放在外部文件中
g）減少DNS查詢次數
h）緩存Ajax
2）交互設計
對于某些特殊的情況確實需要消耗大量時間時，可以通過進度條或加載動畫手段將加載需要的時間，處理的數據數量等信息展示給用戶，讓用戶可以收到反饋，有預期，減少用戶等待時產生的確定性。
四、結語
做好用戶交互體驗需要先了解整個用戶產品使用的過程，再引導用戶完成任務，完成任務的過程不要讓用戶等、不要讓用戶學習和思考，縮短任務完成的路徑幫助用戶偷懶，這樣才能捕獲用戶的獲心，讓你的產品更具有粘性。
作者：refurbish ； 公眾號：Bruce林奮進頻道
本文由 @refurbish 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論，等你發揮！
