beyond the hamburger menu, ux ireland, 10 nov 2016
TRANSCRIPT
www.flickr.com/photos/alexnormand/5992512756
@annadahlstrom | UX Ireland, 10 November 2016
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
“ 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
https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
1. Not just 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.
https://www.flickr.com/photos/neontommy/9795979256
People think of this
Source: Google Search result
Many of us own multiple mobile devices
Source: Google Search result
2. It’s the same, but different
Source: www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
We’re increasingly living in a mobile first world
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
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
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
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
Mobile searches are strongly tied to specific contexts
Shopping queries are 2x more likely to 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
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
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
Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Source: http://marketingland.com/digital-growth-now-coming-mobile-usage-comscore-171505
Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
We spend nearly 3 hours a day on our phones
Users expect an equal & continuous experience across each one
www.flickr.com/photos/joachim_s_mueller/7110473339
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
Each device is different. Make the most of it
3. Everyone doesn’t have an iPhone
www.flickr.com/photos/gadl/3570118243
Every platform has their own ui guidelines that their users are used to
At times we seem to think that this is what users use
Source: http://www.gartner.com/newsroom/id/3415117
Android reached a 86.2% market share in Q2 of 20116
Sales of highend Android phones are increasing
4. There’s an app for that
Remember this?
“ 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
Source - http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/
Source - https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/
Source - https://www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/
Source - http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
$millions in refunds
So… should you develop an app?
“The Web is for audience reach and native apps are for rich experiences.”
- Luke W.
https://www.flickr.com/photos/alvy/12769050423
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/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. Growing methods of input
www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/jorgeq82/4732700819
The first iPhone wasdesigned 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
https://www.flickr.com/photos/andrikoolme/25555948965
Then this happened
https://www.flickr.com/photos/nomacnolife/21881584208
..and Apple followed suit
From Flickr
www.flickr.com/photos/66327170@N07/7296381856
“ New rule: every desktop design has to go finger-friendly ”
- Josh Clark
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
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
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
It’s estimated that by 202050% of all searches will be by voice
Image courtesy of Shutterstock
Bots the next frontier
6. It’s about the individual
Screenshot: https://moto360.motorola.com/
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.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
Source www.wareable.com/smartwatches/best-smart-analogue-watch
A talks to B talks to C talks to D talks to …
… understands the user
Screenshot https://ifttt.com
7. Context + content = king
“ Argh! Did not mean to do that ”
[Delete]
Selected by default. Bad Swarm
Screenshot: https://ifttt.com/
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
Source: https://www.youtube.com/watch?v=9J7GpVQCfms
Source: Duo Skin
Screenshot from http://www.duceretech.com/
Intelligent | Knows you
8. Treat it like lego
https://www.flickr.com/photos/websummit/15089463204/
A boundless future where content flows from one “device” to another
Screenshot: Minority Report
www.flickr.com/photos/mirafoto/494444094
“ Get your content to go anywhere, because it’s going to go everywhere. ”
- Brad Frost
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
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
“ The site you build is not dependent on knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock
www.flickr.com/photos/visualpunch/7351572896
Adapt to device, platform, purpose & usage
9. Go beyond the hamburger
Screenshot: https://twitter.com/beep/status/509027146950778881
Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
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
Source & images from - https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
Lower discoverability
Less efficient
Clash with platform navigation patterns
Not glanceable
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…
Navigation is conversation
www.flickr.com/photos/66327170@N07/7296381856
Best buddies
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
www.robotshop.com/blog/where-is-wall-e-1391
So, what about Wall•E?
www.robotshop.com/blog/where-is-wall-e-1391
We can design specifically for Wall•E
www.flickr.com/photos/htakashi/9754012931
Help him get more out of life (but without the cord)
- 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/
Thank you@annadahlstrom @uxfika | [email protected] www.annadahlstrom.com