How People Really Hold and Touch Their Mobile Devices. mlearning: Tips and Techniques for Planning, Analysis, and Design. Steven Hoober, 4ourth Mobile

Transcription

1 mlearning: Tips and Techniques for Planning, Analysis, and Design September 19 & 20, How People Really Hold and Touch Their Mobile Devices Steven Hoober, 4ourth Mobile

2 How People Really Hold & Touch (their mobile 1 What do we know? 2 Session 302 How People Really Hold and Touch Page 1

3 What do we know? iphone is sized for one hand 3 What do we know? iphone is sized for one hand The width of fingers varies 4 Session 302 How People Really Hold and Touch Page 2

4 What do we know? iphone is sized for one hand The width of fingers varies 44 points is the ideal target size 5 What do we know? iphone is sized for one hand The width of fingers varies 44 points is the ideal target size 6 Session 302 How People Really Hold and Touch Page 3

5 Poll 1: How do you hold your phone? a b c d 7 8 Session 302 How People Really Hold and Touch Page 4

6 9 10 Session 302 How People Really Hold and Touch Page 5

7 11 12 Session 302 How People Really Hold and Touch Page 6

8 Visual targets Touch targets Interference 13 Visual targets must: Attract the user's eye. Look like actionable elements. Afford the specific action. Be trustworthy. 14 Session 302 How People Really Hold and Touch Page 7

9 15 16 Session 302 How People Really Hold and Touch Page 8

10 V = (3438)(l) d 17 Minimum Visual Targets: 2.5-inch Phone inch Phone 9 10-inch Tablet Text 4 pt 1.4 mm 6 pt 2.1 mm 8 pt 2.8 mm Icons 6 pt 2.1 mm 8 pt 2.8 mm 10 pt 3.5 mm 18 Session 302 How People Really Hold and Touch Page 9

11 Poll 2: What does your phone know about you and the surroundings? 19 Capacitive Touch Screen 20 Session 302 How People Really Hold and Touch Page 10

12 Gesture Light level Light color Proximity Cover sensor Capacitive Touch Screen Gryosensor Accelerometer 21 Poll 3: How many of you have problems using your touchscreen? 22 Session 302 How People Really Hold and Touch Page 11

13 23 24 Session 302 How People Really Hold and Touch Page 12

14 44 points points 26 Session 302 How People Really Hold and Touch Page 13

15 (1 pt = 1/72") Session 302 How People Really Hold and Touch Page 14

16 Centroid? 29 Touch Targets: Minimum 17 pt / 6 mm Preferred 23 pt / 8 mm Maximum 43 pt / 15 mm 30 Session 302 How People Really Hold and Touch Page 15

17 Interference: Measured on center Minimum 23 pt / 8 mm Preferred 28 pt / 10 mm Session 302 How People Really Hold and Touch Page 16

18 33 34 Session 302 How People Really Hold and Touch Page 17

19 Minimum Visual Targets: 2.5-inch Phone inch Phone 9 10-inch Tablet Text 4 pt / 1.4 mm 6 pt / 2.1 mm 8 pt / 2.8 mm Icons 6 pt / 2.1 mm 8 pt / 2.8 mm 10 pt / 3.5 mm Touch Targets: Minimum Preferred Maximum 17 pt / 6mm 23 pt / 8 mm 43 pt / 15 mm Interference: Measured on center Minimum Preferred 23 pt / 8 mm 28 pt / 10 mm 35 Tablets? 36 Session 302 How People Really Hold and Touch Page 18

20 Poll 4: What devices do you have to design or build for? Session 302 How People Really Hold and Touch Page 19

21 39 40 Session 302 How People Really Hold and Touch Page 20

22 41 42 Session 302 How People Really Hold and Touch Page 21

23 Small targets Larger targets 43 Design for Touch Follow IA, information, hierarchies Ergonomically feasible Don t obscure information Consistency Platform conventions 44 Session 302 How People Really Hold and Touch Page 22

24 Contact me for consulting, design, to follow up on this deck, or just to talk: Steven Hoober shoobe01 on: 45 Resources es 46 Session 302 How People Really Hold and Touch Page 23