One of the most frustrating things users can experience on mobile sites is a modal window. On desktop, modals display without issue because of the large screen size. But on mobile, modal windows get cut off because of the small screen size. Users only see part of the modal window and can’t exit nor view it with ease.
Viewing is even more difficult if users have to use an onscreen keyboard. The keyboard will pop up and cover a chunk of the screen, forcing users to have to scroll awkwardly to see the what they’re typing. If you want users to view your modal window content with ease, avoid using modal windows on your mobile site. Use an inline accordion instead.
An inline accordion displays the content within the page. It doesn’t overlay it on top of the page like a modal. This prevents the window positioning and scrolling issues that users experience with modals. Not only that, but users never lose their context because inline accordions open on the same page. Modals take users out of their context when it covers up the screen.
The way an inline accordion works is when the user taps the button, a panel collapses below it. The panel content is fully displayed on the mobile screen. Users no longer have to deal with partial viewing or awkward scrolling.
The button should highlight so that users know what they tapped. The panel should have a title label that matches the button label. It should have an ‘X’ icon in the corner to close the panel just like closing a modal window.
Stop making users struggle to view your modal windows. Use inline accordions in place of modal windows on your mobile site. When users can view the content on their screen with ease, they can complete their tasks without the frustration.
Book
Affiliate
Hi, Anthony. What about responsive modal windows, which fit in the screen? Second, what is the reason to show add a New User button while I’am dealing with accordion? Thank you!
Responsive modals can fit the screen, but it squeezes the modal content together. This makes the modal content hard to read and the window long, which adds to more scrolling. It’s better to optimize for the mobile screen using inline accordions.
Modals are usually triggered from a button action. An inline accordion can be triggered the same way.
I’m sorry I have to disagree Anthony.
A modal box can be formatted over 100% screen width using the same columns and layout as the main content. I use them with Bootstrap all the time, and they scroll and they format as perfectly as main content.
I think this is a bit of a none issue, because the example you have used above clearly isn’t a responsive modal box, and the solution is… to… just make it responsive?
http://codepen.io/nathancooper/pen/IwGfs
Coincidentally, I made a demo of a full-screen modal using Bootstrap, a couple weeks ago. Anyhow, it’s a good experience and there’s only as much scrolling as there’s content, so I’m not sure why that might be an issue.
Accordions by nature imply multiple clicks/taps and possibly scrolling too, which to me sounds like a less than ideal UX on mobile.
I don’t think you really addressed the issue. Nobody would say that you should make modals that need to be scrolled. It’s possible to make modals that fit in within the viewport and have a little bit of space around them. Are you arguing against those?
Yes, it’s possible, but you’re talking about the exception to the rule. The article is talking about the rule.
Mobile browsers handle modal windows in an awkward and inconsistent way. Sometimes it’ll give you scrollbars, sometimes it won’t and you can’t scroll. Sometimes you can’t even pinch and zoom to see the window.
The only thing that’s consistent about mobile modals is that they give users an awkward experience. This is why inline accordions are better. I think that addresses the issue.
If the point of the article was : avoid ‘badly designed’ modals, yes you are right and we all got it…
But i don’t see why accordions should be used over them, they are different pieces of user interface.
I honestly can’t say I agree with this completely. I feel an accordion can work in tandem with a modal but I don’t think one should always be used over another. Yes, modal pop-ups are annoying when on mobile as it potentially makes the user feel they have navigated away from the page due to the modal taking up a good portion (if not all) of the screen. I can also agree that having non-responsive modals makes it difficult for the user. However, I think it’s important to state that if displaying a minimal amount of responsive content, a responsive modal is okay. For example, a login modal where there are two text entries for name and password and a submit button can easily fit on a mobile screen. We also use success modals at the end of forms to let the user know their submission has been successful. Every form of forward navigation from this modal typically takes them back to a page before the form page, so any potential disconnection between the modal and content page is okay.
No, you should never use modals if they aren’t responsive. That’s a given. But there are many solutions to responsive modals out there that are just as effective on desktop as mobile.
Yeah, modals on mobile are the quickest way to have a user bail from your website. They’re cumbersome, unpredictable, and weird. Full screen all the way.
This is less important on tablet.
I see the value in these “inline accordions” as an alternative in some cases, but the article fails to recognize that there are times when it is necessary to take a user away from their current flow so that they can respond to a required event. Inline accordions would allow a user to circumvent that.
I believe that responsive modals are the answer to modals that get cut off on smaller devices as the article suggests.
Modals on mobile suck. Almost. All. The. Time. Thanks for posting this. This is a legitimate alternative for some use cases.