We use too many damn modals (2018)

I was just about to share this our designer, who is always talking me down from modals, when I reached the bottom and discovered that our designer is in fact the author.<p>I seriously can&#x27;t say enough for this message. Adrian helped us redesign our app 2 years ago, dispatching many many modals in the process, and delivering a huge increase in usability that our customers and users very much <i>do</i> care about.

There&#x27;s a very simple rule of thumb: must the user give some feedback before it makes any sense to use the rest of the site? If so, it&#x27;s fine to use a modal. Otherwise, don&#x27;t. Some examples:<p>Payment page: not a modal. The user might want to add more stuff to the cart, even when they are literally one click away from purchasing. Blanking out the rest of the page means they now have to work <i>around</i> the site to buy more stuff.<p>Error message: not a modal. The user is vanishingly unlikely to report an error immediately (obviously it&#x27;s logged in any case), and probably just wants to try again with slightly different input.<p>Irreversible action confirmation: not a modal. For the same reason as the payment page, the user might want to do something else before retrying the irreversible action. Just display a <i>prominent</i> message so the user knows the action is not yet done. Or, if at all possible, implement undo instead.<p>My job depends on it: OK, use a modal. We forgive you.

I remember reading somewhere that most (modal) dialogs are just lazy design. It&#x27;s easier to have a dialog component and throw whatever notice or controls in there. It&#x27;s a predictable and flexible canvas.<p>Your password is incorrect? Error dialog. Easier to design and build that a warning state on the text-boxes and a message close to the login button.<p>Writing a post? Editor dialog. It&#x27;s easier to design and build than something that&#x27;s inline, grows to accommodate what you&#x27;re writing, and works predictably when you scroll away or click something else.<p>There&#x27;s something the user should know? Alert dialog. Much easier than figuring out where in the component hierarchy you should inject a warning, how it should look, what controls you should disable, etc.

I don&#x27;t want to complain, website is harder to read with all that 8 bitsh font type...Maybe normal post with one example for each idea would be good enough.

I agree about modals. But seems like the same points can be made about the website&#x27;s design that trying to teach others about modals, have you considered using plain text or a more readable website to convey your point across without resorting to 1-bit retro decoration?<p>Edit: 1 bit lol

Modals are basically the fancy clone of old school javascript&#x27;s alert(), and while everyone would rightfully be annoyed being &quot;alerted&quot; needlessly, designers have convinced themselves that it&#x27;s fine to show modals frequently?<p>Edit: Claiming it&#x27;s only designers&#x27; fault, or generalizing that all designers do that, is obviously wrong. I did not mean that. What I meant to convey (partially failed) is that examples propagate, and somehow design choices are the beginning of this propagation chain.

Let me see if I can articulate this well:<p>The problem problem with modals in a web page context is that they go against the statelessness of the html request&#x2F;response model. They end up building up a lot of local state in the client, both model state as well as UI state, that eventually need to be reconciled with the server. If the user closes the modal, is the data saved for later? Does the form reset? Does the server know anything about it? If it is a wizard, were previous steps saved? And so on.<p>After many years of working on and with intercoolerjs&#x2F;htmx, I now typically prefer inline editing and wizards, to a modal solutions. It fits better with the web model, allows for proper URLs, etc.<p>The inline-edit demo from htmx is a good example of something that might be implemented as a modal by some developers, but works very well as an inline-edit UI instead:<p><a href="https:&#x2F;&#x2F;htmx.org&#x2F;examples&#x2F;click-to-edit&#x2F;" rel="nofollow">https:&#x2F;&#x2F;htmx.org&#x2F;examples&#x2F;click-to-edit&#x2F;</a><p>(NB: I was lazy and did not make the URL update as I should have)

My biggest issue with modals, is that they never seem to be tested with mobile devices in mind. So when I&#x27;m on my phone, the ability to close it is often off the screen. The only choice is to leave the website at that point.

The key design principle overlooked here is Progressive Disclosure[1], which modals and dialogs can be very good at delivering.<p>Progressive disclosure retains user focus on a single task as opposed to showing everything at once. Accordions have similar function to modals and dialogs but adding further task controls to an already complex interface isn&#x27;t always the best solution.<p>The author goes on to state that even full screen modals are bad, but what difference does the user see? If done well the user should still be able to use the browser back button, escape key, etc to navigate out. In modern applications, pages can transition from one to the next without a &quot;full page load&quot; -is that also bad for some reason?<p>Think of many popular mobile apps like Instacart, Doordash, etc that allow a user to dive into categories that slide on top of the existing content to give further controls; is that not ok?<p>Every element in the DOM can be applied inappropriately but that doesn&#x27;t shift the blame to the elements themselves. One could argue an entire dedicated site that only uses modals based on the misuse of illegible fonts would be about as apropros.<p>[1] <a href="https:&#x2F;&#x2F;www.nngroup.com&#x2F;articles&#x2F;progressive-disclosure&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.nngroup.com&#x2F;articles&#x2F;progressive-disclosure&#x2F;</a>

In what context?<p>If you design a desktop application, like say Word then modals are more appropriate than the alternatives in many situations. For a site like Medium, a modal is an annoyance. If I asked for something (click Settings) then I am happier with my modal than if I didn&#x27;t ask (we&#x27;re going to stuff cookies on your page anyway, here is our arse coverer).<p>The underlying message I take is we &quot;use too many things that make it easier for the coder and harder for the user&quot;. Sometimes that&#x27;s a modal, but sometimes that&#x27;s NOT using a modal!

I hate modals - I&#x27;ll never add them to products I build.<p>Edit: To provide a little more substance here - for example in one product of mine that actually has customers - confirmation is done via inline elements that slide into the page.<p>So you want delete a comment for example. The delete&#x2F;cancel buttons slide into the box for that comment. No weird context switch for your eyes.

Typing this from Ubuntu, Gnome 3 I think, in Firefox, I press Ctrl-S to save the page, and I get a modal dialog, which cannot be even moved. Sometimes, it actually obscures something that I cannot read on the screen.<p>If you have to use a modal element at least allow me to get it out of the way so that I can read the text under it!

This is only tangentially related, but one thing I&#x27;m absolutely sick of is rounded corners. I don&#x27;t know why, and I don&#x27;t know if it makes any sense, but opening a page and seeing literally <i>everything</i> with border-radius makes my blood boil. It feels like they&#x27;re trying to protect me from sharp corners, as if they&#x27;re dangerous. Come on, we&#x27;re all adults here. We can take a few 90 degree angles.

Modals are a good way to show complex content without throwing away your current render. Whatever you were doing before the modal came up, you can go straight back to that. No re-draws, no scrolling back to the place you were at.<p>Ofc we&#x27;ve all seen them done terribly.

Modals are good for when you need to show a new blocking state without losing the current state. There are many valid reasons for that scenario. Even for modal inception.<p>Use them for that purpose, no need to swear them off completely.

The one UX anti-pattern that needs to die for sure is what this site calls &quot;self-spawning modals&quot;. They&#x27;re not only on websites — iOS is very annoying with them for example.

I&#x27;ve been preaching against modals and carousels for years. I&#x27;m a big fan of <a href="http:&#x2F;&#x2F;shouldiuseacarousel.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;shouldiuseacarousel.com&#x2F;</a> and while I had long ago intended to create with a similarly implemented site that demonstrates the pitfalls of modals with a series of modals, this site does a pretty good job of highlighting the main issues and alternatives too

Hah! I often have the experience that indeed a modal should actually have been a new page, but I was too lazy to build the thing so I went with the modal. Then later the modal needs more options or fields, and I end up having to convert it to a new page anyway... lesson mostly learned now. Agree with the article.

One thing I like to do is preview a link by Force clicking on it in my browser and scrolling through it–the preview window lets me scroll, but not interact with the page. For many sites this is quite convenient, because I can skim the page without being interrupted. But when modals pop up they cover the content and I can&#x27;t read the page because I can&#x27;t dismiss them! So if you&#x27;re looking for another reason to drop modals, here&#x27;s one.<p>Also, hilariously this website uncovers a bug in Safari where the cursor doesn&#x27;t reset once you leave the page bounds, so I have a huge pixellated cursor hanging around until I click somewhere else :P

I must be in the minority as I love modals.

I&#x27;m reminded of a quote in Inside Macintosh Volume 1: &quot;But, gentlemen, you overdo the mode.&quot; From John Dryden, The Assignation, or Love in a Nunnery, 1972. That quote really stuck in my head.

The list of reasons why modals are bad are all very subjective. A little more explanation would have helped make the case that modals are bad.<p>Not to mention that what should be a list is displayed as a table (－‸ლ)

There are so many bad modals in mainstream desktop software. Is there any good reason that an open file dialog completely disables all other interaction? What if I quickly have to task switch, or a piece of info relating to which file i wanna open is just off screen?<p>A personal favourite is osx Preview and the rename and move file drawer you can get from the status bar of an open file. That guy can&#x27;t even be moved, and perfectly covers up the portion of a document likely to contain info relevant to a filename.

The website is readable only at 30% zoom(couldn&#x27;t zoom out even more) on the 4k 27&quot; display also it messed up mine scroll wheel in some way, broke mouse cursor.

Modals can be a lazy (and worst, wrong) solution. But I&#x27;ve found that pavlovian bashing of modals is as lazy and unproductive.<p>&gt; And remember to always ask, kids: &gt;“Why does this have to be a modal?”<p>In my experience people don&#x27;t need to be remembered to ask this. And generally people can&#x27;t justify why it shouldn&#x27;t be a modal or why a non-modal solution is better than a modal one.

Back when js frameworks became a thing, modals were a shiny ball that everyone wanted to put into their app (because they came with the framework). Designers that worked with these modals became poisoned to the fact that this is how a UI should look. Like an old hairstyle they&#x27;re now thankfully going out of fashion.

I&#x27;ve been using Azure a lot, and they use blades (essentially horizontal accordions) instead of modals.<p>I was playing with Alibaba Cloud&#x27;s UI and it&#x27;s all modals and feels much much nicer to use. I wouldn&#x27;t use Ali Cloud due to Chinese ownership issues, but I do like their UX.

Eclipse uses modals in the worst possible way. Usually you want to copy the name of a type or variable into a modal but you are already into two layers of modals. You will have to close all of them and lose progress. Using more than one layer of modals is always bad design.

The awful readability of that website must be satire, right?

The reason modals are so popular is because they work really well when trying to convert views to signups.

Love this a lot! The author is right on most (well, all) of the statements.

Very easy to use a modal if I’m editing other parts of UI.

I have a rule: if I get an unnecessary modal, I leave.

Oh I thought the subject is about the modal verbs

Is this website considered &quot;brutalist&quot;?

the worst thing is doing a modal that calls a modal, that&#x27;s the worst offender of them all

also see: popups

I use full screen modals for my new project. A list of items. U click one and the item appears in a full screen modal. U close and you&#x27;re at the same place you started.users love it and i dont see a problem with it.

My main gripe with modal windows is the name. The first couple times some developer told me that&#x27;s what she was using, I waited for her to explain what modal meant. But she did not, as if it was standard self-explanatory terminology. Way to name something a word that sounds like it has a standard (even deeper) meaning, but does not.<p>With time, I have just accepted that this is what modal means (I&#x27;m going to create a window of this type to display the data&#x2F;filters), disconnected from any meaning of the term &quot;mode&quot;.<p>But I still don&#x27;t like it.