
A few months ago we set up five Flickr groups around several UX topics. Every month we will try and make some sense of the uploaded material. This month we selected the UX Errors group and will look at examples of issues that arise when proper attention isn’t paid to two very important components of successful user interface design: Perceived Affordances and Designing for Task Flow.
Perceived Affordances
In The Design of Everyday Things Don Norman introduced many designers to the concept of affordances, which he would later clarify as “perceived affordances”, or the actions the user perceives as being possible based on how an object is presented. For example, if your design includes a “button” make that button look pushable.

Posted by Adam Connor
Push me. Wait… you can’t
The ATM example suffers from some misrepresentation. The labels for the physical buttons are styled with bevels, commonly used to represent buttons in GUIs. As a result, many users try to press them, only to realize after a few attempts that the buttons are actually to the right and left of each label. In this case, objects give off an inaccurate perceived affordance.
It’s not uncommon for ATMs to have physical buttons and digital label displays. In this situation, it looks like someone thought that adding a little visual “excitement” to the labels would be an improvement. If simple, plain text labels had been used, people would most likely have experienced less confusion.

Posted by Olivier Lorrain
Where’s the Button?
In the gas pump example people tended to press the octane number, as evidenced by the fingerprints around the “87″, when choosing a fuel. This happened despite the “Push to start” label on the actual button and the arrows pointing to them. In this case, there isn’t enough emphasis given to the real button in comparison to the large yellow square label. Which begs the question, why not just make the yellow square the button to begin with?

Posted by Andreas Popp
Which way is up?
In our last perceived affordances example, we have three components, all with a triangle/arrow pointing up, all beveled from the panel on which they are presented. Which one do you push to direct the elevator up?
The two arrows on the top are lights, which indicate the direction the elevator is traveling, while the lower button is the actual call button. Many users pressed the lights in order to call the elevator. Why? Most likely because the bevel caused people to perceive them as buttons. Also, the lights have a higher visual significance than the smaller triangle on the actual button. Had there simply been no bevel around the two lights, it’s likely there would be less confusion and more people would find the real button first. That’s not to say that the button itself couldn’t use a bit more visual prominence in it’s display too.
Designing for Task Flow
When I was in grade school there was an exercise we did where each student had to write instructions on how to construct a peanut butter and jelly sandwich. The teacher then attempted to construct the sandwich according to those instructions verbatim. If an instruction left something out, small details like removing a slice of bread from the bag containing the loaf, the teacher would stand there and act stumped until the student modified their instructions to be more specific.
The purpose of the exercise was to give students an appreciation of the fact that even simple tasks are comprised of a multitude of steps, and that finding the right level of detail and sequencing for those steps is critical to user’s success and satisfaction.

Posted by Eugenia Ortiz
Follow the Arrows
In the example to the right, there appears to be some attempt at sequencing in the digital display as well as from the large “2″ at the bottom of the device. In this case however, some considerate and/or frustrated individual(s) has taken it upon themselves to try to make up for the devices inadequacies by adding additional instructions and labels.

Posted by Frank Farm
Easy as 1, 2, 3
Our second example also uses numbers, in addition to a list of instructions, to provide guidance. Yet the arrangement of components and labels gives a perception of chaos that even a well written set of instructions can’t overcome.
Both of these interfaces exemplify that in user interface design, identifying a sequence of actions is not enough. Numbers and lists, while somewhat helpful, should be used in conjunction with a logical and sequential arrangement of controls and inputs.
Johnny Holland’s Flickr Groups
Observations are a critical tool in any designer’s tool set. They provide us with in-site on things we should do, shouldn’t do and could do better. Many of us photograph our observations to preserve them, to keep them as reminders, learning tools that won’t be lost in the background when our next big breakthrough comes along. We also share our observations so that we can learn from and educate others. So that we can build a stronger dialog and further conversation.
To that extent, Johnny Holland has established five Flickr groups, so that we can share, discuss and learn from eachother’s observations.
In addition to the UX Errors group, where we collect examples of design decisions that have a negative impact on individual’s interactions with a product and overall user experience, and from which this month’s examples were taken, we have:
- Daily UX: collecting pictures of everyday user experiences, good or bad.
- UX Sketches: collecting sketches of products, interfaces and ideas
- UX Patterns: collecting examples of interface and interaction patterns.
- UX Events: collecting photos from UX conferences and meet-ups around the world.
Like any collaborative effort, these groups are what we make of them. So please join, share your photos, comment and discuss. And if you have any ideas on how we can improve the groups or better utilize them, please let us know.
April 2nd, 2010 at 2:17 pm
[...] This post was mentioned on Twitter by W. Gene Powell, UX Tweeter. UX Tweeter said: Perceived Affordances and Designing for Task Flow http://bit.ly/ckylHo [...]
April 2nd, 2010 at 2:19 pm
Here’s an example of properly designed ATM with hints on where to push. Never mind the labels in Russian. :)
http://www.artlebedev.ru/everything/soyuznick/atm-interface/
Tiny typo I guess:
“had to wrote instructions@”
April 2nd, 2010 at 3:08 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by gpowelldesign: Perceived Affordances and Designing for Task Flow http://bit.ly/ckylHo...
April 4th, 2010 at 4:42 pm
[...] Perceived Affordances and Designing for Task Flow [...]
April 7th, 2010 at 6:16 am
As a moderator/curator of three of the new JH flickr groups it’s been a lot of fun actively looking for examples of good and bad UX and interfaces in general to photograph and share, particularly real-world examples rather than software/web interfaces (I’m not fond of publishing screen shots on flickr).
April 9th, 2010 at 12:36 am
[...] Perceived Affordances and Designing for Task Flow [...]
April 20th, 2010 at 5:34 pm
“Which begs the question, why not just make the yellow square the button to begin with?” You’ve misused “begs the question” which is a type of logical fallacy. I believe you intended to use “raises the question.”
April 22nd, 2010 at 10:19 pm
[...] is presented. For example, if your design includes a “button” make that button look pushable. Read more › Copyright © 2004 – 2010 Reflexion Studios All Rights [...]