Modals 🙅

[nelsonic]

A modal was used in one of our tutorials https://github.com/dwyl/learn-alpine.js/pull/5/files#r1012307859

I want to capture why we don't want to use them. ever.

Todo

• [ ] Describe the history of modals. See: https://accessuse.eu/en/modal-dialogs.html
• [ ] Modals are not the same as built-in/native alerts/prompts!
• [ ] Compare Modals to Cigarettes, fashionable, you see them often but totally unnecessary.
• [ ] Explain the one situation where they are acceptable, but still don't!!
  • [ ] Ref: https://github.com/alphagov/govuk-design-system-backlog/issues/30#issuecomment-537013244
• [ ] Propose alternative mobile-first/friendly UI/UX that is accessible, performant and requires zero QA time!

[trickydisco78]

How about the native dialog element that is built into modern browsers now? This includes lot of usability and accessibility features built in: focus trapping, autofocus on element, inert on document, open and close method, automatic close on esc key.

Example https://web.dev/building-a-dialog-component/

Scott o hara mentions using native dialog now

I would recommend either using the native

element, or you should check out a11y-dialog for a script that is being actively maintained and delivers a good modal dialog experience. https://github.com/scottaohara/accessible_modal_window

[nelsonic]

Hey @trickydisco78 👋 [how on earth did you find this issue?! 😜 ...]

Yeah, Native dialogs have been available for a while: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#browser_compatibility

As noted in the second checkbox above, Modals are not the same as the Native dialog. One has been extensively Quality Assurance Tested by the Browser makers, the others not so much.

I would still caution against using them liberally because unless they add to the UX. 🤷‍♂️ Most of the time designers/devs use for a Modal when it's totally inappropriate like basic forms! Much like the way smokers unconsciously reach for a cigarette without even thinking: "do I need to be killing myself?"

Yes, "focus trapping" is a potentially valid scenario ... But why use a modal to overlay something when you can just transition to a full-page focus? We have become so used to modals that nobody bothers to ask these questions anymore. It's like TV violence. We think it's "normal" ... and yet, it's really not! Violence is exceedingly rare in real life! Modals should be too!

@scottaohara is a good designer and his modal is a good example of the How but fails on the "Why?" i.e. Why do designers use Modals? I contend that modals are the lazy person's UI; they are almost always inappropriately used. Great UX is so seamless that you never need to use a Modal. Imagine on-boarding for your favourite video game e.g: Super Mario or Tetris. There are no Modals! And yet you learn the controls & game mechanics seamlessly. That's great UX design! Only one thing to focus on at any given time.

Highly recommend watching Bret Victor's "Inventing on Principle" https://www.youtube.com/results?search_query=Bret+Victor+Inventing+on+Principle Specifically the "Why?" section.

"You can choose to sleepwalk through life
and accept the path that's been laid out for you.
You can choose to accept the world as it is.
But you don't have to.
If there's something in the world you feel is wrong,
and you have a vision for what a better world could be,
you can find your guiding principle, and fight for a cause."

[trickydisco78]

Hey.. I found it linked from discussions here: https://github.com/alphagov/govuk-design-system-backlog/issues/30

As part of a project i've been asked to implement a modal. In this instance because of good support i've used the native dialog DOM element.

I agree with you in a lot of respects. Modals are over used. But in others maybe not. Its a UI pattern that has been used for a long time: think of all the dialog modals that appear on mac and windows OS. They are everywhere! The same with Games: https://www.gameuidatabase.com/index.php?set=1&scrn=902&tag=8&r=1 same with apple

Spotify

games

Ios Gmail

Or maybe i'm getting confused about the difference between a dialog and a modal? A modal to me is when the background dims behind. I think you should have the ability to light dimiss (cick outside the modal) to close it.

[nelsonic]

These are all examples of Native UI components which are extensively tested both for pixel-perfection and a11y. ✅ I don't think any of these examples are particularly good UX though ... do you? 🤷‍♂️

The iOS dialogues are so ingrained in us that we just think they are "normal" ... Apple could just as easily done a better UX and perhaps in a future iOS we will see one similar to the "Dynamic Island" ... 🏝️ 😉

Spotify's use of modals to interrupt the UX flow is particularly egregious! 😠 I just want to listen to music not have to first read your Advert for Taylor Swift's new noise and dismiss it ... ⏳ (BTW: I actually think TayTay's music is dope, just saying not everyone needs to see this "New Release" ...) I regularly find myself using the Spotify App and wishing there was something better. 💭

The gmail one is just horrible. It' adds no value whatsoever. it's just a UI/UX anti-pattern. 🤦‍♂️ They could easily have made that full-screen without any loss of experience. In fact I would argue the UX would be considerably better if it was uncluttered by the background noise.
Forcing people to "Choose a View" before they have interacted with the product is just unnecessary what a lame onboarding experience. Clearly they have such great market share that they don't have to worry about imposing decision fatigue on people this early in the UX. 🤷‍♂️

Sadly,, I don't think this thread is the place I'm going to "convince" anyone especially given the ubiquity of modals ... But I feel the same way about Modals as I do about cigarettes:

[scottaohara]

not really sure why i was @'d in here? but since i was, i'll just quickly respond to

is a good designer and his modal is a good example of the How but fails on the "Why?"

odd word choice to say i "failed" on something I never attempted to discuss.

tbh, i actually agree with

I contend that modals are the lazy person's UI; they are almost always inappropriately used.

but, i don't have the time or energy to fight that battle. Rather, it seems more important to me to help people know how to make them accessible for when they do use them.

good luck to you though. hope you don't fail ;)

[nelsonic]

@scottaohara apologies for spamming you. 🤦‍♂️ Love your work! Thank you all you do for Accessibility. ❤️ Apologies for using the word "fail". Didn't mean any disrespect. 🙇

Just wanted to highlight that your project that has great docs 😍
doesn't ask/answer the question "Why Use Modals?" ... 🤷‍♀️ Not saying it should ... you're fighting the "good" a11y fight. 🙈 just wish more people thought about the "Why?" in UI/UX design ... 💭 so many people building software products haven't read "Don't Make Me Think" or "The Design of Everyday Things" As a result the world of Apps/Software is full of "Norman Doors" with horrible UX ... 😢 https://99percentinvisible.org/article/norman-doors-dont-know-whether-push-pull-blame-design/

Anyway, hope you're both having a great Friday! ☀️

[trickydisco78]

How about this opinion

https://twitter.com/anotheruiguy/status/1589743863325167616

Is there concensus on the difference between a modal and a dialog? Even the native dialog element has a showModal() event

[scottaohara]

it's not really a matter of consensus. people either understand these terms, or they use "modal" incorrectly.

[nelsonic]

This is the crap I think of whenever I think of Modals:

An unwelcome interruption to the task I'm attempting to perform. [Researching: https://github.com/dwyl/learn-cad-cam-cnc/issues/93 ...] The person who put this Ad modal on this page is stealing time from me. Reluctantly enabling Add block on chrome.

[nelsonic]

There appears to be some confusion about what a Modal is ... This is a modal: 🤮 https://getbootstrap.com/docs/4.0/components/modal/

The Modal overlays the screen hijacking the focus of the viewer and forces them to manually dismiss it. This is horrible UX.

By contrast, the "Card" on git-fork "buy" page: https://git-fork.com/buy is not a Modal:

It does hijack the focus of the person viewing the page. It's simply presented as the suggested focal point.

Sadly, when you click on the Buy button, that's when the pointless Modal hijacks the screen:

Why?! 🤷‍♂️ Has the person that built this never used Amazon checkout? 🤷‍♂️ Amazon - the most successful e-commerce platform in the world - never uses Modals. Surely if their objective is conversion/completion, just follow the Amazon checkout process? WHY do they feel the need to use a Modal?! 🤦‍♂️

[LuchoTurtle]

I kind of disagree with your opinion on Fork's use of this modal. You are suggesting the modal is pointless as it's changing/hijacking the page focus. I believe it's working exactly as intended, especially with the fact that the page is suggesting that you can only buy the license from it.

But what would the alternative be? Opening a new tab with the Paddle payment session? In terms of "time wasted (🙄)", I'd waste more time in changing windows and waiting for them to load.

Should the session be changed within the same tab? It would be worse. If I wanted to go back, I would have to wait for the page to load again from the payment session checkout page.

With this modal, I can just close it if I changed my mind about buying the product.

Amazon being the most successful e-commerce in the world has nothing to do with how great or bad the shopping experience is (especially checking out when purchasing items).

Here's an annoying example:

Here's me wanting to purchase a Benjamin Tod vinyl. When I check out, I am navigated to an entirely different page just to fill in card details, etc...

I find myself having to go back to add forgotten items or check other items countless times and I'm sure I've wasted more time loading Amazon's big website bundle when I could just have closed a modal and kept looking.

Happy to hear opinions 👍

[nelsonic]

Everyone is very welcome to disagree with what I write. Ideally with evidence. 🙏 However this is not a matter of opinions, it's data. Amazon, unquestionably the biggest e-commerce company in the world by any metric: https://www.statista.com/statistics/245340/leading-large-cap-e-commerce-companies-market-cap

Does not use Modals in their checkout process. This is not for "nostalgia" or lack of engineering resources/talent reasons, it's not an accident, it's 100% all business for The Jeff!

When it comes to UX, Amazon has the data; the biggest data by far ...

They have run many A/B and multivariate tests on their checkout process over the years and don't use Modals where matters most. This isn't a matter of opinion. This is what works for conversion. Anyone who wants to make money online and not waste people's time doesn't need to look any further we have the answer!!

Buuuuuuttttt ... if we are still curious. I've asked the questions in places we might get more data: UX StackExchange: https://ux.stackexchange.com/questions/145232/do-any-major-e-commerce-companies-have-modals-in-their-checkout-process HackerNews: https://news.ycombinator.com/item?id=34133231

Modals are horrible and unnecessary in 99% of the cases they are used by naive devs who do not own the company they work for and have no "stake" in the outcome i.e. aren't compensated based on conversion rate.

In e-commerce checkout Modals are massive anti-pattern and none of the major e-commerce companies use them conversion and successful cart completion matters to the bottom line.

We might not have the data from the Fork Analytics, but quite frankly it really doesn't matter. It's like having a debate about the policies of a minor political party when they will never reach mainstream appeal. It's just a pub conversation that goes nowhere. 💬 🙄

Modals == Cigarettes

Plenty of people choose to smoke cigarettes [or vape, Heets/IQOS, etc... all the same nicotine fix!] 🚬
Initially because they are desperate for peer approval and subsequently because they are addicted ... 💀

But smoking just doesn't make any sense from a health, financial or cognitive perspective. Again, this isn't a matter of opinion, it's science.

Modals are the smoking of UI/UX, people only use them because they see other "kuel" people using them ... They are a band-aid to a problem that people don't have the engineering skill to fix; page response time.

If you find yourself reaching for a cigarette / Modal ... Ask yourself: Am I fixing the problem or making it worse?

As for the personal experience of buying Country Vinyl records ... 😜 Dunno if you're just trolling :trollface: 🤷‍♂️

If you're "going back to add forgotten items" ... then either you are having trouble deciding how to burn your cash or the site you're using has bad UX. The Amazon "bundle" is definitely too big. But it doesn't do a full refresh on each page load. Amazon knows that people load the bundle infrequently and never during checkout. A Modal might be OK for a younger person with reasonable technical competence, but it's horrible for "normal" people.

No Thank You.

We aren't going to use Modals in our App/UI. This isn't up for "debate". 🙅 As much as I want to be diplomatic. This isn't a "discussion" I'm going to waste any more time on. ⏳ == 💸 🔥

If other trendy websites feel the need to use them, that's their [ill-informed] choice. 👌

[nelsonic]

https://youtu.be/uXs-zPc63kM?t=3007

Ouch ... 📉

Just don't do it! It's not worth it. Modals are baaaaaaaaaaaadddd. 😢

[nelsonic]

Captured in: https://dwyl.github.io/book/auth/08-modals-antipattern.html

[nelsonic]

So glad someone else has created this:

You don't need a modal window: https://youdontneedamodalwindow.dev/

via: https://news.ycombinator.com/item?id=36056376

sadly, most of the comments on HN are from hipsters who have never seen an accessibility study and think Modals are OK. But there are a handful of people in the comments who get it.

[nelsonic]

https://dwyl.github.io/book/auth/08-modals-antipattern.html

[nelsonic]

While trying to view one of my playlists in Spotify I just got this full page interruption:

It's not enough for me to pay them to RENT music, they also want permission to track me for marketing?! Fail.

[ndrean]

I think the "details" tag can be useful:

click to view more

Here are the details you want to read

I helps to keep the flow a bit more tidy.

[nelsonic]

Yeah, nothing against the details tag if the <summary> is appropriate. 👌 It's not the same as a Modal that pops over the content ...