Interactive AtlasOnboarding

DESCRIPTION
I designed and developed a non-linear, interactive onboarding system tailored to simplify complex data visualizations for novice users. Through extensive research, I created a design space grounded in educational theories and user-centered principles, identifying gaps in existing onboarding methods. My solution emphasizes interactivity, adaptability, and seamless integration into visualization systems, allowing users to explore at their own pace.

The project included designing hi-fi prototypes and implementing a web-based application, using IPCC-Interactive Atlas as case study. This onboarding system not only enhances comprehension and engagement but also addresses practical constraints in design and implementation, bridging the gap between academic research and real-world usability.

Link to IPCC-Interactive Atlas
When
March 2024
type
UI/UX Research and Design
Tools
Figma, Vue
role
Interaction Design, UX Design, UX Research

The onboarding process, which introduces users to new visualizations or systems and supports them in understanding and using them proficiently.

Christian Stoiber
Researcher in Data Visualization

Pain Points

Challenges

The increasing use of interactive visualizations for complex datasets, like those involving climate change, often introduces unfamiliar formats, particularly in terms of representations and data encoding.

Limitations

Basic guides or explanatory text is insufficient for helping users navigate and understand, interactive, complex, and unconventional data visualizations.

Insights

Effective onboarding can enhance users’ abilities to extract meaningful insights fromdata visualizations and make informed decisions based on the presented visual information.

Objective

To develop an onboarding method that improves user comprehension and engagement, making complex visualizations more accessible, using Interactive Atlas as the case study.

Design Space

The design space I developed provides a comprehensive framework for creating effective onboarding systems for complex data visualizations. It is structured around four key dimensions: Linearity, Progression, Interactivity, and Integration. These dimensions define how users navigate the onboarding process. And I put the existing onboarding methods into the design space accordingly then found the niche.

Linearity explores whether the onboarding process follows a strict sequential flow or allows users to navigate through the content flexibly. Progression examines the pace and structure of information delivery, whether presented gradually or offered all at once for immediate exploration. Interactivity focuses on user engagement, enabling exploration and feedback, while Integration ensures the onboarding system is seamlessly embedded into the visualization interface.

This framework serves as a foundation for designing onboarding methods that adapt to user needs, enhance comprehension, and improve overall user experience.

Case Study

The Interactive Atlas presents a sophisticated data visualization method that can be challenging for novice users to interpret. Its visualization combines a hexagonal system representing global regions, with each hexagon subdivided into six triangles that map Climate Change Drivers (CIDs). Users must consult legends to decode these mappings: the left-side legend explains which CID corresponds to each triangle, while the bottom legend clarifies data trends and confidence levels.

This unconventional approach, deviating from familiar visualizations like bar charts or line graphs, creates barriers for users, particularly those unfamiliar with data visualization or climate science. The complexity of decoding multiple layers of information, combined with abstract shapes and mappings, highlights the need for a well-structured onboarding system to guide users through the interface and help them extract meaningful insights from the data.

Design Methodology

My design methodology draws inspiration from educational and design theories to enhance the onboarding process.
I applied Decomposition and Modularity by breaking down the visualization into its fundamental elements and presenting one feature at a time, reducing cognitive overload for users. The top-down structure guided my approach, allowing users to start with an overview of the visualization before exploring finer details. Additionally, insights from active learning theory demonstrated that interactive learning conditions lead to better user comprehension compared to static approaches, reinforcing the value of interactivity in my design. Finally, I prioritized the use of concrete examples to make abstract data concepts more relatable and intuitive.

2 ways of decomposing and presenting the visualization elements

Prototyping

Vue Application

The second way decomposing and presenting the elements has been implemented into the web application developed by Vue.