[HN Gopher] We use too many damn modals (2018)
___________________________________________________________________
We use too many damn modals (2018)
Author : juancampa
Score : 82 points
Date : 2020-06-25 20:41 UTC (2 hours ago)
(HTM) web link (modalzmodalzmodalz.com)
(TXT) w3m dump (modalzmodalzmodalz.com)
| justanotherc wrote:
| 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.
|
| Use them for that purpose, no need to swear them off completely.
| systemvoltage wrote:
| I agree about modals. But seems like the same points can be made
| about the website'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?
|
| Edit: 1 bit lol
| jmull wrote:
| 1-bit actually.
|
| (But, yes, it's pretty awful and makes it hard to take the
| content seriously even though it's good content.)
| chrisco255 wrote:
| I found it entertaining. I would completely ignore this as a
| generic rant without the stylized presentation.
| [deleted]
| joombaga wrote:
| Yeah I had a hard time reading it without getting distracted.
| So I went to a website that converts pages to plain-text and
| the first thing that popped up was a newsletter modal.
|
| So I guess point taken.
| tasty_freeze wrote:
| If my obese doctor tells me I need to lose weight, I have two
| choices. Either I can weigh his advice, or I can ignore him and
| cluck that his comment is really rich considering he is
| overweight himself.
|
| I think the first option is helpful; the second option is
| boringly obvious and not helpful.
|
| As for the style, I found it to be entertaining and helped make
| a possibly dry topic seem a little less like a lecture and more
| like friendly advice.
| systemvoltage wrote:
| That's a bad analogy. The reason why you trust your obese
| doctor for weight loss advice is not because their body
| shape, but because of the credentials (Doctor).
|
| Replace a doctor with a random stranger (which is what this
| website is, I don't know the person giving advice about the
| modals) on the street who is obese and tries to tell you with
| authoritative voice - "Hey! Listen, you're fat and this is
| how to lose weight!".
|
| That's more accurate. I can agree with you about the
| entertainment value, I personally don't see it but if someone
| is entertained by it, good.
| post_below wrote:
| I don't love retro design either but that seems irrelevant.
|
| To anyone who's familiar with the topic it's immediately clear
| from the copy that the author understands it.
|
| Considering that the target audience is other designers, why
| does the presentation matter?
| systemvoltage wrote:
| I think it kills the credibility of the designer trying to
| tell others, authoritatively mind you, that modals are bad
| while A) I have no idea who this person is or know their
| credentials B) Why should I listen to them if they're
| presenting it without a good understanding of design which is
| what they're trying to preach others?
|
| IMO it totally kills it. Others may not have as strong of an
| opinion. This is the age old question about separating art
| from the artist. With authoritative didactics, especially as
| a stranger on the internet, it is even more important to
| associate art with the artist so to speak.
| x32n23nr wrote:
| Modals are basically the fancy clone of old school javascript's
| alert(), and while everyone would rightfully be annoyed being
| "alerted" needlessly, designers have convinced themselves that
| it's fine to show modals frequently?
|
| Edit: Claiming it's only designers' 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.
| pvg wrote:
| Modal dialogs are a lot older than alert(). alert() is an
| instance of a modal dialog, not the other way round.
| seventh-chord wrote:
| My impression from seeing old windows version (never having
| used anything older than vista) was that in general using an
| extra window instead of a separate pane inside the window was
| more common. As far as I can tell, the old windows explorer
| would pop open a new window for each opened folder. Now it
| seems like most programs are run in half/full-screen; They
| arent really treated as windows. IDEs have their own window-
| layout system anyways, right? (Modal) dialogs are probably
| more at place in a world where windows is more that just the
| name of the os.
| pvg wrote:
| What I was getting at is that the important thing is the
| concept (which is about as old as GUIs), the other stuff is
| implementation detail. The 'modal' part of the a modal
| dialog is that it takes you out of the 'modeless'
| interaction state where you can take one of the many UI
| actions available to you to a state (mode!) where you can
| do very few things and nothing else.
|
| Making GUIs less modal is a similarly ancient UI design
| holy grail. Applications are modes hence everything from
| OpenDoc to the just-announced App Clips. A familiar clunky
| modern mode is 'native' apps vs 'apps' in browsers - a big
| chunk of technologies many programmers work with today are
| directly or indirectly related to mitigating its effects.
| reaperducer wrote:
| There were modals in Ashton-Tate's Framework back in 1984.
|
| I think even GEOS had them.
| reaperducer wrote:
| _designers have convinced themselves that it 's fine to show
| modals frequently?_
|
| Not good designers. Bad middle-managers, who only know how to
| say, "Make it a pop-up!" and nothing else.
| qeternity wrote:
| I'm not sure this logic is honest. In the black and white world
| you posit, an alert is merely a window of information just like
| a browser window. Of course the devil is in the details. I
| don't mind a popup if it's for SSO but I do mind it if it shows
| an ad. The same goes for modals, and the differences between
| modals and alert() are for more significant than you give
| credit.
| ameyv wrote:
| I don'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.
| runarberg wrote:
| Granted the authors could have tried to get the website to work
| in reader mode (they might be missing an `<article>` tag or
| some `<meta>` tags). But in the meantime, it works well in lynx
| ;)
| kinkrtyavimoodh wrote:
| The irony of a website with a deliberately terrible and
| gimmicky UI complaining about a functional UI model that has
| worked for decades.
| justanotherc wrote:
| That's kind of what I thought too. Our app is very Modal
| heavy (including modal inception), but I can't think of any
| case where the suggested alternatives would actually be
| better. And that's backed up by the fact that our users
| regularly tell us how easy and awesome it is to navigate
| through it.
| renewiltord wrote:
| Very easy to use a modal if I'm editing other parts of UI.
| slezyr wrote:
| The website is readable only at 30% zoom(couldn't zoom out even
| more) on the 4k 27" display also it messed up mine scroll wheel
| in some way, broke mouse cursor.
| datavirtue wrote:
| That's why I love mobile...and the people found a way to create
| modals there. Sigh.
| l0b0 wrote:
| There'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's fine to use a modal. Otherwise, don't. Some examples:
|
| 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 _around_ the site to buy more stuff.
|
| Error message: not a modal. The user is vanishingly unlikely to
| report an error immediately (obviously it's logged in any case),
| and probably just wants to try again with slightly different
| input.
|
| 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
| _prominent_ message so the user knows the action is not yet done.
| Or, if at all possible, implement undo instead.
|
| My job depends on it: OK, use a modal. We forgive you.
| triyambakam wrote:
| Is this website considered "brutalist"?
| WorldMaker wrote:
| In the web sense of "true to web form" brutalist? Not really,
| for instance the tables are not made to look like TABLEs and
| are in fact ULs and such. This design aesthetic might better be
| described as "(Mac) Classical". (Brutalist isn't only about
| minimalism.)
| aylmao wrote:
| I remember reading somewhere that most (modal) dialogs are just
| lazy design. It's easier to have a dialog component and throw
| whatever notice or controls in there. It's a predictable and
| flexible canvas.
|
| 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.
|
| Writing a post? Editor dialog. It's easier to design and build
| than something that's inline, grows to accommodate what you're
| writing, and works predictably when you scroll away or click
| something else.
|
| There'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.
| elcomet wrote:
| Maybe it's lazy but the important question should be: is it
| good design?
|
| I don't think it is, as it hides some information from the main
| page. But I think it can be done well and be useful, as said at
| the end of the article.
|
| After all, OS use a lot of modals.
| vidanay wrote:
| And OS modals are crap too. Many many times I have watched
| someone completely ignore to modal message and get frustrated
| trying to click on something in the background.
| grumple wrote:
| The more important question: do the people paying you care if
| it's good design? Because the people who have paid me thus
| far in my career have not cared.
| tonyarkles wrote:
| What about the people who have not paid you?
| jl6 wrote:
| They get what they paid for.
| saagarjha wrote:
| 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't read the page because I can't dismiss them! So if you're
| looking for another reason to drop modals, here's one.
| w_for_wumbo wrote:
| My biggest issue with modals, is that they never seem to be
| tested with mobile devices in mind. So when I'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.
| labster wrote:
| I often find the pattern on websites that I visit the site for
| the first time due to a link, read maybe half a paragraph, and
| then get a modal popup asking for my email address to
| subscribe. I've never read any content from them before, how
| would I know if I want to subscribe? My phone is also in
| landscape mode, so the modal's close button is off the screen,
| and I can't scroll to it cause it's an absolutely positioned
| modal.
|
| So the only logical thing to do is avoid the site in the
| future, they're more interested in extracting money from their
| existing readers than getting new readers. Sorry, maybe if you
| had let me read one article I may have liked your content.
| reaperducer wrote:
| _My biggest issue with modals, is that they never seem to be
| tested with mobile devices in mind_
|
| I feel your pain.
|
| The web sites I maintain have at least 70% mobile users. But
| the managers (and designers!) only see them on giant-screen
| desktops, and only care what it looks like in-house, not to the
| customers.
|
| I'm tired of constantly telling layers of bosses that what they
| want won't work on mobile, which is where their customers are.
| recursivedoubts wrote:
| Let me see if I can articulate this well:
|
| The problem problem with modals in a web page context is that
| they go against the statelessness of the html request/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.
|
| After many years of working on and with intercoolerjs/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.
|
| 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:
|
| https://htmx.org/examples/click-to-edit/
|
| (NB: I was lazy and did not make the URL update as I should have)
| runawaybottle wrote:
| I'll try to condense it more. If you play a video game and a
| modal pops up, it takes you out of the experience. It's the
| same as (hypothetically) me having to go into my HN profile to
| find a list of comments I upvoted to then go ahead and downvote
| (versus just having the downvote button next to the post).
|
| Can't teach this stuff, you basically need to be confronted by
| tons of bad UI in software, games, physical printed forms,
| processes, until you get a good sense of taste.
|
| I can't _teach_ HN devs that my thumb covers both the upvote
| and downvote button on mobile. Can't teach it.
| hombre_fatal wrote:
| "Modal" isn't precise enough, then.
|
| Imagine you're playing a game and you click "Options" and a
| modal window pops up with the options you can tweak. Or an
| endless image gallery where clicking an image enlarges it
| inside a modal that you can dismiss to resume scrolling
| without losing your place.
|
| It didn't wrongfully force you out of experience, it's what
| you wanted.
|
| Seems like we're talking about getting in the way of users
| where crappy modals are just one way of doing that.
| Navigating to a new page seems even more jarring in TFA
| examples.
| rightnow wrote:
| 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're at the same place you started.users love it and i dont
| see a problem with it.
| grishka wrote:
| The one UX anti-pattern that needs to die for sure is what this
| site calls "self-spawning modals". They're not only on websites
| -- iOS is very annoying with them for example.
| nameoda wrote:
| 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.
|
| Not to mention that what should be a list is displayed as a table
| (-^l)
| diegof79 wrote:
| I agree, the site visuals and short messages doesn't explain
| well why they are bad.
|
| I'll try to fill that gap.
|
| Modals switch the application normal mode to get your
| attention. So they interrupt your "flow".
|
| Most of the reasons to use them could be resolved by other
| means, that are better in terms of UX but requires more work in
| both design and implementation:
|
| - Confirmation modals can be substituted with auto-save, undo,
| and restore, but is more complex to implement.
|
| - Modals to show more info can be resolved with progressive
| disclosure or by improving the information architecture.
|
| However, like with many design choices there are cases where
| modals are a good option. For example, for certain
| confirmations and navigation the advantage of the modal is that
| the backdrop makes clear where do you go after dismissing the
| modal (bottom sheets in mobile are a example).
|
| Another reason why modals get a bad rep is that they have all
| sorts of implementation issues in web, and in the desktop the
| mode change for a window is not prominent (macOS solves that
| with sheets, but Windows still has that problem)
| Enginerrrd wrote:
| They also break zoom and other features some people rely on a
| lot.
| quickthrower2 wrote:
| In what context?
|
| 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't ask (we're going to stuff cookies on your page
| anyway, here is our arse coverer).
|
| The underlying message I take is we "use too many things that
| make it easier for the coder and harder for the user". Sometimes
| that's a modal, but sometimes that's NOT using a modal!
| seph-reed wrote:
| 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.
|
| Ofc we've all seen them done terribly.
| bedatadriven wrote:
| 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.
___________________________________________________________________
(page generated 2020-06-25 23:00 UTC)