the unseen experience: putting detail into the web
TRANSCRIPT
![Page 1: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/1.jpg)
THE UNSEEN EXPERIENCEPUTTING DETAIL INTO THE WEB
/ Kevin Sweeney @restlessdesign
![Page 2: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/2.jpg)
MEKevin SweeneyLead Engineer (Front-End), [email protected]/restlessdesign
![Page 3: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/3.jpg)
LITTLEBIGDETAILS
![Page 4: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/4.jpg)
![Page 5: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/5.jpg)
![Page 6: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/6.jpg)
![Page 7: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/7.jpg)
![Page 8: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/8.jpg)
![Page 9: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/9.jpg)
![Page 10: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/10.jpg)
ELEMENTS OF DETAILDesignTechnologyUser FeedbackIteration & Testing
![Page 11: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/11.jpg)
USER EXPERIENCE PRINCIPLES1. Progress & Feedback2. Performance3. Accessibility & Utility4. Perception
![Page 12: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/12.jpg)
PROGRESS & FEEDBACK
![Page 13: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/13.jpg)
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
![Page 14: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/14.jpg)
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
![Page 15: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/15.jpg)
PERFORMANCE
![Page 16: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/16.jpg)
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
![Page 17: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/17.jpg)
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
![Page 18: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/18.jpg)
ACCESSIBILITY & UTILITY
![Page 19: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/19.jpg)
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
![Page 20: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/20.jpg)
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
![Page 21: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/21.jpg)
PERCEPTION
![Page 22: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/22.jpg)
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
![Page 23: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/23.jpg)
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'); });
![Page 24: The Unseen Experience: Putting Detail Into The Web](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58edcfae1a28ab3d5a8b4681/html5/thumbnails/24.jpg)
THANK YOU!