Websters has the following definition:
Affordance - A visual clue to the function of an object.
I don't think I can understate how important this term is for mobile apps. On desktops we have mouse-overs and tool-tips which are great at explaining what to click on desktop apps and websites. Cursors change (on desktops in Windows, often a arrow tip to a hand with a finger pointed up) when we roll-over buttons and buttons generally have at least 3x states: normal, hover/mouse-over and down/click.
On mobile devices we don't have these things*. We have "fat fingers" with very inaccurate haptic interfaces on small devices (UPDATE: For more info, see this later blog entry). *Therefore* we need to make a concerted effort to assist users visually as much as possible with hints or "Affordances".
Consider the following example:
#1 - Butcon (Button Icon) with little/no affordance
In this case it's a very common menu or hamburger control (If you don't know what a Hamburger Control see this later post) that has etched view or 3D-ish look. You could argue that the styling and location on screen could imply it's a "butcon" and that it means it can to be clicked or tapped, but that's a little 'esoteric'.
#2 - Butcon (Button Icon) with button frame
For me just the small border around "butcon" makes a 'huge' difference. It tells me it's not *just* a background artifact and that the rounded square border implies button (oval or circle border *might* not have the same convention and red border might mean something altogether different too).
Everywhere we are surrounded with 'hints' to how things work. Handles on mugs imply where to hold, vertical & horizontal poles imply where to hand onto on buses & subways, (well designed) door handles imply when to pull or pull, etc.
Life is tough enough as it is. Using a new app is hard too. So next time, give a little "Affordance" on your next mobile app. With any luck you'll have a happier user! =)
w.
p.s. *While I said we don't have mouse-overs on haptic (aka "touch screen") Mobile Devices, that's not 100% true. On Android, specifically Samsung's Galaxy Note line, when using the Stylus on the new Note II, you can get a "hover" feature, where a small circle is shown on the screen when your stylus is *just* above the surface. Very cool stuff.
I believe Samsung is licensing Wacom's EMR technology which lives behind (or below) the LCD display, therefore not impact the visual quality of the screen at all! (Think passive RF tag; it's why the stylus or pen doesn't need to be battery powered.)
For more info see:
For the *super* geeks, these are two more great links about nitty-gritty details. I thought both were very cool:
I believe Samsung is licensing Wacom's EMR technology which lives behind (or below) the LCD display, therefore not impact the visual quality of the screen at all! (Think passive RF tag; it's why the stylus or pen doesn't need to be battery powered.)
For more info see:
For the *super* geeks, these are two more great links about nitty-gritty details. I thought both were very cool:
No comments:
Post a Comment