'

Design for Fingers, Touch and People How people really hold and touch their mobile devices

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





Слайд 0

Design for Fingers, Touch and People How people really hold and touch their mobile devices @shoobe01 #mLearnCon ?? 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”


Слайд 1

We are outnumbered. OPTIONAL


Слайд 2

More mobiles than computers. OPTIONAL


Слайд 3

80% growth in 2013. OPTIONAL


Слайд 4

Users prefer mobile. OPTIONAL


Слайд 5

Design for mobile. OPTIONAL


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


Слайд 11


Слайд 12

Touch is not about Finger size Reach No-go corners Pinpoint accuracy


Слайд 13

@shoobe01 #ConveyUX @shoobe01 #mLearnCon


Слайд 14

15


Слайд 15

16


Слайд 16

17 62% 24% 9%


Слайд 17


Слайд 18


Слайд 19


Слайд 20

(3438)(l) d = V


Слайд 21

6 pt 8 pt


Слайд 22

Make your targets work.


Слайд 23

Attract the eye Afford action Readable The right size


Слайд 24


Слайд 25

Touch


Слайд 26


Слайд 27


Слайд 28

CEP R95


Слайд 29


Слайд 30

Avoid the edges.


Слайд 31


Слайд 32


Слайд 33

Design by zones.


Слайд 34


Слайд 35

Fingers Fingers get in the way.


Слайд 36


Слайд 37


Слайд 38

Don’t obscure your information or functions.


Слайд 39

Work at scale.


Слайд 40


Слайд 41

Check at scale.


Слайд 42


Слайд 43


Слайд 44


Слайд 45

10 design guidelines for fingers, touch and people


Слайд 46

1 Your users are not like you. 49% 36%


Слайд 47

2 Move content and controls toward the middle.


Слайд 48

4 Don’t obscure information


Слайд 49

3 Make room for scrolling.


Слайд 50

5 Account for distance by adjusting size.


Слайд 51

6 Whole rows, larger touch targets.


Слайд 52

6 Whole rows, larger touch targets.


Слайд 53

7 Design by zones.


Слайд 54

8 Make taps affordable.


Слайд 55

9 Respect edges and bezels


Слайд 56

10 Design, test and demo at scale.


Слайд 57

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


Слайд 58


Слайд 59

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


Слайд 60

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


Слайд 61

Appendix: Touch technology, additonal data, and other stuff


Слайд 62

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…


Слайд 63


Слайд 64


Слайд 65


Слайд 66


Слайд 67


Слайд 68

Capacitive Touch Screen


Слайд 69

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


Слайд 70


Слайд 71

Programming Touch Events


Слайд 72


Слайд 73

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 #mLearnCon


×

HTML:





Ссылка: