denegro.com | alberto romero

On design patterns

May 27th, 2010 View Comments

Last year I was asked to give a one day long Interaction Design class for a client. One of the topics I brought them was interaction design patterns. In case you are not familiar with the term, let’s quote Wikipedia’s entry for design pattern in software engineering, as its definition works well for us too:

A design pattern is a general reusable solution to a commonly occurring problem.

To illustrate the matter, I showed the attendees some blurred screenshots of broadly used patterns and asked them if they could tell what interaction was behind the pattern:

Laying out search boxes in a search-boxed shape is a win-win: users will recognize them at a glance and, as a designer, you won’t have to pull your hair out in order to find a good solution.

Pick the right pattern

In his last post, Juan Leal pointed out a real life example of the trade-offs of taking the risk to find new solutions to old problems:

By laying out a simple crossroad in a roundabout shape, what “Ayuntamiento de Madrid” was actually doing was giving drivers a roundabout that they couldn’t round about.

The dark side

But let’s take a look at the other side of design patterns: the other day, I was checking Twitter and saw that someone was not naked that day. I clicked through the link and landed in a page like this, beautifully crafted by our friends at Peercouture:

Because I am already registered, I wanted to login to check what my peers were wearing, and what did I do? I wrote my email and password into the “request an invite” form.

Even though the label properly stated “Your name”, all I saw was a login shaped form, and I went straight to it. To prove my point, Álvaro made the same mistake the day after, and the great team at Simplelogica quickly fixed the form short after that.