I was paging through my copy of The Design of Everyday Things by Donald A. Norman the other day when I came across the fascinating section on affordances. In the book, Norman describes an affordance “as perceived and actual properties of [a] thing, primarily those fundamental properties that determine just how the thing could possibly be used.” It started me thinking about how important affordances are in web design, as well as how much we take them for granted.
To Click or Not to Click
There are a number of design conventions that are employed on the web to let users know what is clickable and what isn’t. While some of these techniques are glaringly obvious, others are much more subtle. Either way, they are all very important.
First off, buttons and links should look like buttons and links. History and practice provide us with a number of design elements that differentiate clickable elements from static elements. Text links are usually a different color and they are often underlined, just like this. (I wonder how many readers will try to click that.) Graphic buttons, or those that are, or use, images are designed in such a way to give them a ‘clickable’ feeling. They are often 3-dimensional, glossy, big and bright.
Secondly, buttons should behave like buttons. By this, I don’t mean executing some action after the button has been clicked (though that is important as well!). What I mean is buttons should react to user input and provide feedback. In general, buttons provide feedback for mouse overs and mouse clicks. There is no standard feedback, but links should change color, size, position, orientation, etc., etc. Another excellent form of feedback is changing the cursor. Many people don’t even notice that the default arrow cursor changes to a finger pointing when they hover over a link. Try hovering over this text. I bet you really wanted, and possibly even tried, to click that.
Just the other day while developing an interactive application in JavaScript, I used the addEventListener method to execute a function on a mouse click. While testing I hovered over the element to which I attached the listener, and my cursor failed to change to the finger pointing. Even though I knew that I programmed it correctly, I was still unconfident that anything would happen when I clicked. This is the power of affordances. (The solution for this is quite simple; add ‘cursor:pointer’ to the CSS rule.)
Beyond Buttons
As the web becomes more and more complex and website functionality increases, the need for affordances is growing. Examples of affording complex UI functions (in this case, drag and drop) can be found employed by none other than Internet giants, Yahoo and Google.
Yahoo’s MyYahoo page is a customizable homepage built on the concept of content blocks. Blocks can be added, removed, flipped and flopped. To simplify the organization process Yahoo introduced a drag and drop functionality that allows users to drag and drop columns into a new order. Yahoo uses the ‘move’ cursor on mouse over to let users know that blocks can be dragged and dropped. Visit the MyYahoo page to try it for yourself.
Google Maps uses a drag and drop like function to navigate maps (I supposed it could just be called a drag, but that sounds bad…). Google Maps changes the user’s cursor to a closed hand when the mouse button is down. This suggests that the map has been ‘grabbed’. I think the experience could be improved if the cursor was changed to an open hand on mouse over. Visit Google Maps to try it for yourself.
Affordances are at the heart of UI design, and can vastly improve the user experience. When used correctly, they increase results, and open the web up to a greater audience and a wider range of functionality.