Affordances: Instructions Not Included

Thanks to everyone who signed up for a lab and spoke with me during this year’s Online Marketing Summit. I hope the sessions were helpful and that you got some takeaways to implement and improve the usability of your website. However, the things we discussed in those 15 minutes are really the very tip of the iceberg when we talk about usability but I am happy to see you are all headed in the right direction.

One thing I noticed during quite a few of the labs was many websites had instructions telling the user what to do on the page. I am not going to quote specific examples, but instructions such as “Click on a link to the right to navigate” or a tool that has a small help icon saying “How does this work?” are telltale indications that something is seriously wrong with the site. A lot of times these instructions are added on after customer support receives call after call asking how to find something or how something works on the page.

If your site requires these instructions, it means your users are spending more time figuring out how to use the site than they are actually browsing, consuming information, and ultimately, buying from your site. Navigation and tools should be as intuitive as possible, and we can achieve this by taking advantage of affordances. Affordance basically refers to how an object’s appearance suggests how its method of action or function is. If something looks like a button, its affordance tells users that it can be clicked on and that there is a specific action that will occur with it.

Whenever I talk about affordance and intuitiveness, I am always reminded of a recent 60 Minutes story about why our society is becoming more dependent on not only technology, but also the Geek Squad / Tech Support services of the world. In the story, Tom Magliozzi from NPR’s “Car Talk” talks about why expensive cars have so many buttons and complicated features, and says, “If you’re buying a $50 or $60,000, or more, car, you don’t want pedestrian-looking buttons. You want something sophisticated…”

Basically, complicated interfaces and overwhelming features equals sophistication. This is probably the best explanation to poor usability and the worst mentality to have when designing a product or a website. This is also probably why there are so many “iPods for Dummies” or “TiVo for Dummies” books out there which are pretty much instruction manuals for products that already have instruction manuals!

When a product or website takes advantage of affordances, it helps reduce or eliminate the need for instructions. Amazon.com’s Ring Creator does a good job at taking advantages of the affordance of sliders and checkboxes to help facilitate action with their tool:

The checkboxes in this case clearly indicate a filtering function, while the sliders indicate the ability to set a range. You will notice that Amazon did include instructions on the page, which is okay as long as the instructions are serving as a backup and not as the sole primary cue. There are a few things that could be adjusted with this page, such as adding numbers 1, 2 and 3 at the top where the process-steps are indicated, so while this tool is a great example of affordance, it is still definitely not perfect in terms of general usability.

Always keep affordance in mind when designing a web site. Do links look like links? Do buttons look like buttons? Are checkboxes or radios more appropriate? Can someone use this site without instructions? While there are plenty examples of poor usability in the real world, determined users can usually compensate by learning and adapting to them. But just because someone will take hours to learn how to use all the buttons in their $60,000 car, it doesn’t mean that they will for your website. Users view the web as a tool, as a means to reach their end goal, and interactions are fast and short. So take advantage of affordances and get rid of all those instructions, unless you plan on releasing a “My Website for Dummies” book, too.