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.

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

10. ELEMENTS OF DETAIL
Design
Technology
User Feedback
Iteration & Testing

11. USER EXPERIENCE PRINCIPLES
1.
2.
3.
4.
Progress & Feedback
Performance
Accessibility & Utility
Perception

12. PROGRESS & FEEDBACK

13. 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)

14. 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)

15. PERFORMANCE

16. 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!

17. 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)

18. ACCESSIBILITY & UTILITY

19. 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

20. 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)

21. PERCEPTION

22. 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)

23. 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';
};
)

24. THANK YOU!