EvIcon: Designing High‐Usability Icon with Human‐in‐the‐loop Exploration and IconCLIP

Simple item page
dc.contributor.authorShen, I‐Chaoen_US
dc.contributor.authorCherng, Fu‐Yinen_US
dc.contributor.authorIgarashi, Takeoen_US
dc.contributor.authorLin, Wen‐Chiehen_US
dc.contributor.authorChen, Bing‐Yuen_US
dc.contributor.editorHauser, Helwig and Alliez, Pierreen_US
dc.date.accessioned2023-10-06T11:58:52Z
dc.date.available2023-10-06T11:58:52Z
dc.date.issued2023
dc.description.abstractInterface icons are prevalent in various digital applications. Due to limited time and budgets, many designers rely on informal evaluation, which often results in poor usability icons. In this paper, we propose a unique human‐in‐the‐loop framework that allows our target users, that is novice and professional user interface (UI) designers, to improve the usability of interface icons efficiently. We formulate several usability criteria into a perceptual usability function and enable users to iteratively revise an icon set with an interactive design tool, EvIcon. We take a large‐scale pre‐trained joint image‐text embedding (CLIP) and fine‐tune it to embed icon visuals with icon tags in the same embedding space (IconCLIP). During the revision process, our design tool provides two types of instant perceptual usability feedback. First, we provide perceptual usability feedback modelled by deep learning models trained on IconCLIP embeddings and crowdsourced perceptual ratings. Second, we use the embedding space of IconCLIP to assist users in improving icons' visual distinguishability among icons within the user‐prepared icon set. To provide the perceptual prediction, we compiled , the first large‐scale dataset of perceptual usability ratings over 10,000 interface icons, by conducting a crowdsourcing study. We demonstrated that our framework could benefit UI designers' interface icon revision process with a wide range of professional experience. Moreover, the interface icons designed using our framework achieved better semantic distance and familiarity, verified by an additional online user study.en_US
dc.description.number6
dc.description.sectionheadersORIGINAL ARTICLES
dc.description.seriesinformationComputer Graphics Forum
dc.description.volume42
dc.identifier.doi10.1111/cgf.14924
dc.identifier.issn1467-8659
dc.identifier.urihttps://doi.org/10.1111/cgf.14924
dc.identifier.urihttps://diglib.eg.org:443/handle/10.1111/cgf14924
dc.publisher© 2023 Eurographics ‐ The European Association for Computer Graphics and John Wiley & Sons Ltd.en_US
dc.subjectinteraction
dc.subjecthuman‐computer interfaces
dc.subjectuser interface design
dc.subjectuser studies
dc.subjecthuman‐in‐the‐loop
dc.subjectvector graphics
dc.subjectcontrastive language‐image pre‐training
dc.titleEvIcon: Designing High‐Usability Icon with Human‐in‐the‐loop Exploration and IconCLIPen_US
Files
Original bundle
Now showing 1 - 1 of 1
No Thumbnail Available
Name:
v42i6_20_14924.pdf
Size:
1.73 MB
Format:
Adobe Portable Document Format
Download
Collections
42-Issue 6