Interaction Timing
Response time expectations are not arbitrary — there are three distinct thresholds that determine whether an interaction feels instant, interrupted, or broken.
Speed is not a performance concern that belongs only to engineers. The timing of every response shapes whether users experience the interface as responsive, slow, or broken.
The three thresholds
Research on human perception identifies three critical response time thresholds. Under 100ms feels instantaneous — the user experiences their input and the response as a single event. Between 100ms and 1 second, the user notices the delay but does not lose focus on their task — no loading indicator is needed, but the response must arrive before 1 second. Beyond 1 second, the user’s train of thought is interrupted and they shift attention away from the task — a loading state is required to communicate that the system is working and hold their attention. Beyond 10 seconds, users typically abandon the task or take corrective action.
Interface transitions
UI transitions — animating a panel open, a modal appearing, a page changing — should be faster than the threshold for “noticeable”: 200–300ms is the range where animations feel smooth without being slow. Transitions slower than 400ms feel sluggish. Transitions faster than 150ms may feel abrupt. The purpose of a transition is to maintain spatial context and communicate change — not to showcase the animation. Use the minimum duration that achieves the communication goal.
Hover and tooltip delays
Hover states should respond in under 100ms. Tooltips benefit from a short intentional delay — around 300–500ms — to avoid appearing for users who are simply moving their pointer across the screen rather than pausing on an element. This delay filters unintentional triggers without making deliberate hover feel slow.
WCAG 1.4.13 (Content on Hover or Focus) requires that any content revealed on hover must satisfy three conditions: it must be persistent (visible while the pointer is on the trigger or on the revealed content itself), hoverable (the user can move the pointer over the revealed content without it disappearing), and dismissible (the user can dismiss it without moving the pointer away, typically via Escape). Additionally, any content revealed only on hover must also be accessible on keyboard focus — tooltip content that appears on hover but not on :focus excludes keyboard users entirely.
The cost of unnecessary delay
Adding delays to interactions that do not require them — artificial loading animations for already-available data, transition animations between instant operations — makes the interface feel slower without adding value. Perceived performance is as important as actual performance. A response at 300ms that is displayed at 800ms because of an animation feels slower than a response at 300ms shown immediately.
The takeaway
Design with timing in mind. For every interaction: what is the expected response time, and what does the interface show during the wait? Match transition durations to the 200–300ms range for UI motion. Never add artificial delay to fast operations. Apply loading patterns for anything beyond 1 second.