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

It’s one of the ideas behind iOS 10

Screenshot: Apple.co.uk

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