www.flickr.com/photos/alexnormand/5992512756
@annadahlstrom @uxfika | UX In The City, Oxford, 21 April 2017 - #uxcityOx
BEYOND THE
MENU
WHAT YOU NEED TO KNOW ABOUT DESIGNING FOR MULTIPLE DEVICES
hamburger

What
about Wall•E?
www.robotshop.com/blog/where-is-wall-e-1391 @annadahlstrom

“ Design for everyone and you design for no-one”
https://www.flickr.com/photos/coofdy/12245978213/in/photostream/ @annadahlstrom

https://www.flickr.com/photos/fotobib/13759982694
With mobile the
impossible has become possible
@annadahlstrom

“ 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

https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”
@annadahlstrom

1.
Not just mobile
@annadahlstrom

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
@annadahlstrom

Source: Google Search result @annadahlstrom

Many of us own
multiple mobile devices
@annadahlstrom

Source: Google Search result @annadahlstrom

2.
It’s the same, but different
@annadahlstrom

Source: www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
We’re increasingly living in
a mobile first world
@annadahlstrom

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
@annadahlstrom

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
@annadahlstrom

Source: http://think.storage.googleapis.com/docs/how-advertisers-can-extend-their-relevance-with-search_research-studies.pdf @annadahlstrom

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

Myth:
Mobile users are rushed & on the go
Image courtesy of Shutterstock @annadahlstrom

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

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
@annadahlstrom

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

Source: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/attachment/mobile-share-of-online-time-percent-2017/ @annadahlstrom

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

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

Source: https://www.thinkwithgoogle.com/articles/device-use-marketer-tips.html
We spend nearly 3 hours a
day on our phones
@annadahlstrom

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

Users expect an equal & continuous
experience across each one
www.flickr.com/photos/joachim_s_mueller/7110473339 @annadahlstrom

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 @annadahlstrom

Each device is different.
Make the most of it
@annadahlstrom

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

3.
Everyone doesn’t have an iPhone
@annadahlstrom

At times we seem to
think that this is what users use
@annadahlstrom

Source: https://www.statista.com/statistics/266136/global-market-share-held-by-smartphone-operating-
Android reached a 87.8%
market share in Q3 of 2016
but dropped to 81.7% in Q4
@annadahlstrom

Sales of highend Android
phones have driven growth
@annadahlstrom

Source: https://mobiforge.com/research-analysis/mobile-software-statistics-2015
Which operating system
that dominates varies greatly
@annadahlstrom

www.flickr.com/photos/gadl/3570118243
Every platform has their own
ui guidelines that their users are used to
@annadahlstrom

The best ones know & design
with these in mind
@annadahlstrom
iOS Android AndroidiOS

4.
There’s an app for that
@annadahlstrom

Remember this?
@annadahlstrom

“ 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

“ 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

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

Source - https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/ @annadahlstrom

Source - https://www.statista.com/statistics/263795/number-of-available-apps-in-the-apple-app-store/ @annadahlstrom

“ The zombies have completely taken over the app stores. ”
- Source: Arc
https://www.flickr.com/photos/cucciolosergio/4038081573/ @annadahlstrom

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

$millions
in refunds
@annadahlstrom

So… should you
develop an app?
@annadahlstrom

“The Web is for audience reach
and native apps are for rich experiences.”
- Luke W.
https://www.flickr.com/photos/alvy/12769050423 @annadahlstrom

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
@annadahlstrom

5.
Growing methods of input
@annadahlstrom

www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jorgeq82/4732700819

www.flickr.com/photos/jorgeq82/4732700819
The first iPhone was
designed to be held in one hand…
@annadahlstrom

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

https://www.flickr.com/photos/andrikoolme/25555948965
Then
this happened
@annadahlstrom

https://www.flickr.com/photos/nomacnolife/21881584208
..and Apple
followed suit
@annadahlstrom

From Flickr @annadahlstrom

www.flickr.com/photos/66327170@N07/7296381856
“ New rule: every desktop design has to go finger-friendly ”
- Josh Clark
@annadahlstrom

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

It’s making us
rethink navigation
Tumblr Google Calendar Task Rabbit Pinterest
@annadahlstrom

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
@annadahlstrom

https://www.flickr.com/photos/sidkid/2908468343
There’ll be a
move away from this
@annadahlstrom

@annadahlstrom

A day of
using voice
@annadahlstrom

A day of
using voice
@annadahlstrom

A day of
using voice
@annadahlstrom

A day of
using voice
@annadahlstrom

A day of
using voice

@annadahlstrom

It’s estimated that by 2020
50% of all searches will be by voice
Image courtesy of Shutterstock @annadahlstrom

@annadahlstrom

@annadahlstrom
“ Every time the Google
Assistant apologizes, it’s a
data point that something
might be improved… ”
- Source: Backchannel

It’s not just voice
but bots in various forms
Screenshot: Screenshot uxchat.me/ @annadahlstrom

Bots the next frontier
@annadahlstrom

@annadahlstrom
Big Health Sleepio Headspace

6.
It’s about the individual
@annadahlstrom

Screenshot: https://moto360.motorola.com/ @annadahlstrom

Screenshot: https://moto360.motorola.com/
“ It’s a really tiny computer strapped to
your wrist ”
- Source: Mashable
@annadahlstrom

Screenshot: http://www.apple.com/uk/ @annadahlstrom

Integration
@annadahlstrom

“ 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

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

Source www.wareable.com/smartwatches/best-smart-analogue-watch @annadahlstrom

A talks to B talks to C
talks to D talks to …
… understands the user
@annadahlstrom

Screenshot https://ifttt.com @annadahlstrom

https://www.flickr.com/photos/quattrovageena/2664049226/
“ Every once in a while, a revolutionary product
comes along that changes everything. ”
- Steve Jobs
@annadahlstrom

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

7.
Context + content = king
@annadahlstrom

“ Argh! Did not
mean to do that ”
[Delete]
@annadahlstrom

Selected by default.
Bad Swarm
@annadahlstrom

Screenshot: https://ifttt.com/ @annadahlstrom

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
@annadahlstrom

Screenshot: http://www.apple.com/uk/ @annadahlstrom

Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg
From the ‘In Time’ movie
@annadahlstrom

Borrowed from http://www.doblu.com/wp-content/uploads/2012/02/intime1537.jpg
From the ‘In Time’ movie
@annadahlstrom

Source: https://www.youtube.com/watch?v=9J7GpVQCfms @annadahlstrom

Source: Duo Skin @annadahlstrom

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

Screenshot from www.wired.com/2016/05/easy-jet-sneakairs-smart-shoes/ @annadahlstrom

Intelligent | Knows you
@annadahlstrom

8.
Treat it like lego
@annadahlstrom

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
@annadahlstrom

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

It’s one of the
ideas behind iOS 10
Screenshot: Apple.co.uk

…everywhere
@annadahlstrom

Source: Open Signal http://opensignal.com/reports/2015/08/android-fragmentation/ @annadahlstrom

Less about pages &
more about building blocks
www.flickr.com/photos/boltofblue/4418442567 @annadahlstrom

The big reveal of
the page design is gone
https://www.flickr.com/photos/s-e-f/6455978889/ @annadahlstrom

www.flickr.com/photos/donsolo/2136923757/
Clever team
Clever design & build
@annadahlstrom

www.flickr.com/photos/ulfk/7976687420
We’ve been doing
modular design for a long time
This is Lund Cathedral in my
hometown. It’s nearly 900 years old
@annadahlstrom

@annadahlstrom

Magic & ‘stop’
all in one
https://www.flickr.com/photos/wlodi/3085157011 @annadahlstrom

If we’re not careful
we’ll be swimming in pieces
https://www.flickr.com/photos/wwworks/2472230611 @annadahlstrom

Sooner or later you’ve
got to clearn up the mess
https://www.flickr.com/photos/clement127/28800579010/ @annadahlstrom

Allows our content to adjust to different
devices & screen sizes
@annadahlstrom

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

Break down content further & explore layouts
1 Header& Nav
2 Filter & search
Product listing
1 Header& Nav
2
Gallery
2
Descrip-
tion
8 Footer
3
Additional info
Product page
1 Header& Nav
2
Category
3
Category
4 Category
9
Categ
7
Categ
10 Footer
Categories
7
Prod
6
Categ
5
Categ
1 Header& Nav
2
Features
11 Footer
Home
3
Category
4 Category
6
Categ
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
8
Categ
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
19 Footer
7
Prod
6
Prod
5
Prod
4
Prod
@annadahlstrom

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

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

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

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

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

device
browser
screen
input method
connection speed
Any
anytime
anywhereUsed
@annadahlstrom

“ The site you build is not dependent on
knowing what device it is being displayed on. ”
- Sarita Harbour, WDD
Image courtesy of Shutterstock @annadahlstrom

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

www.flickr.com/photos/visualpunch/7351572896
Adapt to device, platform,
purpose & usage
@annadahlstrom

9.
Go beyond the hamburger
@annadahlstrom

Screenshot: https://twitter.com/beep/status/509027146950778881 @annadahlstrom

Screenshot: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ @annadahlstrom

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
@annadahlstrom

Source & images from - https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/ @annadahlstrom

Lower discoverability
Less efficient
Clash with platform navigation patterns
Not glanceable
@annadahlstrom

@annadahlstrom

“ 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

10.
It’s all about navigation
@annadahlstrom

https://www.flickr.com/photos/neilsingapore/5465403730
What and where to click, tap, select, fill in,
do, go next, ignore, pay attention to…
@annadahlstrom

Navigation is conversation
@annadahlstrom

www.flickr.com/photos/66327170@N07/7296381856
Best
buddies
@annadahlstrom

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

www.robotshop.com/blog/where-is-wall-e-1391
So, what
about Wall•E?
@annadahlstrom

www.robotshop.com/blog/where-is-wall-e-1391
We can design
specifically for Wall•E
@annadahlstrom

www.flickr.com/photos/htakashi/9754012931
Help him get more out
of life (but without the cord)
@annadahlstrom

- 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

Thank you
@annadahlstrom @uxfika | anna.dahlstrom@gmail.com
www.annadahlstrom.com | www.uxfika.co