2

The material design spec for full-screen dialogs says the following about full-screen dialogs:

Mobile only: Due to limited real estate on mobile devices, dialog content appearing in other form factors (tablet, desktop, etc.) may be more appropriate on mobile using a full-screen dialog.

Looking through examples, it seems that full-screen dialogs are mostly used for forms. But if full-screen dialogs are only for use on mobile, and I want my interface to be responsive, how would that content translate to a desktop screen?

1
  • 2
    A typical pattern is that modals 'float' with large margins on desktop, and said margins disappear on mobile and the modal becomes 'full screen'.
    – DA01
    Sep 23 '15 at 17:32
2

It depends on the nature of your desired interaction.

Do you need your user to focus on that particular item? If so, a full screen/modal-like interaction is still appropriate on desktop. e.g. http://interaction16.ixda.org/ (click on the hamburger menu). Another example is you're showing the user something complex, or something that needs a user response before they can continue (system dialog prompt).

The down side of fullscreen dialogs is that it slows down the user because they need to reorientate themselves with the new screen. For a web form where the user wants to input the info as fast as possible, regular form fields, with dropdowns, autocomplete fields would be much better. The user can still see the rest of the form content, as the relevant section expands to take up only as much room as it needs to.

1

I think the best way to "convert" this dialog to desktop would be reorganizing the content inside a medium to small sized modal. Using another page would be unnecessary and 'unfriendly', so would be an big modal that occupies almost all screen.

And even the link you provided says that full-screen dialogs should be used when common desktop dialogs:

  • Includes components like pickers or form fields requiring an input method editor (IME), such as a keyboard.
  • When changes are not saved in real time
  • When there is no draft capability in the app
  • When performing batch operations or queuing changes prior to submitting them

So, I interpreted this as in the full screen dialogs are used basically when you need a lot of space in a dialog, that in desktop could be presented as a common modal.

2
  • This particular form has a date picker on it. The date picker itself is a modal dialog. If I convert the full-screen dialog to a modal dialog, openeing the date picker will cause layered modal dialogs (which I'm assuming isn't desirable?)
    – Ben Davis
    Sep 24 '15 at 5:53
  • In this case I think the date picker should open similar to the html date picker (floating above content, but not in an individual modal). Like this: jsfiddle.net/12ejf347
    – Bruno Vaz
    Sep 24 '15 at 18:16
0

If Andriod activity is like a Desktop window, then fullscreen dialog on desktop is like a full-window layout, except for panels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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