基于視覺認知的ASD兒童干預(yù)APP導(dǎo)航界面設(shè)計研究

楊俞玲　張丙辰　楊杰

關(guān)鍵詞：ASD兒童 視覺認知 干預(yù)App 布局形式 按鈕形狀

中圖分類號：TB472 文獻標識碼：A

文章編號：1003-0069（2022）02-0056-04

引言

自閉癥譜系障礙（Autism Spectrum Disorders，ASD）是一種發(fā)病于早期，以社會交往、溝通障礙和興趣范圍狹窄及行為重復(fù)刻板為主要特征的發(fā)育障礙。錯過早期干預(yù)將危害兒童的健康成長，隨著特殊教育法規(guī)的制定和完善，ASD兒童的干預(yù)訓(xùn)練逐漸從教師為主導(dǎo)轉(zhuǎn)變?yōu)樽灾鲗W(xué)習(xí)為主。干預(yù)App作為新技術(shù)下的視覺手段，在自閉癥康復(fù)領(lǐng)域中得到了廣泛的應(yīng)用，為ASD兒童的康復(fù)提供了高效率、低成本的有效途徑。研究發(fā)現(xiàn)，ASD兒童在視覺認知上具有較為明顯的優(yōu)勢，基于用戶需求分析的干預(yù)App界面設(shè)計能夠更好地適應(yīng)ASD兒童的認知特點，為其早期干預(yù)訓(xùn)練和教育問題提供了嶄新的思路。

一、ASD兒童干預(yù)App導(dǎo)航界面概述

干預(yù)App是指以提高自閉癥患者的社會交往與語言溝通能力為主要目的，并兼具改善其重復(fù)刻板行為功能的應(yīng)用程序。由于其具有教育性、便攜性和低成本被廣泛應(yīng)用，研究表明，干預(yù)App可以有效改善ASD兒童的問題行為，具有較好的輔助作用和教育潛力。

導(dǎo)航界面是用戶獲取信息并實現(xiàn)自我需求的重要入口，導(dǎo)航設(shè)計的優(yōu)劣能夠直接影響用戶的操作體驗。優(yōu)秀的導(dǎo)航設(shè)計能夠幫助用戶快速了解軟件功能，減少學(xué)習(xí)時間，提高使用效率和滿意度。導(dǎo)航是界面設(shè)計的重要內(nèi)容之一，包括按鈕的形狀、大小以及彼此之間的連接關(guān)系，其中又包括各按鈕間的造型風(fēng)格、比例關(guān)系以及色彩協(xié)調(diào)等。雖然占據(jù)界面較少的區(qū)域，卻能引起用戶的關(guān)注，達到信息的有效傳遞。

ImagiRation LLC開發(fā)的《Autism Therapy with MITA》，是臨床數(shù)據(jù)支持的第一個也是唯一的語言治療應(yīng)用。該App將導(dǎo)航設(shè)計成趣味的路線圖模式，喚起兒童的好奇心和探索欲，未通過的關(guān)卡屬于待點亮的狀態(tài)，鼓勵A(yù)SD兒童繼續(xù)前進，導(dǎo)航按鈕采用圓形符號，達到簡潔清晰的視覺效果，深受自閉癥兒童和家長的喜愛（見圖1左）?！禔vaz》是一款增強型和替代性的交流應(yīng)用程序，它可以讓ASD兒童擁有自己的聲音，已經(jīng)在20多個國家落地，在美國、芬蘭、瑞典和印度都有獲獎。App中的導(dǎo)航設(shè)計布滿整個界面，圖案與文字相結(jié)合導(dǎo)航形式條理清晰，并采用簡單的背景顏色加以區(qū)分，指示性強，導(dǎo)航過程令A(yù)SD兒童感到愉悅（見圖1中）。北大生命科學(xué)研究所魏麗萍教授開發(fā)的《小雨滴》是目前國內(nèi)下載量最高，最受歡迎的一款A(yù)SD兒童干預(yù)App。宮格式導(dǎo)航直觀展現(xiàn)各項內(nèi)容，抽象手繪風(fēng)格的圖形符號生動有趣，與兒童認知心理相符合，便于ASD兒童進行選擇，表達內(nèi)心需求（見圖1右）?？梢钥闯觯瑑?yōu)秀的App導(dǎo)航界面設(shè)計對于App的價值提升具有重要作用，因此，將ASD兒童的視覺認知特點引入到App導(dǎo)航界面設(shè)計中就顯得尤為重要。

二、研究方法

本研究采用眼動追蹤實驗，能夠精確地記錄ASD兒童和普通兒童在處理視覺信息時不同的眼動軌跡特征，從而探究用戶的視覺認知特點與不同導(dǎo)航界面之間的關(guān)系，可以為后續(xù)干預(yù)App導(dǎo)航界面設(shè)計提供參考，整個實驗具體流程如圖2所示。

（一）被試：本次實驗初期聯(lián)系了徐州市康復(fù)醫(yī)院的21名ASD兒童，但由于實驗時間較長，且實驗過程需要被試能夠較好地配合，經(jīng)反復(fù)篩選，選定18名年齡范圍為6～8歲的ASD兒童作為實驗組，具備正常的視覺認知能力，能夠理解實驗過程中出現(xiàn)的相關(guān)要求，可以較好地進行實驗。從徐州銅山區(qū)中心幼兒園選取與ASD兒童生理年齡匹配的18名正常兒童作為對照組。對被試兒童的家長詳細和完整地說明本次實驗的內(nèi)容和意義，獲得自愿參加研究的家長書面同意書。實驗組和對照組性別和年齡的具體情況如表l所示。

（二）實驗設(shè)備：眼動儀可以精確地記錄用戶在處理視覺信息時不同的眼動軌跡特征。本研究采用aSee Glasses眼鏡式眼動儀、微軟12.3英寸Surface Pro了一臺，分辨率為2650X1600 px，以及附帶的aSee Glasses Studio軟件記錄所有參與實驗的被試兒童自由觀看所給固定樣本的注視行為，顯示屏與被試者眼睛之間的距離約為50cm，注視持續(xù)時間大于lOOms為一次注視。實驗過程中，眼動儀與電腦相連，用于數(shù)據(jù)的采集，實驗場景如圖3所示。

（三）實驗材料：通過App Store、華為應(yīng)用市場和Google應(yīng)用市場對自閉癥類別的App進行取樣，結(jié)合功能特點對收集到的樣本進行分類，排除因技術(shù)問題無法使用以及內(nèi)容明顯與ASD兒童無關(guān)的應(yīng)用程序，最終獲得ASD兒童干預(yù)App樣本為教育輔助類28例，語言訓(xùn)練類19例，社交技能類15例，行為干預(yù)類13例，益智游戲類6例，共計81例（見圖4）。

在初步篩選的基礎(chǔ)上，去除風(fēng)格相似及下載量偏低的App中的導(dǎo)航界面圖片，并邀請3位具備資深兒童App設(shè)計經(jīng)驗的設(shè)計師和2位視覺傳達設(shè)計專業(yè)的研究生，結(jié)合導(dǎo)航界面的可視性、引導(dǎo)性以及市場需求綜合考慮，篩選出8類干預(yù)App的導(dǎo)航界面作為典型性樣本，其主要內(nèi)容信息見表2。

根據(jù)視覺感知強度的分布特征對矩形人機界面進行區(qū)域的劃分，主要包括3×3宮格、3×4宮格、4×6宮格的劃分方式。在對81例App樣本進行分析的基礎(chǔ)上，本研究采用4×6宮格的劃分方式，在2048×1536px的界面上，去除邊界約束的影響，進行布局區(qū)域的劃分，可將導(dǎo)航布局形式大致分為左側(cè)垂直布局、居中垂直布局、右側(cè)垂直布局、居中布局、水平偏下布局和平鋪布局，在后續(xù)實驗中分別以X1＼X2＼X3＼X4＼X5＼X6作為樣本代號，見圖5。

通過對收集的81例App的導(dǎo)航界面樣本形式特征的分析，可將按鈕形狀分為：圓角矩形、橢圓形、圓形、正方形四類，在后續(xù)實驗中分別以Y1Y2＼Y3＼Y4作為代號。依據(jù)導(dǎo)航布局形式和按鈕形狀類型，進行不同的特征組合，可得到各種特征組合的樣本，共計24個（見圖6）。

（四）實驗設(shè)計：采用2（組別：ASD組、TD組）×6（導(dǎo)航布局形式：X1～X6） X4（按鈕形狀：Y1～Y4）三因素混合設(shè)計，分析兩組兒童對不同布局形式、按鈕形狀的導(dǎo)航界面的視覺加工特點;組間變量為組別，組內(nèi)變量為布局形式和按鈕形狀，因變量為注視不同布局形式、按鈕形狀的持續(xù)注視時間和興趣區(qū)注視點數(shù)。

（五）實驗程序：實驗采取個別測試的方法，在安靜的房間內(nèi)進行，被試者進入實驗室，熟悉環(huán)境后在距離顯示器約50cm的地方坐下;對ASD兒童施測時，另增加被試家長或機構(gòu)教師進行輔助，處理可能出現(xiàn)的行為問題。為了確保實驗?zāi)軌驕蚀_進行，每次實驗前進行3點校準法，校準成功后方能進行實驗。實驗結(jié)束后給予被試一定的物質(zhì)獎勵。

三、結(jié)果與分析

將兩組被試對不同形式導(dǎo)航布局和按鈕形狀的持續(xù)注視時間（Fixation Duration，F(xiàn)D）、AOI（興趣區(qū)）注視點數(shù)（Fixations Count，F(xiàn)C）的數(shù)據(jù)以及熱點圖（Heat Map）進行總體分析，詳見下表3及表5。

（一）持續(xù)注視時間：持續(xù)注視時間是指視線在畫面中某個位置的停留時長，也表示在AOI內(nèi)所有注視點的持續(xù)注視時間總和，主要反映信息加工的偏向。持續(xù)注視時間越長，說明被試對該區(qū)域的關(guān)注度越高，越感興趣。

為了證明數(shù)據(jù)的有效性，利用SPSS軟件對不同按鈕形狀、導(dǎo)航布局的持續(xù)注視時間數(shù)據(jù)進行單因素方差分析，其中df為樣本自由度，F(xiàn)值是F檢驗的統(tǒng)計量值，F(xiàn)=S12/S22，即組間均方誤差/組內(nèi)均方誤差，p為顯著性水平（當p<0.05時，說明數(shù)據(jù)具有統(tǒng)計學(xué)差異，反之則無統(tǒng)計學(xué)差異）。

從表4可以看出，組別顯著性數(shù)值p=0.029，小于0.05，說明被試類型對持續(xù)注視時間的影響顯著;按鈕形狀顯著性數(shù)值p=0.153，大于0.05，被試對不同按鈕形狀的持續(xù)注視時間無明顯差異;導(dǎo)航布局顯著性數(shù)值p=0.000，小于0.05，即被試對不同導(dǎo)航布局的持續(xù)注視時間有顯著性差異。

通過對36名被試的持續(xù)注視時間進行描述性統(tǒng)計發(fā)現(xiàn)，TD組被試的持續(xù)注視時間（M=0.632）顯著高于ASD組被試（M=0.590），且兩組被試注視不同按鈕形狀所組成的導(dǎo)航布局樣本的時間存在差異。從圖了可以看出，按鈕形狀對兩組被試持續(xù)注視時間的影響皆不顯著，故不作分析;ASD組被試對布局形式的持續(xù)注視時間為：X5>X4>X2>X1>X3>X6，即ASD組被試在水平偏下布局的持續(xù)注視時間最大，在平鋪布局的持續(xù)注視時間最小;TD組被試對布局形式的持續(xù)注視時間為：X4>X5>X6>X3>X2>X1，即TD組被試在居中布局的持續(xù)注視時間最大，在左側(cè)垂直布局的持續(xù)注視時間最小。

可以看出，對于ASD組被試而言，水平偏下布局能更有效地捕獲兒童的注意，有更高的吸引力。在平鋪布局的持續(xù)注視時間最短，可能是因為該布居中信息較多，從而導(dǎo)致兒童對信息的加工效能水平降低，持續(xù)注視時間缺乏。對于TD組被試而言，居中布局更能吸引兒童的注意。

（二）AOI（興趣區(qū)）注視點數(shù)：一次注視為一個注視點，注視點數(shù)是在AOI內(nèi)注視點的總數(shù)量，它也是一個區(qū)域性的概念，是區(qū)域重要程度的一個標志，注視點數(shù)越多，表明被試對這個區(qū)域越關(guān)注。

利用SPSS軟件對不同按鈕形狀、導(dǎo)航布局的注視點數(shù)數(shù)據(jù)進行單因素方差分析，結(jié)果如表6所示。

組別顯著性數(shù)值p=0.541，大于0.05，說明被試類型對注視點數(shù)的影響不顯著;按鈕形狀顯著性數(shù)值p=0.067，大于0.05，被試對不同按鈕形狀的注視點數(shù)無明顯差異;導(dǎo)航布局顯著性數(shù)值p=0.000，小于0.05，即被試對不同導(dǎo)航布局的注視點數(shù)有顯著性差異。

對36名被試的AOI注視點數(shù)進行描述性統(tǒng)計，發(fā)現(xiàn)兩組被試注視不同按鈕形狀所組成的導(dǎo)航布局樣本的次數(shù)也存在類似差異。從圖8可以看出，按鈕形狀對被試注視點數(shù)的影響也不顯著。ASD組被試對布局形式的注視點數(shù)為：X5>X4>X2>X1>X3>X6，即ASD組被試在水平偏下布局的注視點數(shù)最多，在平鋪布局的注視點數(shù)最少;TD組被試對布局形式的注視點數(shù)為：X4>X5>X6>X2>X3>X1，即TD組被試在居中布局的注視點數(shù)最多，在左側(cè)垂直布局的注視點數(shù)最少。

可以看出，對于ASD組被試而言，水平偏下布局能夠引發(fā)兒童更多的視覺探索，對于TD組被試而言，居中布局能夠引發(fā)更高頻的注視，更具吸引力。

（三）熱點圖核心區(qū)域比重：熱點圖可以直觀的展示出被試者在刺激材料上的視線分布情況，顏色越紅表示注視點越集中，持續(xù)注視時間越長，黃色次之，綠色表示最少或最短，沒有顏色的區(qū)域則表示該區(qū)域沒有被注意到。

通過比較兩組被試的熱點圖可以看出，ASD組被試（見圖9左）的視線分布整體較為離散，密集程度低，對于不同按鈕形狀所組成的導(dǎo)航布局樣本，熱點顏色最深，范圍最廣的區(qū)域都集中在水平偏下布局，熱點顏色最淺、范圍最小的區(qū)域集中在全鋪布局。TD組被試（見圖9右）的視線分布較為集中，密集程度高，熱點范圍主要集中在居中布局，在左側(cè)垂直布居中熱點顏色最淺，范圍最小。

為了更加準確地對注視點的集中趨勢進行分析，通過Photoshop軟件計算不同導(dǎo)航布局樣本中熱點（紅色區(qū)域）的面積，從而推算出AOI熱點圖的核心區(qū)域比重（見表了）。

從表了可以看出，ASD組被試的熱點圖紅色區(qū)域的面積比例為：X5>X4>X3>X2>X1>X6，即水平偏下布局>居中布局>右側(cè)垂直布局>居中垂直布局>左側(cè)垂直布局>全鋪布局;TD組被試的熱點圖紅色區(qū)域的面積比例為：X4>X5>X6>X2>X3>X1，即居中布局>水平偏下布局>全鋪布局>居中垂直布局>右側(cè)垂直布局>左側(cè)垂直布局。

通過上述實驗可以看出，導(dǎo)航界面的不同布局形式與兒童的視覺認知特點具有特定的映射關(guān)系，而導(dǎo)航界面的不同按鈕形狀對兒童視覺認知的影響較小?？偟膩砜?，ASD組被試在水平偏下布居中的持續(xù)注視時間最長，注視點數(shù)最多，其次是居中布局，在全鋪布局的持續(xù)注視時間最短，注視點數(shù)最少，說明水平偏下布局對ASD兒童的吸引力最強，全鋪布局的吸引力最弱;這可能與ASD兒童在整體信息的加工能力上存在缺陷和自下而上的視覺搜索方式有關(guān)。TD組被試在居中布居中視線分布最為密集，在左側(cè)垂直布居中視線分布最為離散，說明TD組被試對居中布局更感興趣，對左側(cè)垂直布局的興趣最低。

結(jié)合實驗統(tǒng)計和導(dǎo)航布局的各形式特征分析發(fā)現(xiàn)，水平偏下布局和居中布局都具有較強的引導(dǎo)性和顯著性，且水平偏下布局的分布形式更加符合ASD兒童的視覺加工特點。故而在ASD兒童干預(yù)App界面導(dǎo)航布局的設(shè)計中，應(yīng)該優(yōu)先考慮使用水平偏下布局，能夠更好地引導(dǎo)ASD兒童學(xué)習(xí)和使用，提升App的干預(yù)效果和價值。居中布局更加符合TD兒童的視覺加工特點，能夠更好地促進兒童對于不同技能知識的掌握和理解，且ASD兒童也對居中布局表現(xiàn)出較多的視覺注意，如對兒童App的通用性要求較高時，可以優(yōu)先考慮使用居中布局。

結(jié)語

通過采用眼動追蹤技術(shù)，探索不同導(dǎo)航布局和按鈕形狀對ASD兒童視覺注意偏向的影響，進而探討其干預(yù)App導(dǎo)航界面設(shè)計的方法?；趯Ρ緦嶒炑芯拷Y(jié)果的討論分析，提出以下設(shè)計建議：（1）水平偏下布局更容易引起ASD兒童的注視，在干預(yù)App導(dǎo)航界面的設(shè)計時，推薦優(yōu)先選用水平偏下布局;（2）平鋪布局會讓ASD兒童因信息量較大，而對導(dǎo)航界面的關(guān)注度降低，故在干預(yù)App導(dǎo)航界面的設(shè)計中應(yīng)減少這種布局的使用。（3）對于居中布局，ASD兒童和TD兒童都有較好的注視效果，如App對通用性具有較高要求，可以考慮采用居中布局。（4）按鈕形狀對兒童的注視影響不顯著，在導(dǎo)航界面設(shè)計時可不做主要考慮因素。

將ASD兒童的視覺認知與干預(yù)App導(dǎo)航界面的布局形式和按鈕形狀關(guān)聯(lián)起來，為設(shè)計師開展設(shè)計工作提供參考，以期增強產(chǎn)品對ASD兒童的吸引力，從而達到更好的干預(yù)效果。

1272501705262