ORGANIZING MOBILE WEB

Transcription

1 ORGANIZING MOBILE WEB EXTENSION LEARN LUKE WROBLEWSKI 1

2 378K iphones sold per day 562K ios devices 371K Babies born per day 1M Android devices activated per day 200K Nokia smartphones 143k Blackberry devices Source: 2

3 Share of Personal Computing AMIGA APPLE ANDROID COMMODORE TRS-80 WINTEL ATARI Source: Source: 3

4 MOBILE 6B 10B connections today connections in X worldwide traffic growth Source: 4

5 Page/Canvas THE WEB Grid Layouts IS NOT Typography PRINT. Graphical Ads 5

6 MOBILE IS NOT A DESKTOP PC. 6

7 Big Screen Power Supply Consistent Network Keyboard Mouse Chair Desk 7

8 Small Screen Battery Inconsistent Network Fingers Sensors 8

9 EVERYWHERE ARE WE & ANYWHERE MOBILE? 84% at home 80% during misc. times 74% waiting in lines 64% at work Photo by Steve Rhodes 9

10 When are we mobile? Mobile 3G Traffic Patterns Laptop Tablet Smartphone Source: 10

11 ...copy, extend, and finally, discovery of a new form. It takes a while to shed old paradigms. -Scott Jenson Source: Flickr Photo: by Gilles San 11 Martin

12 MOBILE MOBILE PAYMENTS $141M 2009 $750M 2010 $4B 2011 Source: 12

13 MOBILE MOBILE PURCHASES $600M 2009 $2B 2010 $5B

14 MOBILE 2X 2.5X 3X more likely to buy on mobile more likely to subscribe engagement on mobile Source: Source: Source: 14

15 MOBILE 55% 70% of users are on mobile We're doing a complete relaunch [...] inspired by our mobile experience -CEO Garrett Camp of usage on mobile 800% mobile growth Source: Source: 15

16 ORGANIZATION 1. Mobile Behaviors 2. Content First 3. Navigation Elements 4.Clarity & Focus 16

17 MICRO-TASKING URGENT LOCAL REPETITIVE BORED JOSH GOOGLE CLARK MOBILE -TAPWORTHY 17 PHOTO BY HELLO TURKEY TOE

18 Lookup/Find Explore/Play Check In/Status Edit/Create 18

19 Check In/Status Explore/Play 19

20 Check In/Status Edit/Create 20

21 Menu Marketing 21

22 22

23 I was looking at the right side of the Venn diagram I thought, That looks like a lot of the current and planned content for our mobile site. I think the only thing we don t have are the admissions application. Source: XKCD & 23

24 MOBILE FIRST 1. GROWTH 2. CONSTRAINTS 3. CAPABILITIES = OPPORTUNITY = FOCUS = INNOVATION 24

25 MOBILE BEHAVIORS Know what mobile is uniquely good at Adjust site organization accordingly 25

26 ORGANIZATION 1. Mobile Behaviors 2. Content First 3. Navigation Elements 4.Clarity & Focus 26

27 Navigation First, Content Second 27

28 Skip Intro 28

29 Minimal Navigation Maximum Content 29

30 Minimal Navigation Maximum Content 30

31 31

32 In the new app, we present relevant content up-front and instantly notify users of new invitations and messages. In other words, we remove the friction of a dashboard and provide immediate value on app launch. 32

33 Check In/Status Navigation Second 33

34 34

35 35

36 Safari Accelerometer Access 36

37 Top Pages by Visit 20,000 15,000 10,000 5,

38 Top Pages by Visit Kayak is now consciously taking design cues from its recently updated ipad and iphone apps 38

39 The goal in making the site more like a mobile app is to shed unnecessary details and simplify Source: 39

40 If something is on the screen and people aren t clicking on, we remove it Source: 40

41 How do you gradually reveal mobile experiences? Mobile Unfolding 1. Nested Doll 2. Hub & Spoke 3. Bento Box 4. Filtered View Source: 41

42 1. Nested Doll Source: 42

43 2. Hub & Spoke Source: 43

44 3. Bento Box Source: 44

45 4. Filtered View Source: 45

46 CONTENT FIRST, NAV 2ND Minimal navigation, maximum content Focus on what matters most Gradually reveal experiences 46

47 ORGANIZATION 1. Mobile Behaviors 2. Content First 3. Navigation Elements 4.Clarity & Focus 47

48 Navigation Elements 56% NAV/CHROME 44% CONTENT 48

49 55% NAV OPTIONS

50 90% NAV OPTIONS 50

51 90% RESULTS 51

52 13 NAV ELEMENTS TOUCH TARGETS 52

53 5 NAV ELEMENTS 53

54 4 NAV ELEMENTS 54

55 Full Navigation Page 55

56 Top Navigation Overlay 56

57 Side Navigation Expand 57

58 Top Navigation Expand 58

59 Pivot & Explore Bottom Navigation Menu 59

60 Dead End 60

61 Duplicative Menus 61

62 Top Navigation Link Bottom Navigation Menu 62

63 Best of Both Worlds? Minimal Navigation Just an Anchor Link No Duplicative Menus Pivot & Explore 63

64 80-90% of people are right handed Source: Tapworthy: Designing Great IPhone Apps By Josh Clark Source: 64

65 Responsive Web Design Fluid grids Flexible images Media queries 65

66 66

67 Responsive Navigation Patterns 1. Footer Anchor 2. Toggle Menu 3. Select Menu 4. Top Navigation Source: 67

68 68

69 1. Footer Anchor PROS CONS Minimal navigation at top One tap access to navigation No dead ends Comfortable for touch No Javascript dependency Scalable (high) Anchor jump can be awkward No smooth motion (might be expected on mobile) Source: 69

70 70

71 2. Toggle Menu PROS Keeps user in context Smooth animation Minimal navigation at top One tap access to navigation Scalable (med) CONS Animation performance Javascript dependency Potential dead ends Less optimized for touch Source: 71

72 72

73 3. Select Menu PROS Minimal navigation at top Pulls up native controls Scalable (med) CONS Lack of styling Handling second-level navigation Javascript dependency Multi-tap operation Source: 73

74 74

75 4. Top Navigation PROS Easy to implement No Javascript dependencies Single source order Scalability (low/med) CONS Navigation first, content second (height issues) Touch target proximity Cross-device linebreaking issues Source: 75

76 Responsive Navigation Patterns 1. Footer Anchor 2. Toggle 3. Select Menu 4. Top Navigation Source: 76

77 In-Context Actions 77

78 In Context Navigation Global Navigation 78

79 In Context Navigation 79

80 What About Fixed Position Menus? 80

81 80-90% of people are right handed Source: Tapworthy: Designing Great IPhone Apps By Josh Clark Source: 81

82 Fixed Bottom Requires Javascript Eats up Screen Space 82

83 Fixed Position Support Mobile Safari ios4 ios5 treats as static elements & scrolls with rest of page strong support Android & 4 no support awkwardly snaps fixed elements back when scrolled supported but disabling page scaling is required supported with decent performance Source: 83

84 Fixed Position Support Blackberry Playbook supported but fixed elements are jittery supported supported but text is jagged in fixed position elements Other Browsers Opera Mobile Opera Mini Firefox Mobile Windows Phone Amazon Silk awkward snap & miscalc no support supported on version 6.0+ Ignore & treat elements as static supported but disabling page scaling is required Source: 84

85 Fixed Bottom Requires Javascript Eats up Screen Space Physical Control Proximity 85

86 Physical Controls Below Screen 86

87 System Controls I m always hitting that home key by mistake rather than the space bar and so exit out of what I m typing. Source: 87

88 Android Design Don't use bottom tab bars 1. Other platforms use the bottom tab bar 2. Android's tabs for view control are shown in action bars at the top of the screen Source: 88

89 Getting Back Back Button Back Button 89

90 Getting Back Back Button Back Button 90

91 Android Design Don't use labeled back buttons on action bars 1. Other platforms use an explicit back button with label 2. Android uses the main action bar for hierarchical navigation & the navigation bar for temporal navigation Source: 91

92 Getting Back 92

93 Getting Back 93

94 Getting Back Source: 94

95 NAVIGATION ELEMENTS Avoid excessive navigation menus Top navigation links for quick access Bottom menu for pivoting & exploring In context actions & navigation Avoid back buttons & fixed bottom positioning 95

96 ORGANIZATION 1. Mobile Behaviors 2. Content First 3. Navigation Elements 4.Clarity & Focus 96

97 ONE EYEBALL Partial attention requires focused design ONE THUMB PHOTO BY STEVE RHODES

98 Maintain Clarity Single Navigation Action 98

99 Minimize Errors Content 47% of mobile users tap on ads by mistake. Content SOURCE: HARRIS INTERACTIVE, DECEMBER

100 CLARITY & FOCUS Minimize amount of navigation required Focus on task at hand 100

101 Exercise How do mobile use cases intersect with? Your customer s needs Your business goals Sketch out your mobile Web experience start screen. Focus on: Lookup/Find, Check In/Status, Explore/Play, Edit/Create Content first, navigation second Navigation elements Clarity & focus 101

102 ORGANIZATION 1. Mobile Behaviors 2. Content First 3. Navigation Elements 4.Clarity & Focus 102

103 LUKEW.COM 103

104 104