2018-8-17 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
《名偵探柯南》中總是提到福爾摩斯的一段話(huà):「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.(排除一切不可能的,剩下的即使再不可能,那也是真相。)」這句話(huà)用干擾效應(yīng)來(lái)解釋最好不過(guò),本期我們來(lái)聊聊。
想看更多設(shè)計(jì)法則,這個(gè)專(zhuān)題里全都有:設(shè)計(jì)法則專(zhuān)題
干擾效應(yīng):一種現(xiàn)象,同時(shí)思考兩件或兩件以上的事情時(shí),思考的過(guò)程會(huì)變得比較慢,也不準(zhǔn)確。
有兩種或兩種以上的知覺(jué)或認(rèn)知過(guò)程發(fā)生沖突時(shí),就會(huì)產(chǎn)生干擾效應(yīng)。
人們的知覺(jué)和認(rèn)知的不同與心智模型有關(guān),這些模式會(huì)獨(dú)立分析、處理收到的相關(guān)信息,處理后會(huì)傳送到工作記憶區(qū),并作出詮釋。當(dāng)輸出資料一致,詮釋過(guò)程會(huì)又快又好。當(dāng)輸出資料不一致,就會(huì)產(chǎn)生干擾,需要一些其他的處理,以便更好地解決。解決這些問(wèn)題需要浪費(fèi)很多時(shí)間,對(duì)性能也會(huì)產(chǎn)生不好的影響。
1. 斯特魯普干擾
斯特魯普干擾(Stroop Interference):刺激物不相干的一面引發(fā)了思考過(guò)程,因而干擾了刺激物相關(guān)方面的思考。
圖標(biāo)協(xié)同文字可以準(zhǔn)確的向用戶(hù)傳遞所要表達(dá)的內(nèi)容,二手在常用的 App 中截出了一些圖標(biāo),卻發(fā)現(xiàn)現(xiàn)在很多的圖標(biāo)在信息傳達(dá)方面有所欠缺。
舉四個(gè)例子:
下面這組圖標(biāo),「地方菜系、美食、晚餐、大牌簡(jiǎn)餐」幾個(gè)圖標(biāo)沒(méi)有表達(dá)出所要傳達(dá)的信息,還有幾個(gè)圖標(biāo)要借助文字才能表達(dá)出其含義。即使圖標(biāo)設(shè)計(jì)的非常精美,但是圖標(biāo)功能卻存在缺失,而且這幾個(gè)圖標(biāo)不能刺激用戶(hù)對(duì)信息的理解,反倒是讓用戶(hù)更加迷惑。設(shè)計(jì)師也注意到了這個(gè)情況,所以最近改版后,信息傳達(dá)變的更加直接,減少了干擾。
接下來(lái)的這組圖標(biāo)也存在同樣的問(wèn)題,這組圖標(biāo)想借助圖標(biāo)上產(chǎn)品本身的含義來(lái)傳達(dá)給用戶(hù)要表達(dá)的信息,但是這需要用戶(hù)對(duì)這些產(chǎn)品本身的定位非常明確,如果不明確的話(huà)只能干擾用戶(hù)的行為,例如,用戶(hù)需要知道「呂」是個(gè)韓國(guó)洗發(fā)水之后才能拐彎抹角的聯(lián)想到「全球超市」,再例如:中間「輕奢」圖標(biāo),用的是勞力士綠水鬼,一款70000+還要靠等才能買(mǎi)到的奢華手表,二手認(rèn)為跟輕奢的定義有矛盾,除非這并不是勞力士。
米家這套圖標(biāo)二手認(rèn)為可以準(zhǔn)確傳達(dá)所描述的信息,因?yàn)槊准矣蟹N類(lèi)繁多的 loT 產(chǎn)品,有時(shí)候一款產(chǎn)品更是分為不同的版本,如果用戶(hù)只是根據(jù)名稱(chēng)選擇的話(huà)不僅繁瑣而且十分耗時(shí),所以在選擇產(chǎn)品時(shí),米家把所有產(chǎn)品外形準(zhǔn)確刻畫(huà)成圖標(biāo),用戶(hù)可以先根據(jù)自己產(chǎn)品的外形大致選擇型號(hào),再根據(jù)文字提示準(zhǔn)確的選擇自己產(chǎn)品的版本。
△ 米家App圖標(biāo)
滴滴這套圖標(biāo)表達(dá)也很準(zhǔn)確,不同的服務(wù)通過(guò)不同的圖標(biāo)可以準(zhǔn)確傳達(dá)。
△ 滴滴圖標(biāo)
2. 加納干擾
加納干擾(Garner Interference):刺激物一個(gè)無(wú)關(guān)的變化,引發(fā)了思考過(guò)程,干擾到跟刺激物相關(guān)的思考過(guò)程。
舉個(gè)例子:如下圖,指出單獨(dú)一排的形狀,比指出兩排其中一排的形狀要簡(jiǎn)單。兩排形狀緊靠在一起,激發(fā)了想說(shuō)出旁邊形狀的思考程序,造成干擾。
根據(jù)上面這個(gè)案例,二手聯(lián)想到了「?jìng)€(gè)人中心」頁(yè)面,大部分「?jìng)€(gè)人中心」頁(yè)面都選擇了豎排列表布局。列表布局就是以列表的形式展示具體內(nèi)容,并且能夠根據(jù)數(shù)據(jù)的長(zhǎng)度自適應(yīng)顯示,Material Design 建議列表是「可快速掃描」,適合顯示類(lèi)似的重復(fù)的內(nèi)容。列表布局也是最快速的 app 布局方式。這種排列在某方面上就是降低了干擾。相比于列表布局,宮格導(dǎo)航是將主要入口全部聚合在頁(yè)面,讓用戶(hù)做出選擇。這樣的組織方式無(wú)法讓用戶(hù)在第一時(shí)間看到內(nèi)容,選擇壓力較大,采用這種導(dǎo)航的應(yīng)用已經(jīng)越來(lái)越少,往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。
△ 列表布局和宮格導(dǎo)航
3. 前向干擾
前向干擾(Proactive Interference):現(xiàn)存記憶干擾了學(xué)習(xí)。
舉個(gè)例子:手淘的最近改版中,店鋪首頁(yè)頂部導(dǎo)航和底部自定義菜單結(jié)構(gòu)化調(diào)整,但是有一個(gè)細(xì)節(jié)的變化讓二手不斷的犯錯(cuò)——返回按鈕改成了關(guān)閉按鈕,二手習(xí)慣點(diǎn)擊左上角返回按鈕來(lái)返回上一級(jí)菜單,改版后依舊習(xí)慣點(diǎn)擊左上角,但是打開(kāi)的是店鋪印象,僅僅是圖標(biāo)左右位置簡(jiǎn)單的調(diào)換,已經(jīng)讓二手在使用的過(guò)程中挫敗感強(qiáng)烈。這就是現(xiàn)在的使用記憶已經(jīng)嚴(yán)重干擾了學(xué)習(xí)。所以產(chǎn)品在改版迭代的時(shí)候,盡量不要干擾用戶(hù)已經(jīng)熟悉的路徑或是破壞用戶(hù)使用習(xí)慣。
△ 手淘的店鋪首頁(yè)改版
4. 后向干擾
后向干擾(Retrosctive Interference):學(xué)習(xí)干擾了現(xiàn)存記憶。
這個(gè)正好跟上面相反,二手不斷培養(yǎng)現(xiàn)在的使用習(xí)慣,漸漸的就忘記了上一版的路徑。
要想預(yù)防干擾,就要避免輸出思考過(guò)程中相互沖突的設(shè)計(jì)。知覺(jué)的干擾效應(yīng),通常是因?yàn)樾畔⒌膫鬟_(dá)過(guò)程中有歧義,或是因?yàn)榘鸦ハ喔蓴_的元素結(jié)合在一起。要把干擾效應(yīng)降到,首先要求設(shè)計(jì)師用準(zhǔn)確的設(shè)計(jì)語(yǔ)言傳達(dá)信息,如果這樣還是無(wú)法讓用戶(hù)很好的理解,其次可以考慮利用文字或者引導(dǎo)來(lái)告知用戶(hù)。
藍(lán)藍(lán)設(shè)計(jì)( m.ssll180.com )是一家專(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ssll180.com