2

I'm working on a web application with Material Design.

I have some dialogs in this application, and I'm wondering if it's more conventional to have a close cross or not.

Without Cross With Cross

This is not a fullscreen dialog, so user can click outside to close, or click on the cancel button (here without).

In my mind this is not mandatory, and even not recommended for non fullscreen dialogs.

  • Are you aiming for consistency with the dialog boxes or best experience for the context of use? Something worth thinking about when you are reading the answers provided. – Michael Lai Aug 6 '18 at 1:00
5

This is a great question and its opens up a question back to you. Why are you using a modal?

I really like how Atlassian considers this UI pattern.

Use modal dialogs when you need a user response, to reveal critical information, or to show info without losing the overall context of a page. No other interactions on the main page can be accessed while a modal dialog is active. Modal dialogs are invasive to the user's workflow as they appear above all other content. Their usage is quite powerful, as it focuses the user on a single task. -- Atlassian Design System - Modals.

^ that being said, the answer is wether your showing critical information than yes you should provide a "x", If you require critical user response then no you would not use an "x".

  • You are right, so it's not dependent of fullscreen or not, but more on the content and the actions. Thank you ! – Zooly Aug 6 '18 at 17:13
1

Interesting question. For what I see on your design. You need the user to take action and choose either WITH or WITHOUT.

If you are showing a close cross, perhaps the action to take is not that important and you might not need to display a modal in the first place.

  • What you say is following what Bromox said, I agree with you, thanks for your help ! – Zooly Aug 6 '18 at 17:12

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.