Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Possible Duplicate:
Closing modal dialogs

I'm developing a flash application that has buttons that popup a window with more text, and information when they click it. This happens throughout the course. The close button is a square box with an "X" inside of it. The client upon review stated their review asked us to change it because felt the "X" looks like the page didn't load correctly (old browser can't load image icons??).

I have a strong intuition to stick with the "X" button because I feel it's more recognizable than having a button with "close window" label. Which is the best way to go about this? Also, is the "X" as a close button globally recognizable as a close button?

share|improve this question
1  
Could you post an image/mockup? You are talking about a X in the top right corner of the window, right? Additionally, is there any part of your question not answered by the question GotDibbs linked? –  Ben Brocka May 7 '12 at 15:12
    
Is the X red? Otherwise I can't see how there would be any confusion. Grey is a good color and very clear. –  Hawkee May 7 '12 at 15:42
    
Sorry, I did a search for the same type of question, but I probably didn't use the right search terms. Thanks for linking to that question @GotDibbs. –  leetou May 7 '12 at 16:31
    
Hawkee, the X is heavy weight with a red square background. –  leetou May 7 '12 at 16:49
add comment

marked as duplicate by JonW May 7 '12 at 16:34

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers

When closing an informational modal dialog, it's best to provide two methods. OK and the X to close:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If the X is anywhere but the top right (or top left for Mac users), on a red colored background, they will have difficulty finding it or knowing what it is.

One alternative solution I have seen for custom dialogs (Flash, Web overlays), is a [Close X] button.

mockup

download bmml source

This is a bit simpler to implement and uses less space, while still being quite clear to most users. I do not recommend using a red colored X in either case (use a red background for the X button), because the user is right; this does hearken back to the 'missing image' icon in Internet explorer, especially if it is not located in the top right corner.

share|improve this answer
    
Honestly Close X would be more confusing to me, as I've been clicking red Xes for years. –  Ben Brocka May 7 '12 at 15:49
    
I do prefer red-background-X buttons myself, but I've seen many web overlays move to the [Close X] method. I can see the appeal, though I have not done any user testing myself to confirm. Like any choice, testing is the best answer when you aren't certain... and often when you are. –  Myrddin Emrys May 7 '12 at 15:53
add comment

Which is better depends on your target audience. It's not clear from the question whether this is designed for a broad consumer audience, or whether it is intended for use within a fairly defined group. I would argue that the approach differs for each.

For a broad (i.e. global) consumer audience, the x at a top corner is common enough that I doubt it would cause any major confusion. Although you should remember that it isn't always on the right. Mac users will be used to having it on the left. If possible, I would also let the "esc" key act as a close option. Many people are used to this, and it doesn't complicate your interface at all.

For a closed and fairly well defined group, you have an easy opportunity to find a solid answer to the question with a little testing, so use it. Test it with your potential users and see which is clearer for them and then go with that.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.