Glanceable visualizations are typically discussed in the context of smartwatches or smartphones [18,21-23] and characterized as “being able to quickly extract the essential information from a display by a quick glance” [18,24]. Example scenarios include a runner who has a few hundred milliseconds to glance at the smartwatch to check relevant indicators, such as heart rate, elevation, and distance covered, before refocusing on the trail ahead [21,23]. The quick information needs support the shifting of focus from the primary task, typically in use cases that are locomotive, and through displays that are portable or small in the case of a smartwatch. The information provided is immediate, featuring a simple appearance and encoding very few data dimensions [23], be it in the form of a graph [18,23] or abstracted representations such as an arrow indicating direction or the use of other familiar visual metaphors [21,22]. Previous human-computer interaction studies investigating smartwatch use and interactions [25,26] have categorized timescales of smartwatch glanceable interactions as peeks (≤5 seconds) and interactions (>5 seconds). Up to 5 seconds can be taken as the limits of a glanceable visualization without any physical interactions, where the user receives, understands, and acts on the information. However, the time a user actively attends to the content via a “glance” or “peek” is suggested to be shorter [23].

Individual visualization types such as line, bar, radial, and donut graphs are established visual representations in glanceable visualizations [18,23,27]. The effectiveness of these varies. Comparative studies highlight that information presented in radial charts takes longer to gather than that presented in bar or donut charts [23,28]. A study on information representation types in smartwatches [29] highlighted “icon+text” as being the most common representation type and supports research suggesting that textual data representations are predominant in smartwatches [30]. The most common graphical representation types or information “visualization techniques” are categorized as trees, scatter plots, charts, tables, diagrams, and graphs [31,32]. Previous studies have evaluated the effectiveness of different visualization types [33-38] as well as effectiveness across a number of selected tasks [33,38-41]. While the various visualization types perform differently depending on the task at hand, the literature suggests a positive correlation between perceived accuracy and user preference in 2D visualization types (tables, line charts, bar charts, scatterplots, and pie charts) for facilitating accurate and quick completion of tasks (finding anomalies, finding clusters, correlation, derived value, distribution, finding extremum, order, retrieving value, filtering, and determining range). Average response times reported in the study ranged between 10 and 40 seconds [33].

A traditional individual visualization type typically encodes up to 3 data dimensions, this being the number of unique attributes or discrete information points in the dataset [42]. When more data dimensions are included, the complexity is increased. Commonly, 3 to 4 data dimensions are encoded in a visualization [43]. For example, a line graph representing an individual’s step count over the course of a week illustrates the days and number of steps—2 data dimensions. Adding a second individual to the graph provides a third data dimension. Adding data points within these dimensions (ie, additional weeks or more individuals) will not increase the complexity but may make it more crowded or complicated to visualize and understand the graph [43]. As the number of data dimensions that need to be visually encoded increases, the complexity of a visualization increases [43]. Although applications of visualizations encoding ≥4 data dimensions exist, it becomes more challenging to design and learn from them and illustrate their relationships [43,44]. Perceptually, an increase in dimensionality can also be overwhelming [42]. Beyond 3 data dimensions, visualization representations include combined visualization types (such as a line graph integrated within a bar graph); individual visualization types collectively tiled to present the information (dashboards); diagrammatic representations (ie, concept diagrams and scientific overviews) visualizing relationships between parameters, connecting and linking various themes to represent a multidimensional concept or topic [45,46]; or aesthetic presentations (infographics and visual art).

As the data dimensionality increases and visual representations change, the reader requires more time to understand the visualization [47,48]. There is also a shift from explanatory visualizations, where the data and narrative are provided, structured, and communicated, toward exploratory visualizations, where the viewer seeks the story that the data have to tell them through open interactions [43,49]. Iliinsky and Steele [43] further propose a hybrid explanation-exploration category where the provided data are curated and communicated, allowing for some exploration and interaction; thus, the reader can “...choose and constrain certain parameters, thereby discovering for herself whatever insights the dataset may have to offer.” Adopting a hybrid approach and finding a balance between explanation and exploration contributes to some of the most successful visualizations of today [49]. Dashboards are an example of the hybrid exploration-explanation approach, where multiple individual visualizations provide a top-level overview, encouraging further exploration and analysis [50]. The literature characterizes dashboards as being “glanceable” [50,51] because of the tiled layout of singular simple charts or numbers, which facilitates the information to be monitored at a glance [52]. However, studies evaluating efficiency or task completion rate via dashboards highlight the engagement and time for task completion to be several minutes [53-55].

Infographics are common in data journalism, with the goal of making information presentable and digestible to readers [56,57]. Defined as “a larger graphic design that combines data visualisations, illustrations, text, and images together into a format that tells a complete story” [58], infographics are highly engaging [56] and exploratory [43,51], intended for “deeper exposition” [50]. Infographics provide a high-level overview or essence of complex, abstract, and dense information [59,60], typically static when published [61] and rendered through a manual illustration process, consequently being aesthetically rich but making it challenging to change and manipulate data points [43]. Beyond infographics, the visual art use case is highly exploratory, and data are translated into a visual form typically with a “unidirectional encoding of information” [43]. The viewer is presented with a highly visual but abstract representation and seeks to interpret and arrive at their own meaning of the data [43,62].

Existing visualizations support both explanatory and exploratory tasks [43]. Explanatory visualizations typically encode 1 to 3 data dimensions [42], communicating information and data, including glanceable visualizations and scientific individual types (eg, line, bar, radial, and donut graphs). Visualizations combining individual types (line graph included within a bar chart) encode ≥4 data dimensions [43]. Exploratory visualizations are higher in data dimensionality, typically where the viewer interacts with the visualization to seek the story communicated by the data (eg, infographics and visual art) [43,44]. Some visualization types, including dashboards, diagrammatic representations, and some infographics and holistic integrated visualizations, can be described as being both explanatory and exploratory through a combination of information communication and structured interaction [43,49]. HI-viz is positioned at the forefront of the explanatory-exploratory Venn diagram due to the heightened complexity and required rapid processing time akin to that for explanatory visualizations.

The proposed HI-viz is a unique visualization type in time-critical contexts (Figure 1). Characteristics include heightened complexity with the presentation of multiple discrete data points, similar to a dashboard, but in a single integrated visual representation. It requires rapid processing, similar to glanceable visualizations, but with this being the primary task and requiring additional engagement. It can link and communicate relationships between information points, similar to diagrammatic representations, but in a curated, coherent, and concise manner. The requirements of this visualization type transition beyond the pre-attentive—a rapid subconscious processing of information in the visual environment where the viewer is drawn to elements of the design or data through pre-attentive attributes (color, form, movement, and spatial positioning) [10]—and “glanceable” timescales into a nuanced attentive area we define as “rapid attention processing.” This stipulated segment of the timescale typically features glanceable visualizations and individual chart types that are usually lower in information density and complexity. Thus, the holistic integrated visualization has the potential to convey more information in a shorter time frame through a single visual representation (Figure 2).

The synthesis of the theoretical underpinning (Figure 2) positions the information visualization types against information (from simple visualizations with few data dimensions to complex and rich visualizations with increased data dimensions) [18,23,42-44,47,48,50-52] and time (engagement duration) [18,21,23-26,33,47,48,50-55,62], across an explanatory-exploratory visualization task Venn diagram [43,49]. While reading the chart (Figure 2), one should keep in mind that it communicates the relative time and information complexity of each visualization type theoretically and provides a general comparison as synthesized through analysis of the literature. The authors have positioned visualization types considering information complexity (less or more information—data dimensions) and time (to understand the information). In practice, how the visualization types perform may vary depending on their physical implementation and information complexity.

Examples of HI-viz in other domains such as sports, finance, and military applications have proven effective in giving a quick at-a-glance presentation of multivariate data providing both summary and context. Profiles of football players in fantasy leagues and computer games provide a holistic overview of key information regarding the professional athlete and their skills and abilities (eg, FIFA 22 video game player rankings [63]). The holistic integrated profile of Messi (Figure 3B [63]) quickly informs the viewer that the player is an excellent (93 overall aggregated score) male football player of Argentinean nationality; plays for Paris Saint-Germain Football Club (Paris) at club level; and excels at physical, mental, and technical attributes such as shooting, passing, and dribbling. This information captures a holistic overview of the player and their attributes. This FIFA 22 player card presents 12 core data dimensions pertaining to the player (name, photo, overall rating, position, nationality, club, and 6 individual performance attribute statistics) in a single integrated “player profile” visualization. The categories and numerical values are easily interpretable, allowing the viewer to understand player strengths and weaknesses as well as facilitating easy comparison between players holistically and across categories.

Similarly, Finviz [64], an interactive tree map of the stock market, provides users with an at-a-glance holistic summary of stocks categorized by industry and sectors against key performance metrics (price fluctuation and market cap). This single integrated view allows the viewer to see the overall market, how stocks compare within a sector, and relative sector performance. Color coding (red for losses and green for gains) and the size of the stock tiles immediately illustrate stock performance, performance across the market, and whether a sector is up or down. This visualization is high in information complexity, with hundreds of stocks and each tile communicating the stock ticker symbol, price change (percentage up or down), and market dominance (the size of the tile) within its respective sector and industry groupings.

Military aircraft, too, amalgamate high information complexity and display a user interface for rapid information processing. Flight panels integrate disparate data dimensions such as altitude (above ground level), flight path, aircraft pitch and roll, current airspeed, vertical speed, aircraft heading, engine status (speed, fuel, temperature, and torque), outside air temperature, navigation data, alerts, and flight warnings. This provides an at-a-glance holistic overview for the pilot in a single display for rapid comprehension and decision-making. The integrated view enables the layering and combining of different types of information, allowing the pilot to track and process core information simultaneously.

Within health care, Le et al [4,65] present “an approach to capture older adults’ wellness” through 3 alternate visualization techniques (stacked bar charts, polygons, and donut displays) in addition to an integrated measure of wellness—cognitive, physiological, social, and spiritual. This presents alternate approaches, nonexistent in electronic systems, combining the 4 factors into 1 graphical representation of overall wellness (Figure 3C [4]). The tool captures numerous data points pertaining to older adults’ wellness over a 12-month period, with the holistic overview enabling quick interpretation of wellness indicators (physiological, social, spiritual, and cognitive) and correlations at a glance in a single integrated visual representation. The aim to provide additional granularity for health information, while maintaining the representation of overall wellness was an interesting paradigm, offering the viewer a quick overview in addition to further detail and layers of information. Similarly, a holistic integrated visualization in primary care can inform us, for example, that we are dealing with a complex older adult female patient who is obese, smokes, and has uncontrolled diabetes and hypertension. The information could be derived from different sources of data (ie, electronic health records, wellness sensors, and secondary care) and integrated into a single visual representation, and relationships between data dimensions could be highlighted through links (ie, medications and health problems or medications and allergies).

The 60 guidelines and principles extracted from this systematic review in Table 2 were grouped into 5 main interlinked guidelines for designing HI-viz. Through an inductive thematic analysis approach, 16 top-level categories emerging from the data were identified (Multimedia Appendix 2 and Table 2). Related guidelines were thematically grouped through the top-level categories and underlying principles that linked them, capturing the essence of each group of guidelines (ie, guidelines pertaining to prioritization and reduction of information were grouped with the common focus of prioritizing key information and reducing the extraneous). The categorization was iteratively reviewed and corroborated among all authors to reach a consensus.

The detailed descriptive and prescriptive guidance references the 60 theoretical guidelines (G01-G60) below.

To ensure that a visualization provides a holistic overview for a specific task, prioritize the core information, establish hierarchy, reduce clutter, filter information carefully, and use visual cues to highlight important elements and improve user efficiency. Specifically, to attain a holistic overview, a hierarchy must be established in the dataset and design. The core information, message to be communicated, and features must be prioritized (G02 and G03), and the importance between them must be affirmed to aid the management of information in the visualization as well as reducing cognitive complexity on the user (G03). To convey hierarchy and rapidly call attention to prioritized information elements or areas, pre-attentive attributes such as color, form, spatial positioning, and movement should be used (G01). Extraneous information and features that are not core to the task and infrequently accessed must be identified and reduced (G05). This will prevent “feature creep,” which is the gradual addition of nonessential features that can complicate the user experience (G04), and limit distractions from the core information needs and wants, contributing to the efficiency and ease of use (G06). The filtering of information must be used carefully (G07), reducing display density to support information “at a glance” but not sacrificing coherence (G08 and G09) or augmenting the need to navigate and find information, consequently adversely increasing the time taken for information assimilation (G07). Thus, missing information must also be explicitly identified to highlight what is unavailable or not unimportant (G08) and preventing the user from having to search and navigate for data that are not provided.

To ensure an integrated visualization, organize information around the user’s core goals and structure information effectively using grouping, layering, and visual principles into a single connected and combined representation. Specifically, to combine and integrate the constituent elements into a single integrated representation, focus and organize information around the users’ core goals and provide the required information directly (G10). Ensure an efficient spatial distribution of information and features to aid user navigation (G11). Organize information by importance and commence with a holistic overview (macro) that captures and communicates the core message, subsequently implementing progressive disclosure to provide detail (micro) and context on demand.

Integrate the constituent elements into the data and design through “chunking” or grouping information while considering Miller’s law of “seven, plus or minus two” as a limit for grouped information (G16). Use gestalt principles of organization (proximity, similarity, connectedness, continuity, closure and common region, and symmetry) to guide the arrangement and structuring of information into a connected, combined, and integrated whole (G19-G27). In layering information, use “visual aggregation” (sum or count, average, mode, extents, medians, percentiles, and distribution) to communicate information about underlying contents while not misrepresenting the data in the process of simplification (G31-G36), as well as abstraction to distil and emphasize key aspects of the information in its most essential detail via iconic representations to aid in the quick identification of information (G29). Consider Tesler’s law: for any system, there is a certain amount of complexity that cannot be reduced (G30). Establish and communicate relationships between information and integrated elements through links and connections to guide insights and provide “added value” (G18).

To reduce cognitive load when using the visualization, maintain consistency and clarity across design elements and interactions by standardizing attributes, modes, and features; simplifying visual elements; and using visual cues for effective notifications. Specifically, maintain consistency across similar design elements (G13), visual and spatial attributes (color and geometry [shape, size, scale, and position]; G11 and G12), and modes and features (G14, G15, and G28) to build familiarity and help manage complexity. Provide standardization across layout, format, and labels to reduce the time taken to search as well as helping develop and build a mental model to assimilate new or different information across the visualization (G14). Ensure clarity in the visual representation by eliminating extraneous elements and embellishments (G17); thus, every entity supports data insights. Develop simplicity in visual elements with well-understood representations that can be grasped when looking for the first time (G37) while being distinct to help aid the identification of elements and drawing the viewer’s eye to new or updated information (G38). To rapidly call attention to new or updated information, use pre-attentive attributes (color, form, spatial positioning, and movement; G01). Communicate and provide updated or missing information and factors through discernible “alarms” or notifications (G40, G41, and G43), ensuring that these do not disrupt ongoing activities (G42) but provide projection support (G39).

To facilitate intuitive interactions, design interfaces based on familiar mental models, use established affordances and contextual clues, and simplify tasks to reduce cognitive effort. Specifically, design the interface with existing mental models driven by user needs (G46). Use familiar, established interaction affordances to support intuitive use (G45) and reduce learning effort (G44). Minimize task complexity by ensuring a minimal number of actions to accomplish a goal or task (G56 and G59) and provide flexibility to communicate the number of possible ways to achieve a goal (G57), prompting with strong contextual clues to help know the alternatives when several actions are possible (G58). Support navigation by allowing users to undo actions, replay previous steps, and progress through the visualization (G53 and G54) and consider Hick’s law, which states that “the time it takes to make a decision increases with the number and complexity of choices” (G59).

To ensure efficient data retrieval, design the visualization to allow users to navigate between overview and detailed information on demand, communicate relationships, and view data from multiple perspectives. Specifically, use established interactive approaches to minimize complexity. Commence with a holistic overview of the data (G47) and provide progressive disclosure through interactions, including zooming in on items of interest (G48), details on demand to obtain information when needed (G50), and a filter for uninteresting items (G49). A hover can reveal information faster than clicking to open and clicking to close (G51). Enable the user to rearrange or view the visualization from different perspectives (G60) and link elements to communicate the relationship between items (G52), guiding analytical reasoning and insights. Support the extraction and retention of information desired by the user once they have attained it (G55).