Make your users feel smart by designing a website that works exactly how it’s supposed to, with website affordance in mind
Want to know a great way to confuse, distract and drive away new users? Design a website like a print ad. Go ahead, throw underlines under things that aren’t hyperlinks. Over-design your button graphics so nobody knows that they’re clickable. While you’re at it, make it as hard as possible for someone to figure out how to get from one page to the next.
Design it like a maze that only the really, really smart people can figure out.
Or…design your site the way your users expect and want you to.
[text_ad]
Proper affordance in website design means something that is linked should look like it is—and that which is not linked should have no underlining or color-coding. Good affordance means you aren’t making the user mouse-over the page looking for links. Good affordance also requires a website publisher to understand how different age groups expect a website to behave.
In summary, “affordance” is a term that simply means that something does what it looks like it will do, or behaves in the way that you think it should behave. If you see a round doorknob, for example, you expect it to turn.
The mental model of a user
Once users become familiar with a few websites, they have a mental model of how a website should work. Most people learned how to search using Google, so they expect to get the same experience on your site that they get at Google.
For a long time we would have said all hyperlinks should ideally be blue and underlined, for that same reason – Google has taught web readers to click on things that are blue and underlined. Recently, Google removed the underline from search results, as have many websites.
Websites with good affordance do, however, still color-code their hyperlinks so they stand out on the page rather than blending in with text.
Many people also learned how a product page worked by frequenting Amazon.com, so they think this is the way a website should catalog their products.
You can either fight the convention or go with it. But unless your site is big enough or strong enough to change a user’s mental model, you should ensure that the links and buttons on your site include good affordance.
Tips for creating better website affordance
- If the user is expected to execute an action, use a button with a clear, unambiguous label, placed in a logical location for the desired outcome.
- Text links should either be underlined or a different color, to signify that the text is a hyperlink. Once the user has visited that page, the link should change color so they can remember what they’ve already seen.
- Test the colors of your buttons on your website. Human beings associate the color red with “stop,” which has proven for many publishers to be an optimal color for the buttons that they most want their users to click.
- Do not create black print-colored hyperlinks that blend in with the content if you want a user to click on them.
The link affordance test
A great affordance test is to print off web pages in grayscale, give a test user a yellow highlighter and ask them to highlight anything on which they think they could click.
The first thing you will notice is that anything that is underlined will get highlighted. Those words that may or may not be colored but which are not underlined will most likely not look like links to your test user. Despite Google removing underlines, I think you’ll find this is still the case in user tests for years to come in older users.
Headlines that are not linked might also get highlighted because they are different in size, weight and location to the main content, all possible visual cues to a desperate information seeker. Users may also highlight images that are not linked while overlooking images that are linked based solely on subtle cues like outlining, drop shadows, and 3-D effects.
Good affordance will dramatically improve the usability of your website and your user’s experience with your brand. What have you learned about affordance on your own website when conducting user testing?
