I Should Touch It

I like the scrollbars that Macromedia (now Adobe) used heavily in their interface design; in both their desktop application UIs and Flash toolkits, scrollbars with finger grips have been a part of their design language. The embossed grooves help to visually communicate to the user the direction that the bar will travel. It simulates the real world affordance of a ridged switch that provides resistance to the fingerpad as force is applied.

I have generally preferred this scroll bar as opposed to the traditional flat windows scrollbar. It would guess that the reason that the traditional scrollbar didn’t have ridges, was because it wasn’t expected to be touched.  Rather, it was primarily designed to provide visual feedback for the proportion of the viewable area to the entire scrollable window and the relative position of the visible portion within the visible frame.  The up and down arrows were intended to be the primary method for moving up and down the scrollable area.  

With the saturation of RIAs and more advanced desktop applications, updates to these older UI components deserve attention.  As UIs become more visually rich and utilize more complicated gestures, these visual affordances become more crucial to the discoverability of features and functions.

Push

Push, press, or click.  We interact with buttons everyday as we surf the Web, check email, and interact with just about anything that has a computer interface.  There have been some conventions like drop shadows and bevels, but we see many different styles of buttons throughout our day.  But how do we know we are supposed to click them?  What sets them apart from text and other static elements of the screen?  The simplest answer: affordances.

Affordances are made up of those drop shadows and bevels.  Graphic elements and effects applied to interface objects that draw you to interact with them are those affordances.  Creating a visual representation of a physical analog that through instinct or training, encourages a person to perform an expected interaction. 

In Donald Norman’s book The Psychology of Everyday Things, he explains:

“…the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.” 

Over the years of designing websites and software UIs, I found myself trying to create these affordances almost instinctively.  There were many designers before me that have put method to this, to be sure.  I look back now though, and I am surprised that I never heard much about how some of these conventions came about or how important this concept is to designing effective UIs.  Maybe they were there, but it was never on my radar, not like typography or color theory.  

I need to better understand how we make these decisions and how trends for common affordances have emerged.  I need to see more.  I need to push more.