Tuesday, September 4, 2007

User Interface Affordances Still Need Support

A fundamental principle in usability design and interaction design is something called an affordance. An affordance is a term made popular by Don Norman in his book The Design of Everyday Things. Essentially, an affordance is the way an object looks, how it is designed or how it is presented to suggest a certain action or usage.

For instance, the angle or shape of a chair suggests that you use it to sit on. The rounded, softer and curved portion of a knife or hand tool suggests this is where you handle the instrument. Just take a look around and you’ll be surprised all of the affordances you see in the design of everyday items you use.

It’s even present in our technology.

Most software and web applications have affordances built into their interface to suggest certain actions or usage. Your typical web browser most likely has left and right arrow buttons near the top to suggest your web surfing experience is much like reading a book. If you want to turn back to the previous page you were viewing, you would click the left arrow button or “turn the page to the left”.

Good user interfaces will have these intuitive features built in. Still, there is a need for support systems to be in place in order to guide new users who may not hold the same paradigms or mental models of the persona you developed your application around. The support provided, usually through carefully designed tutorials or quick start guides, will give the user a sense of what is this (the application), what do I do with it and how will it be relevant to me.

That’s good support for any application.

1 comment:

Richard I. Garber said...

A good example of an affordance as a simple component of a user interface is the old sign in screen for MSN Hotmail. On the top line just left of center there is a light blue button clearly marked “Sign out”. The new Windows Live Hotmail version is much less clear. They moved the sign out area over to the top right. Also, they eliminated the box around the words “Sign out”. This is not progress!

A bad user interface invites you to do exactly the wrong thing. I remember laughing out loud at a warning sign in a hotel room in Denver. It had a “no coat hanger here” symbol and wording telling the patron not to use the fire sprinkler head on the wall as a clothes hook. The sign was needed because of a rotten combination of design features.

They had located the sprinkler head just above the center of the folding door to the closet. Both the iron and ironing board were stored inside the closet. A wall outlet was right next to the closet. The coat hangers had small hooks that were meant to only fit the wire shelving in the closet, but not your larger wooden closet rod at home.

However, the small hook would fit perfectly on the sprinkler head, which unfortunately used a breakable glass bulb as the temperature sensor. A weary traveler unpacking wrinkled clothes would naturally find the iron and hangers in the closet and then close the closet door, set up the board, and start ironing. Next he would get out a hanger, look for a place to put his first freshly ironed garment, and then set off the sprinkler system (which also would cause the entire hotel to be evacuated).