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