K12教育APP信息可視化設計研究

韋艷麗 孫虹 王松琴 王磊

摘要：在大數據時代，探索提高信息可視化設計質量的方法。基于K12教育APP產生的數據，結合用戶研究及交互設計理論方法，基于用戶場景，探索用戶需求并設計基于用戶需求的K12教育APP信息可視化設計。得到K12教育APP信息可視化設計方法。基于K12教育APP的信息可視化設計，針對用戶角色及用戶需求進行數據挖掘與可視化設計，有助于提升用戶獲取信息的效率與體驗。

關鍵詞：信息可視化 K12教育 用戶研究

中圖分類號：TP391.9 文獻標識碼：A文章編號：1003-0069（2019）01-0138-04

Abstract： In the era of big data， explore ways to improve the quality of information visualization design.Based on the data generated by K12 education app， combined with user research and interaction design theoretical methods， explore user requirements based on user scenarios and design the visual design of K12 education app information based on user requirements.The visual design method of K12 education app information is obtained.Based on the information visualization design of K12 education app， data mining and visual design are carried out for user roles and user demands， which is helpful to improve the efficiency and experience of users in obtaining information.

Keywords： Information visualization K12 education user research

引言

隨著科技的進步，大數據已逐步滲透我們的生活，面對海量復雜的數據信息，如何讓用戶能易于識別，獲取自身需要的有效信息，感知信息效用，圖表、線形圖、柱形圖、餅狀圖已經完全落后，信息可視化成為一種新的趨勢，新聞、趨勢、商業策略，所有抽象概念都可以用圖表表達。在體驗經濟的大背景下，信息可視化的研究重點將轉向可用性分析以及信息服務評價等內容，即由“以任務為中心”轉向“以用戶為中心”的研究[1]。

隨著物聯網的發展，教育行業也開始實施智慧教育，通過在線教育平臺，記錄學生學習行為數據。通過對海量數據的整理、分類、分析，挖掘學生學習能力、教學環境不足之處，合理安排教學內容，輔助教學。本文在闡述及探究數據可視化的內涵和技術基礎上，分析了教學平臺的用戶人群、需求、目的、場景等方面的特點，提出了如何基于用戶需求進行合理的信息可視化設計，在保證信息傳達準確度同時，提高用戶獲取信息時的體驗。

一、信息可視化

信息可視化（Information visualization）是一門跨學科領域，以研

究大規模非數值型信息的視覺呈現為首，利用圖形圖像技術與方法，抽象展示，幫助人們分析數據和理解信息。主要包括數據可視化、科學可視化、知識可視化、人機交互、信息圖形、視覺設計以及心理學和商業知識。信息可視化同時兼具科學的嚴謹性和設計美學的創造性，利用獨特的設計形式，組織整理各項信息，打破了原本繁瑣、枯燥、沉悶的數據，真正做到了形式和內容的統一、科學和藝術的統一[2]。圖形、地圖、表格、文本及顏色的合理搭配為信息可視化提供了展示方式和手段，設計師充分從用戶體驗角度設計方案，促進用戶理解、洞察信息中的關鍵點，各信息之間的關聯性，快捷、高效向用戶傳達，也成為現今信息呈現和傳播的重要發展方向。

二、k12教育APP

隨著全球教育信息化的發展，在線教育市場呈現井噴式增長，K12教育也包含其中。K12（kindergarten through twelfth grade）是教育類專用名詞，K指幼兒園，12則指小學、初中、高中教育，（如圖1）所示，從2014年至2018年K12在線教育占據市場規模逐年增加，并自2017年至今一直占據市場第一。目前我國在線教育產品主要分為輔導類、題庫類、答疑類、家教類、工具類。

數據來源于http：//www.sohu.com/a/191700814386633（根據市場公開數據、財報、企業訪談，結合艾瑞資訊模型核算）

基于互聯網的數據時代，傳統規模化授課模式難以激發學生自主學習熱情、培養創新能力及面對問題的決策力，借助網絡平臺實施全方位、多層次、寬領域的個性化教學形式已逐漸成為教育行業發展的必然趨勢[3]。教育類APP利用互聯網+教育打造新的教育體驗，通過APP中不同的交互形式，給用戶帶來不一樣的體驗，讓孩子爰上學習，讓家長和老師能隨時觀察和監督孩子學習近況，為學生、老師和家長間提供交流平臺，從而全面提升教學品質、學生實踐能力、課程優化升級等。

三、信息可視化在教育行業的應用

信息可視化的應用十分廣泛，在醫學、工程技術、自然科學、通信、金融和商業等領域都有顯著成效，在教育類應用產品中也頗有建樹。2018年4月，教育部辦公廳印發的《教育信息化2.0行動計劃》中明確提出，要推進“互聯網+教育”，建立健全教育信息化可持續發展機制，構建完善的教育體系，建設學習型社會，推動教育基礎數據共享。

信息可視化為傳統教學模式開辟了新路徑、新技術、新思維、新模式，打破了傳統的教育模式與理念，實現個性化教學、優化教學模式、構建教育評價機制、學校數據管理等。目前內外常用在線教育平臺有網易公開課、一起作業、作業幫、猿輔導、極課、智學網、mooc等。信息可視化在教育類產品應用中，雖然涉獵范圍廣泛，但缺乏研究力度與實踐經驗，沒有深入了解，不同信息最佳可視化展現形式，不足以形成標準化的設計模式，發揮信息可視化的最佳效用。信息可視化在教育平臺中用戶群體主要分為學生、教師、教學管理者和家長，本文將圍繞教師、教學管理者群體，以某教育類APP（教師端）為例，探索提升信息可視化設計質量的方法。

四、教育APP用戶分類

信息可視化的用戶是指信息經過可視化處理過的受眾人群。用戶感知是用戶體驗中最前端和最貼近用戶的一部分，它與數據的解讀與理解是息息相關的[45]。因此，對于終端用戶的劃分，有助于從受眾視角看待問題，了解需求。并且，不同的終端用戶需求也各不相同，甚至在不同時期，用戶的的需求都在不斷變化，獲取信息的目的也不一樣。這些對于設計師選擇信息可視化的展現方式起著至關重要的作用。（如表1）所示，按用戶閱讀信息目的將其分為兩類：普通用戶和專業用戶。

普通用戶，具有普遍性、廣泛性、非專業性的特點。對信息圖的理解程度參差不齊，大部分屬于被動接受信息者，并且接受內容往往與用戶的認知度、關注度及主觀意識密切相關，所以在獲取信息的過程中伴隨著隨機性和偶然性，少部分用戶積極獲取信息。專業用戶，具有專業性、精確性等特點，主要是一些專門從事學術、科研、機構、企業中具有領導地位的受眾。對信息所要傳達的內容十分了解，并且能從信息圖中摸索出一定的規律，透過現象看本質，挖掘出更有價值的內容。

不同的用戶群體也對應不同的教育APP，包括教師端、學生端（家長端）、運營人員，其中教師端分為普通教師用戶和教育管理者，不同的終端用戶或同一終端不同類型用戶對信息的需求都截然不同。

（一）教師端。教師端用戶主要是一些在校任職教師，主要分為兩類用戶，教育管理者和教師用戶，通過教育APP獲取一些與自身職業相關的信息。

教育管理者，屬于專業用戶，主要使用人群是校長、學科組長、教導主任等在校有決策權的用戶群體，通過產品提供的數據可視化處理，考核追蹤教師績效、教學任務完成情況，高效決策，指導教學計劃;了解學生整體成績情況，進而調整教學方案，對薄弱生進行針對性教學。

教師用戶，主要使用人群是在校任職的教師用戶，屬于核心用戶，主要分為代課老師、班主任、學科組長三類。由于職務的不同，不同用戶的權限也有所區分。教師用戶通過產品記錄的學生行為數據、相關檢測報告，掌握班級整體和學生的各科成績情況、知識點掌握度、年級排名、教學成果，實時監督學生作業完成度，海量題庫隨意出題，智能批改，輔助教學，留出更多精力在個性化教學上，豐富教學手段、因材施教，讓課程體系更加完善，使教學生動有趣，學生學有所獲。

（二）學生端（家長端）。學生端又可稱為家長端，是學生和家長用戶共存的一個平臺。為學生提供各類教學資源，及時了解自身薄弱情況，査漏補缺，自主個性化學習，有針對性地進行強化鞏固。[6]讓家長掌握學生在學校一切動態，包括通知、學習、教育資訊、安全等，促使學校和家長有效溝通，實現家校互聯。

（三）運營人員、科研人員。一般是指平臺內部操作人員，屬于專業型用戶。對業務熟悉度高，對信息的需求也更加具體細化，實時發現系統故障，通過可視化的信息圖表，監測系統發現優化點，多維數據之間的關聯度，從而總結數據規律，洞察商業動態，行業趨勢，制訂盈利模式及后續商業推廣方式，達到資源的優化配置，從而獲取對自身更有用的信息。

因此對于教師用戶、學生用戶兩類高頻用戶，產品的交互設計、視覺表現以及綜合用戶體驗方面要求更高。信息圖表呈現方式簡單易懂，操作便捷，反德及時，為用戶帶來沉浸式體驗，讓用戶對產品產生依賴性。

五、教育類APP（教師端）信息可視化設計

信息可視化設計的基本流程為明確需求、用戶調研、競品分析、建立信息架構、基本圖表建立、可視化方案設計、可用性測試與產品迭代等，根據產品的不同情況，優化還是新功能的建立，流程也會有所調整，不可完全按部就班來進行。智學網基于人工智能核心技術，學校課后作業、考試和發展性教學與教學評價功能，推出的大數據個性化教學系統。能夠實現教與學全場景動態數據的采集與分析，深度挖掘數據價值，幫助教育管理者高效決策，為教師提供針對性教學，因材施教、智能批改、査看學情考察的信息化環境與服務，提升教學質量m。如今該產品的用戶群體主要為教師和教學管理者，本文將以智學網（教師端）APP-學情分析功能為例，闡述信息可視化設計的流程。

教師用戶信息可視化優化設計，教師端“學情分析”模塊的核心定位就是基于過程性數據采集技術，挖掘數據，自動分析輸出每場考試及作業報告，內容涵蓋學生知識點掌握情況、得分率、排名、作答情況等，從而輔助教師制訂教學方案、講解錯題，針對性教學等，以此充分挖掘校園考試價值。本文以教師用戶為目標人群，通過對其進行深度訪談，挖掘信息需求，分析競品，梳理信息架構，對教師用戶所需信息進行可視化優化設計，并證明其可用性。

（一）競品分析

根據優化模塊功能及用途，選取極課教師APP和一起作業APP為競品，進行分析，（如圖2、3）所示，極課教師APP信息覆蓋面廣，利用用戶使用場景移動端只選取部分功能模塊，操作便捷高效。用戶可快速獲取索要數據，豎板界面，視覺流暢性高。但對于年級組長、校長、班主任等，沒有功能上區分，對于不同人群，所需功能也應有所調整。而一起作業頁面布局簡單直接，分為布置作業和檢查作業兩大模塊。海量題庫篩選題目，快捷操作，隨時生成作業。可仔細檢査英語聽說練習，學生作答情況。但不能通過作業數據，自動分析學生薄弱知識點，也能通過作業完成情況，發現學生共性問題。

（二）APP可用性測試

通過對APP的可用性測試，探索產品的可用性問題。（1）可用性測試任務，以一次年級考試為測試，觀察用戶在使用學情分析功能的主要使用場景，對頁面閱讀的流暢度，關注點，課下備課以及課上講解錯題，分析試卷并相應布置鞏固練等。（2）實踐結果分析。（如表2、3），從任務耗時和任務中跳轉次數統計結果分析，用戶在査看學情分析報告過程中被測用戶所耗時和跳轉次數差別較大，甚至會出現瀏覽路徑斷層現像，可以深入分析流程中的可用性問題。通過PSSUQ測試，搜集整理大量APP系統設計，得出相關可用性評分標準，（如圖4）所示，上線值為灰色線，用戶測試結果為藍色線，測試數值越高，問題越嚴重，APP的質量遠遠低于可用性質量標準，其中信息質量及界面質量問題最為嚴重。

（三）用戶需求調研

所需優化的在線教育產品根據其用戶特性，選取用戶訪談為主要調研方式，結合后臺用戶點擊相關數據，挖掘產品可用性問題，用戶痛點及用戶訴求，指導后續優化設計，具體請況（如圖5）所示。

通過訪談獲取了教師用戶的主要使用場景與信息需求。學情分析的主要使用場景分為課下査看報告、課前備課、課堂展示三類，展示的數據主要有年級班級排名對比排名信息、共性錯題信息、知識點分布信息、關注生成績信息、題目詳解及作文相關息等。

（四）痛點提取及改進思路

通過前期的APP可用性測試及用戶調研工作，匯總用戶痛點問題。主要問題如下1.頁面層級過深，用戶易迷失;2.流程體驗斷層，使用路徑分散，關鍵信息不突出，部分布局交互不符合用戶習慣，用戶學習成本較高;3.對比信息不明顯，各模塊子信息混亂，相關性不高;4.彈窗、浮層、氣泡等交互形式不一致;5.信息覆蓋不全，部分信息效用不明顯，需更新替換部分信息，例如：試卷題型和知識點分析、同場考試班級各項指數對比等。根據以上問題，在設計過程中可從以下幾方面對應解決用戶痛點：1.頁面信息合理布局，交互方式輕量化、多元化減少用戶學習成本，交互樣式保持一致性;2.提高班級與年級，班級間對比優先級;3.頁面功能架構解構重組，去除不必要模塊，增加用戶需求功能點;4.針對典型錯題、后續設置布置同類型練習入口;5.展示試卷題型、知識點覆蓋率，試卷分析模塊增加同次考試各題得分率。

（五）信息架構設計

通過前期用戶訪談獲取了教師端用戶的主要使用場景與用戶痛點。教師端的主要使用場景是課上講解和休息時間做備注，pad設備較多。（如圖6）所示，在用戶痛點和需求確立的情況下，將所要展示信息解構重組，確定相應展示的優先級，展示的主要數據劃分為學情總覽信息、試卷講評信息、試卷分析信息、作文分析信息、成績單相關信息六方面。

（六）可視化頁面提取設計

信息可視化的作用主要體現在兩方面，其一，用戶閱覽頁面時，對于各類相關信息統計的了解;其二，用戶在完成任務流程時，關鍵信息的傳達性。通過對該模塊信息架構的重新梳理，以及用戶訪談中對各類信息的關注度，將各個頁面提取出的可視化要素，采用合適的可視化傳達方式。（如表4）所示，學情總覽模塊中的班級年級對比數據，試卷講評模塊中的答題統計，作文分析（語文、英語）中的成績分布情況、錯誤類型分析及錯誤訂正反饋，成績單模塊中的成績報告，相應采取可視化設計。筆者根據新的信息架構及前期用戶調研工作，將學情分析模塊可采取可視化處理的信息進行匯總。

（七）可視化方案設計

根據前期的調研和數據的挖掘處理對智學網APP-學情分析模塊的信息可視化進行設計，部分界面（如圖7）所示。

（八）檢査測試

1.實地測試：將設計方案測試版投放測試設備中，走査關鍵路線的交互路徑，反饋及時性，信息是否便于閱讀，動效是否達到預期，色差是否能接受，操作方式是否易懂，確保能夠完成基本的功能。2.可用性測試：通過完成任務測試査看是否仍然存在可用性問題，用戶是否能通過頁面信息可視化處理，理解其信息含義，獲取有效內容。

結語

信息可視化是教育產品的顯著特征之一，應用領域也十分廣泛，未來在教育產品的研發、迭代過程中，甚至會根據用戶需要推薦多種信息可視化布局，增強用戶體驗，保證信息傳達的準確性、易讀性。本文以某K12教育APP教師端為例，深入挖掘教師用戶的信息需求，將信息可視化理論付諸于實踐，結合使用人群、使用場景及產品功能的特殊性，以提高用戶體驗為目標，進行產品信息可視化設計。本文舉例的K12教育APP信息可視化設計方法、策略、流程以及注意事項等，對于教育類APP信息可視化設計具有一定的參考價值。

參考文獻

[1]PINEIIBJ，JAMESHG.ALeadersGuide to Iimovation in tlie Experience Economy[J].Strategy&Amp，2014，42（1）.

[2]孫遠波，宋洲，朱宸岑，姬鳴揚.車輛管理服務平臺的信息可視化設計研究[J].包裝工程，2017，38（20）：1-6.

[3]劉海，李姣姣，張維，張昭理，易澤I喂面向在線教學平臺的數據可視化方法及應用P].中國遠程教育，2018⑴：3744.

[4]路璐，田豐，戴國忠.融合觸聽視覺的多通道認知和交互^[J].計算機輔助設計與圖形學學報，2014，26⑷：651661.

[5]張堯官，方能御.1981年諾貝爾生理學醫學獎獲得者羅杰.渥爾考特.斯佩里[J].世界科學，1982（1）：48-49.

[6]楊明剛，孫啟超，朱韋茜可視化大數據在在線教育教學中的應用研究[J].設計，2015⑵：158-157.

[7]李旭，翟穎琳.基于數據分析平臺的APP交互設計測試評估研究[J].包裝工程，2018，39⑵：143-148.

[8]劉再行.從需求出發的信息可視化設計方法研究[J].包裝工程，2016，37（16）：1-5.

[9]陸菁，劉淵，張曉婷，章潔，黃秋儒，孟磊基于用戶體驗的數據可視化模型研究[J].包裝工程，2016，37⑵：52-56.

[10]吉涵宇，席濤.大數據時代智慧校園的信息可視化設計應用研究[J].包裝工程，2017，38（14）：95-100.

[11]盧瀟，胡凡剛.基于教育大數據的教育虛擬社區交互設計研究[J].遠程教育雜志，2017，（5）：85-92.

[12]譚浩，李文良，何人可，季鐵，袁翔面向設計教育的產學研協同創新的云服務平臺設計研究[J].包裝工程，2017，38（24）：1-5.

[13]田崑，王毅棟，袁媛，高素芳信息可視化在兒童娛教產品界面設計中的應用[J].設計藝術與理論，2018⑴：49-50.

[14]郝凝輝.探析信息設計中的信息圖表設計[J].包裝工程，2016，37（18）：76-81.