the unseen experience: putting detail into the web
TRANSCRIPT
THE UNSEEN EXPERIENCEPUTTING DETAIL INTO THE WEB
/ Kevin Sweeney @restlessdesign
MEKevin SweeneyLead Engineer (Front-End), [email protected]/restlessdesign
LITTLEBIGDETAILS
ELEMENTS OF DETAILDesignTechnologyUser FeedbackIteration & Testing
USER EXPERIENCE PRINCIPLES1. Progress & Feedback2. Performance3. Accessibility & Utility4. Perception
PROGRESS & FEEDBACK
PROGRESS & FEEDBACK:
DESIGNERSIntroduce content with transitions where appropriate( )Overlap animations on UI elements ( )Animate progress bars with a secondary animationmoving in the opposing direction ( )Prefer canvas to animated GIFs ( )
Vimeo.com/jobsWufoo
View CodePenView CodePen
PROGRESS & FEEDBACK:
DEVELOPERSDisplay visual feedback when async requests are pending(Hover Me!)Listen for online/offline events; react accordinglyUse File API to send only the bytes needed by backend( )Vimeo Uploader
PERFORMANCE
PERFORMANCE:
DESIGNERSApply text-shadow sparingly! ( )Beware images with CSS filters applied ( )
Start smallApply filterThen scale up
Same concept applies for videoFun Fact: Scanlines can obscure 50% of compressionartifacts!
View CodePenView CodePen
PERFORMANCE:
DEVELOPERSDNS prefetch your CDNsAnticipate user actions; get there first ( )
Scroll spyingmousemove, mouseover, mousedown vs. click
Use requestAnimationFrame over setInterval( )When in doubt…
Vimeo Avatars
View CodePen
“ ”—Paul Lewis ( )
Don’t Guess It, Test it!@aerotwist
ACCESSIBILITY & UTILITY
ACCESSIBILITY & UTILITY:
DESIGNERSCreate large “back-to-mobile” buttons on desktop sites formobile users ( | )Create assets unique to users and/or pages
Avatars ( )Color bars ( )
No :hover without :focus!
GitHub Vimeo
MonsterIDVimeo
ACCESSIBILITY & UTILITY:
DEVELOPERSAnti-Pattern: Don’t render password inputs as part of aform that does something criticalSave state using localStorage ( )Leverage document.title and favicon ( )Investigate browser and OS notifications ( )
View CodePenPiecon
Demo
PERCEPTION
PERCEPTION:
DESIGNERS80% rule
Start your animation ~80% in; show the last 20%Works best with simple, linear animations
Avoid red-to-blue hoversFaster movement conveys faster progress (
)View
CodePen
PERCEPTION:
DEVELOPERSRetry requests if they fail the first timeDebounce rollover and rollout events ( )“Rocket Sauce” (credit: )
Amazon Menu@JohnKakoulides
$$('a:not([href="javascript:void(0)])').addEvent('click', function() { $('content').setStyle('visibility', 'hidden'); });
THANK YOU!