李滿海 鄭循藝

關(guān)鍵詞：科普 信息圖 眼動(dòng)實(shí)驗(yàn) 可用性 用戶體驗(yàn)

引言

科普是指利用各式傳媒手段向普通大眾進(jìn)行科學(xué)知識(shí)的通俗闡釋。科學(xué)作品多數(shù)由科學(xué)家以及傳媒從業(yè)人員編撰，并通過不同媒介展示，常見的如書本、紀(jì)錄片、雜志文章和網(wǎng)頁等。但具體的科學(xué)知識(shí)是抽象、晦澀的，在如今這樣一個(gè)“讀圖時(shí)代”，人們的閱讀習(xí)慣和視覺經(jīng)驗(yàn)都已發(fā)生了變化，我們更傾向于通過輕松愉悅的方式獲得資訊，這就對(duì)當(dāng)下科學(xué)的傳播手段提出了挑戰(zhàn)。信息圖（Infographics或Information Graphics）是一個(gè)合成詞，最初是指在傳統(tǒng)紙媒上所刊登的一般圖解（Diagram）。它可以將原本難以用語言表達(dá)的內(nèi)容視覺化，使其容易被人所理解[1]。信息圖的這一特性可以使之在科學(xué)普及的過程中發(fā)揮一定作用。而科普信息圖設(shè)計(jì)則是在對(duì)科學(xué)知識(shí)充分理解、提煉的基礎(chǔ)之上，通過對(duì)圖形、色彩、文字和圖表等要素的合理安排、布置將所要表現(xiàn)的內(nèi)容視覺化的過程[2]。

一、實(shí)驗(yàn)背景

設(shè)計(jì)師在進(jìn)行信息圖創(chuàng)作時(shí)不僅要關(guān)注作品的設(shè)計(jì)美感，還要重視用戶的視覺體驗(yàn)和內(nèi)容傳達(dá)的情感化特征[3]。所以進(jìn)行科普信息圖設(shè)計(jì)，必然離不開體驗(yàn)設(shè)計(jì)相關(guān)的研究方法。眼動(dòng)即眼球的運(yùn)動(dòng)，眼動(dòng)實(shí)驗(yàn)可以記錄用戶在視覺交互過程中的眼動(dòng)數(shù)據(jù)，其在工業(yè)設(shè)計(jì)、廣告設(shè)計(jì)、交通心理學(xué)研究、界面可用性研究等領(lǐng)域都有廣泛的應(yīng)用[4]。該項(xiàng)測(cè)試可以彌補(bǔ)傳統(tǒng)的用戶體驗(yàn)測(cè)試對(duì)用戶認(rèn)知過程定量研究的不足，這對(duì)于科普信息圖平面視覺體驗(yàn)研究具有重要的參考價(jià)值與實(shí)踐意義。

近些年來，在科普信息圖的研究中，周銀燕[5]提出了在全新的媒體環(huán)境下，科普信息圖這種形式可以使知識(shí)更為廣泛地傳播，使科學(xué)普及的效果得到提高。李湘皖[6]通過對(duì)不同類型信息圖的特征、主題、設(shè)計(jì)要點(diǎn)等方面的分析，將信息圖設(shè)計(jì)流程進(jìn)行了歸納總結(jié)，得出了一套行之有效的信息圖設(shè)計(jì)方法。許甲子[7]以醫(yī)療機(jī)構(gòu)的“戰(zhàn)疫”主題可視化創(chuàng)作案例為切入點(diǎn)，在教學(xué)實(shí)踐探索中，構(gòu)建出了適用于視覺傳達(dá)專業(yè)學(xué)生的信息圖設(shè)計(jì)思維方式。辛智晟[8]通過對(duì)“疫情地圖”的收集與解讀，提出在信息圖設(shè)計(jì)的過程中，需要具體考慮可視化主體、目標(biāo)對(duì)象人群與設(shè)計(jì)方法手段。這些研究中，多是通過對(duì)設(shè)計(jì)案例的歸納與分析來進(jìn)行科普信息圖設(shè)計(jì)的研究，而運(yùn)用眼動(dòng)實(shí)驗(yàn)的方法來研究科普信息圖設(shè)計(jì)的文章則沒有。

在有關(guān)眼動(dòng)實(shí)驗(yàn)的研究中，謝偉[9]以一款電飯煲人機(jī)交互界面的改良設(shè)計(jì)為例，提供了一種基于無意識(shí)認(rèn)知評(píng)估的，可兼顧可用性和用戶體驗(yàn)感的產(chǎn)品設(shè)計(jì)評(píng)估方法。孫瑞[10]通過眼動(dòng)測(cè)試與問卷調(diào)查的方法獲得被試注視非物質(zhì)文化遺產(chǎn)平面海報(bào)的焦點(diǎn)圖、軌跡圖與熱點(diǎn)圖，從可用性與用戶體驗(yàn)的角度，研究非遺平面視覺體驗(yàn)設(shè)計(jì)。武曉燕[11]以大學(xué)官方網(wǎng)站為眼動(dòng)實(shí)驗(yàn)素材，對(duì)師生員工瀏覽官網(wǎng)行為進(jìn)行研究，獲得了一系列的用戶瀏覽網(wǎng)頁眼動(dòng)數(shù)據(jù)與習(xí)慣偏好，研究結(jié)果可為高校官方網(wǎng)站的設(shè)計(jì)提供一定參考。尹浩東等[12]通過眼動(dòng)實(shí)驗(yàn)與熵權(quán)法分析法、層次分析法，研究更符合新一代消費(fèi)者審美訴求的白酒包裝設(shè)計(jì)風(fēng)格。從這些研究中可以發(fā)現(xiàn)，眼動(dòng)實(shí)驗(yàn)在設(shè)計(jì)領(lǐng)域中的應(yīng)用范圍比較廣泛，同時(shí)也說明了眼動(dòng)實(shí)驗(yàn)在科普信息圖設(shè)計(jì)研究中運(yùn)用具有可行性。

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

（一）被試：本次實(shí)驗(yàn)總共選取了21名被試，他們裸眼或矯正視力均正常，無色盲、色弱者。其中男生9名，女生12名，年齡皆在18歲到30歲之間。實(shí)驗(yàn)完成后剔除測(cè)試不成功的數(shù)據(jù)，最終得到15組實(shí)驗(yàn)數(shù)據(jù)。

（二）實(shí)驗(yàn)素材：實(shí)驗(yàn)素材分為結(jié)構(gòu)可視化信息圖與流程可視化信息圖兩個(gè)大類。如圖1～3所示，其中結(jié)構(gòu)可視化信息圖包括三幅不同風(fēng)格的生物形態(tài)結(jié)構(gòu)圖，分別是扁平化風(fēng)格紅海馬、插畫風(fēng)格胡蟬與實(shí)物照片的蜂鳥，圖片編號(hào)分別為P01、P02、P03，圖片的寫實(shí)程度與細(xì)節(jié)豐富程度逐漸增加；流程可視化信息圖中包括了四幅不同流程順序的科普信息圖，分別是豎直排列型（重力地貌形成過程）、水平排列型（雅丹地貌形成過程）、Z字形（拔智齒流程）、U字形（長(zhǎng)器竹編編制法），圖片編號(hào)依次序?yàn)镻04、P05、P06、P07。

（三）變量

1.自變量：結(jié)構(gòu)可視化信息圖的風(fēng)格，流程可視化信息圖的排列順序。

2.因變量：熱點(diǎn)圖，分析眼睛重點(diǎn)注視的區(qū)域，展現(xiàn)用戶所關(guān)注的焦點(diǎn)，常使用不同的顏色來表示被測(cè)試對(duì)不同區(qū)域的關(guān)注程度。

焦點(diǎn)圖，將被試觀看素材過程中所有的注視區(qū)域展現(xiàn)出來，可以聚焦最吸引人注意力的區(qū)域，并發(fā)現(xiàn)雙眼的觀察盲區(qū)。常使用亮斑來代表被試所關(guān)注的區(qū)域，以暗色區(qū)域來代表被試的視覺盲區(qū)。

注視時(shí)間，被試觀看某一素材時(shí)所耗費(fèi)的總時(shí)長(zhǎng)，注視時(shí)間越長(zhǎng)，說明用被試對(duì)該區(qū)域越感興趣。

首次注視時(shí)間，在眼動(dòng)測(cè)試過程中，對(duì)實(shí)驗(yàn)材料的關(guān)鍵區(qū)域畫塊，畫出的區(qū)塊稱為興趣區(qū)（Areas of Interest），簡(jiǎn)稱AOI。從實(shí)驗(yàn)開始到用戶第一次注視到某AOI的時(shí)間點(diǎn)就被稱為首次注視時(shí)間，時(shí)間點(diǎn)越短，表示越早看到該AOI。某個(gè)用戶群組的眼動(dòng)軌跡圖是根據(jù)每個(gè)AOI平均首次注視時(shí)間依次畫出其AOI注視順序。

注視點(diǎn)數(shù)，某素材興趣區(qū)內(nèi)注視點(diǎn)的數(shù)目，注視點(diǎn)指注視時(shí)長(zhǎng)大于100ms的視點(diǎn)，注視點(diǎn)越多說明被試的關(guān)注度越高。

平均注視時(shí)間，被試者觀看某一素材時(shí)，平均駐留每一個(gè)注視點(diǎn)的時(shí)長(zhǎng)，平均注視時(shí)長(zhǎng)越短代表搜索效率越高。

瞳孔直徑，人眼瞳孔直徑的大小可以反映人的情緒狀態(tài)，人處于積極情緒下時(shí)瞳孔直徑大于情緒穩(wěn)定時(shí)的瞳孔直徑[13]。同時(shí)，人處于負(fù)面情緒下時(shí)瞳孔的直徑小于情緒穩(wěn)定狀態(tài)時(shí)的瞳孔直徑[14]。

（四）實(shí)驗(yàn)設(shè)備：本次實(shí)驗(yàn)采用的設(shè)備是重慶愛威視公司自主研發(fā)的EV-PP2便攜式眼動(dòng)儀。其采樣率為120Hz，精準(zhǔn)度為0.5°，空間分辨率為0.5°，延遲時(shí)長(zhǎng)小于12ms。

（五）實(shí)驗(yàn)流程：實(shí)驗(yàn)流程分為兩部分：眼動(dòng)實(shí)驗(yàn)測(cè)試和量表評(píng)分問卷。實(shí)驗(yàn)開始前，首先將實(shí)驗(yàn)素材的內(nèi)容向被試進(jìn)行簡(jiǎn)單介紹，然后進(jìn)行雙眼校準(zhǔn)，校準(zhǔn)完成無誤后按編號(hào)順序播放實(shí)驗(yàn)圖片。其中實(shí)驗(yàn)素材P01至P03呈現(xiàn)時(shí)間各為10秒，實(shí)驗(yàn)素材P04至P07呈現(xiàn)時(shí)間各為20秒。眼動(dòng)測(cè)試完成后，被試將繼續(xù)完成一份關(guān)于實(shí)驗(yàn)素材的問卷調(diào)查。他們將對(duì)實(shí)驗(yàn)素材的吸引力、內(nèi)容認(rèn)知難易度、信息傳達(dá)準(zhǔn)確度進(jìn)行打分（5分制）。

三、實(shí)驗(yàn)結(jié)果分析

（一）結(jié)構(gòu)可視化信息圖可用性評(píng)估：結(jié)構(gòu)可視化信息圖的核心圖像作為一幅科普信息圖的主體部分，能使觀者對(duì)所要表現(xiàn)的對(duì)象有一個(gè)整體性的認(rèn)識(shí)，而文字標(biāo)題則可以使人初步了解信息圖所要傳達(dá)的主要內(nèi)容。因此，核心圖像與文字標(biāo)題作為被試注意力聚焦的關(guān)鍵區(qū)域，理應(yīng)成為科普信息圖設(shè)計(jì)過程中所要重點(diǎn)關(guān)注的部分。

從表1的熱力圖中我們可以發(fā)現(xiàn)，被試所關(guān)注的重點(diǎn)主要集中在信息圖核心圖像的上半部分，且以核心圖像的頭部為中心展開，相比較于核心圖像兩側(cè)的說明圖文，標(biāo)題文字的關(guān)注度相對(duì)較低。從表1焦點(diǎn)圖中我們可以看出，主體核心圖像上，大面積顏色變化較少區(qū)域的亮斑較少，如海馬的肚子、蟬的翅膀和蜂鳥的尾巴等區(qū)域，這些地方是被試視點(diǎn)的盲區(qū)。說明被試對(duì)核心圖像上色彩變化較少的區(qū)域關(guān)注度較低。同時(shí)，相比較于P01與P02的大面積塊狀亮斑，P03的核心圖像上呈現(xiàn)出分散的點(diǎn)狀亮斑分布，這說明被試者對(duì)實(shí)物圖像的核心圖形采取了碎片式視覺信息抓取。

據(jù)表2的數(shù)據(jù)：被試注視P01核心圖像的時(shí)間最長(zhǎng)，注視點(diǎn)數(shù)目也最多，這說明扁平化風(fēng)格的科普信息圖會(huì)引發(fā)觀者更多的關(guān)注度與興趣。此外，P02的標(biāo)題與說明文字的平均注視時(shí)長(zhǎng)最短，這表明被試對(duì)插畫風(fēng)格信息圖文字內(nèi)容的信息搜索效率更高。P03主體核心圖像的注視時(shí)長(zhǎng)和注視點(diǎn)數(shù)均是最少的，說明相比較而言，實(shí)物照片對(duì)被試的吸引力較低；但另一方面，P03的標(biāo)題與說明文字的注視時(shí)長(zhǎng)、注視點(diǎn)數(shù)均名列前矛，這表明了被試花費(fèi)了更多的精力閱讀P03的文本內(nèi)容，因此設(shè)計(jì)人員若設(shè)計(jì)信息圖的主要目的是讓觀者重點(diǎn)關(guān)注信息圖的文字內(nèi)容，則可以考慮使用實(shí)物照片來作為整幅圖的核心圖像。首次注視時(shí)間代表著從實(shí)驗(yàn)開始到被試第一個(gè)注視點(diǎn)進(jìn)入所劃定的興趣區(qū)的時(shí)間，這反映了實(shí)驗(yàn)素材對(duì)被試吸引力的程度，P01核心圖像區(qū)域被試的平均首次進(jìn)入時(shí)間僅為0.268s，遠(yuǎn)低于P02的0.713s和P03的0.971s，這說明用戶更容易被扁平化風(fēng)格的信息圖所吸引，若設(shè)計(jì)者希望通過核心圖像來快速地吸引觀者的注意力，則可以考慮使用這種風(fēng)格的設(shè)計(jì)。

（二）結(jié)構(gòu)可視化信息圖用戶體驗(yàn)評(píng)估：用戶體驗(yàn)評(píng)估往往是通過訪談與問卷測(cè)評(píng)的形式來進(jìn)行，所參考的是被測(cè)試者的訪談問答與評(píng)分結(jié)果。傳統(tǒng)的用戶體驗(yàn)評(píng)估往往帶有一定的主觀性，而基于人眼瞳孔大小測(cè)量值的用戶體驗(yàn)評(píng)估方法則可以與其互為補(bǔ)充。所以此次科普信息圖用戶體驗(yàn)評(píng)估采用問卷量表測(cè)評(píng)和瞳孔大小統(tǒng)計(jì)相兩種方式，對(duì)被試進(jìn)行用戶體驗(yàn)綜合評(píng)估。從表3的評(píng)分中我們可以看出，從瞳孔大小的測(cè)量值來看，上述三幅信息圖的用戶滿意度比較接近；而從被試評(píng)分量表可以看出，P01的吸引力最強(qiáng)，而P03的認(rèn)知難易程度最低，信息表達(dá)的準(zhǔn)確度最高，說明實(shí)物照片雖然吸引力不足，但是是比較容易地準(zhǔn)確表達(dá)信息的。

（三）流程可視化信息圖可用性評(píng)估

1.興趣區(qū)注視點(diǎn)順序：流程圖作為一種對(duì)動(dòng)態(tài)過程的靜態(tài)化展現(xiàn)，具有比較明顯的前后流程劃分，而對(duì)這些流程順序的導(dǎo)引往往是通過箭頭、編號(hào)或流程結(jié)構(gòu)的排版來實(shí)現(xiàn)的。一個(gè)成功的流程圖設(shè)計(jì)，需能夠正確地引導(dǎo)人們按順序進(jìn)行觀看。因此，我們將P04至P07的流程圖按標(biāo)題、流程圖圖像與說明文字進(jìn)行興趣區(qū)的劃分與編號(hào)，并統(tǒng)計(jì)每一個(gè)興趣區(qū)的平均首次進(jìn)入時(shí)間來排序，來驗(yàn)證被試有沒有按照科普信息圖所設(shè)計(jì)的順序進(jìn)行“讀圖”。

從表4中我們可以得出，被試在觀看水平排列流程圖時(shí)，注視點(diǎn)首先落在了中間靠左的AOI 4上，隨后跳向了大標(biāo)題，然后從AOI 2的說明文字AOI 3開始看起，閱讀完文字之后注視點(diǎn)再跳回AOI 2，然后閱讀AOI 4的說明文字，接下來看看第三步的圖片和其右下方的說明文字AOI 9，最后往回看第三步的文字與最后一幅圖片AOI 8。從被試的觀看順序中我們可以得出，對(duì)于水平排列的流程圖而言，被試的注視點(diǎn)是按照先中心、后標(biāo)題、從左至右、圖文相間的方式進(jìn)行，因此在設(shè)計(jì)時(shí)我們可以嘗試把標(biāo)題或所要表達(dá)的重點(diǎn)內(nèi)容放在信息圖的中心位置，這樣可以提高觀者的讀圖效率。在觀看信息圖P05時(shí)，被試的注視點(diǎn)首先落在了中間偏上的AOI 4上，然后閱讀了第一排的文字，并隨后按照大體從上向下的順序閱覽，文字和圖像也是相間閱覽，值得注意的是，和水平排列的流程圖相比，被試在閱覽豎直排列的信息圖的過程中，被試注意到標(biāo)題的時(shí)間較晚，同時(shí)每一步開始的時(shí)間也更晚，說明被試觀看豎直排列流程圖時(shí)每一步所花費(fèi)的時(shí)間更長(zhǎng)。在呈“Z”字形排版的流程圖P06中，被試的首次注視點(diǎn)落在了AOI 2之上，說明相比較于橫版和豎版的排列方式，“Z”字形排列的布局方式具有更佳的視線導(dǎo)引性，能夠正確引導(dǎo)被試閱覽流程的第一個(gè)步驟。但是被試在看完AOI 5之后，注視點(diǎn)直接進(jìn)入了AOI 8，而跳過了AOI 6，在看完AOI 8之后又修正跳回到AOI 6，這可能是因?yàn)锳OI 5和AOI 8的距離更接近從而誤導(dǎo)了被試，所以我們?cè)谠O(shè)計(jì)時(shí)一定要考慮設(shè)計(jì)元素間的親密度的關(guān)系。在閱覽“U”字形排列的流程圖中，被試的注視點(diǎn)首先落在了AOI 2上，這說明U字形布局在剛開始時(shí)也能夠正確地引導(dǎo)被試的注視點(diǎn)。但AOI 12的作為整個(gè)流程的最后一步，首次注視時(shí)間發(fā)生太早，且與AOI 4、AOI 5的注視時(shí)間相當(dāng)接近，說明“U”字形布局可能會(huì)誤導(dǎo)被試者的視覺動(dòng)向，同時(shí)AOI 3的首次注視時(shí)間為8.594s，觀看順序相當(dāng)靠后，這也從另一個(gè)方面印證了布局的不合理。

2.流程圖用戶體驗(yàn)評(píng)估：從對(duì)流程圖實(shí)驗(yàn)組被試瞳孔大小的統(tǒng)計(jì)中我們可以看出，被試在觀看P06、P07時(shí)的瞳孔直徑更大，這說明“Z”字形與“U”字形布局的排列方式更能夠激發(fā)被試的積極情緒。相比較而言，P04與P05的排列方式中規(guī)中矩，較難在第一時(shí)間激發(fā)被試的興趣，這從另外一個(gè)方面說明，“Z”字形布局與“U”字形布局的流程圖對(duì)觀者的吸引力更高。而從問卷調(diào)查統(tǒng)計(jì)的結(jié)果看，P06在吸引力、信息表達(dá)準(zhǔn)確度方面均要優(yōu)于P07，而兩者的認(rèn)知容易度得分較為接近，同時(shí)P06、P07信息表達(dá)準(zhǔn)確度指標(biāo)的得分都要高于P04、P05，分析可能是因?yàn)楫嬶L(fēng)的原因，P04、P05圖像的風(fēng)格相比較而言較為抽象，所以在形象表達(dá)準(zhǔn)確度方面可能要弱于畫風(fēng)較為具像的P06與P07。

結(jié)語

結(jié)合實(shí)驗(yàn)結(jié)果分析得出：（1）扁平化風(fēng)格的科普信息圖對(duì)人的吸引力更強(qiáng)，面對(duì)插畫風(fēng)格的科普信息圖人眼對(duì)于文本的搜索效率最高，而實(shí)物照片的認(rèn)知容易度和信息表達(dá)準(zhǔn)確度最好，這就需要設(shè)計(jì)人員按照設(shè)計(jì)的目的與需求靈活選擇信息圖的風(fēng)格。（2）豎版結(jié)構(gòu)可視化信息圖可將重要內(nèi)容布局在整幅圖上半部分，從而使之更容易地被人所注意到。（3）豎直排列的流程圖，人的首次注視點(diǎn)往往落在整圖的中上位置，而水平排列的流程圖，人的首次注視點(diǎn)往往落在整圖中心偏左的位置，設(shè)計(jì)師可把要重點(diǎn)表現(xiàn)的內(nèi)容（如標(biāo)題）布局于這些位置。（4）“Z”字布局的流程圖具有更優(yōu)秀的視線導(dǎo)引性，但在設(shè)計(jì)過程中需注意設(shè)計(jì)元素間的親密度。（5）“U”字布局的流程圖具有一定的視覺動(dòng)向誤導(dǎo)性，要慎重使用。當(dāng)然此次實(shí)驗(yàn)還存在著不足之處，由于實(shí)驗(yàn)器材的特點(diǎn)，實(shí)驗(yàn)素材只能在電腦屏幕上展示，這導(dǎo)致實(shí)驗(yàn)結(jié)果無法真實(shí)地反映被試觀看紙質(zhì)信息圖時(shí)的眼動(dòng)特征；四幅流程圖的內(nèi)容在設(shè)置時(shí)沒能更好地控制變量，比如步驟數(shù)不同，畫風(fēng)差異等；這些問題都需要在進(jìn)一步的實(shí)驗(yàn)中改進(jìn)。