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