基于眼動追蹤技術的新聞網頁設計優化*

王宇杰，王 燃，陳 楠，葉 潔，劉瑋琳

（青島理工大學 管理工程學院，山東 青島 266500）

1 概述

新聞網頁是指通過將網上規模龐大、種類復雜的新聞和資訊進行分類、整合并提供搜索引擎來為用戶提供服務的系統。在PC端市場，新聞網頁是當前使用最廣泛的新聞傳播方式。它是繼報紙、廣播、電視后出現的第四大新聞媒體，以互聯網為媒介，使得傳統新聞能夠突破原有的新聞傳播體驗，在時效性、真實性、保存性、豐富性和選擇性等方面獲得了巨大的突破和提升。

前期調研發現：不同新聞網站的網頁界面設計在功能上同質化程度較高，但布局設計質量參差不齊，并且界面布局設計質量會影響用戶的使用體驗，好的設計質量會給人好的用戶體驗，并且有更高的持續使用意愿。2005年，Russell等研究人員通過兩組對比試驗，進而找到了網站使用者在瀏覽網站時候的興趣區域，肯定了眼動追蹤技術在網頁界面可用性測試中的貢獻[1]。王詩傲通過使用眼動追蹤技術對工業設計服務網站評估體系進行了研究，證明了眼動分析運用到工業設計服務網站評估體系建設中是可行的[2]。在產品設計領域，隨著“以用戶為中心”[3]的設計理念逐漸深入人心，對于新聞網站而言，其界面布局設計質量也越發受到重視。學者Nielsen曾利用眼動追蹤技術對232名被試進行瀏覽網頁時的視覺瀏覽模式，發現被試在瀏覽網頁時大多呈現出“F”型模式（F-shaped pattern），即人們瀏覽網頁時，大多數情況下都會不由自主的以F形狀的模式瀏覽網頁，這種情況也就決定了網頁在F型區域的關注度比較高[4]。劉瑋琳在進行網頁界面用戶滿意度影響因素的研究中，使用了通過分析網頁界面設計要素（影響因素）研究對用戶滿意度的影響[5]。2010年李振華研究結果認為，當前很多新聞網站的建設僅僅是傳統媒體的網絡化，不注重對自身品牌的經營，沒有發揮出網絡媒體的優勢，因此新聞網頁的設計應該注重人性化的特色，并從視覺識別系統的標志設計、色彩設計和字體設計等方面展開對新聞網站設計方法的論述[6]。2014年，郭伏等人根據眼動試驗所得到的眼動相關數據與用戶情感體驗相互聯系，建立了聯系模型，根據模型對網站界面設計提出了相應建議[7]。為了提高新聞網頁界面的用戶體驗水平，提升新聞網站的持續使用意愿，幫助提升其市場競爭力，本文依據人因工程學理論和方法[8]，基于眼動追蹤技術，在不同的任務驅動下（即用戶不同的使用目的）[9]出發，對新聞網頁布局進行優化研究。

2 實驗設計

研究選用騰訊新聞網界面作為實驗材料，以不同的網頁布局形式為自變量，用戶滿意度及眼動指標為因變量，以探究影響用戶體驗的網頁布局因素。

2.1 被試

本研究通過發布懸賞公告的方式招募了82名在校生作為被試參加眼動實驗。被試者要求參加實驗時身體健康，對紅外線沒有抵觸情況，視力或矯正視力正常，裸眼視力度數在500度以下，散光度數在50度以下，無色盲、色弱，均為右利手，其中有2名被試因視力等原因被剔除，有效被試80人，分為兩組，分別進行兩組不同的實驗。其中男性占43.8%，女性占56.2%，年齡段均在18～21歲之間。

2.2 實驗儀器

實驗儀器為德國SMI公司生產的RED型桌面遙測式眼動追蹤系統。硬件（如圖1）包括一臺用于主試監控實驗流程、記錄和分析實驗數據的Dell筆記本電腦，一臺用于向被試呈現刺激材料的圖像顯示器，以及安裝在圖像顯示器下方的紅外光源及RED攝像頭。軟件包括Experiment Center刺激呈現設計軟件、iView XTMRED眼動儀操作軟件和BeGazeTM眼動數據分析軟件。

圖1 遙測式眼動追蹤系統（硬件）

圖2 遙測式眼動追蹤系統（軟件）

2.3 材料設計

本研究選擇騰訊新聞網首頁（網頁1，如圖3）為研究材料。以前期調查研究和以下兩個方案為基礎，對初始材料進行優化：

方案一：當網頁設計者的目的是讓用戶更多注意到普通新聞時，網頁重點內容的分布應更加均勻，即針對網頁的整體布局進行優化。將導航欄進行合并刪減并將其置于網頁的最上方，并使圖片均勻分布在整個網頁中，以引導用戶對整個網頁的注視增加、增大圖片周圍普通新聞被閱讀的概率。以此設計出優化后的網頁2（如圖4）。

方案二：當網頁設計者的目的是讓用戶更多注視到要聞區域時，網頁的重點內容應集中在更容易被用戶注視到的區域，并通過圖片等形式進行引導。將導航欄進行合并刪減并將其置于網頁的最上方，將重點內容集中在用戶更容易注視到的“F”區域內，普通新聞放置在頁面的右側以及下側。以此設計出優化后的網頁3（如圖5）。

2.4 實驗過程

2.4.1 問卷調查

在主觀方面以上述三種網頁為基礎，設計調查問卷，通過被試主觀感受對不同網頁進行滿意度調查打分，以確保優化后的網頁用戶體驗均有所提升。滿意度分值分為-3～3分共6級。

2.4.2 眼動實驗

在客觀方面，通過眼動實驗獲取眼動數據，驗證優化后的網頁注視范圍、注視軌跡的變化，主要分為兩組：第一組為自由瀏覽網頁，研究被試在正常瀏覽新聞網頁時的各項指標；第二組為有任務瀏覽網頁，選取網頁內關鍵詞，研究不同的網頁布局對被試視覺搜索效率的影響。

眼動指標：

（1）透視圖是一個可視化視圖，它是通過記錄和分析被測試者在界面各區域注視點的數量和注視時間的長短，通過所在區域明亮程度來代表用戶對此區域更感興趣。通過透視圖可以研究被試人員實驗過程中瀏覽和凝視的重點、非重點區域。

（2）眼動軌跡也稱掃描路徑圖，它是一系列注視點和眼跳的空間分布。通過數字標記的點來表示注視點和注視順序，通過線條來表示眼跳的過程，依次來探究用戶在瀏覽網頁時的眼動順序與網頁布局的影響。

實驗流程：正式實驗之前，首先通過預實驗，進一步完善實驗流程，修正及檢查可能在實驗中存在的問題，并確定被試的瀏覽時長。最終確定：自由瀏覽網頁任務下時間限定為16s，有任務瀏覽網頁的時間限定為10s。正式實驗的主要流程如下：

（1）向被試說明實驗流程，并引導被試在圖像顯示器前70cm左右的位置就坐，并保持舒適坐姿。

（2）采用五點法進行視線校準，保證校準精度小于0.6度。

（3）第一組實驗呈現自由瀏覽任務的實驗指導語一：以下將呈現三張不同布局的新聞網頁界面，請按照平時的瀏覽習慣進行瀏覽。

不同被試間隨機呈現三個網頁刺激，模擬被試在打開新聞網頁時，自由瀏覽時的情景。在時間到達16s后，點擊空格鍵進入下一張網頁圖片，三張網頁圖片均呈現后，自由瀏覽實驗結束。

圖3 網頁1

圖4 網頁2

圖5 網頁3

第二組實驗呈現有任務瀏覽的實驗指導語二：以下將呈現三張不同布局的新聞網頁界面，請在網頁中搜索目標——“奔馳女車主維權”這一關鍵詞，一旦搜索到關鍵詞目標，請立即點擊空格鍵。

2.5 提出假設

由于方案一優化目標為用戶對網頁整體的注視增加，故依據方案一對實驗結果提出假設：在自由瀏覽時，用戶對網頁2的瀏覽區域增加；在有任務瀏覽時，用戶的搜索效率降低。

圖6 滿意度調查均值

圖7 原網頁透視圖

圖8 網頁2透視圖

由于方案二優化目標為用戶對網頁要聞區域的注視增加，故依據方案二對實驗結果提出假設：在自由瀏覽時，用戶對網頁3的瀏覽區域集中，用戶對要聞的瀏覽數量增加；在有任務瀏覽時，用戶的搜索效率提升。

3 數據分析

3.1 問卷調查結果分析

對問卷調查結果進行網頁界面的單因素重復測量方差分析，結果顯示 F（2，56）=20.360，p<0.001，η2=0.368，說明三個網頁之間的用戶滿意度存在顯著差異。被試對重新設計后的網頁2滿意度比原網頁較高，接受程度較高；網頁3滿意程度最高，優化效果明顯。

3.2 方案一實驗結果分析

自由瀏覽任務下，原網頁與方案一優化后的網頁透視圖如圖7、圖8。

通過兩圖對比可以看出，使用方案一對原網頁進行優化后，用戶在自由瀏覽網頁時，注視到的區域更加廣泛，圖片對用戶注意力的引導作用得以體現，用戶對普通新聞的注視明顯增多。

有任務瀏覽下，原網頁與使用方案一優化后的網頁2的KPI圖如圖9、圖10。

結合上圖分析可知，在對網頁依據方案一進行優化后，用戶進入關鍵詞所在區域的次序高于原圖，說明用戶在網頁2中進行關鍵詞搜索時，視線不會過度集中在某一區域，注意力分布更加均勻，搜索效率降低，假設成立。

3.3 方案二的實驗結果分析

自由瀏覽任務下，方案二優化后的網頁透視圖如圖11。

根據圖11原網頁透視圖與上圖對比可知，使用方案二對網頁進行優化后，用戶在瀏覽網頁時，對重要內容的注視數量明顯增多，注視區域明顯增大。

有任務瀏覽下方案二優化后的網頁KPI圖如圖12。

根據圖12與圖9對比可知，在對原網頁依據方案二進行優化后，用戶進入關鍵詞所在區域的次序低于原圖，說明網頁3重要內容分布更加緊湊，用戶對其注意力提高，使搜索效率提升，假設成立。

4 研究局限與展望

（1）實驗對象選取方面，僅選擇在校大學生。但新聞網頁瀏覽人群中包含不同年齡段、不同職業的人。因此本研究結論只能說明目前在校大學生的一般瀏覽習慣，后續可以選擇更多的用戶群體開展研究，提升研究結果的普適性。

（2）本研究僅對靜態文本新聞和圖片新聞進行基礎研究，而實際上，大部分人機界面是以變化的交互界面傳遞動態的信息，后續可以以更加廣泛多樣的人機界面為研究對象開展研究。

5 結束語

（1）依據研究分析結果，且按照不同方向優化后的網頁2、網頁3，無論是在用戶體驗方面，還是在交互效率方面，都有顯著的提升。

圖12 網頁3 KPI圖

（2）發現并驗證了圖片會吸引用戶注意力，進而引導用戶注意到圖片周邊的文字內容的結論。

（3）當設計者傾向于用戶能夠均勻地注意到網頁整體內容時，可以采用重點內容和圖片均勻分布，以及通過這兩者結合吸引用戶閱讀周邊內容的方法實現；當設計者傾向于用戶更多地注意到網頁重要內容時，可以采用將重點內容集中放置在網頁左側與中間區域或使用圖片進行引導的方法實現。