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
- 11 Outstanding Online Resources for Web Developers (by Barb Dybwad) - Probably you already know all these resources, but if not... yes, here they are.
- Improve Conversions by Connecting with your Audience (by Aaron Griffith) - About your audience, think like them, breath like them, be like them... or so...
- Modal windows (by Anders Toxboe) - a nice collection of 33 modal windows.
- Increasing U.S. Census Participation (by James Fee) - Census is coming up and the challenge will be to count the 'hard to count' population.
- Happy Birthday Facebook - Facebook was launched exactly six years ago, on February 4, 2004 - Happy 6th birthday!
- 11 Common Web Design Mistakes (Blunders) (by Brujo Owoh) - Fly over the list and remind yourself of what to avoid!!
In my daily work I'm constantly confronted with developments for government sites. Often I hear confusion in what needs to be achieved, who needs to be served and especially why it should matter.
Listening into a Webcast by Human Factors International (download white paper on Designing the e-government experience through citizen-centered usability, March 2008) gave me additional insights that I want to summarize and present here:
Goals of eGovernment
The web offers governmental sites the potential for increased operational efficiency and cost reductions while improving access to information and services for their citizens.
Levels of interaction between these two actors (government & citizens) include:
- Connect citizens with legislative offices
- Communicate faster and more targeted
- Leverage access to public services (enhanced productivity with reduced effort)
Steps to improve eGovernment
Traditionally the government has three main functions:
What can be done to improve these functions/processes?
Get it out there
- What information is interesting?
- What is already available?
Make it useful & usable
- Pre-digest the information (e.g. into charts, comparisons, …)
- Understand the citizen’s needs (e.g. Spanish language, search, text size, …)
- Assist citizen’s in finding the information (sometimes they don’t know it exists)
- Avoid: limited business focus, internal focus, lack of shared resource
- Assist citizens to walk through business logic (avoid unnecessary pages, forms, fields, …)
- Establish a baseline (best practices review, scorecard, usability testing success rates, web analytics, call center volume, server logs, …)
- Validate improvements (success rate, task time) & seek for support within your organization for doing this
- Continuously track usage
- Why? Avoid falling back in national ranking, reduce costs for service calls, …
Make it engaging
- “Will? Can?” Will citizens use the service? Can they find it?
- Make it exciting
- Use experiences or technologies that are current and up to date (videos, gadgets, …)
Embrace the future
- Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)
- Encourage citizens to interact through social tools
- Integration of “Report”, “Transact” and “Interact” means to remove the disparity between organizational structures of governments and the mental models of the citizens
- Understand and channel the motivation of citizens to use online services
- Integrate offers from multiple agencies into one comprehensible user experience
Start a movement
- Create a community by involving State & Agency Leadership, Agency CIO’s and Webmasters
- Recognition and adoption are key aspects
- Embrace the chaos
- Provide useful & usable tools
- Reward contributions & demonstrate progress
- View webmasters as a partner, not as recipient
- The user’s perspective of the organization and the actual organizational structures are mostly very different. Citizens should not need to know how an agency is organized or be familiar with its terminology.
- Focus on the citizen means to understand how they look for information!
- Integrate internal processes into one intelligent solution (iGov = integrated Government)
- Understanding the level of literacy is key to success. Easy language assists citizens in filling out bureaucratic forms.
Government must view itself as a business
- Attract and satisfy citizens. Beware of competition and consider concepts like ‘brand loyalty’. Effective interaction adds benefits to citizens.
- Convert visitors into customers meaning that citizens become active online users of the services.
- Broaden the focus onto international audience which is important to attract entrepreneurship and investment capital and is a good indicator of a strong technology market and research and development environment.
Assistance through technology, tools and continuous improvement
- Support CIO’s and webmasters through tools like design templates, standards, guidelines and an effective means of governance.
- Adjust technology to changing market conditions, population demographics and the user’s level of expectations.
- Create a culture and long-term commitment (=institutionalization) of usability within the agency!
- Establish a baseline of improvement and continuously validate and improve through benchmarks.
I'd like to hear your feedback and if you have applied one or many of above techniques in your agency and what your experiences were.
- Straub, K., Gerrol, S.; Designing the e-government experience through citizen-centered usability; Human Factors International, Inc.; White paper; March 6, 2008
We, the people, have been around for quite some years now. Computers, software, applications and the web not so much. Therefore it is clear that applications have to adjust to the people and not the other way round.
Many design principles have developed throughout the decades, but the main difference of user-centered design to others is that
UCD tries to optimize the user interface around how people can, want, or need to work, rather than forcing the users to change how they work to accommodate the system or function.
Purpose of UCD
UCD answers questions about users and their tasks and goals, then use the findings to make decisions about development and design.
UCD seeks to answer the following questions:
- Who are the users of the application?
- What are the users’ main tasks and goals?
- What are the users’ experience levels with the application?
- What functions do the users need from the application?
- What information might the users need, and in what form do they need it?
- How do users think the application should work?
Benefits & Return of Investment
- Increased usability
- Higher degree of customer satisfaction
- Continued business
- Higher revenues
- Project management optimization
- Focus on important functionality early
- Unforeseen user requirements
- Reduced costs
- Training costs
- Help-Desk calls and service costs
- Focus on users’ needs, tasks and goals
- Spend time on initial research and requirements
- Identify your target audience and observe them (accomplishing their tasks)
- Let users define product requirements
- Emphasis on iterative design process
- Evaluate system on real target users
Nobody could state it simpler than Susan Dray: "If the user can’t use it, it doesn’t work".