Mobile User Experience – A key to successful strategies in the mobile market Presented at Designit, Feb. 2013 In relation to annual guest lecture at the IT University in Copenhagen.

1. ITU 2013
MOBILE USER EXPERIENCE
A key to succesful strategies
in the mobile market
Henrik Hedegaard
Lead Information Architect, Designit
@henrikhedegaard

2. Responsive design
A way to make your website look and work perfectly
across all the new devices out there without
creating and maintaining parallel mobile websites.

3. “One can also hope
that future rings
will be designed by
jewelry designers
and look less nerdy.”
– Jakob Nielsen

4. “The word design is
everything and nothing.
The design and the
product itself are
inseparable.”
– Jonathan Ive

5. DAGEN I HOVEDPUNKTER
Introduktion
Why A Mobile First Strategy
Mobile Characteristics
When Enterprises go Mobile

7. Designit in ballpark figures
21 291 25
YEARS TOP BRAINS NATIONS

8. Designit in ballpark figures
DENMARK
GERMANY SPAIN
NORWAY SWEDEN
UNITED KINGDOM CHINA
BRAZIL UNITED STATES

9. A Collective Brain
Identify user needs Rethink & discover
opportunities
Strategic-creative &
user driven approach
Translate into
new services
User value creates
business value

10. Service Delivery
User studies & ethnography Brand and communication Digital design
Digital & product experiences Product design & ergonomy Service innovation

11. Examples of work
Designit A/S

12. PRODUCT DESIGN

13. PRODUCT DESIGN

14. PRODUCT DESIGN

15. BRANDING & PRODUCT

16. WORLD EXPO 2012

17. AUDI CITY

18. AUDI CITY

19. ONLINE STRATEGY

20. MOBILE WEB STRATEGY

21. MOBILE APP MARKET
Bankboks JB’s bankmiljø Tegnebog Personlig mobilbank
Bank Bruger

22. MOBILE STRATEGY

23. MOBILE STRATEGY

24. Some of the clients

25. WHY A MOBILE FIRST STRATEGY?

26. https://wirelessintelligence.com/images/analysis/entries/2013-01-10-mbb-infographic.png

27. http://cdn.theatlantic.com/static/mt/assets/science/mobile-app-infographic-post.jpg

28. AVERAGE MOBILE USERS
a. Users look at their phone 150 times a day, on
average
b. 80% use their phones for shopping-related tasks.
c. 93% of American women did mobile gift shopping
in Q4 2012
d. 41% of all US adults use phones to get directions
e. 46% of all public wifi connections are mobile
(tablet or phone)
http://www.lukew.com/ff/entry.asp?1506

29. http://www.freshegg.com/blog/wp-content/uploads/2011/11/Forbes_MobileTrafficStats_Infographic_01.jpg

30. MOBILE WEB TRAFFIC
Walker Sands Communications, December 2012

31. MOBILE WEB TRAFFIC
Walker Sands Communications, December 2012
~1.6M per day
http://www.lukew.com/ff/entry.asp?1506

32. GMV = Gross Merchandise Volume

33. http://cdn.theatlantic.com/static/mt/assets/science/mobile-app-infographic-post.jpg

34. One more thing...
Who’s the new kid on the block?

35. TABLETS ARE PREDATORS
http://www.lukew.com/ff/entry.asp?1677
http://blog.laptopmag.com/apple-blows-away-iphone-and-ipad-records-mac-sales-down-16-percent

36. TABLETS ARE PREDATORS
a. Consumers are moving away from “single-use”
devices and focus on tablets + smartphone.
b. In 2012, +120M tablets were sold
c. In 2012, e-readers were down to 14M (-46%)
d. In 2016, e-readers estimates at 7M
e. In Q4 2012, Windows notebook down 24%
f. In 2013, mobile US sales account for 15% of ALL
retail e-commerce (tablet: 9,5%, phone 5,5%).
g. In Q1 2012, Apple estimate mobile sales increase
of 190% (iPhone 177%, iPad 163%, iPod 240%)
compared to Q4 2012.
MacBook estimated down by 16%.
http://www.lukew.com/ff/entry.asp?1677
http://blog.laptopmag.com/apple-blows-away-iphone-and-ipad-records-mac-sales-down-16-percent

37. Remember this guy?

38. ...is now this guy

39. ...or this guy

40. GO MOBILE OR KILL YOUR BUSINESS
Laptop becomes the tool of
preference, only when all else
fails, or provides insufficient
value.

41. Mobile Media Characteristics
How to think and approach the media

44. Client’s choice…
Prolong the past
Or make changes?

46. Context
User
es Expe
centri c ser vic r ie n
User ce!
Rethink approach!
Opportunity Solution

50. “There’s an app for that”
The market for crap-apps
is totally over-saturated

53. Unique Usage
Simplicity Above All

56. “ Perfection is achieved, not
when there is nothing more
to add, but when there is
nothing left to take away.

60. Interaction Design
Natural User Interfaces through touch

61. Direct Manipulation
We still love you, but...

62. Multi touch is the new sheriff in town

63. Touch is designing for humans
It supports our perception of objects

64. Layered content
Step-wise touch interaction

65. Touch Gesture
Reference Guide
Luke Wroblewski
www.lukew.com/ff/entry.asp?1071

67. Uzu - kinetic multitouch particle visualizer

68. Designing with Metaphors
Visually & Interactions

70. FAIL!

71. Guidelines are Guideline
Not a holy grail

72. Guidelines are Guideline
Not a holy grail
FA IL!
E PIC

73. The best user interface is when
we don’t perceive the interface

75. The best user interface is with
no perception if an interface

76. Page “flip” - WTF!?
The best user interface is with
no perception if an interface

77. Perception is more than visual
We hold, see, hear, feel

78. Metaphors bind it all together

87. When the UI really works,
we tend to forget it’s an interface

88. “Skeuomorphism”
An Apple metaphorism

92. When Enterprises go Mobile
Service defines platforms & technologies

93. Selecting your Platform
A matter of real user / customer base...

95. ANDROID USER?

97. Android
A Strong UI Framework

99. Android
Reason is Contamination

101. GRUNDFOS GO REMOTE

102. Android
THE DESIGNER MISTKE
Reason is Contamination

103. THE DESIGNER MISTKE

104. THE DESIGNER MISTKE

105. Mobile Web is Not Native
User/Customer Experience is KEY to Success

106. THIS IS NOT SUCCESS

107. WHO ARE YOUR USERS

111. WEB APPS SHOULD BE SIMPLE
- Costly as multi-platform
- Rarely quicker to develop
- Bad user experience
- Only good for simple solutions

113. JYSKE BANK - MOBILE WEB

114. JOBNET - HTML5

115. JOBNET - HTML5

116. GRUNDFOS - GO CAPS

118. Complete Mobile Strategies
Make it scalable

120. Jyske Bank - Digital Strategy
2008 - New website
2010 - Mobile Currency calculator (iPhone)
2010 - Mobile Banking (iPhone + Android)
2011 - Responsive webdesign
2012 - Mobile Banking (iPad)
2013 - Mobile Banking (Android ICS)

121. MOBILE STRATEGY

128. Thanks

129. www.slideshare.net/henrikhedegaard
Henrik Hedegaard
Information Architect, Designit
@henrikhedegaard

130. Links & References
Designing for iPad: Reality Check
Information Architects
iPad vs. iPhone: A User Experience Study
UX Magazine
iPad User Experience Guidelines
UX Magazine
App Store Review Guidelines
Apple
Small Sufaces
Mobility Blog
Thoughts on Designing for iPad
Derek Powazek
Touch Gesture Reference Guide and more
Luke Wroblewski Blog