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

Понравилась презентация – покажи это...

Слайд 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???

Слайд 1

We are outnumbered.

Слайд 2

Many more mobiles than computers.

Слайд 3

80% growth in use in 2013.

Слайд 4

Users prefer mobile.

Слайд 5

Design for mobile.

Слайд 6

Слайд 7

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

Слайд 8

But now we know for real.

Слайд 9

Слайд 10

1,333 19 120,626,225 651 31

Слайд 11

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

Слайд 12

Where do I start?

Слайд 13

10 design guidelines for fingers, touch and people

Слайд 14

1. Your users are not like you.

Слайд 15

Слайд 16


Слайд 17

Слайд 18

49% 36%

Слайд 19

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

Слайд 20

Слайд 21

Слайд 22

Слайд 23

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

Слайд 24

Слайд 25

Слайд 26

Слайд 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.

Слайд 28

Слайд 29

Слайд 30

Слайд 31

Слайд 32

Слайд 33

Add test app, short scroll, to the back.

Слайд 34

Add test app, long scroll, to the back.

Слайд 35

Слайд 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.

Слайд 37

Слайд 38


Слайд 39

40 62% 24% 9%

Слайд 40

Слайд 41

Слайд 42

Слайд 43

(3438)(l) d = V

Слайд 44

Слайд 45

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

Слайд 46

Слайд 47

Слайд 48

Слайд 49


Слайд 50

Слайд 51

Слайд 52

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

Слайд 53

Слайд 54

Слайд 55

Слайд 56

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

Слайд 57

Слайд 58

Слайд 59

8 mm

Слайд 60

11 mm

Слайд 61

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

Слайд 62

Слайд 63

Слайд 64

Слайд 65

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

Слайд 66

Слайд 67

Слайд 68

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

Слайд 69

Слайд 70

Слайд 71

Слайд 72

Слайд 73

Слайд 74

Слайд 75

Слайд 76

Слайд 77

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

Слайд 78

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

Слайд 79

Слайд 80

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

Слайд 81

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

Слайд 82

Appendix: Touch technology, additonal data, and other stuff

Слайд 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…

Слайд 84

Слайд 85

Слайд 86

Слайд 87

Слайд 88

Слайд 89

Capacitive Touch Screen

Слайд 90

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

Слайд 91

Слайд 92

Programming Touch Events

Слайд 93

Слайд 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