Design Actions
Wir präsentieren neun "design actions" für die Gestaltung von Visualisierungs-Onboarding-Konzepten, die in visuelle Analysewerkzeuge (VA) integriert werden können. Die Nutzung von "design actions" gemäß dem Rahmen von De Bruijn und Spence [1] bietet Designer*innen einen strukturierten Ansatz, der auf kognitiven Theorien basiert. Durch die Anwendung dieser Aktionen können Designer*innen die Entwicklung von Artefakten effektiv steuern, die den Anforderungen der Benutzer*innen, ihren kognitiven Prozessen und Verhaltensweisen entsprechen. Die entwickelten Designaktionen bieten einen Rahmen für Designer*innen und Entwickler*innen, um Onboarding-Erfahrungen zu schaffen, die intuitiv, informativ und auf die spezifischen Bedürfnisse der Benutzer*innen zugeschnitten sind. Die Designaktionen umfassen strukturierte Richtlinien zur Integration und Gestaltung von Visualisierungs-Onboarding-Konzepten entlang des Rahmens von De Bruijn und Spence [1], einschließlich (1) Beschreibung und Titel, der (2) Wirkung der Designaktion im Kontext des Onboardings, Vorteile und Kompromisse, (3) Vor- und (4) Nachteile, (5) Fragen zur Anwendung der Designaktion und (6) einem Verweis auf die kognitive Theorie, auf der die Designaktion basiert.
Referenzen:
[1] De Bruijn, O., & Spence, R. (2008). A New Framework for Theory-Based Interaction Design Applied to Serendipitous Information Retrieval. ACM Transactions on Computer-Human Interaction, 15(1), 5:1-5:38. https://doi.org/10.1145/1352782.1352787
Description: When designing and integrating onboarding instructions
into a visual analytics (VA) tool, the different knowledge gaps among
your users and their needs and prior knowledge must be considered.
Novice users may need more or a different kind of support as expert
users in interpreting data visualizations [1, 2]. In our design
space [3] and previous work [4, 3], we present different knowledge
gaps which should be considered when designing visualization
onboarding: domain knowledge (e.g., vocabulary and concepts of a
particular target group), data knowledge (understanding the particular
datatype), visual encoding (understanding the visual mapping) and
interaction knowledge (for performing tasks and understand relations in
the data), and analytical knowledge (knowledge of different automated
data analysis methods).
Effect: This affects the type of onboarding messages, the number
and order of onboarding stages, and for which parts of the VA tool
onboarding are needed. See related design actions DA3.
Upside: Targeted onboarding messages can help users of the VA
tool to have a better user experience. By collecting data during the
domain problem analysis, visualization designers can benefit later
when designing onboarding instructions.
Downside: To phrase and design onboarding based on the user’s needs
is demanding. Gathering data during the domain problem analysis and
interaction and visual encoding phase [5] is rather time-consuming.
Issues: Consider the user’s prior knowledge by gathering information
in your user research phase.
Theory: Prior knowledge about graphs influences the level of graph
comprehension [6, 7]. Kosslyn et al. [8] pointed out that a
visualization reader’s previous knowledge of data visualization and
content is one of the major factors when interpreting data visualizations.
Therefore, when designing visualization onboarding, it is important
to consider the user’s prior knowledge and knowledge gap. In our
descriptive model of user assistance [4], we propose to design and
adjust visualization onboarding and guidance [9] based on the state of
the user’s knowledge.
References:
[1] S. N. Friel, F. R. Curcio, and G. W. Bright. Making sense of graphs:
Critical factors influencing comprehension and instructional implications.
Journal for Research in Mathematics Education JRME, 32(2):124 – 158,
2001. doi: 10.2307/749671
[2] L. Grammel, M. Tory, and M. Storey. How information visualization
novices construct visualizations. IEEE Transactions on Visualization and
Computer Graphics, 16(6):943–952, 2010. doi: 10.1109/TVCG.2010.1643
[3] C. Stoiber, M. Wagner, F. Grassinger, M. Pohl, H. Stitz, M. Streit, B. Potzmann,
and W. Aigner. Visualization Onboarding Grounded in Educational
Theories. In Visualization Psychology. Springer Nature, 2022.
[4] C. Stoiber, D. Ceneda, M. Wagner, V. Schetinger, T. Gschwandtner,
M. Streit, S. Miksch, and W. Aigner. Perspectives of visualization onboarding
and guidance in VA. Visual Informatics, 6(1):68–83, 2022. doi:
10.1016/j.visinf.2022.02.005
[5] T. Munzner. A nested process model for visualization design and validation.
IEEE Transactions on Visualization and Computer Graphics (InfoVis’09),
15(6):921–928, 2009. doi: 10.1109/TVCG.2009.111
[6] F. R. Curcio. Comprehension of mathematical relationships expressed in
graphs. Journal for Research in Mathematics Education, 18(5):382–393,
1987.
[7] E. G. Freedman and P. Shah. Toward a model of knowledge-based graph
comprehension. In M. Hegarty, B. Meyer, and N. H. Narayanan, eds.,
Diagrammatic Representation and Inference, Lecture Notes in Computer
Science, pp. 18–30. Springer, 2002. doi: 10.1007/3-540-46037-3_3
[8] S. M. Kosslyn. Understanding charts and graphs. Applied Cognitive
Psychology, 3(3):185–225, 1989. doi: 10.1002/acp.2350030302
[9] D. Ceneda, T. Gschwandtner, T. May, S. Miksch, H.-J. Schulz, M. Streit,
and C. Tominski. Characterizing Guidance in Visual Analytics.
IEEE Transactions on Visualization and Computer Graphics (VAST’16),
23(1):111–120, 2017. doi: 10.1109/TVCG.2016.2598468
Description: Visualization onboarding instructions should explain how
the data visualization is read, how to interact with it, and what insights
you can gain (analyzing the chart). Reading the chart explains the
general visual encoding (e.g., size, color), Interacting with the chart
the possible interactions with the data visualization (e.g., zooming,
selecting, or dissolve), and Analyzing the chart - guiding the reader
towards further insights (e.g., making comparisons).
Effect: The structure of onboarding messages allows users to seek help
for different aspects of the onboarding based on their prior knowledge
and current knowledge gap.
Upside: (1) Onboarding instructions along the structure of reading,
interacting, and analyzing the visualization cover essential aspects of a
visualization, which the user has to understand to interpret and interact
with it successfully. (2) Users can select which onboarding instructions
are needed based on their prior knowledge or current knowledge
gap. (3) Besides, smaller chunks (microlearning) of information
are less overwhelming for users [1]. (4) The separation provides a
self-exploratory experience for the user (see the related design action
DA5).
Downside: (1) If the structure of onboarding instructions is too
detailed, it could annoy and overwhelm the user. (2) The structure
could feel too restricted for the user. (3) Instructional split-attention [2]
could occur when users have to split their attention between onboarding
messages assigned to the structure of reading, interacting, and
analyzing.
Issues: For some data visualization tools, providing more onboarding
instructions that expand the structure of reading, interacting, and
analyzing can be relevant. For example, providing onboarding
instructions regarding the data pre-processing might make sense as it is
new to the user. The structure can also be dissolved and the wording
adjusted if the use case requires it.
Theory: The structure (reading, interacting, and analyzing) also
reflects the stages of comprehending [3] (1) reading the data (i.e.,
finding individual data values), (2) reading between the data (i.e.,
finding relationships between the data), (3) going beyond the data (i.e.,
interpreting the data, developing hypotheses about the data). Whereas
the stages of comprehending reading between the data and going
beyond the data are covered by the category “Analyzing the chart”.
Small information units can support learning (microlearning) [1].
Besides, our studies show that users liked the structured way of the
onboarding instructions and the self-explanatory experience of it.
References:
[1] T. Hug and N. Friesen. Outline of a microlearning agenda. eLearning
Papers, 16(16), 2009.
[2] P. Ayres and J. Sweller. The Split-Attention Principle in Multimedia
Learning, p. 135–146. Cambridge Handbooks in Psychology. Cambridge
University Press, 2005. doi: 10.1017/CBO9780511816819.009
[3] S. N. Friel, F. R. Curcio, and G. W. Bright. Making sense of graphs:
Critical factors influencing comprehension and instructional implications.
Journal for Research in Mathematics Education JRME, 32(2):124 – 158,
2001. doi: 10.2307/749671
Description: When phrasing onboarding instructions, refer to the underlying
data visualized and provide examples if possible and needed
by the users (see design action DA1) (concrete onboarding instructions).
However, the onboarding instructions should be phrased as
easy to understand, and short sentences should be considered [1]. For
guidelines for writing understandable sentences, see [2]. Furthermore,
the wording of the specific domain in the onboarding is designed needs
to be considered when phrasing onboarding instructions.
Effect: Using data/concrete examples for onboarding instructions the
user is working with can enhance the understanding and support to-thepoint
assistance targeted to the visualized data set and the real problem
the user wants to solve.
Upside: Short, distinct, and understandable onboarding messages improve
understanding and increase the engagement of users. Concrete
examples can provide a practical context and activate real-world knowledge
[3]. Besides, it can enhance memory and understanding [4]
and enhance transfer in a new concrete domain more than abstract
exemplification [5].
Downside: When phrasing concrete onboarding messages, the text
could be too long and feel overwhelming for users. Another downside
could be the distraction from the relevant information [6] or constrained
transfer of knowledge [7].
Issues: Concrete onboarding messages should be short, distinct, and
simple for the users. Therefore, iterative feedback from users should
be gathered before publishing onboarding in the primary visualization
tool.
Theory: A longstanding debate concerns using concrete versus abstract
instructional materials [8. Both concepts have their advantages and
disadvantage, which have to be considered. Using concrete examples
and referring to the underlying data enable learners to construct their
knowledge about abstract concepts [9]. Concrete exemplification
enhances transfer in a new concrete domain more than abstract exemplification
[5]. Constructivist theories reflect on the application of
learning in a practical context (concrete examples), which is relevant
for the design of visualization onboarding instructions [10, 11].
References:
[1] B. Shneiderman. Content design london - readability guidelines.
https://readabilityguidelines.co.uk/clear-language/
simple-sentences/, 2022. Accessed: 2022-05-04.
[2] R. Janice Ginny. Guidelines for Document Designers. Technical Report
A Product of Document Design Project Funded by National Institute of
Education, American Institutes for Research, 2014.
[3] A. D. Schliemann and D. W. Carraher. The Evolution of Mathematical
Reasoning: Everyday versus Idealized Understandings. Developmental
Review, 22(2):242–266, 2002. doi: 10.1006/drev.2002.0547
[4] A. Glenberg, T. Gutierrez, J. R. Levin, S. Japuntich, and M. P. Kaschak.
Comparison and contrast: similarities and differences of teachers’ views
of effective mathematics teaching and learning from four regions. Journal
of Educational Psychology, 96:424–436, 2004. doi: 10.1037/0022-0663.96.3.424
[5] D. De Bock, J. Deprez, W. Van Dooren, M. Roelens, and L. Verschaffel.
Abstract or Concrete Examples in Learning Mathematics? A Replication
and Elaboration of Kaminski, Sloutsky, and Heckler’s Study. Journal for
Research in Mathematics Education, 42(2):109–126, 2011.
[6] J. A. Kaminski, V. M. Sloutsky, and A. F. Heckler. The advantage of
abstract examples in learning math. Science, 320(5875):454–455, 2008.
doi: 10.1126/science.1154659
[7] V. Sloutsky, J. Kaminski, and A. Heckler. The advantage of simple symbols
for learning and transfer. Journal of Educational Psychology, 12:508–513,
2005. doi: 10.3758/BF03193796
[8] E. R. Fyfe, N. M. McNeil, and S. Borjas. Benefits of “concreteness fading”
for children’s mathematics understanding. Learning and Instruction,
35:104–120, Feb. 2015. doi: 10.1016/j.learninstruc.2014.10.004
[9] M. C. Brown, N. M. McNeil, and A. M. Glenberg. Using Concreteness
in Education: Real Problems, Potential Solutions. Child Development
Perspectives, 3(3):160–164, 2009. doi: 10.1111/j.1750-8606.2009.00098.x
[10] T. M. Duffy, J. Lowyck, and D. H. Jonassen, eds. Designing Environments
for Constructive Learning. Nato ASI Subseries F:. Springer-Verlag, 1993.
[11] R. K. Sawyer and J. G. Greeno. Situativity and learning. In M. Aydede
and P. Robbins, eds., The Cambridge Handbook of Situated Cognition, pp.
347–367. Cambridge: Cambridge University Press, 2009.
Description: Users sometimes ignore onboarding systems. Many
users try to figure out how a system works on their own. In the case
of complex systems, they might overlook more complex features and
come to wrong insights based on the data visualized. The design of
onboarding systems should indicate to users that they need onboarding
and motivate them to reach a deep understanding of the visualization
without annoying them too much.
Effect: Onboarding systems should contain measures to motivate users
to use them actively.
Upside: Appropriate measures can motivate reluctant users to study
the onboarding system in case of need.
Downside: Measures to nudge users to do certain things can be
annoying and interfering. Users might see the onboarding system
as patronizing. A result may be that the users do not use it at all.
The onboarding system must provide unobtrusive but engaging
recommendations to the users. This is extremely difficult to achieve.
Issues: It depends on how the onboarding system achieves this.
Onboarding systems in the form of tutorials require different measures
than in-situ onboarding systems integrated into the visualization.
Theory: The problem described in this design action has already been
discussed in educational literature in some detail in the context of
using pictures in educational texts. Peek [1] argues that learners often
ignore pictures or underestimate the value of pictures in educational
texts. Pictures are still seen as something that has less importance than
text. The misconception that information can be gained from pictures
at a glance is widespread. Peek provides a literature overview that
gives some empirical foundation for this phenomenon. Educational
pictures as well as visualizations often have to be studied intensively
to be able to derive valid insights. Motivating learners and users to
engage in this time-consuming activity is difficult. One possibility is to
give some general advice to users that they should study pictures. In
the case of onboarding systems, a corresponding piece of advice would
be to access the onboarding system when difficulties arise, even if
users think they can figure out the solution by trial and error. Peek [1]
argues that sometimes this approach works, but other approaches are
generally more successful. Peek [1] especially suggests motivating
learners/users to interact actively with the (learning) system. In the
case of an onboarding system, users should solve some tasks on their
own in fields where they feel less comfortable. The system should, for
example, provide worked examples [2] with solutions or hints on
how to solve the problem to help the users to get acquainted with the
system.
References:
[1] J. Peeck. Enhancing graphic-effects in instructional texts: Influencing
learning activities. In W. Schnotz and R. W. Kulhavy, eds., Advances
in Psychology, vol. 108 of Comprehension of Graphics, pp. 291–301.
North-Holland, 1994. doi: 10.1016/S0166-4115(09)60121-7
[2] R. C. Clark and R. E. Mayer. E-learning and the science of instruction:
Proven guidelines for consumers and designers of multimedia learning.
John Wiley & Sons, 2016. 5, 6
Description: Add short videos to the onboarding system.
Effect: Videos can demonstrate the interaction with a visualization
clearly and coherently.
Upside: Text can only abstractly describe concrete interaction processes.
This is sometimes difficult to understand. Videos can show how
things can be done in a realistic context and great detail. Videos can
also be more motivating than text. Deriving information from videos is
also a well-known process because of the wide adoption of YouTube
videos.
Downside: Videos can be redundant and provide too much unnecessary
information. Videos have a pre-determined pace, the images are
transitory, and important aspects are often not highlighted. In addition,
some users prefer textual descriptions.
Issues: Integrating videos into the visualization system is difficult.
Nevertheless, short videos can be integrated into the visualization if
designed carefully. Another disadvantage is that users cannot explore
interaction possibilities in the VA system while watching the video.
Theory: Videos have been used for a long time in distance education
[1]. A multimedia principle is a theoretical approach explaining
the advantages of learning with videos [2, 3]. This principle states
that people learn better from text and pictures than from pictures alone.
The term “picture” has to be understood in a very broad sense, also
encompassing animations and videos. The multimedia principle is,
among others, based on the assumption that two different channels are
processing visual and auditory information. Presenting information in
both modalities is more efficient because this increases the processing
speed and retention of this information. Clark and Mayer [2] present
empirical evidence that learning from animations and videos is more
efficient than from text alone. Issing and Klimsa [4] also discuss
the advantages and disadvantages of videos. The advantages are the
realistic representation in videos and the high density of information.
Disadvantages might be possible redundancy and the linear way information
is presented. More recently, the usage of YouTube videos
has been investigated. Again, there is mainly evidence indicating the
videos have an advantageous effect on learning [5, 6].
References:
[1] O. Peters. Learning and teaching in distance education: Pedagogical
analyses and interpretations in an international perspective. Psychology
Press, 2001.
[2] R. C. Clark and R. E. Mayer. E-learning and the science of instruction:
Proven guidelines for consumers and designers of multimedia learning.
John Wiley & Sons, 2016.
[3] R. E.Mayer. The Cambridge handbook of multimedia learning. Cambridge
university press, 2005.
[4] L. J. Issing and P. Klimsa. Informationen und Lernen mit Multimedia und
Internet. Weinheim, 2002.
[5] S. Kohler and T. C. Dietrich. Potentials and limitations of educational
videos on youtube for science communication. Frontiers in Communication,
6, 2021.
[6] E. T. Maziriri, P. Gapa, and T. Chuchu. Student perceptions towards the use
of youtube as an educational tool for learning and tutorials. International
Journal of Instruction, 13(2):119–138, 2020.
Description: Support users with floating text boxes, including onboarding
messages (textual explanations) with in-place annotation anchor
in the visualization, which the user can interact with. The in-place
annotation anchors, e.g., numbers and symbols, indicate the connection
between the onboarding instructions and visual encoding. The floating
text boxes should be positioned close to the in-place annotation anchor
to follow the principles of Gestalt psychology of Proximity [1]. In
contrast, it is vital to allow the users to relocate them by drag&drop
not to cover essential visualization elements. The onboarding concept
can provide a guided (step-by-step) or self-exploratory experience
for the users by using numbers and symbols or just symbols to show
the connection between the onboarding instruction and the visual
encoding (see related design action DA6). The text boxes and in-place
annotation anchors can be assigned to the structure of reading the chart,
interacting with the chart, and analyzing the chart presented in design
action DA2.
Effect: The in-place annotation anchors provide context-sensitive and
to-the-point instructions to the specific element in the visualization,
e.g., legend, x-axis, or a particular artifact in the data. It makes it easier
to absorb information.
Upside: The onboarding concept is easy to integrate into a VA tool
as it is not space-filling. The in-place annotation anchors provide
to-the-point descriptions and can be easily accessed by the user. The
floating text boxes stand out from the rest of the user interface.
Downside: Due to the number of different elements, the visualization
interface could be cluttered and overwhelm the user. The separation
of onboarding instructions in text boxes, presenting small chunks
of information, can mentally increase users’ cognitive load by the
need to integrate multiple sources of information [2]. Instructional
split-attention could occur when users have to split their attention
between the different floating text boxes to gather all information
essential for understanding.
Issues: The positioning of the onboarding concept elements, such
as the floating text boxes and anchors, must be done correctly. The
mental model of the users and the prior knowledge should be taken
into account. The text boxes can consist of a headline, the instructional
text, and essential words in the explanation can be highlighted visually.
Theory: Visualization onboarding that uses floating text boxes and
in-place annotation anchors provided to-the-point descriptions, which
make it easier to absorb information [1]. Likewise, the understanding
of introductions is enabled by interactive and linked descriptions of
the visualizations. The text boxes present small information units
that support learning (microlearning) [3]. Scaffolding [4] is a key
feature and part of constructivist learning, which can be applied in
visualization onboarding by using text boxes and in-place annotation
anchors. Scaffolding in visualization onboarding continually adjusts
the level of help to the learner’s performance by giving hints and
cues and providing textual instructions to different elements of the
visualization along the structure: reading, interacting, and analyzing
described in design action DA2.
References
[1] J. Wagemans, J. Feldman, S. Gepshtein, R. Kimchi, J. R. Pomerantz, P. A.
van der Helm, and C. van Leeuwen. A century of Gestalt psychology in
visual perception: II. Conceptual and theoretical foundations. Psychological
Bulletin, 138:1218–1252, 2012. Place: US Publisher: American
Psychological Association. doi: 10.1037/a0029334
[2] P. Ayres and J. Sweller. The Split-Attention Principle in Multimedia
Learning, p. 135–146. Cambridge Handbooks in Psychology. Cambridge
University Press, 2005. doi: 10.1017/CBO9780511816819.009
[3] T. Hug and N. Friesen. Outline of a microlearning agenda. eLearning
Papers, 16(16), 2009.
[4] D. Holton and D. Clarke. Scaffolding and metacognition. International
Journal of Mathematical Education in Science and Technology, 37(2):127–
143, 2006. doi: 10.1080/00207390500285818
Description: The onboarding concept should be designed so that
users can be both (1) guided (step-by-step) through the different
onboarding messages and (2) self-explore it and seek help at any stage
of their interpretation and interaction with the visualization. A guided
(step-wise) instruction can be implemented using numbers and symbols
instead of a “tour” with predefined steps. The user can gradually follow
the numbers to be guided through the different onboarding messages.
Users preferring to self-explore the onboarding instructions can open
any onboarding messages individually at any exploration stage.
Effect: Users’ preferences in terms of learning can be taken into
account by providing both concepts.
Upside: First-time users, for example, can use the guided approach
by getting an idea of the visualizations and the provided onboarding
instructions. At the same time, a more experienced user can access
onboarding instructions individually to their knowledge gap. As a
martini glass structure [1], onboarding instructions can be designed to
explore freely and then provide a guided way through the onboarding
instructions to support first-time users, for example.
Downside: Covering both ways (self-exploratory and guided) could be
challenging for the visualization designer as it requires more interaction
possibilities with the onboarding concept, which has to be considered
when designing visualization interfaces. Besides, there is the risk of
not building a coherent mental model [2] with the self-exploratory
approach, as users can browse the onboarding messages according to
their knowledge gap and interest.
Issues: This design action relates to DA2 and DA4.
Theory: Both concepts refer to constructivism and cognitivism
learning theories. Constructivist theories are the most appropriate for
explaining learning processes with onboarding systems because they
reflect on the application of learning in a practical context [3]. The
self-exploratory approach can be assigned to constructivism, as users
can freely explore onboarding messages and build their understanding.
Cognitivism is a learning philosophy founded on the premise that
learning can be modeled as a kind of information processing [4].
Teachers are experts who provide knowledge and guide them in
developing their cognitive abilities. This can be applied to the guided
visualization onboarding, where the in-place annotation anchors with
numbers guide the user through the onboarding messages.
References
[1] E. Segel and J. Heer. Narrative visualization: Telling stories with data.
IEEE Transactions on Visualization and Computer Graphics, 16(6):1139–
1148, 2010. doi: 10.1109/TVCG.2010.179
[2] J. L. G. Braasch, J.-F. Rouet, N. Vibert, and M. A. Britt. Readers’ use
of source information in text comprehension. Memory & Cognition,
40(3):450–465, 2012. doi: 10.3758/s13421-011-0160-6
[3] T. M. Duffy, J. Lowyck, and D. H. Jonassen, eds. Designing Environments
for Constructive Learning. Nato ASI Subseries F:. Springer-Verlag, 1993.
[4] P. A. Ertmer and T. J. Newby. Behaviorism, cognitivism, constructivism:
Comparing critical features from an instructional design perspective. Performance
Improvement Quarterly, 26(2):43–71, 2013. doi: 10.1002/piq.21143
Description: The onboarding concept should allow users to hide
and show onboarding instructions to support on-demand help. This
can be realized with an activation element to access the onboarding
instructions on demand. Users should be able to interact with the
whole visualization interface when onboarding is activated.
Effect: Users can explore the data and open the onboarding when they
need help (“pull” model [1]). This way, they are flexible and not
restricted to using it when there is no need.
Upside: As there are different knowledge gaps among users, this
concept can support self-explanatory experiences and give more
freedom to the user.
Downside: First-time users of an interface may need help finding
the onboarding instructions or need to be made aware that any are
available. A pull-based system requires the user to request assistance if
needed actively.
Issues: The positioning of the onboarding activation element is
essential. It needs to meet the users’ mental model, and the design
needs enough affordance if it is not activated. One possible solution
is to open some onboarding instructions for first-time users to clarify
that instructions are available. A floating action button [2] (Material
Design Pattern) can be integrated as an activation element.
Theory: This follows the principles of the “pull” model, where a user
explicitly asks for help [1] by activating the onboarding messages if
needed.
References:
[1] E. Horvitz. Principles of mixed-initiative user interfaces. In Proceedings
of the SIGCHI Conference on Human Factors in Computing Systems, CHI
’99, p. 159–166. Association for Computing Machinery, New York, NY,
USA, 1999. doi: 10.1145/302979.303030
[2] Buttons: floating action button. https://material.io/components/
buttons-floating-action-button, 2022. Accessed: 2022-10-18. 5
Description: Onboarding instructions should be integrated (in-situ)
into the visualization to allow users to access onboarding while exploring
the data. As described in the design action DA4, floating text
boxes with onboarding messages and in-place annotation anchors can
integrate onboarding in a VA tool. At any point in the exploration
(while using the VA tool), the user can activate onboarding instructions
and get explanations to the point.
Effect: By providing in-situ onboarding, users do not have to switch
back and forth between the VA tool and instructional material.
Upside: In-situ onboarding instructions integrated into the VA tool
provides to-the-point explanations, which are easier for users to absorb
information than external instructions on a website, for example. The
onboarding messages are directly integrated into the interface, reducing
the need to switch back and forth between the visualization and a
separate tutorial or help section. In-situ onboarding instructions can
reduce cognitive load for users. The onboarding instructions can be
positioned near the element that needs to be explained. It supports the
connection between textual explanation and visual encoding.
Downside: The additional visual elements of the integrated onboarding
could overwhelm users.
Issues: When onboarding, the positioning of elements must be considered.
Visualization onboarding should be designed parallel to the
visualization interface to make positioning onboarding elements easier.
Also, onboarding should reflect the design language of the underlying
visualization tool, such as the same color and icons and color design.
Theory: Integrating onboarding and using the underlying design language
can reduce the extraneous cognitive load [1] in translating
instructions to the current interface state. Split-attention [2] risk can
be reduced as the onboarding instructions are integrated into the user
interface of the VA tool and the switching between the VA tool and
instructions is omitted.
References:
[1] P. Chandler and J. Sweller. Cognitive load theory and the format of
instruction. Cognition and Instruction, 8(4):293–332, 1991. doi: 10.
1207/s1532690xci0804_2
[2] P. Ayres and J. Sweller. The Split-Attention Principle in Multimedia
Learning, p. 135–146. Cambridge Handbooks in Psychology. Cambridge
University Press, 2005. doi: 10.1017/CBO9780511816819.009