Slides from my talk at UX Ireland on 10 November 2016 http://uxireland.net/sessions/index.php?session=108 Abstract: From myths to trends and best practice, actual usage, engagement, design patterns and interactions - in this session, I will 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.

1. www.flickr.com/photos/alexnormand/5992512756
@annadahlstrom | UX Ireland, 10 November 2016
BEYOND THE
MENU
WHAT YOU NEED TO KNOW ABOUT DESIGNING FOR MULTIPLE DEVICES
hamburger

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

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

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

5. “ 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

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

7. 1.
Not just mobile

8. 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.

9. https://www.flickr.com/photos/neontommy/9795979256
People think
of this

10. Source: Google Search result

11. Many of us own
multiple mobile devices

12. Source: Google Search result

13. 2.
It’s the same, but different

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

15. 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

16. 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

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

18. 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

19. Myth:
Mobile users are rushed & on the go
Image courtesy of Shutterstock

20. 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

21. 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

22. 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

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

24. Source: http://marketingland.com/digital-growth-now-coming-mobile-usage-comscore-171505

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

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

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

28. 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

29. Each device is different.
Make the most of it

30. 3.
Everyone doesn’t have an iPhone

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

32. At times we seem to
think that this is what users use

33. Source: http://www.gartner.com/newsroom/id/3415117
Android reached a 86.2%
market share in Q2 of 20116

34. Sales of highend Android
phones are increasing

35. 4.
There’s an app for that

36. Remember this?

37. “ 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

38. “ 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

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

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

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

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

43. $millions
in refunds

44. So… should you
develop an app?

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

46. www.flickr.com/photos/haagsuitburo/5349040355www.flickr.com/photos/haagsuitburo/5349040355 www.flickr.com/photos/soundslogical/4255801733
direct vs non-direct

47. 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

48. 5.
Growing methods of input

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

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

51. 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

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

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

54. From Flickr

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

56. 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

57. 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

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

60. A day of
using voice

61. A day of
using voice

62. A day of
using voice

63. A day of
using voice

64. A day of
using voice

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

68. Bots the next frontier

70. 6.
It’s about the individual

71. Screenshot: https://moto360.motorola.com/

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

73. Screenshot: http://www.apple.com/uk/

74. Integration

75. “ 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

76. 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

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

78. A talks to B talks to C
talks to D talks to …
… understands the user

79. Screenshot https://ifttt.com

80. 7.
Context + content = king

81. “ Argh! Did not
mean to do that ”
[Delete]

82. Selected by default.
Bad Swarm

83. Screenshot: https://ifttt.com/

84. 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

85. Screenshot: http://www.apple.com/uk/

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

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

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

89. Source: Duo Skin

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

91. Intelligent | Knows you

92. 8.
Treat it like lego

93. https://www.flickr.com/photos/websummit/15089463204/
A boundless future where
content flows from one “device” to another
Screenshot: Minority Report

94. www.flickr.com/photos/mirafoto/494444094
“ Get your content to go anywhere,
because it’s going to go everywhere. ”
- Brad Frost

95. 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

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

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

98. www.flickr.com/photos/donsolo/2136923757/
Clever design
Clever team

99. device
browser
screen
input method
connection speed
Any
anytime
anywhereUsed

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

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

102. 9.
Go beyond the hamburger

103. Screenshot: https://twitter.com/beep/status/509027146950778881

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

105. 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

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

107. Lower discoverability
Less efficient
Clash with platform navigation patterns
Not glanceable

109. Screenshot: https://developer.android.com/design/index.html

110. Screenshot: https://developer.android.com/design/index.html

111. 10.
It’s all about navigation

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

113. Navigation is conversation

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

115. 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

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

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

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

119. - 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/

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