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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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