UX Patterns for Developers

on YouTube ↗46m

" summary

Practical UX patterns and concrete fixes: inline critical CSS and use async/defer to render by 200ms instead of waiting 5s; measure bundles with source-map-explorer and split with webpack to shave 10–20% off vendor JS; avoid animating width/height — animate transform or opacity under 300ms; deploy a service worker + app shell precache and use cache-first, network-first or stale-while-revalidate strategies via sw-precache; require manifest, HTTPS and a registered worker to trigger the PWA install prompt. 53% abandon after 3s and real traces show main thread blocked 8+ seconds.

AI-written summary · about

" chapters (31)

1. 0:00Intro
2. 3:01UX design is a combination of methods with which you can solve design problems while focusing on the user.
3. 4:11Reusable solutions to usability problems.
4. 4:42Don't make the user wait
5. 6:10First Paint
6. 9:53An app shell is the minimal HTML, CSS, and JavaScript powering a user interface.
7. 10:46First meaningful paint
8. 11:18Ready for interaction
9. 12:55Above the fold
10. 13:49Consider the different states
11. 17:07Earn the user's trust
12. 17:27Functionality
13. 18:27Timing
14. 20:15Permissions API
15. 20:55Enhance UX with transitions
16. 21:53What makes a good transition?
17. 25:41Animation scenarios
18. 27:33For high pressure points Move all visual effects into transform & opacity
19. 31:01Make it work offline
20. 32:18A script run by the browser in the background and separate from a webpage
21. 32:37Service Worker approaches Pre-caching Dynamic caching
22. 32:51Service Worker pre-caching Pre-cache app shell
23. 36:46Optimize it for mobile
24. 38:05Progressive Web Apps
25. 40:17Flag for testing #bypass-app-banner-engagement-checks
26. 41:26Continuously test on real mobile devices
27. 41:55Play on persuasion
28. 42:09Curiosity
29. 42:48Scarcity
30. 43:20Reward
31. 43:56Social proof

" related talks

• 49mUX Patterns for Web DevelopersNicole Saidy, Jad Joubran · NDC Sydney 2017
• 35mDesigning Great Progressive Web AppsNicole Saidy · NDC Sydney 2017
• 39mDesigning great progressive web appsNicole Saidy · NDC Oslo 2017
• 39mGiving you ways to increase, but also explain site performance, to your boss.Peter Hedenskog · ColdFront 2014
• 14mBridging the Designer-Developer Gap, PWA EditionAntoinette Janus · Node+JS Interactive 2018
• 40m“Performance by Design”Henri Helvetica · Clarity 2017
• 33mFrameworks and Tools for Progressive Web AppsRowan Merewood · Google Developer Days India 2017
• 48mBecome a Frontend Developer Ninja using HTML5, JS and CSS3M. Casario · Codemotion Roma 2014