The profession of User Experience has changed with the addition of smartphones and tablets. Patterns, user behaviors, and techniques that worked for the desktop have either changed or become obsolete on mobile. Mobile has introduced the next layer of complexity by adding touch gestures, different form factors, and multiple screen sizes. With all of this, the core of user experience design has not changed: design better and optimized experiences for users. Yet there is one concept in Mobile User Experience that requires us to start thinking and designing in a different manner: performance. Whether the user is on a smartphone or tablet their user experience is not just dependent on design, but also on how fast that experience loads. In mobile user experience, design and performance are inherently linked together. The changes made to one and the other directly affect the speed at which a user can open, navigate, and explore that mobile website or app. In my talk, I am going to present an introduction to the topic of designing mobile user experiences for performance. My goal is to build the awareness that the critical key of driving a mobile websites or apps performance comes from the UX design itself. With the right tools and best practices a designer or developer can optimize their experience for mobile performance. I will be using a series of design patterns to illustrate how changes in ux and design can influence performance directly. I will also be presenting methodologies and tools for integrating the techniques and best practices into your workflows. By designing for performance we can improve and optimize the speed of our mobile user experiences! Adrian Mendoza has been designing and coding web pages since 1994. He teaches User Experience, web design, and CSS, writes books and articles on mobile user experience, and has way too many mobile devices in his house. With over 20 years of experience in design and user experience work, he has consulted on a variety of user experiences for web and mobile. These projects range from social media apps for orange juice to the user experience of an international airport. He is the co-founder of Marlin Mobile (http://marlinmobile.com) a company that provides performance data from real mobile devices to optimize and measure the performance of mobile user experiences. He has taught visual design at Suffolk University, Harvard University, The University of Southern California, and Massachusetts College of Art. Adrian earned his BA with honors from the University of Southern California, and his Master’s from the Harvard Graduate School of Design. He is the author of the new mobile UX book - Mobile User Experience: Patterns to Make Sense of it All, published by Morgan Kaufmann last November. Read more at http://mobileuxbook.com

1. adrian mendoza
2.0
Mobile User Experience
Designing for performance
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

2. to start…
Mobile UX 1.0
a retrospective
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

3. to start…
FEB 11 1998
FEB 11 2007
…lets go back in time
FEB 11
Marlin Mobile
2014
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

4. 1998
desktop
everyone wants a webpage
they want it now
design is basic
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

5. 1998 2007
desktop
mobile
everyone wants an webpage app
they want it now
design is basic
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

6. 1998 2008
“Can you make the mobile app
more fun?”
ux professional
Marlin Mobile
Marlin
Mobile:
Mobile
Performance
Monitoring
@marlinUX

7. 1998 2008
dunkin donuts app
Marlin Mobile
Marlin
Mobile:
Mobile
Performance
Monitoring
@marlinUX

8. 1998 2010
yay!! I think??
responsive web design
Marlin Mobile
Marlin
Mobile:
Mobile
Performance
Monitoring
@marlinUX

9. 1998 2007 2013
desktop
mobile
everyone wants an webpage app
RWD
they want it now
design is basic
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op@mize
your
Mobile
UX
@marlinUX

10. 2014
mobile is not the desktop
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op@mize
your
Mobile
UX
@marlinUX

11. the mobile equation
this is your mobile
experience…
…its complicated
Marlin Mobile
Marlin
Mobile:
Mobile
Performance
Monitoring
@marlinUX

12. …really complicated
45 different OS versions
55 different screen sizes
255 different carriers
879 different device models
1410 different user agent profiles
Feb 2014
Marlin Mobile
Source: Marlin Mobile
Marlin
Mobile:
Mobile
Performance
Monitoring
@marlinUX

13. …and mobile traffic is just beginning to grow
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

14. …and really important
48% of users say that if they arrive
on a business site that isn't
working well on mobile, they take
it as an indication of the business
simply not caring.
Source: Margin Media
Marlin Mobile
User
Experience:
It's
What's
for
Breakfast.
@marlinUX

15. 2014
Mobile UX 2.0
if mobile is slow ux and ui are to be blame
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

16. performance 101
performance is not a
foreign concept
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
Source: Strangeloop
@marlinUX

17. performance 101
here is a typical workflow
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

18. performance 101
here is a typical workflow
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

19. performance 101
here is a typical workflow
and never the twain shall meet
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

20. the solution
g foreds
izin ne
optim ance e!
rformart her
pe o st
t
it starts with UX
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

21. the solution
we test EVERYTHING why not
performance??
Marlin Mobile
User
Experience:
It's
What's
for
Breakfast.
@marlinUX

22. responsive web design 101
desktop
Marlin Mobile
mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

23. responsive web design 101
desktop
Marlin Mobile
mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

24. responsive web design 101
desktop
mobile
2.07s 1.8mb 133 elements
~8.43s 1.8mb 133 elements
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

25. responsive web design 101
the RWD conundrum - these 2 pages are the same
desktop
mobile
2.07s 1.8mb 133 elements
~8.43s 1.8mb 133 elements
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

26. the solution
1. benchmark
2. test prototypes
3. design for mobile
Marlin Mobile
@marlinUX

27. benchmark
1. how fast or slow is the old site?
2. how fast is my competition?
3. how fast SHOULD it be?
ask the hard questions…we already do!
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

28. benchmark
costco – 14.8s
target -5.1s
walmart – 2.5s
Source: Marlin Mobile
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

29. benchmark
costco – 14.8s
target -5.1s
walmart – 2.5s
Someone is doing something right
Source: Marlin Mobile
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

30. benchmark
know your mobile users
…no really
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op@mize
your
Mobile
UX
@marlinUX

31. benchmark
do these users matter to you?
or do these?
Source: Marlin Mobile
Marlin Mobile
Mobile
User
Experience
and
Oesigning
four
Mobile
UX
nleashed:
Plan
2.0:
Dp@mize
y or
performance
@marlinUX

32. test prototypes
lets revisit RWD
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

33. test prototypes
small page
Marlin Mobile
vs.
Mobile
User
Experience
2.0:
Designing
for
performance
big page
@marlinUX

34. test prototypes
big page – 4.7s
small page-1.5s
performance
difference of 68%
Source: Marlin Mobile
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

35. test prototypes
here is where you test in a typical workflow
performance must become part of our workflow
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

36. design for mobile
mobile facts
1. mobile browsers are limited
2. mobile browser caches are small
3. mobile devices are unique
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

37. design for mobile
it does NOT mean do this
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

38. design for mobile
1. mobile browsers are limited
rules of thumb
q design pages that works across all
platforms (i.e. touch event)
q ajax and js slow us down
q not all html5 works across all devices
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

39. design for mobile
2. mobile browser caches are small
rules of thumb
q reduce page elements, icons, and images
q do NOT embed fonts
q do not scale images
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

40. design for mobile
3. mobile devices are unique
rules of thumb
q test and view ux/ui on real devices
q test performance on real devices
q your desktop is not a mobile device
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

41. remember
1. benchmark
2. test prototypes
3. design for mobile
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

42. free tools
the chrome app allows you to
connect to a phone using your
computer to get a waterfall
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op@mize
your
Mobile
UX
@marlinUX

43. free tools
Speedier
download for free on iTunes. Use it
to test your pages on a real browser
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op@mize
your
Mobile
UX
@marlinUX

44. Questions?
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

45. Questions?
let me tell you about my new book!
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

46. Mobile User Experience: Patterns to Make Sense of it All
mobile pattern library
Includes a library of patterns to help you create
your mobile user experiences.
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

47. Mobile User Experience: Patterns to Make Sense of it All
wireframing templates
e appendix includes templates for you to wireframe
and design with.
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

48. Mobile User Experience: Patterns to Make Sense of it All
Includes iOS7 and Android UI
See the new user interface elements for Apples iOS7
and Android
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

49. Mobile User Experience: Patterns to Make Sense of it All
thank you to
BostonCHI
&
Morgan Kaufmann
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX

50. adrian mendoza
Adrian’s career is highlighted by over 12 years of design
and user experience in the handheld, pharmaceutical,
financial, and educational sectors. His first studio,
Synthesis3, worked with several Palm OS software
companies in creating their brand for both a web and
retail presence. In the financial and education sector,
customers included Sovereign Bank, Houghton Mifflin,
MIT and Harvard. Adrian consulted in UX and
Information Architect lead roles for Fidelity’s E-business
design group, omson Financial, and T.Rowe Price.
Adrian earned his BA from the University of Southern
California and his Masters from the Harvard Graduate
School of Design.
Read my new Mobile UX book:
Mobile User Experience: Patterns to Make Sense of it All
Learn more at www.mobileuxbook.com
Marlin Mobile
Mobile
User
Experience
2.0:
Designing
for
performance
@marlinUX