206
Cancel might be too vague. I always like to be more descriptive when asking users to perform a quite destructive task. This often reduces any anxiety users might have.
download bmml source – Wireframes created with Balsamiq Mockups
Edit
As LightnessRacesinOrbit made me realise in the comments, mixing up buttons with links that act like buttons (or in ...
80
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 ...
74
It is about increasing the chance of the user having a look at the popup.
Task-completion mode
Users in task-completion mode are eager to fulfil their goal (eg, "Is the product/information/answer I'm after on this page?"). As such, they simply ignore anything irrelevant because it is an obstacle to their goal.
Obstacle placement
On-load pop-ups are ...
69
...but name buttons after what they actually do.
This might seem pedantic, but looking at the screenshot the "Select" button doesn't select the video, it confirms a previous selection, presumably by the user clicking one of the videos, etc.
You might want to use the verb that your application will perform, such as Edit, Delete, Play, etc. Or stick with OK /...
50
Have you considered giving the user an undo button instead? It reduces the cognitive overhead because no choice actually has to be made in the normal case and reduces the input from always having to do two actions (click cancel and then confirm/other) to only a single action when the user actually wants to cancel:
Wireframes made in Pencil.
44
You shouldn't do anything that overrides what the user has previously chosen. Your application is hosted inside the browser windows. It doesn't own the browser window therefore it shouldn't do anything to it.
The same logic dictates that you shouldn't override any browser behaviour such as the back button.
In fact you shouldn't force the windows of your ...
38
A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application. A great example of this would be a prompt for saving, or the "open file" dialog.
They are often used when a user is forced to make an important decision. Say you were working on a document in Microsoft Word, and you chose to exit Word ...
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 ...
30
A combo box has a specific interaction which has not changed for decades. Its interaction is aligned with a simple user goal - to select one or more items. Most users will expect this interaction. Note: A combo box does not have a pop-up - it is an expandable/collapsible list.
A tooltip has a completely different user goal - it is to provide additional ...
29
I feel like everyone just read the title and not the whole question. He's specifically asking about the case of a popup window.
A very common practice in UI/UX is to use a popup window when the current application is interacting with another one. Think of submitting small bits of information like sharing the current page or even more common, logging into ...
22
You're taking control away from the user. For example; If the twitter page changes the browser to a small window and they then change their mind before actually tweeting and choose the 'back' browser button they're then left with a small window and have to sort it out themselves back to a size they want it to be.
It's also unexpected behaviour; you don't ...
22
They are distinct:
OK: Applies the changes and closes the dialog (or goes back to the previous location / one level up)
Apply: Applies the changes so the user can see / work with the results, but keeps the dialog open, ready for further modifications
Cancel: closes the dialog without applying any changes.
The "Close button" in the window title usually acts ...
21
You should have the buttons at the bottom right because:
The standard for modals is to have the buttons at the bottom, so it is likely where people will look for action buttons
It is a more natural visual flow reading in a Z pattern, and one that has become entrenched.
A button on the right is typical for a submit button as it has the feeling of moving ...
20
Pop-ups are great. They're usually called modal dialogs because a user cannot do anything but complete the task in the popup. This is their primary functionality and they're better and clearer at that than most similar solutions. In OSX you also have what they call Sheets, but they're a lot less clear about the fact that you need to finish them before you ...
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 ...
20
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 ...
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 ...
18
If you are writing prose, a . (full stop) is there to show a the end of a sentence so that you know when the next one starts. If you only have one sentence, then it isn't strictly necessary for clarity. Hence, if it's a short notification message of only one sentence, you can leave it out.
That said you should keep to the style guides given for your ...
18
The idea behind this bar can be traced back to Gestalt's law of similarity which states:
Elements within an assortment of objects are perceptually grouped together if they are similar to each other.
This is why you shall see two columns in (a) and two rows in (b). The latter also demonstrates that colour wins over shape (in this specific example at least)...
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:
18
They want you to subscribe.
Because subscriptions or email marketing gives pretty nice return on investment (ROI) most of the web admins use extreme measures to capture users attention to users can potentially subscribe.
Pop ups work well for increasing email subscriptions
They may be annoying but surprisingly, they work very well specifically for ...
17
Interrupting users is typically not good UX, something to keep in mind when you are asking them to rate your app. Having said that, I am typically OK with a one-time popup as a reminder. But if it shows up again I will mention it in my review.
Another idea to consider is an easy to remove banner at the top of the screen. That would encourage users to rate ...
17
Inline Field Validation
I would recommend to stay on the same-tab, with validation in-place (inline) like this example:
This is a common design paradigm now that web form internet users are accustomed to. I don't know why you'd need a pop-out or a new tab.
17
A tooltip without a close button lacks affordance on how to close it.
Therefore, users would want to close the tooltip but may not know exactly how. It's not evident that clicking anywhere else on the page will close it. This can cause confusion and even some novice users might leave the current website/app because they might change or mess something.
...
16
Simply ask your client if they are willing to lose users at this step in hopes of collecting more email addresses. A complete and thorough visit of the site may be worth less to them than having that email address or vice versa.
I also like to tack calls-to-action like this at the end of good content (a gallery, a video) that I feel engaged users are ...
16
First some personal appreciation, then some sources :
1) I think is less about the positive or negative than the flow in the process.
ex :
Do you want to save before leaving ? Yes / No
Is not good UX
Save before leaving ? Save / Leave without saving / Cancel
Is good UX
That is to say, most of the time a question which answer is Yes / No is not ...
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 ...
14
Take a step back here, do you need that button at all?
The title of your dialog asks the user to "Select video", which they do by clicking straight on the video. Isn't that good enough? Do they really need to move their mouse all the way down to bottom right after this to click another button?
Now, if your workflow involves selecting multiple videos (I ...
13
Don't move my cheese!
I have my windows expertly arranged on my multiple widescreen monitors, so I have a few non-maximise browsers (to avoid wasted space from some sites at the side). The last thing I want to happen is for you to resize my browser and all of its tabs to a size that you feel is appropriate.
Other less web-saavy consumers of your website ...
11
I agree with Matt that a file dialog should be a modal dialog.
Modal dialogs should be used when the user takes an action that needs additional information to be completed correctly. The print dialog, is also a good example. Or the 'options' dialogs in loads of programs.
When to use modal dialogs is a bit tricky to define, but to me it should be used ...
Only top voted, non community-wiki answers of a minimum length are eligible
