Back to Devoured - September 21, 2026
DEVOURED
A Simple Guide to Calm UI

A Simple Guide to Calm UI

Design frontend Maxschmitt.me
Building a 'calm' UI requires eliminating transient loading states and toasts in favor of immediate, inline feedback to reduce user friction.
What: The author suggests six design rules: avoiding cascading loading states, removing toasts in favor of inline feedback, pinning height-changing modals, using Enter to submit forms, and auto-focusing dialog inputs.
Why it matters: As AI-driven interfaces become more common, reducing cognitive overhead and UI noise is essential for maintaining a clean user experience.
Takeaway: Try replacing your next notification toast with an immediate inline update to see if it makes the UI feel more responsive.
Deep dive
  • Use inline feedback instead of toasts for success and error messages.
  • Avoid cascading loading states by keeping the trigger button in a loading state until the background update completes.
  • Pin modals to the top if they change height dynamically.
  • Use `` tags to ensure Enter key submission works by default.
  • Auto-focus the first input field in any dialog to minimize required clicks.
Decoder
  • Toasts: Small, temporary notification pop-ups that appear briefly on the screen.
Original article

A Simple Guide to Calm UI

Try adding an item to each list below.

Pay attention to what happens after you submit each dialog:

The 2 Rules for Calm UI

  1. Don't show cascading loading states. Keep showing the loading state on the save-button until the list in the background has been refetched.
  2. Avoid using toasts. They're bad UX. Instead show your action take effect (by adding an item to the list in this case). No need for an extra confirmation.

Similar rules apply when deleting an item.

Example: Item Deletion

Try deleting an item from each list:

Same principle as above. Fewer discrete loading states and no toasts make for a calmer UI.

Bonus Rules

1. Don't use toasts for errors either

The toast might look cleaner but it will appear far away from where the user originally clicked, especially on large screens.

Toasts also disappear after a while, leaving the user confused if they weren't paying attention when the toast was shown.

2. Pin modals that change height to the top

When the modal is centered, it causes the submit-button to shift position when showing/hiding the error message. Annoying!

The simple solution is to pin the modal to the top.

3. Let 'Enter' submit the form

When you're typing in the name of your item, you should be able to just hit Enter to submit the form.

You get this for free in React by using <form onSubmit={addItem}> instead of <button onClick={addItem}>.

4. Focus first input when opening a dialog

It's super annoying when I click to open a dialog and I have to click again so I can start typing.

Conclusion

There are many great design engineers writing about the more subtle art of design, like Jakub Krehel (The invisible side of design engineering) and Emil Kowalski (7 Practical Animation Tips).

I love that stuff but often times we have to build simple, solid UI and don't have the luxury of sweating the tiniest details.

And yes, even the After examples above could be polished a whole lot more with nice animations, optimistic updates, inline editing, etc.

This article was trying to show a few basic rules to keep in mind to make simple UIs feel a lot better. Without costing you extra time (or tokens).

Explore all 67 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi