DESIGNING DATA VISUALIZATION

Data visualization has existed since long before computers were available. Maps and charts have been useful to us for a long time before the modern data visualization discipline evolved.

The amount of data being collected is growing at an amazing rate. This data is only helpful if it is in a format that is easy to digest. The work of presenting data in the right way is more important than ever.

The UX Design process is exactly what we need to tackle this problem. We need to find out what people need to see and design the best way for them to see it.

Data Visualization Design: About

The process of creating a data visualization starts with understanding the requirements and user needs. This is the same way we start to design a new UX.

We use our tools and methods to help us organize thoughts. We conduct user research to understand what people need from the data.

Data Visualization Design: Welcome

Very rough ideas are sketched out on paper or electronically. The sketches represent basic ideas or concepts to help brainstorm different ways of conveying information.

These simple examples illustrate concepts of gauges, progress bars, "thermometer" progress indicators, and warning signs.

The goal for this effort was to find a model that worked to convey information regarding project status based on progress and schedule. It is best to find a model that is easy to understand and fits naturally.

Data Visualization Design: About

We explored the best mechanisms to convey the concepts of scheduled tasks and progress of the entire project.

Much of this is naturally similar to a Gantt chart with some variations that required customization of the visuals. Some elements don't fit this model and we needed a way to convey progress and urgency but didn't find an existing model that already did that.

Once the basic requirements and needs are identified we stepped into the tedious task of identifying the situations that users needed to see.

Data Visualization Design: About

The dirty work involved identifying every potential state that can occur. Then determine which states among those are important to the user.

Through user research we started to quantify the levels of severity among these states. In a few cases the system should grab the attention of the user with top priority. In other cases attention was required but with less urgency.

When we clearly laid out the different cases we knew the order of priority but we still needed to design a visual system that matched it.

State 1

State 2

State 4

State 1

Data Visualization Design: About

As we investigated methods of showing progress and urgency we created visual representations of different states then went back to research. The visualizations represented the combination of a handful of different concepts so it was important to understand how people interpreted them.

With printed representations of our visualizations we asked participants to rank them in order of urgency. The results helped us identify where some combinations of visuals represented a different level of urgency than anticipated.

The main problem was separating level of completeness with level of urgency. A project can be hardly done at all but with plenty of time or it can be nearly complete but still be behind schedule. The level of completeness is not related to urgency but a basic progress bar has the effect of correlating the concepts. We needed to design a way to combine the two concepts that people could naturally understand.

Paper Samples

Printed visualizations of progress and severity

Ranked Ordering

Test participants placing visualizations in priority order

Paper Samples

Printed visualizations of progress and severity

Data Visualization Design: About

I identified each of the possible states and worked with my visual design colleague to address the issues we identified from research. The resulting rules were complex and required documentation that showed complete logic with examples of key cases.

This process involved cycles of research and design updates until we arrived at a visualization solution that worked. I focused on the user needs and functional logic and worked with my research colleague and design colleague through many iterations.

In the end we designed new ways to convey information and made it easier for people to see which items needed attention and gain a rough idea of the state of each one at a glance.

The design process enabled us to identify user needs and refine our design. The researcher, visual designer, and I worked together closely and accomplished more than either of us could have done alone.

Data Visualization Design: About

DESIGNING DATA VISUALIZATION

The process of creating a data visualization starts with understanding the requirements and user needs. This is the same way we start to design a new UX.

We use our tools and methods to help us organize thoughts. We conduct user research to understand what people need from the data.

Very rough ideas are sketched out on paper or electronically. The sketches represent basic ideas or concepts to help brainstorm different ways of conveying information.

​

These simple examples illustrate concepts of gauges, progress bars, "thermometer" progress indicators, and warning signs.

​

The goal for this effort was to find a model that worked to convey information regarding project status based on progress and schedule. It is best to find a model that is easy to understand and fits naturally.

We explored the best mechanisms to convey the concepts of scheduled tasks and progress of the entire project.

Much of this is naturally similar to a Gantt chart with some variations that required customization of the visuals. Some elements don't fit this model and we needed a way to convey progress and urgency but didn't find an existing model that already did that.

​

Once the basic requirements and needs are identified we stepped into the tedious task of identifying the situations that users needed to see.

The dirty work involved identifying every potential state that can occur. Then determine which states among those are important to the user.

​

Through user research we started to quantify the levels of severity among these states. In a few cases the system should grab the attention of the user with top priority. In other cases attention was required but with less urgency.

​

When we clearly laid out the different cases we knew the order of priority but we still needed to design a visual system that matched it.

As we investigated methods of showing progress and urgency we created visual representations of different states then went back to research. The visualizations represented the combination of a handful of different concepts so it was important to understand how people interpreted them.

​

With printed representations of our visualizations we asked participants to rank them in order of urgency. The results helped us identify where some combinations of visuals represented a different level of urgency than anticipated.

I identified each of the possible states and worked with my visual design colleague to address the issues we identified from research. The resulting rules were complex and required documentation that showed complete logic with examples of key cases.

​

This process involved cycles of research and design updates until we arrived at a visualization solution that worked. I focused on the user needs and functional logic and worked with my research colleague and design colleague through many iterations.

​

In the end we designed new ways to convey information and made it easier for people to see which items needed attention and gain a rough idea of the state of each one at a glance.

​

The design process enabled us to identify user needs and refine our design. The researcher, visual designer, and I worked together closely and accomplished more than either of us could have done alone.