May 21, 2019 Data Visualization Guide for UI/UX Designers

In the current era of Big Data, understanding how to visualize data is an important part of the skills for a UI / UX Designer. Today almost all companies need good data visualization to be used as a reference to determine the business direction and make decisions. The better the results of the visualization of the data created, the more appropriate the decisions made by the user will be.

1. Types of Data Visualization.

Before discussing more data visualization, it’s good to first discuss some types of data visualization that are often used to create application interfaces.

a. Bar Charts

Bar charts are one of the most popular methods for visualizing data. Bar charts organize data into rectangular bars that make it easy to compare related data sets. You can use a bar chart for the following conditions :

• Compare two or more values in the same category
• Make users understand how multiple similar data sets relate to each other

b.  Maps

To display information about geographic data distribution, the use of maps is a very appropriate choice. You can use maps for the following conditions :

• Display customer data that refers to specific locations
• Make your customer look at data points near them
• Shows a clear geographic distribution of customer data

c. Line Charts

Line charts are commonly used to help users scan information and understand trends by visualizing data in a concise and accurate chart line format. You can use line charts for the following conditions :

• make the user understand the trends, patterns, and fluctuations in your data
• allows users to compare different data sets but are related to several series

d. Scatterplots

Scatterplots are a two-dimensional data visualization that use dots to represent the values obtained for two different variables – one plotted along the x-axis and the other plotted along the y-axis. You can use scatterplots for the following conditions :

• To build an interactive report
• To display compact data visualization

e. Pie Charts

The pie chart is a circular graph that is broken down into segments (i.e slices of pie). These segments represent each category’s contribution to display parts of a whole.

You can use pie charts for the following conditions :

• To work out the composition of something
• To rapidly scan metrics

f. Gauges

A gauge is typically used to visualize single-valued metrics, such as the total revenue for the year-to-date. In other words, a gauge displays one or more measures from a single row and is not designed to display multiple rows of data.

You can use gauges for the following conditions:

• To track single metrics that have a clear, in the moment objective
• The data you want to display does not need to be compared to other data sets

g. Table

The table is a type of visualization showing your data in columns and rows, which is good for publishing.

You can use the table for the following conditions :

• To display two-dimensional data sets that can be organized categorically
• To drill-down to break up large data sets with a natural drill-down path

2. Analysis of Your Audience Target.

After learning the types of visualization, then we must do the planning. A little planning ahead will save us time in developing forms of data visualization on the application interface or dashboard that we make. Audiences who will read the data must be your main consideration. Charts designed for a group of field officers and drivers will not be suitable for a group of company managers, and vice versa. Write down who will be the audience for the interface you are building then discuss with your team what improvements you want to target for your audience. The steps are as follows.

a. Describe the Numeration Level of the Audience

Note whether the audience that will use your design is used to reading statistics or not. Designing a simpler display will make it easier for lay people to read data. But for managerial data, you can design a more complex display because of their ability to read better data.

b. Describe the Level of Data Visualization for Your Audience

When designing data for people who are unfamiliar with graphic displays, use traditional graphics such as pie charts, bar charts, and line diagrams – otherwise, they will spend more time discussing the novelty of the graph rather than paying attention to the information contained in the chart.

c. Describe the Time Your Audience Uses

Simple graphs will greatly help officers working in the field make decisions faster compared to a slightly more complicated graph that analysts use to predict business decisions.

d. Describe What Decisions Your Audience Will Make.

Describe what information they need to compare with what information they already have and what they expect.  The visualization you make can help convince them of which decisions to make.

3. Sketch Your Visualization on Paper.

It’s time to start the design process. Now please open the dataset that you already have and make it on paper. This is very important rather than directly designing it on computer software because it will save time and the variations made will be more creative. Make as many concepts as possible and discuss with your colleagues so that the right and appropriate models are found and will continue to the editing stage using computer software.

4. Optimize the Use of Colors

Your visualization will look great if you use good colors. However, if you use bad colors, they can distract the reader. Here are the things that you should consider when using colors.

a. Use one color to represent the same data type.

If you describe the sales per month on a bar chart, use one color. But if you compare last year’s sales with this year’s sales in a grouped chart, you must use different colors for each year. You can also use accent colors to highlight significant data points.

b. Be careful with positive and negative numbers.

Don’t use red for positive numbers or green for negative numbers. The color association is so strong that it will automatically reverse the meaning in the minds of viewers.

c. Make sure there is sufficient contrast between colors.

If the colors are too similar (light gray vs. bright, light gray), it may be difficult to distinguish them. Instead, use high contrast color combinations like red/green or blue/yellow.

d. Avoid patterns.

Lines and spots sound pleasant but can be very annoying. If you try to distinguish, say, on a map, use different saturations of the same color. On that note, only use solid colored lines (not dotted lines).

e. Choose the right color.

Some colors stand out more than others, giving unnecessary weight to that data. Instead, use one color with variations in color or spectrum between two analog colors to show intensity. Remember to intuitively give the color intensity code according to the value too. don’t use more than 6 colors in one layout.

5. Make Good and Optimal Text Settings

a. Specify the right title for your UI Visualization display.

Prepare the right words to be the title of your visualization. There is no need to use words that are too long, you just need to pay attention that the title created directs the concentration of the user in the Visualization UI created.

b. Use the appropriate branding font.

Make sure your font visualization matches the project or company branding. It will be easier if used again in another company’s project display.

c. Don’t forget to make a statement.

Describing the top and bottom of charts and graphs can ensure that readers understand the chart message instantly. Use short, accurate sentences that do not interfere with the dominance of the graphics made.

d. Setting the text hierarchy

Your font size is in accordance with its interests. The text hierarchy tells your viewers which information is the most important (post) and which information is the least important (regular paragraph).

e. Measuring text readability

Note the use of size, combination of text and media where the visualization display will be applied. Don’t hesitate to use various tools to see the level of readability of the text in the visualization display that you created.

6. Test & Get Feedback

After finishing designing the visualization that you created, the next step is to do a test. Give a draft of your chart to other people or significant colleagues or people who belong to the persona of the user you are aiming for. Ask, “What is the main message in this chart?” If they are in doubt for more than a few seconds, or if their story is not in harmony with the story you are referring to, do not hesitate to take notes and improve the look you make. Perform a test continuously until you find the right formula according to the purpose of the Visualization UI that you created.

The ability to visualize data well is one skill that can be used on any design instrument. Therefore it is used to build the foundation of thinking and storytelling capabilities using data. Do as much exploration as possible because the expertise that you develop can be used for your lifetime. And don’t forget that Topcoders often make data visualization design competitions. So let’s improve our data visualization skills and see you at the contest forum.