Perceived Affordances and Designing for Task Flow

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.

ATM screen with button labels styled to appear 3-dimensional as if they were labels themselves

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.

Photo of gas pump octane selection buttons

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?

photo of elevator direction lights and call button

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.

Photo of device illustrating poor task flow

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.

photo of parking ticket dispenser

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.

Adam Connor

Adam Connor is a Senior Experience Designer with Mad*Pow. His background in Computer Science and Film & Animation provides a unique perspective and approach to the field of User Experience Design.

8 comments on this article

  1. Pingback: Tweets that mention » Perceived Affordances and Designing for Task Flow Johnny Holland – It's all about interaction » Blog Archive --

  2. Pingback: uberVU - social comments

  3. Pingback: Weekly Roundup: Design Related Links #14 « Discovery Session… by Gerard Dolan

  4. 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).

  5. Pingback: Interact Seattle » Blog Archive » User eXperience Digest No. 18

  6. Kay Peddleson on

    “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.”

  7. Pingback: Perceived Affordances and Designing for Task Flow – Reflexion Studios