Michael Gaigg: Über UI/UX Design

12Feb0

Highlights of Week 06/2011

Posted by Michael Gaigg

20Apr0

Excellent read: Quality in Web Design

Posted by Michael Gaigg

Stumbled upon this blog entry by liam, loved it, shared it: How to Spot Quality within Web Design: Examples & Tips.

One can truly see the effort that went into all the visual examples (thanks, love that most) and compilation of useful tips!

Here the outline:

  1. Spacing
  2. Pixel Perfect Detail
  3. Well thought out Typography
  4. Organization of Elements
  5. Restraint & Subtlety
  6. Using Colour to it’s Full Potential
  7. Doing something Nobody else has done

Got an interesting article or blog entry?

I'd love to read and eventually share your content. Please feel free to add your links to the comments section so I can 'stumble upon' them too :)

31Dec6

Your typical User – finally captured on Photo

Posted by Michael Gaigg

Your typical user finally captured on photo

Your typical user captured on photo

Keep this picture in mind

After years of research looking for the typical end user I was finally successful. Hidden behind server log statistics, persona definitions, target audience screenings, user testing sessions and best effort anticipations on how the target customer will look like I was able to capture the Santa Claus of web design, the Deep Throat of e-commerce, the Mr. X of usability.

Regardless on how your marketing department defines the target customer or how your user research crafts the persona(s), you should always keep this picture in mind!

Your Users (customers) are:

Impatient

Users hate to wait. Long loading times, flash intros, videos or audios that start dangling away automatically will drive them nuts. Blinking advertisements and popup windows will only add to their hatred.

Give them a nice and clean interface that outline important customer care words with high information scent. Speed matters!

Nasty

I dare to imagine how users talk when something goes wrong not to mention the absence of adequate error messages or hints and help to recover.

Avoid sources of error and offer useful hints on how to recover in the case of problems.

Demanding

Users don't read, they scan. Users don't want to wade through the bun to get to the meat. They are not willing to spend time and effort to sign up for something before they know what it is. They are not willing to pay for something that is free somewhere else.

Give users what they want in a reasonable way.

In a hurry

Users are specialists in judging a site within seconds of arriving there. Is it relevant to their goal? Is there anything else they might find interesting? Last call...

Translate the first impressions into meaningful interactions.

In control

Your users will never tell you that your page sucks and they will never complain that they couldn't find what they were looking for. They will simply leave and never come back!

You better get your top task right ;)

Remember the Grinch

Don't be fooled by the nice users during your user testing sessions, they would hate to hurt your feelings by cussing away about your useless system. They'd rather blame themselves, try to cope and manage the pain and save their mental outbreak for the pub at night.

What are your experiences with the Grinch of web design?

15Oct0

Design Guidelines: Links

Posted by Michael Gaigg

"If links were married they'd get divorced all the time! That's because they can't keep their promise." (Gerry McGovern)

What Gerry means is that what links say they will do and what they actually do are total opposites. How many times have I believed, clicked and followed a link that promised me to 'Download this or that' just to find another page describing this piece of software. There I had to muddle through even more links just to find another 'Download version' link that yet again takes me to another page acknowledging the terms and conditions. The story could go on and on.

Remember: Good links are like magnets - they drive users to them.

With that in mind, here are the

Design Guidelines for Links

  1. Color and underline link text (exceptions include lists of links like a navigation menu)
  2. Reserve underlining for links (do not underline text that is not a link)
  3. Use different colors for visited and unvisited links (e.g. shades of blue)
  4. Avoid using color for text unless it is a link and never use blue for non-text links (even if your links are not blue)
  5. Avoid changing the font style on mouse over
  6. Avoid tiny text for links
  7. Use appropriate spacing between links or use a clear separator
  8. Use links primarily for navigation between pages
  9. Link text must be describe the target as short and precise (clear call to action) as possible AND hold this promise!

Best Practices

See my blog entry for Best Practices for accessible Content

References:

 

Suggested reading:
3Oct0

Visual Web Design

Posted by Michael Gaigg

First impressions matter! Luke Wroblewski, an excellent speaker with original insights which I had the pleasure to hear at last year's UI-12 (User Interface 12) in Boston, states in his latest article that users coming to your site from a search engine will do one of three things:

  • Look over the page and determine it is not relevant to their goal
  • Look over the page and determine it might be relevant to their goals then quickly scan the page for the information they need
  • Look over the page, quickly scan the page, find the information they need and then stay awhile.

All this happens within seconds. Therefore it is necessary to translate the first impressions (what am I looking at? functional role present?) into meaningful interactions, i.e. scanability, further (inter)action, which leaves us with the following

Guidelines for Visual Web Design

  1. Set initial expectations by communicating what kind of information it provides.
  2. Provide a way to quickly scan that information in order to locate something of value.
  3. Allow people to immerse themselves in the information they want and explore other relevant information when they choose to.
Suggested reading: