基于視覺感知的界面設(shè)計眼動實驗研究

笪潔如,李亞軍

(南京理工大學(xué) 設(shè)計藝術(shù)與傳媒學(xué)院,江蘇 南京 210094)

0 引言

在移動互聯(lián)網(wǎng)飛速發(fā)展、網(wǎng)絡(luò)技術(shù)飛速崛起的背景下,智能手機成為人們獲取信息、進行社交活動的重要媒介,傳統(tǒng)的多領(lǐng)域協(xié)同展示聲音、畫面和文字內(nèi)容的信息方式逐漸被時代淘汰,取而代之的是手機界面。手機界面設(shè)計中,圖片、文字和色彩的編排比例和分布位置都會影響用戶獲取信息的效率和用戶體驗。現(xiàn)如今,大多數(shù)手機界面都存在包含信息量過大、無法讓用戶快速獲取目標信息以及無法有效引導(dǎo)用戶把注意點放在設(shè)計者最想傳達的信息上等問題,因此合理地手機視覺界面設(shè)計十分重要。

1 視覺感知機制

用戶在使用界面時,通常是一個通過視覺通道進行視覺搜索最后形成視覺感知的過程。因此在進行界面設(shè)計前,先要對視覺感知機制進行研究,設(shè)計出合理的界面展示和傳遞信息方式,使用戶快速獲取目標信息;然后對用戶的視覺思維習(xí)慣進行研究,通過視覺習(xí)慣引導(dǎo)用戶按照設(shè)計師預(yù)設(shè)的視覺動線瀏覽界面,從而提升用戶獲取信息的效率和瀏覽界面時的感知愉悅性。

1.1 視覺通道

視覺通道是可視化中的重要概念,是個體接受視覺刺激產(chǎn)生視覺感知從而形成視覺反饋的通道,具有疲勞程度、視覺變化習(xí)慣、準確性、觀察情況的優(yōu)先性、設(shè)計依據(jù)、接受程度、顏色的易辨認順序、顏色相配對時的易辨認順序等特征。

1.2 視覺搜索

視覺搜索由一系列與注意相關(guān)的動作組成,通過眼睛運動從而發(fā)現(xiàn)目標信息的視覺感知軌跡,視覺搜索的績效反映了操作者的認知效率[1]。根據(jù)韋爾提出的視覺搜索的三層嵌套循環(huán)模型[2],視覺搜索過程即對原始信息進行匹配,找出與目標信息特征重合的信息,進而重點關(guān)注。在此過程中,用戶通常會先關(guān)注視覺中心的信息,但是色彩或大小與其他信息對比強烈的邊緣信息也會吸引用戶注意。

1.3 視覺感知

視覺感知分為人眼接受分析客觀形象的過程和大腦提煉辨認視覺形象的心理過程。常人的感知行為主要是通過視覺來獲取大量的信息,視覺占據(jù)著人體85%的感知行為信息獲取的比例,人們主要通過視覺所看到的畫面來感知外部世界[3]。

另外,視覺感知活動可以分為2個路徑:自下而上和自上而下的路徑[2]。自下而上的路徑源自呈現(xiàn)在視網(wǎng)膜上的圖案視覺信息,是一種基于特征的視覺搜索;而自上而下的路徑則源自注意力的需要,即根據(jù)任務(wù)的需要來依次決定關(guān)注點。Wickens等[4]提出了SEEV模型,視覺注意力受到信息顯著性(Salience)、努力(Effort)、期望(Expectancy)和價值(Value)4個因素的影響。其中顯著性和努力是影響視覺注意力分配自下而上的主要因素,而期望和價值是影響視覺注意力分配自上而下的主要因素。因此,可以根據(jù)從上至下、由左至右的視覺習(xí)慣來指導(dǎo)視覺要素的編排。

2 界面設(shè)計研究現(xiàn)狀

用戶界面(User Interface,UI)就是把軟件呈獻給使用者的界面,包括界面的美觀、使用者與軟件的互動、操作和算法等在內(nèi)的整體[5]。它使信息原本的內(nèi)部形式轉(zhuǎn)換成用戶可以理解的形式,是系統(tǒng)與用戶信息交換與交互的媒介。界面設(shè)計的優(yōu)良程度直接影響到用戶體驗和運用效果。隨著用戶對審美和信息量需求的不斷提高,界面設(shè)計的重心也越來越偏向豐富多彩、精美時尚。但是,界面設(shè)計并不是越豐富越美觀才被用戶所接受,而應(yīng)該更注重其易用性和可用性。

2.1 界面設(shè)計的基本原則

2.1.1 一致性原則

在視覺方面,無論是字體還是顏色的設(shè)計,都需保證視覺上的風格統(tǒng)一,使頁面整體結(jié)構(gòu)合理一致。在操作方式方面,預(yù)設(shè)的界面操作應(yīng)與用戶的操作習(xí)慣一致,減少經(jīng)驗對用戶操作的影響,提高用戶的操作效率。

2.1.2 易用性原則

易用性是“以用戶為中心”為整個設(shè)計的基本理念[6],就是要保證用戶能輕松地使用。界面設(shè)計要保證界面功能的可用性,要確保操作的便捷性,尤其是關(guān)于操作路徑的設(shè)計,來幫助用戶更加順利地操作和達到目的。

2.1.3 情感性原則

情感化設(shè)計能增加界面對用戶的吸引力,提升用戶的情感體驗和感知愉悅性,從而獲得用戶的心理認可度。例如當用戶想要刪除某些內(nèi)容時,跳出是否刪除的提示讓用戶再次確認,可以有效避免用戶誤刪。再例如在頁面加載時,出現(xiàn)一個動態(tài)的圖標顯示加載進程,可以緩解用戶等待時的焦躁心情。

2.1.4 直觀性原則

要求界面清晰直觀的傳達信息,所有視覺元素都清晰直觀而不過分修飾。設(shè)計是為內(nèi)容服務(wù)的,界面上所有的視覺元素都應(yīng)該為了突出界面的主要內(nèi)容而布局和設(shè)計,以便用戶更快速地獲取目標信息。

2.1.5 美觀性原則

滿足用戶的審美需求也是界面設(shè)計的要點之一,用戶對美的追求是天性,美觀性也是“以用戶為中心”這個基本設(shè)計理念的衍生原則。美觀的界面同樣增加用戶的感知愉悅性。

2.2 界面中的視覺元素

李黎[7]將手機界面設(shè)計的視覺構(gòu)成元素劃分為文本元素、色彩元素和圖形元素3大類,并認為視覺元素的主要功能是傳播信息、充當人機交互媒介和提升用戶感知愉悅性。

2.2.1 文本元素

文字是傳遞界面信息的主要載體,除此之外,具有設(shè)計感的文字還又提升界面的審美價值從而增強視覺傳達的效果,文字的編排與字符的選用會直接影響用戶對界面的感知愉悅性。

2.2.2 圖形元素

相比于文字元素,圖形元素更直觀生動,它不會被限制于語言和文化的界限與阻礙,讓用戶更容易理解和獲取信息,因此有“世界語”之稱。在界面設(shè)計中,圖形更能引起和激發(fā)用戶的視覺關(guān)注和游覽興趣,并帶給用戶更強的瞬間記憶,在信息傳播上更是具有“一圖頂萬言”的效能。

2.2.3 色彩元素

色彩元素是表現(xiàn)界面形象的首要視覺元素,不同的色彩會讓用戶產(chǎn)生不一樣的心理效應(yīng)。視覺研究表明,好的色彩設(shè)計可以表現(xiàn)出強烈的視覺沖擊力和藝術(shù)感染力,能提高用戶瀏覽頁面時的舒適度和感知愉悅性。

2.3 常見的界面分析

用戶界面存在于所有人機交互的領(lǐng)域,好的界面設(shè)計能滿足用戶對界面的使用需求,使用戶快速找到目標信息,引導(dǎo)用戶將注意力放在設(shè)計者想要他們關(guān)注的信息上,同時也能準確傳達和反饋信息。

衣、食、住、行是人類社會生活的基本內(nèi)容,作為設(shè)計師,應(yīng)該將目光放在解決人類的基本生存問題和最低需求上,即馬斯洛需求層次的最低需求,生理需求。隨著信息技術(shù)的不斷發(fā)展,人們越來越多地使用手機進行點餐,點餐界面已經(jīng)成為人們生活的一部分,每天都要不可避免地接觸到。

通過對南京地區(qū)使用程度較高的3款點餐界面(南京大排檔、貓抓烤肉、海底撈)進行分析,可以發(fā)現(xiàn)它們之間存在一些相同的特性。

2.3.1 視覺元素自下而上分布

結(jié)合用戶瀏覽模式中自下而上的路徑,可以將最想表達的重要信息分布在用戶的視覺興趣區(qū)內(nèi)(上部),可以增加信息的顯著性。此外,讓重點信息與周圍其他次要信息形成視覺差,例如將字體加粗放大、色彩對比、添加背景色、留白等,可以使其更加醒目。

2.3.2 引導(dǎo)視覺搜索

導(dǎo)航欄引導(dǎo)視覺查詢一般分為主導(dǎo)航和次導(dǎo)航。用戶通常使用大拇指完成界面上的手部操作,因此,主導(dǎo)航通常采用頂部或左部導(dǎo)航,而次導(dǎo)航一般采用頂部圖標導(dǎo)航進行搜索。主導(dǎo)航會對菜品進行了一個大致的分類,可以幫助用戶快速獲取目標信息,而次導(dǎo)航則可以讓用戶進行精準搜獲信息,二者結(jié)合可以提高視覺信息搜索效率。

2.3.3 色彩層級引導(dǎo)

界面配色一般由品牌色和輔助色構(gòu)成,品牌色可以直觀地展現(xiàn)品牌風格和產(chǎn)品特征,輔助色則可以區(qū)分不同視覺要素的功能。通過相同的色彩形成相似性,通過不同的色彩形成對比來拉開信息的視覺層級。以南京大排檔點餐界面為例,從其品牌Logo可知它的品牌色為深棕色,也是其界面字體的所用色,界面中的其他3個主要顏色均為品牌色的相似色,而某些菜品的特殊標簽為輔助色紅色,紅色與其他顏色形成明顯的對比關(guān)系,可以引發(fā)用戶對有紅色標簽的菜品更多的注意和關(guān)注。

2.3.4 文字和圖片的主次關(guān)系

文字在界面設(shè)計中是傳達信息的主要載體,圖片輔助文字做進一步的信息說明。圖片是界面中最容易被最先注意的元素,也是最直觀傳達信息的元素。設(shè)計師需運用好文字的顏色、大小和樣式以及圖片的大小、排列和分布,可以讓整個界面的信息層次清晰,使用戶更快速有效地獲取信息。

3 視覺感知對界面設(shè)計的影響

3.1 視覺心理習(xí)慣

用戶的視覺心理習(xí)慣是界面設(shè)計和信息可視化的依據(jù),因此在進行界面設(shè)計時,設(shè)計師需要了解視覺心理習(xí)慣對用戶進行視覺瀏覽時的影響。

在視覺心理中,格式塔視覺原理對界面設(shè)計有較大的影響,格式塔原理闡明了視覺元素之間的關(guān)系以及元素與背景的關(guān)系等,讓設(shè)計師可以依據(jù)其包含的原則做界面設(shè)計。

3.1.1 接近性原則

接近性原則是指在手界面中,用戶視覺上會將位置靠近的元素歸為同屬性。在界面設(shè)計時,可以將同類的元素放在鄰近的位置,便于用戶歸類同組的信息,例如點餐界面中的菜單導(dǎo)航就是應(yīng)用了這一原則。

3.1.2 相似性原則

相似性原則是指擁有相似視覺特征的元素會被認為是一組,這些視覺特征包括擁有相似的形狀或色彩等,相似性原則主要被應(yīng)用在界面的圖標設(shè)計中。

3.1.3 閉合性原則

閉合性原則是指用戶視覺心理習(xí)慣會把一個局部元素認知為一個整體的閉合的圖形。簡單來說就是當我們看到物體的不完整部分時,可以很快地依據(jù)過往經(jīng)驗使其恢復(fù)原狀。

3.1.4 區(qū)域聯(lián)想原則

區(qū)域聯(lián)想原則是指用戶的視覺會根據(jù)自身大腦的記憶或經(jīng)驗,把一個區(qū)域內(nèi)現(xiàn)有的元素聯(lián)想為另一個相近的整體圖形。

3.1.5 連續(xù)性原則

連續(xù)性原則是指用戶的視覺心理會使其傾向于把原本斷續(xù)的元素組成連續(xù)的輪廓或重復(fù)的圖形。在界面設(shè)計中,將亂序的元素組成整齊的網(wǎng)格,可以使用戶在視覺上快速適應(yīng)這種連續(xù)的元素,從而增強用戶的視覺體驗和感知愉悅性。

3.2 視覺游覽軌跡

用戶主要通過眼睛從界面上獲取信息,因此了解用戶的視覺瀏覽模式對界面設(shè)計至關(guān)重要?！癋”型模式是2006年尼爾森諾曼發(fā)表的《眼球軌跡的研究》一文中提及,他研究發(fā)現(xiàn)用戶在界面上的瀏覽軌跡呈現(xiàn)為“F”型[8],如圖1所示,用戶的視線通常最先對界面的上半部分區(qū)域做水平方向的快速瀏覽運動,形成一條趨于橫向的運動軌跡,即“F”的第一條橫線。然后用戶的視線通常會略微下移,對中部偏上的區(qū)域做第二次水平方向的快速瀏覽,即“F”字母的第二條橫線。

圖1 三種不同性質(zhì)網(wǎng)頁的眼動熱點圖

通過“F”型瀏覽模式可以發(fā)現(xiàn)頁面頂部和左側(cè)的信息更能引起用戶的關(guān)注,因此,設(shè)計師在設(shè)計界面時應(yīng)盡可能將最想傳達的內(nèi)容放在界面的頂部和左側(cè)。

除此以外的瀏覽模式還有割草機模式、彈球模式、分層蛋糕模式和斑點模式[9]。在界面設(shè)計中,可以利用這些瀏覽模式,合理分配界面元素和信息要素,從而提升用戶瀏覽效率和感知愉悅性。

4 基于點餐界面的眼動實驗設(shè)計

4.1 目標和假設(shè)

基于上述研究和理論,本實驗旨在探討界面設(shè)計中的視覺要素如何影響用戶注意力和視覺感知愉悅性。在選擇點餐界面時,針對該界面中的圖形元素和文字元素這2個主要元素進行實驗,得出用戶的注意力和視覺感知愉悅性與這些視覺要素的關(guān)系。

假設(shè)圖形元素的不同大小和分布會吸引用戶不同程度的注意力,相比其他元素,圖片元素本身就更具吸引力,而較大的圖片更會被用戶第一時間關(guān)注到,根據(jù)視線瀏覽軌跡的“F”模型,偏上部的圖片也會吸引更多的注意力。然后,根據(jù)視覺心理習(xí)慣的接近性原則,假設(shè)越靠近吸引人的圖形的文字會吸引用戶更多的注意力。

4.2 方法

4.2.1 實驗人員

6名參與者加入實驗(年齡范圍:21—23歲),都是同一專業(yè)的大學(xué)生自愿參加這項研究,所有參與者視力正?；虺C正視力正常。

4.2.2 材料

使用3張自己制作的點餐界面,除了最大圖片的位置分布外,其他均相同。每張界面的字體有大小、顏色以及背景的不同,每張界面的圖片有大小和位置分布的不同。

使用Tobii x-120眼動儀(ET)記錄參與者對每張界面的視覺探索。Tobii系統(tǒng)允許研究人員對每個參與者進行快速和自動的校準程序,該系統(tǒng)是無障礙的,允許自由的頭部運動,允許自發(fā)的行為。

4.2.3 程序

參與者來到實驗室,先對被試人員進行編號,按照編號順序依次進行實驗,實驗每人進行一次。要求被試人員坐在設(shè)備前,雙眼位于屏幕正中,且距離屏幕約60 cm。實驗前需進行校準,校準由系統(tǒng)自動執(zhí)行。實驗時圖片將由計算機系統(tǒng)自動呈現(xiàn)在顯示器上,每張實驗圖片展示10 s,在每張實驗圖片切換間隙插入一張純黑背景作為過渡,防止過渡太快導(dǎo)致視覺殘留現(xiàn)象造成影響,過渡圖片展示3 s。展示結(jié)束后實驗自動結(jié)束,儀器自帶軟件會記錄實驗數(shù)據(jù)。

4.3 實驗數(shù)據(jù)分析

4.3.1 軌跡圖分析

不同階段的眼動注視點圖如圖2所示。當最大圖在頂部時,如圖2(a)所示,從6個被試人員的軌跡圖的視線點的數(shù)量分布來看,首先,頂部最大的圖片在圖形元素中分布了最多的視線點,且注視點數(shù)量由上往下遞減。其次,在白色背景上的文字比在圖片背景上的文字分布更多的注視點。最后,與圖片更靠近的文字比距離圖片較遠的文字分布更多的注視點。從視線點的順序分布來看,視線點1—10的聚集區(qū)域主要分布在界面的頂部圖片,不難看出大多的被試人員都是最先關(guān)注到頂部最大的那張圖。

圖2 不同階段的眼動注視點圖

當最大圖在中部時,如圖2(b)所示,從6個被試人員的軌跡圖的視線點的數(shù)量分布來看,中部最大的圖片在圖形元素中分布了最多的視線點,且注視點數(shù)量由最大的那張圖往周圍遞減。當最大圖在中部時,用戶的注視點更多的分布在圖片上,而非文字上。從視線點的順序分布來看,視線點1—10的聚集區(qū)域主要分布在界面的中部和頂部,不難看出大多的被試人員都是最先關(guān)注到最大的那張圖,也有部分被試人員最先關(guān)注頂部的圖片。

當最大圖在底部時,如圖2(c)所示,從6個被試人員的軌跡圖的視線點的數(shù)量分布來看,底部最大的圖片在圖形元素中分布了最多的視線點,且注視點數(shù)量由下往上遞減,但總體分布較為平均,沒有顯著的差異。當最大圖在底部時,用戶的注視點更多的分布在文字上,且注視點數(shù)量由下往上遞減,但總體分布較為平均,沒有顯著的差異。從視線點的順序分布來看,視線點1—10的聚集區(qū)域主要分布在界面的底部,不難看出大多的被試人員都是最先關(guān)注到最大的那張圖,也有部分被試人員最先關(guān)注偏上的圖片。

4.3.2 熱點圖分析

如圖3所示,從左到右分別是最大圖位于上、中、下時6位被試人員的總體熱點圖?？梢钥闯?當最大圖位于頂部時,被試人員的視線熱點集中在最大圖及下面;當最大圖位于中部時,被試人員的視線熱點集中在最大圖及周邊;當最大圖位于底部時,被試人員的視線熱點則分布較為均勻,且中部稍有集中。

圖3 不同階段的眼動熱點圖

4.3.3 數(shù)據(jù)表格分析

從第一次注視時間的表格來看,如表1所示,當最大圖在頂部時,被試人員可以最快地注視到,平均需要0.98 s;當最大圖在中部時,平均需要1.15 s;而當最大圖在底部時,被試人員注視到的時間最長,需要1.22 s。

表1 最大圖所處不同位置的反應(yīng)時間和平均值

從注視時間總時長的表格來看,如表2所示,當最大圖在頂部時,被試人員注釋的時間最長,平均注視1.53 s;其次是當最大圖在中部時,平均注視1.41 s;而當最大圖在底部時,被試人員注視的時間最短,平均注視1.26 s。

表2 最大圖所處不同位置的注視時間和平均值

4.4 實驗結(jié)果

4.4.1 圖形元素結(jié)果

通過對實驗數(shù)據(jù)的分析總結(jié),當最大圖位于頂部時可以吸引用戶更多的注意力,并且最大圖的分布位置也可以連帶增加其周圍圖片的關(guān)注度,但是當最大圖位于底部時,往往不能因為大小的優(yōu)勢吸引更多的注意力,大多的用戶還是會按照視覺感知習(xí)慣由上往下進行游覽。因此,在界面設(shè)計時,應(yīng)該將最想傳達的圖片信息放大并置于界面頂部,并將其次想傳達的圖片信息盡量靠近最大圖放置,有利于用戶快速獲取目標信息。

4.4.2 文字元素結(jié)果

通過對實驗數(shù)據(jù)的分析總結(jié),文字背景是白色時吸引到的用戶注意力大于文字背景是圖片時吸引到的用戶注意力;越靠近圖片的文字越能吸引更多的注意力。因此,在界面設(shè)計時,應(yīng)該盡量保持文字背景的簡約空白,并且給最想傳達的文字信息加以配圖片或圖標,以引起用戶的游覽興趣和關(guān)注,有利于用戶快速獲取目標信息。

5 結(jié)語

本文在信息科技飛速發(fā)展,手機界面應(yīng)用廣泛的背景下,首先對界面設(shè)計的基礎(chǔ)和依據(jù)即視覺感知機制進行了闡述。然后分析了界面設(shè)計的研究現(xiàn)狀,了解了界面設(shè)計的基本原則、界面的視覺要素以及對現(xiàn)有使用較多的界面進行具體的分析。其次研究了視覺感知對界面設(shè)計的影響,根據(jù)用戶的視覺習(xí)慣,合理分配界面和信息要素,從而提升用戶感知愉悅性和游覽效率。最后根據(jù)以上研究和理論,針對點餐界面設(shè)計眼動實驗,分析數(shù)據(jù)得出結(jié)論,從而驗證假設(shè),得出更合理的界面設(shè)計方案。但本文還存在諸多不足,例如沒有對色彩元素進行進一步實驗、被試人員數(shù)量過少等。希望本文可以給設(shè)計師在界面設(shè)計上更多的參考和啟發(fā)。