ThePresentation^ru

Fingers, Thumbs and PeopleDesigning for the way your users really holdand touch their phones and tablets презентация

Содержание

1. Fingers, Thumbs and PeopleDesigning for the way your users really holdand touch their phones and tablets
2. We are outnumbered.
3. Many more mobiles than computers.
4. 80% growth in use in 2013.
5. Users prefer mobile.
6. Design for mobile.
8. What we used to know: What we used to know: 44 px
9. But now we know for real.
11. 1,333 19 120,626,225 651 31
12. Touch is not about Finger size Thumb reach No-go corners Pinpoint accuracy iPhones only
13. Where do I start?
14. 10 design guidelines for fingers, touch and people
15. 1. Your users are not like you.
19. 49% 36%
20. 1. Design for every user. Accept
24. 2. Place key actions in the
28. 3. Place key content in the
34. Add test app, short scroll, to the back.
35. Add test app, long scroll, to the back.
37. 4. Make room for fingers around
40. 62% 24% 9%
44. (3438)(l) d = V
46. 5. Support all input types. Predict
50. CEP R95
53. 6. Make touch targets as large
57. See old slideshow. This used to have more animation, but why?
60. 8 mm
61. 11 mm
62. Design by zones. Don’t force edge selection.
66. 8. Attract the eye. Afford action.
69. 9. Provide room for edge taps and off-screen gestures. Don’t forget cases and bezels.
78. 10. Paper is your friend. Test
79. Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
81. 4ourth.com/tppt 4ourth.com/tvid
82. Read more on design for touch, mobile and people: 4ourth.com/wrtg
83. Appendix: Touch technology, additonal data, and other stuff
84. 26% Orientation: 60% Landscape, 40% portrait, but…
90. Capacitive Touch Screen
91. Proximity Accelerometer Gryosensor Light color Gesture Cover sensor Light level Capacitive Touch Screen
93. Programming Touch Events
95. Contact me for consulting, design, to follow

We are outnumbered.

Главная
Разное
Fingers, Thumbs and PeopleDesigning for the way your users really holdand touch their phones and tablets

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

Слайд 2We are outnumbered.

Слайд 3Many more mobiles
than computers.

Слайд 480% growth in use in 2013.

Слайд 5Users prefer mobile.

Слайд 6Design for mobile.

Слайд 7

Слайд 8What we used to know:
What we used to know:
44 px

Слайд 9But now we know for real.

Слайд 10

Слайд 111,333
19
120,626,225
651
31

Слайд 12Touch is not about
Finger size
Thumb reach
No-go corners
Pinpoint accuracy
iPhones only

Слайд 13Where do I start?

Слайд 14

10 design guidelines for fingers,
touch and people

Слайд 151. Your users are not like you.

Слайд 16

Слайд 17

Слайд 18

Слайд 1949%
36%

Слайд 201.
Design for every user.
Accept that users change.
Plan for every

device.

Your users are not like you.

Слайд 21

Слайд 22

Слайд 23

Слайд 242.
Place key actions in the middle.
Secondary actions along the top

and bottom.

Users prefer to touch the center of the screen.

Слайд 25

Слайд 26

Слайд 27

Слайд 283.
Place key content in the middle.
Allow users to scroll content

to comfortable viewing positions.

Users prefer to view the center of the screen.

Слайд 29

Слайд 30

Слайд 31

Слайд 32

Слайд 33

Слайд 34Add test app, short scroll, to the back.

Слайд 35Add test app, long scroll, to the back.

Слайд 36

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

Слайд 38

Слайд 39

Слайд 4062%
24%
9%

Слайд 41

Слайд 42

Слайд 43

Слайд 44(3438)(l)
d
=
V

Слайд 45

Слайд 465.
Support all input types.
Predict use by device class.
Account for distance

by adjusting sizes.

Different devices are used in different ways.

Слайд 47

Слайд 48

Слайд 49

Слайд 50
CEP R95

Слайд 51

Слайд 52

Слайд 536.
Make touch targets as large as possible.
Tap entire containers.
Design in

lists and large boxes.

Touch is imprecise.

Слайд 54

Слайд 55

Слайд 56

Слайд 57See old slideshow. This used to have more animation, but why?

Слайд 58

Слайд 59

Слайд 60
8 mm

Слайд 6111 mm

Слайд 62Design by zones.
Don’t force edge selection.
Very large spacing along the top

and bottom.

Touch is inconsistent.

7.

Слайд 63

Слайд 64

Слайд 65

Слайд 668.
Attract the eye.
Afford action.
Be readable.
Inspire confidence.
People only click what they

see.

Слайд 67

Слайд 68

Слайд 699.
Provide room for edge taps and off-screen gestures.
Don’t forget cases

and bezels.

Слайд 70

Слайд 71

Слайд 72

Слайд 73

Слайд 74

Слайд 75

Слайд 76

Слайд 77

Слайд 7810.
Paper is your friend.
Test and demonstrate on real devices.
Pixels are

a lie. Plan accordingly.

Work at human scales.

Слайд 79Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01:
www.4ourth.com

Слайд 80

Слайд 814ourth.com/tppt
4ourth.com/tvid

Слайд 82Read more on design for touch, mobile and people:

4ourth.com/wrtg

Слайд 83Appendix:

Touch technology, additonal data, and other stuff

Слайд 8426%
Orientation: 60% Landscape, 40% portrait, but… which device did you mean?
84%

touch with the right hand.
Age, sex, region? No perceptible changes but…

Слайд 85

Слайд 86

Слайд 87

Слайд 88

Слайд 89

Слайд 90Capacitive Touch Screen

Слайд 91Proximity
Accelerometer
Gryosensor
Light color
Gesture
Cover sensor
Light level
Capacitive Touch Screen

Слайд 92

Слайд 93Programming Touch Events

Слайд 94

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

Скачать презентацию

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей