Increase Your Usability and Website ROI with Perceived Affordance


Perceived Affordance, Usability and Online Sales:

One of the most important goals of web site usability testing is finding and fixing perceived affordance issues.  You can increase your usability, conversion and thus your web site Return on Investment (ROI) by improving perceived affordance.

What’s perceived affordance?  For web site owners, it’s the art and science of designing objects like ‘buy now’ buttons in such a way that your web site visitors know just by looking at it that they can click on it.

One of the most important functions of web site usability testing is to evaluate the perceived affordance of links and buttons.  By testing and optimizing perceived affordance of critical objects, such as ‘Add to Cart’ or ‘Buy Now’ buttons, web sites can dramatically increase conversion, and thus ROI.

Definition of Perceived Affordance:

According to Don Norman, the Godfather of design and usability and the author of the book “The Design of Everyday Things” the concept of perceived affordance is defined this way;

“The word “affordance” was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal).

What the designer cares about is whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible).

In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The computer system, with its keyboard, display screen, pointing device (e.g., mouse) and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and clicking on every pixel of the display screen.”

According to William Gaver, there are three categories of affordance:

  • Perceptible
  • False
  • Hidden

By evaluating the design elements that communicate perceived affordance for various objects in your web site, you can determine which category an object fits, and if wrong, take steps to correct it.

Perceived Affordance is Critical for Your Web Site Success:

When you think about your web site, your ROI in fact lives or dies on your ability to successfully manipulate design to improve perceived affordance.  Your web site is primarily a one-way pipe of information, the majority being visual information (with the potential for some audio).  You provide the visual information, and your web site visitors consume and comprehend it (or at least try to).

Because the primary interaction that takes place on your site is one-way visual, you must be zealous in your attempts to understand and evaluate how well you are communicating perceived affordance.  Testing and optimization of elements that impact perceived affordance should be your number one goal, because it directly impacts your conversion rates, and thus your web site’s ROI.

Actions your web site visitors take such as mouse clicks or typing characters, although very important, are never going to happen unless you provide clear, consistent and effective visual clues about how to take actions.  You do this by continually testing and optimizing the crucial elements of your site that establish and communicate perceived affordance.

Examples of Perceived Affordance in Buttons:

Let’s examine a few examples of perceptible perceived affordance in action.  In order to visually communicate that a button is clickable and will enable the site visitor to take action, it is necessary to use design to visually separate, distinguish and illuminate a function.

Click here to view latest job postings

Amazon and perceived affordance

Amazon button

As demonstrated above, uses many design elements to generate high perceived affordance of their ‘Add to Shopping Cart’ button, including use of:

  • Strongly contrasting yellow button color
  • Only use of that yellow color on the page
  • Heavy outline border around button
  • Round strongly contrasting icon of shopping basket
  • Text in button ‘Add to Shopping Cart’
  • Larger font for button text
  • Elongated shape, round on left side, squared on right side
  • Gradient fill in top of button to visually mimic 3-D shape
  • Dark blue background color for surrounding box

Another example is eBay, which creates a high perceived affordance of the ‘Buy It Now’ button.

eBay button and perceived affordance

eBay Button

For eBay, the ‘Buy It Now’ button uses multiple design elements to effectively communicate perceived affordance:

  • Strongly contrasting blue button color
  • Only use of that blue button color on the page
  • Largest sized button on page
  • Text in button ‘Buy It Now’
  • Larger font for button text
  • Strong contrasting colors, white text on blue background
  • Dark gray background color for surrounding box

To provide contrast, let’s examine use of design elements that appear to provide a function, but in fact do not.  This is known as false affordance, and can work against web site visitors.

False Affordance:

A false affordance is an apparent affordance that has no real function.  False affordance is a major contributor to lower web site conversion and lost online sales.  This is because a false affordance breaks the faith a web site visitor has in the web site’s functional abilities, and causes doubt and confusion.

Example of a False Affordance:

eToys False Affordance

eToys Featured Gift

In this example, the prominently displayed ‘Featured Gift’ and photo of the toy seem to indicate that more information about the toy might be available by clicking, but where?  Web site visitors who come across the display are left wondering, because no clear action button seems available for this toy.

A common tool many web site designers use is to make the image of the product clickable.  But that is not the case here.

In fact, there is no action available, the image of the toy is not clickable, nor is the heading ‘Featured Gift.’  There is no way to navigate to the featured toy using the visual designs offered, thus the connection with a ‘false affordance.’

There are many types of designs that can lead to false affordance, some of the more common being:

  • Objects that look like buttons, but are not
  • Photos of objects that are not links, especially if place with photos that are links
  • Placing a blue outline around an image or link, yet no link is present
  • Underlined text that is not a link
  • Use of blue in text that is not a link
  • Form data entry fields that are not active

For web site owners, false affordances are extremely damaging, and cause many more problems than simply lost clicks to a particular item.

By prominently displaying a false affordance on the home page, a web site causes damages including:

  • Lost faith (visitors wonder “is this clickable, what about this, or this?”)
  • Lost focus (visitors spend more time trying to solve a navigation problem than shopping)
  • Lost sales (frustrated visitors will often not complete their task)
  • Lost trust (many visitors will simply leave the site – never to return)

Finding and fixing false affordances should be a high-priority job of every web site owner, especially those who own eCommerce sites – as false affordances cost lost visitors, conversion and sales.

Poor Design and Hidden Perceived Affordance:

As with false affordance, poorly designed techniqes can hurt perceived affordance and can cause major performance issues for web site owners as well. This is referred to as Hidden Affordance.  In the case of poor design, visual clues that a link or function is present are not displayed as visually separate, distinguished and illuminated.

Example of poor perceived affordance:

Dancing Bear Hidden Affordance

Dancing Bear Button

The example above demonstrates a site that provides web site visitors with a display of products available for purchase.  However, the function associated with ‘Checkout Now’ (in this case a link to an online order form) is poorly displayed because it has minimal visual clues as to it’s function, and thus has low perceived affordance.

Among the perceived affordance problems with the ‘Checkout Now’ button are:

  • No button shape around the text
  • Yellow text color is not a strong contrast against the white page
  • No underline when mouse rolls over text
  • Text in button visually close to ‘Back to results’ text
  • Missing a background color to call attention to location
  • Upper left location not typically associated with ‘continue’ action

Improve Perceived Affordance with Testing:

So how do you improve your web site objects perceived affordance – with testing and re-testing.  There are four primary types of testing that can be used to analyze and optimize perceived affordance.  They are:

  1. Expert Usability Review Also called a ‘heuristic review.’ This review uses expert analysis of interaction devices such as buttons, links and related functions against industry standards and best practices.  The best form of an expert usability review is to receive several, since each expert might focus on unique aspects that grouped together form a better picture of what needs to be improved and why.
  2. Usability Testing Using 1-on-1 moderated testing, a web site owner can quickly find problems with task flows for critical tasks.  These often involve issues with perceived affordance.  Because usability testing only needs about 7 or so participants, and because it uses real web site visitors, and can be done very quickly and for low cost, usability testing is a great way to find issues with perceived affordance.  It is the only method a web site owner can use to determine the ‘why’ of an actual web site visitor’s behavior.
  3. A/B Testing Two different versions of a button, link or related object can be tested on your web site at the same time using a traffic split.  50% of the traffic goes to the version that has the ‘A’ version (the original version of the object usually) and 50% to the new test ‘B’ version.  After enough statistically significant results are captured, a winner can be picked based on interaction rate.  A/B testing is pretty reliable, assuming enough traffic is present.  However, it won’t tell you the ‘why’ of the visitor behavior, and of course it might negatively impact your conversion if the ‘B’ test version is worse than the original version.
  4. Multivariate Testing For sites with large amounts of traffic, multiple versions of objects can all be tested at the same time.  This allows for rapid analysis and iteration of the best possible combination of elements.  The downside to multivariate testing is it needs lots and lots of traffic to establish statistically significant results.  In addition, as with A/B testing the ‘why’ of visitor behavior won’t be know, only which combination of elements performs the best.

Conclusion, Increase Your Usability and Website ROI with Perceived Affordance

Perceived affordance is critical to your web site success, and to your conversion and ROI.  Perceived affordance determines how well your interaction object designs communicate their function and use to your web site visitors.  Poor perceived affordance hurts your web site interaction, conversion and sales and results in lower ROI.  You can increase your ROI by conducting testing and optimization with the interaction objects on your web site. An excellent way to identify potential issues and optimizations of perceived affordance is with usability testing.  Continual testing and re-testing ensures you are maximizing your potential usability, perceived affordance and thus ROI of your web site.

For more information about maximizing your web site’s perceived affordance and ROI contact me.

Comments are closed.