這是「教學文章怎麼寫」系列的第 7 篇，也是「頁面上放什麼」這一段的最後一篇。前面幾篇談過文字、圖、影片放哪裡與影片和文字怎麼排。這篇問最貴的那一種：讓讀者可以拖、可以調、可以按的圖或模擬，值不值得做。
起因在第 2 篇的成本對照表。那一篇替本站的課程導讀查「什麼時候該畫圖」，在談靜態圖、動畫與互動圖的那一節列了一張成本對照表，其中「可操作的圖」那一列寫的是：沒有我讀到的學習成效對照，成本很高。本站導讀講的多半是搜尋、剪枝、梯度下降這類一步一步會變的東西。Red Blob Games 的 A* 入門這類可拖曳的圖，做的也是這種題材，所以這一列遲早要補。這篇就是去補它，分三個問題：加上互動，讀者多學到什麼；放了互動，多少人真的會動；做一個互動，要付多少成本。
這篇的來源包括統合分析（把許多實驗的結果合併估計的研究）、實驗、真實讀者的點擊紀錄，以及做互動內容的人自己寫的簡報、部落格與製作筆記。最大的缺口要先說：我沒有找到任何研究，拿同一份內容做成互動文章與靜態文章，比讀者學到多少。下面能寫的只有三種旁證：課堂上的模擬、加在資料圖表上的互動，以及讀者的行為紀錄。受試者多半是學生或線上受試者平台的工作者，教材多半很短，自學者讀長篇導讀的情境沒有任何一篇直接測過。
先看結論
| 問題 | 目前讀到的 | 強度 |
|---|---|---|
| 互動文章比同內容的靜態文章學得多嗎 | 沒有研究直接比過；做互動文章的人自己也這樣寫 | 沒有證據 |
| 課堂上用模擬 | 中小學科學課，對上其他教學方式 g = 0.62；對照組做了什麼沒有編碼，好處不能全算給「互動」；數學的 4 個比較平均是負的 | 中，情境離文章很遠 |
| 讓圖動起來 | 動畫對靜態圖約 0.23（兩份統合分析收的研究有重疊）；讀者能自己控制播放的研究裡，看不到動畫的優勢 | 小 |
| 同一張圖加上可操作的功能 | 一題貝氏推理，五種互動沒有一種贏過靜態圖 | 一篇論文、兩個實驗 |
| 要讀者拿圖做事（預測、自己解釋、自己給輸入） | 演算法視覺化的實驗多半支持；但對照組也給活動時，差距就消失；「只預測」在兩篇裡都不穩 | 中偏弱，舊且只數顯著與否 |
| 多少讀者會動 | 看元件：一碰就有反應、站在敘事中間的，85% 的桌機讀者動過；放在點擊後面的，約一半沒點開；滑桿的操作次數中位數是 0 | 三篇文章的行為紀錄，沒有量學習 |
| 要付多少成本 | 一位長期做互動教學的作者說一篇要 1 到 5 個月（含學會演算法）；做互動文章的人說比較像做網站；簡單的可調參數圖沒有任何成本資料 | 只有實務者的自述 |
表裡沒有一列能直接回答「我這篇導讀要不要做互動」。最接近的是倒數第三列，它說的是讀者做了什麼，不是頁面上有沒有互動元件。這一點在「互動有沒有用，看讀者拿它做什麼」那一節收齊。
加上互動，讀者多學到什麼
沒有直接的比較，做互動文章的人自己也這樣說
Fred Hohman、Matthew Conlen、Jeffrey Heer 與 Duen Horng Chau 2020 年在 Distill 發表的〈Communicating with Interactive Articles〉，是做互動文章的人寫的綜述。Conlen 與 Heer 是互動文章工具 Idyll 的作者，Hohman 與 Conlen 創辦了互動刊物 The Parametric Press。這篇的前言說互動文章「已被證明」更吸引人、能幫助記憶與學習，這兩句都沒有掛任何文獻。到了文末，作者自己寫：
The usefulness of interactive articles is predicated on the assumption that these interactive articles actually facilitate communication and learning. There is limited empirical evaluation of the effectiveness of interactive articles.
他們接著說，大出版社不願公開內部數據，實驗室研究又未必推得到真實的閱讀。要引這篇談證據，能引的是文末這一句，前言那兩句不能當成有證據的說法轉述。
他們在同一篇裡也寫了一句很少被引的話：不是什麼都需要互動，最糟的情況是互動讓讀者分心，或者功能根本沒人用，作者白花了時間。
課堂上的模擬：效果大，但不能全算給互動
Cynthia D'Angelo 等人替 SRI International 做的2014 年報告，是我找到唯一一份以「互動模擬」為題的統合分析。它收 1991 到 2012 年同儕審查期刊上的中小學 STEM 研究，59 篇、128 個效果量。報告本身是機構自行出版，沒有經過同儕審查。
它對「模擬」的定義要求要有互動：學習者能設參數、看輸出。沒有互動的動畫或視覺化在篩選時就被排除了。用模擬上課的學生，對上用其他方式上課的學生，成就測驗高出 0.62 個標準差（效果量是兩組平均分數的差除以標準差，0.2 上下算小，0.5 上下算中）。
這個數字要連著條件讀：
- 對照組做了什麼沒有編碼。報告只寫對照組是「沒有模擬的教學」，可能是講課、實體實驗或讀課本，沒有分類。所以 0.62 是「整套含模擬的教學」對上「別種教學」的差距，不能算成「互動」這個特性帶來的。
- 只在科學成立。科學的 42 個效果量是 0.67；數學只有 4 個，平均是負的（−0.15），不顯著。科學探究與推理的成果（6 個效果量）也不顯著。
- 情境離文章很遠。受試者是中小學生，過半的研究是高中；報告沒有給教學情境（教室、課後、校外）的分布；評量多半是研究者自己出的題目，超過兩週才測的只有 5 份。兩組花的時間是否相當，報告沒有單獨交代。
同一份報告裡另有一個和設計直接相關的結果。拿「同一個模擬，加上某種強化」對上「原版模擬」時，只算科學的研究，結構嚴謹的模擬（0.88，9 個效果量）顯著高於只有部分結構的（0.42）。但把數學也算進去就不顯著了，作者說需要更多研究。作者也明說，有研究的文章多半沒有描述模擬長什麼樣子，所以他們做不了「哪一種模擬功能有效」的分析。
讓圖動起來：第 2 篇已經寫過，這裡補兩點
動畫對靜態圖的統合分析，第 2 篇已經寫過：Sandra Berney 與 Mireille Bétrancourt 2016 年彙整 140 組比較，整體效果量 0.226，作者自己歸為小效果。動畫的優勢集中在系統控制步調、配旁白、沒有搭配文字三種情況。這裡不重寫，只補和互動有關的兩點。
第一，讀者能自己控制播放時，看不到動畫的優勢。Berney 與 Bétrancourt 把研究依「學習者能控制多少」分成四級：完全不能控制、只有播放鍵、有播放與停止、可以倒帶快轉重看。不能控制的那一組，動畫比靜態圖好 0.309，顯著；另外三級分別是 0.129、0.061、−0.120，都不顯著。這是跨研究的子群比較，不是同一個實驗裡操弄控制權，所以不能寫成「讓讀者控制步調會學得比較差」。能寫的是：在讀者可以自己控制播放的那些研究裡，動畫沒有勝過靜態圖。這篇也沒有分析讀者能不能操弄畫面上的內容，只分析了播放控制。
同一張表還有三個子群，剛好是本站的條件：抽象的表徵（圖表、公式、符號）0.006，資訊類 0.108，數學 −0.067，三項都不顯著。同樣是跨研究比較，作者自己說檢定力低、「領域」這個變項可能本身就不成立。
第二，第二份統合分析不是獨立的複製。Juan Castro-Alonso 等人 2019 年的統合分析只收隨機分派的實驗，46 篇、82 個比較，得到 0.23，看起來和 Berney 一致。但它有 8 篇是從 Berney 等三份統合分析的參考文獻補來的；我對兩份名單時，至少有 14 篇兩邊都收，沒有逐篇數完重疊多少。所以不能當成兩份獨立的證據。它的「動態」還包括一張一張依序出現的靜態圖。作者在限制裡寫明沒有分析互動功能。
Rolf Ploetzner 等人 2021 年的實驗（單張圖、四張分格圖、動畫三組）第 2 篇也寫過。它的動畫明寫是不能操作的，三組都只是看，所以和「要不要做互動」無關。
同一張圖，加上操作
最接近「在靜態圖上加互動有沒有用」的實驗，是 Ab Mosca、Alvitta Ottley 與 Remco Chang 2021 年的研究（我讀的是 CHI 2021 論文的預印本）。
受試者是 Amazon Mechanical Turk 的線上工作者，每人做一題貝氏推理題：一段頻率格式的文字，旁邊一張由小圖示組成的陣列圖。互動都不增加資訊，只是把圖上已有的子群體藏起來、凸顯出來，或把文字和圖連起來。所有條件都同時有文字與圖。
- 第一個實驗 472 人，比「可以用核取方塊開關子群體的圖」和同一張靜態圖：答對率 53% 對 57%，沒有測到差異。
- 第二個實驗約兩千人，試了五種互動（核取方塊預設全開或全關、把標籤拖上圖、滑過文字時反白、滑過圖示跳出說明），沒有一種贏過靜態圖。
作者在結論寫，儘管盡了力，他們測的互動沒有一種顯著提升答對率；他們建議互動不增加資訊時要謹慎使用。
摘要說互動「在某些情況會明顯拖累表現」，正文裡通過顯著檢定的只有一處：空間能力高的人，用「滑過文字就反白」的版本答對率比靜態版低（約 60% 對 80%）。其他「變差」的情形都沒有達到顯著。
這篇要連著四個條件讀。它量的是看完一題立刻作答的答對率，不是學習、保留或遷移。互動不帶出新資訊，作者明說會帶出新資訊的互動（例如平移地圖）價值沒有爭議。第二個實驗的靜態對照組是借第一個實驗的人來比，報酬與流程都不同，唯一顯著的反向結果正好出在這個跨實驗比較上。整體比較作者報 p = 0.05、判為不顯著；我用卡方分布重算約 0.045，所以這一項比較準確的說法是「作者判為不顯著」，不是「明確沒有差異」。
讀者拿圖做什麼
第 2 篇引過 Christopher Hundhausen、Sarah Douglas 與 John Stasko 2002 年的回顧。它整理 24 個演算法視覺化的對照實驗，結論是學生拿視覺化做什麼，比視覺化顯示什麼重要：操弄學生活動的 14 個實驗裡 10 個有顯著差異，操弄畫面怎麼畫的 10 個裡 3 個。
全文讀完之後，有三件事要補，方向都是讓這個結論變弱：
- 對照組也給活動，差距就消失。Hansen 等人的第三個研究讓只讀文字的那一組另外做紙筆練習，結果和用視覺化系統的組沒有顯著差異。Gurka 想重做 Byrne 等人的實驗，但拿掉了預測這一步，兩組都有小組討論，也沒有顯著差異。作者自己的解讀是：研究者讓文字組和視覺化組一樣主動，所以找不到差別。
- 「先預測」本身不穩。Jarc 等人比較動畫軟體能不能預測下一步，後測沒有差異，只是預測組花的時間顯著較多。Byrne 等人那兩個顯著結果，預測和動畫的效果分不開。我照表 2 逐一對過，上面的「14 個裡 10 個」把這兩個也算了進去，原文沒有明說；扣掉它們是 14 個裡 8 個。另一個和「先問」最接近的操弄是 Hansen 等人的第六個研究：把系統裡的互動提問拿掉，結果也沒有顯著差異。
- 方法上的限制。這篇不是統合分析，作者自稱 meta-study，做法是數「顯著幾個、不顯著幾個」，沒有效果量，沒有寫檢索方法；我照表 2 數，24 個實驗有 14 個來自兩份來源；哪個實驗算「操弄學生活動」是作者自己判斷的。作者自己的結論用詞是「appears」，回答「有沒有效」時說是「a qualified 'yes'」。
Yea-Seul Kim、Katharina Reinecke 與 Jessica Hullman 2017 年的實驗把「先預測」搬到資料圖表上。約 370 位線上受試者看 2008 年美國大選兩州的族裔投票資料。做法有五種：只看資料；邊看邊打字解釋；先在圖上畫出自己對某一組資料的猜測，再看自己的猜測和真實資料疊在一起；先畫再解釋；先畫再看系統回饋。資料用折線圖或文字呈現，合起來是九種條件（先畫再看回饋沒有文字版）。三分鐘後要回憶 12 個百分比。
- 用圖呈現時，四種做法都讓回憶的誤差比只看資料小，四種之間沒有差別。只畫預測的那一組效果最小。
- 用文字呈現時，兩種先預測的做法都沒有效果，只有打字解釋有效。
- 換成受試者很熟的資料（速食熱量），所有做法都沒有效果；換成很陌生的資料（小鼠的血糖實驗），只畫預測的那一組也沒有效果。
- 有預測的人，回憶偏向自己原本的猜測。
論文標題與摘要寫的是回憶與理解，但全文沒有任何理解題，兩個依變項都是回憶誤差。對照組另外重打了一段與資料無關的文字，並非什麼都沒做。所以這個實驗比的是「與資料有關的活動」對「無關的打字」，不是「有互動」對「沒互動」。圖與文字之間的差別，作者也沒有直接檢定。
兩篇放在一起，我的推論是：讀者拿圖做與內容有關的事，可能比只看有用；但這件事不一定要靠互動元件。Kim 的實驗裡，打字解釋在圖與文字兩種呈現都有效，先預測只在圖的條件測到效果；Hundhausen 整理的實驗裡，給文字組同等的練習，視覺化的優勢就不見了。「要讀者自己解釋」本身的證據，在第 1 篇寫過。
放了互動，多少人真的會動
三篇互動文章的點擊紀錄
Matthew Conlen、Alex Kale 與 Jeffrey Heer 2019 年的論文在三篇用 Idyll 寫的互動文章裡埋了紀錄：一篇講 3/4 拍與 6/8 拍的節奏教學、一篇降維演算法入門、一篇吉他調音教學。論文寫的是超過五萬個閱讀工作階段，我把三篇各自的數字加起來是約七萬兩千個。第 2 篇引過其中兩個數字，這裡看完整的樣子。
「多少人會動」沒有單一答案，要看是哪一種元件。以下都是桌機讀者：
| 元件 | 動過的讀者 |
|---|---|
| 節奏教學：滑過就播放節拍的主角元件 | 85% |
| 降維入門：點了按鈕才展開的其他演算法說明 | 全體約 45%；讀到文末的人 59%（原文另一處說「演算法細節按鈕」的操作次數中位數是 0；兩處用詞相近，原文沒有說清楚是不是同一組按鈕） |
| 降維入門：調參數的滑桿 | 操作次數中位數 0 |
| 吉他調音：拍頻範例的播放鈕、改拍頻參數 | 14%、2% |
| 降維入門：拉了滑桿又回頭看圖怎麼變 | 約 5% |
作者的解讀是：讀者願意動，但多半只動敘事主線上那個元件。最後一列是作者原本設計的用法，只有約 5% 的人照著用，作者自己說這個呈現沒有達到預期。
手機讀者的停留時間是桌機的 23% 到 52%。吉他那篇的桌機讀者有 23% 把六條弦都調好，手機只有 6%。但三篇都是為桌機設計的，手機版很多功能被關掉或改成靜態，所以這個差距不能全算在裝置上。作者給設計者的結論是：即使讀者完全不碰互動元件，敘事也要完整、看得懂。
這份資料有三個限制。它只量行為，沒有量理解或學習，也沒有靜態版對照，不能說互動讓人讀得比較久。三篇文章裡，吉他那篇是論文的兩位共同作者寫的，降維那篇依參考文獻是 Conlen 與 Hohman 寫的；讀者多半從 Hacker News、Reddit、Twitter 來，流量集中在發表後兩天。所有統計除非註明，都只算桌機讀者。
有放互動，不等於有人用
Mosca 等人的實驗也量了這件事。可以開關子群體的那一組，第一個實驗只有 43% 的人動過核取方塊，第二個實驗 44%。動過的人答對率 70%，沒動的 40%。這是受試者自己選擇要不要動，不是隨機分的，作者也不下因果結論：可能是動手有幫助，也可能是本來就比較投入的人才會動。這個 70% 對 40% 不能寫成「動手的人學得比較好」。
紐約時報的數字從哪裡來
常被轉述的說法是「紐約時報的讀者有 85% 完全無視互動圖表」。我讀了兩份原件，數字的意思和這句話不一樣。
紐約時報圖表部門副主管 Archie Tse 2016 年的簡報標題是〈Why We Are Doing Fewer Interactives〉，投影片上沒有任何數字。他寫的是讀者沒有看到全部內容、讀者只想捲動，並給了三條規則：要讀者做捲動以外的事，就得有很精彩的事發生；做了 tooltip 或滑鼠移過才出現的內容，就當沒有人會看到；要在所有平台上都能動，代價很高。
數字的來源是 Gregor Aisch 2017 年的部落格文章。他用「we」談紐約時報的作品，說那個數字是他自己量的：2015 年發表的幾件圖表上，一個顯眼按鈕被點擊的比例。他在研討會上講了，經過另一場演講、Medium 文章，最後在設計媒體上變成上面那句話。他的更正是：
the 85% of readers didn't ignore the graphic, they just didn't click the button.
他的結論有條件：重要的內容不要藏在互動後面，靜態版本身要站得住，互動服務的是少數想深入的讀者，「15% of readers isn't nobody」。他舉的三個例子（讓讀者查核數字的 tooltip、看完整資料的導覽、自己設情境的選舉計算器）都沒有附使用率。
Hohman 等人在 2020 年也提到這件事：紐約時報那句話已經變成設計者的經驗法則，很多人因此不做互動，即使後來有討論把原意講清楚了。他們把那句話稱為一則軼事，並說還需要研究才知道什麼情況下互動值得它的成本。
做一個互動，要付多少成本
這一題沒有工時或金額的研究資料。手上只有做互動內容的人自己說的話，而且都是高規格的作者。
- Red Blob Games 的 Amit Patel（頁面只署 Red Blob Games，作者名在網頁原始碼裡）在 2014 年的製作筆記寫：「It can take 1 to 5 months to make a tutorial.」這包含學會那個演算法的時間，沒有說是全職還是業餘，換算不成工時。他把慢歸給過程沒有結構：事前不知道要什麼。做 A* 那篇時，他寫到後面把圖的程式重寫了兩次。
- Hohman 等人說做一篇成功的互動文章比較像做一個網站，而不是寫一篇部落格文章，常常比一篇學術論文還花時間；需要編輯、設計、程式三種技能，很多互動文章是一個團隊做的；網頁技術變得快，互動內容幾年後就可能壞掉；要同時顧到桌機、手機與不同網速；讓身心障礙讀者也能使用仍是待解的問題。他們辦 The Parametric Press 第一期，和作者一起做了四個月。這篇沒有任何工時數字。
- Distill 的編輯部在 2021 年宣布暫停，說產出更多這類文章的主要瓶頸是製作要花的力氣，以及科學與設計兩種專長罕見的組合。文中唯一的時數是：早期有些文章，編輯幫投稿者改圖、改文字花了 50 小時以上。這是編輯的協助時間，疊在作者自己的工作之上，不是作者寫一篇的工時。倦怠的是志願編輯，他們的歸因主要是期刊的結構（指導者同時要決定收或退），不是「這種文章不該做」。
- Tse 的第三條規則講的也是成本：在所有平台上都能動很貴。
Hundhausen 等人在 2002 年就指出，演算法視覺化的實驗只看學生使用的那一段，沒有一個量過老師準備與導入要花多少時間。到現在，「一張可以調一個參數的簡單圖要做多久」，我仍然沒有找到任何資料。
Patel 的製作筆記裡有兩句話，比工時更值得記下來。做完第一張能拖的圖時，他寫：
Great! Now I have an interactive diagram. But this isn't an explanation.
之後他還要把演算法拆成一步一步的程式，才變成一篇解說。另一句是他自己沒有答案的問題：參數空間裡有些點比其他點更有教育意義，要怎麼把讀者帶到那些點？這和 Conlen 的紀錄對得上：降維那篇的滑桿，多數人不是沒碰，就是一路拉到最左邊。
互動有沒有用，看讀者拿它做什麼
把三個問題的答案放在一起，以下是我的推論，依據列在每一點後面。
- 互動元件本身沒有測到效果。同一張圖加上操作，沒有一種贏過靜態圖（Mosca 等）；讀者能自己控制播放時，動畫沒有勝過靜態圖（Berney 與 Bétrancourt 的跨研究比較）。
- 有效的是讀者做了與內容有關的事。演算法視覺化的實驗裡，操弄學生活動的比較容易測到差異；但對照組也給同等的練習，差距就消失（Hundhausen 等）。資料圖表的實驗裡，打字解釋在圖與文字兩種呈現都有效（Kim 等）。
- 放了互動，多數讀者不會照作者設想的方式用。一碰就有反應的主角元件很多人動，要點、要調、要自己想到去試的，多數人沒碰（Conlen 等、Mosca 等）。
- 成本高而且沒有被量過。唯一的時間數字來自熟手，而且包含學會內容本身（Patel、Hohman 等、Distill）。
所以「要不要做互動」可以換成另一個問題：我希望讀者在這裡做什麼，那件事需不需要一個會動的元件？讀者「做什麼」的證據本身，從主動學習的大型統合分析到一個人讀文章能不能套用，是下一段的主題，之後談「做中學」證據在量什麼的那一篇會接著談。
來源說法不同的地方
以下幾組結果方向不同，或看起來衝突、其實量的東西不一樣。我把它們並列，不選邊。
互動文章有沒有被證明比較好。Hohman 等人的前言說互動文章已被證明更吸引人、能提升學習，沒有引用；同一篇的文末說這類文章的效果少有實證評估。
讀者會不會動互動元件。Tse 的投影片說讀者只想捲動、tooltip 就當沒人看到。Conlen 等人的紀錄裡，節奏教學有 85% 的桌機讀者動過主角元件。兩邊量的東西不同：Tse 沒有公開數據，Aisch 說的那個數字是一個顯眼按鈕的點擊率；Conlen 的 85% 是滑過就有反應的元件，同一批紀錄裡滑桿的中位數是 0 次。
先預測有沒有用。Kim 等人的實驗裡，在圖上先畫預測、再看真實資料，回憶誤差比只看資料小。同一個實驗用文字呈現時，先預測沒有測到效果；熟悉的資料上沒有效果；只畫預測、不解釋的那一組在陌生資料上也沒有效果。Hundhausen 整理的實驗裡，能把預測單獨分開來看的只有 Jarc 等人一個，預測組後測沒有比較好；Byrne 等人那兩個的預測和動畫分不開。
結構多一點還是自由一點。D'Angelo 等人只算科學研究時，結構嚴謹的模擬效果顯著較大；把數學也算進去就不顯著。Berney 與 Bétrancourt 的子群裡，學習者能控制的越多，動畫優勢的點估計越小（沒有兩兩檢定）。兩者都是跨研究比較，量的也不是同一種「自由」：前者是模擬的操作有多少結構，後者是播放控制。
互動拖不拖累表現。Mosca 等人的摘要說互動在某些情況會明顯拖累表現；正文裡通過顯著檢定的只有一處（高空間能力者用滑過反白的版本）；討論段提到這一處之後，下一句卻寫這些發現都不顯著。結論段說互動的效果主要取決於底圖的設計，但底圖與互動的交互作用四次檢定都不顯著。
兩份動畫統合分析是不是互相印證。Berney 與 Bétrancourt 是 0.226，Castro-Alonso 等人是 0.23。兩份收的研究有重疊（至少 14 篇兩邊都收，我沒有數完），定義也不同（前者排除影片、只收解說型動畫；後者收影片，並把依序出現的靜態圖算成動態），不能當成兩份獨立的證據。
對照本站的做法
本站的文章都是 Markdown 檔，我沒有找到任何一篇放了可操作的圖。文章裡和這篇有關的只有兩種會動的東西：課程導讀的自我檢查題把答案收在可以展開的 <details> 裡，以及影片的時間連結會在頁內播放。下面逐條對照，標明哪些有依據、哪些是本站自己的選擇。
| 做法 | 依據 | 性質 |
|---|---|---|
| 不做可操作的圖，先把靜態圖和文字做好 | 沒有研究測過互動文章勝過靜態文章；同一張圖加互動沒有測到效果；成本高 | 本站的選擇，依據是證據缺口加上成本 |
| 自我檢查題放在圖或例子旁邊，而不只放在小節結尾 | 讀者做與內容有關的事比只看容易測到效果（Hundhausen、Kim）；但「先預測」單獨的證據不穩 | 與現行規格不同：課程導讀規格目前是每個主要小節結尾放一題。這一列是提議，題目寫成要讀者解釋，比只要讀者猜更有依據 |
| 重要內容不放在點擊或滑過之後 | Tse 的規則、Aisch 的更正、Conlen 的 45% 與 59% | 有實務資料支持，沒有學習成效的研究 |
自我檢查的答案收在 <details> 裡，但答案裡不放正文沒講過的新解釋 | Conlen 那組沒人點的按鈕後面是補充內容，讀者沒被要求去點，情境不同；Aisch 的規則本身把先讓讀者想、再揭曉答案的做法列為例外 | 本站的選擇，沒有研究可以裁決 |
最後一列要多說一句。Aisch 說重要內容不要藏在點擊或滑過之後，括號裡留了例外：除非你真的想這麼做，例子是紐約時報先讓讀者畫出猜測、再揭曉資料的作品。自我檢查的答案就是這一種，所以摺疊本身和上一列不衝突。真正會衝突的是答案裡出現正文沒有講過的新說明，不點開的人就讀不到。所以規則是：答案可以摺疊，但需要的解釋先寫回正文，答案只拿來對照。第 9 篇查過，答案要不要摺疊沒有找到直接的研究，在題目上要求讀者先寫下答案也只是沒有直接證據的做法。摺疊外面要不要留一句提示，提示會不會先洩漏答案，牽涉到讀者會不會作答，第 10 篇處理了這個問題。
第 2 篇的成本對照表把「先問再給圖」列為最便宜的互動，依據欄寫的是：讓學生動手這一大類有支持；能單獨分開「預測」的一個實驗（Jarc 等）沒有差異，拿掉互動提問的實驗（Hansen 第六個研究）也沒有差異。這篇的讀法和它一致，再補一點：只讀文字的組補上同等的練習時，視覺化的優勢就消失（Hansen 第三個研究、Gurka）。所以這一列支持的是「讓讀者做事」，不是「這件事要靠圖」。
可以做的事
如果你在考慮替一篇教學文章做互動，下面是我依前面各節整理的做法。每一條都標了依據。
- 先寫靜態版，確認它不靠互動也讀得懂。這是 Conlen 等人給設計者的結論，Aisch 三個例子的共同前提。做法：把互動元件拿掉，只留它預設的那一個畫面，請一個沒讀過的人讀一遍，問他讀完能不能說出這一節的重點。
- 先問自己要讀者做什麼，再決定要不要做會動的元件。依據是 Hundhausen 與 Kim 的結果，見上一節第 2 點，是我的推論。做法：在草稿上寫一句「讀到這張圖時，讀者要＿＿」。如果填的是「猜下一步」「說出為什麼」「自己算一次」，先用一題自我檢查加
<details>做；如果填的是「試好幾組參數，看輸出怎麼變」，才是可操作的圖真正多出來的東西。 - 要做，就做在敘事主線上，而且一碰就有反應。依據是 Conlen 的 85% 對中位數 0 次。做法：互動元件放在正文正中間，預設狀態就是這一節要講的那個例子；不要放在「想看更多請點這裡」後面。
- 把讀者帶到有意義的參數。Patel 自己沒有答案，Conlen 的滑桿資料說明多數人不會自己找。這一條是我的推論。做法：在滑桿旁邊用文字寫出兩三個值，例如「試試把學習率調到 1.5，看看會發生什麼」，並在下一段解釋那個值的結果。
- 手機上要有退路。依據是 Conlen 的手機資料與 Tse 的第三條規則。做法：在 390px 寬的視窗開一次，互動元件不能用時，至少要有一張靜態圖顯示預設狀態。
今晚可以做的三件事
- 找出你文章裡最想做成互動的那張圖，在它前面加一題。題目要讀者說出為什麼，而不只是猜答案，例如「如果把 frontier 從 stack 換成 queue，下一個被拿出來的會是誰？為什麼？」答案收在
<details>裡；答案要用到的解釋，先確定正文已經講過。 - 翻一遍文章裡所有要點或滑過才出現的內容。是理解這一節必需的，就搬到正文。
- 如果已經有互動元件，把它拿掉讀一次。讀不懂的地方，就是靜態版缺的內容，補成文字或一張預設狀態的圖。
這些證據的限制
- 沒有直接的比較。我沒有找到任何研究，拿同一份內容做成互動文章與靜態文章比學習成效。這篇的結論都是從課堂模擬、資料圖表實驗與行為紀錄推過來的，凡是推論都當場標明。
- 學習者控制的統合分析我讀不到。Karich 等人 2014 年與 Landers 與 Reddock 2017 年各有一份「把控制權交給學習者」的統合分析，我沒讀到合法公開的全文，所以這篇不談控制權本身的平均效果。系列規劃把這一點列為之後談系列順序那一篇的卡點。
- 量的東西很窄。Mosca 量的是一題推理的答對率，Kim 量的是三分鐘後的回憶，Ploetzner 量的是看完立刻的辨認，Conlen 只量行為。Mosca、Kim、Ploetzner 都沒有延宕測驗；D'Angelo 的 76 份評量裡，超過兩週才測的只有 5 份。
- 受試者離自學讀者很遠。D'Angelo 是中小學生；Mosca 與 Kim 是為了報酬參加的線上工作者；Conlen 的讀者來自科技社群，而且是三篇文章、同一個工具社群。
- 演算法視覺化的證據很舊。Hundhausen 的 24 個實驗都在 2002 年之前，只數顯著與否；我照表 2 數，24 個裡有 14 個來自兩份來源。
- 成本只有高規格作者的自述。Patel、Hohman 等人、Distill 編輯部都是做大型互動內容的人；簡單的可調參數圖要多少時間，沒有任何資料。
- 利害關係。Hohman 等人與 Conlen 等人的論文都有互動文章工具 Idyll 的作者掛名；Conlen 的三篇文章裡有兩篇和論文作者有關。這不影響他們公開了什麼資料，但他們對互動的定性評價是支持者的評價。
- 跨研究比較。Berney 的播放控制、D'Angelo 的結構程度、Castro-Alonso 的各子群，都是不同研究之間的比較，不是同一個實驗裡操弄出來的。
- 互動教科書的使用率。有一篇研究互動電子書裡各種元件實際被用多少，之後談讀者會不會作答的那一篇會用到，這篇沒有引它的數字。
- 讀取上的缺口。Mosca 的補充材料、Conlen 的原始紀錄檔與補充材料、Kim 的補充材料、Hohman 那篇的互動文章清單（Table 1）、Red Blob Games 頁面上的互動圖本身，我都沒有讀或沒有看。
- 我的推論與本站的選擇：「互動有沒有用，看讀者拿它做什麼」一節的四點綜合；自我檢查答案裡不放正文沒講過的新解釋；可以做的事第 2、4 條；今晚三件事。正文都當場標明。
附錄：各研究的設計與數字
正文每項只留一兩個數字，其餘放在這裡。
D'Angelo、Rutstein、Harris、Bernard、Borokhovski、Haertel（2014），SRI International 報告，Bill & Melinda Gates Foundation 出資，沒有同儕審查。檢索 ERIC、PsycINFO、Scopus，只收 1991–2012 年同儕審查期刊文章，沒有搜灰色文獻。2,722 篇摘要，59 篇、128 個效果量（成就 96、科學探究與推理 17、非認知 15）。59 篇裡 K–5 8 篇、6–8 年級 15 篇、9–12 年級 32 篇；科學 49 篇、數學 6 篇。隨機效果模型。模擬對沒有模擬的成就：g = 0.62（95% CI 0.45–0.79，k = 46，N = 2,947，I² = 78.55）；科學 0.67（k = 42），數學 −0.15（k = 4，不顯著），差異 Q = 15.28。探究與推理 0.26（k = 6，不顯著）；非認知 0.69（k = 12，I² = 92.92）。強化版對原版模擬的成就：0.49（k = 50）。只算科學的調節分析裡，唯一顯著的是堂數（Q = 12.32，p = .006）：一堂 0.49（k = 11）、二到三堂 0.39、四到六堂 0.91（k = 9）、十一堂以上 0.44（k = 8），另有 11 個沒寫。強化版對原版、只算科學：高度結構 0.88（k = 9）對部分結構 0.42（k = 22），Q = 7.00，p = .008；數學加科學時 p = .11。評量方式：用科技但不嵌入模擬的評量 0.11（k = 4，不顯著），Q = 12.42，p = .002。隨機分派與準實驗的成就效果沒有差別（0.52 對 0.57）。出版偏誤：trim-and-fill 沒有補任何研究；母群本身只有期刊文章。76 份評量裡研究者自編 58 份；超過兩週才測的 5 份，施測時間未註明的 24 份。作者列的限制：做不了模擬具體功能的調節分析；數學、科技、工程的研究太少；83 篇只有質性資料的研究沒有納入。報告內部有十處數字對不起來（評分者一致性兩套數字、篩選流程數字等），另有兩處用詞或計數單位要注意。
Berney 與 Bétrancourt（2016），Computers & Education 101。只收電腦呈現的解說型動畫，排除影片；檢索到 2013 年底，英法德文，收了未出版的博士論文；沒有要求隨機分派。50 篇、61 個實驗、140 個比較、7,036 人。整體 g = 0.226（95% CI 0.12–0.33），I² = 78.38；140 個比較裡動畫顯著較好 43 個、靜態顯著較好 14 個、沒有顯著差異 83 個。步調控制：系統控制 0.309（k = 96）、只有播放鍵 0.129（k = 17）、播放與停止 0.061（k = 15）、完整控制 −0.120（k = 12），組間 QB(3) = 8.921，表列 p = 0.03（正文寫 0.003，以表為準）；沒有兩兩比較。完整控制的 12 個比較來自 6 篇，其中一篇占 4 個而且全是負的（我從附錄數的，原文沒有這個統計）。表徵：抽象式 0.006（k = 26）、圖像式 0.245（k = 91）。說明的感官模式：書面文字 0.105（k = 58，不顯著）、旁白 0.320、沒有任何文字說明 0.886（k = 14，其中 6 個出自同一篇論文）。領域：資訊 0.108（k = 13）、數學 −0.067（k = 11），都不顯著。出版偏誤只算了 fail-safe N（2,999）。同一研究的多個成果當成獨立估計，作者承認標準誤會偏小。附錄 Table A1 的控制欄標籤和 Table 3 對不上，不能直接用。
Castro-Alonso、Wong、Adesope、Ayres、Paas（2019），Educational Psychology Review 31。只收明說隨機分派、1990–2017 年英文同儕審查期刊、報告了樣本性別比的研究。46 篇、82 個效果量、5,474 人；77% 的比較是大學生。整體 g+ = 0.23（95% CI 0.17–0.28），I² = 68%。大學生子集 0.19；女性 60% 以上的樣本 0.07（不顯著）。媒體不同時（電腦或電視的動態對紙本或幻燈片的靜態，k = 7）方向相反，−0.20，作者說不能下強結論。Egger 檢定 p = 0.42。作者列的限制包括沒有分析寫實程度與互動功能。沒有寫用固定還是隨機效果模型；沒有編碼測驗是立即還是延宕。
Ploetzner、Berney、Bétrancourt（2021），Instructional Science 49。88 位師資培育學程的大學生，三組各 30、28、30 人；教材是六連桿機構，動畫不能操作，沒有旁白。看 2 分鐘後立刻作答。辨認運動（滿分 5）：單張圖 1.77、四張圖 1.64、動畫 3.80。辨認排列（滿分 4）：單張圖 3.93、四張圖 2.93、動畫 2.93。作者說只研究了知覺層次的處理。運動題四選一，兩個靜態組的答對率（35%、33%）只比亂猜的 25% 高一點，這是我從表算的，原文沒有提。
Mosca、Ottley、Chang（2021），CHI 2021（讀的是 arXiv:2103.01701v2 預印本）。Amazon Mechanical Turk，限美國、通過率 90% 以上。每人一題貝氏推理（100 人中 6 人有病，4 人陽性；94 人沒病，16 人陽性），兩小題都對才算答對；底圖三種（分組、對齊、隨機散布）。實驗一：核取方塊對靜態 × 三種底圖，剔除 58 人後 N = 472；底薪 1.80 美元，答對每題加 0.10 美元；有操作說明頁。答對率 52.85% 對 57.08%，χ²(1) = 0.69，p = 0.41。核取方塊組 246 人裡 43% 動過；動過的 70.48%、沒動的 39.72%（組內自選，χ²(1) = 21.63）。隨機散布的底圖上，互動版 42.68%、靜態版 58.57%，六組總檢定 p = 0.27，沒有單獨檢定這一對。實驗二：五種互動 × 三種底圖，N = 1,980，底薪 0.80 美元、沒有說明頁；靜態組借用實驗一的 226 人，合計 2,206。六種條件答對率：靜態 57.08、核取方塊預設全開 56.60、預設全關 56.85、拖曳 49.71、滑過反白 48.16、滑過說明 53.33；χ²(5) = 11.33，作者寫 p = 0.05、判為不顯著。核取方塊預設全開的 371 人裡 44% 動過；其他互動的動手比例「顯著較高」，沒有給數字。動手與否只有拖曳那一組有顯著差異。底圖主效果顯著（χ²(2) = 8.09，p = 0.02），分組勝隨機散布。高空間能力組（N = 1,114）裡六種條件有顯著差異，滑過反白 60.45% 對靜態 80.36%（χ²(1) = 12.44，p < 0.001）；低空間能力組（N = 1,092）沒有。高低空間能力組用靜態圖的答對率是 80% 對 34%，原文沒有檢定這個差距。NASA-TLX 有收但正文沒有報告。兩個實驗的性別組成不同（女性 38.3% 對 54.1%）。
Hundhausen、Douglas、Stasko（2002），Journal of Visual Languages and Computing 13(3)。作者自稱 meta-study，不算效果量。24 個受試者間實驗，Hansen 等 2000 一篇貢獻 8 個、Lawrence 1993 博士論文貢獻 6 個。11 個顯著、10 個不顯著、2 個顯著但預測與動畫分不開（Byrne 等）、1 個方向相反（用圖形追蹤工具的人解出的題目顯著較少）。依理論分：認知建構論 14 個裡 10 個顯著（我照表 2 對過，含 Byrne 那 2 個，原文沒有明說）、知識保真 10 個裡 3 個、雙碼與個別差異各 2 個裡 1 個。依兩組投入是否相等：相等的 9 個裡 6 個不顯著，不相等的 14 個裡 10 個是投入多的組顯著較好。投入不相等卻不顯著的例子：Stasko 等（文字對文字加動畫）、Hundhausen 與 Douglas（自己建構視覺化對主動看現成的）、Jarc 等（可預測對不可預測，預測組花的時間顯著較多）。Lawrence 第 7 章的實驗裡黑白版勝過彩色版。作者列的限制：不評各實驗的效度；分類是作者的判斷；前後測進步量的結果幾乎來自同一條研究線；依變項範圍窄；沒有量準備與導入的成本。Table 5 的名單與內文的 9 個、14 個對不起來，我推測是表格誤植。
Kim、Reinecke、Hullman（2017），CHI 2017。Amazon Mechanical Turk，每條件 42 人，招募 378 人、剔除 5 人，報酬 1.50 美元。五種做法 × 兩種呈現（沒有「預測加回饋」的文字版），九個條件。資料是 2008 年美國大選科羅拉多與康乃狄克兩州、三個族裔、兩個收入級距投給共和黨的比例，12 個資料點；預測只針對隨機選出的一個族裔。看完後做三分鐘摺紙測驗，再回憶。圖的條件，絕對誤差比對照組少：先預測再解釋 4.08 個百分點、預測加回饋 3.54、只打字解釋 3.52、只預測 2.30，四者之間沒有差別。趨勢誤差只有前兩者有效果。圖的條件整體比文字條件多錯 3.76 個百分點（36%）。文字條件：只打字解釋少 2.00 個百分點（p < .05），兩種預測都沒有效果，趨勢誤差都沒有效果。75.9% 的資料點，回憶的偏差方向和預測的偏差方向相同。自我解釋的句數與品質都和誤差無關。低熟悉度資料（小鼠血糖）：只預測不顯著，其餘三種有效果，趨勢誤差都沒有效果；高熟悉度資料（速食熱量）：所有條件都沒有差別。兩個複製的人數正文沒有寫。呈現方式與做法的交互作用有放進模型，但正文沒有報告。
Conlen、Kale、Heer（2019），EuroVis 2019，Computer Graphics Forum 38(3)。三篇 Idyll 文章：節奏教學 10,000 個工作階段、降維入門 7,055 個、吉他調音 55,193 個。沒有對照組、沒有量學習。統計除非註明都只算桌機讀者，手機版很多功能被關掉。節奏教學：停留中位數 86 秒；85% 操作過互動內容；73% 讀到文末；手機停留中位數 20 秒，10% 觸發了文末的範例音訊。降維入門：停留中位數 116 秒；76% 讀到文末，其中 59% 點了切換演算法的按鈕，全體約 45%；滑桿與細節按鈕的操作次數中位數 0；約 5% 交替使用滑桿與滑過圖片；按了細節按鈕再去操作圖的約 15%；手機 48% 讀到最後，其中 38% 用了看其他演算法的功能。吉他調音：停留中位數 78 秒；撥弦中位數 22 次；23% 調好六條弦；14% 點了拍頻範例、2% 改了拍頻參數；只有 45% 讀到最後一節；手機 34% 試著調音、6% 調好六條弦。手機停留時間的中位數是桌機的 23–52%。討論段把讀到文末者的 59% 寫成「約一半」；全體桌機讀者的約 45% 是另一個分母。
Hohman、Conlen、Heer、Chau（2020），Distill。綜述加實務反思，沒有自己的資料，材料是作者挑的六十多篇互動文章（怎麼挑沒有說明）。前言兩句「已被證明」沒有引用；文末寫效果少有實證評估。轉引 Kim 2017 時沒有提文字條件的結果；轉引「顯示別人的預測」的研究，結果是對回憶沒有幫助。成本全是定性描述，唯一的時間數字是 The Parametric Press 一期協作四個月。作者自述是實務者與工具作者，結語是相信互動文章的潛力。
Tse（2016），紐約時報圖表部門副主管的研討會簡報，24 頁投影片，只有文字，沒有講稿與數字。三條規則與「Most visuals are static」「We still do interactives, but the bar is now VERY high」。標題註明「2016 edition」。
Aisch（2017），個人部落格。數字來源：他自己量的、2015 年幾件圖表上一個顯眼按鈕的點擊比例；沒有說是哪幾件、樣本多大。被轉述的路徑：研討會 → 另一場演講 → Medium → FastCo.Design。三個例子都沒有使用率數字。
Distill 編輯部（2021），〈Distill Hiatus〉，由 Chris Olah、Nick Cammarata、Sam Greydanus、Janelle Tam 起草。暫停一年，可能無限期延長。50 小時以上是早期文章的編輯協助時間，之後已經降低。沒有投稿數、刊出數或編輯人數。
Red Blob Games（Amit Patel）三頁製作筆記。A* 入門的製作筆記（2014，2020 年重做圖之後沒有更新）：一篇 1 到 5 個月，含學會演算法；那一頁約 20 張圖；寫到後面重寫圖的系統兩次。畫線教學的製作示範（2017）：「a medium sized project」，沒有說花多久；互動的基本型是讓讀者改輸入、看輸出；收尾十二項裡有兩項是觸控（拖曳把手用一個小的可見圓加一個大的隱形圓接事件、可拖動的數字在觸控裝置上太小）。圖的程式結構（2018）：建議從「全部重畫、全部重跑」開始，慢了再最佳化。作者列的未解問題包括：哪些題目適合這種解說、讀者只能動資料不能動程式是不是虧待了讀者、怎麼把讀者帶到有教育意義的參數、手機版連文字都要配合、要不要有不靠 JavaScript 的版本。
參考資料
每一條都從頭讀到尾並留有抽取紀錄；讀不到的部分寫在括號裡。
- D'Angelo et al. (2014), Simulations for STEM Learning: Systematic Review and Meta-Analysis（SRI International 報告，沒有 DOI；附錄 C 的截圖沒有看）。
- Berney & Bétrancourt (2016), Does animation enhance learning? A meta-analysis（日內瓦大學典藏的刊出版；轉成文字時負號會被吃掉，數字以 PDF 版面為準）。
- Castro-Alonso, Wong, Adesope, Ayres & Paas (2019), Gender Imbalance in Instructional Dynamic Versus Static Visualizations: a Meta-analysis（伊拉斯姆斯大學典藏的刊出版；Table 2 最後一頁沒有對版面）。
- Ploetzner, Berney & Bétrancourt (2021), When learning from animations is more successful than learning from static pictures: learning the specifics of change（開放取用刊出版；OSF 上的資料沒有下載）。
- Mosca, Ottley & Chang (2021), Does Interaction Improve Bayesian Reasoning with Visualization?（arXiv:2103.01701v2 預印本，刊出版 DOI 10.1145/3411764.3445176 沒有對過；補充材料沒有讀）。
- Hundhausen, Douglas & Stasko (2002), A Meta-Study of Algorithm Visualization Effectiveness（共同作者個人網頁上的刊出版；首頁印的 DOI 是 10.1006/S1045-926X(02)00028-9）。
- Kim, Reinecke & Hullman (2017), Explaining the Gap: Visualizing One's Predictions Improves Recall and Comprehension of Data（共同作者實驗室網站上的 ACM 刊出版；GitHub 上的補充材料沒有讀）。
- Conlen, Kale & Heer (2019), Capture & Analysis of Active Reading Behaviors for Interactive Articles on the Web（作者實驗室網站上的出版者版面；補充材料與原始紀錄檔沒有讀）。
- Hohman, Conlen, Heer & Chau (2020), Communicating with Interactive Articles（Distill 刊出版；Table 1 的文章清單沒有讀到）。
- Tse (2016), Why We Are Doing Fewer Interactives（作者 GitHub 上公開的投影片，只有投影片文字，沒有講稿）。
- Aisch (2017), In Defense of Interactive Graphics（作者個人網站的原文；文中的圖沒有看）。
- Distill Editorial Team (2021), Distill Hiatus（Distill 網站上的公告原文）。
- Red Blob Games（Amit Patel）：Making of: Introduction to A*、Making of: Line drawing tutorial、Diagram structure（作者網站的原頁；頁面上的互動圖本身沒有看）。
- 本站文章：教學文章的例子與開頭怎麼寫、教學文章什麼時候該畫圖、教學文章搭配影片怎麼做、讀到一半想看影片時，畫面怎麼排、教學文章裡的問題與用語怎麼寫。
Loading...