18

I am looking for the recommended UX alternative to Modal Windows on a mobile device.

Modal Windows are useful in larger screen environments, as they allow the user to interact with the program without interrupting the workflow in the main window. The main window may be dimmed or greyed-out, but is still visible.

Obviously simple modal windows are still usable on a mobile device so long as the contents of the modal is very small (little text, usually no more than 2 buttons). However larger modals, or modals with dynamic content can lead to problems on the smaller screens of mobile devices.

I am looking for a good design pattern to replace Modal Windows on mobile devices that is intended for use in on a web oriented platform. So for example, a good alternative to bootstrap modals on mobiles. Ideally a pattern that hopefully loses none of the advantages of a modal window on a larger screen.

Improve this question
6
  • 1
    Have you considered making the modal fullscreen? Sometimes this works. However, make it clear it's not the main content, e.g. slide it in over the main content, position the close button well discoverable.
    – gregory
    Commented Aug 24, 2017 at 9:24
  • 2
    "they allow the user to interact with the program without interrupting the workflow in the main window" - that's just wrong. The whole purpose of a modal is to interrupt the workflow until the modal is satisfied.
    – Agent_L
    Commented Aug 25, 2017 at 10:11
  • 3
    @Agent_L I think what the OP means is that if you were filling out a form, you shouldn't lose all your progress by filling out and then submitting a modal window. So where as it might interrupt your flow, it shouldn't interrupt your session.
    – icc97
    Commented Aug 25, 2017 at 13:33
  • @icc97 Yes, it's unclear, so I am commenting so that OP can clarify it. The purpose of comments is to work out improvements.
    – Agent_L
    Commented Aug 28, 2017 at 11:04
  • 1
    @Agent_L I agree, the purpose of a modal is to interrupt the workflow until the modal is satisfied - I was specifically talking about the workflow in the main window - the main window can still be seen, so the context of what you had been working on prior to modal appearing is not lost. I agree, perhaps the wording is a bit vague, I am open to suggestions if you can think of a better way of wording this?
    – Jimmery
    Commented Aug 28, 2017 at 17:10

5 Answers 5

Reset to default
21

Showing a full page modal window on mobile devices means users may confusedly think they’ve been taken to a new page.

Modal windows are typically boxes which contain information relevant to the current page but which don’t require the user to leave the page they’re on to view that information.

Considering these facts, I think, it would be best if we replace modal windows with Callout windows on mobiles because a modal window sits on top another window, the information displayed is already smaller in size - on a 3 inch mobile screen this just doesn’t work.

enter image description here

Improve this answer
14

Something I have gone with in the past is to takeover the whole screen for modals. We built a responsive modal so that on desktop you see the modal in a more traditional overlay, but on smaller viewports the content of the modal takes the place of the whole screen.

Something like the 'JUST ME' example here: https://tympanus.net/Development/ModalWindowEffects/

Here's a quick mockup to illustrate. Webpage on the left, modal view on the right. You see it's taken over the whole site, navigation and all. The user has to select 'continue' to dismiss the modal (or whatever you require the user to do with it).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The purpose of a modal is to lock the user out of the page behind so that that have to interact with the modal to continue. There isn't a requirement for these sort of modals for the user to still be able to view the content on the page behind, so bearing that in mind, why would they need to see it? Provided you introduce some transition / animation effect to illustrate that the user hasn't actually been taken away from that page then this approach should work well.

Improve this answer
1
3

How much content should a modal really have?

I think people get a bit carried away with their usage because they're so easy but they're not a replacement for good content strategy and information architecture. What type of content are you putting in modals? Perhaps the content needs to be looked at again and integrated into the application in some other way. If you have too much content to go in a modal, break the content down deliver it to the user in chunks.

There are good uses for modals though - for small, relevant pieces of content. On mobile I've found at least in relation to the web (not apps/native) getting in/out of modals, modals triggering scroll bars or invisible scrolling when they shouldn't, etc can cause serious usability problems.

An expanding panel that pushes up or down to reveal more content inline could be another way of displaying modal-sized content on demand. They could be full-width, or just take the width of the container.

Improve this answer
3

It sounds like you have fairly complex modal windows on your desktop.

Given that you can only provide so much information on the screen at one time you could consider vertical steppers.

enter image description here

Improve this answer
3

As described in this article

https://medium.com/@jivanshr/drawer-new-way-to-reveal-content-e3b32722b21d

Modals sets completely new context/environment in which user has chances to face more congitive load to adapt and also fear of losing previous context. The idea is much similar like navigation drawer of android just without overlays. Here you can see the previous content being shifted. Another advantage of drawer UI is to consistent exprience in mobile and desktop.

I don't say modal must die, I just want everyone to use modal for small chunk of content. That's all.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.