Michael Gaigg: Über UI/UX Design

19Mar26

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

13Mar5

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.

10Mar30

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

5Mar1

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:

29Feb55

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

New Year’s Resolution: Gift Books (don’t lend them)

Posted by Michael Gaigg

I used to have a rule (you know, a rule helps you solving a problem in your life that you then never have to worry about anymore) that said: never lend a book, always gift it!

I don’t know why or when I stopped applying this rule but my thinking behind it is:

  • You value the book but somebody else values it more at this time
  • Lending it will consume your energy remembering who you lent it to end when
  • The other person constantly feels bad for not returning the book to you up to a point when it becomes real guilt and shame
  • The other person cannot really enjoy the book in fear of marking a page or paragraph or leaving coffee stains

So the solution is: Gift the book! In that way both parties feel good.

20Dec0

Highlights for Week 50/2011

Posted by Michael Gaigg

5Dec0

Highlights for Week 48/2011

Posted by Michael Gaigg

28Nov0

Asking for Feedback

Posted by Michael Gaigg

Generally it's not a good idea to listen to your users; it's better to observe their behavior and actions. When you do ask for feedback though, be careful to not end up with a sack full of new requirements.

Some phrases (from the hilarious video) that I'm only too much familiar with:

  • I'm just throwing things out there
  • You are the author (designer), you know best
  • I am making sense, right?

from Asking for Feedback

Page 5 of 23« First...34567...1020...Last »