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

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.

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.

It’s time to get excited! Many websites are speculatively reporting the release of an Apple tablet in January/February time of 2010. Cnet, Engadget, Arstechnica and Gizmodo are all on the bandwagon. The question “why should we care about what is essentially a 10 inch iPhone?” comes to mind, which is what this post focuses on.

Speculated hype!

The growing hype surrounding a device that has no official confirmation of existing is typical of an impending Apple release. Reading speculative articles on a tablet from Apple can induce copious amounts of Apple-fan-boy drool. It fuels an alterative reality that asks ‘what if?’ and promises to change the world as we know it – forever! Then, when the day finally comes to watch the Apple keynote that tries to enthusiastically launch the new product, we either yawn while exhaling “saw that coming” in a dismissive tone, or end up disappointed as the device doesn’t live up to our speculative fantasy.

When you think about it, we’re shooting ourselves in the foot. But thinking about things that way takes the fun out of this article, so I’ll continue pretending I didn’t say that.

I’m not going to lie. I’m one of those Apple-fan-boys. Now that’s been admitted, I can follow the steps to rehabilitation. But there is another thing to disclose. No one has a single lick of information on Apple’s presumed tablet that can’t be attributed to something we may have misunderstood.

The reports that we do have come from manufactures who are tentatively dangling precious information in front of us, like Michael Jackson holding his baby over a hotel balcony to eagerly watching fans. We want to be involved, we want to know everything, but at the same time we all understand that it could all come crashing down in a fragile and disappointing mess.

So rather than focusing on speculating what the Apple tablet hardware might perhaps be, we are going to focus on a reality distortion field of our own. Why should we care about Apple’s (perhaps fictional) tablet?

Speculated potential features!

Let’s start with a bullet-point-in-a-keynote-worthy feature of what the iTablet might do. An ebook reader! Did I hear someone sigh? Stay with me here, it gets better. Imagine, if you will, the Amazon Kindle. It’s a well-received device that has done pretty well for itself. Thanks to Amazon (and Sony) laying groundwork for the digital distribution of books, it doesn’t take a genius to reproduce this in another device. It is typical of Apple to reinvent the wheel in a more desirable and usable way, especially now the major book publishers are in the correct mindset to publish via this distribution channel. Now, imagine that iTunes sells books. Imagine reading a full-colour design-inspiring book with high-resolution pictures, video, audio, links and more, on what is essentially a 10” iPhone. Are you with me so far? I hope so.

Now, imagine that your iTablet has the capability to turn on instantly just like the iPhone and iPod Touch. Imagine that it’s always connected to your WiFi and has a constant Internet connection on the go (just like Amazon’s Kindle). Whenever you want to browse the internet, check your email, watch a YouTube video, post a quick blog entry, check your RSS feeds, you have a handy device that has a 10” LED backlit full-colour LCD screen. No longer is browsing content as restrictive and frustrating to do as it is on your phone’s tiny screen. It wont replace the usage of your phone, but it will cut into the number of times you wait for your laptop to boot up. Perhaps, one day, even replace the need for some people to buy a laptop.

Now let’s talk about apps. Let’s talk about games. Oh, and let’s assume that the iTablet has an accelerometer, GPS, a video camera and a compass while we’re at it. OK, I lied about not speculating on the potential iTablet’s hardware. But are you still with me? Good.

OK, now hold your imaginary iTablet in the air and point it at those buildings ahead of you. Press the icon of a fictional app and you have an immersive experience with augmented reality! Much better than the iPhone or Android phone’s tiny screen.

Now imagine you have bought a car mount, and place your iTablet on your dashboard for a fully intergraded navigation experience! Or pack your iTablet with your bucket and spade and take it on holiday for an interactive tour of your destination!

Don’t snap out of the fantasy yet! Next, use the device at work just like an interactive clipboard (as Star Trek promised us). And, and, and, play iPhone games on a bigger screen with more processing power and better graphics!

Do you want one yet? Yes? No? Maybe? OK, let’s stop there.

Speculated conclusion!

Of course, all this speculation is completely made up. It’s fiction. It’s fantasy. But it’s fun to read about details of what the product might be, assuming that it is in fact going to be released. But until the product is launched we have to understand that we really don’t know anything about it. We can only hope that it eventually lives up to the version forming in our minds, and pray that it doesn’t stay in Apple’s prototype lab.

Until that day, we’ll all read speculative articles and hope that we are eventually able to yawn a muted “saw that coming” in a dismissive tone, squarely aimed at an irritated Steve Jobs and Phil Schiller who will be trying to sell it to us during the keynote.

So what do you think? Yes? No? Maybe? Or sick of hearing about it?