交互設(shè)計(jì)的基礎(chǔ)設(shè)計(jì)和理論總結(jié)(下)

交互設(shè)計(jì)師的重要價(jià)值在于使產(chǎn)品變得易用且人性化。這就需要我們深入學(xué)習(xí)交互設(shè)計(jì)的基本理論知識(shí),幫助我們拆分問(wèn)題,提高效率,創(chuàng)造出更好的設(shè)計(jì)。
前段時(shí)間我們發(fā)布了文章《交互設(shè)計(jì)方法和理論(上)》,反響熱烈,為了滿足廣大粉絲求知若渴的需求,我們馬不停蹄地總結(jié)了下篇,在開(kāi)始正文之前,我們先來(lái)光速回顧一下上篇講的方法和理論:
一、需求挖掘理論
二、需求分級(jí)理論-通用四象限法
三、需求分級(jí)理論-KANO模型
四、需求分級(jí)理論-馬斯洛需求層次理論
五、產(chǎn)品框架設(shè)計(jì)理論-用戶(hù)體驗(yàn)五要素
六、產(chǎn)品框架設(shè)計(jì)理論-7(±2)信息塊效應(yīng)
七、產(chǎn)品框架設(shè)計(jì)理論-卡片分類(lèi)法
八、界面設(shè)計(jì)理論-格式塔理論
如果你忘記了具體內(nèi)容,可在公眾號(hào)對(duì)話框回復(fù)“交互設(shè)計(jì)”即可溫習(xí)上篇哦~話不多說(shuō),我們馬上進(jìn)入今天的分享:
九、80/20原則
任何一個(gè)大型的系統(tǒng)中,大約80%的效用是由系統(tǒng)中20%的變量產(chǎn)生的。
“用戶(hù)80%的時(shí)間花在了20%的功能上?!?/p>
80/20法則又被稱(chēng)為二八定律、帕累托法則(定律),也叫最省力的法則、不平衡原則。最初是19世紀(jì)末20世紀(jì)初意大利經(jīng)濟(jì)學(xué)家巴萊多發(fā)現(xiàn)的。他認(rèn)為,在任何一組東西中,最重要的只占其中一小部分,約20%,其余80%盡管是多數(shù),卻是次要的。80/20法則被廣泛應(yīng)用于社會(huì)學(xué)、經(jīng)濟(jì)、用戶(hù)體驗(yàn)設(shè)計(jì)、企業(yè)管理等。
8020法則有助于資源整合,可以幫助設(shè)計(jì)師最大化提升用戶(hù)體驗(yàn)質(zhì)量。比如:用戶(hù)用80%的時(shí)間集中于產(chǎn)品20%的功能時(shí),那設(shè)計(jì)師應(yīng)該集中力量對(duì)那20%進(jìn)行優(yōu)化,剩余80%應(yīng)該重新評(píng)估,確認(rèn)他們的價(jià)值。設(shè)計(jì)師可以利用此法則,對(duì)設(shè)計(jì)中的所有元素進(jìn)行重新評(píng)估,劃定重新設(shè)計(jì)與優(yōu)化的范圍,有效決定優(yōu)勢(shì)資源進(jìn)行再設(shè)計(jì)。80/20法則是不受人為直接控制的,它是自然而然形成的。
80/20 法則的核心在于分清主次,更有效地調(diào)配和整合資源。
- 占據(jù)產(chǎn)品中80%使用量的是20%的功能;
- 80%的關(guān)注度花費(fèi)在頁(yè)面的20%上;
- 80%的進(jìn)步,是來(lái)自于20%關(guān)鍵性的努力;
- 80%的產(chǎn)品誤差,源自于20%的組件;
- 企業(yè)80%的收益,來(lái)自于20%的產(chǎn)品。
有些情況下,確定至關(guān)重要的20%的構(gòu)成是容易的。通過(guò)網(wǎng)頁(yè)數(shù)據(jù)統(tǒng)計(jì)、表單提交和session cookies可以追蹤到用戶(hù)的使用行為,幫助我們了解用戶(hù)與哪些UI區(qū)域有最多的交互。
80/20法則在用戶(hù)體驗(yàn)設(shè)計(jì)中的應(yīng)用:
案例一:找出其中20%的關(guān)鍵功能做成工具條展示在主界面,其余隱藏
案例二:QQ同步助手需求場(chǎng)景分析表(圖片來(lái)自于《騰訊產(chǎn)品法》)
《騰訊產(chǎn)品法》中例舉出QQ同步助手需求場(chǎng)景分析案例(如上圖所示),對(duì)于工具類(lèi)的產(chǎn)品來(lái)說(shuō),產(chǎn)品要解決的「問(wèn)題」很清楚,用戶(hù)在人口學(xué)、社會(huì)學(xué)方面的因素,如性別、年齡等對(duì)產(chǎn)品影響不大,所以可以選擇按「使用場(chǎng)景」來(lái)劃分用戶(hù)模型。QQ同步助手中A類(lèi)換機(jī)用戶(hù)和B類(lèi)備份防丟失用戶(hù)的用戶(hù)量占比分別是90%和80%,利用80%的時(shí)間集中該產(chǎn)品20%的主要功能時(shí),那么我們的設(shè)計(jì)就要集中發(fā)力在這些關(guān)鍵功能上面,所以此兩類(lèi)功能也被定義為了產(chǎn)品核心動(dòng)線。
案例三:在傳統(tǒng)的網(wǎng)站和網(wǎng)絡(luò)應(yīng)用中,使用頻率和交互頻率最高的區(qū)域被歸入20%部分。當(dāng)設(shè)計(jì)移動(dòng)界面時(shí),只關(guān)注那20%的部分。
相比于傳統(tǒng)網(wǎng)站中所提供的豐富功能,即使此網(wǎng)站的移動(dòng)版包含20%最常用的功能,那么就可以說(shuō)這個(gè)移動(dòng)版本具有了大多數(shù)重要的功能。
上圖是一個(gè)網(wǎng)站的全貌,網(wǎng)站上有一些引導(dǎo)用戶(hù)行為的區(qū)域。這個(gè)網(wǎng)站設(shè)計(jì)絕對(duì)不是全世界最差的,但總的來(lái)說(shuō)不是非常的集中,并且有太多的選擇。
對(duì)比下面的移動(dòng)版頁(yè)面:
相比之下,移動(dòng)版界面非常簡(jiǎn)潔,引導(dǎo)用戶(hù)第一眼找到最重要的信息,而不是讓用戶(hù)感覺(jué)不知所措。
緊湊的移動(dòng)網(wǎng)頁(yè)應(yīng)用是一個(gè)非常好的范例。設(shè)計(jì)師將大部分的精力投入到項(xiàng)目最重要的方面。
在理解了80/20法則后,我們可以將此法則廣泛的適用于各個(gè)場(chǎng)景中,如下:
- 分析數(shù)據(jù),確定用戶(hù)最經(jīng)常使用的那20%的功能。
- 排定優(yōu)先級(jí)。關(guān)注網(wǎng)站或app中最核心功能,并不斷強(qiáng)化。
- 統(tǒng)計(jì)出歸入20%的最常使用的功能,在此基礎(chǔ)上簡(jiǎn)化設(shè)計(jì)和布局。
- 精簡(jiǎn)80%非關(guān)鍵性功能,大膽做減法。
此外,要注意的是,當(dāng)優(yōu)化20%時(shí)創(chuàng)造了一個(gè)新功能,可能就培養(yǎng)了一個(gè)新的行為習(xí)慣,此時(shí)要改變這些行為習(xí)慣,面臨的阻力就會(huì)比較大。
十、奧卡姆剃刀原理
奧卡姆原理也被稱(chēng)為“簡(jiǎn)單有效原理”,由14世紀(jì)哲學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉(William of Occam,約1285年至1349年)提出。通俗稱(chēng)為“如無(wú)必要,勿增實(shí)體。”也就是說(shuō):如果有兩個(gè)功能相等的設(shè)計(jì),那么選擇最簡(jiǎn)單的那個(gè)。奧卡姆剃刀原理并不是只肯定簡(jiǎn)單的設(shè)計(jì)就是好的,也不是否定一切復(fù)雜含蓄的設(shè)計(jì)就是不好的。核心是強(qiáng)調(diào)“簡(jiǎn)單”設(shè)計(jì)比“復(fù)雜”設(shè)計(jì)更容易讓人理解,傳達(dá)效果更好,可以以小博大。
以下案例節(jié)選自《交互設(shè)計(jì):若無(wú)必要,勿增實(shí)體》和《交互設(shè)計(jì)原理之奧卡姆剃刀原理》)
案例一:
在Amazon Prime的案例中,左邊的方案用邊框區(qū)分每個(gè)項(xiàng)目卡,并在項(xiàng)目卡之間加了水平分割線。邊框并沒(méi)有帶來(lái)任何附加的價(jià)值,反而在視覺(jué)上增加了分割感,破壞了簡(jiǎn)潔的界面語(yǔ)言。相比之下,一條簡(jiǎn)單的分割線就能完成區(qū)分模塊的作用,并且還增加了更多的空間去羅列更多的項(xiàng)目。
案列二:
在日常的設(shè)計(jì)中,經(jīng)常會(huì)有產(chǎn)品經(jīng)理這樣說(shuō),“你看這邊這么空,我們不如放點(diǎn)引導(dǎo)性的圖文唄”。這時(shí)設(shè)計(jì)師估計(jì)要抓狂了,這簡(jiǎn)單的流程為什么要搞這么復(fù)雜。
分析如下,在增加流程以外的內(nèi)容,勢(shì)必會(huì)對(duì)用戶(hù)操作進(jìn)行干擾,降低表單填寫(xiě)效率,并且可能會(huì)導(dǎo)致無(wú)法預(yù)期的后果(用戶(hù)關(guān)閉頁(yè)面)。
在功能性頁(yè)面設(shè)計(jì)過(guò)程中,我們需要知道在這個(gè)頁(yè)面用戶(hù)行為是什么?流程內(nèi)的引導(dǎo)盡量弱化于主流程。流程外的內(nèi)容,沒(méi)有必要不要增加。這一點(diǎn)其實(shí)很重要,簡(jiǎn)單的頁(yè)面讓用戶(hù)一眼就能找到他們自己感興趣的內(nèi)容,讓他們看起來(lái)更舒服,更能專(zhuān)心于你要表達(dá)的內(nèi)容上。而復(fù)雜的頁(yè)面會(huì)讓訪客一時(shí)找不到信息的重點(diǎn),也分散了訪客的注意力。
遵從奧卡姆剃刀原則,科學(xué)設(shè)計(jì)簡(jiǎn)單頁(yè)面的方法:
(1)只放置必要的東西
簡(jiǎn)潔頁(yè)面最重要的一個(gè)方面是只展示有作用的東西,其他的都沒(méi)有。這并不意味著你不能提供給用戶(hù)很多的信息,你可以用“更多信息”的鏈接來(lái)實(shí)現(xiàn)這些。
(2)減少點(diǎn)擊次數(shù)
讓你的用戶(hù)通過(guò)很少的點(diǎn)擊就能找到他們想要的東西,不要讓他們找一個(gè)內(nèi)容找得很累。
(3)“外婆”規(guī)則
如果你的外婆(其他老點(diǎn)的人)也能輕松的使用你的頁(yè)面,你就成功了。
(4)減少段落的個(gè)數(shù)
每當(dāng)你的網(wǎng)頁(yè)增加一段,頁(yè)面中主要的內(nèi)容就會(huì)被擠到一個(gè)更小的空間。那些段落并沒(méi)有起到什么好的作用,而是讓顧客們知道更多他們不想了解的東西。
(5)給予更少的選項(xiàng)
用戶(hù)希望在瀏覽網(wǎng)頁(yè)的時(shí)候思考的少一點(diǎn)。我們?cè)谡故緝?nèi)容的時(shí)候要努力減少用戶(hù)的思維負(fù)擔(dān),這樣就會(huì)使瀏覽者使用更順暢,心態(tài)更平和。
十一、菲茨定律 / Fitts’ Law
從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定,到目標(biāo)的距離和目標(biāo)的大?。ㄉ蠄D中的D與W),用數(shù)學(xué)公式表達(dá)為時(shí)間T = a + b log2(D/W+1)。
T=移動(dòng)設(shè)備所需時(shí)長(zhǎng);a,b是經(jīng)驗(yàn)常量;D=設(shè)備起始位置和目標(biāo)位置的距離;W=目標(biāo)的寬度大小。
菲茨定律的啟示:
- 按鈕等可點(diǎn)擊對(duì)象需要合理的大小尺寸。
- 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,
- 出現(xiàn)在用戶(hù)正在操作的對(duì)象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開(kāi)得更快,因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。
- ?要讓不常用或危險(xiǎn)的UI元素難以被點(diǎn)擊。
案例一:Mac OS X默認(rèn)將底欄(Dock)放到了屏幕的最下方;這樣的話底欄就變得“無(wú)限可選中”
案列二:
用戶(hù)拖拽想要?jiǎng)h除的應(yīng)用到頂部刪除,頂部W無(wú)窮大,增加了用戶(hù)操作效率和精準(zhǔn)度。
十二、席克定律
核心就是,一個(gè)人面臨的選擇越多,做出決策需要的時(shí)間就越多。
所以在設(shè)計(jì)中,我們要思考的是,怎樣最小最優(yōu)化設(shè)計(jì)選項(xiàng),太多的選項(xiàng)會(huì)延長(zhǎng)用戶(hù)做決策的時(shí)候,甚至對(duì)一些“選擇困難戶(hù)”來(lái)說(shuō),會(huì)直接或簡(jiǎn)介導(dǎo)致他們?nèi)蝿?wù)失敗。席克定律揭示了,頁(yè)面中的選項(xiàng)是如何影響用戶(hù)決策的速度和易用性。定義的范圍很廣泛,因?yàn)椴皇菧y(cè)量物理反應(yīng)或技術(shù)扮演的角色,而是測(cè)量決策的心理過(guò)程。
在設(shè)計(jì)過(guò)程中,可將席克定律作為重要的參考設(shè)計(jì)原則。當(dāng)開(kāi)始畫(huà)線框圖時(shí),看看功能樹(shù)“鏈接1、鏈接2、鏈接3…”,然后看下在流程中用戶(hù)需要做的所有決策。(最好是解決掉這些決策)
如果原型填滿,不要害怕多次使用操作召喚按鈕。當(dāng)設(shè)計(jì)師組織選項(xiàng)、拉開(kāi)選項(xiàng)間距、改變背景顏色、或者使用紋理時(shí),正在突出設(shè)計(jì)的某個(gè)選項(xiàng)的同時(shí)其他的選項(xiàng)已經(jīng)被弱化。這就是為什么設(shè)計(jì)不僅僅是修飾頁(yè)面或是突出某個(gè)按鈕。我們必須聰明的使用設(shè)計(jì)所帶來(lái)的影響力,這樣才能?chē)?yán)格限制用戶(hù)需承擔(dān)的決策數(shù)量。
案列:Foursquare上的探索功能由無(wú)限的可能性變成了一個(gè)簡(jiǎn)單的設(shè)置選項(xiàng)。
Foursquare的探索功能簡(jiǎn)單的提供各種篩選項(xiàng),減少手動(dòng)輸入。來(lái)訪者被鼓勵(lì)使用簡(jiǎn)單的服務(wù):在輸入框中輸入想要的內(nèi)容,然后點(diǎn)擊屏幕上唯一的按鈕。當(dāng)然,設(shè)計(jì)的核心是Foursquare知道他的用戶(hù)對(duì)他們當(dāng)前位置的周?chē)挛锔信d趣,因?yàn)檫@項(xiàng)服務(wù)就是關(guān)于分享和探索用戶(hù)的周?chē)h(huán)境。所以,默認(rèn)的搜索當(dāng)前用戶(hù)所在區(qū)域是個(gè)安全的賭注。其次,超過(guò)十億的數(shù)據(jù)點(diǎn)起到很到的作用。用這么大的一組信息,F(xiàn)oursquare在后臺(tái)可以做很多事情來(lái)猜測(cè)用戶(hù)真正對(duì)什么感興趣。
總結(jié)
交互設(shè)計(jì)師的重要價(jià)值在于使產(chǎn)品變得易用且人性化。這就需要我們深入學(xué)習(xí)交互設(shè)計(jì)的基本理論知識(shí),幫助我們拆分問(wèn)題,提高效率,創(chuàng)造出更好的設(shè)計(jì)。
相關(guān)閱讀
來(lái)源:喜馬拉雅XUED(ID:ximalaya_XUED)
本文由 @喜馬拉雅XUED?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!