DESIGNING SPEED WITH
PROGRESSIVE ENHANCEMENT
Sergey Chernyshev | @SergeyChe

SPEED
MATTERS
to your users and to you

SLOW MEANS LOWER CONVERSION
RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs

WPOSTATS.COM
➤ DoubleClick: 5s vs. 19s => up to 2x revenue on mobile (2016)
➤ Trainline: -0.3s => +$11.5M / year revenue (2016)
➤ Etsy: +160Kb => +12% bounce rate (2014)
➤ DoubleClick: -1 redirect => +12% CTR (2011)
➤ Edmunds: -77% load time => +20% page views (2011)
➤ Mozilla: -2.2s => +15.4% Downloads (2010)
➤ Google: +400ms => -0.21% searches after experiment! (2009)
➤ Shopzilla: -5s => +12% Conversion rate (2009)
➤ Amazon: +100ms => -1% revenue (2008)
➤ Google: +500ms => -25% searches (2006)

% OF DAILY BUDGET WHATDOESMYSITECOST.COM
http://www.disney.com/

DESIGN
FOR SPEED
and progressive enhancement

MOVIES OR PAINTINGS?
Speed vs. Fluency, What drives user engagement?
Kent Alstad, Velocity NY 2015

PERFORMANCE CHOREOGRAPHERS
Performance Choreography
Tim Kadlec, WebPerfDays NY 2014

PROGRESSIVE ENHANCEMENT
➤ Main goals:
1. Enable features based on
browser capabilities
(e.g. JavaScript, image formats,
local storage, gyro/compass)
2. Reveal features as page is being
downloaded and constructed
(render basic html + CSS, add JS
handlers, fonts, etc)

FEATURES BASED ON CAPABILITIES
book by
Filament Group
filamentgroup.com/dwpe/

REVEAL
FEATURES
as page is being downloaded
and constructed

RENDER & INTERACTION STAGES
1. Verify destination
2. Provide primary content
3. Allow interaction
4. Show secondary content
5. The rest & invisible tasks
Acknowledge action
1. Verify destination
2. …
Experience

VERIFY DESTINATION
➤ Core branding
➤ Maybe a breadcrumb

PROVIDE PRIMARY CONTENT
➤ Leaderboards, article text & photo, product title & image

ALLOW INTERACTION
➤ Main calls to action (CTA), Video play button, carousel arrows

SHOW SECONDARY CONTENT
➤ Sidebars, secondary content
➤ Additional navigation
➤ User-generated content, sharing buttons, ads

THE REST & INVISIBLE TASKS
➤ “The Rest”
➤ Invisible Tasks
➤ Subsequent Carousel slides
➤ Below the fold content
➤ Analytics calls and instrumentation code
(“pixels”)

RENDER & INTERACTION STAGES
1. Verify destination
2. Provide primary content
3. Allow interaction
4. Show secondary content
5. Invisible tasks
Acknowledge action
1. Verify destination
2. …

ACKNOWLEDGE ACTION
➤ Disable submit button with “in progress” label,
disable form elements
➤ Show transitional overlay (e.g. “Connecting to PayPal…”)
➤ Erase content area of the page
➤ No spinners!

INCREMENTAL MOCKUP 1

INCREMENTAL MOCKUP 2

INCREMENTAL MOCKUP 3

INCREMENTAL MOCKUP 4

FULL MOCKUP

PROGRESSIVE STORYBOARDS
Home Page
Action Verify
Destination
Primary
Content
Allow
Interaction
Secondary
Content
Rest &
Invisible
0 1 2 3 4 5

ACKNOWLEDGE ACTION MOCKUP

ACKNOWLEDGE ACTION MOCKUP
SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK

PROGRESSIVE STORYBOARDS
Main Article
SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK
Acknowledge
Action
Verify
Destination
Primary
Content
0 1 2
200ms 300ms

STAGES & TECHNICAL CONSTRAINTS
Stage
1. Verify destination
2. Provide primary
content
3. Allow interaction
4. Show secondary
content
5. The rest + invisible tasks
Acknowledge action
Technology Constraints
1. Inline CSS & Logo, 14K
2. no JS, CSS, just HTML,
1/2 images
3. Skeletal CSS, async JS
4. All CSS, above the fold
images, fonts, AJAX-in
content
5. The rest
Pre-transition feedback,
fake transition
UserExperienceFlow
Complexity

THROUGHOUT DESIGN & DEV PROCESS
➤ Wires (multiple files)
➤ PSD / SketchApp Progressive Storyboard
➤ HTML Mockups (separate HTML files)
➤ Front-end implementation (query string params)?
➤ Full implementation (in dev / test / pre-prod)?
http://test.mysite.com/page.html?stage=1
http://test.mysite.com/page.html?stage=2
...

SPEED PROCESS
➤Identify design
components
➤Set Constraints
➤Measure and
compare to baseline
➤Avoid Anti-Patterns,
define best practices

THANK YOU
@SergeyChe | sergey.chernyshev@gmail.com