Michael Hellen > Data Guide Improvements


Background

Tableau is a data visualization platform that allows authors to create rich, interactive dashboards so that viewers can consume the data in a visual format. The intentions of the Data Guide are two fold - orient the viewer to the underlying data supporting the visualization, and provide insights into the data that may be useful to the viewer.

Current Design


Problem statement

Soon after the Data Guide was released it became apparent that it served two very different user types - the more experienced viewer who wants to understand the background info, and the less experienced viewer who could use more assistance to uncover important information in the visualization. A number of problems were identified that hinder the user experience.

Problem #1 - Busy content

Putting this much unrelated content in a single column view made it challenging to parse the information. An accordion-style menu was used to reduce the density and sections were open/closed by default depending on the user type and how they entered the Data Guide, but these rules were confusing and unpredictable.

Problem #2 - Entry point

The Data Guide is open by default when the user first opens a visualization. When the user clicked the close button in the top right of the right pane they found it difficult to understand how to open it again, since the button in the toolbar isn’t placed in relationship to the right pane.

Problem #3 - Right pane framework

As these issues with the Data Guide began to surface it also became apparent that there were other UI challenges with the toolbar and framework that could improve, not only the Data Guide, but also other features that use the right pane to surface content.

Problem #4 - Content categories

Although this problem has less to do with the Data Guide, I was also able to identify issues with how features were grouped and how they were surfaced in the interface. For example, Metrics is very similar to the insights from the Data Guide. Data Details contains duplicate information to the Data Guide. Authoring mode (which I will mention now but will not cover in this design solution) contains more features that could be contained in a right pane but each have their own solution.

Design considerations

  • Identify ways to reduce the clutter in the Data Guide, particularly for the two use cases - orient the user to underlying information for the visualization, and provide insights about the visualization.

  • Improve the entry point into the Data Guide so that it is clearer that it’s associated with the right pane.

  • Define a framework for the right pane, as well as how the toolbar is affected by these changes.

  • Consider combining similar features into a single feature, which could declutter the toolbar.

  • Update visual design so that different parts of the interface appear related, rather than designed in siloes.


The plan

Although this seems out of scope, I decided to tackle improvements to the right pane and toolbar framework, along with the Data Guide. In this case one of the driving factors to the issues is from the root level. I believe the system needs to be improved to better serve the features in the system. So, I went ahead and broke these down into three steps - define the framework, define the content categories, and define the content.


The framework

First, I established a couple tenets to help guide our approach to defining the right pane framework.

Scalable... to a degree

The right pane framework should be able to scale to accommodate the growth of content but also provide guardrails to help keep growth under control.

Consistent and predictable

The right pane framework should allow the user the ability to interact with and find content without relying on poking and prodding.

I looked at similar products to see how they created a right pane pattern that adhered to these tenets and then created wireframes for a few options to explore.

The first option moved the all the buttons that open a right pane to the right of the toolbar. The second option kept the toolbar as is and used tabs to create focus. The third option that combined the two was preferred as it provided scalability.


The content categories

I then created tenets to help define the content categories. This should help regroup our existing content as well as provide guidelines for future growth.

Focused

Content should be clearly understood and not have distractions from other unrelated content in the same view.

Supplement the dashboard

Content in the right pane is intended to supplement the dashboard and should never become the main focus. The dashboard is always primary and the right pane should only play a supporting role.

Preserve context

Content in the right pane is meant to add value while simultaneously viewing the dashboard.

Data Guide with tabs

This is the easiest approach to implement since it doesn’t need to affect the toolbar as much. A tab can be used to separate the two use cases within the pane.

Data guide with buttons

Changing the toolbar is a more ideal approach since to accommodate improvements to the framework. It allows the different types of users to access features they are most interested in directly from the toolbar. It also allows Data Guide and Insights to be updated on their own schedule.

The Content

Next is just a matter of placing content into these categories. If you are familiar with atomic design systems, this would be the organisms that fit into the template. For the content supporting the data visualizations most of it has already been defined, but now there’s more room for focus and growth.

Since the Data Guide content already exists, I jumped right into creating hifi mockups instead of wireframes. Typically, I prefer to come up with a few options from mild to wild, when it can be applied.

Exploration 1

I started with the mildest design solution. It only involves using tabs to separate the two main use cases in the Data Guide - orient the user about the underlying data supporting the visualization, and provide insights about the visualization. This offers a more focused experience and allows these sections to scale for more information in the future while maintaining the same entry point.

Exploration 2

Taking a step further I explored an option to separate the two use cases into different entry points. The entry points have also been moved to the right of the toolbar to help build context and consistency when opening the right pane. This can also include the Comments feature as well.

Additionally, I took the opportunity to propose improvements to simplify the toolbar. Some of the options have been combined with similar features and the buttons that open right panes are grouped to the right to help build context. The breadcrumb had very low usage and proved to be more confusing so I removed it and now there’s only the title, along with a Back to library option in the top left. The Edit button is only available for authors who have permission to edit so I moved it to a place that won’t interfere with the rest of the interface, particularly since it will be hidden for most users.

Exploration 3

This is concept is the most “wild” out of the three explorations. The title and buttons associated with altering the visualization are set into the view to give it a more immersive experience. Based on user feedback the tabs are used by very few users so I moved them to the bottom of the screen. This not only removes a minimally used feature from prime location in the interface, but it also ties in the content to the toolbar more effectively. This new vertical bar for the tabs also has room for the Share, Download, and Fullscreen options.

With the immersive treatment of the title, buttons, and the right pane, they can now take on the color scheme of the visualization.