One of my favorite speakers / sessions from this year’s BarCamp Nashville event was Justin Davis and his presentation, The Design of Everyday Web. I wasn’t sure what to expect about the subject when I sat down, but Justin delivered. He is an incredibly engaging and highly entertaining speaker. He could have been talking about photosynthesis and I still would have been rapt.

“You got Chlorophyll Man up there talking about God knows what and all she can talk about is making out with me. I’m here to learn, everybody, not to make out with you. Go on with the chlorophyll!”

Sorry, Billy Madison quotes sometimes just spew out of me. I digress…

Justin defined three rules that are crucial to killer web design. We’ll start off with the first one today and work through the others in upcoming posts :

An example of a bad affordance. This is an embarrassing moment waiting to happen.

Rule #1: Leverage Affordance
In the design world, an affordance is something that communicates an objects use by its design. Basically, if you have to label an affordance, then you’re doing it wrong.

Take the case in point to the right – an image Justin used in his presentation. This door has a handle, which conveys to a person that this door should be pulled to open it. However, it’s labeled Push because someone totally missed the mark. The proper affordance should have been a metal plate, which would communicate by simple means that the door should be pushed to open it – without the use of labeling.

How this translates to web design is by making sure you include intuitive usability into your site. For instance, a hyperlink typically looks like this. Did you just click on that? Nothing happened did it? It wasn’t supposed to, but you were inclined to click on it because I suggested to you that it should be clicked. It was blue, underlined, and the cursor changed to a hand when you hovered over.

That’s how an affordance works in web design. If you want a user to interact with something than you need to create the proper affordance to communicate that interaction to them. A great way to do this is to mimic IRL (In Real Life) properties. Using an inner shadow on a text field, for instance, will give that property the illusion of depth, like a box, which will tell the user that something goes in there.

Remember, great web design means including the proper usability. If it’s not user friendly then you’ll have a pretty website without any traffic.


Coming up next time, Rule #2: Make Relevant Parts Visible

Justin has made his presentation available on SlideShare here.
Justin’s BarCamp Nashville Session Page

Connect With Justin –
On the web: http://usabilitymatters.net
Twitter: @jwd2a


Image source: wonderdawg777