Michael Gaigg: Über UI/UX Design

17May65

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
10Aug2

How to use the Google Font API

Posted by Michael Gaigg

Google fonts available

Google fonts available

If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

  • easy to implement (as I will show)
  • well supported by IE, Firefox, Safari and obviously Chrome
  • open-source
  • free (I should have mentioned first huh?)

End Result

Tangerine font

Code Example

<html>
<head>
&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;
<style>
body {
	font-family: 'Tangerine', arial, serif;
	font-size: 2em;
}
</style>
</head>
 
<body>
This text is in <strong>Tangerine</strong>.
</body>
</html>

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.

The variant parameter can be omitted for use of default.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'&gt;

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'&gt;

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).

Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time.

The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses.

Are you using any other Font library?