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