The ABCs of Website User Experience

Affordance

Definition: A situation in which an object’s sensory characteristics intuitively imply its functionality and use. A lever, by being an appropriate size for grasping, suggests pulling it. A blinking red light and buzzer suggests a problem and demands attention. A chair, by its size, its curvature, its balance, and its position, suggests sitting on it.

Toddlers and babies are great teachers of affordance if you take the time to observe them. They understand the parts of toys that are meant to be played with: buttons that can be pushed, blocks that can be stacked, and wheels and balls that roll. Give them an iPhone and they might expect that—due to its shape—it’s a hammer or frisbee.

In web design, the designer has control over perceived affordances that can improve the usability of an interface. However, affordance in web design is unfortunately taking a beating right now with the misapplied usage of the popular Flat UI aesthetic.

A QUICK AND DIRTY DEFINITION OF FLAT UI

The “flat” style emerged as a direct reaction to the skeuomorphic look used by some of Apple’s products and other sites/software that used real-world metaphors in their interfaces. Pushing aside the rampant use of paper textures, stitching, pseudo 3D environments, and retro interfaces, the Flat User Interface gained exposure with Windows 8 Metro and the popular designer tool Layervault and many designers have followed suit.

On one hand, I have to applaud the flat UI for emphasizing simplicity, readability, and best of all, the side effect of reducing page loading speed by relying on CSS and not loading images.

But like skeuomorphism before it, in the wrong hands, flat UI can be significantly detrimental. A flat interface simplifies, but it can also comprise the clarity of important elements and be counterintuitive by not conveying real life metaphors that people are familiar with, such as those dealing with physicality, motion, sounds, and gestures.

The most common metaphor in web design is the button. In the real world, we interact with buttons constantly: the keys on your keyboard, the doorbell to your house, the power button on your phone. When you see a button, you know exactly how it’s going to behave. When flat UI is executed in such a manner that the affordance of an interactive element like a button is obscured, not only does the user encounter a certain level of confusion and frustration at the lack of visual cues, but you as the site owner suffer from a lost conversion.

Good design is honest, and with honesty comes trust…There is delight in using a beautiful interface.

Meng To

Banner Blindness

Definition: When website visitors consciously or subconsciously ignore banner-like (e.g. colorful and animated) information.  Also be called ad blindness.

The Nielsen Norman Group conducted a case study called Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility in which a UK user was asked to identify special deals from a washing machine company on this page.

What do you think? Could the user answer the question? Given that the biggest item on the homepage — in both screen space and font size—is an offer of “£100 off selected Siemens appliances” next to a large photo of a washing machine, you would think so. For good measure, the same offer is featured in a small promotion tile in the right margin.

The user failed the task.

Banner blindness was one of the top reasons attributed to the failure of the usability test. The user assumed the banner was a big ad. Even the small promo box seemed like an ad because it was in a typical location reserved for paid ads.

Why should you care about banner blindness for your site? Banner blindness often occurs when users experience a large slider or banner on your homepage. Here is a good example of “banner blindness” from an eye-tracking test of the Virgin Megastore website:

Sliders and large banners on a homepage unfortunately fall prone to banner blindness. Brad Frost recently wrote a great article on the topic of large sliders and asks his readers to participate in The Brad Frost Carousel Challenge by publishing their analytics. Reading through the comments, you’ll find a few people chimed in on their experience with this specific UI.

One story is of Erik Runyon and his experience with the Notre Dame site, where he tracked how often users switch the slide, total clicks, and total clicks per slide. Just like data we find in SERP and PPC positions, the click-throughs occurred mostly on the first slide, dropping sharply off for the subsequent positions. Furthermore, only 1% of total site visitors clicked on the carousel at all.

I’m not saying that all sliders are necessarily bad for design, but think long and hard on the value of using one and whether it makes sense in the long-run. Are you just filling up space with stock photography of obviously fake customers? Is there an entire slide dedicated just asking users to find your company on Facebook? Is every slide an abstract branding statement? Do you even change the contents of your slider? Keep in mind that sliders and banners like these offer no real value to a user seeking to convert immediately.

Click Depth

Definition: Click depth is the number of navigation clicks a visitor has to perform to reach a particular web page or goal.

On one hand, a low click depth can help users more efficiently perform actions without being distracted or frustrated — and consequently depart for other venues. One-page checkouts on ecommerce sites are a common example showing the benefits of a low click depth. For SEO, flat architecture can also improve search engine optimization and visibility.

But don’t jump the gun and conclude that “less clicks = better.” Nor should you be adding superfluous clicks in a website. But designing an interface solely on making “as few clicks as possible” is how a site’s architecture can be bloated and crammed with cruft.

Often as a result of reducing click depth, information architecture falls prone to choice apathy. Websites opt to list out as all the possible choices in hopes that this will improves higher satisfaction and a lower click depth to the conversion goal. However—contrary to belief—the more choices a site has, the harder it is to understand the interface or options given.

Studies show that having too many options often leads to decision paralysis and frustration. According to Hick’s Law, the time it takes to make a decision increases with the number and complexity of choices. As the decision time increases, the user experience suffers.

Barry Schwartz discusses his own research on the how choice has not made us freer or happier, but rather more paralyzed and dissatisfied. Check out his TEDtalk on the topic.

Now, let’s get back to click depth.

Usability tests have long challenged the so called three-click rule, an unofficial theory that a user should be able to find any information with no more than three clicks. But contrary to this belief, people won’t leave your site if they’re unable to find the desired information in three clicks.

Click depth does not affect either user satisfaction or success rate.

As Lukas Mathis points out in his explanation of the psychological behavior called “satisficing”:

A great user interface is not one where each goal can be reached with the smallest number of clicks possible…but one where each individual click is as obvious as possible. As long as users feel that they are getting closer to their goal with each step, they don’t mind drilling down into a deep hierarchy.

Jakob Nielsen’s usability tests found that “users’ ability to find products on an e-commerce site increased by 600% after the design was changed so that products were 4 clicks from the homepage instead of 3.”

Don’t focus on click quantity; focus on click quality. Optimize and design for an information architecture that makes the next step as obvious as possible.