Michael Gaigg: Über UI/UX Design

21Jun0

Firefox 5 available

Posted by Michael Gaigg

Firefox 5

Firefox 5 is available

Only 3 months after launching Firefox 4, Mozilla has the latest and greatest - according to Mashable also fastest - available for us to download: Firefox 5.

To update to the latest Firefox, click on the “check for updates” button in the “About Firefox” menu.

Visually very similar to v4, what are your first impressions?

Tagged as: No Comments
17Jun0

Free E-Book: GIS in the Cloud

Posted by Michael Gaigg

GIS in the Cloud

GIS in the Cloud

Matt Artz blogs about Esri's latest release by Victoria Kouyoumjian, Esri’s IT Strategies Architect: "GIS in the Cloud: The New Age of Cloud Computing and Geographic Information Systems".

Download: Download free e-book

Topics covered in the e-book include:

  • What Is Cloud Computing?
  • Cloud Service Models
  • Cloud Benefits
  • Public versus Private Cloud
  • Risks in the Cloud
  • ArcGIS and the Cloud
15Jun0

How to trigger “Edit Mode”

Posted by Michael Gaigg

In a recent discussion it occurred to me that there are really only 3 ways to trigger "edit mode", i.e. tell the map that I want to add/edit/remove something:

  • Binary
  • On
  • Selection

Binary

The edit mode is either turned on or off. Turned off is the default mode and requires explicit action by the user to turn it into edit mode with the advantage that user is aware of this switch, which might also trigger other behaviors to be turned off (map tips,...) or removed from the map (scalebar, overview map,...)

Use "binary" if editing is a major part of your app so that this distinction becomes crucial.

On

On is a subset of the binary case where the edit mode with all its functionality is always on by default and any interaction with the map allows users to select features to be edited or deleted, or add something new.
This case might conflict with other mouse events (e.g. a left mouse button up event usually triggers a map tip) and therefore needs to be very well thought-through before implementing.

Use "on" if you can fit it into your workflows and you can oversee and have control over most/all map functions.

Selection

Selecting an edit tool through a toolbar for example is the classical way of setting the map into edit mode. It speaks very loud GIS expert to me and seems to not being familiar to the average map user, i.e. it may be difficult to find the right tool from the sway of icons, learn (and remember) that this action is required AND know that the mode needs to be turned off again after being done.

Use "selection" if your map app already has a toolbar and you want to be on the safe side.

How do you prefer doing it?

What are your preferences/experiences?

10Jun0

Welcoming Yiwei Ma to our UI Design Team

Posted by Michael Gaigg

This week Yiwei Ma (LinkedIn) joined our design team as a UI Engineer.

He earned his master from the University of Michigan specializing in Human Computer Interaction (HCI) and has a BS in Computer Science and a background in graphic design.

I'm very excited knowing that we can now further improve our ability to designing map interfaces. Welcome on board!

7Jun0

Highlights of Week 22/2011

Posted by Michael Gaigg

31May0

Highlights of Week 21/2011

Posted by Michael Gaigg

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
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?

Page 9 of 24« First...7891011...20...Last »