This talk was given by Des Traynor at the MIX 2011 and is a must-see for anybody deciding to implement a dashboard or even designing one. It explains the goals of data visualization and the benefits for the business.
While the original talk is about infographics I named this article Dashboard Design because this was my big take-away and I see you guys applying this knowledge mostly to dashboards as well.
Know your Audience
For which role is the dashboard designed for?
Typical roles are:
- strategic view
- focus on long term
- high-level overview
- simple summary
- query driven analysis
- precision required
- emphasis on trends
- emphasis on correlations
- Operations & Logistics
- focus on current status
- issue & event driven
- are things ok?
Know your Domain
What is the area (domain) of your audience?
Domains could be
- Customer/technical Support
What are you trying to answer? Which questions are important?
- Percent change?
- # sales?
Know your Data
Communicate single figure
- context is obvious
- precision is required
- past & future is irrelevant to the user
Can have different states (red, green,...)
Single figure with context
Use to ask:
- How are we doing lately?
- Any problems on the horizon?
Sparklines help (trend up or down?)
Analysis of a period
Use to show:
- ...all the key moments of this month
Line chart needs lots of data points to be good, but then they are really good!
Analysis of a period versus target
Use to ask:
- Did we hit our sales figures?
- Are we fulfilling our quota?
- Is performance ok?
Actual versus target chart; focus on delta! Use bar chart.
Breakdown of a variable
Use to ask:
- What age groups are buying our stuff?
- What countries are we big in?
Pie chart becomes bad when too many entries; sorted bar chart is better; avoid decorating with colors.
Breakdown over time
Use to ask:
- How has the composition changed over the last year?
Line chart is good; stacked bar chart is really difficult to read.
Know your Visuals
Visuals are broken down into two categories: Quantity and Category.
- Lines (length, width), that's the best
- Color intensity (shades of red,...)
- Speed (only useful in motion charts)
- Line type (dashed, dotted,...)
- Color (red, blue, green,...)
- Shape (triangle, rectangle,...)
- Location (map)
Know your Style
Remove the junk (= stuff that doesn't change, e.g. gradients, noise,...). There is no reason to fight for impact, this is not a shiny print population, it's a dashboard.
The process of designing a dashboard should follow these rules (in order of importance):
- They have to say something and be meaningful
- Dashboards & Visuals evolve, i.e. a lot of data is necessary to make sense
- Start with the basics: Rows from the database
- Add insight as you need it: Sorting, comparison,...
- Add a yearly view only after a year has passed 😉
- Include insights and actions
- Consider adding projections
- Using “Preventive Medicine” Against Bad Clients (by Maria Malidaki) - Love the section about useful documents
- Accessibility and web innovation – a talk (by Christian Heilmann) - Chris makes a case for deeper involvement in the actual development of cool technology that is accessible (or cool development that makes technology accessible)
- Architecture v. Web Design (by Dmitry Fadeyev) - Dmitry on the essence of architecture to create space and how this is (or is not) applied to web design
- What’s new for web designers – Apr 2011 (by Cameron Chapman) - Once again, great collection of apps for designers, thx Cameron
- Are your users S.T.U.P.I.D? (by Stephen Turbek) - Get Smart (and download the info poster)
- Essential Facebook Etiquette: 10 Dos and Don’ts (by bellefoong) - Funny how we need to learn social etiquette again, huh?
- How To Design The Perfect Form (by Brian) - Extensive collection of examples and best practices for forms
- Integrating UX into Agile Development (by Janet M. Six) - State your requirements as user stories: As a [role], I want to [action based on a feature], so [user goal].
- Mobile Application Development: Web vs. Native (by Andre Charland, Brian LeRoux) - Excellent research on web versus native development for mobile. Sooner or later we all need to understand the ins and outs of mobile dev.
- A new micro clearfix hack (by Nicolas Gallagher) - updated hack to clear floats without resorting to using presentational markup
- Web Developers vs. Web Developers (Infographic Remix) (by Cassie McDaniel) - nice remix of the original web designers vs web developers infographic by Shane Snow
"Esri Redistricting is a Web-based solution for state and local governments, legislators, and advocacy groups to create political and geographic redistricting plans." The app is hosted by Esri and delivered as software-as-a-service through annual subscriptions (30 days free trial available).
Mockups in MS PowerPoint
First of all I want to mention that the project became a success only for the dedicated and hard work of so many talented people, my part was really only the literal drop on a hot stone.
Very early on I had the feeling that this project would benefit from higher graphical fidelity (maps, charts, colors were important) so I decided to use Microsoft PowerPoint to communicate the designs. Using my wireframe stencils to draw the UI elements we iterated through multiple versions and approaches.
Main Lesson: Use slide master layout as background
My biggest lesson was the need to create a new layout to the Slide Master which would serve as the background. This layout included the banner (logo, user information), the menu (ribbon) and the map area.
- Changes propagated to all slides (e.g. modify a label)
- Easy manipulation of elements on top of static background
- Remove source of errors (forgot to update a slide)
- Cleaner in general 😉
I've been working for quite some time with Balsamiq Mockups now and it truly made my designer life easier especially because I'm able to:
- Work through an idea and communicate it and iterate it
- Use incompleteness to identify holes and relationships
- Record and reflect what I am hearing and seeing
- Capture my results and document them
Sure, smaller projects - like my personal homepage - might not benefit as much from mockups than larger ones, but it still helps me to settle on a design quickly (and rather inexpensively) before I get into the hassle of coding.
What is a Sketch?
A simply or hastily executed drawing, especially a preliminary one, giving the essential features without the details.
First and foremost comes the concept. It grew in me over time, a little aha moment included.
I then sketched it using Balsamiq and refined it until I felt happy. Looks pretty much what I had in mind.
At this moment I'm not worried about color schemes, fonts or implementation specifics. I might have something in mind and almost certainly I know technical implications of my designs, e.g. can I include my tweets, even though I sometimes disregard them in favor of not limiting myself.
Most important at this time is that I sketch the WHAT I want to achieve, the HOW comes later.
I rolled out my personal webpage and was happy... until I strongly felt that my tweets need to appear to give the page some dynamic flavor.
So I went back to the drawing board (my Balsamiq) and sketched out some possible locations for the tweets on the screen.
My goal was to keep the page simple and uncluttered.
Well, something has to give (or maybe not?). I wrestled with myself and convinced the purist in me that tweets would actually add value to the page by showing who I am and what I have to say which in turn could be attractive to whoever visits my site. The objective stayed the same: KISS, keep it simple, stupid.
So I had to find a location and a metaphor to include the tweet section without obstructing the page and overwhelming the message. I found that a speech bubble pointing from my name to the tweets to be the best metaphor.
So this is what it boiled down to: http://www.michaelgaigg.com.
Ok, the mockups didn't help me to communicate ideas to my client or convince somebody of a better design choice, but they helped me to iterate through some samples before I dove into coding. It kept me from some of my frustrations of earlier days when I was more concerned about the looks before I actually knew where I wanted to go. It kept me on track and I hope that can be seen.
What do you think of my new personal homepage?
Happy New Year and welcome back. After a wonderful family vacation in Austria, Europe (and white Christmas) I'm back and pleased to share my insights and what I'm learning for myself on a daily basis with you. As always, if you have an interesting article or link you want to bring to my attention, post it in the comments or tweet @michaelgaigg.
- 7 Essential Red Flags to Watch Out for in New Clients (by John O’Nolan) - look out for these red flags, they really can turn your job into a nightmare.
- Blogging Maps: The Design Galaxy (by BuySellAds) - discovert the galaxy of design in this interactive map.
- 10 Practical Ways to Bust Through Web Designer’s Block (by Sacha Greif) - Some nice tips what you can do when your brain is fried 😉
- Christmas Design Resources: Santa Claus (by Bellefoong) - plenty of the good stuff here.
- 7 Tips for Building a Better Branded App (by Sarah Kessler) - Branding is important and Sarah offers some really nice tips.
- 10 Ideas for Creating Innovative and Unique Web Designs (by Jason Gross) - keep the ideas popping.
- Debunking User Experience (by Dean Schuster) - You can do it! Have a read..
- 10 Things You Can Do to Become a Better PHP Developer (by Raphael Caixeta) - use a PHP framework? uhm, yeah, right! coulda, shoulda..
- Real Time Web Analytics Services – Best of (by hongkiat) - which web analytics service do you use?
- Guidelines for URI Design (by Jacob Gillespie) - URI structure is primarily important for user recognition and easy of use, search engine optimization is nice too.
- 8 Ways to Make Your Website Mobile Friendly (by Joel Reyes) - isn't it sweet that our mobiles will drive us towards better web development also? Something we should have been doing for a long time already?
- The ADA and the Web: Concerns and Misconceptions (by Jared Smith) - Is an accessibility law for e-commerce coming? Will this take the look of the web back to 1990? Jared has some nice Q&A there...
- Stop Designing Aesthetics, Start Designing Emotions (by John O’Nolan) - Design for emotions, definitely not a new concept but usually poorly covered. John takes a good stab on it.
- 5 Small Biz Web Design Trends to Watch (by Grace Smith) - Minimalism, Unique Photography, Bold Typography, Clear Calls to Action, A/B Testing - what more to say?
- iPad User Experience Guidelines (by UX Magazine) - with the source doc at Apple's Human Interface Guidelines for the iPad