Michael Gaigg: Über UI/UX Design

20May0

Highlights of Week 20/2011

Posted by Michael Gaigg

17May0

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
2May0

Highlights of Week 17/2011

Posted by Michael Gaigg

23Apr0

Highlights of Week 16/2011

Posted by Michael Gaigg

5Apr0

Esri Redistricting App on Frontpage of ArcNews (Spring 2011)

Posted by Michael Gaigg

Redistricting app featured on ArcNews, Spring 2011

Redistricting app featured on ArcNews, Spring 2011

It's always exciting to see your designs come to life but it's even cooler to be featured on the front page of a ArcNews Spring 2011, one of Esri's main publications.

"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

Mockups in MS PowerPoint

Mockups in MS PowerPoint

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.

Advantages:

  • 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 😉
18Mar0

Highlights of Week 11/2011

Posted by Michael Gaigg

Thanks to everybody that sent me link suggestions. Here the highlights for week 11/2011:

24Jan0

Redesigning my Personal Homepage using Balsamiq Mockups

Posted by Michael Gaigg

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.

Beginning

Step 1) Sketch after some initial iterations

Step 1) Sketch after some initial iterations

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.

Evolution

Step 2a) Including my tweets

Step 2a) Including my tweets

Step 2b) Adjusting the tweet element to be less obstructive

Step 2b) Adjusting the tweet element to be less obstructive

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.

Result

Step 3) Implementation... the result

Step 3) Implementation... the result

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?

18Jan0

Highlights of Week 02/2011

Posted by Michael Gaigg

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.

16Aug0

Highlights of Week 32/2010

Posted by Michael Gaigg

Page 3 of 512345