New Dashboard Toolbar


#1

We are really excited to announce our new and improved dashboard toolbar on the right hand side of all dashboards. This is an improvement and replacement of our old dashboard navigation that placed 3 buttons atop the dashboard in the upper right corner.

We hope you find the new arrangement more useful, intuitive, visually pleasing, and at the same time less distracting from the data at hand. We put a lot of time and thought into this new design, and we thought we’d spend a bit of time describing the choices and improvements made.

Origins

Over the past few years we’ve added an enormous amount of new functionality to Chartio. Back then, it was okay that our Dashboard Toolbar really only allowed for 3 high level options.

Figure 2. Old Dashboard Toolbar

As we’ve added more functionality, we started appending the options to the list in the ellipses “more” menu. As you may have noticed, there eventually got to be a ton of really important functionality hidden in there.

Figure 3. Old dashboard navigation menus

On top of that, we’ve been adding a lot of new visualization elements and have been treating them the same way. The lack of high-level button options also required us to tuck the ‘Add Chart’ button into the menu as well. Adding a chart is the first and arguably most important action on a dashboard and we never liked having to hide that inside a dropdown.

Solution

We set out to update the dashboard with four main requirements in mind:

  1. Give easier access to more options for the dashboards (less in a dropdown)
  2. Improve the design/look of that menu/toolbar
  3. Don’t take away from the dashboard/data focus
  4. Make adding a chart more accessible

Colors

Especially in dashboard design, colors are incredibly important. It was key that we not take focus away from the data which is of dominant importance. We’ve maintained a focused attention on color usage across the entire app, so it wasn’t too hard to get the colors right here. We went with subtle but readable greys with blue highlight on hover and click.

Placement

After several mockups and iterations, we decided that the Dashboard Toolbar would be full height and fixed to the right side of each dashboard. Because we already had a top bar, width was the least expensive screen real estate. An added benefit is that the dashboard’s default state uses the same aspect ration as the full screen version.

Toolbars are typically placed on the top or left hand side of the screen, so our choice to put it on the right was a little different. Ultimately, we want the dominant focus to be on the dashboards themselves, and the toolbar to be easily found but not in the way. People read left to right and top to bottom and only really need to be aware of the toolbar once the data has been assessed. Putting the toolbar on the right ensured that the data is the main focus.

Top Level Options & Groupings

We dug through all of the options available and based on a combination of usage (data driven) and importance (judgement call) we pulled out 11 operations that deserved to have top level access. The 11 operations then naturally split out into 4 main groups:

  • Adding Elements
  • Dashboard Controls
  • Export/Sharing
  • Settings & More

Figure 4. The toolbar in collapsed and expanded modes, with categories marked.

A big thing here is that the Elements menu from the original navigation is completely gone. Adding charts, rules, controls and text to a dashboard is very analogous to adding text, shapes, images, etc to PowerPoint or Keynote presentations. Those applications have their elements available as top level icons and we decided to follow those design conventions. Now all visualization element types are top level items and adding a chart, being the first thing you want to do on a new dashboard, is the top most icon.

Labels vs Icons

One nice thing about our old toolbar was that it used both icons and labels. Unfortunately, we knew if we were going to fit more top level options in, it wasn’t going to make a lot of sense to use the full label for each of them. So we chose intuitive icons, and included an expanded view of the toolbar to optionally show the labels along side.

The first time you see the toolbar, you’ll see it in expanded mode with the label listed with the icon. You can easily collapse the toolbar to just show the icons (recommended mode) with the toggle at the bottom right corner of the page.

Figure 5. Expand and Collapse option for the toolbar.

Permissions

Each dashboard of course has its own access controls, meaning that different users will have different options for each dashboard. All of that is automatically considered in rendering each toolbar. For example, if you are a dashboard viewer, you can refresh the data and download it, but you can’t share it or add new charts. In other words, we automatically hide the toolbar options that are not permitted for a user’s access level.

Figure 6. Dashboard Sidebar for Viewers

Fullscreen

One high-level action we identified was toggling fullscreen (presentation) mode. We had a bit of a different idea for that option however. Inspired by a few of our influences, instead of putting the option in the toolbar, we placed it in the upper right corner of the dashboard.

The placement feels natural there as it is where you might go to physically move it into the full screen by pulling it over the top and side bars.

Contribute

We hope this toolbar enables easier, more intuitive access to more of our dashboard options without distracting from the data. As always, we love to hear your comments and suggestions. We’re iterating at an incredible pace and are always driven by user feedback. Let us know what you think!




Thanks to Tara and Joe for your edits.


December 12, 2015 Release Summary