Embed Size (px)
DESCRIPTION
Slides from my talk at MOBX in Berlin on 13 Sep 2014 - http://2014.mobxcon.com/ Beyond the hamburger menu - What you need to know about designing for multiple devices. Abstract: From myths to trends and best practice, actual usage, engagement, design patterns and interactions, we’ll go through the insights behinds the stats and take a look at the reality behind mobile and what really matters when designing for multiple devices.
Citation preview
www.flickr.com/photos/alexnormand/5992512756@annadahlstrom | MOBX, 13 September 2014
BEYOND THE
MENUWHAT YOU NEED TO KNOW ABOUT DESIGNING FOR MULTIPLE DEVICES
hamburger
What about Wall•E?
www.robotshop.com/blog/where-is-wall-e-1391
“ Design for everyone and you design for no-one”
https://www.flickr.com/photos/coofdy/12245978213/in/photostream/
https://www.flickr.com/photos/fotobib/13759982694
With mobile the impossible has become possible
www.flickr.com/photos/exlibris/2552107635
!
!
“ A third of all smartphone users in the U.K.—or 11 million adults—check their phone within five minutes of waking. ”
- Source: WSJ
www.flickr.com/photos/exlibris/2552107635
!
!
“ A third of all smartphone users in the U.K.—or 11 million adults—check their phone within five minutes of waking. ”
- Source: WSJ
https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
1. Move away from 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. mobile.
www.flickr.com/photos/alexnormand/5992512756
!
!
!
It’s amazing!!!
www.flickr.com/photos/alexnormand/5992512756
!
!
!
Yes, it really is. But…
https://www.flickr.com/photos/neontommy/9795979256
People think of this
Source: Google Search result
Many of us own multiple devices
Morning Commute Work Lunch Meeting Dinner Movie
We switch between them throughout the day
Source: Google Search result
2. It’s the same, but different
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
Source: http://think.storage.googleapis.com/docs/how-advertisers-can-extend-their-relevance-with-search_research-studies.pdf
www.flickr.com/photos/pandiyan/4550066009
!
!
!
“ 7 out of 10 smartphone and tablet users expect the same quality of experience on all devices. ”
- Source: Vibrantmedia
Myth: Mobile users are rushed & on the go
Image courtesy of Shutterstock
Mobile Search MoMentSUnderStanding how Mobile driveS converSionS
3 of 4 mobile searches trigger follow-up actions
Mobile searches drive valuable
outcomes for businesses
Actions triggered by mobile search
also happen very quickly
of conversions (store visit, phone call or purchase) happening within an hour55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product & shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search
Mobile search is always on, happening
on the go, at home and at work
of mobile searches occur at home or work; 17% on the go77%
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
0RELOH�VHDUFKHV�DUH�VWURQJO\�WLHG�WR�VSHFLȴF�FRQWH[WV�
Shopping queries are 2x more likely to be in store
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html
Devices are used interchangeably
www.flickr.com/photos/soyproject/6066959891
Users expect an equal & continuous experience across each one
www.flickr.com/photos/joachim_s_mueller/7110473339
3. Everyone do not have an iPhone
“ Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 ” *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222
Source: https://econsultancy.com/blog/65393-10-revealing-mobile-stats-you-may-not-have-seen#i.m6lfr2bjxekusq
“ Android accounted for 85% of all smartphones shipped in Q2 — its highest ever proportion ”
- Source: Tech Crunch
https://www.flickr.com/photos/jantik/4620819221/sizes/o/
Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html
www.flickr.com/photos/gadl/3570118243
Every platform has their own ui guidelines that their users are used to
4. There’s an app for that
“ 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
“ 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
Apple: 1.3 million (Sep)Android: 1+ million (July)
Windows: 300,000+ (Aug) Blackberry: 130,000 / 370,000
30hrs 15 mins / month
https://www.flickr.com/photos/alvy/12769050423
26.8 apps / month
https://www.flickr.com/photos/alvy/12769050423
https://www.flickr.com/photos/alvy/12769050423
26.8 apps / month
30hrs 15 mins / month
More time spent, but not more apps used
+
=
2. Entertainment
1. Search, portals & social
3. Communications
https://www.flickr.com/photos/alvy/12769050423
60% vs 54%Money spent on apps
Tablet Smartphone
$19 vs $13Average spend
$20 vs $20Subscriptions
$19million in refunds
www.flickr.com/photos/tomitapio/4053123799/in/photostream
Should I do an app?
www.flickr.com/photos/haagsuitburo/5349040355www.flickr.com/photos/haagsuitburo/5349040355 www.flickr.com/photos/soundslogical/4255801733
direct vs non-direct
www.flickr.com/photos/ericconstantineau/5618576278
Avoid native apps Invest in the web UI
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
5. Bye, bye mouse monopoly
www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jorgeq82/4732700819
Precise vs Imprecise
www.flickr.com/photos/jorgeq82/4732700819
Designed to be held in one hand…
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
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
The way we use touch screens differ based on device, but also across the same device
www.flickr.com/photos/janitors/9968676044
www.flickr.com/photos/66327170@N07/7296381856
!
!
!
!
“ New rule: every desktop design has to go finger-friendly ”
- Josh Clark
https://www.flickr.com/photos/sidkid/2908468343
There’ll be a move away from this
A day of using voice
A day of using voice
A day of using voice
A day of using voice
A day of using voice
http://www.motorola.com/us/accessories-bluetooth-headsets/Moto-Hint/moto-hint-pdp.html
6. It’s about the individual
Screenshot: https://moto360.motorola.com/
“ It’s a really tiny computer strapped to your wrist ”
- Source: Mashable !
Screenshot: http://www.apple.com/uk/
Integration
“ 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
Screenshot: http://www.withings.com/activite/en-US
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
A talks to B talks to C talks to D talks to …
… understands to the user
7. Context + content = king
“ Neeej! Inte dela! ”
[Ta bort]
“ Argh! Did not mean to do that ”
[Delete]
-
Selected by default. Bad Swarm
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
Screenshot: http://www.apple.com/uk/
Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg
From the ‘In Time’ movie
Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg
From the ‘In Time’ movie
Screenshot from http://www.duceretech.com/
Intelligent | Knows you
8. It’s like lego
“ And just as the first wave of desktop apps ported to mobile were underwhelming and replaced by mobile-first applications, so will companies quickly realize that it isn’t just a new screen but a brand-new platform. ”
- Source: Techcrunch
www.flickr.com/photos/mirafoto/494444094
“ Get your content to go anywhere, because it’s going to go everywhere. ”
- Brad Frost
Less about pages & more about building blocks
www.flickr.com/photos/boltofblue/4418442567
www.flickr.com/photos/donsolo/2136923757/
Clever designClever team
device browser screen input method connection speed
Any
anytime anywhereUsed
www.flickr.com/photos/visualpunch/7351572896
Adapt to device, platform, purpose & usage
9. Go beyond the hamburger
Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
Lower discoverability
Less efficient
Clash with platform navigation patterns
Not glanceable
Screenshot: https://twitter.com/beep/status/509027146950778881
Screenshot: https://developer.android.com/design/index.html
Screenshot: https://developer.android.com/design/index.html
10. It’s all about navigation
https://www.flickr.com/photos/neilsingapore/5465403730
What and where to click, tap, select, fill in, do, go next, ignore, pay attention to…
www.flickr.com/photos/66327170@N07/7296381856
Best buddies
So, what about Wall•E?
www.robotshop.com/blog/where-is-wall-e-1391
www.robotshop.com/blog/where-is-wall-e-1391
We can design specifically for Wall•E
Thank you@annadahlstrom | [email protected] www.annadahlstrom.com
