基于視覺認知的ASD兒童干預APP導航界面設計研究

楊俞玲　張丙辰　楊杰

關鍵詞：ASD兒童 視覺認知 干預App 布局形式 按鈕形狀

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

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

引言

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

一、ASD兒童干預App導航界面概述

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

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

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

二、研究方法

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

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

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

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

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

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

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

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

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

三、結果與分析

將兩組被試對不同形式導航布局和按鈕形狀的持續注視時間（Fixation Duration，FD）、AOI（興趣區）注視點數（Fixations Count，FC）的數據以及熱點圖（Heat Map）進行總體分析，詳見下表3及表5。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結語

通過采用眼動追蹤技術，探索不同導航布局和按鈕形狀對ASD兒童視覺注意偏向的影響，進而探討其干預App導航界面設計的方法。基于對本實驗研究結果的討論分析，提出以下設計建議：（1）水平偏下布局更容易引起ASD兒童的注視，在干預App導航界面的設計時，推薦優先選用水平偏下布局;（2）平鋪布局會讓ASD兒童因信息量較大，而對導航界面的關注度降低，故在干預App導航界面的設計中應減少這種布局的使用。（3）對于居中布局，ASD兒童和TD兒童都有較好的注視效果，如App對通用性具有較高要求，可以考慮采用居中布局。（4）按鈕形狀對兒童的注視影響不顯著，在導航界面設計時可不做主要考慮因素。

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

1272501705262