mobileux 2.0: designing for performance

Marlin Mobile @marlinUX

Mobile User Experience Designing for performance

Mobile User Experience 2.0: Designing for performance

adrian mendoza

2.0


Mobile UX 1.0


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


1998

everyone wants a webpage

they want it now design is basic

desktop


1998 2007

everyone wants an webpage app


mobile desktop

Marlin Mobile @marlinUX Marlin Mobile: Mobile Performance Monitoring

ux professional

“Can you make the mobile app more fun?”

1998 2008


dunkin donuts app

1998 2008


responsive web design

1998 2010

yay!! I think??

Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op@mize your Mobile UX

1998 2007 2013


mobile desktop

RWD everyone wants an webpage app


2014

mobile is not the desktop


this is your mobile experience…

the mobile equation

Marlin Mobile: Mobile Performance Monitoring

…its complicated


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


…and mobile traffic is just beginning to grow


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


Mobile UX 2.0


2014

if mobile is slow ux and ui are to be blame


performance 101

Source: Strangeloop performance is not a

foreign concept


performance 101

here is a typical workflow



performance 101



performance 101

and never the twain shall meet


the solution

it starts with UX

optimizing for

performance needs

to start here!


we test EVERYTHING why not performance??

User Experience: It's What's for Breakfast.

the solution


responsive web design 101

desktop mobile


desktop


mobile


desktop mobile 2.07s 1.8mb 133 elements ~8.43s 1.8mb 133 elements



desktop mobile 2.07s 1.8mb 133 elements ~8.43s 1.8mb 133 elements

the RWD conundrum - these 2 pages are the same



the solution

1. benchmark

2. test prototypes

3. design for mobile


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!



benchmark

walmart – 2.5s

target -5.1s

costco – 14.8s



benchmark

Someone is doing something right walmart – 2.5s

target -5.1s

costco – 14.8s


know your mobile users

Mobile Unleashed: Plan and Op@mize your Mobile UX

…no really

benchmark



Mobile Unleashed: Plan and Op@mize your Mobile UX

do these users matter to you?


or do these?

benchmark


lets revisit RWD


test prototypes


test prototypes

small page big page vs.



small page-1.5s

big page – 4.7s

performance difference of 68%


test prototypes


here is where you test in a typical workflow

performance must become part of our workflow

test prototypes


design for mobile

1. mobile browsers are limited

2. mobile browser caches are small

3. mobile devices are unique

mobile facts


design for mobile

it does NOT mean do this


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


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


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


1. benchmark

2. test prototypes

3. design for mobile

remember


free tools

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


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

free tools

Speedier


Questions?



Questions?


let me tell you about my new book!


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.



wireframing templates e appendix includes templates for you to wireframe

and design with.



Includes iOS7 and Android UI See the new user interface elements for Apples iOS7

and Android


BostonCHI



Morgan Kaufmann &

thank you to


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