Design for everyone and you design for no-one Dahlström @annadahlstrom

1. hamburger
WHAT YOU NEED TO KNOW ABOUT DESIGNING FOR MULTIPLE DEVICES
www.flickr.com/photos/alexnormand/5992512756
BEYOND THE
MENU
@annadahlstrom | MOBX, 13 September 2014

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. With mobile the
impossible has become possible
https://www.flickr.com/photos/fotobib/13759982694

5. !
!
“ A third of all smartphone users in the U.K.
—or 11 million adults—check their phone
within five minutes of waking. ”
www.flickr.com/photos/exlibris/2552107635
- Source: WSJ

6. !
!
“ A third of all smartphone users in the U.K.
—or 11 million adults—check their phone
within five minutes of waking. ”
www.flickr.com/photos/exlibris/2552107635
- Source: WSJ

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

8. 1.
Move away from mobile

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

10. www.flickr.com/photos/alexnormand/5992512756
!
!
!
It’s amazing!!!

11. www.flickr.com/photos/alexnormand/5992512756
!
!
!
Yes, it really is. But…

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

13. Source: Google Search result

14. Many of us own
multiple devices

15. We switch between
them throughout the day
Morning Commute Work Lunch Meeting Dinner Movie

16. Source: Google Search result

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

18. “ Your mobile phone has more computing
power than the computers used for the Apollo
11 moon landing. ”
www.flickr.com/photos/patdavid/9391602153
- Source: www.factslides.com/s-Mobile-Phones

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

20. !
!
!
“ 7 out of 10 smartphone and tablet users
expect the same quality of experience on all
devices. ”
www.flickr.com/photos/pandiyan/4550066009
- Source: Vibrantmedia

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

22. Mobile Search MoMentS
UnderStanding how Mobile driveS converSionS
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 go 77%
0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLȴFFRQWH[WV
Shopping queries are 2x more likely to be in store
Mobile searches drive valuable
outcomes for businesses
3 of 4 mobile searches
trigger follow-up actions
Actions triggered by mobile search
also happen very quickly
of conversions (store visit,
phone call or purchase)
happening within an hour 55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product shopping searches have a
higher number of outcomes
Number of follow-up actions per mobile search
3.56 2.52 2.08
2.20 2.07
Beauty Auto Travel Food Tech
36%
Continued
Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailer’s
Website
17%
Visited a Store
7%
Called a Business
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html

23. Devices are
used interchangeably
www.flickr.com/photos/soyproject/6066959891

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

25. 3.
Everyone do not have an iPhone

26. “ Smartphones accounted for 57.6% of total
sales in fourth quarter of 2013 ” *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222

27. Source: https://econsultancy.com/blog/65393-10-revealing-mobile-stats-you-may-not-have-seen#i.m6lfr2bjxekusq

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

29. Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html

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

31. 4.
There’s an app for that

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

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

34. Apple: 1.3 million (Sep)
Android: 1+ million (July)
Windows: 300,000+ (Aug)
Blackberry: 130,000 / 370,000

35. 30hrs 15 mins / month
https://www.flickr.com/photos/alvy/12769050423

36. 26.8 apps / month
https://www.flickr.com/photos/alvy/12769050423

37. 30hrs 15 mins / month
https://www.flickr.com/photos/alvy/12769050423
+
26.8 apps / month
=
More time spent, but not more apps used

38. 1. Search, portals social
2. Entertainment
3. Communications

39. https://www.flickr.com/photos/alvy/12769050423
Money spent on apps
60% vs 54%
Average spend
Tablet Smartphone
$19 vs $13
Subscriptions
$20 vs $20

40. $19million in refunds

41. Should I do an app?
www.flickr.com/photos/tomitapio/4053123799/in/photostream

42. direct vs non-direct
wwwwww.fli.cfklirc.ckorm.c/ophmot/opsh/hoataogss/uhitbauargos/5u3i4t9b0u4r0o3/555349040355 www.flickr.com/photos/soundslogical/4255801733

43. Avoid native apps
Invest in the web UI
www.flickr.com/photos/ericconstantineau/5618576278

44. ” Money spent developing a pretty but
limited iPhone app only benefits [...] the few,
but money spent on the website UI would have
benefitted everyone. ”
www.flickr.com/photos/dougbelshaw/4360008898
- Gary Marshall on ‘The app trap’ in .net Magazine

45. 5.
Bye, bye mouse monopoly

46. Precise vs Imprecise
www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jorgeq82/4732700819

47. Designed to be
held in one hand…
www.flickr.com/photos/jorgeq82/4732700819

48. …and easy to
interact with
Source images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

49. www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/janitors/9968676044
The way we use touch screens differ based
on device, but also across the same device
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

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

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

52. A day of
using voice

53. A day of
using voice

54. A day of
using voice

55. A day of
using voice

56. A day of
using voice

58. http://www.motorola.com/us/accessories-bluetooth-headsets/Moto-Hint/moto-hint-pdp.html

59. 6.
It’s about the individual

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

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

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

63. Integration

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

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

66. “ 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. ”
Screenshot: http://www.apple.com/uk/
- Source: Mashable

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

68. 7.
Context + content = king

69. “ Neeej! Inte dela! ”
[Ta bort]
-
“ Argh! Did not
mean to do that ”
[Delete]

70. Selected by default.
Bad Swarm

71. Screenshot: https://ifttt.com/

72. “ They should demand our attention
only at truly demanding moments. ”
https://www.flickr.com/photos/pure9/2603089643
- Global Moxie,
Smart Watches, Wearables, and That Nasty Data Rash

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

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

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

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

77. Intelligent | Knows you

78. 8.
It’s like lego

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

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

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

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

83. device
browser
screen
input method
connection speed
Any
Used anytime
anywhere

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

85. 9.
Go beyond the hamburger

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

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

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

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

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

92. 10.
It’s all about navigation

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

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

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

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

97. Thank you
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com