Michael Gaigg: Über UI/UX Design

17May190

Dashboard Design

Posted by Michael Gaigg

Example of a dashboard (Google Analytics)

Example of a dashboard (Google Analytics)

I'd like to summarize my notes from the excellent talk titled "Designing Infographics for Web Applications" (watch the 54 minute video).

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:

  • CEO
    • strategic view
    • focus on long term
    • high-level overview
    • simple summary
  • Analyst
    • 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

  • Sales
  • Marketing
  • Customer/technical Support

What are you trying to answer? Which questions are important?

  • Average?
  • Percent change?
  • Totals?
  • Popular?
  • # sales?

Know your Data

Communicate single figure

Use when:

  • 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.

Quantity

  • Lines (length, width), that's the best
  • Color intensity (shades of red,...)
  • Size
  • Quantity
  • Speed (only useful in motion charts)

Category

  • 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.

Closing

The process of designing a dashboard should follow these rules (in order of importance):

  1. They have to say something and be meaningful
  2. Dashboards & Visuals evolve, i.e. a lot of data is necessary to make sense
  3. Start with the basics: Rows from the database
  4. Add insight as you need it: Sorting, comparison,...
  5. Add a yearly view only after a year has passed ;)
  6. Include insights and actions
  7. Consider adding projections
9Feb0

Highlights of Week 05/2010

Posted by Michael Gaigg

31Mar0

Steps to improve User Experience for Government

Posted by Michael Gaigg

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.

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/)

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/)

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:

  1. Report
  2. Transact
  3. Interact

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

Provide self-service

  • Assist citizens to walk through business logic (avoid unnecessary pages, forms, fields, …)

Track improvement

  • 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

Erase boundaries

  • 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

Transparency

  • 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.

Your thoughts?

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.

References

  • Straub, K., Gerrol, S.; Designing the e-government experience through citizen-centered usability; Human Factors International, Inc.; White paper; March 6, 2008
5Mar5

Benefits & Principles of User-Centered Design

Posted by Michael Gaigg

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

UCD Principles

  • 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

Summary

Nobody could state it simpler than Susan Dray: "If the user can’t use it, it doesn’t work".