beyond the hamburger menu - reasons:london, 20 feb 2015

Post on 14-Jul-2015

3.317 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

www.flickr.com/photos/alexnormand/5992512756@annadahlstrom | Reasons:London, 20 February 2015

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

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

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

https://www.flickr.com/photos/pavlinajane/11389693545

“ 88% of smartphone owners used their mobile as part of their Christmas shopping last year. ”

- Source: Weve

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

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

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

Each device is different. Make the most of it

3. Everyone doesn’t 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

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

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

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

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

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/

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

Image from: https://blog.getpebble.com/

Image from http://www.techradar.com/news/wearables/lg-watch-urbane-announced-to-battle-with-the-apple-watch-1284796

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 the user

Screenshot: http://www.withings.com/activite/en-US

7. Context + content = king

“ Neeej! Inte dela! ”

[Ta bort]

“ 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

Screenshot from http://www.duceretech.com/

Screenshot from https://getpebble.com/#/CBirV0:pr8

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

Report: http://go.appannie.com/mobile-apps-blurring-lines-virtual-physical-worlds-register-ph.html?

1. Don’t look at mobile too narrowly 2. Play to each device strength 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

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

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 | anna.dahlstrom@gmail.com www.annadahlstrom.com

top related