2021-1-25 周周
交互設計之父的阿蘭·庫珀,最為人熟知的就是這句話:“除非有更好的選擇,否則就遵從標準”。
a. 費茨定律,它是在1954 年 ,由保羅.菲茨心理學家 Paul Fitts 首先提出,當時用來預測從任意一點到目標中心位置所需時間的數學模型,在人機交互和設計領域的影響力最為廣泛和深遠。
b. 定義:從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大小
(上圖中的 D與W),用數學公式表達為時間 T = a + b log2(D/W+1)。
c. 費茨定律,在產品設計中的價值是提高產品的可用性和易用性。例如:界面設計中,按鈕等可點擊對象要合理的設置大小尺寸才能容易操作,所以在移動應用中,圖標按鈕會增加點擊熱區范圍,以便用戶輕松點擊按鈕,做到
產品設計上的可用性和易用性。
費茨定律的思考分析,如下圖所示 。
1. 可點擊對象的設計,需要設計合理的大小和尺寸。功能設計的越大,用戶越容易點擊操作,交互效率越好。
2. 界面設計的屏幕邊緣或角,適合放置像菜單欄或按鈕這樣的設計元素,如果邊角是目標,它們可無限高或無限寬,更容易觸達到操作目標。不管你移動了多遠,點擊操作最終都會停在屏幕的邊緣,并定位在按鈕的上面。
3. 界面設計中,出現在用戶正在操作的對象旁邊的刪除列表(右滑刪除)比下方彈出選擇對象容易操作,右滑刪除交互可以被用戶打開得更快,更有效率,因為不需要移動到屏幕的其他位置,就可以刪除多余的列表。
4. Apple的iOS人機交互設計指南中指出,按鈕的點擊熱區大于44x44pt,這樣操作按鈕才會讓用戶覺得容易使用。
5. 費茨定律案例:用戶在使用產品時,比較重要的操作,我們會放在移動端應用的屏幕邊緣處,方便我們的
用戶點擊操作產品的功能圖標。如下圖所示。
2. Hick’s Law / 席克定律(希克法則)
我們看一下,席克定律的數學公式表達是 : RT= a+blog2 ( n )。RT 表示反應時間,a 表示跟做決定無關的總時間,b 表示根據對選項認知的處理時間實證衍生出的常數,n 表示同樣可能的選項數。
在人機交互的界面設計中,選項越多,意味著用戶做出決定的時間就越長。
分布操作,專注當前行為,就可以節約用戶作出決定的時間。如下圖所示。
其他符合席克定律的案例,如下圖所示:
a. 對于用戶,低頻率功能或不太重要的功能,可以收納起來。比如:個人中心的設置功能模塊。如下圖所示:
b. 分布操作,專注于當前的行為設計,如下圖所示:
c. 在人機交互設計中,我們對核心功能選項做好設計上的歸類,可以提升用戶做選擇的效率。
比如:我們幫助用戶選擇 5 種核心的功能需求,它首先劃分了旅游場景下的功能分類,讓用戶對分類進行選擇。
然后進入選擇機票入口,這樣我們極大的化解了用戶面對很多旅游功能選項的難度和糾結,節約了用戶做決定的
時間。
d. 做好分類選擇,可以提高交互體驗設計的效率,選擇你想要的商品并購買。如下圖所示。
3. 神奇數字 7 ± 2 法則
1. 因為美國認知心理學 George A Miller 的研究,人們短時記憶廣度大約為7個單位(字母、數字、中文等),也就是說每次只能處理 5 到 9 件事情。
2. 人的大腦認知信息的能力有限,所以我們通過把信息分組和模塊分類,以此來認識和思考一些復雜性的問題。
3. 神奇數字 7 ± 2 法則,應用范圍很廣。例如我們記憶的電話號碼,可以分成三組數字:159 5555 6666 ,
這樣分組記憶起來就會容易很多。
4. UI 界面的導航設計,為了給用戶提供明確的設計向導,兩種導航(底部導航欄和頂部導航欄)的欄目設計通常都控制在 5 個之內,欄目功能過多用戶不容易記憶,5 個之內的導航設計方便用戶記憶和快速操作。
5. 移動應用的交互設計規律。神奇數字 7 加減 2 法則同樣適用,螞蟻金服的品類區的核心功能模塊的設計,懸浮卡片上只顯示 8 個 功能圖標,如下圖所示。
6. 同一類功能和同一層級的元素出現時,數目一般控制在 5-9 個,如下圖所示。
7. 如果超過 5 個,可以右滑選擇你想要的產品功能,如下邊的右圖所示。
8. 神奇數字 7±2 法則,運營廣告圖設計要抓住重點去設計,更好的引導用戶去瀏覽內容和產品的交互體驗。
如下圖所示,數字符號標注-突出重點,主圖、主題、操作按鈕、主色氛圍等,我們會作出優秀的運營設計。
根據格式塔的心理學思考 :當對象離得太近的時候,人的意識會認為界面元素之間是相關的。
在交互設計中,界面設計中的接近原則是對相似信息及功能類別進行內容分組和布局設計的優化設計。
接近法則在界面設計中的作用,能夠直接影響到用戶與產品界面之間的視覺互動,來引導用戶的瀏覽及點擊交互行為。因此,相似的內容和功能模塊應該彼此靠近,而關聯性較弱的內容應該保持大一點的間距。
接近法則運用的目的:在視覺上通過組與組的區分,來劃分功能模塊之間的關聯性,讓界面變得更加清晰,同時幫助用戶在瀏覽頁面時,能夠清楚的看到到各個內容模塊之間的關聯性,就是視覺信息的劃分和分組展示。
如下圖所示。同一類的功能可分為一組,組內使用淺灰色的分割線來表達。而關聯性弱的功能模塊,組內的可以用淺灰色的分割面表達,拉開組與組之間的距離,做好視覺信息的劃分效果。
a. “復制粘貼之父” Larry Tesler (1945-2020) 說過,“任何事物都具有其固有的復雜性,無法簡化”。
引入第三方登錄,減少注冊賬號的復雜步驟,節約用戶登錄或注冊這一流程上所耗費的步驟和時間。
復雜性守恒定律,認為每一個產品設計的過程中,都有其固有的復雜性,存在著一個臨界點,超過了這個點產品設計的過程就不能再簡化了,你只能將固有的復雜性從一個地方轉移到另外一個地方。
b. 以用戶為中心的產品設計,交互設計應盡量簡化用戶層面上的交互設計的過程。比如:頂部導航欄的更多圖標,就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中。如下圖所示。
a. 防錯原則,認為大部分的意外都是由產品設計上的疏忽,而不是人為的操作疏忽。所以我們可以通過改變產品
體驗設計把過失率降到。
我們在設計過程中,要從用戶維度出發,做設計前思考用戶的使用場景,預測到他們有可能發生的誤操作狀態,
做到操作前給用戶的溫馨提示、操作中的實時告知、操作后給用戶的及時反饋。
b. 防錯原則是著名的品質管理專家新鄉重夫提出來的。原則最初是用于工業管理,在交互設計中也可以使用。
比如圖 1,今日幸運星主題,分享給好友幫忙砍價。在沒有滿足條件時,通過彈窗來提示用戶去邀請好友,以此
來完成產品設計的任務。
比如圖 2,請輸入驗證碼的彈窗,驗證碼錯誤,您還可以重復 3 次,只有信息都輸入正確時,用戶才能完成的這個界面任務,如下圖所示。
簡單有效原理,被稱為“如無必要,勿增實體”(Entities should not be multiplied unnecessarily),即如有兩個
功能相等的設計,那么選擇最簡單的、視覺干擾比較少的設計。在其他條件相同的情況下,要求得越少的那個就
越好,越有價值。
a. 合并多余流程,點擊極速支付,支付成功彈窗提示。
b. 高頻率使用的產品界面,保持清爽的設計感。
c. 優先展示核心功能,減少點擊次數。如下圖所示。
圖 1,界面中清晰的品牌色的底部操作按鈕,可以明確的引導用戶去選擇優質的理財產品。
圖 2 ,摩拜單車首頁,用戶最關注的功能是掃碼開鎖的核心功能,方便用戶直接操作,提高交互效率。
d. 蘋果官方網站的簡約設計做的很棒。蘋果公司用一種很和品質感的設計提供了足夠多的內容,網站的文案,交互和圖片都比較集中展示,網頁設計沒有放一些使用戶分心的廣告和不重要的內容。如下圖所示。
總結:
1. 在產品設計領域,有很多經過時間檢驗過的定律,可以作為產品設計的指導原理。作為交互設計之父的
阿蘭·庫珀,他最為人熟知的就是這句話 :“ 除非有更好的選擇,否則就遵從標準 ”。
2. 交互設計的定律,能夠幫助產品設計師對界面上的各種視覺元素進行合理思考,從而發現一些用戶使用場景中的可用性問題。從產品設計的維度思考看,我們來改善產品設計的操作效率和用戶的滿意度。設計服務于產品、設計服務于商業。
a. 什么是用戶體驗地圖 ?
定義:用戶體驗地圖,是一種梳理產品體驗問題的設計工具。展示的就是用戶在使用一款產品和設計服務的過程中,每一個階段的體驗、用戶對產品直觀的心理感受。將用戶的所做、所思都展現出來,便于團隊設計師全面思考產品帶給用戶的體驗,挖掘設計的優化點。例如,你去三亞去度假旅游,用戶體驗地圖就是用圖形的形式,可視化的表達,將你在三亞的一天活動情況記錄下來,其中包含你這段時間去過的旅游景點,以及在每個旅游景點的用戶
體驗感受。
思考用戶體驗地圖,適合在產品設計的那幾個階段繪制?
1. 原型制作前,設計師從直觀感覺的角度看,我們要了解自己的產品為用戶提供了什么功能、交互體驗,同時協助我們的產品設計團隊,做好產品功能的體驗設計。
2. 產品上線時,我們可以結合用戶調研、可用性測試等方法論。以此獲取用戶的美好體驗和真實的心理感受,來幫助我們公司的產品設計發現問題,以此作為產品設計的迭代優化的方向或者尋找新的創意設計機會點來解決問題。
a. 我們做好用戶體驗地圖的兩個優點:
1. 產品設計的體驗目標是讓用戶用起來,感覺到產品具有可用性、好用性、易用性,那么產品設計也應該從用戶
視角出發,用戶從產品那個觸點點擊進來,怎樣點擊交互下一步,怎樣保持對產品的活躍度,如何傳播分享;定位用戶使用產品過程中的體驗痛點。
2. 真正思考用戶需要什么功能,讓更多用戶參與進來,換位思考我們產品帶給用戶具體什么感受,全局性的思維去思考產品的體驗,與團隊成員、產品交互設計、開發部門和項目負責人等達成一致性的共識、有效溝通和協作,一起制作出解決方案。
b. 思考用戶體驗地圖的價值點
1. 基于用戶使用場景的設計是基于用戶達到某個體驗設計目標的一系列場景的分析與產品思考,理解用戶在每一個使用場景下的痛點及需求分析,同時結合用戶的上一場景,思考用戶下一步的體驗目標,我們可以通過做好體驗設計,來引起用戶情感上的共鳴。
2. 使用用戶體驗地圖,團隊成員可以從用戶的痛點出發,讓產品設計師、團隊成員全面的思考產品體驗,從用戶
體驗地圖中來挖掘產品設計的機會點。
以途牛用戶體驗地圖為例,如下圖所示。
我們運用用戶體驗地圖時,作為設計師或參與者需要切換成用戶視角、第一次使用者的角度去思考,去發現產品體驗上的問題,同時解決產品體驗中遇到的問題,提升用戶體驗的滿意度。
制作用戶體驗地圖時,四個關鍵點的思考:
1. 明確我們的核心用戶人群等; 2. 研究用戶的使用場景。3. 做好用戶的訪談和調研。4. 制作好用戶體驗地圖。
制作用戶體驗地圖的具體步驟如下:
1. 前期準備工作:
我們可以先做用戶的深度訪談、用戶對產品反饋、產品設計的走查和交互的走查、產品的數據分析、同行業的競品分析、訪談用戶等方法,獲取大量真實可靠的資料。
我們就會認識到:思考用戶在使用產品設計的過程中產生的行為數據、用戶體驗和用戶內心的真實感受。我們也可以思考產品的設計思路、產品的核心用戶人群等,以此作為我們制作用戶體驗地圖過程中的重要參考和依據,知道用戶到底需要什么功能和流程,來幫助用戶解決問題。
2. 用戶調研的方法如下:
我們可以先采訪用戶或者做好調研和記錄,將我們的采訪或調研記錄的內容做好整理歸檔,團隊成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實的想法。
3. 我們要梳理好關鍵產品設計任務的流程,就是用戶在使用產品功能的過程中,會面臨很多不同的場景或復雜的設計流程和體驗設計的目標。然后我們再撰寫用戶完成每個關鍵任務的時間:比如,對于我們日常所見的查找功能而言,用戶希望更快的查找到自己想要的產品功能和體驗目標。
我們再寫出關鍵產品任務的用戶操作產品時的行為:
指的是用戶當下在做什么,通常是用 “我+動詞” 來表示,例如:我購買基金產品。
4. 我們再確定好關鍵節點,寫出用戶調研過程中的痛點思考、用戶的滿意度思考,放在對應的行為點的下方。
我們思考和分析用戶的痛點、用戶滿意度的調查,判斷用戶的情緒變化。分析結束后,需要將以上三類信息都寫下來,方便后續整理分組。把行為按照達成用戶目標的邏輯順序整理出來,并做好歸類。例如:美團 App 的例子中分為 4 個階段,如下圖所示。
5. 我們來判斷:用戶在每個階段,體驗產品設計任務中所產生的情緒高低的不同值,并把它們連成一條線,這樣就形成用戶的情緒曲線。
6. 也就是說,制作用戶體驗地圖過程中,我們要思考用戶每個行為背后的痛點和產品設計上的機會點。
最后,制作好一張實用性很強的用戶體驗地圖,以此來挖掘用戶的痛點問題,我們可以更好的去挖掘產品體驗設計中的設計機會點,如下圖所示。
網上的案例欣賞,出境購物的用戶體驗地圖,如下圖所示。
總結:
1. 我們制作用戶體驗地圖,注重的是團隊成員的洞察分析能力和對產品的思考能力,我們要用心思考產品設計中的核心用戶的痛點和產品設計中的機會點,我們要輸出一套符合用戶價值、商業價值和和產品功能價值的體驗設計方案,以此解決用戶的體驗問題,把產品做的更好,讓用戶使用產品過程中,產生愉悅感。
2. 制作用戶體驗地圖的價值是,不僅能使我們以“用戶視角”的維度去思考,引導團隊和設計師去思考問題并做好
產品的體驗設計。同時我們也可運用“全局性的設計思維” 去思考產品體驗設計,去發現產品問題并解決產品設計中遇到的體驗問題,讓我們產品帶給用戶的是:產品設計的可用性、好用性和易用性的價值。
文章來源:tob.design 作者:峻溪POINTV
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務