Your SlideShare is downloading. ×
0
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
The Unseen Experience: Putting Detail Into The Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Unseen Experience: Putting Detail Into The Web

785

Published on

Much of what separates an acceptable user experience from a great one is measurable only in the intangible…or is it? This talk explores the work that goes into the often overlooked details of the web. …

Much of what separates an acceptable user experience from a great one is measurable only in the intangible…or is it? This talk explores the work that goes into the often overlooked details of the web. From visible user interactions to behind-the-scenes code, explore the new technologies which continue to advance the state of the HTML web experience.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
785
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. THE UNSEEN EXPERIENCE PUTTING DETAIL INTO THE WEB Kevin Sweeney / @restlessdesign
  • 2. ME Kevin Sweeney Lead Engineer (Front-End), Vimeo @restlessdesign github.com/restlessdesign
  • 3. LITTLEBIGDETAILS
  • 4. ELEMENTS OF DETAIL Design Technology User Feedback Iteration & Testing
  • 5. USER EXPERIENCE PRINCIPLES 1. 2. 3. 4. Progress & Feedback Performance Accessibility & Utility Perception
  • 6. PROGRESS & FEEDBACK
  • 7. PROGRESS & FEEDBACK: DESIGNERS Introduce content with transitions where appropriate (Vimeo.com/jobs) Overlap animations on UI elements (Wufoo) Animate progress bars with a secondary animation moving in the opposing direction (View CodePen) Prefer canvas to animated GIFs (View CodePen)
  • 8. PROGRESS & FEEDBACK: DEVELOPERS Display visual feedback when async requests are pending (Hover Me!) Listen for online/offline events; react accordingly Use File API to send only the bytes needed by backend (Vimeo Uploader)
  • 9. PERFORMANCE
  • 10. PERFORMANCE: DESIGNERS Apply t x - h d wsparingly! (View CodePen) etsao Beware images with CSS filters applied (View CodePen) Start small Apply filter Then scale up Same concept applies for video Fun Fact: Scanlines can obscure 50% of compression artifacts!
  • 11. PERFORMANCE: DEVELOPERS DNS prefetch your CDNs Anticipate user actions; get there first (Vimeo Avatars) Scroll spying m u e o e m u e v r m u e o nvs. c i k osmv, osoe, osdw lc Use r q e t n m t o F a eover s t n e v l eusAiainrm eItra (View CodePen) When in doubt… “Don’t Guess It, Test it!” —Paul Lewis (@aerotwist)
  • 12. ACCESSIBILITY & UTILITY
  • 13. ACCESSIBILITY & UTILITY: DESIGNERS Create large “back-to-mobile” buttons on desktop sites for mobile users (GitHub | Vimeo) Create assets unique to users and/or pages Avatars (MonsterID) Color bars (Vimeo) No : o e without : o u ! hvr fcs
  • 14. ACCESSIBILITY & UTILITY: DEVELOPERS Anti-Pattern: Don’t render password inputs as part of a form that does something critical Save state using l c l t r g (View CodePen) oaSoae Leverage d c m n . i l and f v c n(Piecon) ouettte aio Investigate browser and OS notifications (Demo)
  • 15. PERCEPTION
  • 16. PERCEPTION: DESIGNERS 80% rule Start your animation ~80% in; show the last 20% Works best with simple, linear animations Avoid red-to-blue hovers Faster movement conveys faster progress (View CodePen)
  • 17. PERCEPTION: DEVELOPERS Retry requests if they fail the first time Debounce rollover and rollout events (Amazon Menu) “Rocket Sauce” (credit: @JohnKakoulides) $(ant[rf"aacitvi()))advn(cik,fnto( { $':o(he=jvsrp:od0]'.dEet'lc' ucin) $'otn'.eSye'iiiiy,'idn) (cnet)sttl(vsblt' hde'; }; )
  • 18. THANK YOU!

×