Signifiers instead of affordances
I have always been interested in the idea of affordances in user interfaces since I first heard the term. So naturally I was very interested to read an article by Donald Norman - the original researcher to bring the term from psychology to design - about the importance of signifiers instead of affordances.
The term affordances was coined by psychologist J. J. Gibson to explain the possible actions that a specific agent can take on a specific object. Norman brought the idea of affordances, which are realities that exist regardless of the agent's knowledge of them, to design in the guise of "perceivable affordances." For Norman's design work, an unperceived affordance is essentially nothing.
In his article, Norman espouses the idea that designers should forget about affordances and focus on the signs that affordances exist; these he calls signifiers. His reasoning is straightforward - it's not the fact that this user interface widget can be dragged that is important to design, but the signifier that indicates to the user that the item can be dragged.
I didn't pick this example at random. I believe drag and drop is one of the most problematic of design elements. There is no standard signifier for the capability to be dragged. There are signifiers for the affordance of being clicked such as raised shading and the hand cursor, but there is no universal indication of "draggability." The scrollbar is one of the few signifiers that is universally recognized as draggable.
Take, for instance, the ability to reorder the icons on the iPhone. This capability is induced by holding your finger on an icon for about 2-3 seconds. Then all the icons start dancing and jiggling around on the screen. Apple thus created a relatively novel signifier for the affordance of dragging. This is nice, but there is no signifier that indicates holding your finger down on an icon will induce this behavior.
Dragging on a computer with a mouse might be easier to provide a signifier for: simply change the cursor into a shape that could indicate draggability. However, there is not a generally agreed upon shape for that behavior (the move cursor with four arrows might be the best), and many widgets that can be dragged can also be clicked for a different response. This means that the widget will already display the hand cursor. You could use a custom cursor which displays both icons, but this starts to be confusing and unclear.
The iPhone supports several other interactions which have no signifiers. For example, in the Mail application you can delete an e-mail from the summary view by swiping your finger left or right across the title. I didn't find this for weeks. Although the affordance existed, I didn't perceive it because it had no signifier. I think Norman is pointing out something significant here.
Further Information
Don Norman is a professor at Northwestern University and cofounder of the Nielsen Norman Group, with Jakob Nielson whose Alert Box website is a great resource for web usability. I want to summarize Norman's recent opinion piece Signifiers, not Affordances in ACM interactions publication and offer some commentary (he has posted the entire Signifiers, not Affordances essay on his own website).

Shoot, I think you're right about the difficulty of signifying drag-drop, but I really want to use drag-drop to reduce clutter on some UI elements that support several actions. This may not be a general solution, but in my case it's working so far to have a visually distinct region of the element that supports dragging, while the rest of the element only supports clicking. I hadn't considered showing a move cursor over the drag region, but because the click and drag regions are distinct it should work.
Thanks for the challenge to think this through further.
--Shawn Hoover
- reply
Submitted by Anonymous on Sat, 12/13/2008 - 18:59.