Fingers, Thumbs and People Designing for the way your users really hold and touch their phones and tablets

If you like this presentation – show it...

Slide 0

Fingers, Thumbs and People Designing for the way your users really hold and touch their phones and tablets @shoobe01 #UXPA2014 29 MINUTES To read entire deck word for word. TIMING/VIDEO Remove auto-advancing after creating a video version: Workaround: In the menu bar: “Slide Show” > “Set Up Show…” In the “Advance slides” section select “Manually” Clear the timings completely: Select all the slides Right click a slide > “Slide Transition…” In the “Advance slide” section uncheck “Automatically after” Don’t forget user videos to add more proof???

Slide 1

We are outnumbered.

Slide 2

Many more mobiles than computers.

Slide 3

80% growth in use in 2013.

Slide 4

Users prefer mobile.

Slide 5

Design for mobile.

Slide 6

Slide 7

What we used to know: What we used to know: 44 px

Slide 8

But now we know for real.

Slide 9

Slide 10

1,333 19 120,626,225 651 31

Slide 11

Touch is not about Finger size Thumb reach No-go corners Pinpoint accuracy iPhones only

Slide 12

Where do I start?

Slide 13

10 design guidelines for fingers, touch and people

Slide 14

1. Your users are not like you.

Slide 15

Slide 16


Slide 17

Slide 18

49% 36%

Slide 19

1. Design for every user. Accept that users change. Plan for every device. Your users are not like you.

Slide 20

Slide 21

Slide 22

Slide 23

2. Place key actions in the middle. Secondary actions along the top and bottom. Users prefer to touch the center of the screen.

Slide 24

Slide 25

Slide 26

Slide 27

3. Place key content in the middle. Allow users to scroll content to comfortable viewing positions. Users prefer to view the center of the screen.

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Add test app, short scroll, to the back.

Slide 34

Add test app, long scroll, to the back.

Slide 35

Slide 36

4. Make room for fingers around targets. Put your content or functions where they won’t be covered. Leave room for gesture and scroll. Fingers get in the way.

Slide 37

Slide 38


Slide 39

40 62% 24% 9%

Slide 40

Slide 41

Slide 42

Slide 43

(3438)(l) d = V

Slide 44

Slide 45

5. Support all input types. Predict use by device class. Account for distance by adjusting sizes. Different devices are used in different ways.

Slide 46

Slide 47

Slide 48

Slide 49


Slide 50

Slide 51

Slide 52

6. Make touch targets as large as possible. Tap entire containers. Design in lists and large boxes. Touch is imprecise.

Slide 53

Slide 54

Slide 55

Slide 56

See old slideshow. This used to have more animation, but why?

Slide 57

Slide 58

Slide 59

8 mm

Slide 60

11 mm

Slide 61

Design by zones. Don’t force edge selection. Very large spacing along the top and bottom. Touch is inconsistent. 7.

Slide 62

Slide 63

Slide 64

Slide 65

8. Attract the eye. Afford action. Be readable. Inspire confidence. People only click what they see.

Slide 66

Slide 67

Slide 68

9. Provide room for edge taps and off-screen gestures. Don’t forget cases and bezels.

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77

10. Paper is your friend. Test and demonstrate on real devices. Pixels are a lie. Plan accordingly. Work at human scales.

Slide 78

Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com

Slide 79

Slide 80

4ourth.com/tppt 4ourth.com/tvid

Slide 81

Read more on design for touch, mobile and people: 4ourth.com/wrtg

Slide 82

Appendix: Touch technology, additonal data, and other stuff

Slide 83

26% Orientation: 60% Landscape, 40% portrait, but… which device did you mean? 84% touch with the right hand. Age, sex, region? No perceptible changes but…

Slide 84

Slide 85

Slide 86

Slide 87

Slide 88

Slide 89

Capacitive Touch Screen

Slide 90

Proximity Accelerometer Gryosensor Light color Gesture Cover sensor Light level Capacitive Touch Screen

Slide 91

Slide 92

Programming Touch Events

Slide 93

Slide 94

Contact me for consulting, design, to follow up on this deck, or just to talk: Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01 on: www.4ourth.com @shoobe01 #UXPA2014