86

All of these UI components are containers/windows that show on top of the content you are currently viewing/interacting with. The different names are based on the attention they deserve, the context you're in, and how you can interact with them. Alert - These messages need immediate attention. The window/container is usually locked, meaning you can't ...


69

I hate it when a modal dialog appears asking me to confirm an action and the only way I can confirm that, yes, this is the record I want to delete, is to view the information underneath the immovable dialog. I usually have to cancel, double check, then click again. Or, consider this scenario: Hey Mr. Team Leader, there's this case I'm working on and I'm ...


61

Usually the downsides outweigh the upsides i.e. usually the answer is "no" Here are some of the typical considerations with movable modal dialogs. Note that some of these verge on implementation issues, but I've included them anyway because they all have usability impact: Moving the modal requires a lot of cognitive load. The user has to find the handle,...


49

The concept is fine, but "Finish" is ambiguous as a label. It's better to more specific about what will happen if you press the button, for example "Save and exit".


41

In my opinion it would be better to distinguish between creating and editing the business object. For creation a wizard is fine. Besides the next button it could also have a finish button if the current and all following wizard pages only had optional information as input. For editing an existing object a tabbed dialog could be a good choice, since allows ...


39

Rather than simply "This will delete your data. Are you sure? [Yes][No]", have a positive action: download bmml source – Wireframes created with Balsamiq Mockups Only checking the checkbox and clicking OK will do the action. Any other combination will not. As an aside following comments: the OK button should probably be more explicit, like Delete, ...


35

If a popup confirmation is so uninformative that a user might need to move it out of the way to decide whether to proceed, then the problem is a bad popup, and allowing it to be moved is not solving the core problem. Assuming you really do need a popup that comes before the action and fills the screen, to get an informed response from the user before ...


33

What asking for is a better forcing function. As defined by the Interaction Design Encyclopedia: A forcing function is an aspect of a design that prevents the user from taking an action without consciously considering information relevant to that action. It forces conscious attention upon something ("bringing to conciousness") and thus deliberately ...


25

Not according to Microsoft. Use title-style capitalization, without ending punctuation. Source: Microsoft Guidelines for Windows, section about error messages.


25

I would say that this often leads to an unwanted drag and drop action. What if this window for example has a small scrollbar, you want to scroll to the bottom of the page and you accidentally miss the scrollbar? You would drag the window down and you might need to reverse this action. Why is it uncommon that windows can be moved by clicking anyway in the ...


21

It may be redundant, but independently of this the real concern should be to evaluate if this redundancy is beneficial, harmful or neutral. Different goals, different designs Do you need a confirmation modal or just an informative one? Confirmation: To start with you'd need a OK/Cancel pattern which will offer a clear binary option. You could avoid the X ...


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 ...


20

I recognize that the web leads to its own problems because it is platform independent, but if most of your visitors are Windows users than using Windows standards might make sense. Here is one page from Microsoft on UI design. User testing would really be the best option in this scenario. This may be common knowledge to everyone here but I'd recommend the ...


19

In general, I use the following guidelines for using modals: Is it focused? Every time you throw a modal in front of a user, you're disrupting their workflow. Disruption isn't always bad. Sometimes that's what you want. But you have to realize you're doing that and use it for your benefit. Items within a modal should self-contained. A good rule of thumb is ...


19

Even though [cancel] would not actually clear or cancel any concrete data, in the user's mind it confirms, that none of the values he changed in the dialog will be saved/applied. The [x] should generally always be there, it works as some sort of "way out" for the user, it gives the option to skip the choice and intuitively get out of the situation (for ...


19

Keep the Finish button There is nothing wrong with the Finish button because it provides an exit shortcut for users who want to save and finish the process early. Otherwise, users who want to edit just the first page of the wizard, should click 4 times next until they can save and close the form. That's 4 unnecessary clicks. Add a Stepper progress bar The ...


18

A tenet of good user experience in software is system feedback. In this instance, the system should confirm it will no longer show you notifications... which is a good place to offer an undo option, as well as tell them where they can change their preferences. For example:


17

You could try using color and/or icons to differentiate the more critical actions from the less serious ones. If there is a series of buttons next to each other that are all grey and then one that is red, I will be more likely to differentiate that from the others. download bmml source – Wireframes created with Balsamiq Mockups Maybe even in big bold ...


16

My answer would be to synopsis the question of the modal form, so with the question being: You are leaving the question with unsaved changes The title would be: "Unsaved Changes" It's a pattern I've seen and used regularly, it's brief and informative.


16

In terms of mobile, A mobile screen does not have the space to fix your problem by moving the popup. You can move the modal window and still not see the information you want to because it has limited space. A popup usually covers the information below by a black overlay so that it stands out. Just moving the popup won't be enough then. You will have to get ...


16

If you're going to make the choice for the user, I'd suggest using "Resume" since it's much easier for the user to revert back to the start than it is for them to find their place in the video. An alternative is to give the user the choice. For example for an unwatched video the option is "Play" and for a partly watched video you use both "Resume" and "Play ...


16

It sounds as if you are seeking a formulaic answer about a specific button pattern fit for an exclusive purpose and feel that this goal is not being met. Straight off the bat, there is no such formula. But here are a few things to consider. Link Buttons Are a Thing Text-only, rimless buttons have become a fairly common interface element without being ...


14

The "OK" button has the wrong word. It should be a "Continue" button, as this is what's required of the user. The user is being asked to acknowledge they're aware of the nature of the warning, and that they'll be continuing without a current reload/refresh of the data. It is not OK that the data didn't load, so there's a needless cognitive dissonance ...


13

The title bar isn't always the only spot to that can be used to drag the window, (these days some windows can be dragged by parts of their background, but it's rare) but it's the oldest and most established and common convention. It originated in the early WIMP UIs, the Smalltalk systems from the 70s and 80s. If you study the way the above windows were ...


13

As you have pointed out, the double click is not a standard behaviour that your users are familiar with in the situation you are describing. It's not good practice to use non-standard interactions where you could use a standard one. Irreversible actions (such as deletion) are usually followed up with a 'sanity check' like "Are you sure? [Yes] [No]".


13

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/...


12

This is actually not always true. In some cases the default behavior of most apps would be to allow to drag windows by empty space. An example is KDE. See the screenshot: KDE's default Oxygen widget style has window decoration visually merged with window contents. Thus, to make feel match look, the theme also by default allows to drag windows from all empty ...


11

Redundancy isn't always a bad thing. Sometimes, having multiple ways of accomplishing the same task helps accommodate users who are used to different patterns. In this case, the candidate for redundancy removal is [X] not Cancel because your modal dialog is an editable form, which has a Save button already so the counter-action has to be next to it (as you'...


11

Exporting data can be more time consuming Ultimately it depends on how your users feel about it but exporting data requires users to think more and can add friction to their work flow. If I could only choose one option or the other I would go with option 1, however, export to Excel sounds like a very useful function so consider the following example. Show ...


11

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 the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires ...


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