Don’t open the details in a modal window, have it be a separate page

403 292 3 years ago

sva_• 3 years ago

For some reason I thought this was someone complaining about those German windows we have in our houses, that open two ways.

NeoTar• 3 years ago

Why would anyone want to complain about those?

afandian• 3 years ago

Most glaziers probably don't care about modal dialogue boxes.

golergka• 3 years ago

Details pages with a lot of information? Bad fit.

Small messages that need to be brought to the user's attention and a simple "OK"/"Cancel" button? Yes, this is a good fit. That's what modal windows were originally created for.

ceejayoz• 3 years ago

The end of the article says exactly that.

PaulHoule• 3 years ago

I think the first article I saw complaining about modals was in BYTE magazine circa 1981.

pornel• 3 years ago

I've seen confused users who missed/ignored the tiny OK window, and through the app froze, because the large parent window stopped reacting to clicks.

dieulot• 3 years ago

iOS ⩽ 6 used a radial gradient effect to make it clear that the modal is what’s to be interacted with.

YurgenJurgensen• 3 years ago

MS Outlook is very good at opening modals that block interactivity with the main window. And opening them on a different monitor to the original window (even if said monitor is full-screening a different application so the modal actually opens on a currently-invisible workspace) so it's not even obvious why.

dspillett2• 3 years ago

For a HTML based presentation you probably have a backing element that covers the rest of the page to trap clicks anyway. Make this partially opaque instead of transparent and the modal becomes much more obvious. Or if you want to be a bit more fancy and can rely on the user having a browser newer than July 2022 perhaps use backdrop-filter to apply a blur instead of just being partially opaque.

You can do the same on a desktop app too, but it is less commonly done. To further avoid confusion, try make sure the pop-up modal appears over the parent window that it is blocking input for (this may mean coding your own window instead of the platform default alert/confirmation box, if the call to open one doesn't allow positioning information to be specified). I've seen alerts/confirmations pop-up on a different screen to the one that the parent window is on which makes missing it much easier (especially if the other screen is away from the main one, perhaps it is being projected at a wall for a demo). To further help: if the user clicks the disabled parent, move the pop-up to where they clicked – usually the title-bar or other chrome on the pop-up flashes in this case, but that isn't helpful if it is on screen 2 and the user is staring intently at screen 1.

Brian_K_White3• 3 years ago

The article says exacyly that itself.

Which I thought made sense but I have missed an ok modal before myself let alone seen others as another commenter pointed out. In native apps they also open off screen which is about as broken as you can get.

So, I may go even further than the article and say there are even fewer cases where it is the best way to do a job.

extasia• 3 years ago

Love your username, OP.

huhtenberg5• 3 years ago

Don't open the details in a modal window. Have it be a separate page.

This will worsen the UX more often than not. Guaranteed.

All complaints on the page are ultimately grievances against poorly thought-through implementations and as such they are rooted in the wrong thing. It's trivial to complement every modal window with a standalone version, in which case it's possible to bookmark them, middle-click on the links and what have you.

Start with the user experience, craft your implementation around that and all will be fine. Including the modal windows.

reaperducer3• 3 years ago

This will worsen the UX more often than not. Guaranteed.

You must use "telemetry" instead of actually talking to your users.

My company requires me to talk to the people who use the web sites I build. (I has a session just yesterday.) They hate modal windows. They even still refer to them as "pop-ups."

oefrha• 3 years ago

Your company requires you to talk to users, yet it seems you still haven’t gotten the memo that you shouldn’t make blanket assumptions without talking to people about actual use cases. “Users hate modal windows” is about as meaningless as “users hate open in new tab” without context.

radiorental• 3 years ago

You can't generalise like this. We use modals, drawers and new tabs where appropriate.

There's two words you must learn when talking about UI design - "It Depends".

The one general rule I will state that guides towards using a modal is if the user needs to stay within the context of the originating page and they must return to that page as part of the workflow that launched the modal. But there's also edge cases to this.

source: UXer with 25 years experience in both desktop and webapp.

francasso• 3 years ago

YMMV. If you are building a single page app for expert users in a domain, and editing an entity changes the visual context by going to a different page, that doesn't go down well in my experience. We tried it once, with multiple iterations, and in the end had to roll it back to modals because the complaints were endless.

jevgeni3• 3 years ago

They ARE pop-ups mostly. Just ones that are harder to block as compared to the 1990s pop-ups.

Semaphor2• 3 years ago

You must use "telemetry" instead of actually talking to your users.

I mean, there are several people in this thread who like modals as users. I’m another one of those. I find modals very useful, as long as you don’t do them in a crappy way. You shouldn’t insult people just because your experience was different.

nicbou3• 3 years ago

I'd love to hear some unexpected insights you got from asking users.

arghwhat3• 3 years ago

Sure, you can complement every modal view with a non-modal version, but now you have 2x the views and users that are ambivalent about the duplication at best, confused and frustrated at worst.

Just make a good non-modal view, with whatever transition is needed for continuity to/from the parent view.

keyle• 3 years ago

I think unfortunately in the last decade modal windows have been abused.

I however agree with you, and I don't like the website simply dismissing the idea because it's been over-used and abused all over the place.

Modals have a place in UX.

rozenmd• 3 years ago

Funnily enough, I never complained about how Jira solves this (it's clear that linking to the modal will work, because the URL updates)

korijn4• 3 years ago

So what about people with screen readers? They don't (middle) click or type at all. Does your UX account for them too? If so: great. Usually, it's overlooked. I think that's the point of this article. Standard browser controls are all 100% accessible by default.

aendruk6• 3 years ago

Clearly “middle-click” was just an example of how to open a link in new tab. Screen readers don’t have a way to do that?

huhtenberg5• 3 years ago

Accessibility support is a matter of priorities for a given project.

If 99.99% of your target audience is not using screen readers, then you need to decide if worsening their experience to accommodate the other 0.01% aligns with your project plans and goals.

In some cases it will, in some it won't. It depends.

cyral• 3 years ago

There has been a native <dialog/> element in HTML for a while for accessibility.

extra882• 3 years ago

Are you confusing screen readers with voice control software? Screen readers are most often used by people with vision impairments; with desktop operating systems, they use a keyboard not just for typing in form fields but to navigate and control all the websites and software on their device instead of a mouse or other device that operates a cursor.

Voice control software is used most often by people with limited use of their hands, verbal commands replace keyboard and cursor control inputs.

Standard browser controls are all 100% accessible by default.

Unfortunately, this is not entirely true. For instance, `select` elements and their options don't reflow in most browsers. It is true that the native elements are much more accessible than most alternatives developers create.

jevgeni3• 3 years ago

I am one of those people whose user experience will drastically improve if modal windows are accepted for what they are - an anti-pattern at best and a dark pattern most of the time. I as a user make the decisions if I want a separate window or not, not the application developer.

As a principle, I don't read any website that has a modal window, especially a modal "subscribe to our newsletter".

ebiester2• 3 years ago

Wrong use case. Think more like a web application where a modal comes up for more details and to edit details instead of going to a separate page and URL.

rayiner• 3 years ago

How about the fact that modal windows suck? There’s so many web apps that throw up a modal window—for e.g. editing an item—that prevent you from seeing anything else in the app or editing two things at once (because nobody would ever need that).

waboremo3• 3 years ago

The article doesn't agree with that, it actually encourages using modals for editing items.

myth20184• 3 years ago

This will worsen the UX more often than not. Guaranteed.

Experience shows that this is not the case, provided you keep load times as lowest as possible.

In business apps, this has the additional advantage of allowing users to share information among themselves by simply sharing URLs.

nicoburns• 3 years ago

You can make modals linkable too.

usrbinbash12• 3 years ago

This will worsen the UX more often than not. Guaranteed.

The article states very clearly the use cases for which modals make sense:

    Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity:
    
    - Alerts
    - Confirmation dialogs
    - Forms for creating/updating entities

As soon as something is a resource, that is, an article to read, a picture to watch, a diagram to open, a sound to play, in short anything for which it makes sense that it should be reachable via an URI, a modal is the wrong choice.

smeagull6• 3 years ago

And it's wrong about all of them.

Alerts don't need to stop the world.

Confirmation dialogs block examining the things that you want to confirm.

And forms for creating anything do not need to block access to the rest of the page.

horsawlarway2• 3 years ago

As soon as something is a resource, that is, an article to read, a picture to watch, a diagram to open, a sound to play, in short anything for which it makes sense that it should be reachable via an URI, a modal is the wrong choice.

These feel incredibly unrelated to me. Why does that matter at all for the display choice? A modal is getting used because it's a view into another section of the application that doesn't lose the current location of the user.

Further - users (and I mean normal paying users, not HN commentators) rarely ever give a shit about URLs. It's just not important to most people what the string of characters is.

So...

Anywhere you've got multiple steps to complete, or an adjacent resource that might be related and viewed/edited in the context of the parent resource.

Or a form is being filled in and a user wants to enable extras, which requires filling in a different form, etc...

The modal is about not losing the current place for the user. Because most current users don't use multiple tabs/windows for the same product, and they don't pay any attention to the urls.

"Dont open a modal" in cases where the user is likely going to get lost in a detour otherwise is bad advice.

mmis10003• 3 years ago

Modal sometimes also works as a peek view of a resource. As when there are many resource in a list, you don't want to open every one in a new tab.

In fact, you can make a link open modal with left click but open in new tab with middle click. I think it is the most balanced way in my opinion.

Modal and tab can co-exist. They are not really mutually exclusive.

BTW, social media websites generally implements this in their feed view. A image behaves different when you click it with middle or left click.

ablob2• 3 years ago

Depending on my use-case I strongly prefer a modal. A new tab would be highly disruptive, if I just wanted a glimpse over the content.

This is yet another instance of optimizing for something that can not be made perfect. Let me decide what I want. Give me the option to do both without much of a hassle. If a decision needs to be made regarding what should happen on a mouse-click, one may choose a sensible default (i.e. what is the most typical use-case), while leaving the option to configure the other choice.

You can always argue that many options are a non-goal, but any sufficiently sophisticated software needs training anyway. Configuration can be a part of that. Nothing is worse than a program in which the designer chose to make your use-case to be painful to be met.

Furthermore, a uri does not need to be bound to a view. In fact, one might prefer different ways to look at the same data.

dataviz1000• 3 years ago

If you are working with an single page app, you can open a modal window and change the href without navigation by calling `history.pushstate`.

``` history.pushState({}, "", "/new-url"); ```

Moreover, modals serve one very important UI purpose in that they keep the user's mind in a context.

smeagull6• 3 years ago

Every Modal window has me close it so I can access and refer to content on the page that it's blocking.

There's one kind of modality needed for computers, and it's the power switch.

_greim_• 3 years ago

Inclined to disagree. I once worked on a product that went all-in on modals for detail-views, and we ran into all of the problems mentioned in the article. It produced a constant stream of tickets, and at the end of the day the UX was indeed terrible.

ericyd5• 3 years ago

Respectfully, I think your first sentence could use editing. It isn't clear if you're agreeing with the author's statement (i.e. Don't use modals because it will result in worse UX), or contradicting the statement (i.e. Don't use a new page because it will result in worse UX)

andix2• 3 years ago

Modals can be a life saver, if you do server side rendered pages, because navigating back is probably slower than opening/closing a popover via Javascript. You may also lose some state on the previous view on navigating back, you may end up at another scrolling position (I know this can be prevented).

I prefer master-detail views. Like an Email client, where you select a message in a list and then see the body of the email. For smartphone sized screens this should switch to a detail page with a back button. Like the Mail app on iPhone/iPad.

Master-detail can be tough on server side rendered pages though. And you really need a good page structure, because you show a lot of data on one page and it can look cluttered quickly.

account42• 3 years ago

Navigating back used to be instant before pages became so bloated that browsers had to evict them from ram so soon.

ordu• 3 years ago

All complaints on the page are ultimately grievances against poorly thought-through implementations and as such they are rooted in the wrong thing. It's trivial to complement every modal window with a standalone version, in which case it's possible to bookmark them, middle-click on the links and what have you.

It is what is wrong with web-designers. They throw away existing browser features, like a scrollbar, and develop their own half-baked replacements, which work differently, they are probably incomplete realisation, and then I'm scratching my head trying to imagine a reason for all this work done by a developer: why to spend additional development time to make my life worse?

It could be a UX improvement, if it was not a modal window but a modeless one: it can help to compare details of different products by placing their windows side-by-side. Or I can right-click on a link and open it in a new window. But a modal window is a nightmare: I can move tabs into a separate browser window easily and to place them side-by-side. It is pain to do it with modal windows. One needs to clone tab and then to open modals.

0xedb• 3 years ago

Next.js 13 has a neat solution: parallel routes (https://nextjs.org/docs/app/building-your-application/routin...)

worldsayshi3• 3 years ago

I tried Next.js very briefly and I initially found this concept really nice. However I bounced back and gave up on the framework for some related reason. I felt like I gave up control to much, maybe due to the routing model. Feels like some common problems were made much harder because of it.

scrollaway• 3 years ago

I implemented it in a bookkeeping app I’m working on. It works nicely but the documentation is very poor; I had to constantly refer to a third party example.

Once you get how it works it’s neat.

qwertox• 3 years ago

Above all, please respect that a middle mouse button is supposed to open a link in a new tab.

worldsayshi3• 3 years ago

Oh, I always use ctrl click. Ditto.

Akronymus• 3 years ago

Too often, links are just buttons that navigate you to the url when you click on it. It just ignores modifiers.

It makes me furious

Alifatisk2• 3 years ago

And on mouspads or touch?

gramvoir• 3 years ago

On mousepad its the same same. If yours misses the middle button either switch to a real one (Thinkpad) or use left+right.

planede• 3 years ago

Three finger tap works on my machine.

tuyiown• 3 years ago

Note, I've been using trackpads exclusively instead of mouse since 12 years now, before that, I had a mouse with extra buttons that I used a lot, including the open in new tab middle click.

Not before reading your comment I had realized I never missed those extra buttons, or at least remembering missing them.

And I realize that while my implementation takes care of modifiers to open links in new tabs on my web apps, I always overlooked middle button.

The real problem though is that the web is very broken for building apps, and that the DOM API is missing a way to negociate the url changes on default clicked link behavior instead of the current «block event and update url» mechanism.

knallfrosch• 3 years ago

JavaScript:void(0)

chrismorgan3• 3 years ago

I have reached this resolution: <a href="javascript:void(0)"> is never acceptable. If you have no reasonable value for an href, then you shouldn’t use an <a href> element, but probably a <button>.

As for <a href="#">, it’s in the same boat, with the sole exception of jumping to the top of the page.

chrismorgan3• 3 years ago

And the only way to achieve this is by having the mouse interact with an actual link element (HTML <a>, HTML <area> or SVG <a>) with a meaningful href.

A few times I’ve encountered sites trying to be clever and detect Ctrl+click or middle-click and use window.open(), but this doesn’t behave natively: natively, middle-click or Ctrl+click probably open in a background tab, but open() opens a foreground tab, which will always be disruptive for people that use this stuff much, and sometimes infuriating.

This isn’t the only reason for having real links; there are also things like status bar text on hover, and context menu on right click or long press, which may include options like Open Link in New Private Window that cannot be emulated in any way.

If you want to intercepting link click events, you must check if the click is modified in some way like this:

  if (event.button || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;

Note that middle-click fires an auxclick event instead of click, and right-click fires contextmenu first and then auxclick if that’s preventDefaulted.

ziml77• 3 years ago

Maybe this should be supported by browsers though. The main place where I hate not having modals is when filling out forms and checking for a slightly expanded explanation about what is expected to be filled into a field. What would be the best behavior for those is if a click showed something inline and middle click (or right click -> open in new tab) opened a new page with the correct tab focus behavior.

jonwinstanley• 3 years ago

I remember these days. Unfortunately I’ve not had a middle mouse button for a lot of years

slig• 3 years ago

When I was on a mac, CMD + Click worked fine.

cypress66• 3 years ago

It's insane that this has been broken in Twitter for so many years (when trying to open a tweet).

efitz• 3 years ago

People who implement modal windows are antisocial. And, there is a special place in hell for people who implement system modal windows.

GoToRO• 3 years ago

It happens like this: some manager just wants a simple modal to show some details (see, he is not just a failed developer, he knows words, like modal). Do we need it to have it's own url? No. Do we need to edit the data? No! Just a simple modal! Why are you asking all these questions?

The thing gets implemented and the users like how fast the data is shown. But can we just add some action buttons like Accept and Reject instead of the Ok button? Why close the modal and then hit an action button when you can have them right there?

The buttons get implemented, the users love it. Manager comes back, but can we edit one or two fields? Sure. Some of the fields will open a modal to let users select the value. Should we reimplement it as a regular page so we don't have a modal in another modal? Manager: No, that will take forever. Validation, error messages, scrollbars?

The manager refuses to fix it because he burned through all the allocated time and he doesn't want to have a difficult discussion with the stakeholders. And anyway, in these meetings the developers are not invited and he can just blame the developers because everybody knows how entitled they are.

nologic01• 3 years ago

The Treachery of Modals: Ceci n'est pas une page

amelius• 3 years ago

Yes. Why does nobody use alert() anymore?

ExtremisAndy• 3 years ago

I always use it while developing a new web app, but admit that I always switch it to something "fancier" in production, mainly because I find alerts rather ugly. But, goodness gracious, it would simplify so many things! I've just sort of assumed that default browser alerts were considered a big no-no these days, but that assumption comes from the fact that I simply don't see them being used much. I guess I should look into this more. Sure would shorten dev times!

tobr• 3 years ago

Counterpoint: This is a little like arguing that you should use GOTO instead of call stacks. Like a function call, with a modal you keep your place and know you will be able return to where you were. No risk of getting lost.

Linking to a separate page is like GOTO control flow. You leave it up to the user to figure out where to go from there, but the user usually doesn’t know the full sequence of steps that are part of a task. It’s your responsibility to guide them.

ab_goat• 3 years ago

I used to feel this way and would make everything linkable, but then I realized that modals are really good at preventing users from getting lost by adding context instead of swapping context.

For example, a user may want to edit a few items items in a list Rather than forcing the user to a new page to do each edit, you can pop up a modal and edit in place. With new pages, the user loses the context of the original list. The page swapping is very disruptive.

kypro2• 3 years ago

There are normally better approaches to a modal popup.

In this case I'd consider expanding the item on the page when preforming an edit. That way it's clear to the user they're on the same page so won't be tempted to click back and you won't need to worry about confusing keyboard / screen reader users.

Alternatively if you absolutely need to use a modal consider a slide out instead. Slide outs tend to look less like new pages and reduce the likelihood of a user clicking back to "go back" to whatever they were previously looking at. With a slide out the original content is still in view, but now you have some extra options to the side. You still have all the accessibility issues of course, but the UX is slightly better most of the time.

e1g• 3 years ago

I reached the same conclusion: modals are excellent at helping people quickly dive into multiple items on the list while keeping their main mental context in the listing view. I call it "Hummingbird mode" - zoom in, zoom out, jump around.

For example, you are running a project review meeting and want to quickly jump between tickets on the kanban board. Your main business context is the entire board (you might have filters/sorting), and you keep a mental record of where interesting tickets are placed on the screen. However, during the group discussion, you need to quickly jump into an individual ticket to reassign it or scan through comments for 5 seconds. In this case, using a modal to show ticket details is preferred to redirecting to a separate 'details' page because it does not scramble the user's context and their mental model about what's on the screen. Of course, the UI still should support cmd+click to open a full page dedicated to that ticket, but that's a 10% use-case.

l5870uoo9y• 3 years ago

I concur. I think this page[1] illustrates it quite well.

[1] https://gwern.net/index

EnergyAmy• 3 years ago

That's actually a super weird implementation. I can hover over a link and open a modal preview, and then hover over a link in that modal to open another modal, ad infinitum. I ended up with 20 modals covering the page, and then moved my mouse a little too much and they all disappeared at once.

Also, if you click on something in the modal, you end up getting redirected to a new page anyways, which kind of supports the anti-modal argument.

OTOH, I like Wikipedia's hover previews just fine, so sometimes they're OK.

js8• 3 years ago

The worst modal window is the save dialog in Firefox. Often I need to see something in the page to put into filename, and the save dialog blocks it.

aendruk6• 3 years ago

A few years ago GNOME started doing this all over the place. Modals are spatially coupled to the parent window so moving the modal moves the parent too. Drives me crazy that I can’t refer to the information underneath.

smeagull6• 3 years ago

GNOME is a lost cause. Once they started shadowing keybindings from readline they failed at UX.

yawnxyz• 3 years ago

If your page loads are slower than 200ms, I'd actually suggest having modals. Or at least some way of progressively showing more information (toggles, accordions, etc.) that stay on page.

SPA page loads can get really slow, which can frustrate or disorient users. Having too many page loads to sequentially drill down your info architecture can get really annoying for users. If your pages are 1 or 2 layers deep in your architecture, and the rest is shown in some way within the page (again, modals are one way to do it), as a piece of "fleeting information", your users will appreciate it.

arghwhat3• 3 years ago

For an SPA, there is no difference in loading time between a modal and non-modal view. The (annoying) SPA penalty is initial page load, which is a one-time cost.

The location changes are virtual through the history API, with a reload just causing the SPA to start from that location instead of from the root/home view.

thecopy• 3 years ago

there is no difference in loading time between a modal and non-modal view

AWS Management Console begs to differ:)

quickthrower23• 3 years ago

Jira has slow loading modals

EduardoBautista• 3 years ago

Modal windows can't be bookmarked or shared as links.

Modals can definitely be bookmarkable if they are dependent on a certain path or query param to appear.

dvh• 3 years ago

Yes I do. Not every software is cathedral built on a green field with unlimited budget. Sometimes you just need to smack an alert() or confirm() or prompt() in the middle of code and move on to more important stuff.

aembleton• 3 years ago

Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity:

    Alerts
    Confirmation dialogs
    Forms for creating/updating entities

NavyG• 3 years ago

Modal windows can't be bookmarked or shared as links

We use modal windows specifically for this reason (for our payment application's checkout page).

Also using a modal significantly improves the checkout experience in case of SDK flows for payment methods like Klarna, Google pay etc.

Personally I feel modal windows are better aligned to the user's flow of attention. We also have redirection flows for these payment methods to open the authentication page in a new tab but we pick the modal flow ever single time for a better experience.

You can get a feel of what I'm talking about over here: https://demo-hyperswitch.netlify.app/checkout

sureglymop• 3 years ago

Modal Windows absolutely can be shared with a link if done well. Open the modal as an overlay and set the url with javascript. Then also have a noscript tag which contains a link to that (modal) page. On the server side you just need to make sure that you can render that page and serve it. This is pretty much how imo. modern SSR frameworks like sveltekit are intended to be used. Of course if non-js users aren't a concern, you can do this with an SPA too, the client side routing just needs to be programmed right and the server needs to serve the bundle correctly.

Gabrys1• 3 years ago

Last paragraph says this:

Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity: [...] Forms for creating/updating entities

Wow, in my opinion this a perfect example where a separate page IS still superior to a modal: how much better a "create issue" jira PAGE is vs the modal?

deniz-a• 3 years ago

If users are expected to spend a long time and use many tools to compose something, then I agree a full page form is best. For something like adding to a todo list, or where users are expected to add many items one after the other, a modal is better.

You can also take a hybrid approach: many calendar apps have a small popup for adding an event that the user can expand into a whole (nonmodal) window for editing all the details.

physicsguy• 3 years ago

The issue is that as web software becomes more and more complex and desktop-esque, it needs features that were common in desktop software. It's a poor user experience to open a new window for lots of things in the browser, but that sort of functionality is still needed sometimes.

If I think about the engineering product I work on and where they do have modals, none of them would work with a separate page. It's things like "Load one or more of your saved graphs (which you can search and filter) into this existing page of graphs"

kypro2• 3 years ago

Modal windows are hard to get right. The "final boss of accessibility"

Lmao, I was making this point at work yesterday. It's really difficult to justify using a modal if you care about accessibility. It's not that it's impossible to do correctly, but even when it's done "correctly" it can still be confusing for users navigating with keyboards / screen readers. So modals are almost always either too much effort to do right, or just not the best approach.

Another thing I'd add to this list is that there are some people who browse without JS enabled. I know it's unpopular to care about those folks these days, but it is another reason to avoid modals where possible.

lelandfe3• 3 years ago

I would like to care about JS-disablers, but it is a disproportionally large amount of work for something a few people are choosing to do.

I try to give it a best effort, but won’t e.g. rebuild a menu as an HTML checkbox just because some folks are hardliners about running Javascript.

tvararu• 3 years ago

"Everyone has JS, right?"

https://www.kryogenix.org/code/browser/everyonehasjs.html

pavlov• 3 years ago

Modals and accessibility was a completely solved problem in 1990s desktop UIs. If anything modals were considered the “easy mode” of UI design. (You can see this in applications like Photoshop that retain some of the original early ‘90s modal-centric design.)

It’s crazy how much the web platform’s lack of UI expressivity has set us back. Everything is constantly getting desperately reinvented out of a handful of text markup tags cobbled together by scripts, but it doesn’t solve any of the underlying issues.

paulryanrogers• 3 years ago

Are you thinking of SDI?

lcnPylGDnU4H9OF• 3 years ago

The dialog HTML element[0] obviates the JS point but I don’t think it’s available in all browsers. I think there are still many considerations with this approach but many things also work out of the box.

[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

lelandfe3• 3 years ago

It's been widely available since 2022, when Firefox and Safari landed support https://caniuse.com/dialog

waboremo3• 3 years ago

They really aren't too much effort to get right, not anymore. Dialog element exists and by default handles most considerations when it comes to accessibility.

Also, you're going to have to create modals eventually, alerts are needed in most applications so you might as well create a thorough component.

Avoiding modals because of those who browse with JS disabled doesn't make much sense. Especially when they can temporarily enable on your site, as disabling JS for security reasons would mean they trust your site if they're still using it enough to reach a modal. You can still create fallbacks, but they'll be ugly considering most modals are for nested form changes or alerts.

jcmontx• 3 years ago

Bootcamp React developers discover MPAs

jasonlotito• 3 years ago

Modal Windows: If you put up a modal window, and it blocks content beneath it, and I can't at least move it out of the way, then it 100% is anti-user behavior. There is NO good reason for blocking the user from seeing content that might be relevant to the modal window. This is true for both websites and apps.

Compare Safari's Open File to Chrome's Open File. Chrome's Open File modal cannot be moved. Safari's can.

If you have a modal, and it blocks content, you have to be willing to say "I want to prevent my users from seeing this content while dealing with the modal. The content that is being blocked is not important, and it serves NO purpose."

vaylian2• 3 years ago

Modals disempower the user. That's why they are so popular with mandatory Cookie selection dialogs.

quickthrower23• 3 years ago

I was thinking this today as I was using JIRA. I would live JIRA to be a boring and more RESTful web app.

I hit a bug where if I closed the popup (for a ticket on a board) it just reopened! And some ticket links don’t work. All these bugs and complexity for what?

Maybe the browsers should have a built in “open link as popup” for the rare times you want that. And the sites just make it a new page always.

dan-robertson• 3 years ago

I think Jira performance already seems to be dominated by roundtrips to the servers. Making it more like what you describe may make it even worse.

quickthrower23• 3 years ago

Yeah they need to sort their app performance out.

That said the modal load is just as slow.

rjh29• 3 years ago

Is it annoying that issues open in a modal by default, I then need to click the issue name again to make it open in its own window.

floatrock• 3 years ago

Counterpoint: changing a jira Issue into a Bug takes me into three intermediate pages of changing details, most of which are empty because they're overengineered for a board configuration that only the highest-caste jira priests would ever actually use. And then after the final Next button it takes me back to page that isn't where I even started.

Just pop up a modal and reload the Issue/Bug state when done.

spaceman_2020• 3 years ago

I disagree. Modal windows are great if the information is small enough that it can be digested in a single glance. Making me open up a new tab to view a paragraph of text is just plain annoying.

vaylian2• 3 years ago

Then just create a new <div> that shows the information inline.

ThatMedicIsASpy• 3 years ago

I click on the examples and it throws the page back to the top.

I refuse to read anything that is said after the example being useless.

projektfu• 3 years ago

THANK YOU OMG

I have lots of frustration with modal views that: 1. block me from seeing the things that I probably need to enter into the view 2. disappear when you accidentally click outside them 3. don't scroll properly 4. don't allow scrolling of the page behind 5. don't play well with reasonable browser extensions (uBlock, but other things as well like Disconnect) or even the tracking prevention build into browsers. 6. store data in a weird place so that a second window of the same site in a different location opens the same (now incorrect) data in the modal.

These things are becoming super common in line-of-business apps, where they interrupt workflow. Better options:

1. New page, as recommended by this link 2. Expanding a region of interest to allow the form to fit 3. Making the page more interactive in other ways so that a modal doesn't seem like the best way to do the interaction

dadalorian• 3 years ago

Ironic that the popover API was just announced 2 days ago. https://developer.chrome.com/en/blog/introducing-popover-api...

000ooo0002• 3 years ago

youdontneedadomainforyouronepagepedantry.com

000ooo0002• 3 years ago

Cheap shots aside, this was a very unconvincing set of arguments. Would it have not been a better use of ones time, both the author and reader's, to have documented both the pros and cons of modals instead of this lame, "trendy", You don't need takedown?

DonHopkins6• 3 years ago

you-do-need-dashes-between-the-words-in-the-domain-name-of-your-one-page-pedantry-because-then-you-can-clearly-communicate-your-message-without-actually-requiring-people-to-click-on-the-link-or-even-bothering-registering-the-domain-or-putting-up-a-web-site-unless-of-course-you-are-just-publishing-click-bait-to-sell-ads-in-which-case-fuck-off.com

marcofiset• 3 years ago

Phoenix LiveView handles all of those concerns extremely well and pretty much for free. All of my modals are tied to a live action in a given live view. You can bookmark them, use the browser back button to close them and the state "under the modal" is a complete non-issue. It's just loaded as part of the live view and a modal is shown only on specific actions.

That may sound like gibberish if you're not familiar with Phoenix LiveView, but it all makes sense and it just works.

nicbou3• 3 years ago

What are good alternatives? I like <details> and collapsible panels.

DonHopkins6• 3 years ago

We use too many damn modals (2018) (modalzmodalzmodalz.com)

https://modalzmodalzmodalz.com/

MODALZMODALZMODALZ.COM

We use too many damn modals. Let's just not. Help
The bad news: Modals are the crutch of the inarticulate designer and developer. [...]

https://news.ycombinator.com/item?id=23645447

bedatadriven on June 25, 2020 | next [–]
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.
I seriously can'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 do care about.

chakintosh• 3 years ago

As a UX designer, I wholeheartedly disagree.

Modal windows can't be bookmarked or shared as links

Why would the user want to bookmark or share a "modal". I believe the author is confusing a modal with a details page (a customer's details page in a CRM for example) on that we can agree that that kind of content is best shown on a separate page. A modal serves a specific function within a web page, be it a website or a web app. Its main function is to allow the user to perform certain tasks within a page, and those tasks will immediately reflect on the underlying page upon submission (or validation/confirmation ..etc). So I fail to understand why the author thinks a user would want to bookmark that modal.

Modal windows can't be opened in a new tab

Nor should they. Modals, as mentioned above, are one layer above an underlying page, and they either show complimentary information related to an element within that page, or they allow to user to performa task. So they should inherently be accessible within the same tab, not a new one.

Modal windows make the Back button confusing

Aside from the Close/Abort button inside the modal, a lot of interaction designers and front-end developers are now developing the modals in a way they would close if you press the back button of your browser. No confusion there in my opinion.

Modal windows are hard to get right[...]if you need to support older browsers, good luck.

Can't find the date this article was published but I assume it's old because almost all new browsers support at least <dialog> element [1]

Modals are a double edged sword, like any UI component or UX pattern really.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

Further reading: https://www.nngroup.com/articles/modal-nonmodal-dialog/

monooso2• 3 years ago

I believe the author is confusing a modal with a details page

It sounds like you agree with the article, at least according to my reading.

The author states that you should not use a modal for something “bookmarkable”, such as a details page.

They also state that a modal is suitable for performing an action that does not warrant a “resource URL”, such as a “create resource” form.

teawrecks• 3 years ago

The author's thesis is "you don't need a modal window", which the post you responded to fundamentally disagrees with.

twic• 3 years ago

Why would the user want to bookmark or share a "modal"

Because the modal contains specific information they want to come back to, or share with others.

I believe the author is confusing a modal with a details page

The problem against which the author is invecting is precisely the use of modals where details pages would be appropriate.

Cthulhu_2• 3 years ago

Basically I get the impression that the author has a pet peeve of modal dialogs being abused as detail screens, that is, whoever did the UX was doing a bad job. I haven't seen a modal dialog used to show details in a long time, so I guess I'm sorry the author had to experience it.

micromacrofoot• 3 years ago

Modal windows can't be opened in a new tab
Nor should they

How about you stop making decisions for me. I very often want to open settings and other various dialogues in a new tab or as a saved bookmark. This is especially useful in customer support (which is a concept a lot of startups are unfamiliar with, to be fair). You are unaware of every use case, so choose standard browser behavior when possible.

ibejoeb6• 3 years ago

Why would the user want to bookmark or share a "modal"

I think you and the author are making the same argument. I'm sure you've encountered one of those everything-is-a-modal apps and thought "I sure wish I could link to this part of the app but I can't." Then you'd wish you could bookmark the modal.

I use one every day. An example: to edit a user's account information, I go to the accounts interface, open the filters modal dialog and supply the criteria, and them I'm presented with a list of matches. I select one, and it opens the account information in modal dialog. None of those intermediate states are addressable in any way, so it's a real chore to ever access any resource, and I certainly can't share a link with someone else. This is a truly bad experience directly because of its abuse of modal dialogs.

bengale• 3 years ago

For bookmarking or opening in a new tab you can do that reasonably easily now anyway: https://nextjs.org/docs/app/building-your-application/routin...

ericyd5• 3 years ago

a lot of interaction designers and front-end developers are now developing the modals in a way they would close if you press the back button of your browser. No confusion there in my opinion.

I'm not sure how this justifies your opinion. The fact that "a lot" of people are following a new design paradigm indicates, to me at least, that the pattern is inherently confusing. As a user, do I know what paradigm was used by the design and engineering team? If not, I'm going to be unsure about the effect of clicking "back"

HL33tibCe7• 3 years ago

I guarantee this was written by somebody who has never worked as a professional UI/UX designer

It’s the kind of bold, blanket statement that sounds really great and is a fun opinion to hold, but when confronted with reality crumbles (as many statements of that kind do).

zuprau2• 3 years ago

somebody who has never worked as a professional UI/UX designer

Such as the Nielsen Norman Group.

"Do not use modal dialogs for nonessential information that is not related to the current user flow."
From https://www.nngroup.com/articles/modal-nonmodal-dialog/

Nonessential information such as, let's say, "details."

I'd say that this minisite is exactly on point.

ptx2• 3 years ago

I think the author's objections can all be addressed by using history.pushState() and treating the modal window like navigation to a subpage/route (in an SPA-style app). This way the modal will have a URL, so it can be bookmarked, can be opened in a new tab (if it's opened through a link) and the back button will work (closing the modal).

roblh• 3 years ago

This works, except when it doesn’t. I’m not sure about react, but Vue router has some funny and unintuitive interactions when you do this which will often result in unnecessary page reloads, either when you push state or when the back button pops it again. Maybe react behaves better but my experience with it has made me not want to directly mess with history unless I have a particularly good reason to.

ptx2• 3 years ago

It seemed to work well in Angular in the tiny app where I tried it, but to be clear I didn't directly mess with the history API – I used the navigation mechanisms of the Angular framework to manage this. Calling the browser history API directly could probably confuse the framework.

aflukasz• 3 years ago

and the back button will work (closing the modal).

Which opens a whole new can of worms!

What is the meaning of pressing "back" when modal window is shown? Is it "cancel"? What if I already changed something within the modal? What if "back" causes losing some input within the modal? Should we... show another modal for confirmation of going back?

Same with navigation via "back"/"forward" into a modal (which is now present on the history stack) - if this was modal with some action... can I execute it again? Did I just execute it by navigating into it?

nfRfqX5n• 3 years ago

I've seen tons of feedback directly from customers which indicate the opposite, losing context is super annoying

layer82• 3 years ago

That's orthogonal to modals.

sowbug• 3 years ago

In defense of those customers, the back button has become a game of Russian roulette. Most of the time it takes you back to the page or UI state you were on. The rest of the time it breaks the JS, takes you to an awful "before you go" page you never navigated to, displays the mysterious "confirm form resubmission" dialog, or in the case of the infamous Treasury Direct site, marks your account as disabled until you perform a new kind of corporeal signing ritual that your local bank branch manager has never even heard of but apparently must now perform with you.

It's sadly reasonable not to expect users to trust, or even try, the back button.

myth20184• 3 years ago

I would expand my criticism to elements such as material design drawers and similar ones. Regardless of the support provided by the platform (`<dialog>`, convenient APIs etc), you may still find yourself fighting with the resulting state -- for instance, when the screen must adjust its behavior and/or content according to dialog's content or state. The requirements in such situations can get overwhelming quite quickly.

Because it looked good in the mockup

Indeed, tools like Figma can create a dangerous illusion of simplicity. I wonder how much time and effort has been wasted during the actual software development process, despite the initial, marginal savings in mockup design.

One must also take in account that the hourly rates for developers are typically higher than those of UI designers, so that it doesn't make much sense to increase productivity of the latter at the expense of the former.

micheljansen• 3 years ago

... for pages!

Modals are often fine for dialogs and fleeting interactions that happen within the context of the page you are on. Those often don't need their own URL. Don't need to persist after a page refresh, shouldn't be shared, confusingly pollute browser history and benefit from instant loading.

I mostly agree with the author in their examples. If it walks like a page and it talks like a page, it probably should be a page. No need to throw the baby out with the bathwater otherwise.

gwbas1c• 3 years ago

From TFA:

Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity:

- Alerts

- Confirmation dialogs

- Forms for creating/updating entities

revskill• 3 years ago

Written by a confusing developer who love to reinvent the wheel all the time.

motoboi• 3 years ago

I like the azure portal solution, where everything opens in a modal, in the form of a panel. When the link is followed, the panel opens as the main window.

jmbwell• 3 years ago

Commenters may wish to note the last section of the article:

Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity:
Alerts
Confirmation dialogs
Forms for creating/updating entities

j3th9n• 3 years ago

I want it to close when I click outside of the window.

mbostleman• 3 years ago

I hate separate pages because I lose all the context in the background. More often that not, I find myself needing info from the main page and often have to go back to it. Same thing happens on modals that you can't grab the title bar and drag it around.

prmoustache• 3 years ago

That is only a problem on mobile where you can hardly have 2 windows open on the same screen. But then modals suck on mobile too.

davidthewatson• 3 years ago

The whole subject of modality in design is a long story but the short story is that we should not mistake the need for ease of implementation with the need for clarity of design. They are orthogonal.

There is no question that a design gets easier to parse for users when it is serialized by modality. Likewise, serialization is dramatically easier for implementors since it eliminates the need for concurrent execution.

Context matters. Those choices have strong historical reasons for their existence in operating systems and their user interfaces. However, they have little place for being emulated on the web.

Why? Because they give rise to all manner of bad implementation such as the fact that linking structures have not grown at the pace they should have, particularly as it relates to documentation.

All you have to do is look at Amazon's constant proxy to "click here, click there" as a sad excuse for why HCIs don't scale at the same rate as APIs and you can condemn a large portion of the last two decades of design on the internet since these patterns have been copied ad nauseum but only exist because we've employed tools that automated their creation when a link has always been worth a thousand words of "click here, click there".

REST applies to HCIs as much or more than APIs.

dncornholio• 3 years ago

Disagree, you can put the info in whatever box you want.

Just make it so that you can copy-paste the URL and you will see the same page with the same modal openen.

mrpelz• 3 years ago

1. you can certainly implement good user interface accessibility in both page-based websites and single-page applications, the latter requiring time, knowledge, and proper prioritization within the project

2. once again, there is a failure here to recognize which use cases are best served by a website (i.e., a set of web pages that use native browser navigation) or by a single-page application (which takes native UI paradigms such as multiple windows and modals and implements them using web technologies)

3. blanket criticism for single-page applications often comes from people who have no real understanding of web development and harbor nostalgia for the "good old days" when browsers acted only as display devices for server-generated HTML strings; those people aren't worth arguing with, I don't have time for them, I'd rather spend my time improving web technologies so that more people can implement applications that feel "native" yet work across different architectures, devices, screen sizes, languages, and writing directions, built on top of a platform that is privacy-centric by default, and not controlled by a single company

jrochkind1• 3 years ago

"To compensate for slow page load" is probably my main use (still rare), and, hey, sometimes you've got slow page load.

Another reason might be to avoid losing state on the underlying page.

If you have a "SPA" style app, it might obviate both of these reasons. In an SPA app (ideally one with good URL and back button behavior of course) the difference between a modal window and a separate page perhaps becomes _only_ one of UX, which presentation is better?

But in a more traditional server-side-rendered app with minimal UI-focused JS, other considerations still exist which are legitimate, it seems to me.

konha• 3 years ago

In an SPA app (ideally one with good URL and back button behavior of course)

Those are rare. So much easier to mess up than to match native browser UX.

notatoad2• 3 years ago

This is one of those things that sounds good when presented like this. But it's just the opinion of some guy.

Run it through user testing and see how your users actually react to new windows being opened all the time. A lot of them are going to be confused, and not be able to make it back to your site. Modals are popular because they work

padjo• 3 years ago

I think they’re saying you should use a new “page”, not a new window.

notatoad2• 3 years ago

sure, that works if you can use a new page. but usually if i'm throwing up a modal, it's because i need to preserve some context on the existing page that might be lost by navigating away from it. so the choice is a new window, or a modal.

and at least in my use, the modal is always the better choice there. especially since the advent of <dialog>

davedx• 3 years ago

Forms for creating/updating entities

Sprinting along delightfully, getting everything right, every piston firing... then falls on face at the last hurdle.

No, don't put forms in modals, gah!

1337shadow• 3 years ago

When external pages can show in modals or separately because you are using Unpoly.js then it's perfect

ibejoeb6• 3 years ago

It seems like a lot of people don't really consider what it really means to be "modal," and when it comes up, I describe it something like this:

A modal is not, in itself, an overaly, window, frame, etc. Generally, it really shouldn't even be used as a noun. Modal describes the state of the interface. Most interfaces allow for multiple user interactions originating from the broader interface, i.e., it is multi-modal.

Sometimes, it is necessary to put the UI into a single-purpose state, so, in a single mode. This is required when two interactions can interfere with one another. When one interaction must not be interrupted by another, we must go modal.

The author seems to be chiefly complaining about unnecessary modality and the way that gives rise to clunky UIs that don't allow for things like linking. That's rooted in conflating on-screen, 3D elements like overlay dialog boxes with the concept of one of some interface being modal. An example of this would be an interface with a item list that, on item selection, conjures a modal overlay dialog box with the item details. In the base case, there is no dependency problem here, i.e., it's an entirely acceptable design to allow a user to view the details of two items at the same time, and therefor it doesn't call for a modal detail interface.

ericyd5• 3 years ago

Modal is a common term for a UI element, as used in the site. I'm not saying you're wrong, per se, but I think you're missing the point, or perhaps missing context into modern UI design terminology

ibejoeb6• 3 years ago

I'm willing to hear your argument. I could have done without you telling me that maybe I'm just out of the loop, because there's a point to be made here. But let me entertain the notion.

What is a modal?

marcosdumay2• 3 years ago

The author and most people here are using "modal" with a very common popular meaning where the word is a short form of "modal window".

You are confusing it with the much less common but technically accurate meaning in UI. So you are just confused by terminology, and even though it would be better if people stick to unambiguous words, they are talking about something well defined enough that discussing terminology isn't useful.

ibejoeb6• 3 years ago

Right. And, in my opinion, we get exactly the bad UI described because it became common to conflate "modal" with "overlay." That's the way the UI kits implement it, and as the author states, it makes people reach for that because it's what's available.

nonethewiser• 3 years ago

Modal windows can't be bookmarked or shared as links. Deep linking can be added to modals, but it's complex. What will show up in the background when the link is followed? How much application state needs to be restored? How will the user be confident that it will work?

Why is there a completely untested assumption that everything should be linkable?

asynchronous• 3 years ago

While I agree with the author, I can’t actually think of an example where a modal is being misused in this context? Every application I’ve worked on with a ‘resource detail’ component had a open in new tab hyperlink.

throwawaaarrgh2• 3 years ago

ThisIsAShittyClickbaitArticleWhyIsItAnEntireWebsite.dev

derekzhouzhen• 3 years ago

I'd even argue all html modals are bad designs; including alerts, forms, and confirmations. HTML modals are poor emulations of native dialog boxes; they try to address rendering performance problems that no longer exist.

corry• 3 years ago

The article seems to pay scant attention to THE main reason modals make sense to me: they allow for a discrete bit of work to be completed within the greater context of the app, without losing state or position.

Loading a new page, new tab, or simply navigating fully away to a new editing screen are all pretty heavy disorienting actions for something that could be pretty light.

But it's related to the amount of work being done in the modal.

For a very small amount of work (e.g. editing a single text field), inline-editing would be best; for a lot of work (e.g. composing a bunch of textboxes and including other data, etc) a dedicated page is best.

A modal belongs somewhere in-between - editing a few things at once, in context of other things.

"Can this modal be an inline-edit?" <-- first question I'd ask. If the answer is No:

"Will the work being done on the modal take more than 2 minutes to do?" <--- then I'd consider a separate page.

But things in-between seem perfect for a modal.

ericyd5• 3 years ago

No disagreement. In my experience though, modals are used in far too many places. I think if your criteria were applied diligently to every design, this site (and the motivation behind it) wouldn't exist

hombre_fatal9• 3 years ago

I'd go even further and say that modals make sense in almost any context where there's some underlying state whether it's a game, form, or even just scroll position in a forum thread.

And I don't see why the modal needs to be limited to quick jobs like inline edits. It could be the place where the bulk of the tasks are done.

Modals done well can remove anxiety and uncertainty from the user.

One example that comes to mind having just bought plane tickets is that the plane ticket flow could be an underlying all-on-one-page UI (flight -> seats -> payment) where each section opens as a form modal on top of that state. You can close modals, open previous sections, edit completed sections, where the modals communicated that you're not losing state by navigating between forms. One of the best UX aspects of the modal is seeing the underlying state behind it and behind able to click out of the modal to return to it.

Meanwhile, when buying tickets 30 min ago, the airline website had a sequence of pages where, I found out, going back to make an edit on a previous page reset the state of the subsequent pages. Obviously they could improve that without modals, but modals communicate state preservation by their nature.

Modals get too much hate just because they can be done poorly. Most UX is done poorly and that's not a reason to wash your hands of it.

ricardobeat5• 3 years ago

Your example doesn’t suffer from, for example, not being able to bookmark a step in the booking process. At the end of the article, “forms to update/create entities” is specifically mentioned as a valid use case.

GoblinSlayer2• 3 years ago

It makes sense to reset seats when you change flight, it's domain logic, not interface logic.

93po• 3 years ago

just scroll position in a forum thread.

but then you can't reference the thread without closing the modal (and likely losing all progress)

Brian_K_White3• 3 years ago

The article is not inconsistent with this.

fzaninotto• 3 years ago

100% agree. Check e.g. this UI for moderating product reviews:

https://marmelab.com/react-admin-demo/#/reviews

When clicking on a review, the detail appear on the same page. This allows to quickly browse through reviews, and preview some before doing batch edition. It's super effective.

Notice that you can bookmark any review detail, too.

The article should have been called "I dont need a modal window".

Semaphor2• 3 years ago

Check e.g. this UI

That’s not a modal window, though. Modal windows are overlays [0] over the main page, here it’s to the side.

[0] https://en.wikipedia.org/wiki/Modal_window

krainboltgreene• 3 years ago

they allow for a discrete bit of work to be completed within the greater context of the app, without losing state or position.

Literally in the example the modal covers 100% of the view state. Most modals cover a big portion of the state.

andix2• 3 years ago

I hate them, but our UX designers use them everywhere. I try to fight back, but their "usability studies" always comeback in favour of modals.

I really don't get it. We're doing mostly SPAs, so any back-button would be as fast as closing the modal.

bob1029• 3 years ago

I mostly agree with this. I've been refactoring some "modals" that have 30+ fields. Ultimately, I prefer the idea of subdividing a gigantic web app resource into smaller pieces whenever it isn't entirely catastrophic for the UX. For example:

  /MyResource/123 (all operations happen here as various "Modes")
  
  vs
  
  /MyResource/123/View
  /MyResource/123/Export
  /MyResource/123/EditPropertyA
  /MyResource/123/EditPropertyB
  /MyResource/123/Delete
  etc...

This doesn't work for all things, but I mostly build internal admin dashboards when I am doing web development.

One other benefit to using full routable pages for your various views is that you can subdivide the work a lot more easily. Assuming you have some common layout/style system (which you absolutely should), you can realistically part out the dev work at the grain of a URL at a time. We still have a few modals, but they are all of the "confirm scary operation XYZ" variety.

KevinChen6• 3 years ago

I think whether to use modal window or not should be case-by-case basis. I once refactored a web application for a data analysis platform using a front-end framework that I developed myself, and many of the prompts and information display functions in this framework are implemented through modal windows. When we showed the system to customer, we still gained a little acceptance. Of course, this internal private system doesn't need to do SEO optimization and indexed by search engines, if there is such a demand, using modal windows may not be the best way.

usrbinbash12• 3 years ago

You don't need a modal window

You don't need most of the cruft that clutters "modern" webpages. While not solely responsible, ever more "clever design" has certainly contributed to the status quo, where we load upwards 30MB of garbage to display <10 lines of information.

hk1337• 3 years ago

Like with a lot of things, modals get overused then people get sick of seeing modals everywhere and go anti-modal. Bootstrap probably helped contribute to that.

Modals have their use and function. Don't overdo it and maybe even provide non-modal options in addition to the modal.

zuprau2• 3 years ago

Preach.

You don't even necessarily need to place it in a new page, probably you can just expand it inline.

Most modals are just lazy.

"Where should I put this piece of UI/information?"

"Just place it above everything else."

With SPAs you don't even have an excuse that "a full-page reload will take longer" because you can change the whole page/layout instantly.

gloryless• 3 years ago

Most of this post is trying to declare rules that just aren't true. Even Asana will deep link a modal, it's just another piece of state in the url

zethus• 3 years ago

A part of me wishes the "Bonus: RESTful UI" section at the bottom opened a "Coming soon" modal

ulrischa• 3 years ago

Plus: Not accessible

b1nj0y• 3 years ago

A stupid post

Don’t open the details in a modal window, have it be a separate page

Related Stories