Michael Gaigg: Über UI/UX Design

17May213

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

Start calling your Web Map “Map App”

Posted by Michael Gaigg

I design map applications for the web. I talk a lot about it but I just don't seem to find the right term for it. Should I call these applications "Web Map"? "Web Map Application"? "Mapping Application"? "Map Application"?

I decided to let my decision be driven by the people and what they are used to. Therefore I turned to Google Trends to match the terms against each other.

Mapping Application vs. Map Application

First I compared "Mapping Application vs. Map Application" (Figure 1). The shorter Map Application was the clear winner. The term mapping just doesn't seem to fly.

Mapping Application vs Map Application

Figure 1: Mapping Application vs Map Application

Map Application vs Web Map

So I decided to match the winner (Map Application) with the common term Web Map (Figure 2). While Web Map is clearly the favorite it's also evident that the term itself is on the decline which made me think whether another term is actually on the raise.

Map Application vs Web Map

Figure 2: Map Application vs Web Map

Map Application vs Map App

If Map Application cannot hold up, how about the short term "Map App"? As Figure 3 shows this expression has only been around since 2008 but it really seems to have taken off in Q2 of 2010 and has outranked the longer brother (Map Application) quite considerably ever since. I wonder how "Web App" would match against Web Map.

Map Application vs Map App

Figure 3: Map Application vs Map App

Map App vs Web Map

Now this comparison looks very similar to Figure 2 (Map Application vs Web Map) - just a little closer. We did expect that since Map App measured better than Map Application. The comparison (Figure 4) already hints us towards the term Map App, but let's zoom into the past 12 months to have a closer look.

Map App vs Web Map

Figure 4: Map App vs Web Map

Map App vs Web Map (past 12 months)

That's a really close call. It seems like the two lines in Figure 5 are converging. Is this good enough to call a winner?

Map App vs Web Map (past 12 months)

Figure 5: Map App vs Web Map (past 12 months)

Map App vs Web Map (past 12 months, USA only)

By looking at the individual regions though, I saw that the USA - which is our main market - looks slightly different. Figure 6 shows that the term Map App is actually already more popular in the USA than across all countries and languages.

Map App vs Web Map (past 12 months, USA only)

Figure 6: Map App vs Web Map (past 12 months, USA only)

Conclusion

At this point I think it's too close to call it a clear winner, but what we've learned is that

  • it's safe to remove the term "web" from map
  • the term "map" is better than "mapping"
  • the trend leans toward Map App, so let's start calling your Web Map "Map App".

What do you think? How do you call your map apps?

2May1

Highlights of Week 17/2011

Posted by Michael Gaigg

23Apr1

Highlights of Week 16/2011

Posted by Michael Gaigg

20Apr0

Successful Map App = Frame the Question

Posted by Michael Gaigg

What makes a Map App successful?

It sounds so easy and obvious. It's the basic, the 101 of analysis, Input-Analysis-Output. Usually I skip over introductions of books and that's especially true when I know the subject matter like GIS, but for some reason I started reading "The Esri Guide to GIS Analysis, Volume 1" (by Andy Mitchell, Esri Press) and it struck me like lightning, this is exactly what we should be doing:

You start an analysis by figuring out what information you need. This is often in the form of a question. Where were most of the burglaries last month? How much forest in each watershed? Which parcels are within 500 feet of this liquor store? Being as specific as possible about the question you're trying to answer will help you decide how to approach the analysis, which method to use, and how to present the results.

Other factors that influence the analysis are how it will be used and who will use it. You might simply be exploring the data on your own to get a better understanding of how a place developed or how things behave; or you may need to present results to policy makers or the public for discussion, for scientific review, or in a courtroom setting. In the latter cases, your methods need to be more rigorous, and the results more focused.

Frame the Question

Framing the question correctly will tell you:

  • The problem you are trying to solve
  • The approach of the analysis you want to use
  • Which methods to use
  • How to present the results

Who & How

Other factors that influence the analysis are:

  • Who will use it?
  • How will they use it?
  • How are the results being used?

Design Implications

All this will impact your design, on what you should focus and how to lay the elements out on the page. Consider:

  • Get the user to the location they are interested quickly
  • Create clear call to action that allows the user to get answers to his/her question
  • Simplify the methods on how to do analysis
  • Provide means to use or export the results
12Apr1

Implications of the Inability of Users to Search Effectively

Posted by Michael Gaigg

Jakob Nielsen outlines in his latest alertbox newsletter (http://www.useit.com/alertbox/search-skills.html) the inability of users to search effectively.

Findings

My colleague Neal Dinoff, Esri Usability Lab Manager, summarized the article and outlined Jakob Nielsen's core findings:

  • People (even highly educated people) have remarkably poor search skills.
  • Once they head down a keyword path, no matter how fruitless, they seldom change their search strategy
  • Users will enter search terms into any open text field with no understanding of whether they are searching the whole site, the World Wide Web, or only a discreet section of the site.
  • Users are overconfident in the reliability of results.
  • Almost no one uses Advanced Search. When they do, they use it incorrectly.

Lessons

Neal continues to conclude lessons for our search design:

  • Don't assume that advanced search will help your website; you might build such features, but people will use them only in exceptional cases.
  • Spend the vast majority of your resources on improving regular search (simple search).
  • Design for the way the world is, not the way we wish it were. This means accepting search dominance, and trying to help users with poor research skills.

Implications

I believe more implications can be deducted:

  • Curate (make sense of) content (!!!):
    • Aggregate (most relevant in one location)
    • Distill (more simplistic)
    • Elevate (identify and describe trends/insights)
    • Mashup (create new points of view based on multiple sources)
  • Every page is a potential landing page, so help user to:
    • Locate themselves (titles)
    • Provide context (the bigger picture)
    • Find the content/functions they were originally looking for
    • Navigate further (well thought-through navigation architecture + good links + meaningful footer links)
  • Create pages so that they can be found through:
    • Search Engine Optimization (metatags, headings, etc.)
    • Write in the language of your users, that’s how they will search

What are your Experiences?

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 ;)
4Apr0

Cheatsheet: Preparation for User Testing

Posted by Michael Gaigg

I find the following list really helpful when planning and conducting user testing. I collect and refine it constantly and would greatly appreciate any comments or additions I have missed (and I'm sure I did).

Setup:

  • setup web meeting
  • tell secretary to not delete account and associated recordings
  • test connection, equipment and recording capabilities
  • setup schedule for participants
  • send connection info to stakeholders
  • remind everybody to mute their phones (or whatever else is necessary)
  • prepare necessary data and files

Test machine:

  • hide windows toolbar
  • close mail program

Meeting:

  • enable full screen for all users
  • show host cursors to all attendees
  • allow access to observers
  • share desktop

Session:

  • clear user generated content from previous user
  • reset application
  • remove cookies
  • start blank application (if that's part of the test)
  • take a break/breather for yourself
  • prepare your personal notes taking material
  • get acquainted with name and capabilities of next participant
  • provide water for participant
  • start recording
  • greet participant and get going

Post-test:

  • clarify time line for test results (findings & analysis)
  • send thank you emails to participants
Page 9 of 23« First...7891011...20...Last »