Skip to main content
58 votes

What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?

The first option... but with more feedback. You should have the modal appear immediately. This is important so that the user knows that their action has been successful (i.e. you don't want them to ...
musefan's user avatar
  • 7,111
36 votes
Accepted

Laymen's description of "modals" to clients

"Modal" describes how it works (preventing any other operations being performed while the child window is open), not what it looks like (which is typically what clients use to communicate). ...
Kit Grose's user avatar
  • 15.5k
34 votes

Intuitive dialog for choosing whether to close and lose changes or keep editing

All the information in the other answer about colors, contrast, etc. is valid from a general design perspective. But words matter a lot. In particular, users may get very confused about "this ...
manassehkatz-Moving 2 Codidact's user avatar
31 votes

Close button position: corner or inside?

The reason why the close buttons are outside the windows is to establish a contrast with the content, which gives greater emphasis to its function, in this case contrast of shape and position: If the ...
Danielillo's user avatar
  • 19.1k
19 votes

Modal or new Page?

The general rule I apply to modal v's switching to a page is the following. If the information or transition is temporary and the focus of the user is to be returned to the page after they have ...
DarrylGodden's user avatar
  • 6,326
19 votes
Accepted

Intuitive dialog for choosing whether to close and lose changes or keep editing

Actually, the content of the question should be understandable just by looking at the two images and without any explanation. But, personally, it took me a while to understand the images were related ...
Danielillo's user avatar
  • 19.1k
15 votes

Laymen's description of "modals" to clients

Perhaps you should go to the historical origin of the modal word applied to UI to find more generic alternatives. Sometimes the terms used in the definition are more elementary than those defined. ...
Danielillo's user avatar
  • 19.1k
14 votes

What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?

Your app will have a more polished feel by intentionally avoiding the amount of elements quickly flashing or jumping around on the page. A loading indicator isn't needed if the data is returned in 1–3 ...
maxathousand's user avatar
  • 19.5k
14 votes

Close button position: corner or inside?

I won't go into the specifics of your example, but there are some generalities that could help explain why A is often prefered: In the old days, windows in a user-interface were always rectangles. ...
HappyDog's user avatar
  • 487
13 votes
Accepted

Are modal dialogs WCAG compliant?

There is a section of WCAG 2.0 dedicated to this. 2.1 Keyboard Accessible. https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html Specifically: 2.1.1 Keyboard: All functionality of ...
SteveD's user avatar
  • 8,914
11 votes
Accepted

Modal or new Page?

Option C: Expand the card to reveal more info. I favour this method over modals, as I find modals break the flow of the interaction - switching focus to potentially a different part of the page (not ...
cheersphilip's user avatar
10 votes

Modal or new Page?

I'd go for version B, separate page. Modals don't scale well, adding more information tends to break them. Also a separate page allows you, and visitors, to link directly to the product information. ...
Martyn's user avatar
  • 2,348
9 votes

Is it a good practise to load contents outside of modal?

I have never seen version 2. anywhere and to be honest, it makes no sense as first it's hard to cover all the cases it creates with that way of interaction. If the data input field is the last element ...
Chris's user avatar
  • 4,558
8 votes

Intuitive dialog for choosing whether to close and lose changes or keep editing

The dialog isn't using proper wording. When the dialog has text saying "close this dialog" in it, it's referring to the dialog, not the Edit Content screen. The buttons say "don't close&...
moot's user avatar
  • 5,361
7 votes

Modal or new Page?

The only right way to answer your question is to understand how your users are using your application and interacting with your products. Both of your suggestions assume that your products need ...
asiegf's user avatar
  • 1,165
7 votes

What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?

If the global layout of the data is highly predictable, then the current trend would be to open the dialog immediately, and populate it with "mock" data, which is not data at all, just grey ...
jcaron's user avatar
  • 2,716
6 votes
Accepted

What to display in a modal window when there is no content?

Nothing. If you have no content, you shouldn't display a modal at all, simply create a conditional like `if $content=true -> $modal=true; else $modal=false` otherwise you'll be creating ...
Devin's user avatar
  • 38k
6 votes

Full screen modal vs normal modal?

A full screen modal interrupts the workflow of the user and forces their attention towards the modal content. This works well if you want users to undertake actions which require full attention and/or ...
Wendy Wojenka's user avatar
6 votes

Should closing the dialog clear its fields?

I agree confirmation/discard dialog should not be overused. A good practise which I follow is to use such dialog in case of any loss of data. In your case I would suggest any action that closes the ...
Roshan Raju's user avatar
6 votes

Laymen's description of "modals" to clients

The proper name is "Modal Window", but you can also present it as a modal dialog box, pop-up window, pop-up notification, or even lightbox. Regardless of what you call it, it's a good idea ...
Devin's user avatar
  • 38k
5 votes

Should clicking outside of an alert confirm acceptance?

No. You've detailed the actions to the user in the modal box, what you are assigning to the action of clicking outside of the box is a presumed action, as such, you simply cannot 'presume' the user ...
DarrylGodden's user avatar
  • 6,326
5 votes

Should clicking outside of an alert confirm acceptance?

That dialog is very confusing. It can be interpreted two different ways: The application is warning the user that pressing the back button has initiated a quit action. Pressing 'OK' will ...
17 of 26's user avatar
  • 1,675
5 votes
Accepted

Is it okay to have a modal window with a button that redirects to another page?

Yes, that's extremely common. In most cases, the modal would have the equivalent of OK and Cancel buttons (albeit with different labels) with the OK leading to a new page and the Cancel closing the ...
Matt Obee's user avatar
  • 14.5k
5 votes
Accepted

Placement of a modal

The position of the modal is also going to depend on the exact purpose/goal of the modal. The slide-in modal (or more like a sneak-in panel), would allow the user to go on fulfilling his/her primary ...
Chandan's user avatar
  • 508
5 votes

How to design a multi-step form in a modal?

If I understand this correctly, "Upload to URL" is similar to the others (uses all the existing fields) but adds some additional fields that are required before submitting the form. Don't make this ...
manassehkatz-Moving 2 Codidact's user avatar
5 votes

Should I use modal or page if there are multiple of steps?

I would use a page layout with multiple pages if you want to differentiate between each step of the registration process. I prefer this way because having many user interactions in a modal is not ...
Guy Hoka's user avatar
5 votes

Close button position: corner or inside?

I'd bet a standard-colored close button would win. I think you're getting B because the close button isn't colored like the create button so users have to look at the X and figure out that it's a ...
moot's user avatar
  • 5,361
5 votes

Close button position: corner or inside?

There should be a "Cancel" button at the bottom, at the same level, color, and significance as "Create Account." There are two choices for exiting that modal, and having them ...
user8356's user avatar
  • 208
5 votes

Intuitive dialog for choosing whether to close and lose changes or keep editing

Another option here is to modify the original cancel button in some way (I’ve had success in the past with turning it red, and replacing the text with “Are you sure?”), and requiring a second click ...
penalosa's user avatar
  • 397
5 votes

Laymen's description of "modals" to clients

In a comment to the question, you indicate your clients are expected to use these Modals for must-see messages, so "Important Message" and "Critical Notification" seem to be good ...
LordRegent's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible