Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 (...
% 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,
l...
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 conten...
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
➤ Analytic...
RENDER & INTERACTION STAGES
1. Verify destination
2. Provide primary content
3. Allow interaction
4. Show secondary conten...
ACKNOWLEDGE ACTION
➤ Disable submit button with “in progress” label,

disable form elements
➤ Show transitional overlay (e...
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 &
Inv...
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
A...
STAGES & TECHNICAL CONSTRAINTS
Stage
1. Verify destination
2. Provide primary

content
3. Allow interaction
4. Show second...
THROUGHOUT DESIGN & DEV PROCESS
➤ Wires (multiple files)
➤ PSD / SketchApp Progressive Storyboard
➤ HTML Mockups (separate ...
SPEED PROCESS
➤Identify design
components
➤Set Constraints
➤Measure and
compare to baseline
➤Avoid Anti-Patterns,

define b...
THANK YOU
@SergeyChe | sergey.chernyshev@gmail.com
Upcoming SlideShare
Loading in …5
×

Designing speed with progressive enhancement @ NY Web Performance meetup

1,161 views

Published on

Web pages do not appear on the screen immediately and take time to load and render. This requires us to question the industry standard of Photoshop or JPEG comps as design deliverable because it only captures final state of the page and does not describe full page load cycle.

If we are to design effective user experience and not just a static pictures, how do we structure a new process and artifacts for effective UX conversation between product, design and development teams?

Sergey Chernyshev proposes a process similar to “storyboarding” in filmmaking as a new way to describe progressive rendering during design phases of the project. It breaks down the experience into multiple, well defined steps and frames conversations and design goals for product and design teams.

This process also describes how to give development teams a series of simple constraints aligned to each rendering step allowing them to create well structured pages using progressive enhancement.

Published in: Technology
  • Be the first to comment

Designing speed with progressive enhancement @ NY Web Performance meetup

  1. 1. DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT Sergey Chernyshev | @SergeyChe
  2. 2. SPEED MATTERS to your users and to you
  3. 3. SLOW MEANS LOWER CONVERSION RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
  4. 4. 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)
  5. 5. % OF DAILY BUDGET WHATDOESMYSITECOST.COM http://www.disney.com/
  6. 6. DESIGN
 FOR SPEED and progressive enhancement
  7. 7. MOVIES OR PAINTINGS? Speed vs. Fluency, What drives user engagement? Kent Alstad, Velocity NY 2015
  8. 8. PERFORMANCE CHOREOGRAPHERS Performance Choreography Tim Kadlec, WebPerfDays NY 2014
  9. 9. 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)
  10. 10. FEATURES BASED ON CAPABILITIES book by
 Filament Group
 
 filamentgroup.com/dwpe/
  11. 11. REVEAL FEATURES as page is being downloaded and constructed
  12. 12. 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
  13. 13. VERIFY DESTINATION ➤ Core branding ➤ Maybe a breadcrumb
  14. 14. PROVIDE PRIMARY CONTENT ➤ Leaderboards, article text & photo, product title & image
  15. 15. ALLOW INTERACTION ➤ Main calls to action (CTA), Video play button, carousel arrows
  16. 16. SHOW SECONDARY CONTENT ➤ Sidebars, secondary content ➤ Additional navigation ➤ User-generated content, sharing buttons, ads
  17. 17. THE REST & INVISIBLE TASKS ➤ “The Rest” ➤ Invisible Tasks ➤ Subsequent Carousel slides ➤ Below the fold content ➤ Analytics calls and instrumentation code (“pixels”)
  18. 18. 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. …
  19. 19. 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!
  20. 20. INCREMENTAL MOCKUP 1
  21. 21. INCREMENTAL MOCKUP 2
  22. 22. INCREMENTAL MOCKUP 3
  23. 23. INCREMENTAL MOCKUP 4
  24. 24. FULL MOCKUP
  25. 25. PROGRESSIVE STORYBOARDS Home Page Action Verify Destination Primary Content Allow Interaction Secondary Content Rest & Invisible 0 1 2 3 4 5
  26. 26. ACKNOWLEDGE ACTION MOCKUP
  27. 27. ACKNOWLEDGE ACTION MOCKUP SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK
  28. 28. 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
  29. 29. 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
  30. 30. 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 ...
  31. 31. SPEED PROCESS ➤Identify design components ➤Set Constraints ➤Measure and compare to baseline ➤Avoid Anti-Patterns,
 define best practices
  32. 32. THANK YOU @SergeyChe | sergey.chernyshev@gmail.com

×