Michael Gaigg: Über UI/UX Design

Mapping Stereotypes: Europe according to Americans

Michael Gaigg — Wed, 09 May 2012 05:49:55 +0000

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

Amazing Paintings with inlaid Maps

Michael Gaigg — Mon, 30 Apr 2012 01:43:32 +0000

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

Multiline TextBox control (TextArea) in Silverlight

Michael Gaigg — Wed, 04 Apr 2012 17:51:39 +0000

This is one of those things that can drive you crazy. There is no 'TEXTAREA' equivalent in Silverlight. One needs to use the TextBox control with some tweaks instead. I'm terrible in remembering details like these, so here for my records:

Some remarks:

TextWrapping=True will make sure that any text entered will actually wrap to the next line
Height is important
AcceptsReturn is useful to avoid accidental submission of the form
Horizontal and Vertical scrollbars are set to "auto", but feel free to set to "Visible" if that's your preference

Enjoy!

Esri’s First Homepage – Esri.com Anno 1994

Michael Gaigg — Tue, 27 Mar 2012 16:26:26 +0000

Today I have a special treat for you, an awesome piece of Esri's history (thx Jayson for pointing this out to me):

1994 - www.esri.com launched

Gotta love this! Reminds me of my first homepage made in 1993, unfortunately I don't have any screenshots or code anymore (one of my biggest regrets). All I remember is that I used frames, lots of beveled buttons an an animated GIF for the email link. Can't believe how far we've come in only 20 years.

The 4 Questions of Strategy

Michael Gaigg — Tue, 20 Mar 2012 04:28:32 +0000

[caption id="attachment_1548" width="310" align="alignright" caption="4 steps of strategy"][/caption] Just described 'strategy' to a consultant and thought to share my awesome whiteboard drawing ;) The 4 questions of defining strategy are:

Where am I now?
Where do I want to go?
How do I get there?
How do I define success?

The success criteria is crucial. It's the metric for any decision you need to take along the way, it will help you determine which design is 'better'.

Proposing: Feature Spotlight

Michael Gaigg — Tue, 13 Mar 2012 17:02:12 +0000

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:

Implementation inspired by CSS3 Spotlight.

Amazing: National Geographic World Map by Esri

Michael Gaigg — Sun, 11 Mar 2012 00:17:47 +0000

Yes, I'd rather be skiing in the Austrian Alps as well... ;) Amazing map!!
View Larger Map http://www.arcgis.com/home/item.html?id=b9b1b422198944fbbd5250b3241691b6 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

Wireframing – what a waste of time… not!

Michael Gaigg — Mon, 05 Mar 2012 17:40:40 +0000

Slide 1

Wireframing is a planning tool.

Use it whenever you need to turn a concept into design. As a direct implication: your design is only as good as your strategy/concept. That means: ask the right question! Continue reading on my blog.

Windows 8 UX design guidelines

Michael Gaigg — Thu, 01 Mar 2012 05:35:10 +0000

The Windows 8 UX design guidelines are out. They are part of the Dev Center for Metro style apps and provide some nice learning resources that include

Design Principles - Understand the basic principles of great Metro style app design.
UX patterns - Learn how to correctly implement common patterns in Metro style apps like navigation, commanding, and touch interactions.
UX guidelines - Discover recommendations and requirements for building Metro style apps with the proper look, feel, and user-interaction model.
Downloading design assets - Get started designing apps quickly with a portfolio of reusable wireframes, redlines, fonts, and other useful design resources.
Assessing usability of apps - Assess your app's design to ensure the user experience is outstanding, and that users will find it useful, usable, and desirable.

Highlights of Week 02/2012

Michael Gaigg — Tue, 10 Jan 2012 17:36:38 +0000

Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome :) Cheers!

Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
Profiling CSS for fun and profit. Optimization notes (by kangax)
Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
Password strength verification with jQuery (by Jim Nielsen)