七個UI設(shè)計(jì)小Tip:從心理學(xué)角度談?wù)動邢薜淖⒁饬?/h2>
1 評論 4033 瀏覽 8 收藏 11 分鐘

編輯導(dǎo)語:小時候,搭一個積木、給娃娃梳妝打扮就可以玩一天;而長大后,隨著時間的碎片化和生活節(jié)奏的加快,我們的注意力也被逐漸分散了,集中精力做一件事變得越來越難?;诖?,本文作者從心理學(xué)角度進(jìn)行了分析,并且分享了七個UI設(shè)計(jì)小Tip。

AUI,Augmented User Interface或Augmented User Interaction,是指有視覺或者確實(shí)深度信息的虛實(shí)結(jié)合的用戶所見界面。

人類的注意力非常有限,外界刺激即使經(jīng)過了感官系統(tǒng)被我們接收,能夠獲得我們注意的信息依然非常有限。

當(dāng)我們與界面進(jìn)行有目的的互動時,一些行為和方式會因此變得可以預(yù)測或者遵循一定的模式,為了讓用戶更好的進(jìn)行人機(jī)交互,設(shè)計(jì)中很多原則由此而起。

而在AUI的設(shè)計(jì)中,與用戶互動的是周圍整個虛實(shí)結(jié)合的世界,用戶所見界面里豐富多彩、或真或幻的畫面是體驗(yàn)的加分項(xiàng)也是消耗其注意力的風(fēng)險(xiǎn)因子。

于是,我們不得不持續(xù)來探討如何在UI設(shè)計(jì)中,讓用戶順暢而合理的進(jìn)行操作,而不至于隨意消耗其注意力或者被其注意力完全忽視。

那“注意力”到底是什么呢?

雖然我們對此有非常直觀的理解,但是認(rèn)知心理學(xué)領(lǐng)域?qū)Α白⒁狻钡亩x卻有一段又漫長、又曲折、又充滿爭議的研究和討論,直到現(xiàn)在。

但有一點(diǎn)是得到廣泛認(rèn)同的,就是注意的本質(zhì)是一種選擇。人們對被選擇的信息投以了注意力的同時,必然對沒有被選擇的信息進(jìn)行了忽略。而UI作為人機(jī)之間傳遞信息的具象呈現(xiàn),設(shè)計(jì)師不得不時時刻刻和用戶的注意力較勁。

為什么要較勁呢?

因?yàn)槲覀兊淖⒁饬φ娴氖鞘钟邢蓿憧梢园咽直凵熘?,你的注意力相對于所有輸入信息的大小就相?dāng)于你的大拇指指甲蓋相對于整個視野的大小。

當(dāng)然,這只是一個比喻,確切的說,這個比喻是我們視網(wǎng)膜的中央凹區(qū)域相對于整個視網(wǎng)膜的大小。

一、設(shè)計(jì)最合適的視覺流,喚醒或節(jié)省用戶的注意力消耗

在《我們的視覺系統(tǒng)對AR設(shè)計(jì)的啟示》一文里,我有講過中央視野,中央視野的畫面就是投射在我們視網(wǎng)膜中央凹區(qū)域的;而投射在中央凹之外的畫面,清晰度會迅速降低,周邊視野的分辨率基本上等于我們隔著沾滿霧氣的浴室玻璃看出去一樣。

投射在中央凹這樣一個小區(qū)域的畫面,大概一個按鈕就占滿了。

真正讓用戶能夠無障礙的閱讀你設(shè)計(jì)的整個界面,是視覺系統(tǒng)在時間上的連續(xù)性構(gòu)成的,中央凹之外的周邊視覺信息會不斷的引導(dǎo)眼球運(yùn)動,從而使中央視野快速的瀏覽以補(bǔ)全整個視野。

這就是在界面設(shè)計(jì)時呈現(xiàn)出“視覺流”的重要性。

視覺流是用戶掃描頁面的時候的視線跟蹤,好的設(shè)計(jì)能夠讓人們按照順暢的次序沿著它向前流動,一般人的習(xí)慣是從左到右、從上到下,比如居中對齊的文字會比居左對齊的段落就會消耗更多的注意力,因?yàn)闊o意識的眼動會將我們帶回到下一行同樣的起始位置,這時候周邊視野的信息會引導(dǎo)用戶做有意識的調(diào)整。

當(dāng)然,這并不說明居中對齊的排版就一定不好,有的時候,我們或許就需要靠這一點(diǎn)點(diǎn)的消耗,來喚醒他的注意力。

二、使用“4±1”法則(而不是“7±1”),結(jié)構(gòu)化呈現(xiàn)界面布局

注意力的有限性除了中央凹的生理限制之外,工作記憶的容量也是一個原因。工作記憶就是暫時被你記住的東西,很多人都知道神奇的數(shù)字”7“就是工作記憶的容量。

確切的說,它是由認(rèn)知心理學(xué)家Miller在上個世紀(jì)50年代提出來的,指人類能夠同時記住互不相關(guān)的東西的數(shù)量限制,“7±2”法則也被運(yùn)用在很多界面設(shè)計(jì)里。

值得提出的是,后來的實(shí)驗(yàn)和研究都認(rèn)為這個“7”偏高了,現(xiàn)在心理學(xué)家們會更傾向認(rèn)為“4±1”才更接近于人類一般水平的工作記憶容量。我在之前的文章也有提過,4±1,是一個界面上更理想呈現(xiàn)模式。

但在實(shí)際的項(xiàng)目中,很多界面需要承載的功能都遠(yuǎn)遠(yuǎn)大于4,在我承接的眾多ToB類項(xiàng)目中,有些頁面更是連7+2都扛不住。

而當(dāng)我們再回頭去看這個神奇數(shù)字的定義,就發(fā)現(xiàn)里面有一個很有意思的詞語:“互不相關(guān)”。也就是說,通過分類和整合,運(yùn)用格式塔原理,將視覺信息成結(jié)構(gòu)化的呈現(xiàn)給用戶,是可以讓用戶臨時接收更多信息的。

三、固定的路徑或位置會節(jié)省用戶的注意力,如果你要喚醒它,需要多花點(diǎn)心思

正因?yàn)樽⒁饬κ钟邢?,所以大多?shù)時候,我們傾向于使用自動化思維。

即我們會更偏向于選擇熟悉的路徑,最常見的,很多用戶明明知道有快捷鍵可以使用,但依然會選使用鼠標(biāo)在頂部欄的某個功能下選擇某項(xiàng)子功能的某個更下級操作,他們做連續(xù)幾次的點(diǎn)擊,只為了不去背那個三個按鍵組合而成的快捷鍵。

這是一種惰性行為,在這種行為下用戶愿意為了少動腦子而付出更長鏈條的交互。

當(dāng)用戶已經(jīng)形成了惰性行為時,做出改變的成本要比預(yù)想得更高。人們甚至不會閱讀上面的文字或圖形,僅靠固定的路徑或位置來進(jìn)行操作,如果要重新規(guī)劃,最好能夠?qū)⒃械牟僮鞅A粢欢螘r間。

四、欲擒故縱,不要試圖一直消耗用戶的注意力

一般來說,人們保持集中的注意力上限是7-10分鐘,10分鐘以后,大腦需要經(jīng)過短暫的休息才能再次集中注意力。即使是設(shè)計(jì)需要用戶高度集中精神的專業(yè)技術(shù)輔助型應(yīng)用,也需要設(shè)置適當(dāng)?shù)姆潘牲c(diǎn)。

之前我有做過一個項(xiàng)目是輔助飛機(jī)制造的AR應(yīng)用,需要通過幾次識別輸入來到最后的插線環(huán)節(jié),每一個環(huán)節(jié)其實(shí)都需要工作人員高度集中精力,里面每一個斷點(diǎn)(例如分界面顯示而不是連續(xù)顯示),都是大腦可以得到短暫休息的時機(jī)。

五、界面有跡可循,隨時拉回用戶心思

我們知道,注意力十分有限,并且持續(xù)時間不長,除此以外,它還十分不穩(wěn)定。

臨時記憶里的“4±1”個位置會隨時被新的內(nèi)容所替換,在AUI設(shè)計(jì)中,真實(shí)世界原本豐富可變的刺激更是變成了不穩(wěn)定性的高風(fēng)險(xiǎn)來源,你有時候很難去完全想象在實(shí)際使用中,什么會影響用戶原本集中在界面中的注意力。

在每一個界面都提供可以讓他回憶起來的外部信息,識別比記憶容易許多,例如將任務(wù)的狀態(tài)和進(jìn)展明確的顯示出來,明確的區(qū)分已讀和未讀,已完成和未完成的狀態(tài)等。

六、嚇人一跳的重型利器非必要不使用,但有些值得注意變化,可以稍微動一動

當(dāng)然,談到注意力不得不說一些重型利器,比如突然跳出的模態(tài)窗口,代表著危險(xiǎn)的帶動畫的紅色,還有巨大而突然的噪音以及警示音。

因?yàn)榭赡苌婕暗轿kU(xiǎn),我們?nèi)祟惖倪z傳特性會讓我們對它們尤其注意。這些嚇人一跳的利器如非必要,盡量不要使用,否則就會變成“狼來了”的故事。

但與此同時,由于變化盲的存在,我們可能會對目標(biāo)以外的變化視而不見。比如當(dāng)你過度關(guān)注價格時,可能會對頁面其他地方的圖片變化視而不見。如果的確需要,可以使用輕量一些的動效來引導(dǎo)注意力。

七、頭尾很重要

開頭是用戶開始集中注意力與機(jī)器對話的第一印象,它會成為用戶對整個系統(tǒng)評價好壞的基石。

而一個完整的收尾則是一個軟件的體貼,畢竟,當(dāng)用戶完成了某個目標(biāo),注意力一旦消失,就很容易遺漏一些簡單的收尾工作,比如回到初始狀態(tài),忘記息屏等。

一個好的第一印象和一個完整的收尾,是用戶再次選擇將注意力放在這里,打開這個應(yīng)用或這個產(chǎn)品的原因。

 

作者:林影落,10年+體驗(yàn)設(shè)計(jì)師,專注AR及創(chuàng)新領(lǐng)域設(shè)計(jì);微信公眾號:林間有影落

本文由 @林影落 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App

評論
評論請登錄
  1. 抄書還沒抄明白,再看看設(shè)計(jì)師要懂心理學(xué)吧

    回復(fù)