Back to all posts

The Visual Language of Non-Deterministic UI

These aren't just aesthetic choices; they’re functional signals that the system is actively fetching or processing data in real time.

UI/UXAI DevelopmentProduct DesignFrontend Engineering
main thumbnail for The Visual Language of Non-Deterministic UI
main thumbnail for The Visual Language of Non-Deterministic UI
Reader Lens

Automation needs a narrow first win

The best first AI workflow is usually a repeated task with a clear input, clear output, and a human approval step.

AI software is moving away from the traditional request-response loop. In standard apps, you click a button and wait for a finished state. In AI-driven interfaces, we’re navigating a gray area of non-determinism where the 'thinking' process is actually the product. This shift is creating a distinct visual language that separates AI tools from native OS applications.

Signaling the 'Thought' Process

Because AI outputs are unpredictable, we’ve swapped standard loading spinners for streaming text and 'shimmering' effects. These aren't just aesthetic choices; they’re functional signals that the system is actively fetching or processing data in real-time. It keeps the user engaged with the 'thinking' process rather than staring at a blank screen. This is complemented by the sparkle emoji (✨), which has become our universal shorthand. It tells the user, 'Hey, this isn't a hard-coded rule; a model is working on this.'

The Aesthetic of 'Sophisticated' Intelligence

Look at Claude, Codex, and Cursor. They aren't trying to mimic the bold, rounded aesthetics of native macOS apps. Instead, they opt for smaller, thinner icons and a palette of beige, cream, and orange accents paired with serif typefaces. It feels academic—almost deliberate. It’s a move to distance the tool from utilitarian productivity and into the realm of 'sophisticated' intelligence, signaling a different kind of workspace for the user.

Solving the 'Whack-a-Mole' UI Problem

The real technical hurdle, however, is the 'whack-a-mole' effect. When an LLM’s output isn’t fixed, the UI can repaint unexpectedly as the model updates its confidence or changes its output. For a developer, this is a production nightmare. It breaks the user's mental model of state consistency. You aren't just building a UI for a result; you're building a UI for a moving target.

Visual Buffers for Underlying Instability

Here’s the real story: the sparkles, the shimmering, and the beige palettes are often acting as visual buffers for the underlying instability of the technology. While these patterns make for a polished demo, they don't solve the core problem of non-deterministic state management. We’re entering an era of 'uncertain' interfaces. The real win isn't just making the AI look smart with a serif font; it’s figuring out how to stabilize the UI so that non-deterministic output feels predictable. If we can't handle the 'whack-a-mole' effect at scale, these apps will always feel like they're fighting the user rather than assisting them.

inside paper visual for The Visual Language of Non-Deterministic UI
main thumbnail for The Visual Language of Non-Deterministic UI
closing highlight visual for The Visual Language of Non-Deterministic UI
main thumbnail for The Visual Language of Non-Deterministic UI
Source and trust note

Built from source research and filtered through practical implementation judgment.

Reference: blog.jim-nielsen.com

Got a question about how this applies to you? →

Keep reading

Follow the thread