互動媒體設計發展與設計應用原則

2013）《日常物品之心理學》（The Psychology of Everyday Things）中所提及：「物 件如何能適切被使用，……讓使用者能就外在形式瞭解如何操作…。」⁵²因此，

物件呈現自我識別性，藉由初始介面之明確，開啟互動經驗的連帶關係（使用者 需求、經驗與認知，即 User Interface∕User Experience∕User Centered Design）。

在互動經驗脈絡裡，學習者∕觀者多以本體認知感官投射，或同化訊息編

47Smart Technologies（簡稱 Smart）1987 年成立於加拿大，並在 1992 年時與 Intel 策略結盟，攜 手合作開發和行銷產品，以生產全球首塊互動電子白板之宏觀，佔達全球 70%市場。該公司發 展 Smart Board 電子白板與 Notebook 軟體提供教師豐富的教學素材，教師可以根據主題、需求 直接將素材（動畫、圖片、文字）拖曳至白板畫面當中，並且使用白板的工具進行教學，讓學 生與教師互動、或是彼此進行合作式學習（李鎮宇等人，2011）。2016 年時，推出 SMART Board 480 互動式電子白板，由臺灣嘉穎科技總代理經銷，但在 2016 年時，加拿大 SMART 由鴻海 子公司 Foxconn Singapore Pte. Ltd 收購，而在 2018 年時，也成為中國電子白板十大品牌之一。

由臺灣嘉穎科技經銷 SMAR TBoard 互動式電子白板，至今的企業和政府機構已超過上百個使 用單位（http://www.carwin.com.tw/about_01.php，2018/12 查詢）。

48Promethean（普羅米修斯）1997 年成立的英國上市公司，供應一系列教學展示的硬體產品 ActivBoards（互動白板）、ActivPanels（互動平板）以及互動教學的軟體產品 ClassFlow（課程 管理與互動教學軟體）銷售之網路學習與互動教學技術開發的企業，主要客群為 K-12（幼兒園 至 12 年級）年齡群的學校師生，並以互動白板成為其核心收益來源，銷售和市場原以英美為 主並遍及全球，2015 年由中國華漁教育科技的子公司網龍網絡（網路遊戲公司）收購後，其行 銷策略轉向亞洲發展中國家拓展，並在 2018 年成為中國電子白板十大品牌之一。加拿大 SMART board 系統與 Promethean 系統的 ActivBoard 則為 2015 年以前的世界前兩大電子互動教學的製 造商。

491998 年成立於中國深圳，是從事互動教育產品研發、生產以及相關銷售服務的科技企業。

50「國家典藏數位化專案計畫」網站，請參見 https://www.npm.gov.tw/digital/index2_2_12_ch.html

51「故宮文物數位博物館及加值應用計畫」，詳見 ttps://www.npm.gov.tw/digital/index2_3_7_ch.html

52Donald A. Norman, The Psychology of Everyday Things（New York：Basic Books, 2013），p.9-10。

2014 時，陳宜秀譯，遠流出版繁體中文三版《設計的心理學：人性化的產品設計如何改變世界》

（The Design of Everyday Things, Revised & expanded edition）。

碼；再者，人機互動時，訊息的對話性與本體既有預設值相異或不明，個體也會 依照其認知經驗，臆測介面狀態來推斷下一步之反應 ；因此，藉由反覆性

（repetion）的強化（continuous reinforcement）彰顯肯定訊息之信念，以及冗餘 性（redundant）的同時多層面或多種形態之系統出現，在回饋即時性、操作關聯 對應（mapping）、視覺形態慣習（pattern）、風格整體性（consistency），以及個 別化延伸（personalization），來連動人群、科技與藝術（品）三者間的場域對談

（葉謹睿，2010）。

然而，互動媒體設計乃是匯整各種科技與資訊媒體形式，在互動過程中，得 以建構觀者較完整性訊息，依據 1995 年時，克里斯托夫（Ray Kristof）與薩特 蘭（Amy Satran）指出，互動設計應包括（轉引侯皓之、林芃君，2010，82-85）：

1、方向性（orientation）：資訊產品必須提供使用者足夠的導覽資訊，告訴 他們如何去做去看，或去經驗，而無須呈現大量詳細且具壓迫性的訊息。

2、引導性（navigation）：幫助使用者瞭解什麼地方是他們所需要，什麼地 方是他們能達到的介面建置，及如何獲得資訊。

3、可用性（usability）：設計者要有預期能力，互動產品設計是直覺化認知 及應用對人類的預期心態、理解程度與管理使用者期待上的精心設計。

4、功能性（functionality）：「定義功能性」是要將模糊之處加以說明，讓使 用者易於臆測內容或解決問題；「設計功能性」是探詢問題及測試不同答案直到 獲得最佳的工作方式。

藉由以上互動設計之面向，使系統性建置的互動媒體，能在閱覽線上數位資 訊時，得以由介面導引，進而對於該藝術創作蒐集較完整所需之訊息，也適當而 有效率的呈現，該藝術品之發展脈絡與影響性，使觀者可以有組織且多元性的瞭 解互動媒體內容。

在媒體設計應用在視覺版面上，多數學者則以 2001 年理查德・梅耶《多媒 體學習理論》（Richard E. Mayer, 1974~《Multimedia Learning》）所提出原則為基 礎或予以概念之延伸，主要仍著眼在介面使用、內容呈現形式以及互動機制設計 之三者間之視覺化訊息傳達效能，筆者以教學互動層面上之視覺傳達性著眼，並 以問卷「二、主題網站互動性」之項目，聯結多媒體學習原則（黃淑玲，2011，

115-116）後，列舉整理如下（表 4）：

表 4：「主題網站互動性」，問卷項目聯結多媒體學習原則

項目 原則

1、文字

（1）提示原則（Signaling Principle）：適時重點提示。

（2）人性化原則（Personalization Principle）：以對話方式呈現多媒體。

（3）分散注意力原則（Split-attention Principle）：圖文版面與時間鄰近，助於觀 者聚焦資訊。

（4）多媒體原則（Multimedia Principle）：圖文互為補充說明，較單獨呈現文字 佳。

（5）先備知識原則（Prior Knowledge Principle）：益於程度較低的學生；程度較 佳的學生，應有進階方案。

2、圖像

（1）提示原則（Signaling Principle）：適時重點提示。

（2）人性化原則（Personalization Principle）：以對話方式呈現多媒體。

（3）分散注意力原則（Split-attention Principle）：圖文版面與時間鄰近，助於觀 者聚焦資訊。

（4）多媒體原則（Multimedia Principle）：圖文互為補充說明，較單獨呈現文字 佳。

（5）引導發現原則（Guided-discovery Principle）：提升學習適足性。

3、影音

（1）提示原則（Signaling Principle）：適時重點提示。

（2）人性化原則（Personalization Principle）：以對話方式呈現多媒體。

（3）分散注意力原則（Split-attention Principle）：圖文版面與時間鄰近，助於觀 者聚焦資訊。

（4）分段原則（Segmentiong Principle）：內容分成數個小段落之學習成效。

4、綜合 討論

（1）提示原則（Signaling Principle）：適時重點提示，提升專注力。

（2）人性化原則（Personalization Principle）：以對話方式呈現多媒體。

（3）引導發現原則（Guided-discovery Principle）：發現式引導，提升學習適足性。

（4）分段原則（Segmentiong Principle）：內容分成數個小段落之學習成效較佳。

（5）動畫及互動原則 （Animation and Interactivity Principle）：善用動態，而非 一昧動態進行。

（6）自我解釋原則（Self-explanation Principle）：過程中，鼓勵學習者進行自我 解釋。

（7）網站地圖原則（Site Map Principle）：網站地圖的介面設計，得以掌握架構 全面性。

資料來源：參考黃淑玲（2011，轉引自梅耶《多媒體學習理論》，2001）整理。

近年教育的新思維與政策帶動下，書籍的圖文編輯面與視覺傳達性也明顯提 升，但從上（表 1）瞭解問題中 1、文字至 3、影音項目，能瞭解到書籍教本上，

仍難以時間軸的形式，即時適切的傳達資訊，以及突顯資訊差異化的表達。

再者，本‧施奈德曼（B. Shneiderman）在 1986 年時，既已提出媒體互動 上的設計原則；然而，本‧施奈德曼、凱薩琳‧普拉聖特、梅可馨‧科恩、史蒂 文‧雅各、尼克拉斯 埃爾姆奎斯特等人（B. Shneiderman, C. Plaisant, M. Coh en, S. Jacobs, N. Elmqvist, N. Diakopoulos）在 2017 時，所提出的爭取一致性

（strive for consistency）、尋求普遍通用的易用性（seek universal usability）、提 供信息反饋（offer informative feedback）、設計對話框以產生封閉性（esign dial ogs to yield closure）、防止錯誤（prevent errors）、允許輕鬆撤銷行動（permit easy reversal of actions）、讓用戶掌控一切（keep users in control）、減少短時 間內存負載（reduce short-term memory load）等，八個媒體互動與使用者之間 的黃金設計法則，至今依舊被世人視為重要指標之一。

互動性在科技技術與環境推演、使用者經驗與需求，以及教學思維與應用的 翻轉等因素下，不同時空背景與觀點價值，各年代學者對所提及之應用與功能層 面，乃有所多元取向和成分差異；然則，皆將「互動性」的視野，觸及使用者與 軟硬體物件（人－機）、使用者與需求者（師生∕生生）、使用者與數位物件（人

－藝術品、代言者）等，形塑出學習內容、使用需求、介面形態與指導延伸的四 大互動面向與形態（Hillman et al., 1994；Moore, 1989）。

對於「互動性」概念，實踐於人機關係間的使用性，己有不少學者提出相關 指標與原則（Shneiderman et al. 2017；李來春等人，2018；李瑞翔等人，2015；

徐愛蒂，2001；蔡淑如，2000；Nielsen, 1995；Borsook & Higginbotham, 1991；

Ha & Jame, 1998）。⁵³然則，施奈德曼（2017）提及「沒有一種設計適用於所有 用戶和情況。…必須針對每種環境解釋，改進和擴展這些基本原則。它們有其局 限性，但它們為移動，桌面或網頁設計師提供了良好的起點。」⁵⁴因此，梳理國 內外相關學者對於「互動性」的各種面向與論述，本研究以網站主體對於藝術鑑 賞的互動性統整與完備為軸心，對於互動性的學習內容，能否充分滿足人機模式

53Jakob Nielsen（1995）10 Usability Heuristics for User Interface Design. 2018 年 10 月 02 日瀏覽。

取自 https://reurl.cc/GrXnod。

54‘Since no single design is ideal for all users and situations, designers who characterize their users and the context of use are more likely to produce st1ccessful products.’and‘These underlying principles must be interpreted, refined, and extended for each environment. They have their limitations, but they provide a good starting point for mobile, desktop, or web designers.’ in Shneiderman et al.（2017）Designing the User Interface: Strategies for Effective Human-Computer Interaction, p.88-97.

45

下的互動教學需求，彙整出五項藝術鑑賞教學的互動設計機制（表 5），將藝術

（品）視覺化、科技化與互動作用中加乘觀者學習，把互動性層次，由昔日的反 應式（reactive）到動機引發的主動式（proactive），邁向教學翻轉之人機互動的 雙向式（mutual）（蔡淑如，2000；Schwier & Misanchuk, 1993）。

表 5：藝術鑑賞教學的互動性機制

互動性 互動性指標∕原則，意涵之相關概念

一、選擇權

（Choices available）

1.可逆性：超文本（Hypertext）的特性。

2.非線性資訊處理（Non-sequential access of information）：網際網路 Hyperlink 非線 性資訊處理

3.適應性（Adaptablility）：根據不同的需要，給予不同資訊。

4.訊息量之大小（Grain-size）：將傳播內容量細分的能力，如學習者學習速度較慢，

需將教材單位細分。

5.表單（Form fillin）與選單（Menu selection）。 6.連結(connectedness) ：提供 Hyperlinks 相關資訊。

7.功能性（functionality）：提供多樣性功能設計，並且讓使用者知道如何執行功能，

而且這些功能必須是容易學習的，依賴直覺即可加以使用。網站提供的功能越 多，使用者就有越多的「選擇」、資訊檢索功能（關鍵字查詢）。

二、雙向溝

（Bi-directional communication）

1.線上投票機制。

2.回饋（Feedback）：給予使用者的回應。

2.回饋（Feedback）：給予使用者的回應。