The document discusses designing mobile user experiences for different generations of technology users. It notes that people just a few years apart can have very different experiences of technology. It then provides examples of projects involving responsive web design, mobile apps, and considerations for mobile UX like touch targets and performance testing in low-bandwidth conditions.

1. FSTO edition 2015

3. “People two, three or four years apart
are having completely different
experiences with technology,”
Lee Rainie, director of the Pew Research Center’s Internet and American Life Project.
http://www.flickr.com/photos/tocaboca/5523596357/

4. Simpsons copyright Fox Broadcasting

8. Project One:
Brewer’s Web Relaunch
Responsive Web Design
Create a desktop and mobile
User Experience that captures
the lifestyle of the brand
Allows users to participate in
contests and give-a-ways easily
regardless of platform
Optimized site elements for mobile

9. Project Two:
Mobile App
Push Promotions
Brand related games
Create a User Experience that
captures the lifestyle of the brand
App to update content seamlessly
for the user

10. Users:
Mobile
Using app in various settings
Specifically bars & outdoor events
Out with friends

12. My Little Pony copyright Hasbro Toy Company

13. Solution:
Substitute content with ponies

14. deep dive

15. Find out everything you can
about ponies.

16. Each pony is unique.
(personality and behavior)

17. Just like your Users

18. “People two, three or four years apart
are having completely different
experiences with technology,”
Lee Rainie, director of the Pew Research Center’s Internet and American Life Project.
http://www.flickr.com/photos/tocaboca/5523596357/

19. 11 - 6 - 4

20. 13 - 9 - 7

23. Mobile UX is a balancing act
My Little Pony copyright Hasbro Toy Company

24. constraints
and
behaviours
capabilities
and
needs
Jenga copyright Hasbro Toy Company

25. fitts’s law

26. Fitts's Law is a model of human movement
which predicts the time required to rapidly
move to a target area a function of the distance
to the target and the size of the target.
source: Wikipedia

28. Small Touch Target = Big Problems

29. Small Touch Target = Big Problems
Sources: Apple HIG & MIT Touch Lab

30. Small Touch Target = Big Problems

31. Small Touch Target = Big Problems

32. Pro Tip: A Touch Template helps design Interactions

33. Touch Zones: LukeW

34. Touch Zones: LukeW

36. If it looks like a button, it better be a button.

38. skeuomorph vs. flat

39. Skeuomorphic vs Flat http://dribbble.com/shots/1123651-Skeuomorphic-vs-Flat-Design by Victor Bejar

58. Sources: Apple Developer HIG

59. DON’T

67. Keeping the Child in Mind: Press versus Tap

68. Keeping the Child in Mind: Press versus Tap
onRelease vs. onPress

71. <a href="#menu">[image file]</a>
<a name="menu"></a>

72. Simple solutions are elegant.

73. You will never hear,
“Hey, where’s the slide out menu?”

74. You will hear,
“Your menu doesn’t work! #fail”

76. content

79. My Little Pony copyright Hasbro Toy Company

80. Natural
Recall

82. Performance is Design
My Little Pony copyright Hasbro Toy Company

83. performance is design

84. 84
Test in the Wild

85. 85
Test in the Wild
Drop the WiFi

86. 86
Test in the Wild
Test using “one bar”

87. My Little Pony copyright Hasbro Toy Company

89. Help the Sad Butterfly Find the Ponies

90. If a 4 year old can find the ponies

91. so can your user

92. Thank you!

93. Questions?

94. @andrewsmyk