|
If you would have a pop-up with just some information for the user. They don't have to make a choice. Is it wise to give the user two options to close that pop-up (see screen shot) or would you give the user only one of those two options to close that pop-up. Also how would it be if it was a 'Cancel' button instead of an 'OK' button.
|
|||||||||||||||
|
|
There is no harm in having more than one action to close, as long as they don't confuse the user. I would consider some alternatives too:
You could also consider fading the message out after a number of seconds (I think facebook does this with certain notifications). |
|||||||||
|
|
In this case, I don't think it matters if you give the user 2 ways to close the pop-up or 1. Usually, I stick to the rule of thumb that actions should be possible in multiple ways in order to accomodate different users and what they expect to see. However, I think the pop-up model is so frequently used that just an "OK" button would suffice. The "X" doesn't do any harm if you would like to keep it there, as this is also typically used and wouldn't draw attention. Because it doesn't draw attention, though, you should probably not have just an "X" as some users may not notice it and be confused about how to close the dialog. This applies to what I am thinking of as a typical dialog - yisela's example of a lightbox relies on an "X" in the upper right-hand corner, but it also allows for clicking outside of the box to close it. As for language, the buttons available should depend on what they can do and the purpose of the dialog. For just a confirmation message, use either "OK" or "Close". "Cancel" should only be used in the case where clicking "OK" would submit something, so they want to be able to cancel without completing the action. |
|||
|
|
|
I will go for having two close button as attached in your screen-shot when giving any message to user. In this case, users main focus will be on your message that you are giving to the user. So after the message, it is good(of-course in my opinion) to show button next to it, of any further action. Consider a case when message to be shown to user is a bit large. In this case user may find difficulty in finding the close button after reading a long message, as he need to change his focus. Also I would like to have cross icon to top-right corner of the popup window. Regarding text of button, it would depends upon the context of message that you are showing to user and further action that will happen after clicking the button. |
|||
|
|
|
If the popup is a real one, not a div in the page, the browser/system will provide the "X" to close the window, so you should only provide the one in the code, which should be as understandable as possible. If you are generating the popup effect with a div, then you can provide the button yourself, as per your screenshot. But, since your intention is to be sure that the user has read the text you presented to him, I'd say that you should try to avoid any way of closing the window that is not related to acknowledge the actual message, so, don't provide an "X". We are used to interact with many kinds of confirmation boxes, popups and related interfaces, so when we scan the screen and we see a box with only one option, we know that it doesn't matter what we do, the only option is to close it, so the brain and the attitude is dismissive; many problems happen because of that, but that is another subject. So make the button something the user have to pay attention to, like "I have read and understood the text", or " I agree with ...", something that makes the user stop for a moment and really interact with your box or read the text if he hasn't done it yet. |
|||
|
|
|
One addition: I see it written in the title bar: "Correct!" I assume it's a test or a puzzle game. It's generally a good practice "not to break the flow", that is, if the application is about filling answers, don't make the user click any notifications. Instead, use an animation, like, a big green checkmark expanding and disappearing, and perhaps a sound effect.
|
|||
|
|
