信息折疊理念下的Web應用頁面視覺流優化設計

唐葉劍

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

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

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

隨著互聯網進入大數據階段,網絡數據流量大幅度增加,機器學習技術不斷成熟,各種圖像處理和分析算法也被應用到Web應用頁面設計領域[5],為進一步研究視覺流模型的優化奠定了技術基礎[6]。同時信息折疊理念的發展也應用到了產品交互界面設計領域,徹底改變了原有的信息架構,實現了交互界面的簡潔化設計[7],提高數據加載速度。

因此,本文提出了一種基于信息折疊理念的Web應用頁面視覺流優化設計方法,采用信息折疊理念設計頁面的信息結構,通過隨機森林算法構建視覺流優化模型,可以根據設計需要靈活地優化用戶視覺流目標。

1 Web應用頁面視覺流優化設計

1.1 基于信息折疊理念的頁面設計

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

圖1 折疊信息結構圖

由圖1可知,常規應用界面中的層級信息結構即為“常態信息”,在進行信息折疊時,用戶的感受會根據交互任務的更改而變化,在變化期間,各個信息元都會進行動態遷移,根據形態的走向而變化,即為“動態信息”。當上述過程完成后,產生的便是“折疊態信息”。相反,用戶在打開折疊信息時,信息架構需要進行反向還原操作,從“折疊態信息”,演變為“動態信息”,最后變回“常態信息”。因此折疊信息結構的設計重點是與應用界面的形態變化互相對應,并實時進行動態匹配,可呈現更加簡潔的Web應用頁面。

1.2 Web應用頁面視覺流程和影響因子

1.2.1 視覺流程概述

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

圖2 跳動型視覺流程

1.2.2 視覺競爭影響因子

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

圖3 感受區的元素競爭

1.3 視覺流優化模型設計

1.3.1 隨機森林算法概述

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

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

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

圖4 決策樹構建流程圖

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

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

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

(1)

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

(2)

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

(3)

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

(4)

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

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

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

1.3.2 構建視覺流優化模型

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

圖5 視覺流優化模型

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

在視覺競爭過程中,優化的目的可以使相似的元素被關注的程度盡量相近,達到一個公平競爭的平衡狀態;也能夠加強指定元素的關注度,引導用戶的視覺流向指定區域[16]。根據Web應用頁面設計需要的實際情況,通過視覺流優化模型調整相應頁面的圖片和排版順序,改變元素的傾向性概率,以此達到相應的優化目標。

2 實驗及分析

2.1 實驗環境設置

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

2.2 視覺流優化模型應用實驗

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

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

2.3 眼動追蹤數據分析

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

表1 本文方法優化前后網頁眼動追蹤數據對比

由表1可知,經過本文方法優化設計后的網頁與原有網頁在眼動數據方面有著較大差別,下面按照不同的參數分別進行效果對比。

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

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

瞳孔直徑:代表美學評價中的興趣相關,用戶對于看到的內容越感興趣,相對應瞳孔的直徑就會越大。本文方法的瞳孔直徑明顯要大于原有網頁,說明本文方法優化后的網頁更加精美,圖片比例高,同時復雜度低,可以大幅度提高用戶的瀏覽興趣,具體數據對比如圖7所示。

圖7 瞳孔直徑均值對比

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

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

2.4 眼動追蹤熱圖效果對比

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

(a)優化前頁面熱圖

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

3 結論

本文采用信息折疊理念設計Web應用頁面的數據結構,并使用隨機森林算法構建視覺流優化模型,針對不同的設計需求對視覺流程進行目標優化設計。實驗證明:

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

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

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