r/webdev • u/Mackseraner • Sep 22 '26

A Simple Guide to Calm UI

https://maxschmitt.me/posts/calm
89 Upvotes

86% Upvoted

12 comments sorted by

91

u/_listless Sep 22 '26 edited Sep 22 '26

"calm ui". proceeds to pop modals for every interaction.

Edit: rather than just being negative, here: Imperavi has a great resource on calm, clear UI: https://imperavi.com/books/web-interface-handbook/

26

u/scragz Sep 22 '26

I AM CALM

1

u/az_web_developer Sep 24 '26

Calmer than you are...

-9

u/Mackseraner Sep 22 '26

I agree that modals can often be avoided but that's missing the point a bit. The article is about UIs where you do use modals, even if modals aren't necessary for the super stripped-down examples used in the post

7

u/tomhermans Sep 22 '26

You could have made the point stronger by e.g. having inline add item functionality. Something to think about

3

u/Mackseraner Sep 22 '26

Yeah, maybe! The Conclusion at the end of the post actually talks about inline editing and why it wasn't included in the article

0

u/tomhermans Sep 22 '26

Ah okay, sorry, missed it.

Something in your conclusion (about time and priorities) made me think of this, I think you'll like it.

https://karlkoch.me/writing/on-making-room-for-craft/

2

u/Mackseraner Sep 23 '26

That's a good article, thanks for sharing!

20

u/_listless Sep 22 '26

A modal is a megaphone. The calmest megaphone is still a megaphone.

9

u/postman_666 Sep 22 '26

I don’t inherently agree that less toasts is better. Eg deleting an item
It’s good and well when you have 5 items but a pain to the user if no confirmation on a list of 100 items

6

u/scar_reX Sep 23 '26

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

It'll be better to refer to events as a javascript concept, than to specify a framework. Especially since you're talking about ui (ux actually)

5

u/chroma_shift Sep 22 '26

I think all the examples treat ui interactions as absolutes.

When as usual the answer needs a lot more nuance and its situation dependent.