Michael Gaigg: Über UI/UX Design

8May0

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.

29Apr0

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

4Apr0

Multiline TextBox control (TextArea) in Silverlight

Posted by Michael Gaigg

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:

<TextBox TextWrapping="Wrap" Width="300" Height="80" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" />

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!

27Mar0

Esri’s First Homepage – Esri.com Anno 1994

Posted by Michael Gaigg

Esri.com anno 1994

Esri.com anno 1994

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.

19Mar0

The 4 Questions of Strategy

Posted by Michael Gaigg

4 steps of strategy

Just described 'strategy' to a consultant and thought to share my awesome whiteboard drawing 😉

The 4 questions of defining strategy are:

  1. Where am I now?
  2. Where do I want to go?
  3. How do I get there?
  4. 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'.

13Mar0

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.

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

5Mar0

Wireframing – what a waste of time… not!

Posted by Michael Gaigg

See my notes below the slides...

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!

Slide 2

Demo (no need to describe to you the benefits, just see)

Tips:

  • mockupstogo
  • mybalsamiq
  • don't have templates, but have stencils (symbols)
  • cropping
  • keyboard
  • 960 grid system
  • notes
  • from rough to detail
  • design to scale if possible
  • please no more lorem ipsum

Slide 3

Let me show you some case studies to illustrate how and when wireframing can help. While usually I recommend 2 or max of 3 rounds of mockups, during proposals where requirements are vague it’s more important than ever to kick around ideas and bring the visuals in front of key stakeholders and decision makers. So we might end up with 6 or 7 rounds.

Slide 4

And this is our final mockup that we felt confident fits the target audience of an executive.
You see the basic elements: header, navigation, dashboard, Maps.

Can you guess which technology this is based on?

Slide 5

Reviewer Server asked us to help designing the RS Health Check Dashboard which was used and presented at the User Conference 2011. This effort was designed (including screen comps) within 2 days and implemented within 2 weeks.

Validate your designs!!!

Slide 6

It will save you

  • Energy
  • Time
  • Money

Because the majority of UI changes made before coding begins.

Slide 7

A picture/sketch is so much richer than describing.

Communicate visually.

Different disciplines need to interweave/overlap (designer needs to influence the requirements and a pm needs to influence designs). I prefer a PM coming to me with a sketch of the design saying: "Oh, here's some requirements that I have, and here is sort of high level what I'm thinking about.“

Slide 8

Helps prioritize and add emphasis to the important user stories. Identify gaps/possible wholes and not needed functions.

Nail down scope and functionality.

Avoid building features that turn out to not be needed in the first place. Limit the amount of gotcha’s along the way, “ah, we need to be able to save this damn thing, let’s add another button”.

Slide 9

What I like about lo-fi wireframes is that it's obvious that design is not done, looks unfinished, and nothing is set in stone.

Don’t get hung up on discussions about design details.

Don’t loose focus of the main goal and core tasks!

Picture: Detail '57 Chevy

Slide 10

Unless there is a good reason – proposal work, research, marketing – max. 2 iterations!
‘Finalize’ and move on! There is plenty of room for fine-tuning along the way

Slide 11

A sketch is a sketch (after serving its purpose it’s still only a by-product, like a white-board drawing). Don’t end up spending more time updating all the sketches in all the places in all the documents – that’s not the idea of sketching.

Get sign off!

Slide 12

As simple as it looks (or I make it look) – sketching/prototyping is only as good as the person that does it. It doesn’t replace experience and hard work.

Slide 13

The two links mentioned during the demo:

29Feb0

Windows 8 UX design guidelines

Posted by Michael Gaigg

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.
Page 5 of 24« First...34567...1020...Last »