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?

Improve this question
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
    Commented Sep 23, 2015 at 17:32

3 Answers 3

Reset to default
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.

Improve this answer
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.

Improve this answer
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
    Commented Sep 24, 2015 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
    Commented Sep 24, 2015 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.

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.