make it obvious: affordance as a design tool

48

Upload: justin-davis

Post on 28-Jan-2015

115 views

Category:

Design


0 download

DESCRIPTION

Presentation given at UX-Lx in Lisbon, Portugal about the concept of affordances and their influence on interaction design for the web. Full description: The real world makes things easy. We understand how to navigate interfaces naturally, due in large part to physical properties of objects. Shadows, textures and shape give us immediate clues as to how we should interact with different objects, providing a natural and obvious experience with most everyday things. Take, for example, a door handle – its design affords our reach and grasp, communicating to us that we need to grab and pull to use the object. But what about the web? In a two-dimensional world, where everything is limited to pixels on a screen, what role do these affordances play in allowing users to understand how to navigate an interface? How does the design of a button, with its beveled edge and slight shadow, help users to understand and interact with interface elements with the same ease and subconscious thought that we interact with physical objects? Intentional design of these moments – where the virtual needs to accommodate our ingrained understanding of the physical world – can make or break an interface. Even in the real, physical, world, affordances break down. A door handle appears to communicate “pull”, when the action needs to be pushing. A faucet knob appears to communicate “push”, when the action needs to be turning. Online, the opportunities for affordances to fail and miscommunicate are magnified by the removal of physical cues. In this venue, designers need to carefully construct these affordances from scratch, keeping psychology of the real world in mind at all times. Simply put, affordances make life easier. By communicating the use of an object before the user interacts with it, affordances assure that people are able to navigate interfaces with ease. Bringing these concepts from the physical world into the virtual one is a critical step in building intuitive interfaces.

TRANSCRIPT

Page 1: Make it Obvious: Affordance as a Design Tool
Page 2: Make it Obvious: Affordance as a Design Tool
Page 3: Make it Obvious: Affordance as a Design Tool
Page 4: Make it Obvious: Affordance as a Design Tool
Page 5: Make it Obvious: Affordance as a Design Tool
Page 6: Make it Obvious: Affordance as a Design Tool
Page 7: Make it Obvious: Affordance as a Design Tool
Page 8: Make it Obvious: Affordance as a Design Tool
Page 9: Make it Obvious: Affordance as a Design Tool
Page 10: Make it Obvious: Affordance as a Design Tool
Page 11: Make it Obvious: Affordance as a Design Tool
Page 12: Make it Obvious: Affordance as a Design Tool
Page 13: Make it Obvious: Affordance as a Design Tool
Page 14: Make it Obvious: Affordance as a Design Tool
Page 15: Make it Obvious: Affordance as a Design Tool
Page 16: Make it Obvious: Affordance as a Design Tool
Page 17: Make it Obvious: Affordance as a Design Tool
Page 18: Make it Obvious: Affordance as a Design Tool
Page 19: Make it Obvious: Affordance as a Design Tool
Page 20: Make it Obvious: Affordance as a Design Tool
Page 21: Make it Obvious: Affordance as a Design Tool
Page 22: Make it Obvious: Affordance as a Design Tool
Page 23: Make it Obvious: Affordance as a Design Tool
Page 24: Make it Obvious: Affordance as a Design Tool
Page 25: Make it Obvious: Affordance as a Design Tool
Page 26: Make it Obvious: Affordance as a Design Tool
Page 27: Make it Obvious: Affordance as a Design Tool
Page 28: Make it Obvious: Affordance as a Design Tool
Page 29: Make it Obvious: Affordance as a Design Tool
Page 30: Make it Obvious: Affordance as a Design Tool
Page 31: Make it Obvious: Affordance as a Design Tool
Page 32: Make it Obvious: Affordance as a Design Tool
Page 33: Make it Obvious: Affordance as a Design Tool
Page 34: Make it Obvious: Affordance as a Design Tool
Page 35: Make it Obvious: Affordance as a Design Tool
Page 36: Make it Obvious: Affordance as a Design Tool
Page 37: Make it Obvious: Affordance as a Design Tool
Page 38: Make it Obvious: Affordance as a Design Tool
Page 39: Make it Obvious: Affordance as a Design Tool
Page 40: Make it Obvious: Affordance as a Design Tool
Page 41: Make it Obvious: Affordance as a Design Tool
Page 42: Make it Obvious: Affordance as a Design Tool
Page 43: Make it Obvious: Affordance as a Design Tool
Page 44: Make it Obvious: Affordance as a Design Tool
Page 45: Make it Obvious: Affordance as a Design Tool
Page 46: Make it Obvious: Affordance as a Design Tool
Page 47: Make it Obvious: Affordance as a Design Tool
Page 48: Make it Obvious: Affordance as a Design Tool