Download - MobileUX 2.0: Designing for Performance
![Page 1: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/1.jpg)
Marlin Mobile @marlinUX
Mobile User Experience Designing for performance
Mobile User Experience 2.0: Designing for performance
adrian mendoza
2.0
![Page 2: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/2.jpg)
Marlin Mobile @marlinUX
Mobile UX 1.0
Mobile User Experience 2.0: Designing for performance
to start…
a retrospective
![Page 3: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/3.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
…lets go back in time 2007
1998
FEB
to start…
FEB 11
FEB 11
11 2014
![Page 4: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/4.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
1998
everyone wants a webpage
they want it now design is basic
desktop
![Page 5: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/5.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
1998 2007
everyone wants an webpage app
they want it now design is basic
mobile desktop
![Page 6: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/6.jpg)
Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring
ux professional
“Can you make the mobile app more fun?”
1998 2008
![Page 7: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/7.jpg)
Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring
dunkin donuts app
1998 2008
![Page 8: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/8.jpg)
Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring
responsive web design
1998 2010
yay!! I think??
![Page 9: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/9.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op@mize your Mobile UX
1998 2007 2013
they want it now design is basic
mobile desktop
RWD everyone wants an webpage app
![Page 10: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/10.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op@mize your Mobile UX
2014
mobile is not the desktop
![Page 11: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/11.jpg)
Marlin Mobile @marlinUX
this is your mobile experience…
the mobile equation
Marlin Mobile: Mobile Performance Monitoring
…its complicated
![Page 12: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/12.jpg)
Marlin Mobile @marlinUX
55 different screen sizes
…really complicated
879 different device models
255 different carriers
Source: Marlin Mobile
Marlin Mobile: Mobile Performance Monitoring
Feb 2014 1410 different user agent profiles
45 different OS versions
![Page 13: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/13.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
…and mobile traffic is just beginning to grow
![Page 14: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/14.jpg)
Marlin Mobile @marlinUX
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.
User Experience: It's What's for Breakfast.
Source: Margin Media
…and really important
![Page 15: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/15.jpg)
Marlin Mobile @marlinUX
Mobile UX 2.0
Mobile User Experience 2.0: Designing for performance
2014
if mobile is slow ux and ui are to be blame
![Page 16: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/16.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
performance 101
Source: Strangeloop performance is not a
foreign concept
![Page 17: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/17.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
performance 101
here is a typical workflow
![Page 18: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/18.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
here is a typical workflow
performance 101
![Page 19: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/19.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
here is a typical workflow
performance 101
and never the twain shall meet
![Page 20: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/20.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
the solution
it starts with UX
optimizing for
performance needs
to start here!
![Page 21: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/21.jpg)
Marlin Mobile @marlinUX
we test EVERYTHING why not performance??
User Experience: It's What's for Breakfast.
the solution
![Page 22: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/22.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
responsive web design 101
desktop mobile
![Page 23: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/23.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
desktop
responsive web design 101
mobile
![Page 24: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/24.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
desktop mobile 2.07s 1.8mb 133 elements ~8.43s 1.8mb 133 elements
responsive web design 101
![Page 25: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/25.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
desktop mobile 2.07s 1.8mb 133 elements ~8.43s 1.8mb 133 elements
the RWD conundrum - these 2 pages are the same
responsive web design 101
![Page 26: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/26.jpg)
Marlin Mobile @marlinUX
the solution
1. benchmark
2. test prototypes
3. design for mobile
![Page 27: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/27.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
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!
![Page 28: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/28.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
Source: Marlin Mobile
benchmark
walmart – 2.5s
target -5.1s
costco – 14.8s
![Page 29: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/29.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
Source: Marlin Mobile
benchmark
Someone is doing something right walmart – 2.5s
target -5.1s
costco – 14.8s
![Page 30: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/30.jpg)
Marlin Mobile @marlinUX
know your mobile users
Mobile Unleashed: Plan and Op@mize your Mobile UX
…no really
benchmark
![Page 31: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/31.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
Source: Marlin Mobile
Mobile Unleashed: Plan and Op@mize your Mobile UX
do these users matter to you?
Source: Marlin Mobile
or do these?
benchmark
![Page 32: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/32.jpg)
Marlin Mobile @marlinUX
lets revisit RWD
Mobile User Experience 2.0: Designing for performance
test prototypes
![Page 33: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/33.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
test prototypes
small page big page vs.
![Page 34: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/34.jpg)
Marlin Mobile @marlinUX
Source: Marlin Mobile
small page-1.5s
big page – 4.7s
performance difference of 68%
Mobile User Experience 2.0: Designing for performance
test prototypes
![Page 35: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/35.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
here is where you test in a typical workflow
performance must become part of our workflow
test prototypes
![Page 36: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/36.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
design for mobile
1. mobile browsers are limited
2. mobile browser caches are small
3. mobile devices are unique
mobile facts
![Page 37: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/37.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
design for mobile
it does NOT mean do this
![Page 38: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/38.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
design for mobile
1. mobile browsers are limited
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
rules of thumb
![Page 39: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/39.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
design for mobile
2. mobile browser caches are small q reduce page elements, icons, and images q do NOT embed fonts q do not scale images
rules of thumb
![Page 40: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/40.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
design for mobile
3. mobile devices are unique q test and view ux/ui on real devices q test performance on real devices q your desktop is not a mobile device
rules of thumb
![Page 41: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/41.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
1. benchmark
2. test prototypes
3. design for mobile
remember
![Page 42: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/42.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op@mize your Mobile UX
free tools
the chrome app allows you to connect to a phone using your computer to get a waterfall
![Page 43: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/43.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op@mize your Mobile UX
download for free on iTunes. Use it to test your pages on a real browser
free tools
Speedier
![Page 44: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/44.jpg)
Marlin Mobile @marlinUX
Questions?
Mobile User Experience 2.0: Designing for performance
![Page 45: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/45.jpg)
Marlin Mobile @marlinUX
Questions?
Mobile User Experience 2.0: Designing for performance
let me tell you about my new book!
![Page 46: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/46.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
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.
![Page 47: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/47.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
Mobile User Experience: Patterns to Make Sense of it All
wireframing templates e appendix includes templates for you to wireframe
and design with.
![Page 48: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/48.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
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
![Page 49: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/49.jpg)
Marlin Mobile @marlinUX
BostonCHI
Mobile User Experience 2.0: Designing for performance
Mobile User Experience: Patterns to Make Sense of it All
Morgan Kaufmann &
thank you to
![Page 50: MobileUX 2.0: Designing for Performance](https://reader034.vdocuments.net/reader034/viewer/2022042714/54c831fe4a7959986d8b459e/html5/thumbnails/50.jpg)
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
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