數(shù)字界面微觀信息結(jié)構(gòu)的有序度分析

周 蕾 薛澄岐 王海燕 Yingjie Victor Chen 牛亞峰

(1東南大學(xué)機(jī)械工程學(xué)院, 南京 211189)(2Purdue Polytechnic Institute, Purdue University, Indiana 47907, USA)

?

數(shù)字界面微觀信息結(jié)構(gòu)的有序度分析

周 蕾1薛澄岐1王海燕1Yingjie Victor Chen2牛亞峰1

(1東南大學(xué)機(jī)械工程學(xué)院, 南京 211189)(2Purdue Polytechnic Institute, Purdue University, Indiana 47907, USA)

針對數(shù)字界面人機(jī)交互過程中的信息流暢性問題,提出從微觀信息結(jié)構(gòu)出發(fā)運(yùn)用熵理論對信息結(jié)構(gòu)的有序度進(jìn)行定量分析.首先,指出微觀信息結(jié)構(gòu)由2類信息元和3種典型的信息關(guān)系組成;其次,提出信息結(jié)構(gòu)的時效熵和質(zhì)效熵的計(jì)算方法,用來度量數(shù)字界面信息結(jié)構(gòu)的有序度;最后,選擇手機(jī)界面這一典型的數(shù)字界面為例,構(gòu)建了3種不同的App布局,進(jìn)行信息結(jié)構(gòu)的有序度計(jì)算.認(rèn)知實(shí)驗(yàn)結(jié)果表明,有序度高的信息結(jié)構(gòu)具有直觀方便、分區(qū)有規(guī)律等特點(diǎn),比較容易記憶;而有序度低的信息結(jié)構(gòu)搜索路徑復(fù)雜,記憶效果較差,且耗時較多.數(shù)字界面微觀信息結(jié)構(gòu)的有序度與用戶的認(rèn)知績效相關(guān),可以作為界面設(shè)計(jì)效果的評價指標(biāo).

數(shù)字界面;微觀結(jié)構(gòu);有序度;時效熵;質(zhì)效熵

人機(jī)交互過程中信息溝通的流暢程度是衡量人機(jī)界面優(yōu)劣的根本原則[1].近年來,隨著數(shù)字化人機(jī)交互信息界面(以下簡稱數(shù)字界面)的廣泛應(yīng)用,界面信息由最初的平鋪體呈現(xiàn)模式轉(zhuǎn)化為集成顯控模式,有效緩解了信息呈現(xiàn)的空間危機(jī)[2].但數(shù)字界面的形式和框架導(dǎo)致了截然不同的搜索路徑,對人機(jī)交互的效率和水平影響極大[3].如何設(shè)計(jì)和評估界面信息結(jié)構(gòu)已成為人機(jī)交互領(lǐng)域研究的熱點(diǎn)[4-7].本文結(jié)合熵理論對信息結(jié)構(gòu)的有序度進(jìn)行分析,指出時效熵和質(zhì)效熵的存在是影響人機(jī)信息交互信息流動機(jī)制的根本原因,分析基于信息元和信息關(guān)系的數(shù)字界面信息結(jié)構(gòu)的設(shè)計(jì)原則和評估方法.

1 數(shù)字界面微觀信息結(jié)構(gòu)

在信息搜索過程中,依據(jù)目標(biāo)信息的空間位置,搜索路徑呈現(xiàn)出明顯的方向性和流動性[1].宏觀角度下的信息結(jié)構(gòu)分析大多從功能性出發(fā),針對某一類具體的應(yīng)用對象展開,研究的針對性強(qiáng)、差異性大,但普適性較弱.

數(shù)字界面中的用戶信息搜索由自上而下的控制型信息加工主導(dǎo),信息結(jié)構(gòu)通過作用于用戶的搜索路徑,間接影響用戶認(rèn)知過程中的注意、記憶、判斷和決策,這類機(jī)制很難從宏觀角度進(jìn)行分析[8].此外,從宏觀角度研究信息結(jié)構(gòu)也很難規(guī)避圖元要素對用戶自下而上的感知型加工的影響[9-11].因此,本文提出從微觀角度出發(fā),分析信息結(jié)構(gòu)的構(gòu)成要素和作用機(jī)制,探討定量評估數(shù)字界面信息結(jié)構(gòu)方法的可行性.

1.1 信息元

信息元是信息結(jié)構(gòu)的基本功能單元,依據(jù)信息元在界面信息系統(tǒng)中的具體作用,可將其分為2類:

1) 目標(biāo)信息元.信息結(jié)構(gòu)中的目標(biāo)信息元是指能夠直接實(shí)現(xiàn)用戶目標(biāo)的界面功能單元.例如,視頻網(wǎng)站用戶想要觀賞某個視頻節(jié)目,該視頻就是目標(biāo)信息元;PS用戶需要使用“畫筆”工具,“畫筆”就是目標(biāo)信息元;手機(jī)用戶需要查詢天氣,App“天氣軟件”就是一個目標(biāo)信息元.目標(biāo)信息元是開展搜索任務(wù)的動機(jī)和終極對象.

2) 構(gòu)成信息元.信息結(jié)構(gòu)中的構(gòu)成信息元是指為了到達(dá)目標(biāo)信息元所經(jīng)歷的路徑節(jié)點(diǎn).以視頻網(wǎng)站為例,為了成功打開某視頻,其搜索路徑依次經(jīng)過“首頁—分類—劇種—地區(qū)—目標(biāo)視頻”,那么為了到達(dá)目標(biāo)信息元某視頻,信息結(jié)構(gòu)中必須引入4個原本并不存在的構(gòu)成信息元“首頁”、“分類”、“劇種”和“地區(qū)”.因此,構(gòu)成信息元本身雖不具有實(shí)際的功能意義,但是它的存在卻使原本彼此獨(dú)立的目標(biāo)信息元之間具有了明顯的關(guān)聯(lián)屬性,形成一種整體效果.如果不存在構(gòu)成信息元,那么用戶從浩瀚的信息海洋中找到某一目標(biāo)信息元的概率極低,尤其當(dāng)用戶的自身訴求尚處于比較模糊的情況下,搜索路徑將會變得極不穩(wěn)定.構(gòu)成信息元與目標(biāo)信息元相結(jié)合形成不同的搜索路徑,形成了相應(yīng)的“信息流”[1].

信息元的確定與任務(wù)劃分的精度有關(guān),既可以細(xì)化到某類或者某個功能信息,也可以精確到具體的操作步驟或者內(nèi)部控件.

1.2 信息元關(guān)聯(lián)結(jié)構(gòu)

為了到達(dá)目標(biāo)信息元,構(gòu)成信息元與目標(biāo)信息元之間存在3種典型的關(guān)聯(lián)屬性——索引關(guān)系、平行關(guān)系和跳轉(zhuǎn)關(guān)系,分別對應(yīng)用戶同層(域)、逐層(域)和跨層(域)的搜索行為.

如圖1所示,在某數(shù)字界面信息系統(tǒng)中,以路徑1-3-18為例,信息元之間存在逐層的索引關(guān)系,而信息元2～17之間則構(gòu)成了同層的平行關(guān)系.信息元18和31與主界面1構(gòu)成了跨層的跳轉(zhuǎn)關(guān)系.通過分析2類信息元與3類關(guān)聯(lián)屬性,可對數(shù)字界面信息系統(tǒng)進(jìn)行清晰的結(jié)構(gòu)劃分.

圖1 集成化界面信息元關(guān)聯(lián)結(jié)構(gòu)

2 數(shù)字界面信息結(jié)構(gòu)的有序度分析

界面信息元之間的索引關(guān)系構(gòu)成了信息結(jié)構(gòu)的縱向流,平行關(guān)系則構(gòu)成了信息結(jié)構(gòu)的橫向流,而跳轉(zhuǎn)關(guān)系的存在為原本形式單一的樹狀信息結(jié)構(gòu)增加了新的、更為豐富的信息層次.假設(shè)整個系統(tǒng)的信息量不變,當(dāng)信息索引的層級變多,每層的平行信息就會減少,因此,索引關(guān)系和平行關(guān)系之間是互為消漲的.相應(yīng)地,信息系統(tǒng)中信息流動的時效性和質(zhì)效性這2個主要指標(biāo)之間也會呈現(xiàn)出相互矛盾性.索引路徑增多使信息流通的路徑變長,構(gòu)成信息元數(shù)量增加而分義減少,這時信息流通的速度降低,但提高了信息獲取的質(zhì)量.相反地,如果減少索引層次,則必然會增加每層中處于平行關(guān)系的信息元的數(shù)量,這樣雖然流通時效性增強(qiáng),但信息分義點(diǎn)也會隨之增多,影響信息流通的質(zhì)量.張繼國等[12]針對管理組織架構(gòu)的運(yùn)行效率問題給出了衡量系統(tǒng)效率的時效指標(biāo)和質(zhì)效指標(biāo).數(shù)字界面信息結(jié)構(gòu)也具有相似的組織特征,因此,本文應(yīng)用熵理論對信息結(jié)構(gòu)的優(yōu)劣進(jìn)行評價.

2.1 時效熵

2.2 質(zhì)效熵

2.3 有序度評價模型

從信息傳播的時效性和準(zhǔn)確性角度分別定義數(shù)字界面信息結(jié)構(gòu)的有序度.基于微觀態(tài)的信息熵理論,數(shù)字界面信息結(jié)構(gòu)的有效度可表示為

式中,α,β分別為時效和質(zhì)效關(guān)于信息結(jié)構(gòu)的權(quán)重系數(shù).R值越大,表明信息結(jié)構(gòu)越有效、越有秩序,其信息熵就越低;反之,R值越小,則表明信息結(jié)構(gòu)越無序、越混亂,其信息熵就越高.

3 數(shù)字界面信息結(jié)構(gòu)的有序度計(jì)算

3.1 有序度計(jì)算

本文選擇手機(jī)界面這一典型的數(shù)字界面為例進(jìn)行信息結(jié)構(gòu)有序度分析.隨著智能手機(jī)移動端業(yè)務(wù)的蓬勃發(fā)展,手機(jī)界面已經(jīng)成為與人類日常生活關(guān)系極為密切的數(shù)字界面之一[13].手機(jī)界面的App布局與網(wǎng)頁界面、系統(tǒng)界面亦有相通之處,大眾認(rèn)知度高,可作為數(shù)字界面信息結(jié)構(gòu)的代表,其結(jié)論具有普適性.

設(shè)定手機(jī)界面需要同時呈現(xiàn)75個App應(yīng)用,通過分頁顯示、設(shè)置文件夾、添加快捷鍵等方式設(shè)計(jì)3種不同的信息結(jié)構(gòu),如圖2所示.結(jié)構(gòu)1由5個并列頁面和4個快捷鍵構(gòu)成;結(jié)構(gòu)2由1個主頁面、4個快捷鍵和7個文件夾構(gòu)成,每個文件夾中包含9個App;結(jié)構(gòu)3由2個并列頁面構(gòu)成,每個頁面均包含6個文件夾,內(nèi)部容納4～6個App不等,沒有快捷鍵.3種信息結(jié)構(gòu)的有序度計(jì)算結(jié)果如表1和表2所示.

(a) 信息結(jié)構(gòu)1

(b) 信息結(jié)構(gòu)2

(c) 信息結(jié)構(gòu)3

Lij節(jié)路長度r結(jié)構(gòu)1結(jié)構(gòu)2結(jié)構(gòu)3SrprSrprSrpr1801/222831/428891/4282712/222782/428872/428300633/428553/428注：Sr為r?節(jié)路個數(shù)；pr為層間路的實(shí)現(xiàn)概率．

由表1和表2可知,結(jié)構(gòu)1的時效性最高,表明采用結(jié)構(gòu)1獲取目標(biāo)信息的路徑長度最短.結(jié)構(gòu)2與結(jié)構(gòu)3因?yàn)榇嬖诖罅康奈募A,導(dǎo)致信息搜索過程中3節(jié)路的數(shù)量大大增加(63條和55條),需要頻繁地進(jìn)入和退出文件夾,時效性較差.而結(jié)構(gòu)2的質(zhì)效性相對于結(jié)構(gòu)1和結(jié)構(gòu)3較高,表明結(jié)構(gòu)2搜索目標(biāo)信息的準(zhǔn)確度高.結(jié)構(gòu)2只有單頁面顯示,所有信息均存儲于相應(yīng)的文件夾內(nèi).本例中,取權(quán)重系數(shù)α和β的值為0.5,體現(xiàn)了評估數(shù)字界面信息結(jié)構(gòu)的基本準(zhǔn)則——快速、準(zhǔn)確.求得3種信息結(jié)構(gòu)的有序度分別為0.329 5,0.356 5和0.174 0.總體來看,結(jié)構(gòu)1和結(jié)構(gòu)2的有序度較高,結(jié)構(gòu)3的有序度較差.

表2 3種信息結(jié)構(gòu)的質(zhì)效性計(jì)算結(jié)果

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

依照上述信息結(jié)構(gòu)設(shè)計(jì)3種不同的Android手機(jī)界面.其中,App布局1由5個并列頁面和4個快捷鍵構(gòu)成,如圖3(a)所示.75個目標(biāo)信息元(App)分別呈現(xiàn)在5個頁面中,快捷鍵定位于手機(jī)界面底部,用戶可以通過點(diǎn)擊頁面下部的◎進(jìn)行頁面間的切換.

(a) 布局1

(b) 布局2

(c) 布局3

App布局2由1個主頁面、4個快捷鍵和7個文件夾構(gòu)成,每個文件夾中包含9個App,如圖3(b)所示.與結(jié)構(gòu)1不同,結(jié)構(gòu)2中只有1個主界面,用戶通過點(diǎn)擊文件夾進(jìn)入子頁面,通過點(diǎn)擊子頁面空白處可以返回主頁面.界面元素布局與快捷鍵圖標(biāo)均與結(jié)構(gòu)1設(shè)定差異明顯.

App布局3由2個并列頁面構(gòu)成,每個頁面均包含6個文件夾,內(nèi)部容納4～6個App不等,沒有快捷鍵設(shè)計(jì),如圖3(c)所示.結(jié)構(gòu)3有2個主頁面,用戶可以通過點(diǎn)擊頁面下部的◎進(jìn)行頁面間的切換;同時可以通過點(diǎn)擊文件夾進(jìn)入子頁面,通過點(diǎn)擊子頁面空白處可以返回主頁面.界面元素布局與結(jié)構(gòu)1和結(jié)構(gòu)2設(shè)定差異明顯.

10位同學(xué)參與手機(jī)可用性實(shí)驗(yàn),被試均為在校研究生,年齡在22～28歲,男女比例相當(dāng),視力或矯正視力正常,無色盲或色弱[14].實(shí)驗(yàn)分2天進(jìn)行,每天以1種順序在3個手機(jī)界面中查找目標(biāo)App,并點(diǎn)擊進(jìn)入.App序列運(yùn)用心理學(xué)軟件E-prime進(jìn)行呈現(xiàn),設(shè)定為“左鍵點(diǎn)擊”.被試在手機(jī)界面中找到App即點(diǎn)擊鼠標(biāo)左鍵進(jìn)入下一張目標(biāo)App圖片.每天實(shí)驗(yàn)完成后,及時詢問被試對3類不同界面的搜索任務(wù)難度比較,劃分難、中等、容易3類,分別標(biāo)記為3,2,1分,請被試對3類界面進(jìn)行打分.10名被試2次打分結(jié)果的平均值如圖4所示,結(jié)構(gòu)1和結(jié)構(gòu)2得分較高,總分上結(jié)構(gòu)1高于結(jié)構(gòu)2,結(jié)構(gòu)3表現(xiàn)最差.被試普遍認(rèn)為,結(jié)構(gòu)1沒有子文件夾跳進(jìn)跳出,直觀方便;結(jié)構(gòu)2信息分區(qū)有規(guī)律,比較容易記憶;結(jié)構(gòu)3介于兩者之間,搜索路徑相對較長,記憶效果差,總體耗時多.這與有序度計(jì)算結(jié)果也是一致的.

圖4 3類布局的被試評價

4 結(jié)語

“熵”最初是熱力學(xué)的一個術(shù)語,反映了組織、系統(tǒng)的混亂程度,如今已被廣泛運(yùn)用到信息學(xué)領(lǐng)域,反映了信息在傳遞過程中的不確定性.本文探討了在數(shù)字界面信息規(guī)劃的過程中,先從微觀結(jié)構(gòu)的有序度出發(fā)進(jìn)行事前定量分析,再進(jìn)一步開展界面設(shè)計(jì)的可能性,從而避免完全依賴事后分析在人力和物力上的浪費(fèi).另一方面,微觀角度上的結(jié)構(gòu)分析最大限度地規(guī)避了構(gòu)圖特征對用戶認(rèn)知的影響,未來還將進(jìn)一步分析構(gòu)圖元素對控制型加工的影響,匹配人類控制型加工與感知型加工并存的實(shí)際情況.復(fù)雜任務(wù)環(huán)境也是未來研究的方向之一,從而健全和完善數(shù)字界面信息結(jié)構(gòu)設(shè)計(jì)的理論依據(jù)和定量評估機(jī)制.

References)

[1]周蕾.基于視覺通路理論的數(shù)字界面布局設(shè)計(jì)方法研究[D].南京:東南大學(xué)機(jī)械工程學(xué)院,2014.

[2]Wang H, Wang S. Application of ontology modularization to human-web interface design for knowledge sharing[J].ExpertSystemswithApplications, 2016, 46: 122-128. DOI:10.1016/j.eswa.2015.10.027.

[3]Islam M N, Bouwman H. Towards user-intuitive web interface sign design and evaluation: A semiotic framework[J].InternationalJournalofHuman-ComputerStudies, 2016, 86: 121-137. DOI:10.1016/j.ijhcs.2015.10.003.

[4]周蕾,薛澄岐,湯文成,等.界面元素布局設(shè)計(jì)的美度評價方法[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報,2013,25(5):758-766. DOI:10.3969/j.issn.1003-9775.2013.05.022. Zhou Lei, Xue Chengqi, Tang Wengcheng, et al. Aesthetic evaluation method of interface elements layout design[J].JournalofComputer-AidedDesign&ComputerGraphics, 2013, 25(5): 758-766. DOI:10.3969/j.issn.1003-9775.2013.05.022.(in Chinese)

[5]周蕾,薛澄岐,湯文成,等.高速列車座椅外觀設(shè)計(jì)“特征-風(fēng)格”映射機(jī)制的推理方法[J].東南大學(xué)學(xué)報(自然科學(xué)版),2013,43(4):771-776. DOI:10.3969/j.issn.1001-0505.2013.04.018. Zhou Lei, Xue Chengqi, Tang Wengcheng, et al. Reasoning method of “feature-style” mapping mechanism of high-speed train seat appearance design[J].JournalofSoutheastUniversity(NaturalScienceEdition), 2013, 43(4): 771-776. DOI:10.3969/j.issn.1001-0505.2013.04.018.(in Chinese)

[6]Zhou L, Xue C Q, Kiyoshi T. Research of interface composition design optimization based on visual balance[C]//PracticalApplicationsofIntelligentSystems-Proceddingsofthe8thInternationalConferenceonIntelligentSystemsandKnowledgeEngineering. Shenzhen, China, 2013: 483-494.

[7]周蕾,薛澄岐,湯文成,等.產(chǎn)品信息界面的用戶感性預(yù)測模型[J].計(jì)算機(jī)集成制造系統(tǒng),2014,20(3):544-554. DOI:10.13196/j.cims.2014.03.zhoulei.0544.11.20140310. Zhou Lei, Xue Chengqi, Tang Wengcheng, et al. User perceptual prediction model of product information interface[J].ComputerIntegratedManufacturingSystems, 2014, 20(3): 544-554. DOI:10.13196/j.cims.2014.03.zhoulei.0544.11.20140310.(in Chinese)

[8]Sadeghi S A, Karava P, Konstantzos I, et al. Occupant interactions with shading and lighting systems using different control interfaces: A pilot field study[J].BuildingandEnvironment, 2016, 97: 177-195. DOI:10.1016/j.buildenv.2015.12.008.

[9]Kim Y H, Lee J H. Game interface enhancement under smartphone platform focused on touchscreen interaction[J].Computers&IndustrialEngineering, 2015, 80: 45-61. DOI:10.1016/j.cie.2014.11.017.

[10]Sheen K A, Yan L. Relationship between academic discipline and user perception of the future of electronic textbooks[J].ProcediaManufacturing, 2015, 3: 5845-5850. DOI:10.1016/j.promfg.2015.07.841.

[11]Troiano L, Birtolo C. Genetic algorithms supporting generative design of user interfaces: Examples[J].InformationSciences, 2014, 259: 433-451. DOI:10.1016/j.ins.2012.01.006.

[12]張繼國,Singh V P.信息熵——理論與應(yīng)用[M].北京:中國水利水電出版社,2012:99-100.

[13]Yu N, Kong J. User experience with web browsing on small screens: Experimental investigations of mobile-page interface design and homepage design for news websites[J].InformationSciences, 2016, 330: 427-443. DOI:10.1016/j.ins.2015.06.004.

[14]曾祥炎,陳軍.E-Prime實(shí)驗(yàn)設(shè)計(jì)技術(shù)[M].廣州:暨南大學(xué)出版社,2009:434-435.

Order degree analysis of digital interface microscopic information structure

Zhou Lei1Xue Chengqi1Wang Haiyan1Yingjie Victor Chen2Niu Yafeng1

(1School of Mechanical Engineering, Southeast University, Nanjing 211189, China)(2Purdue Polytechnic Institute, Purdue University, Indiana 47907, USA)

Aiming at the information fluency issue in the process of human-computer interaction, the entropy theory is used from the microscopic view to quantify the order degree of the information structure. First, it is pointed out that microscopic information structure comprises two types of information elements and three types of typical information relationship. Secondly, the time and quality entropy calculation method of the information structure is proposed for digital interface order degree evaluation. Finally, the smart phone interface as a typical digital interface is chosen to construct three types of different App layouts for the order degree calculation of the information structure. Cognitive experimental results show that the information structures with higher order degree are more intuitive, convenient, well partitioned, which makes recall more easy; while the structures with lower degree have complicated searching way, which makes recall more difficult and time-wasting. The order degree of the digital interface microscopic information structure has correlation with users’ cognitive performance, and thus it can be set as an evaluation index for the interface design.

digital interface; microscopic structure; order degree; time entropy; quality entropy

10.3969/j.issn.1001-0505.2016.06.017

2016-02-16. 作者簡介: 周蕾(1985—)，女，博士，講師；薛澄岐(聯(lián)系人)，男，博士，教授，博士生導(dǎo)師,ipd_xcq@seu.edu.cn.

國家自然科學(xué)基金資助項(xiàng)目(71471037，71271053)、江蘇省自然科學(xué)基金青年基金資助項(xiàng)目(BK20150636)、東南大學(xué)基本科研業(yè)務(wù)費(fèi)資助項(xiàng)目(2242016K40132).

周蕾,薛澄岐,王海燕,等.數(shù)字界面微觀信息結(jié)構(gòu)的有序度分析[J].東南大學(xué)學(xué)報(自然科學(xué)版),2016,46(6):1209-1213.

10.3969/j.issn.1001-0505.2016.06.017.

TB472

A

1001-0505(2016)06-1209-05