Michael Gaigg: Über UI/UX Design

24Oct0

Highlights of Week 42/2010

Posted by Michael Gaigg

4Feb0

15 = Quince or a Really Cool Pattern Library

Posted by Michael Gaigg

Quince is an online repository of UX patterns. It was developed by Infragistics and released to the public today. It's free and open so that anybody can contribute with their knowledge. Silverlight required!

Yes, Quince is not the first pattern library, there are plenty of other excellent pattern libraries like Yahoo! Design Pattern Library, Open Source Pattern Library, UI-Patterns.com and many more, but it surely is a very comprehensive and good looking one.

What are Patterns?

A pattern is a reusable, best-practices approach used in the design of a solution to a commonly-occuring problem within a specific context. A pattern is not a finished piece of code or design that can be used as is. Rather, it reflects the sum total of a community's knowledge and experience or expertise in a given domain.

I strongly recommend reading the interview about Pattern Languages for Interaction Design with Erin Malone, Christian Crumlish, and Lucas Pettinati.

Social Interface Patterns

Another very interesting approach to patterns is taken by Christian Crumlish and Erin Malone who are currently working on a book for O'Reilly Media.
Check out their Designing Social Interfaces patterns wiki and contribute to their upcoming book. Very interesting approach!

Antipatterns

Antipatterns are common UX mistakes to learn from. Probably the most prominent antipattern is "Click here" also known as "Navigating in a mysterious way". Read a very interesting Antipatterns blog entry by Peter Hornsby.

Controversy

I think there is no doubt that patterns can boost our development process and reduce the amount of work needed to re-invent common elements. Study them and try to enhance on top of them!

Antipatterns on the other side might not be that useful. Even though I agree with Scott Berkun in his line of argumentation about Failure: the secret to success that it is important to learn from one owns mistakes and failures but that might be also overrated like Jason states in Learning from failure is overrated: "There’s a significant difference between “now I know what to do again” and “don’t do that again.” The former being better than the latter."

What do you think? Have I missed something or somebody?

10Dec0

Design Guidelines: Breadcrumbs

Posted by Michael Gaigg

Hansel and Gretel using breadcrumbs to find their way home.

Hansel and Gretel using breadcrumbs to find their way home.

Nobody wants to get eaten by a wicked witch and neither do Hansel and Gretel in the tale Hänsel und Gretel by the Brothers Grimm. That's why the kids, as they are taken into the forest, leave little breadcrumbs behind so they can find their way home. I love the story (especially when the witch climbs into the oven to be baked) and the fact that Hansel and Gretel find their way home and see that the evil stepmother has died and everybody can live happily ever after.

Even though the metaphor of Hansel and Gretel is probably the origin of the term Breadcrumbs it is flawed because breadcrumbs do not represent the actual path the user has taken to any given page, but instead the optimal path from the homepage to the current page in the hierarchy.

Fairytale aside, here is how Breadcrumbs should be designed and implemented:

Design Guidelines for Breadcrumbs

  1. Display breadcrumbs horizontally
  2. Progress from the highest level to the lowest, one step at a time
  3. Start with the homepage and end with the current page
  4. Apply a simple text link for each level (except the current page)
  5. Separator between levels is simple and one-character (usually “>”)
  6. Levels show the site hierarchy – not the user’s history

Code Sample / Template

End result:
Example Breadcrumbs

<div class="breadcrumbs">
<a href="#">Home</a>
<span>></spanv
<a href="#">Topic</a>
<span>></span>
<a href="#">Sub Topic</a>
<span>></span>
<strong>Node</strong>
</div>


div.breadcrumbs {
background: url(bg-breadcrumb.png);
overflow: hidden;
margin: 0;
padding: 0;
height: 2.8em;
line-height: 2.8em;
color: #666;
}
div.breadcrumbs a, div.breadcrumbs strong, div.breadcrumbs span {
float: left;
overflow: hidden;
height: 2.8em;
padding: 0 1em;
font-style: normal;
}
div.breadcrumbs span {
background: url(bg-breadcrumb-arrow.png) no-repeat left center;
overflow: hidden;
padding: 0 0 0 1em;
width: 0px;
filter: alpha(opacity=40);
opacity: 0.4;
}

download bg-breadcrumb.png | download bg-breadcrumb-arrow.png

References