讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:馮·雷斯托夫效應(yīng)、蔡格尼克記憶效應(yīng)

2019-5-10    資深UI設(shè)計(jì)者

馮·雷斯托夫效應(yīng) Von Restorff Effect

1. 簡(jiǎn)介說(shuō)明

理論表述

當(dāng)存在多個(gè)相似的物體時(shí),與眾不同的那個(gè)更容易被記住。

理論背景

馮·雷斯托夫效應(yīng)(Von Restorff Effect),也稱為隔離效應(yīng)(Isolation Effect)。1933 年,德國(guó)精神病學(xué)家、兒科醫(yī)生 Hedwig Von Restorff 在研究中發(fā)現(xiàn),對(duì)被測(cè)試者提供一系列相似的項(xiàng),而只有一項(xiàng)顯得特別、孤立、與眾不同的時(shí)候,這一項(xiàng)往往更容易被記住。

在此之后,對(duì)馮·雷斯托夫效應(yīng)的研究也有進(jìn)一步的進(jìn)展,比如從生理學(xué)上,大腦對(duì)特異點(diǎn)有著更加明顯的 ERP(事件相關(guān)電位),這或許可以解釋特異點(diǎn)更容易回憶的原因;再比如馮·雷斯托夫效應(yīng)與年齡有著密不可分的聯(lián)系,老年人對(duì)特異點(diǎn)的記憶就沒(méi)那么深刻。

不管如何,我們還是在頻繁地應(yīng)用著馮·雷斯托夫效應(yīng),并能夠看到它在視覺(jué)設(shè)計(jì)中卓著的效果。

2. 設(shè)計(jì)案例

馮·雷斯托夫效應(yīng)可以應(yīng)用的場(chǎng)景分成兩種:環(huán)境差異和經(jīng)驗(yàn)差異。環(huán)境差異是指在空間尺度上做出的差異(同一平面內(nèi)),而經(jīng)驗(yàn)差異是指在時(shí)間尺度上做出的差異(不同時(shí)間點(diǎn)的同一平面),我們來(lái)詳細(xì)聊一聊這兩個(gè)尺度。

環(huán)境差異──獲取視覺(jué)焦點(diǎn)

也有的文章中會(huì)表達(dá)為「背景差異」或「情景差異」,這不重要,我們只需要知道這個(gè)差異產(chǎn)生的原因:即在相似的周圍環(huán)境中出現(xiàn)差異。參考百度百科我們來(lái)進(jìn)行一個(gè)簡(jiǎn)單易懂的小實(shí)驗(yàn)。

案例1:環(huán)境差異小實(shí)驗(yàn)

請(qǐng)?jiān)噲D去記住上面那幾串字符串。好吧,我放棄了,但如果努力一下,我們就會(huì)發(fā)現(xiàn)最容易記住的是與周圍環(huán)境最不一樣的那個(gè)。第一行是數(shù)字「5」,第二行是星號(hào),第三行是紅色的字母「F」。

這就是環(huán)境差異所帶來(lái)的識(shí)別度與記憶度的提升,也是我們經(jīng)常能在 UI 設(shè)計(jì)中所看到的一種有效吸引用戶點(diǎn)擊的手段。

案例2:起點(diǎn)、大眾點(diǎn)評(píng)

比如起點(diǎn)希望用戶在個(gè)人頁(yè)時(shí)去點(diǎn)擊「版本測(cè)試」按鈕,比如大眾點(diǎn)評(píng)希望強(qiáng)化「訂單」按鈕的視覺(jué)特征以便用戶能夠更快速地找到,所以在列表中這兩者都會(huì)長(zhǎng)得不太一樣。這種區(qū)別于環(huán)境中的其余功能按鈕,為了吸引或暗示用戶點(diǎn)擊的按鈕有一個(gè)專門(mén)的名字,叫做「Call-to-Action 按鈕」(CTA 按鈕/行為召喚按鈕)。一般來(lái)說(shuō),CTA 按鈕大多會(huì)利用馮·雷斯托夫效應(yīng)的環(huán)境差異來(lái)達(dá)到 Call to action 的目的。

經(jīng)驗(yàn)差異──強(qiáng)化時(shí)間特征

與用戶過(guò)往的經(jīng)驗(yàn)或記憶做出差異,叫做經(jīng)驗(yàn)差異。這種差異可以放大時(shí)間點(diǎn)的特征,使用戶對(duì)差異所在的時(shí)間點(diǎn)記憶更深。

案例3:google doodles

我們都知道 google 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì),給 logo 加上一些非常有趣的涂鴉,與平時(shí)的 logo 做出差異,就是為了利用經(jīng)驗(yàn)差異使用戶在記憶中強(qiáng)化時(shí)間特征,更好地記住這個(gè)時(shí)間點(diǎn)。

記住時(shí)間點(diǎn)有什么好處呢?比如 Google 可能是為了傳播世界上那么多有意義的節(jié)日,也帶給公司一種具備著人文關(guān)懷的氣質(zhì)。再比如淘寶、京東和 Steam,在「雙11」、「618」、「圣誕特賣」一定會(huì)改變主頁(yè)的設(shè)計(jì),就是為了讓用戶記住這幾個(gè)被創(chuàng)造出來(lái)的節(jié)日,好讓大家每年這個(gè)時(shí)候都心甘情愿地剁手。

3. 注意事項(xiàng)

注意點(diǎn)1:所有都不一樣 = 所有都一樣

頁(yè)面中的特異點(diǎn)終歸只能屬于少數(shù),如果整個(gè)頁(yè)面所有元素都想做得不一樣,都想突出,那不僅沒(méi)辦法突出任何一項(xiàng),頁(yè)面的整體視覺(jué)都將崩潰。

反面案例1:新手常常會(huì)陷入什么都想突出,但什么都不能突出的境地

注意點(diǎn)2:把差異放在該放的地方

當(dāng)用戶被特異的那一個(gè)點(diǎn)吸引的時(shí)候,對(duì)其他的注意力就將下降,這是馮·雷斯托夫效應(yīng)天然的副作用。我們能做的就是把特異點(diǎn)放在最關(guān)鍵的地方,而不是次要的地方,這樣副作用就不會(huì)太過(guò)影響體驗(yàn)。

反面案例2:閑魚(yú)、虎課的退出登錄按鈕

前幾年我們經(jīng)常能看到這樣的退出登錄按鈕,使用高飽和紅色的背景,成為了這一頁(yè)最亮的那個(gè)按鈕。之前我們基于「警示用戶謹(jǐn)慎按下」的理由,將退出登錄按鈕做成最具警示意義的紅色,但是你看,一旦我們這么做了,這個(gè)按鈕就成了頁(yè)面中最不一樣的那個(gè),強(qiáng)勢(shì)地拿下「Call to action」的大旗,時(shí)時(shí)刻刻都在散發(fā)著快來(lái)按我的氣息,這顯然與我們「不希望用戶隨意退出登錄」的意愿相違背。所以,我們現(xiàn)在去看微信、QQ 這些巨頭應(yīng)用,都已經(jīng)把退出登錄按鈕的差異做到最小,甚至沒(méi)有差異,就是基于上述的考量。

4. 小結(jié)
  • 利用環(huán)境差異讓元素快速獲得視覺(jué)焦點(diǎn);
  • 利用經(jīng)驗(yàn)差異使用戶記住特殊的時(shí)間點(diǎn);
  • 一頁(yè)中不能做太多差異化設(shè)計(jì),得做到關(guān)鍵的元素上。

蔡格尼克記憶效應(yīng)

1. 簡(jiǎn)介說(shuō)明

理論表述

人們對(duì)未完成任務(wù)的記憶比已完成的更深刻。

理論背景

Bluma Wulfovna Zeigarnik,前蘇聯(lián)心理學(xué)家和精神病理學(xué)家。她的導(dǎo)師首先注意到了餐廳服務(wù)員能夠很好地記住未付賬單,但是卻無(wú)法記住已付賬單的更多細(xì)節(jié),針對(duì)這種現(xiàn)象,她進(jìn)行了更加深入的研究。在研究中,她發(fā)現(xiàn)了人存在一種天生的,做事有始有終的驅(qū)動(dòng)力,這種驅(qū)動(dòng)力使得人們對(duì)還沒(méi)有完成的任務(wù)念念不忘,而對(duì)已經(jīng)做完的任務(wù)印象不深。

蔡格尼克效應(yīng)被用于證明格式塔現(xiàn)象不僅在感知中普遍存在,在認(rèn)知中也是如此。勒溫的場(chǎng)論給出了一種解釋:一項(xiàng)任務(wù)被啟動(dòng)之后人會(huì)形成一種處于緊張狀態(tài)的場(chǎng),這會(huì)增強(qiáng)對(duì)所有與該任務(wù)相關(guān)信息的認(rèn)知;任務(wù)完成后緊張的狀態(tài)就會(huì)得到緩解。

注:勒溫的場(chǎng)論(Lewin’s Field Theory)是格式塔心理學(xué)的一條分支,該理論受現(xiàn)代物理學(xué)場(chǎng)論的影響頗深,認(rèn)為人在認(rèn)知過(guò)程中大腦會(huì)形成一種場(chǎng),這個(gè)場(chǎng)影響著人的感官信息的處理。

2. 設(shè)計(jì)案例

對(duì)未顯示完全的信息設(shè)置「懸念」

在文字較多的組件中我們時(shí)常能看到這樣的一個(gè)符號(hào)出現(xiàn):「…」,這個(gè)符號(hào)用于表示文字信息未顯示完全,點(diǎn)開(kāi)可以看到完整的信息。

案例1:新草、bilibili

就是這個(gè)小小的符號(hào),時(shí)刻提醒著我們當(dāng)前所顯示的信息并不完整,吸引著我們點(diǎn)開(kāi)它繼續(xù)看下去,旁邊還伴隨著「全部」、「展開(kāi)」等詞都是為了強(qiáng)化這一特征。

當(dāng)然,不止如此,Web 端也會(huì)出現(xiàn)文章顯示不完全的情況。

案例2:知乎、簡(jiǎn)書(shū) web 版

通過(guò)這種方式,激發(fā)用戶繼續(xù)往后看,產(chǎn)生把文章完整看結(jié)束的驅(qū)動(dòng)力。

提醒用戶任務(wù)還未完成

如果一個(gè)任務(wù)存在多個(gè)步驟,那么在任務(wù)結(jié)束之前應(yīng)該用某種形式(比如進(jìn)度條)提醒用戶任務(wù)還沒(méi)完成,這能夠激發(fā)用戶完成任務(wù)的欲望。

案例3:多鄰國(guó)

在選擇和測(cè)試過(guò)程中,頂部都會(huì)出現(xiàn)一條進(jìn)度條清晰地表達(dá)著目前任務(wù)還沒(méi)完成,進(jìn)行到了哪一步。在這樣的提示之下,用戶會(huì)有更大的動(dòng)力去完成整個(gè)任務(wù)流程。

有效的任務(wù)激勵(lì)

越來(lái)越多的應(yīng)用(尤其是技能學(xué)習(xí)類應(yīng)用)開(kāi)始對(duì)學(xué)習(xí)進(jìn)程進(jìn)行更細(xì)致的任務(wù)分解,然后利用蔡格尼克效應(yīng)的影響對(duì)用戶的學(xué)習(xí)進(jìn)程進(jìn)行激勵(lì)。

案例4:Drops

在任務(wù)進(jìn)行中始終展示任務(wù)的完成進(jìn)度,任務(wù)完成之后會(huì)有對(duì)應(yīng)的完成提示,并且可以獲得勛章/成就之類的小物件兒。也包括很多番茄類應(yīng)用、習(xí)慣養(yǎng)成類應(yīng)用,都會(huì)有類似的設(shè)計(jì),比如 Eggzy、Forest、美妙激勵(lì)等等,都是通過(guò)這種方式激勵(lì)用戶完成自己的目標(biāo)的。我們可以從中看到蔡格尼克記憶效應(yīng)發(fā)揮著不可或缺的作用,正是我們追求有始有終的驅(qū)動(dòng)力,在進(jìn)度條的提醒下才能一步步完成目標(biāo)任務(wù)。

3. 注意事項(xiàng)

注意點(diǎn)1:任務(wù)已完成同樣需要提醒

另一方面,已完成的任務(wù)同樣需要給予用戶相應(yīng)的提示,不然用戶會(huì)感到壓力,會(huì)困惑自己到底有沒(méi)有做完這件事,這樣緊張的情緒將會(huì)一直存在,而緊張過(guò)后就是不安和不信任。

反面案例1:起點(diǎn)任務(wù)結(jié)束沒(méi)有反饋

起點(diǎn)的新手任務(wù)是我最近遇到的一件特糟心的事兒。我明明已經(jīng)完成了「添加一部作品到書(shū)架」的操作卻沒(méi)有任何完成的提示,甚至我不知道自己究竟有沒(méi)有完成。明明做完了,卻依然顯示著「去完成」,是還有隱藏條件沒(méi)做到?還是我加的那本書(shū)不算?還是必須要兩個(gè)任務(wù)一起做完才算完成?還是我沒(méi)氪金不讓我完成?還是純粹的 bug?我不知道,用戶不知道,或許只有產(chǎn)品團(tuán)隊(duì)的人才知道。

所以,如果已完成的任務(wù)沒(méi)有給予用戶合理的提示或者反饋,這樣的體驗(yàn)是很差的。

注意點(diǎn)2:避免過(guò)分強(qiáng)迫

過(guò)長(zhǎng)的進(jìn)度條會(huì)給人形成壓迫,進(jìn)度極其緩慢的任務(wù),或者長(zhǎng)時(shí)間完不成一項(xiàng)任務(wù)會(huì)讓用戶產(chǎn)生挫敗感,對(duì)完成整個(gè)任務(wù)來(lái)說(shuō)尤為不利。

反面案例2:百詞斬讓人絕望的進(jìn)度條

192/6270,相信這個(gè)進(jìn)度不僅僅是讓我,讓所有看到的人都感到窒息和絕望。我并不是在為我的拖延癥找借口。我想表達(dá)的是,這種超長(zhǎng)的進(jìn)度條和超緩慢的任務(wù)進(jìn)度,每天 50 個(gè)單詞也就是進(jìn)度條每天推進(jìn) 0.8%,不足 1%,對(duì)用戶形成的壓力是巨大的,過(guò)長(zhǎng)的任務(wù)周期也會(huì)讓用戶快速失去信心。

4. 小結(jié)
  • 利用「未完成」的可視化意象對(duì)用戶形成激勵(lì);
  • 已完成的任務(wù)同樣需要提示;
  • 拆分任務(wù)進(jìn)度,避免形成過(guò)分強(qiáng)迫。

日歷

鏈接

個(gè)人資料

存檔