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

笪潔如,李亞軍

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

0 引言

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

1 視覺感知機制

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

1.1 視覺通道

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

1.2 視覺搜索

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

1.3 視覺感知

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

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

2 界面設計研究現狀

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

2.1 界面設計的基本原則

2.1.1 一致性原則

在視覺方面,無論是字體還是顏色的設計,都需保證視覺上的風格統一,使頁面整體結構合理一致。在操作方式方面,預設的界面操作應與用戶的操作習慣一致,減少經驗對用戶操作的影響,提高用戶的操作效率。

2.1.2 易用性原則

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

2.1.3 情感性原則

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

2.1.4 直觀性原則

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

2.1.5 美觀性原則

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

2.2 界面中的視覺元素

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

2.2.1 文本元素

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

2.2.2 圖形元素

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

2.2.3 色彩元素

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

2.3 常見的界面分析

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

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

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

2.3.1 視覺元素自下而上分布

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

2.3.2 引導視覺搜索

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

2.3.3 色彩層級引導

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

2.3.4 文字和圖片的主次關系

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

3 視覺感知對界面設計的影響

3.1 視覺心理習慣

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

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

3.1.1 接近性原則

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

3.1.2 相似性原則

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

3.1.3 閉合性原則

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

3.1.4 區域聯想原則

區域聯想原則是指用戶的視覺會根據自身大腦的記憶或經驗,把一個區域內現有的元素聯想為另一個相近的整體圖形。

3.1.5 連續性原則

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

3.2 視覺游覽軌跡

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

圖1 三種不同性質網頁的眼動熱點圖

通過“F”型瀏覽模式可以發現頁面頂部和左側的信息更能引起用戶的關注,因此,設計師在設計界面時應盡可能將最想傳達的內容放在界面的頂部和左側。

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

4 基于點餐界面的眼動實驗設計

4.1 目標和假設

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

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

4.2 方法

4.2.1 實驗人員

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

4.2.2 材料

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

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

4.2.3 程序

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

4.3 實驗數據分析

4.3.1 軌跡圖分析

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

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

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

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

4.3.2 熱點圖分析

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

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

4.3.3 數據表格分析

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

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

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

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

4.4 實驗結果

4.4.1 圖形元素結果

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

4.4.2 文字元素結果

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

5 結語

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