Slides from my talk Beyond the Hamburger Menu at UX In The City Oxford http://uxinthecity.net/2017/oxford/sessions/index.php?session=109 ABSTRACT From myths to trends and best practice, actual usage, engagement, design patterns and interactions - in this session, I will go through the insights behind the stats and take a look at the reality behind mobile and what really matters when designing for multiple devices.

1. www.flickr.com/photos/alexnormand/5992512756
@annadahlstrom @uxfika | UX In The City, Oxford, 21 April 2017 - #uxcityOx
BEYOND THE
MENU
WHAT YOU NEED TO KNOW ABOUT DESIGNING FOR MULTIPLE DEVICES
hamburger

2. What
about Wall•E?
www.robotshop.com/blog/where-is-wall-e-1391 @annadahlstrom

3. “ Design for everyone and you design for no-one”
https://www.flickr.com/photos/coofdy/12245978213/in/photostream/ @annadahlstrom

4. https://www.flickr.com/photos/fotobib/13759982694
With mobile the
impossible has become possible
@annadahlstrom

5. “ 70% of users check their
smartphone within an hour of
getting up. ”
- Source: Zerohedge
Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html @annadahlstrom

6. https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
@annadahlstrom

7. 1.
Not just mobile
@annadahlstrom

8. mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.
mobile. mobile. mobile. mobile. mobile. mobile.

9. https://www.flickr.com/photos/neontommy/9795979256
People think
of this
@annadahlstrom

10. Source: Google Search result @annadahlstrom

11. Many of us own
multiple mobile devices
@annadahlstrom

12. Source: Google Search result @annadahlstrom

13. 2.
It’s the same, but different
@annadahlstrom

14. Source: www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
We’re increasingly living in
a mobile first world
@annadahlstrom

15. Source: www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
“ For a quarter of users it’s
a mobile world only ”.
- Source: Think with Google
@annadahlstrom

16. www.flickr.com/photos/patdavid/9391602153
“ Your mobile phone has more computing power than
the computers used for the Apollo 11 moon landing. ”
- Source: www.factslides.com/s-Mobile-Phones
@annadahlstrom

17. Source: http://think.storage.googleapis.com/docs/how-advertisers-can-extend-their-relevance-with-search_research-studies.pdf @annadahlstrom

18. Source Creative Market
“ 64% of smartphone shoppers turn to mobile search for
ideas about what to buy before heading into stores. ”
- Source: Think with Google
@annadahlstrom

19. Myth:
Mobile users are rushed & on the go
Image courtesy of Shutterstock @annadahlstrom

20. MobileSearchMoMentSUnderStandinghowMobiledriveSconverSionS
3of4mobilesearches
triggerfollow-upactions
Mobile searches drive valuable
outcomes for businesses
Actions triggered by mobile search
also happen very quickly
ofconversions(storevisit,
phonecallorpurchase)
happeningwithinanhour55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product&shoppingsearcheshavea
highernumberofoutcomes
Number of follow-up actions per mobile search
Mobile search is always on, happening
on the go, at home and at work
ofmobilesearches
occurathomeor
work;17%onthego77%
2.082.523.56
Travel FoodAutoBeauty Tech
2.072.20
36%
Continued
Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailer’s
Website
17%
Visited a Store
7%
Called a Business
Mobile searches are strongly tied to specific contexts
Shopping queries are 2x more likelyto be in store
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html - FROM MARCH 2013
In March 2013
Google came out with this
@annadahlstrom

21. Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
Home Work Stores Restaurants & bars
The top 4 places we
use mobiles in an average day
@annadahlstrom

22. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ @annadahlstrom

23. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/attachment/mobile-share-of-online-time-percent-2017/ @annadahlstrom

24. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ @annadahlstrom

25. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ @annadahlstrom

26. Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
We spend nearly 3 hours a
day on our phones
@annadahlstrom

27. Commute
Sequential usage
Morning Work
Simultaneous usage
+
Multi-tasking
+
Extending
+
Complementing
OR
“ 90% of users start a task on one device and then complete it on another. ”
- Source: Google
@annadahlstrom

28. Users expect an equal & continuous
experience across each one
www.flickr.com/photos/joachim_s_mueller/7110473339 @annadahlstrom

29. www.flickr.com/photos/patdavid/9391602153
Image from Creative Bloq
“ Each device has its own features and capabilities
that prevents a one size fit all solution from being
implemented. ”
- Source: Adobe @annadahlstrom

30. Each device is different.
Make the most of it
@annadahlstrom

31. Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ @annadahlstrom

32. 3.
Everyone doesn’t have an iPhone
@annadahlstrom

33. At times we seem to
think that this is what users use
@annadahlstrom

34. Source: https://www.statista.com/statistics/266136/global-market-share-held-by-smartphone-operating-
Android reached a 87.8%
market share in Q3 of 2016
but dropped to 81.7% in Q4
@annadahlstrom

35. Sales of highend Android
phones have driven growth
@annadahlstrom

36. Source: https://mobiforge.com/research-analysis/mobile-software-statistics-2015
Which operating system
that dominates varies greatly
@annadahlstrom

37. www.flickr.com/photos/gadl/3570118243
Every platform has their own
ui guidelines that their users are used to
@annadahlstrom

38. The best ones know & design
with these in mind
@annadahlstrom
iOS Android AndroidiOS

39. 4.
There’s an app for that
@annadahlstrom

40. Remember this?
@annadahlstrom

41. “ The hottest app among
Silicon Valley early adopters
right now is Secret.
You use it to post anonymous
secrets. For the past two days
it's all anyone is talking about
on Twitter. ”
- Nicholas Carlson, Business Insider
@annadahlstrom

42. “ The good news for Apple
is that it's available on iPhone.
The bad news for Apple is
that it's really hard to find
Secret through the App Store
app on your iPhone. ”
- Nicholas Carlson, Business Insider
@annadahlstrom

43. Source - http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/ @annadahlstrom

44. Source - https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/ @annadahlstrom

45. Source - https://www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/ @annadahlstrom

46. “ The zombies have completely taken over the app stores. ”
- Source: Arc
https://www.flickr.com/photos/cucciolosergio/4038081573/ @annadahlstrom

47. Source - http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ @annadahlstrom

48. $millions
in refunds
@annadahlstrom

49. So… should you
develop an app?
@annadahlstrom

50. “The Web is for audience reach
and native apps are for rich experiences.”
- Luke W.
https://www.flickr.com/photos/alvy/12769050423 @annadahlstrom

51. www.flickr.com/photos/haagsuitburo/5349040355www.flickr.com/photos/haagsuitburo/5349040355 www.flickr.com/photos/soundslogical/4255801733
direct vs non-direct

52. www.flickr.com/photos/dougbelshaw/4360008898
” Money spent developing a pretty but limited iPhone
app only benefits [...] the few, but money spent on
the website UI would have benefitted everyone. ”
- Gary Marshall on ‘The app trap’ in .net Magazine
@annadahlstrom

53. 5.
Growing methods of input
@annadahlstrom

54. www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jorgeq82/4732700819

55. www.flickr.com/photos/jorgeq82/4732700819
The first iPhone was
designed to be held in one hand…
@annadahlstrom

56. Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
…and easy to
interact with
@annadahlstrom

57. https://www.flickr.com/photos/andrikoolme/25555948965
Then
this happened
@annadahlstrom

58. https://www.flickr.com/photos/nomacnolife/21881584208
..and Apple
followed suit
@annadahlstrom

59. From Flickr @annadahlstrom

60. www.flickr.com/photos/66327170@N07/7296381856
“ New rule: every desktop design has to go finger-friendly ”
- Josh Clark
@annadahlstrom

61. Source & images from Smashing Mag- https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
It gets harder the
larger our devices are
@annadahlstrom

62. It’s making us
rethink navigation
Tumblr Google Calendar Task Rabbit Pinterest
@annadahlstrom

63. https://blogs.adobe.com/creativecloud/holistic-adaptive-design/
“ Making the design touch
target too small, which
requires precise input
precision, can frustrate users,
while making touch targets
too big can clutter the
interface. ”
- Source: Adobe, Holistic Adaptive Design
@annadahlstrom

64. https://www.flickr.com/photos/sidkid/2908468343
There’ll be a
move away from this
@annadahlstrom

65. @annadahlstrom

66. A day of
using voice
@annadahlstrom

67. A day of
using voice
@annadahlstrom

68. A day of
using voice
@annadahlstrom

69. A day of
using voice
@annadahlstrom

70. A day of
using voice

71. @annadahlstrom

72. It’s estimated that by 2020
50% of all searches will be by voice
Image courtesy of Shutterstock @annadahlstrom

73. @annadahlstrom

74. @annadahlstrom
“ Every time the Google
Assistant apologizes, it’s a
data point that something
might be improved… ”
- Source: Backchannel

75. It’s not just voice
but bots in various forms
Screenshot: Screenshot uxchat.me/ @annadahlstrom

76. Bots the next frontier
@annadahlstrom

77. @annadahlstrom
Big Health Sleepio Headspace

78. 6.
It’s about the individual
@annadahlstrom

79. Screenshot: https://moto360.motorola.com/ @annadahlstrom

80. Screenshot: https://moto360.motorola.com/
“ It’s a really tiny computer strapped to
your wrist ”
- Source: Mashable
@annadahlstrom

81. Screenshot: http://www.apple.com/uk/ @annadahlstrom

82. Integration
@annadahlstrom

83. “ One third of Americans who already
own some sort of wrist-mounted device
stop wearing theirs after six months” ”
- Source: FastCompany
https://www.flickr.com/photos/djkeino/8667722768 @annadahlstrom

84. Screenshot: http://www.apple.com/uk/
“ In order for any wearable to be successful it has to
disappear from the foreground, and its utility in your life has
to far outweigh any small inconvenience. ”
- Source: Mashable
@annadahlstrom

85. Source www.wareable.com/smartwatches/best-smart-analogue-watch @annadahlstrom

86. A talks to B talks to C
talks to D talks to …
… understands the user
@annadahlstrom

87. Screenshot https://ifttt.com @annadahlstrom

88. https://www.flickr.com/photos/quattrovageena/2664049226/
“ Every once in a while, a revolutionary product
comes along that changes everything. ”
- Steve Jobs
@annadahlstrom

89. Smart homes are
the new smartphones
Screenshot fromThe Next Web http://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#gref @annadahlstrom

90. 7.
Context + content = king
@annadahlstrom

91. “ Argh! Did not
mean to do that ”
[Delete]
@annadahlstrom

92. Selected by default.
Bad Swarm
@annadahlstrom

93. Screenshot: https://ifttt.com/ @annadahlstrom

94. https://www.flickr.com/photos/pure9/2603089643
“ They should demand our attention only at truly demanding
moments. ”
- Global Moxie,
Smart Watches, Wearables, and That Nasty Data Rash
@annadahlstrom

95. Screenshot: http://www.apple.com/uk/ @annadahlstrom

96. Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg
From the ‘In Time’ movie
@annadahlstrom

97. Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg
From the ‘In Time’ movie
@annadahlstrom

98. Source: https://www.youtube.com/watch?v=9J7GpVQCfms @annadahlstrom

99. Source: Duo Skin @annadahlstrom

100. Screenshot from http://www.duceretech.com/ @annadahlstrom

101. Screenshot from www.wired.com/2016/05/easy-jet-sneakairs-smart-shoes/ @annadahlstrom

102. Intelligent | Knows you
@annadahlstrom

103. 8.
Treat it like lego
@annadahlstrom

104. https://www.flickr.com/photos/websummit/15089463204/
A boundless future where
content flows from one “device” to another
Screenshot: Minority Report

105. www.flickr.com/photos/mirafoto/494444094
“ Get your content to go anywhere,
because it’s going to go everywhere. ”
- Brad Frost
@annadahlstrom

106. Screenshot: https://blog.intercom.com/the-end-of-apps-as-we-know-them/
“ The idea of an app as an
independent destination is
becoming less important, and
the idea of an app as a
publishing tool, with related
notifications that contain
content and actions, is
becoming more important. ”
- Source: The End of Apps As We Know Them
@annadahlstrom

107. It’s one of the
ideas behind iOS 10
Screenshot: Apple.co.uk

108. …everywhere
@annadahlstrom

109. Source: Open Signal http://opensignal.com/reports/2015/08/android-fragmentation/ @annadahlstrom

110. Less about pages &
more about building blocks
www.flickr.com/photos/boltofblue/4418442567 @annadahlstrom

111. The big reveal of
the page design is gone
https://www.flickr.com/photos/s-e-f/6455978889/ @annadahlstrom

112. www.flickr.com/photos/donsolo/2136923757/
Clever team
Clever design & build
@annadahlstrom

113. www.flickr.com/photos/ulfk/7976687420
We’ve been doing
modular design for a long time
This is Lund Cathedral in my
hometown. It’s nearly 900 years old
@annadahlstrom

114. @annadahlstrom

115. Magic & ‘stop’
all in one
https://www.flickr.com/photos/wlodi/3085157011 @annadahlstrom

116. If we’re not careful
we’ll be swimming in pieces
https://www.flickr.com/photos/wwworks/2472230611 @annadahlstrom

117. Sooner or later you’ve
got to clearn up the mess
https://www.flickr.com/photos/clement127/28800579010/ @annadahlstrom

118. Allows our content to adjust to different
devices & screen sizes
@annadahlstrom

119. Define views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHome
Header& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
Gallery
Descrip-
tion
Footer
Additional info
Related products
@annadahlstrom

120. Break down content further & explore layouts
1 Header& Nav
2 Filter & search
Product listing
1 Header& Nav
2
Gallery
2
Descrip-
tion
8 Footer
3
Additional info
Product page
1 Header& Nav
2
Category
3
Category
4 Category
9
Categ
7
Categ
10 Footer
Categories
7
Prod
6
Categ
5
Categ
1 Header& Nav
2
Features
11 Footer
Home
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
8
Categ
6
Prod
5
Prod
4
Prod
3
Prod
10
Prod
9
Prod
8
Prod
7
Prod
14
Prod
13
Prod
12
Prod
11
Prod
18
Prod
17
Prod
16
Prod
15
Prod
19 Footer
7
Prod
6
Prod
5
Prod
4
Prod
@annadahlstrom

121. Home - large
Header& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2
Features
11 Footer
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
1 Header& Nav
2
Features
10 Footer
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
Header& Nav
Features
Footer
Home - small
Featured
categories
Featured
products
Do the same across screen sizes
@annadahlstrom

122. Break down each module into elements
Home - large
Header& Nav
Features
Footer
Featured products
Featured categories
1 Header& Nav
2
Features
11 Footer
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
1 Header& Nav
2
Features
10 Footer
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
Header& Nav
Features
Footer
Home - small
Featured
categories
Featured
products

123. Feature - large Feature - small
Featured products - large
Single product - large
Featured products - small
Single product- small
Views Modules
Home - large Home - small
Start identifying your building blocks & variations
@annadahlstrom

124. Iterate & refine across views & key templates
Header& Nav
Products
Footer
Filter & search
Product listing Product pageCategoriesHome
Header& Nav
Features
Footer
Featured products
Featured categories
Header& Nav
Footer
Categories
Header& Nav
Gallery
Descrip-
tion
Additional info
Related products
10
Prod
9
Prod
8
Prod
7
Prod
7
Prod
6
Prod
5
Prod
4
Prod
Footer
6
Prod
5
Prod
4
Prod
3
Prod
10
Prod
9
Prod
8
Prod
7
Prod
14
Prod
13
Prod
12
Prod
11
Prod
18
Prod
17
Prod
16
Prod
15
Prod
@annadahlstrom

125. Gradually build your module library
Feature - large Feature - small
Featured products - large Featured products - small
Single product - large Single product- small
Also used for:
• Module REL01 - Related products
1
3
4
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1
@annadahlstrom

126. device
browser
screen
input method
connection speed
Any
anytime
anywhereUsed
@annadahlstrom

127. “ The site you build is not dependent on
knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock @annadahlstrom

128. 1. Take 2 pieces of A4 paper
2. Fold one in half and rip it
into two pieces
3. Continue until you have 5
uniquely sized pieces of paper, the
intact A4 piece of paper included
4. Consider their physical size to
be the size of the screen you’re
designing for
4. Sketch your main pages and
views onto each one
https://www.flickr.com/photos/skynoir/8825832242/ @annadahlstrom

129. www.flickr.com/photos/visualpunch/7351572896
Adapt to device, platform,
purpose & usage
@annadahlstrom

130. 9.
Go beyond the hamburger
@annadahlstrom

131. Screenshot: https://twitter.com/beep/status/509027146950778881 @annadahlstrom

132. Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ @annadahlstrom

133. Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
“ Like a cheap fast food chain, it got designers addicted
to its convenience, and now serves millions each day, both on
mobile devices and on desktops.”. ”
- Source: Nielsen Norman Group
@annadahlstrom

134. Source & images from - https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/ @annadahlstrom

135. Lower discoverability
Less efficient
Clash with platform navigation patterns
Not glanceable
@annadahlstrom

136. @annadahlstrom

137. “ More and more sites and
apps are experimenting with
alternative, more efficient
solutions for this very problem.
None of the ideas listed here is
better than the others, their
viability and performance
obviously depend on the
content and the context. ”
- Source: Alternatives to hamburger menu
Screenshot: https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8
Tabs
Tabs with ‘more’ option
Progressively collapsing menu
Scrollable navigation
@annadahlstrom

138. 10.
It’s all about navigation
@annadahlstrom

139. https://www.flickr.com/photos/neilsingapore/5465403730
What and where to click, tap, select, fill in,
do, go next, ignore, pay attention to…
@annadahlstrom

140. Navigation is conversation
@annadahlstrom

141. www.flickr.com/photos/66327170@N07/7296381856
Best
buddies
@annadahlstrom

142. 1. Don’t look at mobile too narrowly
2. Play to each device’s strengths
3. Consider all platforms
4. Look at app rational
5. Cater for different input methods
6. Think about the individual
7. Context + content = king
8. Build a system of components
9. Evaluate design & navigations patterns
10. It’s all about navigation
@annadahlstrom

143. www.robotshop.com/blog/where-is-wall-e-1391
So, what
about Wall•E?
@annadahlstrom

144. www.robotshop.com/blog/where-is-wall-e-1391
We can design
specifically for Wall•E
@annadahlstrom

145. www.flickr.com/photos/htakashi/9754012931
Help him get more out
of life (but without the cord)
@annadahlstrom

146. - Wilson Minor
“We’re not just making pretty interfaces.
We’re actually in the process of making an
environment where we’ll spend most of
our time, for the rest of our lives.
We’re the designers. We’re the builders.
What do we want that environment to
feel like? What do we want to feel like.”
http://www.flickr.com/photos/funch/4679422945/
@annadahlstrom

147. Thank you
@annadahlstrom @uxfika | anna.dahlstrom@gmail.com
www.annadahlstrom.com | www.uxfika.co