Your SlideShare is downloading. ×
MobileUX 2.0: Designing for Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MobileUX 2.0: Designing for Performance

711
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 …

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
711
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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  

×