Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
1
Design for Fingers,
Touch and People
How people really hold and touch their
mobile devices
@shoobe01 #mLearnCon
2
We are outnumbered.
3
More mobiles than computers.
4
80% growth in 2013.
5
Users prefer mobile.
6
Design for mobile.
7
8
What we used to know:What we used to know:
44 px
9
But now we know for real.
10
11
1,333
19
120,626,225
651
12
13
Touch is not about
• Finger size
• Reach
• No-go corners
• Pinpoint accuracy
14
151515
161616
171717
62%
24%
9%
18
19
20
21
(3438)(l
)d
=V
22
6 pt 8 pt
23
Make your targets work.
24
• Attract the eye
• Afford action
• Readable
• The right size
25
26
Touch
27
28
29
CEP R95
29
30
31
Avoid the edges.
32
33
34
Design by zones.
35
36
FingersFingers
get in the way.
3737
3838
39
Don’t obscure your
information or functions.
40
Work at scale.
4141
42
Check at scale.
4343
4444
4545
46
10 design guidelines for fingers,
touch and people
47
1 Your users are not like you.
49%
26% 10%36%
48
2 Move content
and controls
toward the
middle.
49
4 Don’t obscure
information
50
3 Make room
for scrolling.
50
51
5 Account for distance by adjusting
size.
2.5”
3.5”
5”
7-10”
In Stand
4 pt
6 pt
7 pt
8 pt
10 pt
52
6 Whole rows,
larger touch
targets.
53
6 Whole rows,
larger touch
targets.
54
7 Design
by zones.
55
8 Make taps affordable.
56
9 Respect edges
and bezels
56
5757
10 Design, test and
demo at scale.
58
Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01:
www.4ourth.com
59
60
4ourth.com/tppt
4ourth.com/tvid
61
Read more on design for touch,
mobile and people:
4ourth.com/wrtg
62
Appendix:
Touch technology, additonal
data, and other stuff
63
• Orientation: 60% Landscape, 40% portrait,
but… which device did you mean?
• 84% touch with the right hand.
• Age, sex...
6464
65
66
6767
68
69
Capacitive Touch
Screen
70
Proximity
Accelerometer
Gryosensor
Light color
Gesture
Cover sensor
Light level
Capacitive Touch
Screen
71
72
Programming Touch Events
7373
74
Contact me for consulting, design, to
follow up on this deck, or just to talk:
Steven Hoober
steven@4ourth.com
+1 816 2...
Prochain SlideShare
Chargement dans…5
×

How People Really Hold and Touch (their Phones)

3 080 516 vues

Publié le

For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid

Presented at ConveyUX in Seattle, 7 Feb 2014

For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid

We are finally starting to think about how touchscreen devices really work, and design proper sized targets, think about touch as different from mouse selection, and to create common gesture libraries.

But despite this we still forget the user. Fingers and thumbs take up space, and cover the screen. Corners of screens have different accuracy than the center. It's time to re-evaluate what we think we know.

Steven reviews his ongoing research into how people actually interact with mobile devices, presents some new ideas on how we can design to avoid errors and take advantage of this new knowledge, and leaves you with 10 (relatively) simple steps to improve your touchscreen designs tomorrow.

  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Very Nice: See Latest Blogs @ https://www.thesisscientist.com/Blog
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Are you tired of seeking loans and Mortgages,have you been turned down constantly By your banks and other financial institutions,We offer any form of loan to individuals and corporate bodies at low interest rate.If you are interested in taking a loan,feel free to contact us today,we promise to offer you the best services ever.Just give us a try,because a trial will convince you.What are your Financial needs?Do you need a business loan?Do you need a personal loan?Do you want to buy a car?Do you want to refinance?Do you need a mortgage loan?Do you need a huge capital to start off your business proposal or expansion? Have you lost hope and you think there is no way out, and your financial burdens still persists? Contact us (housingfinance22@gmail.com) Your Name:............... Your Country:............... Your Occupation:............... Loan Amount Needed:............... Loan Duration............... Monthly Income:............... Your Telephone Number:..................... Business Plan/Use Of Your Loan:............... Contact Us At : housingfinance22@gmail.com Phone number :+447513195409 (WhatsApp Only)
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • very good
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

How People Really Hold and Touch (their Phones)

  1. 1 Design for Fingers, Touch and People How people really hold and touch their mobile devices @shoobe01 #mLearnCon
  2. 2 We are outnumbered.
  3. 3 More mobiles than computers.
  4. 4 80% growth in 2013.
  5. 5 Users prefer mobile.
  6. 6 Design for mobile.
  7. 7
  8. 8 What we used to know:What we used to know: 44 px
  9. 9 But now we know for real.
  10. 10
  11. 11 1,333 19 120,626,225 651
  12. 12
  13. 13 Touch is not about • Finger size • Reach • No-go corners • Pinpoint accuracy
  14. 14
  15. 151515
  16. 161616
  17. 171717 62% 24% 9%
  18. 18
  19. 19
  20. 20
  21. 21 (3438)(l )d =V
  22. 22 6 pt 8 pt
  23. 23 Make your targets work.
  24. 24 • Attract the eye • Afford action • Readable • The right size
  25. 25
  26. 26 Touch
  27. 27
  28. 28
  29. 29 CEP R95 29
  30. 30
  31. 31 Avoid the edges.
  32. 32
  33. 33
  34. 34 Design by zones.
  35. 35
  36. 36 FingersFingers get in the way.
  37. 3737
  38. 3838
  39. 39 Don’t obscure your information or functions.
  40. 40 Work at scale.
  41. 4141
  42. 42 Check at scale.
  43. 4343
  44. 4444
  45. 4545
  46. 46 10 design guidelines for fingers, touch and people
  47. 47 1 Your users are not like you. 49% 26% 10%36%
  48. 48 2 Move content and controls toward the middle.
  49. 49 4 Don’t obscure information
  50. 50 3 Make room for scrolling. 50
  51. 51 5 Account for distance by adjusting size. 2.5” 3.5” 5” 7-10” In Stand 4 pt 6 pt 7 pt 8 pt 10 pt
  52. 52 6 Whole rows, larger touch targets.
  53. 53 6 Whole rows, larger touch targets.
  54. 54 7 Design by zones.
  55. 55 8 Make taps affordable.
  56. 56 9 Respect edges and bezels 56
  57. 5757 10 Design, test and demo at scale.
  58. 58 Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com
  59. 59
  60. 60 4ourth.com/tppt 4ourth.com/tvid
  61. 61 Read more on design for touch, mobile and people: 4ourth.com/wrtg
  62. 62 Appendix: Touch technology, additonal data, and other stuff
  63. 63 • Orientation: 60% Landscape, 40% portrait, but… which device did you mean? • 84% touch with the right hand. • Age, sex, region? No perceptible changes but…
  64. 6464
  65. 65
  66. 66
  67. 6767
  68. 68
  69. 69 Capacitive Touch Screen
  70. 70 Proximity Accelerometer Gryosensor Light color Gesture Cover sensor Light level Capacitive Touch Screen
  71. 71
  72. 72 Programming Touch Events
  73. 7373
  74. 74 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

×