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.
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. FEATURES BASED ON CAPABILITIES
book by
Filament Group
filamentgroup.com/dwpe/
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!
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. 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. 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
...