資料驅動互動式回饋以輔助高易用性圖標設計

Data-Driven Interactive Feedback for Designing High-Usability Icon

王郁婷(Yu-Ting Wang)

指導教授 ： 陳炳宇

國立臺灣大學/電機資訊學院/資訊網路與多媒體研究所/碩士(2021年)

https://doi.org/10.6342/NTU202101410

摘要

圖標在應用軟體、網頁、和各式各樣的使用者介面上是重要的元素之一，並且經常以整組的圖標一起設計、使用。然而，設計師通常僅僅通過公司、團隊內部非正式的測試來評估新設計的圖標、圖標組的易用性。即便有些較常見的功能已有具代表性的圖標樣式（例如：搜尋、下一步），但是在不同案例中仍然有許多尚未建立代表性圖標的功能的設計需求（例如：封存）。不僅如此，因為介面設計在時間和預算上的限制，設計師鮮少針對每個圖標去做正式的（具有足夠受測者的）易用性測試。因此，我們提出EvIcon，一個互動式設計評估工具來提升圖標設計反覆修改和評估階段的效率，並且針對新設計的圖標提供兩種即時資料驅動回饋。
首先，我們透過群眾外包收集大量群眾對於不同圖標的感知程度（包含語義相關性和熟悉程度）評分（共收集到62, 649 筆評分資料）並用以訓練深度學習模型來針對使用者上傳的圖標提供即時的易用性回饋。接著，我們利用收集到的圖標資料庫（n = 2, 000）以及孿生神經網路（Siamese Neural Network）來輔助圖標組的設計能達到足夠的視覺區分程度。我們透過新手及專業介面設計師的使用者試驗及訪談，展示EvIcon 對於圖標設計反覆修改和評估階段的幫助和成效。在後續的群眾外包實驗中，可以看到在EvIcon 輔助下設計的圖標對比沒有EvIcon 輔助的圖標在語意相關性和熟悉程度上均達到較佳的成效。

關鍵字

圖標設計 ； 群眾外包 ； 互動式輔助工具

並列摘要

Interface icons are prevalent on webpages, applications, and various system interfaces and are often designed together as an icon set. However, designers often rely on informal and internal evaluation to determine the usability of individual icons and icon sets. Although there are representative icons for some established functions (e.g., search and next), there are no such icons that can be universally recognized for other unestablished functions (e.g., archive). Moreover, due to the limited time and budgets in the interface design process, designers can rarely perform formal usability evaluations on icons of unestablished functions with sufficient target users. In this paper, we propose EvIcon, an interactive design tool to facilitate effective icon set design iteration and validation by providing two types of instant data-driven feedback to new edited icons. First, we conducted crowdsourcing studies to collect largescale crowdworkers’ perceptual ratings (62, 649unique ratings) and trained deep learning models to provide instant usability feedback to input icons. Second, we learned an embedding space of a large icon dataset (n = 2, 000) using the Siamese neural network to assist icon set design with proper visual distinguishability among icons in the icon set. We demonstrated that EvIcon could benefit the iteration and validation process of designing interface icon set through the evaluation with both the novice and professional UI designers. Moreover, the interface icons designed with the assists of EvIcon achieved better semantic distance and familiarity verified by an additional crowdsourcing study.

並列關鍵字

Icon Design ； Crowdsourcing ； Interactive Assistive Tool ； Computational Design

參考文獻

[1] Adobe. Adobe illustrator 2021, 2021.

[2] A. X. Ali, E. Mcaweeney, and J. O. Wobbrock. Anachronism by design: Understanding young adults＇ perceptions of computer iconography. International Journal of Human Computer Studies, page 102599, 2021.

[3] Angular. Angular, 2021.

[4] D. Arthur and S. Vassilvitskii. Kmeans++: The advantages of careful seeding. In Proceedings of the Eighteenth Annual ACMSIAM Symposium on Discrete Algorithms, SODA ’07, page 1027–1035, USA, 2007. Society for Industrial and Applied Mathematics.

[5] R. W. Bailey, R. W. Allan, and P. Raiello. Usability testing vs. heuristic evaluation: A headtohead comparison. In Proceedings of the human factors society annual meeting, volume 36, pages 409–413. SAGE Publications Sage CA: Los Angeles, CA, 1992.