Investigating Integrative Visual Expressions in GUI Design: Icon Design Utilizing Combined Visual Elements

Abstract

Digital devices, particularly smartphones, have become deeply embedded in everyday life—people routinely search for information and make selections and decisions on screens. In such an environment, the process of understanding information and performing an action strongly shapes user experience; therefore, GUI icons are widely used as a space-efficient means of presenting information while reducing cognitive and learning load. Meanwhile, as apps and services become more feature-rich and integrated—and as usage contexts expand to smaller displays, such as wearable devices—the number of situations in which single-element icons cannot sufficiently convey meaning is increasing. This research focuses on compound icons, which create new meanings by combining multiple visual elements, and examines how the visual structure between elements—specifically relative size and spatial arrangement—influences semantic interpretation. A survey of existing designs found that compositions combining two elements (a large primary element plus a small secondary element) are common and that their semantic relationships can be organized using a part-of-speech-like framework. In an experiment on relative size, configurations of action or status (small) + object (large) tended to be perceived as “easy to understand and less likely to cause hesitation,” with familiarity and physical metaphors supporting comprehension. However, judgments about element hierarchy sometimes vary depending on factors such as the importance of the conveyed information. In an experiment on spatial arrangement, lower-right placement received the strongest overall support, although exceptions were observed owing to directional cues and tool metaphors. These findings suggest that an effective compound-icon design requires a hierarchy aligned with semantic relations, structural decisions that consider placement-driven reading order, and consistency of metaphors.

Keywords: Compound Icon, Semantic Interpretation, Visual Structure

DOI: 10.54941/ahfe1007745