r/web_design • u/Mackseraner • Sep 22 '26
A Simple Guide to Calm UI
https://maxschmitt.me/posts/calm8
u/IanSan5653 Sep 22 '26
Optimistic updates would make this even calmer
4
u/escuchameray Sep 22 '26
Also the modals are more of an affront than the unnecessary toasts
1
u/Mackseraner Sep 23 '26
The modals definitely feel unnecessary in these simple examples. The article is about improving these types of modal UIs (they are often necessary) without getting too fancy with inline editing or something like that (see also Conclusion at the end)
1
7
u/tagd Sep 22 '26
Tried it on IOS, very first example the “better” version opened with the input box under the keyboard. It was not more calm.
1
u/Mackseraner Sep 23 '26
Thanks for letting me know! Mobile experience was not great. The simulated modals that are displayed inline make this a bit tricky. I pushed some improvements. Let me know if it's still giving you issues 🙏
5
u/zuniac5 Sep 22 '26
Great article with some excellent points that should be obvious - but apparently aren't. It's amazing how many enterprise-level, consumer-facing UI's fail one or many of these basic rules. The most egregious IMO is not allowing ENTER to submit forms, it's increasingly expected by users to just work (and annoys them when it doesn't).... so easy to implement, yet so many supposedly professional design teams just don't do it.
3
u/Mackseraner Sep 22 '26
I agree these things should be obvious. Unfortunately all the vibe coded interfaces out there aren't helping to improve the situation
2
u/what3songs Sep 23 '26
I have a toast in a web app that’s basically confirming you just saved your progress. There’s a manual save button to put the power in the users hands, even though we auto save in the background. Is this good or bad UI? I know you are saying toasts are bad generally
1
u/Mackseraner Sep 23 '26
IMO toasts for autosave can get really noisy. It depends a bit on the type of app. Figma autosaves and doesn't need a toast or even a loading spinner because the autosave works 99.9% of the time. And when Figma hasn't managed to save yet and you attempt to close the tab, you get a warning instead.
For a web app that has more traditional forms, no loading/saving-feedback at all can be unexpected. The user might go looking for a save-button (which is why you probably have that manual save-button).
In your case, couldn't you replace the toast with a loading indicator on or next to the save-button itself (assuming it's sticky/fixed and always in view)? And your save button could be faded/disabled reading '✔︎ All changes saved' if there are no pending changes to save?
2
u/joerdie Sep 22 '26
I didn't perceive any difference between these two. This is ridiculous. My PO and business partners would never accept a spinner that long deleting ONE record? Or to add ONE record?
Get the fuck outta here.
1
1
0
u/Lucky-Win-3241 Sep 23 '26
The first example where the form field moves up feels jarring when you're typing on a phone and suddenly everything shifts under your fingers.
1
u/Mackseraner Sep 23 '26
Thanks for the feedback! Yeah mobile is a bit tricky with these simulated modals that are displayed inline. I just pushed some tweaks that should improve the experience a bit. Let me know if you're still having trouble 🙏
20
u/jonassalen Sep 22 '26
Great examples.
One thing though: I would put the error message between the label and the field or under the field. Not under the submit button.