Part of the Mobile Communications Resource Center, this is one of several presentations created by Sara Quinn for The Knight Center and shared with Ball State University's College of Communication, Information and Media. All rights are reserved.

1. How do people know
what to tap?
D E S I G N I N G F O R M O B I L E
Design Consultant and Researcher
Sara Quinn
e-mail: saraquinnmedia@gmail.com
Twitter: @saraquinn
727.366.0128

2. Gestures

3. Gestures
We’ve all seen a toddler work
magic on a touch screen.

4. Gestures
We’ve all seen a toddler work
magic on a touch screen.
(Seriously … how do they do it?)

5. How do people know
what to tap?

6. How do people know
what to tap?
how to swipe?

7. How do people know
what to tap?
how to swipe?
how to zoom in?

8. Affordances
In real life …

9. Affordances
In real life …
a knob is turned

10. Affordances
In real life …
a knob is turned
a cord is pulled

11. Affordances
In real life …
a knob is turned
a cord is pulled
No instruction
is needed.

12. Affordances
An American psychologist
coined the term “affordance”
in the 1970s.
JJ Gibson

13. Affordances
Basically, how our
visual perception helps
us to understand the world
around us—and how to
interact with it.
JJ Gibson

14. Affordances
In digital life, we need
to create visual cues
to possible actions.

15. Affordances
In digital life, we need
to create visual cues
to possible actions.

16. Affordances
In digital life, we need
to create visual cues
to possible actions.

17. User experience
Good design for a screen
is intuitive for the user.

18. Affordances
Sometimes,
the content you
are designing
lives outside
of the screen …

19. Sometimes,
the content you
are designing
lives outside
of the screen …
to the right …
Affordances

20. Sometimes,
the content you
are designing
lives outside
of the screen …
to the right …
Affordances

21. … to the left,
Affordances

22. … to the left,
up above,
Affordances

23. … to the left,
up above,
below,
Affordances

24. … to the left,
up above,
below, next to.
Affordances

25. It helps to
think in a
virtual 3D
world.
The process

26. Think in
terms of time,
dimension
and animation.
The process

27. What action is triggered
when something is tapped?
The process

28. What action is triggered
when something is tapped?
The process

29. What action is triggered
when something is tapped?
The process

30. What action is triggered
when something is tapped?
How do you visualize that
it has actually happened?
The process

31. The process
What action is triggered
when something is tapped?
How do you visualize that
it has actually happened?

32. Start with a sketch.
The process

33. Matt Sundstrom, mattink.com
The process

34. Matt Sundstrom, mattink.com
The process

35. Matt Sundstrom, mattink.com
The process

36. Matt Sundstrom, mattink.com
The process

37. Gestures http://www.lukew.com/touch/

38. Affordances

39. Affordances

40. Affordances

41. Affordances

44. People are loyal to a news
organization or a mobile site
because content is good.
User experience

45. People are loyal to a news
organization or a mobile site
because content is good.
And, because the experience is
satisfying. The site is easy to use.
User experience

46. Make yourself easy to contact.
User experience

47. User experience
Make yourself easy to contact.
Listen to users. Iterate and adapt.

48. Affordances
Gestures
The process
User experience

49. Design Consultant and Researcher
Sara Quinn
e-mail: saraquinnmedia@gmail.com
Twitter: @saraquinn
727.366.0128