What's your opinion of modals? I need feedback!

[Kie]

I'm curious about other webmasters' opinions on modal boxes! For context it's those pop-ups that pop up when you load into a site or click a button.

I've seen a lot of sites having cool landing pages, and kinda wanted one of my own. So I thought... why not a modal box? 
But now that I made one I realized it might be annoying to deal with. Noone enjoys having a pop-up shoved in their face...

Here's a link. Would you guys mind telling me your (honest!!!) opinion on it? And on modals in general?

[tarraxahum]

I think yours looks so organic in the context of the overall website that it doesn't feel annoying or "shoved in my face" at all! Got more of a, I'd say, visual novel feeling to it, like when the choice box pops up 'cause you've reached a plot point or something. Or like one of those old-school text-based RPGs where all your choices are text. Very fun, love the idea.

Although I can't say I have any beef with such pop-ups in general, unless they're ad spam of course.

[glitchlynx]

I like it!  I think pop ups are annoying when they distract from the content of the site, or make it difficult to get to the thing I am trying to read, but in this case the pop up is part of the site's content. It's something a viewer will want to read before looking at the rest of the website.

[Vidknight]

I like it! the pop up fits very well with the whole theme of your site, and I also like the little story it tells just gives it that extra bit of personality.

As for modals in general I feel that it kind of gets a bad rep with how it's usually associated with ads, and scams. It can be useful like in your case, or in other cases like (Spitballing ideas here) a disclaimer for something on the site, or a whole CYOA story sort of deal.

[krish]

Oh this is incredibly cool! I fell in love with it as soon as I saw it and it suits your site really well; it doesn't remind me of an ad or feel spammy at all. The only issue I can think of is maybe the modal will pose accessibility issues for keyboard users and people who use screen readers, but if you don't care about having an accessible site that's very much a non-issue in my opinion. Although I strive for aspects of accessibility on my sites because I want people to actually be able to read what I have to say, I don't think accessibility is a must for personal sites such as yours.

[Monoki]

I'm curious about other webmasters' opinions on modal boxes! For context it's those pop-ups that pop up when you load into a site or click a button.

I've seen a lot of sites having cool landing pages, and kinda wanted one of my own. So I thought... why not a modal box? 
But now that I made one I realized it might be annoying to deal with. Noone enjoys having a pop-up shoved in their face...

Here's a link. Would you guys mind telling me your (honest!!!) opinion on it? And on modals in general?

I think I’ve heard of this site! Pretty cool.

Generally they’re annoying but I think this one works pretty well with the site.

[Kie]

Thanks for the feedback guys!! I'm glad it doesn't come off as annoying

[xwindows]

Would you guys mind telling me your (honest!!!) opinion on it? And on modals in general?

In my view, people these days got too used to the abundance of abusive antifeatures which commercial sites inflict on them in SNAFU-basis. By contrast, I have opted-out from "modern web" since 2008, meaning I'm not numb to such abuse; and as you asked for a honest opinion here, apologies for the lack of kind words below...

I disdain the so-called modal box, lightbox, and any of whatever-they-call-it-nowadays analog of "popups"; and this one is no exception in both reason of its existence, and your execution in putting it on the page.

Regarding the reason of the existence of this popup: I'm not into D&D or roleplaying, so the thing that @tarraxahum mentioned is not a positive point in my consideration. In my not-D&D not-RPG view of random someone trying to find out what this site was about, this popup was just another distraction shoved right into my eye, and my instant reaction was I would like to click it away as fast as possible; but in my attempt to do so, I ran right into the second problem...

Regarding the execution of that design, I will note here that I do not consent to let drive-by programs (1) from stranger's sites to run on my computer. Thus the terrible execution I was referring to --apart from making this a pop-up in the first place-- was an act of putting such content-obscuring pop-up on display unconditionally with markup and style, but only make it dismiss-able via execution of drive-by program. (2)

This means people who do not consent to a (ab)use of such program, like me, get a permanent page-obscuring pop-up which cannot be dismissed (3); and have to resort to killing stylesheet to actually see what that darn page was about-- a hallmark of terrible web design.

What I consider acceptable alternatives to such abomination are:

• "Notice header", basically an vertically-narrow infobox or noticebox placed in-flow at the top of the page; which does not obscure the actual content, and I was free to ignore it without having to actively "dismiss"-- an act which often doesn't work.
• "Splash page", basically an interstitial page placed in lieu of home page to provide user notice or warning, and user would click through it to find an actual home page. You will see a use of this often in sites dedicated to NSFW content.

Since you're basically presenting an "enter" vs "leave" prompt, the second one is probably more appropriate if your purpose was exactly that (that is, rather than just to sound D&D!cool by presenting in-universe narration as the first impression of the site).

P.S. When I tried to open this page on a "newer" browser which I don't regularly use, in hope to see what that broken pop-up was intended to look like... I found that the abundance of animations bogged the whole thing down to the point that one of my CPU cores got constantly revved up to 100%. Dragging the scroll bar could barely make my viewport shift in jerky 3 FPS steps; despite that I keep drive-by program disabled the whole time. This is unrelated to what you asked for, but I think you should know what kind of things you are (intentionally or unintentionally) inflicting on the viewers, beside from that un-dismissable pop-up.


(1) JavaScript and WebAssembly.

(2) A less-bad execution of such design would ether be injecting the popup in-DOM using JavaScript, or using markup but hiding it using CSS-- then unhide it using JavaScript. In these ways, people like me don't have to even see such unclosable show-stopper in the first place.

(3) My browser also predate the existence of both `var()` and `rgba()` in CSS value; so the lack of duplicate `background` declaration with solid-color meant the pop-up's background was being displayed as transparent here; with end result being I couldn't read the text on both pop-up and on the page, because they mixed up into illegible gibberish.

[Kie]

In my view, people these days got too used to the abundance of abusive antifeatures which commercial sites inflict on them in SNAFU-basis. By contrast, I have opted-out from "modern web" since 2008, meaning I'm not numb to such abuse;

I hate to have to be an asshole but.. I don't think anyone here is "numb" like you are trying to make it out to be. It's honestly funny how you sound like you think you're special for having "opted out" of the modern web.. like most of us on this forum haven't. I have been using an adblock for years and can't even remember the last intrusive pop-up I saw.

Regarding the execution of that design, I will note here that I do not consent to let drive-by programs (1) from stranger's sites to run on my computer. Thus the terrible execution I was referring to --apart from making this a pop-up in the first place-- was an act of putting such content-obscuring pop-up on display unconditionally with markup and style, but only make it dismiss-able via execution of drive-by program. (2)

This means people who do not consent to a (ab)use of such program, like me, get a permanent page-obscuring pop-up which cannot be dismissed (3); and have to resort to killing stylesheet to actually see what that darn page was about-- a hallmark of terrible web design.

This hasn't been an issue since the last site update. As made obvious by my original post, this was a proof of concept more than anything. My site can be browsed entirely without javascript, although I find people who get on their moral high horse about not having javascript enabled funny.

This is unrelated to what you asked for, but I think you should know what kind of things you are (intentionally or unintentionally) inflicting on the viewers, beside from that un-dismissable pop-up.

I genuinely had no issues in any of my test, including those ran on older devices. As I've stated before the pop-up being un-dismissable was never really an issue in the first place. I just didn't want to spend more time than needed working on something that might not stay up. Since people enjoyed the modal, I have since finished polishing around the rough edges.

My browser also predate the existence of both `var()` and `rgba()` in CSS value; so the lack of duplicate `background` declaration with solid-color meant the pop-up's background was being displayed as transparent here;

Var has been supported by all the major browser engines and their forks since around 2016, and rgba from even before then. That's basically 10 years ago. Making my site retrocompatible to a pre-2016 browser is not a priority at all for me, hence I don't feel the need to create fallbacks for those.

[Kie]

The only issue I can think of is maybe the modal will pose accessibility issues for keyboard users and people who use screen readers, but if you don't care about having an accessible site that's very much a non-issue in my opinion.

Thank you for the feedback!! I personally try to make my site as accessible as possible (I was thinking of adding a way to switch fonts for that very reason, although with browsers built-in read mode it is not that much of a necessity nowdays). And that's also why I don't include autoplay music and I use high-contrast schemes. I'm disabled myself so if I don't include some of the basic accessibility stuff the site won't be accessible to me either haha
I tested the modal with keyboard controls and it's easy to close and interact with it, however I haven't had the time to test it for screen readers yet  but with how many W3C guidelines complyiant sites use modals, there's gotta be a way to make them fully accessible! I just gotta dig a little