TL;DR: I created the Toggle Heading pattern make complicated grids more awesome. Use it in your designs! Tell me how you made it better!
I’ve been spending a lot of time thinking about spreadsheets, particularly how to make manipulating complex grids easy for mere mortals. In ClickTime 7.2, I replace my original Resource Planning grid pivot table controls with something awesome I’m calling the Toggle Heading Design Pattern. In this blog post I’m going to outline some of the challenges facing spreadsheet interfaces, how these lead to my original pivot table design, and how those shortcomings are addressed by Toggle Headings. Basically, if you like spreadsheets, or are about to design something that involves a spreadsheet, this blog post is for you.
Why Pivot Tables Make Life Hard
Pivot tables are spreadsheets on steroids, and while they’re stupendously useful, they’re pretty hard to use due to the inherent space constraints of a spreadsheet and the amount of stuff you can do with them.
In a regular spreadsheet you sort in one dimension (generally on rows) and you edit cells manually. In a pivot table you can sort in two dimensions (rows & columns), change the data represented by rows and columns, and automatically compute cell contents. Essentially a pivot table’s row headings represent one spreadsheet, column headings represent another spreadsheet, and the cells represent some calculation based on the intersection of the two spreadsheets (Learn More: Wikipedia on Pivot Tables, Excel PivotTable Reports 101).
Where manipulating a spreadsheet is relatively familiar and learnable (look at the column heading to understand the content, click the column heading to apply a sort, click on a cell to change the content, all the content is visible) the versatility of pivot tables (change rows, sort rows, change columns, sort columns, change computations, all on data that may or may not be visible) is a serious design challenge. Do you make all the controls obvious and eat into the screen space available for content? Do you maximize content space and make the controls hard to discover? Do you do something else?
Most pivot table controls (including the original Resource Planning design) assume that pivot tables are an expert features and prioritize content over controls. The resulting designs generally look like the compound menu below.
Compound Menu Pivot Table Controls
How It Works
People (and their related data) are shown across the top in the column headings.
The top-right menu allows you to change what related data is shown and the column sort.
Projects (and their related data) are shown down the left in the row headings.
The bottom-left menu allows you to change what related data is shown and the row sort.
Row and column controls are close to their content. It’s relatively easy to associate them together.
The compound menu options are pretty clear once you have them open.
The compound menu label explains what related data is currently being shown.
The interface works well with touch and mousing.
There’s not enough space to clearly label the row and column sorts in the menus, so they’re not explained at all. You have to open the compound menus to figure out what sorts are applied.
The column content labels are not obvious. Can you tell what the what the little grey values are above people’s names in the column headings are? How about the percentages above that?
There’s a lot of dead space in the top, left hand corner of the grid (where “client”, “project”, “budget” are labeled), and an entire row of dead space where the column compound menu appears.
Our testing showed that though people can learn to use this interface, they have a hard time understanding at first glance.
The Toggle Heading Pattern
The toggle headings pattern address most of the shortcomings of my original design and take the pivot table controls from serviceable to good. Sorting and changing related data has been split, space use has been improved, and a few subtle visual effects have been added to make everything pretty and easy to understand. Check it out below:
How It Works
The row and column heading controls are layered. You hover over the visible area of the background heading controls to bring it to the foreground. Once the controls are in the foreground they can be manipulated.
Click on a label in the heading controls to sort on that data. Simple!
Click the triple line icon to open up a menu that lets you change row or column related data.
The heading labels reflect the structure of the row and column heading content, making it easier to identify what each piece of data is.
The row and column sorts are easily identified by orange arrow icons.
The interaction of clicking a label to apply a sort is much more obvious than doing it through a compound menu.
Several effects reinforce the toggle interaction and bring focus to the controls in the foreground. The background heading controls are semi-transparent. A border is extended from the foreground controls across the content it will affect. An elliptical shadow separates the toggle controls from the rest of the headings.
When the column toggle heading is in the foreground, the project's related data label is shifted left so that it’s still visible.
Room For Improvement
The targets for triggering sorts and opening the related data menus are relatively small and hard to hit with on a touch screen.
The three line icon isn’t the most obvious metaphor for a menu.
The foreground heading obscures some of the background control’s labels.
A Final Note
Toggle headings are the result of the hard work of the entire ClickTime team. You should check us out, we’re doing awesome things.
I hope this toggle heading design pattern can directly applicable to one of your projects, or will inspire you to design something even more awesome. If you have any ideas about improving the toggle headings, please share them. I’d love to hear from you.