Map | Michael Gaigg: Über UI/UX Design

8May0

Mapping Stereotypes: Europe according to Americans

Posted by Michael Gaigg

Europe According to USA

...and other stereotypes by 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.

Tagged as: art, europe, map, stereotype, usa No Comments

29Apr2

Amazing Paintings with inlaid Maps

Posted by Michael Gaigg

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

Tagged as: art, collage, graffiti, map, map art, matt cusick, painting 2 Comments

13Mar2

Proposing: Feature Spotlight

Posted by Michael Gaigg

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.

Tagged as: alternative, css3, elegant, feature, geolocation, landmark, location, map, marker, modal, search, spotlight, visual 2 Comments

10Mar0

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

Tagged as: arcgis, basemap, esri, gis, map, national geographic, world No Comments

25Aug1

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: chapter, hcc, HCI, map, sigchi, upa 1 Comment

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?

Tagged as: binary, edit, map, mode, on, selection, toolbar, trigger No Comments

25Apr0

Free Map Controls for Balsamiq Mockups

Posted by Michael Gaigg

Map Controls for Balsamiq Mockups

Download the Map Controls for Balsamiq Mockups on mockupstogo.net.

The collection includes a wide variety of map controls like zoom bars, pan controls, scale bars, overview map, logos, pins, rings. All of them are symbols that you can add to your assets directory.

Enjoy and let me know if I missed something… and like it or re-tweet it

Tagged as: Balsamiq, collection, controls, logo, map, mockups, overview map, pan, pin, rings, scale bar, symbol, zoom bar No Comments

31Oct0

Highlights of Week 44/2010

Posted by Michael Gaigg

25 Tools to Improve Your Website’s Usability (by bellefoong) - which is your favorite?
Book Review — Map Scripting 101 (by James Fee) - exactly what the title says... book review.
What We Look for in Founders (by Paul Graham) - Determination, Flexibility, Imagination, Naughtiness, Friendship
SEO for Bing Versus Google (by John Pring) - Google hates Flash... and more!
Designing Hyperlinks: Tips and Best Practices (by Jake Rocheleau) - the bread and butter of web design, always good to remember.
Becoming a Better Web Designer (by Alexander Dawson) - this is an awesome resource of resources - reserve some time for reading.
Announcing the Wijmo Beta! (by Chris Bannon) - Wijmo is an extension to jQuery UI and adds new widgets and features to your arsenal - sweet.
HOW TO: Optimize Your Social Media Marketing Strategy (by Josh Peters) - Awareness, Interest, Desire and Action + Loyalty and Advocacy.

Tagged as: Action, Advocacy, Awareness, bing, book, Desire, Determination, Flexibility, Friendship, google, Hyperlinks, Imagination, Interest, jquery, Loyalty, map, marketing, Naughtiness, review, seo, Social Media, tools, usability, website, wijmo No Comments

17Oct0

Typographic Map Posters [Link]

Posted by Michael Gaigg

Typographic Map

Have a look at these beautifully crafted maps by axismaps! Cartography at its best, true beauty. Great job, loving it!

"There was nothing automated about making these maps, unless you count copying and pasting. Everything was laid out manually, from tracing streets over an OpenStreetMap image, to nudging curved water text, to selectively erasing text to create a woven street pattern."

Tagged as: axismaps, map, typographic No Comments

18Sep7

15 Outstanding Examples of Braille in our World

Posted by Michael Gaigg

Braille can be found everywhere. Some findings are real gems, love the McDonalds braille lunch menu which is even advertised on drive-through windows in corporate locations - yes, exactly, didn't know they had driving test in braille yet. I'd actually opt for scratch and smell menus at McDonalds - ok, that's just me

Love the braille bikini as well. Enjoy!