Doherty Threshold

Productivity soars when a computer and its users interact at a pace (<400ms) that ensures neither has to wait on the other.

Why it matters

When a button takes 600ms to respond, users click it again (sometimes twice), creating duplicate submissions, errors, and frustration. Latency isn't just inconvenient; it destroys trust in the entire interface.

Key Principles

1System responses under 400ms keep users in a state of flow.
2Use loading indicators for operations that exceed this threshold.
3Provide optimistic UI updates to mask latency.
4Animate transitions to make waits feel shorter.

Try It

Click each button to simulate different response times. The 400ms threshold is where productivity drops.

0ms400ms threshold1000ms

Code Pattern

tsx

1// ✅ Good: Optimistic update with rollback
2function LikeButton({ postId }: { postId: string }) {
3  const [liked, setLiked] = useState(false);
4
5  async function handleLike() {
6    setLiked(true); // Optimistic update
7    try {
8      await api.likePost(postId);
9    } catch {
10      setLiked(false); // Rollback on failure
11    }
12  }
13
14  return <button onClick={handleLike}>{liked ? "♥" : "♡"}</button>;
15}

Use optimistic updates to keep the UI responsive below the 400ms threshold.

AI Analyzer

Analyzing against Doherty Threshold

Your code and images are sent directly to the AI for analysis and are never stored or logged. This tool is for educational purposes only.