基于眼動(dòng)追蹤技術(shù)的新聞網(wǎng)頁設(shè)計(jì)優(yōu)化*

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

（青島理工大學(xué) 管理工程學(xué)院，山東 青島 266500）

1 概述

新聞網(wǎng)頁是指通過將網(wǎng)上規(guī)模龐大、種類復(fù)雜的新聞和資訊進(jìn)行分類、整合并提供搜索引擎來為用戶提供服務(wù)的系統(tǒng)。在PC端市場(chǎng)，新聞網(wǎng)頁是當(dāng)前使用最廣泛的新聞傳播方式。它是繼報(bào)紙、廣播、電視后出現(xiàn)的第四大新聞媒體，以互聯(lián)網(wǎng)為媒介，使得傳統(tǒng)新聞能夠突破原有的新聞傳播體驗(yàn)，在時(shí)效性、真實(shí)性、保存性、豐富性和選擇性等方面獲得了巨大的突破和提升。

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

2 實(shí)驗(yàn)設(shè)計(jì)

研究選用騰訊新聞網(wǎng)界面作為實(shí)驗(yàn)材料，以不同的網(wǎng)頁布局形式為自變量，用戶滿意度及眼動(dòng)指標(biāo)為因變量，以探究影響用戶體驗(yàn)的網(wǎng)頁布局因素。

2.1 被試

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

2.2 實(shí)驗(yàn)儀器

實(shí)驗(yàn)儀器為德國(guó)SMI公司生產(chǎn)的RED型桌面遙測(cè)式眼動(dòng)追蹤系統(tǒng)。硬件（如圖1）包括一臺(tái)用于主試監(jiān)控實(shí)驗(yàn)流程、記錄和分析實(shí)驗(yàn)數(shù)據(jù)的Dell筆記本電腦，一臺(tái)用于向被試呈現(xiàn)刺激材料的圖像顯示器，以及安裝在圖像顯示器下方的紅外光源及RED攝像頭。軟件包括Experiment Center刺激呈現(xiàn)設(shè)計(jì)軟件、iView XTMRED眼動(dòng)儀操作軟件和BeGazeTM眼動(dòng)數(shù)據(jù)分析軟件。

圖1 遙測(cè)式眼動(dòng)追蹤系統(tǒng)（硬件）

圖2 遙測(cè)式眼動(dòng)追蹤系統(tǒng)（軟件）

2.3 材料設(shè)計(jì)

本研究選擇騰訊新聞網(wǎng)首頁（網(wǎng)頁1，如圖3）為研究材料。以前期調(diào)查研究和以下兩個(gè)方案為基礎(chǔ)，對(duì)初始材料進(jìn)行優(yōu)化：

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

方案二：當(dāng)網(wǎng)頁設(shè)計(jì)者的目的是讓用戶更多注視到要聞區(qū)域時(shí)，網(wǎng)頁的重點(diǎn)內(nèi)容應(yīng)集中在更容易被用戶注視到的區(qū)域，并通過圖片等形式進(jìn)行引導(dǎo)。將導(dǎo)航欄進(jìn)行合并刪減并將其置于網(wǎng)頁的最上方，將重點(diǎn)內(nèi)容集中在用戶更容易注視到的“F”區(qū)域內(nèi)，普通新聞放置在頁面的右側(cè)以及下側(cè)。以此設(shè)計(jì)出優(yōu)化后的網(wǎng)頁3（如圖5）。

2.4 實(shí)驗(yàn)過程

2.4.1 問卷調(diào)查

在主觀方面以上述三種網(wǎng)頁為基礎(chǔ)，設(shè)計(jì)調(diào)查問卷，通過被試主觀感受對(duì)不同網(wǎng)頁進(jìn)行滿意度調(diào)查打分，以確保優(yōu)化后的網(wǎng)頁用戶體驗(yàn)均有所提升。滿意度分值分為-3～3分共6級(jí)。

2.4.2 眼動(dòng)實(shí)驗(yàn)

在客觀方面，通過眼動(dòng)實(shí)驗(yàn)獲取眼動(dòng)數(shù)據(jù)，驗(yàn)證優(yōu)化后的網(wǎng)頁注視范圍、注視軌跡的變化，主要分為兩組：第一組為自由瀏覽網(wǎng)頁，研究被試在正常瀏覽新聞網(wǎng)頁時(shí)的各項(xiàng)指標(biāo)；第二組為有任務(wù)瀏覽網(wǎng)頁，選取網(wǎng)頁內(nèi)關(guān)鍵詞，研究不同的網(wǎng)頁布局對(duì)被試視覺搜索效率的影響。

眼動(dòng)指標(biāo)：

（1）透視圖是一個(gè)可視化視圖，它是通過記錄和分析被測(cè)試者在界面各區(qū)域注視點(diǎn)的數(shù)量和注視時(shí)間的長(zhǎng)短，通過所在區(qū)域明亮程度來代表用戶對(duì)此區(qū)域更感興趣。通過透視圖可以研究被試人員實(shí)驗(yàn)過程中瀏覽和凝視的重點(diǎn)、非重點(diǎn)區(qū)域。

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

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

（1）向被試說明實(shí)驗(yàn)流程，并引導(dǎo)被試在圖像顯示器前70cm左右的位置就坐，并保持舒適坐姿。

（2）采用五點(diǎn)法進(jìn)行視線校準(zhǔn)，保證校準(zhǔn)精度小于0.6度。

（3）第一組實(shí)驗(yàn)呈現(xiàn)自由瀏覽任務(wù)的實(shí)驗(yàn)指導(dǎo)語一：以下將呈現(xiàn)三張不同布局的新聞網(wǎng)頁界面，請(qǐng)按照平時(shí)的瀏覽習(xí)慣進(jìn)行瀏覽。

不同被試間隨機(jī)呈現(xiàn)三個(gè)網(wǎng)頁刺激，模擬被試在打開新聞網(wǎng)頁時(shí)，自由瀏覽時(shí)的情景。在時(shí)間到達(dá)16s后，點(diǎn)擊空格鍵進(jìn)入下一張網(wǎng)頁圖片，三張網(wǎng)頁圖片均呈現(xiàn)后，自由瀏覽實(shí)驗(yàn)結(jié)束。

圖3 網(wǎng)頁1

圖4 網(wǎng)頁2

圖5 網(wǎng)頁3

第二組實(shí)驗(yàn)呈現(xiàn)有任務(wù)瀏覽的實(shí)驗(yàn)指導(dǎo)語二：以下將呈現(xiàn)三張不同布局的新聞網(wǎng)頁界面，請(qǐng)?jiān)诰W(wǎng)頁中搜索目標(biāo)——“奔馳女車主維權(quán)”這一關(guān)鍵詞，一旦搜索到關(guān)鍵詞目標(biāo)，請(qǐng)立即點(diǎn)擊空格鍵。

2.5 提出假設(shè)

由于方案一優(yōu)化目標(biāo)為用戶對(duì)網(wǎng)頁整體的注視增加，故依據(jù)方案一對(duì)實(shí)驗(yàn)結(jié)果提出假設(shè)：在自由瀏覽時(shí)，用戶對(duì)網(wǎng)頁2的瀏覽區(qū)域增加；在有任務(wù)瀏覽時(shí)，用戶的搜索效率降低。

圖6 滿意度調(diào)查均值

圖7 原網(wǎng)頁透視圖

圖8 網(wǎng)頁2透視圖

由于方案二優(yōu)化目標(biāo)為用戶對(duì)網(wǎng)頁要聞區(qū)域的注視增加，故依據(jù)方案二對(duì)實(shí)驗(yàn)結(jié)果提出假設(shè)：在自由瀏覽時(shí)，用戶對(duì)網(wǎng)頁3的瀏覽區(qū)域集中，用戶對(duì)要聞的瀏覽數(shù)量增加；在有任務(wù)瀏覽時(shí)，用戶的搜索效率提升。

3 數(shù)據(jù)分析

3.1 問卷調(diào)查結(jié)果分析

對(duì)問卷調(diào)查結(jié)果進(jìn)行網(wǎng)頁界面的單因素重復(fù)測(cè)量方差分析，結(jié)果顯示 F（2，56）=20.360，p<0.001，η2=0.368，說明三個(gè)網(wǎng)頁之間的用戶滿意度存在顯著差異。被試對(duì)重新設(shè)計(jì)后的網(wǎng)頁2滿意度比原網(wǎng)頁較高，接受程度較高；網(wǎng)頁3滿意程度最高，優(yōu)化效果明顯。

3.2 方案一實(shí)驗(yàn)結(jié)果分析

自由瀏覽任務(wù)下，原網(wǎng)頁與方案一優(yōu)化后的網(wǎng)頁透視圖如圖7、圖8。

通過兩圖對(duì)比可以看出，使用方案一對(duì)原網(wǎng)頁進(jìn)行優(yōu)化后，用戶在自由瀏覽網(wǎng)頁時(shí)，注視到的區(qū)域更加廣泛，圖片對(duì)用戶注意力的引導(dǎo)作用得以體現(xiàn)，用戶對(duì)普通新聞的注視明顯增多。

有任務(wù)瀏覽下，原網(wǎng)頁與使用方案一優(yōu)化后的網(wǎng)頁2的KPI圖如圖9、圖10。

結(jié)合上圖分析可知，在對(duì)網(wǎng)頁依據(jù)方案一進(jìn)行優(yōu)化后，用戶進(jìn)入關(guān)鍵詞所在區(qū)域的次序高于原圖，說明用戶在網(wǎng)頁2中進(jìn)行關(guān)鍵詞搜索時(shí)，視線不會(huì)過度集中在某一區(qū)域，注意力分布更加均勻，搜索效率降低，假設(shè)成立。

3.3 方案二的實(shí)驗(yàn)結(jié)果分析

自由瀏覽任務(wù)下，方案二優(yōu)化后的網(wǎng)頁透視圖如圖11。

根據(jù)圖11原網(wǎng)頁透視圖與上圖對(duì)比可知，使用方案二對(duì)網(wǎng)頁進(jìn)行優(yōu)化后，用戶在瀏覽網(wǎng)頁時(shí)，對(duì)重要內(nèi)容的注視數(shù)量明顯增多，注視區(qū)域明顯增大。

有任務(wù)瀏覽下方案二優(yōu)化后的網(wǎng)頁KPI圖如圖12。

根據(jù)圖12與圖9對(duì)比可知，在對(duì)原網(wǎng)頁依據(jù)方案二進(jìn)行優(yōu)化后，用戶進(jìn)入關(guān)鍵詞所在區(qū)域的次序低于原圖，說明網(wǎng)頁3重要內(nèi)容分布更加緊湊，用戶對(duì)其注意力提高，使搜索效率提升，假設(shè)成立。

4 研究局限與展望

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

（2）本研究?jī)H對(duì)靜態(tài)文本新聞和圖片新聞進(jìn)行基礎(chǔ)研究，而實(shí)際上，大部分人機(jī)界面是以變化的交互界面?zhèn)鬟f動(dòng)態(tài)的信息，后續(xù)可以以更加廣泛多樣的人機(jī)界面為研究對(duì)象開展研究。

5 結(jié)束語

（1）依據(jù)研究分析結(jié)果，且按照不同方向優(yōu)化后的網(wǎng)頁2、網(wǎng)頁3，無論是在用戶體驗(yàn)方面，還是在交互效率方面，都有顯著的提升。

圖12 網(wǎng)頁3 KPI圖

（2）發(fā)現(xiàn)并驗(yàn)證了圖片會(huì)吸引用戶注意力，進(jìn)而引導(dǎo)用戶注意到圖片周邊的文字內(nèi)容的結(jié)論。

（3）當(dāng)設(shè)計(jì)者傾向于用戶能夠均勻地注意到網(wǎng)頁整體內(nèi)容時(shí)，可以采用重點(diǎn)內(nèi)容和圖片均勻分布，以及通過這兩者結(jié)合吸引用戶閱讀周邊內(nèi)容的方法實(shí)現(xiàn)；當(dāng)設(shè)計(jì)者傾向于用戶更多地注意到網(wǎng)頁重要內(nèi)容時(shí)，可以采用將重點(diǎn)內(nèi)容集中放置在網(wǎng)頁左側(cè)與中間區(qū)域或使用圖片進(jìn)行引導(dǎo)的方法實(shí)現(xiàn)。