51

I am working with a basic bootstrap modal popup which is a popular modal used on many sites. I noticed that the default template comes with both a close button on the bottom, as well as an x on the top, these two buttons essentially having the same purpose.

Are the two redundant and the close button completely unnecessary and just taking up extra space? Or, is having multiple usage options more user friendly?

enter image description here enter image description here

To make this even more fun, suppose I throw in a Save button:

enter image description here enter image description here

Is it now clearer that if you don't press save and just press the x, your changes will be canceled, or is there now more of a need for a cancel button for users who are scared that a mistake will become permanent?

Update:

To clarify for those who feel this question is similar to Can we expect users to close popovers by just clicking away? - That question is asking if a clickable background is sufficient to close a popup. I'm using buttons and it is just a matter of how many buttons to use. (I do also have a clickable overlay and ESC key enabled, but that is irrelevant to my question)

Improve this question
10
  • 11
    Don't try to invent your own UX - just use OK, the way all your Windows users are used to :) There's a lot of lessons you can take from Windows design - for example, always have Cancel as the default button, always have X do the same as Cancel (OK is treated as Cancel - but it must be the only button on the dialog), never give a "Yes-No" question without a Cancel option. Not only is it a very good UX, it's also the one your users are most likely the most familiar with by far - that's a huge item on the "pro" side.
    – Luaan
    Commented Feb 10, 2016 at 21:45
  • 9
    And don't forget that people may have trouble clicking the X. Maybe they're elderly, or disabled. Or they're using a touchscreen, or a touchpad. Having a nice, big "OK" button will help those people tremendously.
    – Luaan
    Commented Feb 10, 2016 at 21:52
  • 3
    @Luaan Just pointing out that bootstrap is the one who invented this UX, not me. Also, depending on the purpose of the popup, it does not always make sense to use OK since that is more of a confirmation language.
    – Tot Zam
    Commented Feb 10, 2016 at 22:01
  • 4
    Yeah, when you need the user to make a decision, you provide either Yes-No-Cancel or OK-Cancel. But Cancel is always the default, and always the thing that happens when you press Escape or click X. Cancel is basically the "Whoa, whoa, what's this popup doing here? I didn't order this!".
    – Luaan
    Commented Feb 10, 2016 at 22:17
  • 7
    Yes, they're redundant. And neither of them are unnecessary. Sometimes redundancy is the right thing, as your answers are showing.
    – Ken Mohnkern
    Commented Feb 11, 2016 at 12:39

8 Answers 8

Reset to default
24

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 button here but I see no reason to to do it, since it can impact in the user flow if they are used to close everything with it.

Informative: Is it always necessary or recommendable for the users to actually read the message?

  • Yes: Don't place a X button nor a Close button, because you don't want to give the user the easiest and fastest way out. Place one "OK" / "Got it!" button so the user is less likely to pass over the message. Also you should take care of the "clicking outside the modal" in this case.

  • No: Place both an OK or Close button plus a X button. There are different types of users with different interaction habits, so there's not a good reason to cut off the natural flow for each one. Moreover if the message is not very important you should ask....

Is the modal really necessary?

If your goal is to inform the user, there are less obtrusive options such as notifications; try to limit modal use to when it is really necessary. Examples from the Nielsen Norman Group article:

  • The user is about to take an action that has serious consequences and is difficult to reverse.
  • It’s essential to collect a small amount of information before letting users proceed to the next step in a process.
  • The content in the overlay is urgent, and users are more likely to notice it in an overlay.
Improve this answer
3
  • 2
    I like that you made a clear distinction between cancel and close.
    – Tot Zam
    Commented Feb 10, 2016 at 19:42
  • 1
    Model is almost always not necessary.
    – cottsak
    Commented Feb 11, 2016 at 5:33
  • 2
    +1 for your reasoning and highlighting objectives of user
    – Praasshant
    Commented Feb 12, 2016 at 13:18
21

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 work of Jakob Nielsen who has been writing about web usability for over 20 years and created a collection of web usability articles.

From personal experience working with people with very little training in how to use a computer, the X in the top corner is very commonly understood and should not be removed. Also be clear if there is a need to differentiate between "close" and "cancel".

Improve this answer
6
  • 6
    +1 for not removing the X due to it being a well-established standard. It's fine to provide an additional method to cancel the action, but taking away the one with which everyone is familiar is really bad.
    – Monty Harder
    Commented Feb 10, 2016 at 16:36
  • @MontyHarder It's fine to provide an additional method to cancel the action - Would doing this be beneficial or completely superfluous?
    – Tot Zam
    Commented Feb 10, 2016 at 16:39
  • 1
    I'd say it would add clarity because although many people know what the X does, it is good to be clear in your design for people who aren't as familiar with those standards.
    – Rick Henderson
    Commented Feb 10, 2016 at 17:04
  • 1
    @TotZam One possibility would be to put the X and the word together on the same button [ Close X ] I've seen that done with the X in red, and a green checkmark like [ Apply √ ] (or perhaps "Accept", "Proceed", etc.)
    – Monty Harder
    Commented Feb 10, 2016 at 17:54
  • 2
    @MontyHarder That's what Delphi (and other Borland IDEs) did - and it doesn't really work all that well. Removing barriers is one of the most important design constraints - and making your UI behave the same way your people are already used to is a great way to remove barriers; the user doesn't have to learn anything new. Some people use the X, some use OK, and some will press Escape (and in the "OK only" case, Enter). If any of those don't work, it will result in a tiny frustration and those can add up quickly. Close can confuse people easily, especially in the wrong context.
    – Luaan
    Commented Feb 10, 2016 at 21:49
7

Create the main action button (or buttons), but keep the X

I worked in web-development for quite some time, this is mostly empirical knowledge that I gathered from user observation.

In many situations the user doesn't know what to do. Specially when presented with a choice. But even simple modals with a Close or OK button can be a challenge. The user often gets insecure about pressing the button. After all, a modal usually presents some kind of message (which can be an error, disclaimer, a contract, etc) that you must read and agree to. Closing may lead to further undesirable actions (from the user perspective). For example, "By pressing ok you agree to..." or "By pressing OK the computer will make 1001 updates leaving it unusable for the next 3 days".

The X is looked at as "agnostic" and works as an "assuring" thing. When you use it you know you are closing the modal only. You're not making a choice and in principle that will not lead to any further developments.

As the comments already mentioned this behavior is being reinforced due to spam popups and modals. In some situations where a system modal is used the X is the only safe option.

Improve this answer
5
  • 2
    This is why I tend to press the X. Not just because it feels agnostic, but because it's more likely to actually be agnostic. It's always possible for someone to capture the on-close event and do crazy stuff, but I've had a lot of cases where the X did nothing and the "cancel" button proceeded to do more stuff I was trying to avoid.
    – MichaelS
    Commented Feb 12, 2016 at 9:13
  • This point becomes more salient when you think about spam popups on a web site. Even if it provided something like a "cancel" button (which is supposed to not harm you), I don't completely trust it, and if I have an option to click the "X" button, I would rather press the latter.
    – sawa
    Commented Feb 12, 2016 at 12:08
  • Just to clarify, are you saying that I should only have the 'x' and skip the 'close'?
    – Tot Zam
    Commented Feb 12, 2016 at 15:07
  • @Tot Zam no. You should have both. That's what I mean by "keep the x" but maybe not clear enough. I just re-edit to make it clear.
    – nsn
    Commented Feb 12, 2016 at 16:33
  • @nsn Thank you for clarifying. I was never really considering removing the 'x'. I was more wondering if the 'close' button was necessary.
    – Tot Zam
    Commented Feb 14, 2016 at 4:27
5

Depending on the situation they could potentially perform different actions.

For example, the modal might appear as a confirmation dialog after a user tries to perform a close action on a form:

  • Close = continue to close the page/form that this modal popped up from

  • X = cancel the action to close the form, hide the modal, and return to page/form. (In this situation a Cancel button would be better.)

Basically, it's all dependant on your particular scenarios on which actions you feel necessary to offer.

Addition: Upon finding out more about the specific scenario in the OP's case (from comments below), I recommend to just use the upper right x and get rid of the close button. Otherwise, the close button could be confused as a bigger action rather than just the action to close the popup.

Improve this answer
6
  • I agree that it would be different if it is a confirmation to close something. Most of the time though, it is just used to close the current popup. In that situation, is the close button considered extra or is does it make use easier?
    – Tot Zam
    Commented Feb 10, 2016 at 14:43
  • personally if that is the scenario I would just use the upper right x and get rid of the close button. because the close button could be confused as a bigger action rather than just the action to close the popup.
    – Dave Haigh
    Commented Feb 10, 2016 at 14:44
  • 2
    further note if you're not asking for a specific decision then enable the X, Esc key and click on the overlay all to close the popup.
    – Dave Haigh
    Commented Feb 10, 2016 at 14:46
  • Thanks, I actually already have those other close methods enabled. For this questions though, I was just wondering about the button part.
    – Tot Zam
    Commented Feb 10, 2016 at 14:51
  • X and close sometimes mean the same thing.
    – UXerUIer
    Commented Feb 10, 2016 at 17:36
3

Well, having both is always a good option, especially if a user is new to graphical environments (X might be for experienced users who are afraid of Close, while Close might be for newbies). Also, on screens with high brightness levels, the X may be almost invisible.

Improve this answer
1
  • 2
    The close button can also be helpful to people unaccustomed to the operating system. I have to think a second when I'm on Mac PCs to remember that the red button on the left is equivalent to Windows' "X" button on the right, while a "close" prompt is straightforward.
    – MichaelS
    Commented Feb 13, 2016 at 2:32
1

In terms of ease-of-use, for those not as saavy as others, including the Close button does add a sense of purpose. Also, not adding the Close button at the bottom could propose potential accessibility concerns.

Additionally, this is a great user testing candidate and/or an A/B test.

Improve this answer
2
  • Good to hear another point of view, but I'm not sure that you need to be that saavy to figure out that the "x" on the top means close.
    – Tot Zam
    Commented Feb 10, 2016 at 17:10
  • 3
    I would consider that more of an assumption. We can't assume everything when it comes to successful UX. I've conducted user testing with all demographics imaginable and you'd be surprised the things some users do not fully understand.
    – Bill Punch
    Commented Feb 10, 2016 at 17:28
1

Personally, I hate seeing both options. It only serves to confuse me, if only for a second. Do an X, or close, but not both. In my opinion both options are very clear about what they do, but both together are not.

When I see both, I ask myself, "why are there both options if they do the same thing? Do they actually do the same thing?"

Improve this answer
1
  • Personally, I don't like when there are two options either. Is this though how majority of users feel, or like some other answer say, is it, the more options available, the better?
    – Tot Zam
    Commented Feb 11, 2016 at 21:24
-6

The simple answer is

they are redundant

and you must have only one or the other.

It goes without saying, as everyone has said,

as UX designers, you do not make this sort of decision any more. One must leave it up to the OS.

Improve this answer
1
  • 2
    It depends on the situation.
    – Matt Smith
    Commented Feb 12, 2016 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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