Michael Gaigg: Über UI/UX Design


Proposing: Spatial Dashboard

Posted by Michael Gaigg

Dashboards are everywhere, they can be found in business apps, management information systems, administration tools. They all have the following in common, they show summaries, key trends, comparisons, and exceptions. Usually all of above relate to key performance indicators or to derived (rolled up) data.

The "traditional" Dashboard

Traditional Dashboard (published by directionsmag)

Traditional Dashboard (published by directionsmag)

In the spatial space the data is rolled up to geographical (mostly political) units like continents, countries, or states and therefore provide a graphical presentation of the current status (temporal) in relation to its geographical location. This is typically displayed as a thematic map side by side with summaries, charts, gauges, graphics, or tables.

While this approach is completely valid its biggest weakness is the disconnect of visual perception to visual presentation of information, i.e. the intent of communicating geographical information isn't clear or at a minimum ambiguous. How do the data charts relate to the data shown on the map?

The proposed "new" Dashboard

that outlines considerations about your target audience, domain, data, and visuals to be used.

I hope this article inspired you so please let me know what you think and anything else that comes to mind after reading this article.


The Future of Travel Sites?

Posted by Michael Gaigg

What an amazing 2 minute video presentation of What a Travel Site Should Look Like (thanks to James Killick for sending this link) as featured in Wired magazine.


Video: Map App UI Design

Posted by Michael Gaigg

Here is the video from the tech session I held at the Esri DevSummit 2013 in Palm Springs, CA.

The session teaches participants best practices for reviewing, conceptualizing, designing and building user-centered mapping applications in a competitive business environment. Methods, techniques and tools for improving the user experience and designing useful and appealing front-end interfaces will be discussed.


Touch Event Support for jQuery UI

Posted by Michael Gaigg



Problem: jQuery UI doesn't support touch gestures

We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!


Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...

Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.js"></script>

Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)

Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)


Create your own Treasure Map

Posted by Michael Gaigg

Historical Style

Historical Style

Now this is cool (thx Nick for sharing)! An antique looking basemap (by MapBox), just missing pirates, treasures, hidden islands and tales about monsters of the sea...

Update (thx to Aileen Buckley): Esri has "a style you can use to do this -- it is the Historical style on Mapping Center -- it has ships, sea serpents, etc... (thanks to Jaynya!)".

Download: create historical looking maps (scroll down to 'historical' style)


Proposing: Feature Spotlight

Posted by Michael Gaigg

Feature Spotlight

Feature Spotlight

Let's say you want to highlight a feature on the map, e.g. a user has searched for a landmark, typically one would place a marker on the map and zoom to that location. The downside is that the user still needs to 'search' for the visual clue (the marker) on the map.

I think the missing link here is to 'black out' the whole map and only highlighting the area surrounding the landmark. This provides a natural focus on the feature and is a really elegant alternative I believe.

Optionally one could use the modal area to add a description or even photos (get creative for yourself). And yes, leave the marker also for browsers that don't support CSS3.

The code is as simple as could be, here is the CSS class called 'spotlight':

    .spotlight {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
	z-index: 100;
        border: 0;
        pointer-events: none;
        /* this is the sweet spot */
        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to (rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)));
        background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px);

And here the HTML defining the spotlight container:

<span id="spot" class="spotlight"></span>

Implementation inspired by CSS3 Spotlight.


Amazing: National Geographic World Map by Esri

Posted by Michael Gaigg

Yes, I'd rather be skiing in the Austrian Alps as well... 😉 Amazing map!!

View Larger Map

This map is designed to be used as a general reference map for informational and educational purposes as well as a basemap by GIS professionals and other users for creating web maps and web mapping applications.

The map was developed by National Geographic and Esri and reflects the distinctive National Geographic cartographic style in a multi-scale reference map of the world. The map was authored using data from a variety of leading data providers, including DeLorme, NAVTEQ, UNEP-WCMC, NASA, ESA, USGS, and others.

Link to map contents on ArcGIS online: National Geographic World Map


Where to study HCI [Map App]

Posted by Michael Gaigg

I feel like back to school - in many ways. I can't believe how interesting my job can be, I learn new and fascinating things every day. The other day I spoke with Keita, who told me about her little project which I'd like to share here.

Keita created a map on ArcGIS.com that shows schools offering

  • degrees in Human-Computer Interaction (HCI) or Human-Centered Computing (HCC)
  • schools offering degrees with an HCI track/concentration
  • schools offering HCI-related degrees
  • UPA chapters
  • SIGCHI chapters

The idea for the map came from the realization of how difficult it’s been to find HCI programs and UPA/SIGCHI chapters in SoCal. "So I wanted to create a visual and a resource for others. Majority of programs are East Coast. But I have no insights into why yet. And there are hardly any online programs.", says Keita.

View Larger Map

Really cool, isn't it?

Tagged as: , , , , , No Comments

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!


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)


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 1 of 212