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

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

1 概述

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

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

2 實驗設計

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

2.1 被試

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

2.2 實驗儀器

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

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

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

2.3 材料設計

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

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

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

2.4 實驗過程

2.4.1 問卷調(diào)查

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

2.4.2 眼動實驗

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

眼動指標：

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

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

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

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

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

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

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

圖3 網(wǎng)頁1

圖4 網(wǎng)頁2

圖5 網(wǎng)頁3

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

2.5 提出假設

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

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

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

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

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

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

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

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

3.2 方案一實驗結(jié)果分析

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

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

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

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

3.3 方案二的實驗結(jié)果分析

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

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

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

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

4 研究局限與展望

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

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

5 結(jié)束語

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

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

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

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