Marlin Mobile @marlinUX
Mobile User Experience Designing for performance
Mobile User Experience 2.0: Designing for performance
adrian mendoza
2.0
Marlin Mobile @marlinUX
Mobile UX 1.0
Mobile User Experience 2.0: Designing for performance
to start…
a retrospective
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
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
1998
everyone wants a webpage
they want it now design is basic
desktop
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
Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring
ux professional
“Can you make the mobile app more fun?”
1998 2008
Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring
dunkin donuts app
1998 2008
Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring
responsive web design
1998 2010
yay!! I think??
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
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op@mize your Mobile UX
2014
mobile is not the desktop
Marlin Mobile @marlinUX
this is your mobile experience…
the mobile equation
Marlin Mobile: Mobile Performance Monitoring
…its complicated
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
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
…and mobile traffic is just beginning to grow
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
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
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
performance 101
Source: Strangeloop performance is not a
foreign concept
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
performance 101
here is a typical workflow
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
here is a typical workflow
performance 101
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
here is a typical workflow
performance 101
and never the twain shall meet
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
the solution
it starts with UX
optimizing for
performance needs
to start here!
Marlin Mobile @marlinUX
we test EVERYTHING why not performance??
User Experience: It's What's for Breakfast.
the solution
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
responsive web design 101
desktop mobile
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
desktop
responsive web design 101
mobile
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
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
Marlin Mobile @marlinUX
the solution
1. benchmark
2. test prototypes
3. design for mobile
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!
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
Source: Marlin Mobile
benchmark
walmart – 2.5s
target -5.1s
costco – 14.8s
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
Marlin Mobile @marlinUX
know your mobile users
Mobile Unleashed: Plan and Op@mize your Mobile UX
…no really
benchmark
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
Marlin Mobile @marlinUX
lets revisit RWD
Mobile User Experience 2.0: Designing for performance
test prototypes
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
test prototypes
small page big page vs.
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
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
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
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
design for mobile
it does NOT mean do this
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
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
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
Marlin Mobile @marlinUX Mobile User Experience 2.0: Designing for performance
1. benchmark
2. test prototypes
3. design for mobile
remember
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
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
Marlin Mobile @marlinUX
Questions?
Mobile User Experience 2.0: Designing for performance
Marlin Mobile @marlinUX
Questions?
Mobile User Experience 2.0: Designing for performance
let me tell you about my new book!
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.
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.
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
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
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