Many design blogs are full of helpful howto guides and tutorials on using Photoshop Illustrator, Flash, etc. This is great if you have a design in mind that you wish to accomplish. But how do you actually design something?
Design concepts explained
The design concepts explained series aims to explain various processes of design. If you’re itching to use those Photoshop tutorials but are stuck for inspiration, if you wish to find out what a ‘designer’ actually does, or if you are a seasoned pro who wants to refresh their memory, then read on!
Affordance
This week we focus on the concept of Affordance. Designers in many different specialties use it, but we mainly concentrate on its use in graphic design, user interface design and game design.
The term ‘Affordance’ has a strong basis in psychology. It describes the understanding of how we interact with an object. To see this process in action, imagine a two-year-old child with a pile of shapes and a hollow box with silhouettes of those shapes cut into it. To play the game, the child must fit the correct shapes through the correct holes. This seemingly fun game is actually a trick – it’s not there to entertain, but to educate. It’s teaching the child how objects interact with other objects, and helps build on their understanding of how the world works.
Affordance in game design
So how is this concept used in design? The game ‘Chronicles of Riddick’ manipulates our understanding of a real-world object to give us a clue of how to interact with the main menu.
Thanks to toy designers tricking us into learning during our childhood, we can understand that this cube has six sides and when an option is selected, it rotates to display different options. Our understanding of how this object works in the real world allows us to use this menu intuitively.
Affordance in iPhone apps
Image may be NSFW.
Clik here to view.
Let’s use a different example, this time from an iPhone application. In just a few seconds of seeing this interface, we intuitively know how to turn each setting on and off. This interface has been designed to afford pushing and afford switching to manipulate the controls, without any instruction to the user.
Affordance in web design
Affordance is used abundantly in web design. Perhaps it is used a little too much, especially when it comes to those 3D buttons! Below are a few examples used on well-known, popular websites.
Image may be NSFW.
Clik here to view.
Summary
Before seeking out the Photoshop tutorials on how to make buttons with bezels, tutorials on how to use gradients to give the appearance of 3D buttons, or guides on how to make those shiny reflective round buttons that look lickable, remember to ask yourself “why use affordance?”
The examples shown above help users understand how to interact with the interface. At the end of the day, design is all about the user and these concepts should be used for their advantage, and not clutter, complicate or hinder the interface.
Further reading
Book (link to Amazon UK): Interaction design beyond human-computer interaction
This book covers many aspects of interaction design, of which affordance is a small part. A recommended read for anyone involved in interaction design.
Video (link to iTunesU): RWTH Aachen University, Designing Interactive Systems
These videos give a strong introduction into interaction design and cover many concepts, of which affordance is one of them.