Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

No Instruction Necessary: part 2: Fundamental and Default Affordances

February 10, 2006

If you read many of the online debates over the merits or shortcomings of Google.com’s main interface, you’ll notice an unfortunate tendency on the part of some to discount all of the points made. They’ll suggest, “heck, nobody goes there anyway. They just use the search bar in their browser.” This seeming valid observation dies a horrible death of irrelevancy in the face of the enormous volume of pageviews logged every day on Google’s main page.

So the thing had damn well better work. And it does …at least part of it does. Here’s the interface in question:

Google's interface

As I’ve noted in previous articles this is a very successful page for a very successful company and, as I’ve also noted before, the page has its problems. However, the problems are not so great that they interfere greatly with what is the primary function of this page: search.

Here’s what the vast majority of Google’s users see when they visit this page:

Google as seen by most

It’s important for aspiring designers to understand that ideas like the one cited at the start of this article are worthless, even dangerous. Simply assuming that the users you’re designing for behave online as you do is naïve and unprofessional. Don’t do that.

And that’s why this page succeeds. Even though the secondary and ancillary functions possible on this page are nearly invisible, the page succeeds fairly well because it affords people searching for things by typing in a key word(s) and hitting one of the buttons. This is what the vast majority of users go there to do. Even the pause of confusion that confronts all first-time users and many other users – “which of the two buttons am I supposed to click??” – is not too great a hurdle for most users to overcome.

Affordance by Default

Whereas Google’s search function succeeds in the face of ill-placed ancillary elements, some website mechanisms succeed by default – because the rest of the page is too confusing or simply uninteresting. Sometimes, this is even done on purpose. While it seems anathema to design, there’s seemingly a place for this in our endeavor when it helps to convert specific behaviors.

You can find examples in many places outside of web design, especially in art. Successful art often employs misdirection and obtuse emphasis in order to focus the viewers’ attention on or away from specific features. Here is one such example from the art of bonsai.

A famous trident maple bonsai

On the whole, this famous trident maple specimen violates many of the fundamentals of good bonsai. However, the “whole” is not the point here. The main structure of this tree has been kept quiet …plain almost. This is so that the viewer’s eye is directed to the primary feature of this tree – the wonderful development of the base and surface roots. The artist means for this tree to be an exercise in fantasy and forced perspective, so he rightly keeps everything rather uninteresting except for the “fantastic” feature.

Whether by intent or simply by default in the face of otherwise poor design, Amazon.com’s main page exploits this method of focusing viewers’ attention. Have a look at the mainpage:

Amazon.com's main page

The overall design and layout of this page is weak, especially at higher monitor resolutions. All of it, that is, except for the search mechanism at the top of the page (and the "save $30 today" thingy). That part is very well designed and acts like a shining beacon on the page that attracts the eye by default – because everything else is confusing and lacks direction and cohesiveness.

Consequently, this page affords searching/finding things that shoppers are looking for on the site; something for which Amazon.com is deservedly famous.

Diminished Affordance

A site that I beat up recently is Whitehouse.gov. This site has an unfortunate mechanism at the top of all of the pages:

White House.gov's confusing interface

Here, the awkward configuration of the email updates link and the site search form creates confusion. The result affords neither searching the site nor signing up for email updates. The two interface elements are simply too close together, with the text and the search box arranged in a confusing manner.

True, many site visitors will be able to eventually understand what’s going on and use one or both of the two functions, but not likely without some mulling things over and some second-guessing. In any event, few visitors will be absolutely certain they know what will happen when they click either of the two links there.

Other Affordances

These have been examples of affordance based on composition. The interfaces cited above work or don’t work based on how the design and layout suggests interaction. Hopefully, these simple examples offer clues from which you can extrapolate more solutions and avoid gaffs with your own design efforts.

In the next article in this series we’ll take a look at some specific Web page interface elements, like links and buttons, and examine how they communicate advisable or intended interaction.

Archives

Archive

Practice