觸屏版
全國(guó)服務(wù)熱線:0571-87205688
交互設(shè)計(jì)并不是毫無(wú)依據(jù)的空泛臆想,想當(dāng)然式的設(shè)計(jì)注定不能提供良好的用戶(hù)體驗(yàn)。那么設(shè)計(jì)過(guò)程中應(yīng)該遵循什么樣的原則呢?作者分享了交互設(shè)計(jì)中可以納入考慮的5個(gè)心理學(xué)原理,一起來(lái)看看。
某次下班偶遇一開(kāi)發(fā),他問(wèn):“你們平常做的交互設(shè)計(jì),有什么準(zhǔn)則嗎?”我列舉了尼爾森十原則之類(lèi),卻遭到對(duì)方的進(jìn)一步懷疑,似乎認(rèn)為這不過(guò)是一些約定俗成的規(guī)矩,細(xì)究下來(lái)背后卻沒(méi)有什么站得住腳的道理。
當(dāng)然不是這樣。這些交互設(shè)計(jì)準(zhǔn)則背后,都有其依循的心理學(xué)原理,其中認(rèn)知心理學(xué)應(yīng)當(dāng)占據(jù)了很大一部分。
所以借此機(jī)會(huì),也整理了一下認(rèn)知心理學(xué)中對(duì)交互設(shè)計(jì)有所啟發(fā)的一些知識(shí)點(diǎn)(參考《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則》一書(shū))。包括:
中央凹與邊界視野——如何呈現(xiàn)信息以獲取注意力
格式塔原理——如何處理不同界面元素的關(guān)系
時(shí)間感知——如何讓?xiě)?yīng)用具有高響應(yīng)度
意識(shí)與無(wú)意識(shí)——?jiǎng)e讓用戶(hù)思考!
記憶的局限——如何降低工作記憶負(fù)擔(dān)
1.中央凹與邊界視野——如何呈現(xiàn)信息以獲取注意力
原理
人眼主要通過(guò)視網(wǎng)膜成像。視網(wǎng)膜中的視錐細(xì)胞大約占據(jù)視網(wǎng)膜面積的1%,主要集中在中央凹中,在中央凹之外(稱(chēng)為邊界視野)視錐細(xì)胞分布的密度很低。邊界視野主要分布的是視桿細(xì)胞,大約占據(jù)視網(wǎng)膜面積的99%。
中央凹處的成像最清晰、分辨率很高;而邊界視野分辨率極低,人眼在邊界視野基本處于“失明”狀態(tài),所見(jiàn)的東西差不多跟通過(guò)覆滿(mǎn)水霧的浴室門(mén)看東西的效果一樣。這是因?yàn)樵谥醒氚继幟總€(gè)視錐細(xì)胞都與一個(gè)神經(jīng)節(jié)細(xì)胞相連,神經(jīng)節(jié)細(xì)胞是視覺(jué)信息處理和傳導(dǎo)的起點(diǎn);而在邊界視野中,一個(gè)神經(jīng)節(jié)細(xì)胞會(huì)與多個(gè)視錐細(xì)胞和視桿細(xì)胞相連。雖然中央凹僅占視網(wǎng)膜面積的1%,但是大腦皮層中負(fù)責(zé)處理視覺(jué)信息的部分中有50%是用來(lái)接收來(lái)自中央凹的視覺(jué)輸入。
中央凹并不大,當(dāng)用戶(hù)與電腦屏幕距離正常時(shí),它在屏幕上只有1-2厘米的大小。中央凹成像的區(qū)域就是我們的眼睛的注視點(diǎn),因此我們每個(gè)瞬間看到的景象都只有注視點(diǎn)是清晰的,其他區(qū)域非常模糊。但既然邊界視野的分辨率這么低,為什么我們會(huì)覺(jué)得自己所見(jiàn)的景象其實(shí)全都很清晰呢?這是因?yàn)槲覀兊难劬ψ⒁朁c(diǎn)會(huì)以每秒三次的速度快速跳動(dòng),有選擇性地對(duì)周?chē)h(huán)境進(jìn)行注視,大腦再根據(jù)這些視覺(jué)輸入和我們已有的經(jīng)驗(yàn)去填充視野的其他部分,讓我們能夠?qū)χ車(chē)h(huán)境形成一個(gè)足夠清晰的感知。
除此之外,在視網(wǎng)膜中還有一個(gè)叫做盲點(diǎn)的存在。盲點(diǎn)是眼球中視覺(jué)神經(jīng)和血管的出口,在這個(gè)地方?jīng)]有視錐細(xì)胞和視桿細(xì)胞,無(wú)法感知任何光源。也就是說(shuō)當(dāng)我們注視著一個(gè)地方時(shí),周?chē)h(huán)境中會(huì)存在一個(gè)點(diǎn)使我們無(wú)法“看到 ”的,我們之所以無(wú)法感知是因?yàn)殡p眼球的存在以及大腦的自動(dòng)“腦補(bǔ)”。
邊界視野看東西很模糊,但是也有其不可替代的作用。它能夠發(fā)現(xiàn)周?chē)h(huán)境中的關(guān)鍵信息,一旦發(fā)現(xiàn)這種關(guān)鍵信息,它就會(huì)引導(dǎo)中央凹去仔細(xì)查看這個(gè)信息。邊界視野對(duì)運(yùn)動(dòng)的物體非常敏感,這是因?yàn)樵谶M(jìn)化過(guò)程中我們需要很快發(fā)現(xiàn)周?chē)\(yùn)動(dòng)的物體,它可能是可以吃的小動(dòng)物、或者企圖吃掉我們的猛獸。所以我們常常會(huì)對(duì)邊界視野中的運(yùn)動(dòng)物體比較敏感,一旦發(fā)現(xiàn)我們幾乎會(huì)不由自主地看向它。邊界視野還有一個(gè)特殊能力就是能夠在黑暗環(huán)境下很好地工作——視錐細(xì)胞習(xí)慣高亮度,而視桿細(xì)胞更適應(yīng)黑暗環(huán)境。所以在黑暗環(huán)境下不直接注視物體反而更能夠看清楚。
啟示
操作反饋和錯(cuò)誤信息:
反饋信息盡量落在中央凹中。如果要對(duì)用戶(hù)當(dāng)前的操作進(jìn)行反饋,反饋信息與用戶(hù)當(dāng)前的注視點(diǎn)不要超過(guò)1-2厘米,否則這些信息就會(huì)處于邊界視野,用戶(hù)很可能覺(jué)察不到。
邊界視野上的反饋信息必須足夠清晰,比如使用大字體、獨(dú)特的顏色,或者使用動(dòng)效。想象一下把邊界視野都打上馬賽克的樣子,如果這時(shí)候提示信息仍然能夠吸引注意,我們才有理由認(rèn)為用戶(hù)能夠看到。
邊界視野上的反饋信息要有統(tǒng)一且易識(shí)別的特點(diǎn),比如使用用戶(hù)習(xí)慣的警示符號(hào),或者標(biāo)準(zhǔn)的紅色字體表示錯(cuò)誤。這些易于識(shí)別的特點(diǎn)讓用戶(hù)能夠輕易分辨出這是什么類(lèi)型的信息。
必要時(shí)使用對(duì)話(huà)框。對(duì)話(huà)框中止了用戶(hù)當(dāng)前的操作、要求用戶(hù)注意特定信息并作出響應(yīng)。對(duì)話(huà)框要謹(jǐn)慎使用,因?yàn)闀?huì)對(duì)用戶(hù)造成打擾,尤其是模態(tài)對(duì)話(huà)框。使用對(duì)話(huà)框還有另一個(gè)弊端就是用戶(hù)會(huì)有習(xí)慣化(habituation),即重復(fù)暴露在刺激環(huán)境中會(huì)導(dǎo)致對(duì)該刺激反應(yīng)傾向降低——對(duì)話(huà)框的泛濫讓用戶(hù)對(duì)對(duì)話(huà)框非常不敏感,往往不看內(nèi)容就會(huì)直接關(guān)閉。
讓用戶(hù)更快找到信息:
頁(yè)面上的重點(diǎn)信息,可以通過(guò)顏色、字體、形狀等要素與其他信息做出差異化的顯示。用戶(hù)通過(guò)邊界視野的引導(dǎo)和注視點(diǎn)的跳動(dòng)來(lái)在界面上尋找信息。如果要讓用戶(hù)更快找到所需的信息,就要讓這些信息在邊界視野上也足夠明顯。
如果信息很多并且無(wú)法預(yù)測(cè)用戶(hù)的目標(biāo)(比如菜單欄、應(yīng)用中心),就盡量通過(guò)圖標(biāo)差異化地顯示每個(gè)選項(xiàng)。要讓每個(gè)圖標(biāo)都容易辨認(rèn)有點(diǎn)困難,比較好的方法是賦予每個(gè)圖標(biāo)獨(dú)特的顏色和輪廓,不要太華麗也不要有過(guò)多的細(xì)節(jié)。
2.格式塔原理——如何處理不同界面元素的關(guān)系
我們獲得的視覺(jué)輸入是獨(dú)立的點(diǎn)、線和區(qū)域,而我們會(huì)在神經(jīng)系統(tǒng)層面上將這些信息知覺(jué)為整體的形狀和物體。
接近性原理:在位置上相互靠近的物體傾向于被感知為一組。
如iOS系統(tǒng)的設(shè)置,通過(guò)位置親疏關(guān)系來(lái)體現(xiàn)分組。
相似性原理:看起來(lái)相似的物體傾向于被感知為一組。
如支付寶首頁(yè)的元素雖然很多,但是根據(jù)相似性可以清晰地分為幾組。
連續(xù)性原理:我們傾向于將線條和形狀感知為連續(xù)的整體。
典型的例子是IBM的logo設(shè)計(jì),我們并不把這些元素感知為獨(dú)立的橫線,而是感知為整體的字母。
交互上典型的例子是滑動(dòng)條,如iOS的亮度調(diào)節(jié),我們不會(huì)把左右兩邊視為獨(dú)立的橫線,而是會(huì)在心中把它們連接起來(lái),視為一個(gè)整體。
封閉性原理:與連續(xù)性原則相關(guān),我們傾向于將分散的元素感知為封閉的物體。
下圖是印象筆記PC與Mac端多選筆記的顯示效果,我們會(huì)將后面的線條視為一個(gè)封閉卡片(代表著一個(gè)筆記)的一部分,而不是視為獨(dú)立的非封閉圖形。
主體/背景原理:我們傾向于將元素區(qū)分為主體和背景,其中主體占據(jù)了我們主要的注意力。
iOS系統(tǒng)的選項(xiàng)菜單、toast、對(duì)話(huà)框等都利用了這個(gè)原理,將用戶(hù)原本操作的界面作為背景,而將當(dāng)前需要用戶(hù)去關(guān)注的信息作為前景。
共同命運(yùn)原理:一起運(yùn)動(dòng)的物體傾向于被感知為一組或者彼此相關(guān)。
這比較多用于動(dòng)效設(shè)計(jì),通過(guò)不同元素的共同運(yùn)動(dòng)體現(xiàn)其親緣關(guān)系。
幾種格式塔原理之間并不是相互獨(dú)立的,在設(shè)計(jì)中往往需要綜合運(yùn)用。
3.時(shí)間感知——如何讓?xiě)?yīng)用具有高響應(yīng)度
一個(gè)交互系統(tǒng)的響應(yīng)度,即能否即使告知用戶(hù)當(dāng)前的狀態(tài)而不需要他們無(wú)故等待,是影響用戶(hù)滿(mǎn)意度的最重要因素。
下面列出的是與人機(jī)交互有關(guān)的一些時(shí)間間隔,以及與之對(duì)應(yīng)的認(rèn)知原理:
除了讓系統(tǒng)反饋保持在要求的時(shí)延之內(nèi),還有一些提高響應(yīng)度的tips:
進(jìn)度條需要讓用戶(hù)感到系統(tǒng)正在運(yùn)作、并且清楚進(jìn)度和需要等待的時(shí)間,不要一直停在99%,也不要只顯示已完成而忽略未完成。
盡量不要在單位子任務(wù)內(nèi)發(fā)生延遲。上文提到用戶(hù)會(huì)將任務(wù)拆解為子任務(wù),完成每個(gè)子任務(wù)期間用戶(hù)都是處于高度專(zhuān)注的狀態(tài),此時(shí)發(fā)生延遲影響較大。
如果加載需要長(zhǎng)時(shí)間,先渲染出重要信息讓用戶(hù)看到。
利用空閑時(shí)間先做些事情,不要等待用戶(hù)發(fā)出指令后才開(kāi)始慢吞吞地行動(dòng)。
4.意識(shí)與無(wú)意識(shí)——?jiǎng)e讓用戶(hù)思考!
人腦可以認(rèn)為是由三個(gè)部分組成:舊腦、中腦和新腦。舊腦主要由腦干組成,掌管著人的本能反應(yīng)和身體的自動(dòng)調(diào)節(jié)功能。中腦位于舊腦之上新腦之下,控制著情緒反應(yīng)。新腦主要由大腦皮層組成,掌管著只有高級(jí)哺乳動(dòng)物才具備的意識(shí)活動(dòng)。
我們的思維可以分為兩種:由舊腦和中腦產(chǎn)生的無(wú)意識(shí)的、自動(dòng)化的、情緒化的思維,稱(chēng)為系統(tǒng)一;由新腦產(chǎn)生的有意識(shí)的、理性的思維,稱(chēng)為系統(tǒng)二。系統(tǒng)一只會(huì)根據(jù)自己已知的東西做判斷,不在乎邏輯性和準(zhǔn)確性,并且反應(yīng)更加快速,它在大部分情況下都運(yùn)作良好,因此也不需要系統(tǒng)二出馬。系統(tǒng)二掌管的是更加高級(jí)的認(rèn)知能力,它往往在系統(tǒng)一無(wú)法做出合理反應(yīng)、或者我們對(duì)反應(yīng)結(jié)果的要求比較高的時(shí)候,才會(huì)親自出馬。系統(tǒng)二運(yùn)作的成本較高,需要進(jìn)行有意識(shí)的監(jiān)控并消耗有限的注意力資源,并且只能按照順序一件一件完成。相比之下系統(tǒng)一的運(yùn)作就輕松得多,也允許“多線程”操作。
舉個(gè)栗子:當(dāng)你早期刷牙時(shí),打字時(shí),開(kāi)車(chē)時(shí),都幾乎不需要費(fèi)力去想如何完成這些事情。因?yàn)檫@些是你已經(jīng)習(xí)得的行為,只需要使用系統(tǒng)一就能夠完成,你甚至可以一邊唱著一首熟悉的歌曲,一邊給自己做早餐。但是,要用到系統(tǒng)二時(shí),比如算一道數(shù)學(xué)題、背出你部門(mén)里30個(gè)人的名字、決定今天中午吃什么,我們就會(huì)開(kāi)始覺(jué)得這些事情“有難度”,它需要消耗我們的認(rèn)知資源。
這些知識(shí)給交互設(shè)計(jì)的啟發(fā)是,盡量讓用戶(hù)使用系統(tǒng)一就能夠完成操作,盡可能少消耗用戶(hù)的認(rèn)知資源,這樣用戶(hù)會(huì)覺(jué)得系統(tǒng)很“易用”。
用戶(hù)已經(jīng)學(xué)會(huì)的操作可以用系統(tǒng)一輕松完成。因此在設(shè)計(jì)時(shí)盡量保持用戶(hù)已有的操作習(xí)慣,讓用戶(hù)使用以往的經(jīng)驗(yàn)、而不需要重新學(xué)習(xí),就能完成任務(wù)。
用戶(hù)對(duì)軟件系統(tǒng)存在很多圖式(即schema,是認(rèn)知的基本單元,用于解釋感知、調(diào)節(jié)行為和存儲(chǔ)知識(shí)),所以他們往往根據(jù)對(duì)特定界面或控件的特定期望進(jìn)行反應(yīng),而不仔細(xì)去看實(shí)際顯示在界面上的內(nèi)容。如果某個(gè)元素的設(shè)計(jì)符合用戶(hù)對(duì)按鈕的圖式,用戶(hù)就會(huì)認(rèn)為它可以點(diǎn)擊;如果用戶(hù)的圖式中對(duì)話(huà)框的確定操作在右邊而取消操作在左邊,他可能在意識(shí)到你調(diào)換了操作位置之前就已經(jīng)完成了點(diǎn)擊。我們要減少消耗用戶(hù)的認(rèn)知資源,就需要去了解、遵循用戶(hù)已有的圖式,以及在應(yīng)用中建立穩(wěn)定的圖式,這也是為什么我們需要在設(shè)計(jì)中遵循一致性原則。
不要讓用戶(hù)去思考:A跟B的概念有什么區(qū)別?為什么沒(méi)有反應(yīng)、我到底操作成功了沒(méi)?找不到刪除訂單的操作、它應(yīng)該在哪里?這個(gè)東西選中后會(huì)有什么效果?用戶(hù)對(duì)這些事情想的越多,就說(shuō)明系統(tǒng)越難用。用戶(hù)的注意力是有限的,應(yīng)該盡量減少用戶(hù)對(duì)工具的注意,這樣他才能全神貫注去完成他的目標(biāo)任務(wù)。
5.記憶的局限——如何降低工作記憶負(fù)擔(dān)
人的記憶分為短期記憶和長(zhǎng)期記憶。短期記憶也稱(chēng)工作記憶,是為了完成任務(wù)而臨時(shí)儲(chǔ)存的信息,一般保留幾分之一秒到幾秒。長(zhǎng)期記憶是我們“記住”的東西,長(zhǎng)期記憶包括但不等于“永久記憶”,保留時(shí)間也可能只有幾分鐘、幾天、幾年。
長(zhǎng)期記憶對(duì)應(yīng)著神經(jīng)系統(tǒng)的某個(gè)活動(dòng)模式,參與該模式的神經(jīng)元通過(guò)突觸建立聯(lián)系,神經(jīng)元上的這種變化可能是長(zhǎng)期的甚至是永久的。神經(jīng)活動(dòng)模式可以被再次激活,這就是我們回憶的過(guò)程。神經(jīng)活動(dòng)模式如果經(jīng)常被激活,其連結(jié)也會(huì)變得越來(lái)越穩(wěn)固,這就是為什么經(jīng)常復(fù)習(xí)有助于鞏固知識(shí)。
工作記憶是感覺(jué)、注意和長(zhǎng)期記憶留存現(xiàn)象的組合。來(lái)自人體各個(gè)感覺(jué)器官的信息,會(huì)被短暫地存儲(chǔ)下來(lái),其中一部分可以被注意到,進(jìn)入到工作記憶中。長(zhǎng)期記憶中的內(nèi)容也是工作記憶的候選來(lái)源。而注意機(jī)制負(fù)責(zé)對(duì)感覺(jué)和激活的長(zhǎng)期記憶進(jìn)行篩選,因此進(jìn)入工作記憶中的信息都是我們“注意”到的部分,是屬于上一部分所述的系統(tǒng)二的工作。
我們一次只能注意一件事,如果你覺(jué)得你能同時(shí)注意兩件,那是因?yàn)槟阍趦杉轮g快速地切換你的注意力。
工作記憶的容量有限,大約是4±1,即我們能夠同時(shí)記住的互不相關(guān)的東西的數(shù)量在3~5之間。此外,工作記憶還非常不穩(wěn)定,如果我們將注意轉(zhuǎn)移到新事物上,之前工作記憶中的內(nèi)容就可能遺失。
Tips:
避免使用模式,即避免同個(gè)操作在不同模式下有不同的效果。用戶(hù)常常會(huì)忘記當(dāng)前處在哪個(gè)模式下,因此很容易犯錯(cuò)。除非在使用模式時(shí)非常清晰地將模式標(biāo)示出來(lái)。
讓用戶(hù)知道他使用的搜索詞是什么?!坝脩?hù)居然會(huì)笨到忘記自己搜的是什么嗎?”了解了工作記憶的特點(diǎn)之后,也許我們會(huì)更能理解這種問(wèn)題。
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論