How to maximize delight in data visualizations

The use of time-space narrative and storybooks in Shopify’s Live View redesign

Many books and articles on data visualizations state that every visual element must have a functional purpose — anything beyond that is too flashy and unnecessary.

I disagree.

Data can be overwhelming. Business owners spend a lot of time exploring their data, digging into their metrics, scrutinizing numbers. It’s an exhausting process. Engaging and delightful data visualizations can help minimize the negative effects and give people a much more enjoyable experience, even if some elements or interaction points add nothing to basic readability and comprehension.

Today, we launched the Shopify Live View redesign that reflects this philosophy. Live View is real-time view of the activity on your Shopify store.

We broke some rules and ignored a few conventions, but as a result, we launched an experience that gets business owners excited about data and gives them a chance to enjoy the journey of their orders across the globe. In today’s remote and data-rich world, it’s imperative that we translate data into human terms and bridge the gap between observing the screen and experiencing real human connections.

With Live View, we explored two key principles that we think help bridge this gap:

• Motion as a time-space narrative
• Motion as a storybook

Motion as a time-space narrative

For years, the role of motion in data visualization design was not well considered, and researchers claimed that motion distracted people and could only carry a limited amount of information. However, new studies now show that motion can actually lead to shorter cognitive workload and folks like Irene de la Torre now write on the subject extensively. Our very own Krystal Campioni gave a great talk at React Summit on the role of motion in data visualizations.

We used motion to illustrate the value of data and all visual encodings in Live View are directly and continuously linked to this value. We approached it in two ways:

• Through a direct data encoding, when the data has intrinsic movements or transformations. In our case, we showcased the real-time journey of orders and evoked the feelings of marketplace buzz and bustle through the shimmer of store visitors on the globe:

• Through an indirect data encoding, when data that is not position or real-time based is mapped as motion. We used this approach to create a visual metaphor for the movement of customers across the online store, transforming static data attributes into animated visual variables:

Motion as a storybook

Motion creates awareness, helps transition between states, provides more information without cluttering the default view or simply provides emphasis and delight. All of these functionalities have the same goal: to guide people through the visualization. Transitions not only provide smooth shifts between views but also make users aware of those changes.

But there’s another great benefit of motion — it tells the story! As designers, we can help people slow down time to highlight important facts or compact the time in fast motion to show long trends.

We decided to include a replay feature in our Live View to give business owners an opportunity to re-experience the most exciting highlights of their day. They can click on these carefully curated storybooks and dive into that moment in time.

In short, motion is an essential part of data visualizations to convey the passage of time, or to transition from one data state to the next. But beyond that, motion in data visualization excites people and keeps them engaged with data! And isn’t that what we — data experience designers — strive for?

Huge thanks to the Insights team and our brilliant designers that made this vision possible. Come join our team if you’re as excited about data, visual design, and pushing the boundaries of visualizations, as we are!