• 沒有找到結果。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

「精準表達程度」獲得一個視覺化傳達資訊的精確程度,讓使用者知道各功能可以在什 麼時機下如何使用;最後,從「使用效率」得到各功能的操作效率優劣。各評估指標之 間是平等的關係,沒有先後順序之分,可以單就想要了解哪一個設計面相來測試。

綜上所述,我們已經以兩個不同的互動式資料視覺化工具來驗證實驗和分析方法 的通用性與可行性,後續若有設計師想要了解其作品的優使性,只要針對欲測試的實 驗資料定義出興趣區域和最少步驟序列,便可以依循本論文的實驗、分析方法得到評 估結果。

本研究未來之發展,首先,可以試著將使用者序列分群,找出行為特徵,或許能 提出更廣泛的建議給互動式資料視覺化的設計師們,抑或針對不同的使用者族群客製 化設計。第二,當更多人應用此方法測試其視覺化工具,我們便能找出各個評估指標 的門檻值,使得之後的設計師可以更快速得知其作品哪一方面的設計較有問題,再針 對這些痛點改進。此外,目前的分析都是針對停駐點,是點的分析,未來若有人能針 對視線、滑鼠軌跡線等線性關係處理,應能找出更多不同的問題點。

本論文提出之分析方法與評估指標不僅能用於互動式資料視覺化評估,對使用者 行為、互動設計評估的貢獻為:往後相關研究人員可以藉由區域或動作等定義,將使 用者行為轉換成序列,能做更多量化分析,不論是與理想值比較、受測者間比較、受 測者行為分群等,讓使用者行為研究不再只有主觀認定的資料;本論文提出之評估指 標也可以被參考用於評估其他互動行為,不論是實體產品、網頁、互動廣告等。

最後,也期許有更多研究一同討論互動式資料視覺化可以被如何評估。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

參考文獻

[1] 陳為,沈則潛,陶煜波(民 103),「視覺化資料 ──100% 全腦吸收大數據,直入 神經元」,佳魁資訊,台北市。

[2] 劉自強,黃芝瑩(譯)(民 102)。「網頁互動式資料視覺化:使用 D3」(原作者:

Scott Murray)。台北市:歐萊禮。(原著出版年:102)。

[3] Information visualization. In Wikipedia, The Free Encyclopedia. Last visited on 2/4/2016.

[4] Infographic. In Wikipedia, The Free Encyclopedia. Last visited on 14:48 2/4/2016.

[5] Data visualization. In Wikipedia, The Free Encyclopedia. Last visited on 14:50 2/4/2016.

[6] 康仕仲(民 105),資料視覺化之理論、賞析與實作。取自 https://goo.gl/cWdUu0.

[7] Data-driven documents. Last visited on 24/3/2016.

[8] Tableau. Last visited on 24/3s/2016.

[9] Scott Bateman, Regan L Mandryk, Carl Gutwin, Aaron Genest, David McDine, and Christopher Brooks. Useful junk?: the effects of visual embellishment on comprehen-sion and memorability of charts. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pages 2573–2582. ACM, 2010.

[10] Marcel Adam Just and Patricia A Carpenter. Using eye fixations to study reading compre-hension. New methods in reading comprehension research, pages 151–182, 1984.

[11] Martijn Tennekes and Edwin de Jonge. Tree colors: color schemes for tree-structured data.

IEEE transactions on visualization and computer graphics, 20(12):2072–2081, 2014.

[12] Fernanda B Viegas, Martin Wattenberg, and Jonathan Feinberg. Participatory visualization with wordle. IEEE transactions on visualization and computer graphics, 15(6):1137–1144, 2009.

[13] Bongshin Lee, Nathalie Henry Riche, Amy K Karlson, and Sheelash Carpendale. Spark-clouds: Visualizing trends in tag clouds. IEEE transactions on visualization and computer graphics, 16(6):1182–1189, 2010.

[14] Anna W Rivadeneira, Daniel M Gruen, Michael J Muller, and David R Millen. Getting our head in the clouds: toward evaluation studies of tagclouds. In Proceedings of the SIGCHI conference on Human factors in computing systems, pages 995–998. ACM, 2007.

[15] Catherine Plaisant. The challenge of information visualization evaluation. In Proceedings of the working conference on Advanced visual interfaces, pages 109–116. ACM, 2004.

[16] Edward R Tufte and PR Graves-Morris. The visual display of quantitative information, volume 2. Graphics press Cheshire, CT, 1983.

[17] Data looks better naked, 2013.

[18] S Few and P Edge. Sometimes we must raise our voices. 2009.

[19] Ohad Inbar, Noam Tractinsky, and Joachim Meyer. Minimalism in information visualiza-tion: attitudes towards maximizing the data-ink ratio. In Proceedings of the 14th European conference on Cognitive ergonomics: invent! explore!, pages 185–188. ACM, 2007.

[20] James D Kelly. The data-ink ratio and accuracy of newspaper graphs. Journalism and Mass Communication Quarterly, 66(3):632, 1989.

[21] Julia Kulla-Mader. Graphs via ink: Understanding how the amount of non-data-ink in a graph affects perception and learning. Master’s Thesis, Department of Information and Library Science, University of North Carolina, 2007.

[22] Michael Burch, Natalia Konevtsova, Julian Heinrich, Markus Hoeferlin, and Daniel Weiskopf. Evaluation of traditional, orthogonal, and radial tree diagrams by an eye tracking

study. IEEE Transactions on Visualization and Computer Graphics, 17(12):2440–2448, 2011.

[23] Dereck Toker, Ben Steichen, Matthew Gingerich, Cristina Conati, and Giuseppe Carenini.

Towards facilitating user skill acquisition: identifying untrained visualization users through eye tracking. In Proceedings of the 19th international conference on Intelligent User Interfaces, pages 105–114. ACM, 2014.

[24] Joseph H Goldberg and Jonathan I Helfman. Comparing information graphics: a critical look at eye tracking. In Proceedings of the 3rd BELIV’10 Workshop: Beyond time and errors: Novel evaluation methods for information visualization, pages 71–78. ACM, 2010.

[25] Joseph H Goldberg and Anna M Wichansky. Eye tracking in usability evaluation: A prac-titioner’s guide. To appear in: Hyönä, 2002.

[26] Eye movement in reading. In Wikipedia, The Free Encyclopedia. Last visited on 13:06 31/3/2016.

[27] Vidhya Navalpakkam and Elizabeth Churchill. Mouse tracking: measuring and predicting users’ experience of web-based content. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pages 2963–2972. ACM, 2012.

[28] Ernesto Arroyo, Ted Selker, and Willy Wei. Usability tool for analysis of web designs using mouse tracks. In CHI’06 extended abstracts on Human factors in computing systems, pages 484–489. ACM, 2006.

[29] Eric Hehman, Ryan M Stolier, and Jonathan B Freeman. Advanced mouse-tracking an-alytic techniques for enhancing psychological science. Group Processes & Intergroup Relations, 18(3):384–401, 2015.

[30] Hotjar. Last visited on 11/7/2016.

[31] Jens Gerken, Peter Bak, Christian Jetter, Daniel Klinkhammer, and Harald Reiterer. How to use interaction logs effectively for usability evaluation. In BELIV, 2008.

[32] Kerry Rodden and Xin Fu. Exploring how mouse movements relate to eye movements on web search results pages. Web Information Seeking and Interaction, pages 29–32, 2007.

[33] Kerry Rodden, Xin Fu, Anne Aula, and Ian Spiro. Eye-mouse coordination patterns on web search results pages. In CHI’08 extended abstracts on Human factors in computing systems, pages 2997–3002. ACM, 2008.

[34] Vidhya Navalpakkam, LaDawn Jentzsch, Rory Sayres, Sujith Ravi, Amr Ahmed, and Alex Smola. Measurement and modeling of eye-mouse behavior in the presence of nonlinear page layouts. In Proceedings of the 22nd international conference on World Wide Web, pages 953–964. ACM, 2013.

[35] Jing Yang, Matthew O Ward, and Elke A Rundensteiner. Interring: An interactive tool for visually navigating and manipulating hierarchical structures. In Information Visualization, 2002. INFOVIS 2002. IEEE Symposium On, pages 77–84. IEEE, 2002.

[36] Brian D Ondov, Nicholas H Bergman, and Adam M Phillippy. Interactive metagenomic visualization in a web browser. BMC bioinformatics, 12(1):1, 2011.

[37] Robert Amar, James Eagan, and John Stasko. Low-level components of analytic activ-ity in information visualization. In IEEE Symposium on Information Visualization, 2005.

INFOVIS 2005, pages 111–117. IEEE, 2005.

[38] 韓承靜、蔡介立(民 97)。眼球軌跡記錄—科學學習研究的明日之星。科學教育,

310,2-11。

[39] The eye tribe products. In The Eye Tribe. Last visited on 1/4/2016.

[40] Stanislav Popelka, Zdeněk Stachoň, Čeněk Šašinka, and Jitka Doležalová. Eyetribe tracker data accuracy evaluation and its interconnection with hypothesis software for cartographic purposes. Computational intelligence and neuroscience, 2016.

[41] Ogama, open gaze and mouse analyzer. In OGAMA. Last visited on 2/4/2016.

[42] Adrian Voßkühler. Ogama description (for version 2.5). Berlin, Germany: Freie Univer-sität Berlin, Fachbereich Physik, 2009.

[43] Thinking aloud: The #1 usability tool. Last visited on 7/7/2016.

[44] Talking out loud is not the same as thinking aloud. Last visited on 7/7/2016.

[45] 民族誌。擷取自維基百科,自由的百科全書:https://zh.wikipedia.org/w/index.php?

title=。

[46] Ethnography in ux. In UX matters. Last visited on 7/7/2016.

[47] Ben Shneiderman and Catherine Plaisant. Strategies for evaluating information visualiza-tion tools: multi-dimensional in-depth long-term case studies. In Proceedings of the 2006 AVI workshop on BEyond time and errors: novel evaluation methods for information vi-sualization, pages 1–7. ACM, 2006.

[48] The field guide to human-centered design.

[49] Card sorting. In information and design. Last visited on 7/7/2016.

[50] Robert A Wagner and Michael J Fischer. The string-to-string correction problem. Journal of the ACM (JACM), 21(1):168–173, 1974.

[51] Paul M Fitts. The information capacity of the human motor system in controlling the amplitude of movement. Journal of experimental psychology, 47(6):381, 1954.

[52] Stuart K Card, William K English, and Betty J Burr. Evaluation of mouse, rate-controlled isometric joystick, step keys, and text keys for text selection on a crt. Ergonomics, 21(8):

601–613, 1978.

[53] I Scott MacKenzie. Movement time prediction in human-computer interfaces. In Proceed-ings of Graphics Interface, volume 92, page 1, 1992.

[54] 魏浩翔(民 104)。分享脈絡:社群媒體訊息散播行為視覺化。國立政治大學,資 訊科學學系,台北市。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

[55] 熊凱文(民 104)。基於堆疊圖方式之社群媒體階層式議題的視覺化探索架構。國 立政治大學,資訊科學學系,台北市。

[56] Jeff Sauro and James R Lewis. Quantifying the user experience: Practical statistics for user research. Elsevier, 2012.

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

附錄一 實驗指示

以下實驗指示為實驗者於不同時間需要告訴受測者的內容。

實驗前:

1. 這是個互動式資料視覺化的研究,請問你有知道什麼是互動式資料視覺化嗎?若 回答不知道時,進行解釋:靜態的資料視覺化,像是我們常見的 excel 能做出來 的圖表,包含直方圖、圓餅圖等等,資料視覺化就是指數據資料被可視化,互動 的意思是你可以透過滑鼠的操作看到不同的頁面或事件。

2. 實驗中會有錄音、錄影,僅供研究使用,可以嗎?(徵求受測者同意才開啟錄音、

錄影軟體)

3. 實驗時會需要用眼動儀抓眼睛正在看哪裡,我們先練習一下。眼動儀開始校正 時,螢幕中會出現圓點在螢幕上移動,請盡量不要轉動頭,只動眼睛去看,因為 眼動儀的原理是計算相對位置。(若有校正困難,需要重複執行此步驟,更詳細 解釋,或是實際示範,若持續校正不準則放棄該受測者)。

4. 校正完,(移動 The Eye Tribe 眼動儀的使用者介面到螢幕的四個角落),請你練習 移動眼睛跟著這個視窗,不要轉動到頭。

5. 等下實驗需要麻煩你邊操作邊告訴我你在做什麼,(若已知熟悉互動相關領域者,

告知使用放聲思考法),(打開任意網頁)實際操作一次放聲思考法。

6. 等下實驗分三個部分,第一個是先測試可不可以抓到眼動資料,再來有兩個實驗 操作互動式資料視覺化工具。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

測試蒐集資料:

1. 開始之前請先校正,盯著螢幕的紅點看,校正完之後就不要移動頭。

2. 請從黃點開始沿著線讓滑鼠、眼睛一起走一次,確定可以蒐集到你的資料。

3. 我們來看一下結果,(播放 OGAMA 的錄影),移動的圓圈是眼睛正在看的位置,

你等下實驗的時候,我同樣可以從第二個螢幕看到你的即時操作。(若位置偏差 太遠,則重複進行此測試,一邊調整眼動儀與受測者間的相對位置或角度,若多 次後仍然無法蒐集到可用資料,則放棄該受測者)。

探索開始前:

1. 接下來要測兩張不同的視覺化,每次實驗前會做校正。

2. 每個視覺化實驗分為兩部分,先探索怎麼使用,才進行任務,視覺化相同,但是 原始資料不同,所以在探索時,請著重在了解這個視覺化可以如何操作,而不需 要記憶內容。

3. 探索時間有十分鐘,如果覺得好了可以先結束。

4. 探索時請盡量講出你正在做什麼,發現了什麼,懂或不懂什麼部分?

任務開始前:

1. 等下實驗時,題目在上面,自己看完後就開始找答案,跟剛剛一樣,請描述你在 做什麼、想什麼?用講的告訴我答案,好了自行按下一題。

2. 如果有一直找不到答案的也可以說放棄,直接跳下一題。

3. 測驗的過程我們不會對話,請針對此頁面中能提供的資訊回答。

第一個實驗結束後,第二個實驗開始前:

1. 等下的實驗進行方式跟剛剛一樣,但是有一點提醒:這兩個視覺化是不同的作 者,所以設計的想法也不一樣,可以忘記剛剛學到的操作,重新來過。

4. 第五個留言者 (comment) 收到多少回覆 (replies)?

5. 藍色環面積最大者是誰? 他的回覆數 (replies) 和按讚數 (like) 分別是多少?

6. 藍色環的面積取決於什麼?

7. 綠色環的面積取決於什麼?

8. 藍色、綠色的顏色深淺代表什麼意思?

9. 留言 (評論、comment) 的按讚數最高的區域得到多少回覆 (replies)?

10. 誰的留言 (評論、comment) 完全沒有得到回覆 (replies)?

11. 誰得到最多的留言 (評論、comment)?

12. 承上題,在同一個留言 (評論、comment) 裡,綠色的人對藍色的是贊同還是反

2. 第五個留言者 (comment) 收到多少回覆 (replies)?

3. 誰的留言 (評論、comment) 得到最多讚 (likes)?

4. 誰的留言 (評論、comment) 完全沒有得到回覆 (replies)?

的留言 (評論、comment)?