Discover how to present data to build an immersive experience
The times we live in change the way we all function, the steps we took yesterday, the efforts we brought to an end last month, the time we spent messaging our friends – we can all feel the way data affects our everyday lives. Without a doubt, it is exciting when you can gain some insight on normal stuff, like on a walk or a run, which are things we started doing long before such data become available to us. The question is, do we really understand what this data means?
Data is a big part of the business we’re in. Whether you have a story to tell or complex data sets to compare or you are building an immersive experience for your app – the way data is presented is crucial for understanding and uncovering deeper conclusions.
We’d like to share a bit of what we’ve learned about data visualization based on our experience and our approach to specific problems that occurred in between.
Design for a specific audience
First, you need to ask yourself: Who am I designing the visualization for? The answer to this question will help you avoid the mistakes which could impact the entire project. It may sound very serious…and in fact, it is.
Defining a priority persona can help you aim better with the communication layer, visual representation, colors, and other aspects of the project you’re about to start. In fact, it is a standard process when it comes to UX design – you can read more about it in our “What is UX design and how the design process looks like?” blog post
Tell the story, not just show it.
Yes, we’re talking about natural language interfaces. At some point, this might not be accessible for everyone unless you have a team of data specialists under the roof. You might also start asking yourself – what are the potential benefits of such systems? One of the biggest is reducing the entry threshold to data analysis.
Also, they allow you to build immersive experience and a gamification method you may find in fitness activity apps and in the case of financial apps they may tell you where to cut the expenses. Provide the context – it engenders trust, which leads to action.
“Match between system and the real world”
One of the usability heuristics for UID tells us to break the wall between the system and our natural way of communication by making the system speak the human language as much as possible.
Make adjustments based on where the data will be shown
Whenever you have a data table or a chart, you should always know where this data will finally land. As I mentioned earlier, building a user persona in the beginning will help you establish that.
When the methods of consuming data differ, there are many similar areas that could be re-used across different platforms like font types and colors but it’s not as easy as it sounds. You must constantly monitor the scale, font size, and contrast to adjust the design to the device. Charts are a different story; the width of the mobile screen can really limit the visibility of information.
Isn’t it a designer’s general task? That’s what designers do, right? We magically reduce the clutter and make complicated simple again. When it comes to data visualization, the problem may seem trivial but in fact, it’s bigger if we take a holistic view.
Imagine 32 variables in the pie chart on the mobile screen, date control, annotations, labels, axis names, toggle brushes and on top of that various types of charts. All that makes me (and I can take a lot) feel a bit dizzy. How to make such an interface open to facilitate exploration? How to make it usable?
This request could be handled in different ways e.g. by clicking and toggling things on the canvas or by natural languages where you just type, “show me iPhone sales within the last 17 days”. It all depends on who we are providing the data for.
Ask, prioritize content, and highlight.
Reducing the number of features or ignoring complex cases is not an option. Without pointing at an example, we can imagine how problematic it can become. Therefore, define your targeted group, which questions they’re trying to find the answer for and figure out what data they are playing with. When you find the solution simply observe and adjust. Some people may need straightforward information like “you haven’t met your daily move goal”, others may want a chart comparing all weekdays.
Choose the right tools
Is a chart the best way to represent the data? Sometimes you don’t need charts and even a table can feel like overkill. Sometimes it’s enough to show the user numbers to make data easily absorbable.
If you’re sure about the chart, now it’s a good moment to ask yourself- which one? While line charts are good for comparison of different categories, pie charts work great to showcase composition. There are ways to show relationship and distribution using the same scatter chart.
To present the data you can use four basic data presentation types:
- Bar Chart
- Column Chart
- Pie Chart
- Waterfall Chart
- 3D Area Chart
- Line Histogram
- Bubble Chart
- Scatter Chart
To ascertain which chart is best for each type listed above, you should know first:
- How many variables you want to show
- How many data points you will display for each variable
- How you want to present values over a period of time, or among other values or data set
I encourage you to check Dr. Andrew Abela post, which is the key to determine the right way to present your data. Also, Data visualization catalog could help you explore a variety of different forms of data.
Devil is in the detail
Keeping the entire ecosystem easily digestible requires lots of work. Some of it relates to data itself, some to everything around like consistent vocabulary, the way system behaves and responds, the relevance of information or simply aesthetics. There are a couple of important aspects that can help you kick off with things faster.
Fonts and typesetting are a complex subject just like matching colors. Wrong fonts can make design look cheap and clunky. That’s why there are fonts specifically designed to support data visualization projects. Tabular figures are all built on the same horizontal measure, ensuring that columns of characters align correctly and keep equal widths across a range of weights. There are plenty of different families and a lot of types such as sans-serif, sans serif, gothic, or simply monotypes supporting this characteristic.
You can find more about the difference between tabular and proportional fonts in the Matthew Ström article, which describes how to build better data tables.
Why is color so important? There are a couple of reasons:
- They may express the emotional context of data
- They can set the user’s mood
- They draw the user’s attention
Graph colors can be represented by different color options like solid colors and gradients. Each can be used for different types of data.
- Gradients – to show continuous data (like progress)
- Solid colors – to show statistics and finite data sets
The problem is so wide that we could write the entire blog post about colors in this specific aspect. One of the best tools to support you in this process is “color picker for data”,or if you’re a bit more technical and you like prototyping in the browser, check out chroma.js You can also jump into details to learn how to play with colors to always choose the right palette. Remember, try to avoid using randomly generated colors.
Colors for graphs and charts are one thing, colors for axes, labeling, tables, and tooltips are another. All these things are well-connected and work together as a visual language. Keep in mind to create enough of contrast between the colors so that elements are easily visible, explorable and distinguished by the users.
Whitespace (Despite Its Name, In Goes Is Any Color)
Give your data some space to breathe. Whitespace is the space between all the elements like labels, buttons, cells, icons, etc. It depends on the ratio and proportions of each surrounding element, and it’s determined by the density of micro white space and its relation with macro white space.
Whitespace lets elements stand out from the layout that holds them together in place. This technique plays an important role in improving the general user experience by balancing visual elements, and by improving the communication layer. If you are interested in more details, this article is highly recommended.
Links to amazing stuff for anyone who has just started working with data:
Building the entire product which serves all types of data can be really challenging. Whatever tools you are using, remember to start with a pen and paper – it will allow you to wade through the clutter of information and to rearrange things easily.
When you are sure about your initial approach to the problem, start exploring, and prepare yourself for tough decisions when designing for a mobile experience – wide resolutions can be very hard to approach, especially on the mobile web environment.
Last but not least, adjust. If you feel like something just isn’t right and you need to break the rules, do it. “A smooth sea never made a skilled sailor” Roosevelt once said. Once you’re done, test your designs with a targeted group in their working environment and iterate. By slowly going through, you will realize that each product is different, and even the best UI kit can’t solve anything without a product designer, thoughtful process and interviews with targeted groups.
As designers working around data, we are responsible for using our best judgment to build immersing experience. Always support your work with solid research and remember to tailor data precisely to the aimed audience.