In 3 Seconds or Less: Building UIs that Keep User Attention in a World of Distraction

This talk is confirmed. The time of the talk will be announced soon.
The recording will be published after editing. Multipass and Full ticket holders have early access.
Bookmark
Rate this content

As everyday distractions increase, the window you have to hold a user's attention shrinks.  In an era of endless notifications, infinite scrolling, and constant context-switching, even a subtle layout shift or tiny added friction in the user's flow can trigger frustration and lead to immediate churn.


Building software that instantly matches user intent requires bridging the gap between front end engineering and human psychology.  In this talk, we'll explore the key interactivity thresholds that influence a user's decision to stay or drop off, along with practical engineers strategies to reduce cognitive friction, preserve user momentum, and improve retention on your app.

This talk has been presented at React Summit US 2026, check out the latest edition of this React Conference.

Shaundai Person
Shaundai Person
Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Asynchronous UX
React Advanced 2021React Advanced 2021
21 min
Asynchronous UX
Top Content
Today's Talk covers the importance of building Asynchronous UX with React and single-page applications, providing code and UX examples. It explores data fetching, adding progress indicators, handling errors, and user-initiated actions. The Talk also discusses handling component unmounts, multiple actions, idempotency, and context loss. Finally, it touches on considerations for optimistic updates and the use of CRDT or other technologies for collaborative applications.
React Native Animations Should Be Fun
React Advanced 2022React Advanced 2022
28 min
React Native Animations Should Be Fun
This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.
Abracadabra: The Vanishing Network
React Summit US 2024React Summit US 2024
32 min
Abracadabra: The Vanishing Network
I am so excited to share my software development experience. The talk focuses on React and the Vanishing Network, aiming to make network management disappear. It starts with the multi-page app paradigm and moves towards enhancing user experience and transitioning to single-page app architecture. The talk discusses eliminating duplication, transitioning to a JSON API, and utilizing React and user actions. It explores progressive enhancement with Remix, moving to modern React with server components, and enhancing server-client communication and UI. It also covers server-client code separation, Epic React version two, AI plugins, Next.js, trade-offs, testing, SQL queries, and optimizing for change.
Ensuring your Users are on the Right Path: the Future of Modals and Focus Management
JSNation 2022JSNation 2022
17 min
Ensuring your Users are on the Right Path: the Future of Modals and Focus Management
This Talk discusses the new features of Modals and focus management in web development. The dialogue element allows for the creation of modal dialogs that appear on top of other elements and prevent interaction with elements below. The note element can mark a subtree of the DOM as inert, making it unusable. The field set component can group input elements together and disable them. Using these new primitives can improve focus control and user experience in web applications.
Remixing How We Give
Remix Conf Europe 2022Remix Conf Europe 2022
32 min
Remixing How We Give
Daphne uses Remix for their web application, benefiting from its resilience, error boundaries, cache boundaries, and progressive enhancement. Remix simplifies form submission, authorization, and validation, and allows for easier refactoring and code duplication avoidance. Next and Remix are used together, with Remix serving as the backend for the frontend and handling data aggregation. Remix provides query functions for fetching data, mutations for form data validation and API calls, and custom conventions using the handle export. Migrating to Remix resulted in smaller JavaScript files, faster navigation, and the ability to preload data and assets. The migration process took around nine months and involved mixing Next.js and Remix using Express. Hiring someone to work on Remix is easier than hiring for other frameworks.
Improve Your App Performance With Background Jobs
React Summit 2024React Summit 2024
29 min
Improve Your App Performance With Background Jobs
This is a background jobs one-on-one talk focusing on the challenges and benefits of using background jobs in software development. It explores the complexity of software development and the impact of distributed applications. The talk highlights the use of Ingest as a reliable solution for executing functions in the background and building drip campaigns. It emphasizes the importance of reliability and architectural choices in software development and discusses the features and capabilities of Ingest, including local development, handling failures, and data retrieval.