The 100ms Rule Explained

It takes about 100 milliseconds to blink and in the digital world, this time frame is critical! It's the absolute limit. When an interaction takes longer than 100ms, the average user loses the sensation of "feeling instant" and feels a noticeable lag. Perceived performance is a fundamental concept in (UX). It refers to how fast or responsive a system “feels” to a user, which is often more important than its actual, technical speed. It's about managing human time perception and employing strategies to improve perceived speed. Since actual speed is finite, UX strategies are used as psychological tricks to shorten the perceived waiting time.

Some top strategies to improve perception are:

Immediate Feedback (The 100ms Rule) - Make the system acknowledge the user's input immediately, even before processing starts. An example is when a user clicks a button, the button should visually darken or depress within 100ms. This instantly tells the user, "My click was registered," which prevents them from clicking again or thinking the app is frozen.
Illusion of Progress (Loading state) - Add loading states because filled time is perceived as shorter than empty time. Provide constant visual updates so the user is in an active state (watching progress) rather than a passive/paused state (just waiting). Examples of this are:
- Skeleton Screens: Showing the outline of the content (like gray boxes) as it loads. This makes the user feel the content is already there and just "filling in."
- Progress Bars: Bars that move smoothly and even accelerate slightly toward the end are perceived as faster than bars that move erratically.
- Loading Spinners: Used for short waits (less than a second). For longer waits, they should be accompanied by explanatory text.

Load Critical Content first - Prioritize what the user came for, making the interface usable before it's fully loaded. A good example of this can be illustrated with what happens on a news site, the main article text and key navigation links load first, while high-resolution images or ads load in the background. The page appears "done" to the user much sooner.
Non-Linear Loading & Background Tasks - Pre-emptively load or calculate data for the next likely action the user will take. An example of this is when a checkout page loads the shipping options while the user is still typing their address. The transition to the next step feels instant because the data is already ready.

References

Designing and Engineering Time: The Psychology of Time Perception in Software Book

The 100ms rule

Comments

Commits to UX

Design Tokens: The Bridge Between Design and Code

More from this blog

The Question I Ask Before Building Anything

3 UX mistakes that might be costing you users

Beyond Alt Texts: How AI can Help Solve the "Cognitive Gap" in Modern UX

That’s AI? Intelligence in Everyday Interfaces

Should We Really Build Carousels Without JS?

Some top strategies to improve perception are:

References

Command Palette

Comments

Commits to UX

Design Tokens: The Bridge Between Design and Code

More from this blog

Some top strategies to improve perception are:

References