adrian mendoza

2.0	
  
Mobile User Experience
Designing for performance

Marlin Mobile

Mobile	
  User	
  Experience	
  2...
to start…

Mobile UX 1.0
a retrospective

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  perfo...
to start…

FEB 11 1998
FEB 11 2007

…lets go back in time

FEB 11
Marlin Mobile

2014

Mobile	
  User	
  Experience	
  2.0...
1998

desktop
everyone wants a webpage
they want it now
design is basic
Marlin Mobile

Mobile	
  User	
  Experience	
  2.0...
1998 2007

desktop
mobile
everyone wants an webpage app
they want it now
design is basic
Marlin Mobile

Mobile	
  User	
  ...
1998 2008

“Can you make the mobile app
more fun?”
ux professional

Marlin Mobile

Marlin	
  Mobile:	
  Mobile	
  Performa...
1998 2008

dunkin donuts app
Marlin Mobile

Marlin	
  Mobile:	
  Mobile	
  Performance	
  Monitoring	
  

@marlinUX	
  
1998 2010

yay!! I think??

responsive web design
Marlin Mobile

Marlin	
  Mobile:	
  Mobile	
  Performance	
  Monitoring	...
1998 2007 2013

desktop
mobile
everyone wants an webpage app
RWD
they want it now
design is basic
Marlin Mobile

Mobile	
 ...
2014

mobile is not the desktop

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op@mize	
  your	
  Mobile	
  UX	
  ...
the mobile equation

this is your mobile
experience…
…its complicated
Marlin Mobile

Marlin	
  Mobile:	
  Mobile	
  Perfor...
…really complicated

45 different OS versions
55 different screen sizes
255 different carriers
879 different device models
141...
…and mobile traffic is just beginning to grow

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  pe...
…and really important

48% of users say that if they arrive
on a business site that isn't
working well on mobile, they tak...
2014

Mobile UX 2.0
if mobile is slow ux and ui are to be blame

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  De...
performance 101

performance is not a
foreign concept
Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  ...
performance 101

here is a typical workflow

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  per...
performance 101

here is a typical workflow

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  per...
performance 101

here is a typical workflow

and never the twain shall meet
Marlin Mobile

Mobile	
  User	
  Experience	
  ...
the solution

g foreds
izin ne
optim ance e!
rformart her
pe o st
t

it starts with UX
Marlin Mobile

Mobile	
  User	
  Ex...
the solution

we test EVERYTHING why not
performance??

Marlin Mobile

User	
  Experience:	
  It's	
  What's	
  for	
  Bre...
responsive web design 101

desktop

Marlin Mobile

mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  per...
responsive web design 101

desktop

Marlin Mobile

mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  per...
responsive web design 101

desktop

mobile

2.07s 1.8mb 133 elements

~8.43s 1.8mb 133 elements

Marlin Mobile

Mobile	
  ...
responsive web design 101

the RWD conundrum - these 2 pages are the same

desktop

mobile

2.07s 1.8mb 133 elements

~8.4...
the solution

1. benchmark
2. test prototypes
3. design for mobile
Marlin Mobile

@marlinUX	
  
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 ques...
benchmark

costco – 14.8s

target -5.1s

walmart – 2.5s
Source: Marlin Mobile
Marlin Mobile

Mobile	
  User	
  Experience	...
benchmark

costco – 14.8s

target -5.1s

walmart – 2.5s

Someone is doing something right
Source: Marlin Mobile

Marlin Mo...
benchmark

know your mobile users
…no really

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op@mize	
  your	
  Mob...
benchmark

do these users matter to you?

or do these?

Source: Marlin Mobile
Marlin Mobile

Mobile	
  User	
  Experience	...
test prototypes

lets revisit RWD

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  performance	...
test prototypes

small page

Marlin Mobile

vs.

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  performance	
...
test prototypes

big page – 4.7s

small page-1.5s

performance
difference of 68%

Source: Marlin Mobile
Marlin Mobile

Mobi...
test prototypes

here is where you test in a typical workflow

performance must become part of our workflow
Marlin Mobile

M...
design for mobile
mobile facts

1. mobile browsers are limited
2. mobile browser caches are small
3. mobile devices are un...
design for mobile

it does NOT mean do this
Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  per...
design for mobile

1. mobile browsers are limited
rules of thumb

q  design pages that works across all
platforms (i.e. t...
design for mobile

2. mobile browser caches are small
rules of thumb

q  reduce page elements, icons, and images
q  do N...
design for mobile

3. mobile devices are unique
rules of thumb

q  test and view ux/ui on real devices
q  test performan...
remember

1. benchmark
2. test prototypes
3. design for mobile
Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Desi...
free tools

the chrome app allows you to
connect to a phone using your
computer to get a waterfall
Marlin Mobile

Mobile	
...
free tools

Speedier
download for free on iTunes. Use it
to test your pages on a real browser
Marlin Mobile

Mobile	
  Unl...
Questions?

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  performance	
  

@marlinUX	
  
Questions?
let me tell you about my new book!

Marlin Mobile

Mobile	
  User	
  Experience	
  2.0:	
  Designing	
  for	
  ...
Mobile User Experience: Patterns to Make Sense of it All

mobile pattern library
Includes a library of patterns to help yo...
Mobile User Experience: Patterns to Make Sense of it All

wireframing templates
e appendix includes templates for you to ...
Mobile User Experience: Patterns to Make Sense of it All

Includes iOS7 and Android UI
See the new user interface elements...
Mobile User Experience: Patterns to Make Sense of it All

thank you to

BostonCHI

&	
  

Morgan Kaufmann
Marlin Mobile

M...
adrian mendoza
Adrian’s career is highlighted by over 12 years of design
and user experience in the handheld, pharmaceutic...
Upcoming SlideShare
Loading in …5
×

MobileUX 2.0: Designing for Performance

1,113 views
1,039 views

Published on

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

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,113
On SlideShare
0
From Embeds
0
Number of Embeds
291
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MobileUX 2.0: Designing for Performance

  1. 1. adrian mendoza 2.0   Mobile User Experience Designing for performance Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  2. 2. to start… Mobile UX 1.0 a retrospective Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  3. 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. 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. 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. 6. 1998 2008 “Can you make the mobile app more fun?” ux professional Marlin Mobile Marlin  Mobile:  Mobile  Performance  Monitoring   @marlinUX  
  7. 7. 1998 2008 dunkin donuts app Marlin Mobile Marlin  Mobile:  Mobile  Performance  Monitoring   @marlinUX  
  8. 8. 1998 2010 yay!! I think?? responsive web design Marlin Mobile Marlin  Mobile:  Mobile  Performance  Monitoring   @marlinUX  
  9. 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. 10. 2014 mobile is not the desktop Marlin Mobile Mobile  Unleashed:  Plan  and  Op@mize  your  Mobile  UX   @marlinUX  
  11. 11. the mobile equation this is your mobile experience… …its complicated Marlin Mobile Marlin  Mobile:  Mobile  Performance  Monitoring   @marlinUX  
  12. 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. 13. …and mobile traffic is just beginning to grow Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  14. 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. 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. 16. performance 101 performance is not a foreign concept Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   Source: Strangeloop @marlinUX  
  17. 17. performance 101 here is a typical workflow Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  18. 18. performance 101 here is a typical workflow Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  19. 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. 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. 21. the solution we test EVERYTHING why not performance?? Marlin Mobile User  Experience:  It's  What's  for  Breakfast.   @marlinUX  
  22. 22. responsive web design 101 desktop Marlin Mobile mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  23. 23. responsive web design 101 desktop Marlin Mobile mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  24. 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. 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. 26. the solution 1. benchmark 2. test prototypes 3. design for mobile Marlin Mobile @marlinUX  
  27. 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. 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. 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. 30. benchmark know your mobile users …no really Marlin Mobile Mobile  Unleashed:  Plan  and  Op@mize  your  Mobile  UX   @marlinUX  
  31. 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. 32. test prototypes lets revisit RWD Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  33. 33. test prototypes small page Marlin Mobile vs. Mobile  User  Experience  2.0:  Designing  for  performance   big page @marlinUX  
  34. 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. 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. 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. 37. design for mobile it does NOT mean do this Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  38. 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. 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. 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. 41. remember 1. benchmark 2. test prototypes 3. design for mobile Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  42. 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. 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. 44. Questions? Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  45. 45. Questions? let me tell you about my new book! Marlin Mobile Mobile  User  Experience  2.0:  Designing  for  performance   @marlinUX  
  46. 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. 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. 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. 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. 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  

×