??硕?| 設(shè)計(jì)師需要知道的設(shè)計(jì)原則|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

2023-9-5    博博

一、??硕傻幕菊J(rèn)識(shí)

1.產(chǎn)生背景
1951年,英國(guó)心理學(xué)家威廉·埃德蒙·席克(William Edmund Hick)做了一個(gè)隨機(jī)開(kāi)燈的試驗(yàn),他以每5秒點(diǎn)亮10盞燈的方式測(cè)得反應(yīng)時(shí)間和選擇數(shù)量之間的對(duì)數(shù)關(guān)系;美國(guó)心理學(xué)家雷伊·海曼(Ray Hyman)也通過(guò)一定的實(shí)驗(yàn)確定的信息傳輸與反應(yīng)時(shí)間的關(guān)系,聲稱(chēng)這兩者的關(guān)系應(yīng)該呈線(xiàn)性。席克、海曼共同認(rèn)為,人們?cè)诙嘀剡x項(xiàng)的刺激之下做出選擇時(shí)、需花費(fèi)的時(shí)間就越長(zhǎng),并且隨著這種刺激的逐漸增大、所產(chǎn)生的阻礙就越大,還可能導(dǎo)致人們放棄選擇,后續(xù)便以他們兩人的名字將這種規(guī)律命名為「席克海曼定律」。直到如今也是一樣,在選項(xiàng)復(fù)雜度相等的情況下,無(wú)論是對(duì)數(shù)還是線(xiàn)性,選擇數(shù)量越多,我們就越難做出決定。

2.基本介紹
??硕墒且环N心理物理學(xué)定律,我們還可以將其稱(chēng)為“席克定律、西克定律、???海曼定律、??朔▌t”等,本文為方便介紹,將統(tǒng)一稱(chēng)為「??硕伞?。希克定律表明,用戶(hù)面臨選擇的數(shù)量越多、決策時(shí)間就越長(zhǎng),并隨著可選項(xiàng)的數(shù)量和復(fù)雜性而增加,運(yùn)用這一定律的唯一宗旨就是:減少刺激的數(shù)量并獲得更快的決策過(guò)程。該定律有一個(gè)數(shù)學(xué)公式,先由席克首次實(shí)驗(yàn)、然后由海曼進(jìn)行完善,即“RT=a+b log2(n)”。RT:反應(yīng)時(shí)間a:對(duì)信息的前期認(rèn)知和觀察時(shí)間(信息處理之前)b:對(duì)信息的處理時(shí)間log:某個(gè)數(shù)學(xué)符號(hào),不做特別理解n:信息的數(shù)量

3.生活中的應(yīng)用
??硕稍谖覀兩钪械氖褂秒S處可見(jiàn),如下圖的兩個(gè)遙控器,你更傾向于使用哪一個(gè)?毫無(wú)疑問(wèn),圖2不管是從視覺(jué)上、還是操作上都更簡(jiǎn)單,特別是老少用戶(hù),簡(jiǎn)單地教一下就能快速學(xué)會(huì)。至于圖1,有些圖標(biāo)、顏色、英文,很多年輕的用戶(hù)也不清楚到底是干什么的,要想搞清楚,則需要更多的時(shí)間成本、學(xué)習(xí)成本以及試錯(cuò)成本,這就是希克定律在遙控器上的作用,以減少選擇讓用戶(hù)更快決策。遙控器的這個(gè)案例雖然在交互設(shè)計(jì)四策略中也體現(xiàn)的淋漓盡致,但與希克定律并不沖突,讓用戶(hù)減少選擇的方式可以是刪除、組合,也可以是隱藏、轉(zhuǎn)移。

4.設(shè)計(jì)中的應(yīng)用
用戶(hù)在界面中看到的選項(xiàng)越多、信息量越大,就意味著需要花費(fèi)更多的時(shí)間與精力去識(shí)別和理解,直接延長(zhǎng)了用戶(hù)做決策的時(shí)間,在選擇困難較大的情況下,一旦用戶(hù)沒(méi)有足夠的精力或無(wú)法做出明確選擇(不愿動(dòng)腦)時(shí)可能直接放棄,導(dǎo)致任務(wù)失敗。當(dāng)信息/選項(xiàng)減無(wú)可減時(shí),也可以通過(guò)對(duì)其分類(lèi)分組、層級(jí)分布等方式提高用戶(hù)決策效率,只要選項(xiàng)與選項(xiàng)之間保持著一定的聯(lián)系,絲毫不會(huì)影響用戶(hù)識(shí)別與理解。

二、??硕稍谠O(shè)計(jì)中的作用

1.提高選擇效率
其實(shí)在很多頁(yè)面中都存在信息過(guò)剩的情況,對(duì)用戶(hù)來(lái)說(shuō),選擇太多就等于沒(méi)有選擇,用戶(hù)很可能會(huì)因?yàn)楠q豫不決,造成時(shí)間成本上升而導(dǎo)致放棄當(dāng)前任務(wù)。盡可能避免在用戶(hù)面前出現(xiàn)過(guò)多的選擇,根據(jù)信息權(quán)重刪除或隱藏多余選項(xiàng),只保留用戶(hù)所需。有“度”的刪減可保持內(nèi)容足夠簡(jiǎn)潔,提升用戶(hù)對(duì)信息的理解以及操作效率。

2.優(yōu)化版式布局
在設(shè)計(jì)過(guò)程中,如果沒(méi)有對(duì)功能層級(jí)進(jìn)行劃分,一股腦地將所有功能入口平鋪的話(huà),就需要用戶(hù)花費(fèi)大量的時(shí)間和精力來(lái)查找需要的功能,無(wú)疑是一場(chǎng)災(zāi)難。我們可以通過(guò)??硕蓙?lái)優(yōu)化界面功能布局,根據(jù)業(yè)務(wù)的重要性對(duì)功能入口進(jìn)行分類(lèi)組合,減少用戶(hù)的認(rèn)知及理解成本,以便快速達(dá)到目的。

3.提升用戶(hù)體驗(yàn)
通過(guò)減少選項(xiàng)以及對(duì)信息進(jìn)行層級(jí)劃分,不管是視覺(jué)瀏覽還是操作流程上,消耗的成本都會(huì)有所降低,用戶(hù)在使用過(guò)程中的心情則更加愉悅,用戶(hù)體驗(yàn)得到了很大程度的提升。

4.提高轉(zhuǎn)化率
用戶(hù)所做的選擇越少、消耗的成本就越小,好的使用體驗(yàn)讓用戶(hù)心情愉悅,短時(shí)間內(nèi)的流暢、愉悅操作都能讓任務(wù)變得更簡(jiǎn)單、更容易完成,還能降低用戶(hù)的付費(fèi)感知,間接性的提高了產(chǎn)品轉(zhuǎn)化率。

三、界面中的「希克定律」

1.減少選項(xiàng)、讓用戶(hù)更快選擇
對(duì)用戶(hù)來(lái)說(shuō),選項(xiàng)越多就越復(fù)雜,需要的決策時(shí)間就越長(zhǎng),尤其是用戶(hù)在絕大多數(shù)情況下所看到的頁(yè)面都存在信息過(guò)剩的情況,這時(shí)候,產(chǎn)品需解決的不是選項(xiàng)夠不夠的問(wèn)題,而是選項(xiàng)夠不夠好。當(dāng)存在大量選項(xiàng)時(shí),可適度減少選項(xiàng)的數(shù)量,不僅能降低用戶(hù)的思考時(shí)間,也提高了選項(xiàng)的質(zhì)量。iPhone用戶(hù)應(yīng)該比較清楚,蘋(píng)果始終在不遺余力的遵循希克定律,APP Store就是最好的例子,從改版前大量的推薦應(yīng)用堆積到改版后信息量的減少,選擇目標(biāo)瞬間清晰了很多,用戶(hù)體驗(yàn)得到了大幅度的提升

如果大量的選項(xiàng)無(wú)法減少,可將重要選項(xiàng)靠前,將其他的隱藏起來(lái),方便用戶(hù)決策及降低失誤操作的概率。例如騰訊視頻頂部分類(lèi)后面的更多圖標(biāo)、支付寶首頁(yè)金剛區(qū)的更多入口,點(diǎn)開(kāi)后就會(huì)發(fā)現(xiàn),里面隱藏了非常多的功能,這樣做能減少用戶(hù)認(rèn)知負(fù)荷,提高信息篩選的效率。

2.選項(xiàng)分類(lèi)、信息分層
這里最為典型的例子就是電商平臺(tái)的分類(lèi),它通過(guò)一級(jí)、二級(jí)、甚至三級(jí)分類(lèi)將商品所涉及到的類(lèi)型合理的控制在有效范圍內(nèi),這些選項(xiàng)被分類(lèi)/分組之后,關(guān)鍵信息得到強(qiáng)化,能輔助用戶(hù)快速作出決策。還有后面的二次篩選功能,幫助用戶(hù)進(jìn)一步縮小范圍,選擇效率明顯會(huì)更高。當(dāng)然,這不僅僅是依靠希克定律,還得結(jié)合運(yùn)營(yíng)需求、用戶(hù)數(shù)據(jù)等因素進(jìn)行合理化分類(lèi)。

另外,我們?cè)谶x擇地址時(shí),如果將所有城市一股腦平鋪在界面上,用戶(hù)想要選擇自身所需,則需要花費(fèi)大量的時(shí)間。對(duì)城市進(jìn)行了分類(lèi)分層,以及有了搜索歷史、熱門(mén)城市以及右側(cè)的首字母索引后,用戶(hù)就能通過(guò)不同維度快速找到想找的城市,選擇效率直線(xiàn)上升。

3.分步驟展示、逐步完成
存在較長(zhǎng)的表單頁(yè)面,能給用戶(hù)默認(rèn)值的就不要讓其選擇、能讓用戶(hù)選擇的就不要讓其輸入,每多給用戶(hù)一個(gè)操作,其時(shí)間成本和出錯(cuò)率都將會(huì)上升。當(dāng)表單內(nèi)容減無(wú)可減、輸入操作避無(wú)可避時(shí),盡量將信息整合分類(lèi)或分頁(yè)展示,引導(dǎo)用戶(hù)逐步操作,遵循一個(gè)頁(yè)面只做一件事的原則,協(xié)助用戶(hù)將注意力聚焦在當(dāng)前步驟中。面對(duì)長(zhǎng)長(zhǎng)的表單,用戶(hù)或多或少都有些消極情緒,產(chǎn)品要做的是通過(guò)視覺(jué)、操作感知來(lái)減少用戶(hù)的負(fù)面情緒,以此提升表單完成率。常見(jiàn)的如調(diào)查問(wèn)卷、信用卡申請(qǐng)等,它們并沒(méi)有將全部信息堆在用戶(hù)面前,而是進(jìn)行分步驟或分頁(yè)的形式,一次只做一件事,避免了其他信息帶來(lái)的干擾,讓用戶(hù)有種簡(jiǎn)單的感知錯(cuò)覺(jué),完成起來(lái)會(huì)更容易。

4.必要的多選項(xiàng)、展開(kāi)/隱藏
有時(shí)候,我們不得不面對(duì)較多的選項(xiàng),例如在線(xiàn)填寫(xiě)簡(jiǎn)歷、功能設(shè)置列表、商品的二次篩選或后臺(tái)管理系統(tǒng)的查找條件等,如此多的選項(xiàng)會(huì)給用戶(hù)帶去很大的心理壓力,這時(shí)設(shè)計(jì)師需要去思考如何減輕用戶(hù)的壓力,展開(kāi)/收起也許就是一個(gè)不錯(cuò)的解決方案。我們可以將所有選項(xiàng)進(jìn)行分類(lèi),用戶(hù)在操作當(dāng)前類(lèi)別時(shí),其他所有類(lèi)別暫時(shí)隱藏、并設(shè)定明確的可點(diǎn)擊圖標(biāo)提示用戶(hù)隨時(shí)可展開(kāi)對(duì)應(yīng)的內(nèi)容,間接的減少了選項(xiàng),降低干擾。

5.必須平鋪時(shí)、主次分明
當(dāng)設(shè)計(jì)師面對(duì)大量選項(xiàng)、卻又要必須平鋪在當(dāng)前頁(yè)面的需求時(shí),一定要做好選項(xiàng)的視覺(jué)權(quán)重區(qū)分。這種需求常見(jiàn)于首頁(yè)、功能頁(yè)、個(gè)人中心的圖標(biāo)入口,我們可以通過(guò)改變圖標(biāo)的大小、色彩(黑白/彩色)、類(lèi)型(線(xiàn)性/面性/質(zhì)感/3D)或添加微動(dòng)效進(jìn)行主/次權(quán)重之分,用戶(hù)操作起來(lái)就不會(huì)有太多的疑惑或顧慮。

6.不可操作項(xiàng)、鎖定/置灰
在特殊場(chǎng)景中,當(dāng)頁(yè)面存在不可刪除、不可隱藏、不可降權(quán)且不能讓用戶(hù)點(diǎn)擊的選項(xiàng)時(shí),與其在用戶(hù)操作之后提示不可操作,不如在用戶(hù)操作之前就將選項(xiàng)鎖定或置灰,明確告知不可點(diǎn)擊,間接縮減選項(xiàng),減少不必要的操作。

四、與交互四策略的完美結(jié)合

“合理刪除、分層組織、適時(shí)隱藏、巧妙轉(zhuǎn)移”,這一經(jīng)典理論出自于 Giles Colborne 著名的《交互設(shè)計(jì)四策略》一書(shū)。刪除、組織、隱藏、轉(zhuǎn)移每一種方式無(wú)疑都是在向用戶(hù)更好的展示信息,這個(gè)觀點(diǎn)也完美的詮釋了??硕?,那么他們到底是如何對(duì)應(yīng)的呢?

1.合理刪除(減少選項(xiàng))
??硕芍?,影響用戶(hù)決策最主要的原因就是選項(xiàng)數(shù)量,雖然「一個(gè)頁(yè)面只做一件事」受到諸多的限制與牽絆,但我們依然可以通過(guò)分清功能主次,刪除次要、突出主要選項(xiàng)來(lái)幫助用戶(hù)決策,增加效率。

2.分層組織(分類(lèi)/分層)
分類(lèi)是??硕芍泻芎玫囊环N表達(dá)方式,雖然選項(xiàng)并沒(méi)有實(shí)質(zhì)性的減少,但用戶(hù)可通過(guò)分類(lèi)避開(kāi)了很多不必要的選項(xiàng),不管是通過(guò)父子及級(jí)還是平級(jí),都做到了將大量選項(xiàng)明確區(qū)分,用戶(hù)需要深挖時(shí)總會(huì)有跡可循。Giles Colborne 說(shuō)過(guò)“不要用過(guò)于專(zhuān)業(yè)的標(biāo)準(zhǔn)進(jìn)行分類(lèi)”,用通俗易懂的組織方式更是促進(jìn)??硕杉涌煊脩?hù)決策效率的一種有效方式。

3.適時(shí)隱藏(展開(kāi)/隱藏)
與刪除不同的是,隱藏并沒(méi)有刪減選項(xiàng)的數(shù)量,只展示部分常用、高頻的選項(xiàng),去除其他信息的干擾,方便用戶(hù)快速做出決策,而將其他不常用、低頻選項(xiàng)隱藏起來(lái),在需要時(shí)系統(tǒng)自動(dòng)展示、或用戶(hù)手動(dòng)喚出。其實(shí),不管是交互四策略中的隱藏、還是??硕芍械碾[藏,其作用都是通過(guò)暫時(shí)性地減少信息數(shù)量來(lái)提升用戶(hù)操作效率。

4.巧妙轉(zhuǎn)移(分頁(yè)/分步)
面對(duì)本身就較為復(fù)雜的產(chǎn)品,頁(yè)面信息在無(wú)法刪除、組織、隱藏的情況下,且需要用戶(hù)無(wú)遺漏的去完成,使用交互四策略中的「轉(zhuǎn)移」或可解決這一難題,將整個(gè)任務(wù)拆分成多個(gè)步驟,讓用戶(hù)逐步完成。大部分信息的轉(zhuǎn)移,可避免不同步驟的信息相互干擾,認(rèn)知負(fù)荷得以減輕,這一策略與??硕煞植襟E、分頁(yè)面展示大有相似之處。

五、常見(jiàn)問(wèn)題處理

1.選項(xiàng)不要減到只剩一個(gè)
希克定律要做的是通過(guò)減少用戶(hù)做決定的時(shí)間,來(lái)提升轉(zhuǎn)化率以及用戶(hù)體驗(yàn),但不管在什么情況下,用戶(hù)都希望自己還擁有選擇的權(quán)利,如果設(shè)計(jì)師自作聰明的將選項(xiàng)減到只剩一個(gè),就相當(dāng)于告知用戶(hù)必須接受,那么用戶(hù)就有種被強(qiáng)制、綁架的感覺(jué),只會(huì)存在兩個(gè)結(jié)果:①被你的產(chǎn)品拿捏、②離開(kāi)你的產(chǎn)品,筆者相信第一種可能性的概率極低,畢竟同類(lèi)型的產(chǎn)品并不是只有你一家(壟斷除外)。如下圖的彈窗,用戶(hù)即便不愿意進(jìn)入任務(wù)流程,可別無(wú)選擇,只能進(jìn)入后再返回才能回到原位,這種做法無(wú)端增加用戶(hù)的操作成本,極易引起反感情緒。不管產(chǎn)品如何希望用戶(hù)轉(zhuǎn)化,切不可強(qiáng)制他們接受,需要給用戶(hù)留一條返回的“路”,即便不那么起眼,至少還有選擇的權(quán)利。

2.極端場(chǎng)景要克制使用
任何定律都有其自身的使用局限,所以也不要極度推崇希克定律而簡(jiǎn)化到抽象的地步。大部分情況下,??硕啥际怯迷诳山换ソ缑嬷械脑?,對(duì)于那些需要高度搜索、閱讀或?qū)W習(xí)刷題類(lèi)的功能并不適用,因?yàn)樵O(shè)計(jì)師只能決定信息呈現(xiàn)的視覺(jué)效果,并不能決定內(nèi)容的質(zhì)量、類(lèi)型與數(shù)量。例如,刷題類(lèi)應(yīng)用,面對(duì)海量的選擇題,??硕呻m然失去價(jià)值,但并不影響設(shè)計(jì)師結(jié)合其他方法論將界面設(shè)計(jì)的更好,總不能強(qiáng)行使用??硕?,將選擇題刪減到只剩兩個(gè)(變成判斷題)選項(xiàng)吧。

3.逆向使用-刻意增加操作成本
有時(shí)候,出于商業(yè)化的目的,同一個(gè)選項(xiàng)在二次操作時(shí),產(chǎn)品會(huì)刻意增加用戶(hù)操作成本,以降低選擇效率,看似希克定律的反向操作,卻一定程度地降低了用戶(hù)退出率,實(shí)則對(duì)產(chǎn)品有益。例如,在關(guān)注微信公眾號(hào)之前,非常醒目的關(guān)注按鈕觸手可及,可關(guān)注之后,弱化的幽靈按鈕及文案,很難一眼看出這就是取消關(guān)注入口,需要用戶(hù)花費(fèi)額外的時(shí)間去理解或試錯(cuò)方可取關(guān),這么做能降低公眾號(hào)粉絲的取關(guān)量。為公眾號(hào)留住粉絲,更是對(duì)內(nèi)容認(rèn)可的一種支持,后面的良性循環(huán)無(wú)需多講。

作者:大漠飛鷹CYSJ
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司UI咨詢(xún)、用戶(hù)體驗(yàn)公司軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔