唐葉劍

(安徽師范大學(xué)皖江學(xué)院,安徽 蕪湖 241000)

在人機交互學(xué)科飛速發(fā)展的今天,產(chǎn)生了很多相關(guān)的應(yīng)用技術(shù),其中視覺流模型是應(yīng)用比較廣泛的衍生技術(shù)之一。特別是在Web應(yīng)用頁面和產(chǎn)品的交互界面設(shè)計方面,視覺流模型的研究具有重要的作用,可以使客戶的視線跟隨視覺元素的引導(dǎo)而進行規(guī)劃設(shè)計,從而影響客戶的專注點和感興趣對象[1],通過視覺流理論能夠建設(shè)規(guī)范化的設(shè)計模式,從而更好地引導(dǎo)客戶的購買和消費行為。然而現(xiàn)階段對于視覺流模型的研究大多數(shù)還處于初級階段,剛剛發(fā)展到定性分析領(lǐng)域,對于更深層次的視覺流模型和圖像元素之間的關(guān)系還有待進一步研究,同時如何優(yōu)化網(wǎng)頁的信息結(jié)構(gòu)設(shè)計[2],減少數(shù)據(jù)存儲量和加載時間,也是急需解決的問題。

近年來我國對于上述兩方面的研究也有很多,牛嘉琪結(jié)合視覺流與信息流理論研究了用戶在瀏覽網(wǎng)頁時的視覺順序原則,通過信息流影響視覺流,進而轉(zhuǎn)化成二者融合的產(chǎn)物,使網(wǎng)頁設(shè)計的形式與內(nèi)容達到平衡和統(tǒng)一[3]。劉瑋琳等人研究了網(wǎng)頁界面設(shè)計中分類信息的優(yōu)化設(shè)計,根據(jù)分類信息整體視覺復(fù)雜度特征和有無圖標輔助展示特征,一共設(shè)計了四種分類信息設(shè)計形式,并使用眼動儀進行測試,結(jié)果表明:想要提高分類信息設(shè)計水平,使用簡潔的設(shè)計方式以及形象化圖標效果最好[4]。然而上述兩種方法依然存在視覺中心散亂,用戶感興趣區(qū)域少,視覺流程死板,不能靈活調(diào)整和優(yōu)化,以及頁面信息量多,加載緩慢等問題。

隨著互聯(lián)網(wǎng)進入大數(shù)據(jù)階段,網(wǎng)絡(luò)數(shù)據(jù)流量大幅度增加,機器學(xué)習(xí)技術(shù)不斷成熟,各種圖像處理和分析算法也被應(yīng)用到Web應(yīng)用頁面設(shè)計領(lǐng)域[5],為進一步研究視覺流模型的優(yōu)化奠定了技術(shù)基礎(chǔ)[6]。同時信息折疊理念的發(fā)展也應(yīng)用到了產(chǎn)品交互界面設(shè)計領(lǐng)域,徹底改變了原有的信息架構(gòu),實現(xiàn)了交互界面的簡潔化設(shè)計[7],提高數(shù)據(jù)加載速度。

因此,本文提出了一種基于信息折疊理念的Web應(yīng)用頁面視覺流優(yōu)化設(shè)計方法,采用信息折疊理念設(shè)計頁面的信息結(jié)構(gòu),通過隨機森林算法構(gòu)建視覺流優(yōu)化模型,可以根據(jù)設(shè)計需要靈活地優(yōu)化用戶視覺流目標。

1 Web應(yīng)用頁面視覺流優(yōu)化設(shè)計

1.1 基于信息折疊理念的頁面設(shè)計

為了呈現(xiàn)更加簡潔明了的視覺效果,同時減少頁面的數(shù)據(jù)存儲量和加載時間,本文采用信息折疊理念設(shè)計Web應(yīng)用頁面的數(shù)據(jù)結(jié)構(gòu),其中設(shè)計需求和功能數(shù)據(jù)是信息結(jié)構(gòu)開發(fā)的主要目標。用戶在獲取信息時,需要整合和分類每種數(shù)據(jù)元,根據(jù)設(shè)計要求將類似的數(shù)據(jù)元合并成信息組,構(gòu)成信息結(jié)構(gòu),從而支撐用戶的數(shù)據(jù)獲取。在Web應(yīng)用頁面設(shè)計中,信息結(jié)構(gòu)的主要任務(wù)是將抽象化的數(shù)據(jù)轉(zhuǎn)化為具體的可讀取信息[8]。信息折疊設(shè)計最重要的就是信息之間的邏輯層與界面折疊部分的對應(yīng),經(jīng)過信息折疊后的應(yīng)用頁面不僅更加清晰明了,同時還具有更多的信息顯示區(qū)域,其形態(tài)特征也是不斷變化的。與常用的應(yīng)用頁面設(shè)計相比,信息折疊并非傳統(tǒng)的層級結(jié)構(gòu),而是界面形態(tài)隨著用戶的交互操作不斷變化,具體結(jié)構(gòu)如圖1所示。

圖1 折疊信息結(jié)構(gòu)圖

由圖1可知,常規(guī)應(yīng)用界面中的層級信息結(jié)構(gòu)即為“常態(tài)信息”,在進行信息折疊時,用戶的感受會根據(jù)交互任務(wù)的更改而變化,在變化期間,各個信息元都會進行動態(tài)遷移,根據(jù)形態(tài)的走向而變化,即為“動態(tài)信息”。當(dāng)上述過程完成后,產(chǎn)生的便是“折疊態(tài)信息”。相反,用戶在打開折疊信息時,信息架構(gòu)需要進行反向還原操作,從“折疊態(tài)信息”,演變?yōu)椤皠討B(tài)信息”,最后變回“常態(tài)信息”。因此折疊信息結(jié)構(gòu)的設(shè)計重點是與應(yīng)用界面的形態(tài)變化互相對應(yīng),并實時進行動態(tài)匹配,可呈現(xiàn)更加簡潔的Web應(yīng)用頁面。

1.2 Web應(yīng)用頁面視覺流程和影響因子

1.2.1 視覺流程概述

在Web應(yīng)用頁面設(shè)計當(dāng)中,視覺流(Visual Flow)屬于視覺傳達學(xué)科,即為視覺流程設(shè)計,其定義是在用戶與應(yīng)用界面進行互動時,通過一定的設(shè)計手法,使用戶的視覺焦點按照預(yù)定的方向和規(guī)律轉(zhuǎn)動[9]。這種對于用戶流量的引導(dǎo)對于各種商業(yè)產(chǎn)品和其它需要推廣和聚焦的信息都具有較高的經(jīng)濟價值。按照應(yīng)用頁面視覺流的流動方式分為跳動型、F型和Z型等。以跳動型為例,具體結(jié)構(gòu)如圖2所示,它是比較特別的一種類型,排列規(guī)則并不明顯,視覺元素也比較雷同。人們在觀察頁面時,關(guān)注的區(qū)域是隨機的、跳躍的,沒有固定的順序和明顯的規(guī)律,圖片搜索結(jié)果和圖片素材庫等多應(yīng)用此類型的視覺流程。

圖2 跳動型視覺流程

1.2.2 視覺競爭影響因子

人類的視野是由視網(wǎng)膜上全部的感光細胞所構(gòu)成的,其中負責(zé)處理物體結(jié)構(gòu)和色彩信息的是視錐細胞,分辨物體輪廓和暗光的是視桿細胞,因此人們的眼睛在同時觀察多個目標時,只有部分內(nèi)容和色彩可以進入到視野當(dāng)中[10]。當(dāng)視線對元素a進行觀察時,可以接收到感受區(qū)范圍內(nèi)的元素b、c和d的形態(tài)和色彩信息。由于后天養(yǎng)成的習(xí)慣起不到主要的影響作用,因此在設(shè)計跳動型視覺流程時,排除感知區(qū)的元素a,感受區(qū)元素b、c和d之間也同樣需要競爭,競爭的目的就是用戶關(guān)注的次要目標[11],感受區(qū)的元素競爭如圖3所示。

圖3 感受區(qū)的元素競爭

1.3 視覺流優(yōu)化模型設(shè)計

1.3.1 隨機森林算法概述

本文使用隨機森林算法進行視覺流優(yōu)化模型設(shè)計,構(gòu)建一個視覺流決策樹優(yōu)化模型。隨機森林算法是一個單一預(yù)測問題的集成學(xué)習(xí)算法,需要構(gòu)建若干模型組合[12]。該算法的主要功能是回歸和分類運算,使用多個決策樹進行預(yù)測。其算法是將每個最佳特征從各個內(nèi)部節(jié)點中提取出來進行分裂,分裂后的各部分都有匹配的特征值,樣本的種族表示該路徑上的各個節(jié)點,建設(shè)決策樹時按此遞歸,一直到滿足最終條件為止[13]。

構(gòu)建一系列隨機和自由生長的決策樹分類器{f(X,θw),w=1,2,…,W},假設(shè)自變量為X,讓所有決策樹分類器都按照順序進行判斷,得出最優(yōu)分類結(jié)果。

本文在建立隨機森林決策樹時,使用隨機重復(fù)采樣和隨機特征選取兩種方式,可以提高分類的精度和準確率,具體步驟如圖4所示。

圖4 決策樹構(gòu)建流程圖

Bootstrap重復(fù)采樣方法:將原始訓(xùn)練數(shù)據(jù)集設(shè)置為E=([xi]1,[xi]2,…,[xi]n,yi),采樣時從中隨機抽取W次,構(gòu)成相同數(shù)量獨立分布的訓(xùn)練數(shù)據(jù)子集{Ew,w=1,2,…,W}。

因為Ew屬于離散隨機變量,所以單個訓(xùn)練數(shù)據(jù)子集只能取有限個值,其概率分散的情況如下:

P(Ew)=pj,j=1,2,…,n

(1)

隨機變量Ew的信息熵可以表示為:

(2)

在訓(xùn)練數(shù)據(jù)子集Ew當(dāng)中選定一個特征因子用R描述,假設(shè)其取值共有T個,根據(jù)這些取值將數(shù)據(jù)子集Ew進行劃分,同時分別求解其信息熵,特征因子R作用于訓(xùn)練數(shù)據(jù)子集Ew所得的信息增益用Gain(Ew,R)描述,其表達式為:

(3)

以特征因子R為條件,訓(xùn)練數(shù)據(jù)子集Ew與之相對應(yīng)信息增益率用GainRatio(Ew,R)描述,其公式為:

(4)

根據(jù)隨機特征進行指標的選擇:在W個數(shù)據(jù)集的基礎(chǔ)上構(gòu)建決策樹,為了使其盡可能地成長,在建立過程中并不對決策樹做任何修整和裁剪,運算部分特征因子的信息增益率,可以從訓(xùn)練子集當(dāng)中進行抽取,依據(jù)公式(4)進行求解。

篩選最佳分裂節(jié)點:將信息增益率最高的候選識別因子進行分裂,再次根據(jù)公式(4)求解信息增益率,重復(fù)上述步驟一直到信息增益率低于規(guī)定的范圍值即可,最后生成包括W棵決策樹的森林模型。

分類決策:將由各個決策樹構(gòu)成的森林模型進行歸納整理,構(gòu)建一個識別因子的分類器,對于需要分類識別的目標進行分類決策,得出相應(yīng)的結(jié)果。

1.3.2 構(gòu)建視覺流優(yōu)化模型

在Web應(yīng)用頁面跳動視覺流程的設(shè)計當(dāng)中,影響用戶感官的主要競爭因子包括亮度、色溫、飽和度、臉部特征、元素面積、圖文結(jié)構(gòu)等,這些元素加在一起會同時影響視覺競爭的結(jié)果[14]。本文將以上這些競爭因子通過隨機森林算法進行訓(xùn)練,構(gòu)建一個決策樹分類器進行分類,從而模擬人類視覺瀏覽網(wǎng)頁的過程,最終得到的視覺流優(yōu)化模型如圖5所示。

圖5 視覺流優(yōu)化模型

由圖5可知,決策樹[15]中影響因子數(shù)值更大的方向,即左側(cè)劃分到Ⅰ類,右側(cè)劃分到Ⅱ類,其中各個節(jié)點的參數(shù)如下:基尼不純度用Gini表示,趨向于0時,表示當(dāng)前節(jié)點只剩一種類別的數(shù)據(jù);實驗樣本的數(shù)量用Samples表示;各個類別中的樣本數(shù)量用Value表示;某個節(jié)點中多數(shù)點的分類結(jié)果用Class表示。

在視覺競爭過程中,優(yōu)化的目的可以使相似的元素被關(guān)注的程度盡量相近,達到一個公平競爭的平衡狀態(tài);也能夠加強指定元素的關(guān)注度,引導(dǎo)用戶的視覺流向指定區(qū)域[16]。根據(jù)Web應(yīng)用頁面設(shè)計需要的實際情況,通過視覺流優(yōu)化模型調(diào)整相應(yīng)頁面的圖片和排版順序,改變元素的傾向性概率,以此達到相應(yīng)的優(yōu)化目標。

2 實驗及分析

2.1 實驗環(huán)境設(shè)置

本文選擇某大學(xué)作為實驗場所,招募在校學(xué)生作為實驗對象,采用眼動追蹤技術(shù)對Web應(yīng)用頁面視覺流優(yōu)化設(shè)計的效果進行數(shù)據(jù)分析和評估,實驗儀器選用RED型桌面遙測式眼動追蹤系統(tǒng),產(chǎn)自德國SMI公司。實驗需要的硬件設(shè)備包括:一臺聯(lián)想筆記本電腦、一臺顯示器,外加RED攝像頭以及紅外光源。使用的軟件有iView XTM RED眼動儀操作軟件、BeGaze眼動數(shù)據(jù)分析軟件以及Experiment Center刺激呈現(xiàn)設(shè)計軟件等。

2.2 視覺流優(yōu)化模型應(yīng)用實驗

實驗以某油畫網(wǎng)站作為優(yōu)化對象,進行Web應(yīng)用頁面視覺流優(yōu)化設(shè)計,該網(wǎng)站意在收藏和展示各位現(xiàn)代畫家的油畫作品為主,按照顧客感興趣的類型進行標簽分類,并在首頁展示和介紹各位畫家近期的在售作品。其中各個畫家的作品展示封面和尺寸都是不同的,油畫的色彩和主題也都存在較大的區(qū)別,按照五行縱列的排版進行平鋪展示。這種網(wǎng)站對于作品的推送沒有較高的傾向性,需要對所有作家的作品一視同仁,提供一個公平競爭的展示環(huán)境,所以優(yōu)化的目標是使相似的元素被關(guān)注的程度盡量相近,通過本文方法構(gòu)建視覺流優(yōu)化模型估算任意兩個元素之間的視覺競爭結(jié)果,按照被關(guān)注的大小概率分類,將同類元素的油畫作品進行重新排序,同時使用信息折疊的方式進行網(wǎng)頁設(shè)計,優(yōu)化前后的網(wǎng)頁設(shè)計效果如圖6所示。

由圖6可知,原來的網(wǎng)頁設(shè)計布局比較密集,而且元素排列混亂,忽略了視覺競爭因子的影響,導(dǎo)致最終客戶在瀏覽的過程中視覺流相對固定且比較分散、分布十分不均衡,甚至?xí)苯雍鲆暤裟承┰?導(dǎo)致影響某位畫家的作品不被注意。而經(jīng)過本文方法優(yōu)化設(shè)計后的網(wǎng)頁,采用信息折疊理念,布局更加的簡潔明了,增加人機交互效果,通過鼠標指針用戶可以看到自己感興趣的各種詳細信息,而且頁面整體顏色鮮明,對比突出,按照視覺競爭因子進行元素排列,可以使客戶更好地關(guān)注每一幅作品,視覺效果和瀏覽體驗都更好。

2.3 眼動追蹤數(shù)據(jù)分析

為了進一步驗證本文方法的視覺優(yōu)化效果,實驗在大學(xué)招募了125位在校學(xué)生參加了眼動追蹤實驗,對視覺流優(yōu)化設(shè)計后的油畫網(wǎng)站進行了自由瀏覽實驗。所有參加者都處于身體健康的狀態(tài),同時視力正常,裸眼近視不高于500度,散光不高于50度,而且無色弱、色盲等癥狀,所有參加實驗的學(xué)生年齡范圍在18～22歲之間,其中女學(xué)生占比53.3%,男學(xué)生占比46.7%。實驗時分別讓學(xué)生們對原有的網(wǎng)頁和優(yōu)化后的網(wǎng)頁進行自由瀏覽的眼動追蹤測試,將兩者的數(shù)據(jù)進行對比分析,實驗結(jié)果如表1所示。

表1 本文方法優(yōu)化前后網(wǎng)頁眼動追蹤數(shù)據(jù)對比

由表1可知,經(jīng)過本文方法優(yōu)化設(shè)計后的網(wǎng)頁與原有網(wǎng)頁在眼動數(shù)據(jù)方面有著較大差別,下面按照不同的參數(shù)分別進行效果對比。

注視量:代表用戶對網(wǎng)頁內(nèi)容的認知負荷和理解難度。本文方法比原有網(wǎng)頁的注視量明顯有所降低,說明本文方法優(yōu)化的網(wǎng)頁更加簡潔明了,容易理解和觀看,認知比較輕松,方便瀏覽。

注視點數(shù)量:代表用戶在網(wǎng)頁內(nèi)搜尋感興趣內(nèi)容的難度。原有網(wǎng)頁的注視點數(shù)量明顯多于本文方法,說明用戶在分散復(fù)雜的網(wǎng)頁上尋找自己想看的內(nèi)容需要花費更長的時間,進行多次搜尋,而本文方法優(yōu)化后的網(wǎng)頁更加直觀,方便查找和搜尋目標。

瞳孔直徑:代表美學(xué)評價中的興趣相關(guān),用戶對于看到的內(nèi)容越感興趣,相對應(yīng)瞳孔的直徑就會越大。本文方法的瞳孔直徑明顯要大于原有網(wǎng)頁,說明本文方法優(yōu)化后的網(wǎng)頁更加精美,圖片比例高,同時復(fù)雜度低,可以大幅度提高用戶的瀏覽興趣,具體數(shù)據(jù)對比如圖7所示。

圖7 瞳孔直徑均值對比

掃視幅度:代表網(wǎng)頁圖文排版的擁擠程度和觀看舒適度。本文方法的掃視幅度明顯比原有網(wǎng)頁的掃視幅度要大,說明本文方法優(yōu)化后的網(wǎng)頁布局更加寬松,看起來更加舒服,觀看體驗更好,優(yōu)化前后網(wǎng)頁的掃視幅度均值如圖8所示。

掃視點數(shù)量:代表瀏覽過程中尋找目標的范圍和區(qū)域大小。原有網(wǎng)頁的掃視點數(shù)量明顯比本文方法更多,說明需要尋找更多的區(qū)域和范圍才能找到感興趣的目標,而本文方法采用信息折疊的方法,界面更加簡潔。

2.4 眼動追蹤熱圖效果對比

為了進一步驗證本文方法優(yōu)化后的網(wǎng)頁在視覺流分布方面的效果,將優(yōu)化前后網(wǎng)頁的眼動追蹤熱圖進行對比分析,顏色越深、越接近深灰色,表示關(guān)注度越高、越集中,具體實驗結(jié)果如圖9所示。

(a)優(yōu)化前頁面熱圖

由圖9可知,優(yōu)化前網(wǎng)頁的熱圖深灰色區(qū)域部分較少,淺灰色部分較多,且相對分散,說明用戶在瀏覽過程中注意力難以集中,感興趣范圍較少,沒有視覺中心,且搜尋過程較長,部分元素直接被忽略,并沒有被注意到。而本文方法優(yōu)化后的網(wǎng)頁熱圖深灰色區(qū)域較多,面積也大,淺灰色部分較少,同時分布均勻,說明本文方法對于網(wǎng)頁視覺流優(yōu)化的效果較好,用戶在瀏覽過程中注意力集中、感興趣區(qū)域多,具有明顯的視覺中心,用戶基本注意到了所有的元素,具有更加精美和流暢的觀看體驗。

3 結(jié)論

本文采用信息折疊理念設(shè)計Web應(yīng)用頁面的數(shù)據(jù)結(jié)構(gòu),并使用隨機森林算法構(gòu)建視覺流優(yōu)化模型,針對不同的設(shè)計需求對視覺流程進行目標優(yōu)化設(shè)計。實驗證明:

(1)本文方法優(yōu)化后的Web應(yīng)用頁面更加簡潔明了,容易理解和觀看,認知比較輕松,方便瀏覽,同時信息傳遞更加直觀,方便查找和搜尋目標。

(2)本文方法優(yōu)化后的Web應(yīng)用頁面更加精美,布局寬松,圖片比例高,復(fù)雜度低,可以大幅度提高用戶的瀏覽興趣,而且觀感更加舒適。

(3)本文方法對于網(wǎng)頁視覺流優(yōu)化的效果較好,用戶在瀏覽過程中注意力集中、感興趣區(qū)域多,具有明顯的視覺中心,基本所有的元素都被用戶注意到,具有更加精美和流暢的觀看體驗。