Interaction Illustration Taxonomy: Classification of Styles and Techniques for Visually Representing Interaction Scenarios

Abstract

Static illustrations are ubiquitous means to represent interaction scenarios. Across papers and reports, these visuals demonstrate people's use of devices, explain systems, or show design spaces. Creating such figures is challenging, and very little is known about the overarching strategies for visually representing interaction scenarios. To mitigate this task, we contribute a unified taxonomy of design elements that compose such figures. In particular, we provide a detailed classification of Structural and Interaction strategies, such as composition, visual techniques, dynamics, representation of users, and many others -all in context of the type of scenarios. This taxonomy can inform researchers' choices when creating new figures, by providing a concise synthesis of visual strategies, and revealing approaches they were not aware of before. Furthermore, to support the community for creating further taxonomies, we also provide three open-source software facilitating the coding process and visual exploration of the coding scheme. CCS CONCEPTS• Human-centered computing → Human computer interaction (HCI); Visualization theory, concepts and paradigms.

Studying the Visual Representation of Microgestures

“…As a use case, the authors redesigned the representation used by Microsoft for the tap microgesture to reduce it to a single image as it "avoids redundant and excessive motion expression". Even though they did not provide precise guidelines directly usable for microgesture representation, their results associated to Antoine et al taxonomy of static illustrations [2] give directions on the representation of gestural interaction in general. For their part, Mackamul et al [44] investigated how different button designs could communicate in-place touch inputs, but these inputs are radically different from microgestures as they are stationary and performed on a touchscreen.…”

“…We based our review of microgesture representations used in the literature on two design frameworks: 1) the set of design elements to present the motion of a gesture proposed by McAweeney et al [48]; 2) the taxonomy of interaction illustrations defined by Antoine et al that focuses on static illustrations [2]. Our review of existing microgesture representations led us to define a categorization of visual cues presented in Table 1.…”

“…Eventually, we deepened our research work on Bertin's variables introduced in Semiology of Graphics [8] as a mean to take a step back from the designed families in order to finalize them. [2]. The taxonomy is built on categories of visual cues including "Lines", "Arrows", "Contact shapes" and "Effects".…”

“…Emphasis tools are Effects that modify the aspect of a visual cue. Examples of aspects of a visual cue include the line type, the filling pattern, the color, and the level of transparency [2,13,45,56,59,69]. Practitioners vary the line type, the filling pattern, the color, the level of transparency and other characteristics of the visual cues they use [2,13,45,56,59,69].…”

“…Examples of aspects of a visual cue include the line type, the filling pattern, the color, and the level of transparency [2,13,45,56,59,69]. Practitioners vary the line type, the filling pattern, the color, the level of transparency and other characteristics of the visual cues they use [2,13,45,56,59,69]. Antoine et al categorized emphasis tools under their Effects and Emphasize sections.…”