Doherty Threshold

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

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