The chartbeat dashboard recently underwent its first major revision since launching a year ago. In this post, betaworks’ User Experience lead Neil Wehrle will share some of the process and design decisions that got us here.
The team has a strong vision for chartbeat, and to bolster our vision I led some quick-and-clean research into how current and prospective users view chartbeat. Our plan included heuristic evaluation, in-person usability reviews, and group-based cognitive walkthroughs, all to provide insight and momentum. The team arrived at a set of first principles to guide development, and we quickly settled in an iterative design-build-test cycle, where the fidelity of each step evolved as we built out the site. I’ve highlighted some of the core principles and selected design decisions below:
Structure the site around user goals
chartbeat is a tool for front-line workers, not just internal analytics teams. We designed the layout around a set of use cases, so users could walk through the data in a logical fashion, understand causality, and take action. The triad of panels at top allows users to understand “how many people, how did they get here, and what are they looking at?” in a snap. We also heard our users love the kinetic nature of chartbeat, so we extended that a bit with a Matrix-like stream of raw hits in the right-most column.
Data should be appropriately dense, clear and actionable
Data should be rich and deep, without compromising ease of use and clarity. As an example, the tree map in v.1 was challenging for users – they liked the intent, but it was difficult to interpret. Sites with extremely low or high traffic or with few pages skewed the chart so that it was impossible to analyze. We decided to use a small range of fixed sizes, ensuring the display of most pages, and using dots to represent visitors. Larger numbers and page titles increase legibility, while isolating the page modules with white space makes it easier to read them as units. We also standardized and gave meaning to the range of colors we used, so users can more associate meaning across the panels.
Everything should be on a single page
A key interaction design challenge chartbeat faces is letting users drill into richer data whithout resorting to traditional hierarchical navigation schemes. We came up with the notion of “pivoting” around a selected data element, where the entire page changes to reflect just that element. This way, chartbeat can serve as a site-level analysis tool and easily shift to isolate a page with a single click.
Use historical data as context, but keep it a real-time tool
Users love the real-time aspect of chartbeat data, but a unanimous request is to provide some context to what they’re viewing. Some amount of historical data was in the previous version, hidden behind a tab at the top of the page. Hidden, too, was a powerful replay feature that lets users isolate events and walk through it (“Tivo for your website” as Tony likes to say). By bringing the replay to the fore, we signaled to users that historical data is available by showing a trend chart. When users pivot on data, we also show a thin historical chart that can be expanded for more detail.
We’ve been doing some followup visits with users to understand their long-term usage and how it is fitting into workflows. One big finding has been that the clarity of the data brought many new features to the foreground for users, giving them new reasons to use chartbeat. We hope that our customers have enjoyed this revision and let us know what we can do to keep improving it.