Michael Gaigg: Über UI/UX Design


The World as we know it

Posted by Michael Gaigg

I just love the stereotypes used to create the world as we know it map of the world by Osama Haj jaj). True or not, that's what we associate with these countries and you better have a sip of Tequila and a Taco when you travel to Mexico or watch a soccer game when in Brazil.

The world as we know it


Mapping Stereotypes: Europe according to Americans

Posted by Michael Gaigg

Yanko Tsvetkov (thx to Rob for pointing me to this site)!

Working under the pseudonym "alphadesigner" which (according to him) makes people usually think that his work is really important. Regardless... Yanko hits the nail right on its head when it comes to stereotypes.

You gotta love the European map as seen by different states/cultures. And if you really think that everybody in Austria eats Apfelkuchen for breakfast and Italy is infested by Godfathers... then you either watch too many movies or ...are American LOL.


Amazing Paintings with inlaid Maps

Posted by Michael Gaigg

Patriarch (original), 2006 Inlaid maps on panel

Patriarch (original), 2006 Inlaid maps on panel

What an amazing find (once again thx to Nick Furness).

Matthew Cusick created these astounding paintings and collages using inlaid maps.

I love map art (does this word exist already?) - do you guys know more? Send it to me and I'll post it here, can't wait for maps to enter urban culture, maybe some map graffiti or street map painting on a sidewalk...?! 😉


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

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


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


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?