Explore developer-friendly UX patterns to enhance your applications in this conference talk. Learn how to create shiny and joyful user experiences by focusing on Human-Computer Interaction. Discover reusable solutions to usability problems, including optimizing first paint and app shell, earning user trust, enhancing UX with transitions, implementing offline functionality through Service Workers, and optimizing for mobile devices. Gain insights into Progressive Web Apps, continuous testing on real mobile devices, and leveraging persuasion techniques such as curiosity, scarcity, reward, and social proof to improve user engagement.
Overview
Syllabus
Intro
UX design is a combination of methods with which you can solve design problems while focusing on the user.
Reusable solutions to usability problems.
Don't make the user wait
First Paint
An app shell is the minimal HTML, CSS, and JavaScript powering a user interface.
First meaningful paint
Ready for interaction
Above the fold
Consider the different states
Earn the user's trust
Functionality
Timing
Permissions API
Enhance UX with transitions
What makes a good transition?
Animation scenarios
For high pressure points Move all visual effects into transform & opacity
Make it work offline
A script run by the browser in the background and separate from a webpage
Service Worker approaches Pre-caching Dynamic caching
Service Worker pre-caching Pre-cache app shell
Optimize it for mobile
Progressive Web Apps
Flag for testing #bypass-app-banner-engagement-checks
Continuously test on real mobile devices
Play on persuasion
Curiosity
Scarcity
Reward
Social proof
Taught by
NDC Conferences
