王　寧,余隋懷,肖琳臻,周　憲

(西北工業(yè)大學 陜西省工業(yè)設計工程實驗室,西安 710072)

?

考慮用戶視覺注意機制的人機交互界面設計

王寧,余隋懷,肖琳臻,周憲

(西北工業(yè)大學 陜西省工業(yè)設計工程實驗室,西安 710072)

摘要：為了有效提高人機交互界面的設計質(zhì)量和效率,將視覺注意的計算方法引入到人機交互界面設計過程中,提出了一種考慮用戶視覺注意機制的人機交互界面設計方法.利用視覺注意計算模型分析了人機交互界面中各元件的視覺注意程度,構建了視覺注意焦點圖；采用配對比較法確定各元件的重要度和使用頻率,以灰度圖的形式建立了人機交互界面重要性分布圖.通過比對視覺注意焦點圖和重要性分布圖,以用戶的視覺特性為評價指標對人機交互界面設計方案進行了評估.以智能手機的人機交互界面設計為例,對所提出方法進行驗證.結果表明：該方法優(yōu)化了用戶的視覺特性,與傳統(tǒng)方法相比,人機交互界面設計質(zhì)量和效率得以提升；所設計的人機交互界面增強了用戶的交互體驗.

關鍵詞：人機交互界面;視覺注意機制;界面設計;視覺注意計算模型

computational model of visual attention

人機交互界面(Human-Computer Interface,HCI)是人與機器、環(huán)境之間進行信息交互的主要接口,隨著人類所處的環(huán)境和使用的機器越來越復雜,人與機器、環(huán)境之間的交互界面也愈加復雜,在單位時間和單位空間中,人機交互界面所傳遞的信息也越來越多[1].這就要求用戶要在較短時間內(nèi)接收大量的信息并進行加工處理,進而做出迅速而準確的反應.這其中,視覺信息占全部交換信息大部分,約為80%左右[2-3].因此人機交互界面的視覺工效對提高人-機-環(huán)境系統(tǒng)運行的安全性和工作效率,降低用戶的操作負擔和疲勞程度有重要的作用.合理的人機交互界面設計能有效地降低操作失誤,提高操作人員的認知能力,使操作人員及時對系統(tǒng)故障做出正確判斷[4].視覺注意機制在視覺信息處理過程中起著非常重要的作用,一般在人-機-環(huán)境系統(tǒng)中,在短時間內(nèi)進入人類視野的信息都是海量的,而人類視覺系統(tǒng)的信息處理資源卻是有限的,無法并行處理所有的信息,同時,并不是所有的視覺信息都是同等重要的,需要根據(jù)信息的重要程度分別給予不同的處理順序.通過視覺注意機制,能對人-機-環(huán)境系統(tǒng)中輸入的視覺信息進行有選擇的處理,降低信息處理的計算量,提高視覺信息處理的效率,使得用戶能夠對人-機-環(huán)境系統(tǒng)出現(xiàn)的各種情況作出及時的反應和處理.因此對于用戶視覺系統(tǒng)和視覺生成機制的理解,是進行人機界面乃至整個人-機-環(huán)境系統(tǒng)設計的基礎.文獻[5]基于用戶的視覺注意和視覺搜索規(guī)律提出了移動應用界面的設計原則,但對于用戶視覺機制在人機交互界面具體設計過程中的應用未進行討論.文獻[6]探討了視覺選擇性注意的發(fā)生規(guī)律及在人機交互過程中的表現(xiàn),分析了網(wǎng)頁交互界面中布局、色彩、內(nèi)容等要素對用戶視覺注意的影響,但對于人機交互界面中元件的視覺注意程度分析是建立在定性分析的基礎上.文獻[7]利用眼動分析對人機交互界面的可用性進行評估,但眼動追蹤實驗實驗流程較為復雜,對實驗條件有較高的要求,且需要一定數(shù)量的用戶參與實驗,設計效率較低.為了提高人機交互界面設計的水平和效率,本文提出一種基于視覺注意機制的人機交互界面設計方法,利用視覺注意計算模型分析人機交互界面中各組成元件的視覺注視程度,構建視覺注意焦點圖,分析各組成元件的重要度和使用頻率,建立人機交互界面的重要性分布圖.通過兩幅圖的比對及人機工程學中對視覺特征的來評價人機交互界面的設計質(zhì)量,以智能手機的人機交互界面設計為例對所提出的方法進行了驗證.

1組成元件的視覺注意分析

1.1視覺注意分析

人機交互界面中包含了多個組成元件,這些組成元件能夠實現(xiàn)不同的功能.元件包含了色彩、形狀、方向、位置和紋理等視覺特征.用戶在觀察人機交互界面時會對某些組成元件給予更多的視覺注意,而對其他元件的視覺注意程度較低,這是由于在人機交互界面設計中某些組成元件更能引起用戶的視覺注視.因此,需要找出在人機交互界面中哪些組成元件更能引起用戶的視覺注意,盡管現(xiàn)在視覺注意在大腦中的形成機制尚不明確,但現(xiàn)有的一些以色彩、形狀和位置等視覺特征分析為基礎的視覺注意計算模型[8-10]能較好的對用戶視覺注意進行計算和模擬.文中以文獻[11]提出的上下文顯著性檢測算法為基礎,結合人機工程學中的一些視覺特征[12]來計算人機交互界面中組成元件的視覺注意程度.在人機交互界面中,色彩是一種刺激性較強的視覺特征,相比人機交互界面中的其他視覺特征,在視覺上色彩更容易引起用戶的注意.人類在長期的進化過程中,所形成的視覺系統(tǒng)對顏色和亮度的差別,即對比鮮明的邊緣,比絕對的亮度水平要更加敏感[13].因此在對人機交互界面進行視覺注意分析時,單純的考慮組成元件的色彩絕對值并沒有實際意義,而應該關注各組成元件之間的色彩差異.對于人機交互界面色彩特征描述,需要選擇符合人類視覺感知的色彩模型.目前,在彩色成像設備和彩色顯示設備中最為常用的是加色法混色(Red Green Blue,RGB) 模型,但是這種模型是用紅、綠、藍三基色按照不同比例的混合來顯示不同的色彩,而人類在感知色彩時,并不能直接到感覺紅、綠、藍三基色的比例關系,所以RGB模型并不是理想的描述人類色彩感知的色彩模型.人類是通過亮度、飽和度和色調(diào)來感知色彩并加以區(qū)分,因此文中選擇國際照明委員會L*a*b*色彩模型來描述用戶界面的色彩特征.

用戶在觀察人機交互界面時,觀察的是物體,而不是像素點,所以可以將每個組成元件分別看作是一個具有單一色彩的物體.設人機交互界面中共有n個組成元件,ci、cj為該界面中第i、j(i,j=1,2,…,n)個組成元件,則兩個元件之間的色差為

dc(ci,cj)=

(1)

(2)

式中:A為組成元件的面積；(x,y)為元件構成的圖形劃分為基本圖形后每個基本圖形中心的坐標.

(3)

根據(jù)Goferman提出的上下文顯著性檢測算法,元件ci、cj之間的差異定義為

(4)

元件ci在單一尺度下的視覺注意程度值為

(5)

因用戶一般都是在一個固定距離觀察人機交互界面,且在觀察過程中,人機交互界面的尺寸不會發(fā)生變化,所以各組成元件視覺注意程度的計算只需考慮單一尺度即可.

1.2視覺注意焦點圖的可視化處理

為了使用戶的視覺注意情況可以更加直觀的表達,需要將用戶對不同元件的視覺注視情況進行可視化處理.文中以灰度圖的方式來表示元件的視覺注意程度,用不同的灰度來表達元件所具有的不同的視覺注意程度值,若一個元件越容易引起用戶的視覺注視,其就具有更高的灰度值,若元件的視覺注意程度值越低,就以較低的灰度值顯示.因為灰度值的范圍是0～255,因此具有最高視覺注意程度值的元件的灰度為255,有最低視覺注意程度值的元件的灰度為0,其他元件的灰度值通過插值的方式獲取,計算公式為

(6)

式中：gVi為元件ci的灰度值；rVi為元件ci的視覺注意程度值在所有元件按視覺注意程度值從小到大排列后的排序.

2人機交互界面重要性分布圖

2.1組成元件的重要性和使用頻率分析

人機交互界面一般都由多個元件組成,每個元件都具有不同的重要度和使用頻率.因為在人機交互界面中的組成元件數(shù)量并不多,所以文中采用配對比較法來確定元件的重要度和使用頻率.令Ii、Ij為元件ci、cj的重要度,由用戶逐對的比較兩個元件ci、cj的重要度并進行打分,若Ii>Ij,元件ci計1分,若Ii

表1　元件的重要度配對比較

同樣使用配對比較法分析元件的使用頻率,令Fi、Fj分別為元件ci、cj的使用頻率,由用戶逐對的比較兩個元件ci、cj的使用頻率并進行打分,若Fi>Fj,元件ci計1分,若Fi

令Si為元件ci的重要性,元件重要性綜合考慮了重要度和使用頻率,其計算公式為

Si=αIi+βFi

(7)

其中α、β分別為元件重要度和使用頻率的權重,由行業(yè)專家和設計師確定.

表2　元件的使用頻率分析

2.2人機交互界面重要性分布圖可視化處理

文中通過灰度圖的方式來表示人機交互界面的重要性分布,每一個元件都具有不同的重要性,即以不同的灰度值來顯示,如果元件具有較高的重要性,就以更高的灰度值來顯示,若重要性低則以較低的灰度值表示.因為灰度值的范圍是0～255,因此具有最高重要性的元件的灰度為255,有最低重要性的元件的灰度為0,其他元件的灰度值通過插值的方式獲取,計算公式為

(8)

式中：gsi為元件ci的在人機交互界面重要性分布圖中的灰度值;rsi為元件ci的重要性在所有元件按重要性從小到大排列后的排序.

3基于視覺注意機制的人機交互界面設計

用戶在觀察人機交互界面時,會更快、更多的注意到那些引起他們視覺注視的元件.在緊急情況下,用戶必須在最短時間內(nèi)找到那些重要的元件來處理發(fā)生的事件.另外,還有一些元件具有很高的使用頻率,如果用戶能夠很容易地找到這些元件,就可以節(jié)省大量的時間,提高操作效率,使用戶獲得更好的交互體驗.因此,具有高重要度和使用頻率的元件應當更容易被用戶關注到,即具有較高視覺注意程度.為此,文中提出以視覺注意焦點圖和重要性分布圖進行比對為基礎的設計方法,并引入人機工程學中的指標來進行評估.基于視覺注意機制的人機界面設計流程具體包括：① 設計師完成人機交互界面初步設計方案；② 提取元件的色彩、空間位置等初級視覺特征;③ 根據(jù)視覺注意計算模型計算各元件的視覺注意程度；④ 構建人機界面視覺焦點圖；⑤ 分別分析各元件的重要度和使用頻率； ⑥ 確定重要度和使用頻率的權重,計算元件的重要性；⑦ 構建人機界面元件重要性分布圖；⑧ 設計師將視覺注意焦點圖和重要性分布圖進行視覺比對,并根據(jù)人機工程學中對視覺特征的分析來對人機交互界面設計方案進行評估.

評估標準包括：① 視線的變化習慣于從左到右、從上到下和順時針方向運動；② 當眼睛偏離視中心時,在偏離距離相等的情況下,人眼對左上限的觀察最優(yōu),依次為右上限、左下限,而右下限最差；③ 人眼的水平運動比垂直運動速度快；④ 組成元件的排列盡量緊湊,以減少人眼視覺搜索的范圍,降低視覺疲勞.確定人機界面設計方案是否符合用戶需求及視覺特性,若滿足要求,輸出設計方案,若不滿足要求,則重新對人機界面設計方案進行修改,直至完成滿足要求的人機界面設計方案.

4實例驗證

本文以智能手機的人機交互界面設計為例來驗證所提出的方法.在智能手機的人機交互界面中共有12個組成元件,如圖1所示,因為元件中的圖案所占面積較小,對元件的整體色彩影響有限,因此,在視覺注意的分析和計算中將元件看作是具有單一色彩的圖形.各組成元件的色彩和位置信息見表3～4.

圖1　智能手機人機交互界面

根據(jù)表3～4中數(shù)據(jù),取k=3,利用式(4)～(5)計算得出各組成元件的視覺注意程度值,見表5.根據(jù)表5中的視覺注意程度值,賦予每個組成元件不同的灰度值,建立人機交互界面視覺注意焦點圖,如圖2所示.

表3　各組成元件的色彩信息

表4　各組成元件的位置信息

表5　組成元件視覺注意程度值

圖2　人機交互界面視覺注意焦點圖

同時,由20名用戶對該界面中的12個組成元件的重要度和使用頻率進行評價,根據(jù)行業(yè)專家和設計師的意見,設置 ,通過式(8)得出各組成元件的重要性,并建立重要性分布圖(如圖3所示).

圖3　人機交互界面重要性分布圖

比對人機交互界面的視覺注意焦點圖和重要性分布圖,可以直觀的觀察到人機交互界面中具有較高重要性的元件同時也具有較高的視覺注意程度,如元件c1、c2等.同時,具有較高重要度和使用頻率(重要性)的元件基本都分布在人機交互界面的左上、右上象限；而較低重要度和使用頻率(重要性)的元件分布在左下、右下象限,能較好的滿足用戶的視覺特性,所設計的方案能很好的提高用戶的操作效率和交互體驗.

5結 論

1) 文中將視覺注意的計算方法引入到人機交互界面的設計過程中,提出了一種考慮用戶視覺注意機制的人機交互界面設計方法,與目前常用的基于眼動追蹤的人機交互界面設計方法相比,該方法不需要設計復雜的實驗流程和實驗條件,具有更高的效率和準確性.

2) 以智能手機的人機交互界面為案例,分別構建人機交互界面的視覺注意焦點圖和重要性分布圖,設計師能夠直觀地對人機交互界面設計方案進行評估,評估結果作為設計的依據(jù)可以指導設計師的設計.結果表明文中所提方法能為設計師的設計活動提供高效的輔助,有效提高人機交互界面的設計質(zhì)量和效率.

參 考 文 獻：

[1]張全,顧振宇,明新國.復雜人-機界面色彩設計系統(tǒng)研究[C]//第九屆人-機-環(huán)境系統(tǒng)工程大會論文集.丹東:第九屆人-機-環(huán)境系統(tǒng)工程大會,2009:165.

ZHANG Quan,GU Zhenyu,MING Xinguo.Color Design System Research of Complex Human-machine Interface[C]//9th Conference on Man-machine-environment System Engineering.Dandong:9th Conference on Man-machine-environment System Engineering,2009:165.(in Chinese)

[2]JACOBSON N,BENDER W.Color as a Determined Communication[J].IBM Systems Journal,1996,35(3/4):526.

[3]WYSZECKI G,STILES W S.Color Science[M].New York:Jonh Wiley & Sons,2000.

[4]ISAAC J A,LUQUETTI D S,DOUGLAS V T,et al.The Use of a Simulator to Include Human Factors Issues in the Interface Design of a Nuclear Power Control Room[J].Journal of Loss Prevention in the Process Industries,2008,21(3):227.

[5]王慧,黃颯.視覺注意在移動應用界面設計中的應用研究[J].大眾文藝,2013(17):98.

WANG Hui,HUANG Sa.The Application Research of Visual Attention in the Mobile Application Interface Design[J].Art and Literature for the Masses,2013(17):98.(in Chinese)

[6]劉春強.視覺選擇性注意在網(wǎng)頁交互界面設計中的應用研究[D].無錫:江南大學,2014.

LIU Chunqiang.The Application Research of Visual Selective Attention in the Web Interactive Interface Design[D].Wuxi:Jiangnan University,2014.

(in Chinese)

[7]常方圓.基于眼動儀的智能手機APP圖形用戶界面設計可用性評估[J].包裝工程,2015,36(8):55.

CHANG Fangyuan.Usability Evaluation of Smart Phone Application Graphic User Interface Based on Eye-tracker[J].Packaging Engineering,2015,36(8):55.

(in Chinese)

[8]ITTI L,KOCH C,NIEBUR E.A Model of Saliency-based Visual Attention for Rapid Scene Analysis[J].IEEE Transactions on Pattern Analysis and Machine Intelligence,1998,20(11):1254.

[9]MA Y F,ZHANG H J.Contrast-based Image Attention Analysis by Using Fuzzy Growing[C]// Proceedings of the 11th ACM International Conference on Multimedia.Berkeley:Eleventh ACM International Conference on Multimedia,2003:374.

[10]SUN Y,FISHER R.Object-based Visual Attention for Computer Vision[J].Artificial Intelligence,2003,146(1):77.

[11]STAS G,LIHI Z M.Context-Aware Saliency Detection[J].IEEE Transactions on Pattern Analysis and Machine Intelligence,2012,34(10):1915.

[12]丁玉蘭.人機工程學[M].北京:北京理工大學出版社,2005.

DING Yulan.Ergonomics[M].Beijing:Beijing Institute of Technology Press,2005.(in Chinese)

[13]JEFF J.Designing with the Mind in Mind:Simple Guide to Understanding User Interface Design Rules[M].Singapore:Elsevier,2011.

[14]張艷幫,張芬.融合背景模型及顏色特征的感興趣目標檢測[J].西安工業(yè)大學學報,2015,35(7):546.

ZHANG Yanbang,ZHANG Fen.Salience Object Detection Based by Fusing Background Model and Color Feature[J].Journal of Xi’an Technological University,2015,35(7):546.(in Chinese)

(責任編輯、校對潘秋岑)

Human-Computer Interface Design Considering Visual Attention

WANGNing,YUSuihuai,XIAOLinzhen,ZHOUXian

(Shaanxi Engineering Laboratory for Industrial Design,Northwestern Polytechnical University,Xi’an 710072,China)

Abstract:In order to improve the design efficiency and quality,a new method for human-computer interface design,which considers human visual attention and ergonomics,is proposed.The visual attention of human-computer interface is analyzed and calculated by a context-aware saliency detection algorithm and the visual attention map is established.Meantime,the importance and frequency of use of each component is obtained by the users’ investigation.And the significance distribution map of human-computer interface is drawn.By comparing the two maps,the designer can estimate if the component with high significance has high visual attention or not.Studying the design of human computer interaction interface of intelligent mobile phone,the proposed method is validated.The results show that the proposed method optimizes the user’s visual characteristics.Compared with the traditional method,the quality and efficiency of the human-computer interaction interface design is improved.The designed human-computer interaction interface enhances the user’s interactive experience.

Key words:human-computer interface;visual attention;interface design;

DOI:10.16185/j.jxatu.edu.cn.2016.04.014

收稿日期：2015-10-16

基金資助：國家科技支撐計劃項目(2015BAH21F01);西安市科技計劃項目(FW1409)

作者簡介：王寧(1981-),男,西北工業(yè)大學博士研究生通訊作者：余隋懷(1962-),男,西安工業(yè)大學教授,主要研究方向為數(shù)字化設計、工業(yè)設計.E-mail:ysuihuai@vip.sina.com.

文獻標志碼:中圖號：TB18;TB47A

文章編號：1673-9965(2016)04-0334-06