劉星彤，孟 放

(中國傳媒大學(xué) 信息工程學(xué)院，北京 100024)

?

基于眼動(dòng)儀分析新聞網(wǎng)頁的視覺瀏覽模式

劉星彤，孟 放

(中國傳媒大學(xué) 信息工程學(xué)院，北京 100024)

用戶在瀏覽網(wǎng)頁時(shí)，會因?yàn)橐曈X感知特性、自身瀏覽習(xí)慣及網(wǎng)頁布局引導(dǎo)等因素的影響，對網(wǎng)頁各區(qū)域的關(guān)注程度以及瀏覽順序形成某種固有的視覺瀏覽模式。該瀏覽模式可為新聞網(wǎng)頁的布局優(yōu)化提供依據(jù)，提升用戶對新聞信息的獲取效率，并為網(wǎng)頁的可用性提供評價(jià)標(biāo)準(zhǔn)。借助眼動(dòng)儀獲取用戶在瀏覽網(wǎng)頁時(shí)的視點(diǎn)運(yùn)動(dòng)信息。首先基于用戶的瀏覽習(xí)慣，通過預(yù)實(shí)驗(yàn)將新聞網(wǎng)頁劃分為若干個(gè)興趣區(qū)域；然后統(tǒng)計(jì)用戶在不同區(qū)域的視點(diǎn)數(shù)據(jù)，以獲取用戶對不同區(qū)域的關(guān)注程度和瀏覽順序，從而分析用戶在網(wǎng)頁瀏覽中的視覺瀏覽模式。以鳳凰資訊網(wǎng)站為例，對用戶在瀏覽新聞網(wǎng)頁時(shí)的關(guān)注模式進(jìn)行了分析。

眼動(dòng)儀；瀏覽模式；網(wǎng)頁可用性

新聞?lì)愰T戶網(wǎng)站是繼報(bào)紙、廣播、電視之后，被公認(rèn)的第四大新聞媒體。它融合了多種媒體形式，覆蓋范圍之廣、受眾群體之大是其他新聞媒體無法比擬的，因此新聞網(wǎng)站需要高效、準(zhǔn)確地向受眾傳達(dá)新聞信息。

用戶從網(wǎng)頁中獲取的信息有80%來源于視覺感知[1]。因此，用戶對新聞網(wǎng)站的瀏覽行為直接影響用戶對新聞內(nèi)容的獲取。充分認(rèn)識并發(fā)現(xiàn)這一行為的規(guī)律特征，分析網(wǎng)頁信息如何有效地布局以引導(dǎo)用戶的視覺行為，進(jìn)而提高新聞信息傳達(dá)效率，便成為了新聞網(wǎng)站設(shè)計(jì)者們研究的焦點(diǎn)。

用戶在瀏覽某一網(wǎng)頁時(shí)，在瀏覽順序、關(guān)注區(qū)域上可能存在某種特定偏好或習(xí)慣，稱之為網(wǎng)頁的視覺瀏覽模式[2]。這種模式的形成，一方面受到人類視覺本能特性的影響，另一方面是網(wǎng)頁布局引導(dǎo)的結(jié)果[3]。此外，用戶對此類網(wǎng)站是否有長期的使用習(xí)慣、是否有固有的認(rèn)知印象等因素，也會影響用戶網(wǎng)頁瀏覽的視覺瀏覽模式。

眼動(dòng)儀可以記錄下人的眼球運(yùn)動(dòng)，即眼動(dòng)。眼動(dòng)儀輸出的關(guān)鍵數(shù)據(jù)指標(biāo)包括注視時(shí)長、注視點(diǎn)數(shù)目、興趣區(qū)域和眼動(dòng)軌跡。隨著眼動(dòng)研究理論的不斷完善和精密眼動(dòng)追蹤設(shè)備的發(fā)展，眼動(dòng)儀逐步應(yīng)用到網(wǎng)頁可用性測試領(lǐng)域。眼動(dòng)儀可以記錄人眼在瀏覽網(wǎng)頁過程中的眼動(dòng)數(shù)據(jù)，從而作為視覺瀏覽模式分析的依據(jù)[4]。

本文介紹了基于眼動(dòng)儀的網(wǎng)頁瀏覽模式分析方法，并以鳳凰資訊新聞網(wǎng)頁為示例對用戶進(jìn)行測試。測試過程中用戶可以自由瀏覽網(wǎng)站首頁，眼動(dòng)儀會記錄下被試的視點(diǎn)信息。經(jīng)過分析得出用戶對新聞網(wǎng)站的視覺瀏覽模式，該結(jié)論可為相關(guān)網(wǎng)頁布局的合理性提出評價(jià)指標(biāo)，并為新聞內(nèi)容的布局優(yōu)化提供依據(jù)，從而提升用戶對新聞信息的獲取效率。

1 基于眼動(dòng)儀的網(wǎng)頁瀏覽模式分析方法

1.1 眼動(dòng)儀及眼動(dòng)分析軟件

本實(shí)驗(yàn)所采用的眼動(dòng)儀為Tobii X2-30，它的取樣頻率為30 Hz，可以固定在筆記本、計(jì)算機(jī)屏幕或者平板上來實(shí)現(xiàn)緊湊、高度便攜的眼動(dòng)追蹤解決方案，適用于針對網(wǎng)頁的眼動(dòng)實(shí)驗(yàn)，具有較高的靈活性和便攜性。

Tobii X2-30眼動(dòng)儀使用的分析軟件為Tobii Studio，它所提供的數(shù)據(jù)可視化工具有熱點(diǎn)圖、眼動(dòng)軌跡圖和聚簇圖等。熱點(diǎn)圖使用不同的顏色來呈現(xiàn)被試者對一張圖像的關(guān)注區(qū)域，或用來展示被試在某個(gè)區(qū)域的視覺停留時(shí)間；眼動(dòng)軌跡圖是指在一副靜態(tài)背景圖上呈現(xiàn)注視點(diǎn)的順序和位置；聚簇圖可在背景圖上呈現(xiàn)注視點(diǎn)數(shù)據(jù)密度最大區(qū)域。

1.2 眼動(dòng)數(shù)據(jù)統(tǒng)計(jì)指標(biāo)

眼動(dòng)分析軟件可以對原始的眼動(dòng)數(shù)據(jù)進(jìn)行初步統(tǒng)計(jì)，得到相應(yīng)的統(tǒng)計(jì)指標(biāo)。用于視覺模式分析的主要眼動(dòng)指標(biāo)[5]見表1。

表1 眼動(dòng)數(shù)據(jù)統(tǒng)計(jì)指標(biāo)

1.3 網(wǎng)頁瀏覽模式分析一般方法

Jakob Nielsen于2006年提出了F形網(wǎng)頁瀏覽模式[5]，該研究基于232名實(shí)驗(yàn)對象瀏覽的近千張網(wǎng)頁。研究指出，大多數(shù)情況下用戶都習(xí)慣于不由自主地以F形狀的模式瀏覽網(wǎng)頁，這種基本恒定的網(wǎng)頁瀏覽習(xí)慣決定了網(wǎng)頁基本呈現(xiàn)F形的關(guān)注熱度。

網(wǎng)頁的瀏覽模式分析屬于視覺模式分析，在眼動(dòng)測量時(shí)采用的方法為自由瀏覽。自由瀏覽指的是用戶在沒有明確任務(wù)的情況下，對特定頁面或區(qū)域進(jìn)行瀏覽的行為。通常的實(shí)驗(yàn)流程設(shè)計(jì)如下[6]：

1)確定測試內(nèi)容，如指定頁面、特定內(nèi)容和區(qū)域等。

2)劃分興趣區(qū)域，根據(jù)頁面的功能布局，將頁面劃分為不同區(qū)域，以便后續(xù)眼動(dòng)數(shù)據(jù)的分析。

3)選取實(shí)驗(yàn)人員，根據(jù)用戶研究的相關(guān)理論，選取實(shí)驗(yàn)人員時(shí)，要注意人群的分布特點(diǎn)，盡量覆蓋到網(wǎng)站的所有用戶類型。其次，要注意區(qū)分已有用戶和潛在用戶。最后，視覺模式類的研究，實(shí)驗(yàn)人員的數(shù)量要在20人以上。

4)進(jìn)行眼動(dòng)實(shí)驗(yàn)，根據(jù)具體的網(wǎng)頁類型和內(nèi)容，設(shè)定自由瀏覽的時(shí)長。

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

鳳凰資訊是全球領(lǐng)先的跨平臺網(wǎng)絡(luò)新媒體，其日均覆蓋用戶數(shù)(UV)超過4 700萬，月度覆蓋用戶數(shù)超過4.3億，穩(wěn)居中國第四大門戶網(wǎng)站(見圖1)，因此采用鳳凰資訊作為示例新聞網(wǎng)頁進(jìn)行實(shí)驗(yàn)具有代表性[7]。下文介紹該實(shí)驗(yàn)的具體流程。

圖1 鳳凰資訊首頁部分截圖

2.1 實(shí)驗(yàn)設(shè)備和環(huán)境

該實(shí)驗(yàn)所用眼動(dòng)儀為Tobii X2-30，刺激材料播放的顯示器為Acer 4750G-2414G50Mnbb屏幕，14 in(1 in=2.54 cm)，分辨率為1 366×768。實(shí)驗(yàn)前需調(diào)整好被試的座椅與屏幕間的距離，以減少定標(biāo)過程中頭部位置的調(diào)整幅度。

2.2 實(shí)驗(yàn)對象選取

在選擇實(shí)驗(yàn)對象時(shí)，要充分考慮以下因素：

1)目標(biāo)用戶群體的人口統(tǒng)計(jì)學(xué)特征，如性別、職業(yè)、文化程度等；

2)是否有相關(guān)新聞網(wǎng)站的使用經(jīng)驗(yàn)，使用頻率如何；

3)考慮到本可用性測試采用眼動(dòng)實(shí)驗(yàn)的方式，要充分考慮被試的視力情況(對紅外線是否敏感、是否患有高度近視等)。

結(jié)合新聞網(wǎng)站的定位，根據(jù)社會學(xué)、人口統(tǒng)計(jì)學(xué)等方面的理論，按照角色法[8]的定義，確定了實(shí)驗(yàn)對象的特征屬性，如表2所示。

表2 實(shí)驗(yàn)對象的特征屬性

2.3 預(yù)實(shí)驗(yàn)

在正式實(shí)驗(yàn)執(zhí)行前，首先要進(jìn)行預(yù)實(shí)驗(yàn)。預(yù)實(shí)驗(yàn)有以下3個(gè)目的：1)確定自由瀏覽的時(shí)長；2)根據(jù)預(yù)實(shí)驗(yàn)結(jié)果進(jìn)行興趣區(qū)域的劃分；3)發(fā)現(xiàn)一些眼動(dòng)儀使用及實(shí)驗(yàn)設(shè)計(jì)上的問題并進(jìn)行修正。

參與預(yù)實(shí)驗(yàn)的被試者共有5人，其中男生2人、女生3人，均為在校大學(xué)生，被測網(wǎng)頁為鳳凰資訊。預(yù)實(shí)驗(yàn)過程中，被試人員可以按照日常瀏覽習(xí)慣對被測網(wǎng)頁進(jìn)行無任務(wù)的自由瀏覽，瀏覽時(shí)長不限，當(dāng)被測人員認(rèn)為達(dá)到瀏覽目的后，單擊鼠標(biāo)結(jié)束實(shí)驗(yàn)。根據(jù)預(yù)實(shí)驗(yàn)中被試的瀏覽時(shí)長的平均值，將正式實(shí)驗(yàn)的自由瀏覽時(shí)長設(shè)定為40 s。5位被試者的瀏覽時(shí)長如表3所示。

表3 預(yù)實(shí)驗(yàn)被試者的瀏覽時(shí)長

根據(jù)預(yù)實(shí)驗(yàn)中5位被試人員的眼動(dòng)記錄得到的聚簇圖，可以發(fā)現(xiàn)被試人員注視點(diǎn)聚集的區(qū)域在整個(gè)網(wǎng)頁的上半部分，因此，對網(wǎng)頁的興趣區(qū)域劃分采用如下方法：由上至下進(jìn)行三等分，分別稱之為上部、中部和下部。對其中的上部進(jìn)行興趣區(qū)域的詳細(xì)劃分。聚簇圖及網(wǎng)頁的興趣區(qū)域劃分見圖2。

圖2 網(wǎng)頁區(qū)域劃分(截圖)

2.4 正式實(shí)驗(yàn)

正式實(shí)驗(yàn)的主要流程如下：

1)提示語，即給被試者呈現(xiàn)提示語。提示語設(shè)定的瀏覽情景為：“假設(shè)你想看看今天鳳凰資訊上都有什么重要的新聞內(nèi)容”。

2)呈現(xiàn)網(wǎng)頁刺激材料，即播放網(wǎng)頁刺激材料(鳳凰資訊首頁)，瀏覽方式為自由瀏覽，瀏覽時(shí)長為40 s。在自由瀏覽的過程中，被試人員可以模擬日常使用瀏覽器瀏覽網(wǎng)頁的情景，可使用鼠標(biāo)滾輪進(jìn)行網(wǎng)頁的滑動(dòng)操作，但不能進(jìn)行鼠標(biāo)點(diǎn)擊操作。眼動(dòng)分析軟件Tobii Studio會對每一個(gè)被試人員的眼動(dòng)行為進(jìn)行記錄，形成一段獨(dú)立的眼動(dòng)錄像，并記錄下相關(guān)的眼動(dòng)數(shù)據(jù)，便于后續(xù)的數(shù)據(jù)統(tǒng)計(jì)分析。

3)口頭問答，即測試結(jié)束后，對被試人員進(jìn)行簡短的口頭問答?？陬^問答的目的在于剔除無效樣本，避免被試人員在測試過程中沒有按照情景設(shè)定進(jìn)行新聞內(nèi)容的瀏覽，而是無目的性的瀏覽?？陬^問答的內(nèi)容為要求被試人員復(fù)述一條在瀏覽過程中看到的新聞。若被試完全不能復(fù)述網(wǎng)頁中呈現(xiàn)的任意一條新聞，則將此被試者數(shù)據(jù)在后續(xù)的數(shù)據(jù)統(tǒng)計(jì)與分析中剔除。

2.5 數(shù)據(jù)統(tǒng)計(jì)

數(shù)據(jù)統(tǒng)計(jì)采用的軟件為Tobii Studio。該軟件可以根據(jù)實(shí)驗(yàn)記錄下來的眼動(dòng)數(shù)據(jù)輸出3種可視化工具圖：眼動(dòng)軌跡圖、熱點(diǎn)圖和聚簇圖。此外，Tobii Studio還可以導(dǎo)出記錄的原始數(shù)據(jù)，供其他工具進(jìn)行特定指標(biāo)的統(tǒng)計(jì)分析。

3 結(jié)果及分析

本實(shí)驗(yàn)主要統(tǒng)計(jì)的數(shù)據(jù)指標(biāo)有：區(qū)域首次注視時(shí)間(見圖3)、區(qū)域總訪問時(shí)間(見圖4)、區(qū)域?yàn)g覽人數(shù)百分比(見圖5)、區(qū)域?yàn)g覽順序(見圖6)。其中，圖3～圖5中的數(shù)據(jù)為有效樣本的均值。

圖3 區(qū)域首次注視時(shí)間(截圖)

圖4 區(qū)域總訪問時(shí)間(截圖)

圖5 區(qū)域?yàn)g覽人數(shù)百分比(截圖)

根據(jù)實(shí)驗(yàn)測試數(shù)據(jù)，可以進(jìn)一步從區(qū)域?yàn)g覽順序、區(qū)域關(guān)注程度兩方面得出用戶對該新聞網(wǎng)頁的視覺瀏覽模式，并對該網(wǎng)頁布局的合理性進(jìn)行整體評價(jià)。

3.1 區(qū)域?yàn)g覽順序

根據(jù)區(qū)域首次注視時(shí)間得出區(qū)域?yàn)g覽順序圖，更為直觀地展現(xiàn)用戶在瀏覽此新聞網(wǎng)站時(shí)的瀏覽順序偏好，如圖6所示。區(qū)域上所示的數(shù)字即代表用戶首次注意到此區(qū)域的順序。

圖6 區(qū)域?yàn)g覽順序(截圖)

由區(qū)域?yàn)g覽順序可以得到如下結(jié)論：1)用戶能夠較快注意到的區(qū)域依次為“要聞區(qū)”、“導(dǎo)航區(qū)”、“l(fā)ogo區(qū)”、“圖片新聞區(qū)”；2)網(wǎng)頁中部、下部區(qū)域，用戶注意到的時(shí)間較晚，甚至有用戶并沒有瀏覽底部區(qū)域。

因此新聞網(wǎng)頁在進(jìn)行頁面布局時(shí)，重要新聞內(nèi)容建議放置于頁面的左上方，并盡量集中在頁面的前1/3部分。此外，附加新聞圖片的形式可以有效吸引用戶的關(guān)注。

3.2 區(qū)域關(guān)注程度

衡量關(guān)注程度有兩個(gè)因素，一個(gè)是注視順序，一個(gè)是注視的時(shí)長。對應(yīng)的數(shù)據(jù)指標(biāo)即區(qū)域?yàn)g覽順序、區(qū)域總訪問時(shí)間。結(jié)合這兩個(gè)指標(biāo)，可以得出如下結(jié)論：

1)用戶停留較長時(shí)間的區(qū)域依次是要聞區(qū)、分類新聞區(qū)、圖片新聞區(qū)；

2)用戶在要聞區(qū)停留的時(shí)間要超過其他任何區(qū)域的兩倍以上，關(guān)注程度最高；

3)用戶能較快關(guān)注到靜態(tài)廣告、橫幅廣告，但注視時(shí)間很短，僅進(jìn)行粗略瀏覽。

此外，熱點(diǎn)圖和透明度圖也能反映用戶對整個(gè)網(wǎng)頁的關(guān)注程度，如圖7、圖8所示。其結(jié)論與數(shù)據(jù)指標(biāo)衡量的基本一致，用戶關(guān)注的部分大多數(shù)都集中在網(wǎng)頁上部。此外，通過熱點(diǎn)圖還能夠看出，用戶的瀏覽模式基本符合F型瀏覽模式，對網(wǎng)頁上部和左側(cè)的關(guān)注程度更高，向底部和右側(cè)的關(guān)注程度遞減。這是用戶習(xí)慣和網(wǎng)頁設(shè)計(jì)引導(dǎo)共同的結(jié)果。

圖7 鳳凰資訊首頁熱點(diǎn)圖(截圖)

圖8 鳳凰資訊首頁透明度圖(截圖)

3.3 網(wǎng)頁布局的合理性

根據(jù)以上分析，鳳凰資訊的首頁布局能夠按照F型瀏覽模式對用戶的視覺行為進(jìn)行引導(dǎo)，讓用戶在第一時(shí)間注意到要聞區(qū)域的重要新聞，并且呈現(xiàn)較為持久的關(guān)注，而且能夠讓用戶適當(dāng)被圖片新聞吸引，新聞內(nèi)容的布局合理。

但通過上述數(shù)據(jù)也可以看出，該網(wǎng)頁的廣告內(nèi)容投放效率較低。條幅廣告區(qū)的注視人數(shù)百分比僅為16%，注視時(shí)間為0.11 s，圖片廣告區(qū)的注視人數(shù)百分比僅為37%，注視時(shí)間為0.11 s。經(jīng)分析，被測網(wǎng)頁的圖片廣告和條幅廣告均為靜態(tài)廣告，并且顏色對比度與其周圍區(qū)域?qū)Ρ榷容^小，因此獲得的關(guān)注度較低。關(guān)于上述影響網(wǎng)頁的廣告投放效率的因素分析，仍需進(jìn)一步的實(shí)驗(yàn)驗(yàn)證。

4 小結(jié)

為研究用戶瀏覽新聞網(wǎng)頁時(shí)的視覺關(guān)注模式，本文基于眼動(dòng)儀的預(yù)實(shí)驗(yàn)結(jié)果，將鳳凰新聞網(wǎng)頁分成上中下3個(gè)區(qū)域，并在上部區(qū)域進(jìn)行了詳細(xì)的興趣區(qū)域劃分；然后設(shè)計(jì)了任務(wù)型眼動(dòng)實(shí)驗(yàn)，通過眼動(dòng)儀采集用戶自由瀏覽該網(wǎng)頁時(shí)的視點(diǎn)信息，并根據(jù)網(wǎng)頁的區(qū)域劃分對眼動(dòng)數(shù)據(jù)進(jìn)行相關(guān)指標(biāo)統(tǒng)計(jì)；最后從區(qū)域?yàn)g覽順序、區(qū)域關(guān)注程度來分析用戶對新聞網(wǎng)頁的瀏覽模式。

本文分析得出的用戶對新聞網(wǎng)站瀏覽模式有如下特點(diǎn)：1)用戶對新聞網(wǎng)站的關(guān)注熱度基本呈現(xiàn)“F”形，關(guān)注熱度由上至下、由左至右遞減。2)預(yù)實(shí)驗(yàn)反映用戶注視點(diǎn)的聚簇集中在頁面的前1/3(即首屏)，用戶對頁面的后1/3幾乎沒有關(guān)注度。3)用戶對頁面左上區(qū)域的瀏覽順序和關(guān)注時(shí)間均遠(yuǎn)超過其他區(qū)域，該區(qū)域的新聞信息的傳遞效率最高。

關(guān)于新聞網(wǎng)頁的廣告投放效果、動(dòng)態(tài)靜態(tài)圖片對用戶關(guān)注度的影響，仍可做進(jìn)一步的實(shí)驗(yàn)探究。

[1] 楊雄里.視覺的神經(jīng)機(jī)制[M].上海：上?？茖W(xué)技術(shù)出版社，1996.

[2] 趙乃迪.網(wǎng)頁布局對視覺搜索影響的眼動(dòng)研究[D].上海：復(fù)旦大學(xué)，2012.

[3] 陳真真.網(wǎng)頁瀏覽中的前注意與注意行為及其眼動(dòng)研究[D].杭州：浙江大學(xué)，2012.

[4] COWEN L. An eye movement analysis of Web page usability[D].Lancaster，U K：Lancaster University，2001.

[5] NIELSEN J.F-shaped pattern for reading Web content[EB/OL].[2016-03-03].https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/.

[6] SANTELLA A，DECARLO D. Robust clustering of eye movement recordings for quantification of visual interest[C]//Eye Tracking Research & Application Symposium, Etra 2004. San Antonio，Texas，Usa：[s.n.]，2004：27-34.

[7] 周婷.臺網(wǎng)融合趨勢下電視媒體網(wǎng)站的發(fā)展之道[D].合肥：安徽大學(xué)，2014.

[8] 燕保珠.眼動(dòng)研究在網(wǎng)站可用性測試中的應(yīng)用[D].北京：北京郵電大學(xué)，2011.

劉星彤(1993— )，碩士生，主研數(shù)字電視技術(shù)、視覺信息處理等；

孟 放(1972— )，女，碩士生導(dǎo)師，主要研究方向?yàn)閿?shù)字電視技術(shù)、視覺信息處理、視頻圖像處理等。

責(zé)任編輯：許 盈

Analysis of visual browsing pattern of news webpages based on eye trackers

LIU Xingtong，MENG Fang

(SchoolofInformationEngineering,CommunicationUniversityofChina,Beijing100024,China)

When users visit the webpage, some inherent pattern in browsing order and attention degree for different regions will be developed by factors such as visual instinct characteristics, browsing habits and page layout. This pattern can provide basis for layout optimization of news webpages, improve the efficiency of information acquisition and provide evaluation criteria for webpage usability. The captures user’s viewpoint information is captured based on eye tracker in the process of browsing. First, according to the user's browsing habits, the news webpage is divided into several regions of interest through the pre experiment. Then, viewpoint data is analyzed by different regions so as to get the user's attention degree and browsing order. This paper takes Phoenix News for example to analyze visual browsing pattern of news webpages.

eye tracker；browsing pattern；webpage usability

劉星彤，孟放. 基于眼動(dòng)儀分析新聞網(wǎng)頁的視覺瀏覽模式[J].電視技術(shù)，2016，40(12)：77-82. LI X T，MENG F. Analysis of visual browsing pattern of news webpages based on eye trackers[J].Video engineering，2016，40(12)：77-82.

TN949.6

A

10.16280/j.videoe.2016.12.015

2016-05-08