21

We use popovers quite a lot and, when you click away from them, they close. Do you think it's reasonable to expect that the majority of web users will know how to close it this way instead of adding a close button?

popover

I notice that the Spotlight search on Mac OS X Yosemite doesn't have a close button and needs to be dismissed by clicking away. Presumably, if Apple have done that then it is now conventional behaviour.

yosemite spotlight search

On the other hand, I notice that Google Calendar still has a close button.

google calendar

Update on 24 Jan 2016

Thanks to icc97 pointing it out below, I have now seen Apple's Human Interface Guidelines for popovers which say:

Close the popover as soon as people make a choice or when they tap anywhere outside its bounds, including the control that reveals the popover.

I recently saw an example of these guidelines in action in this popover from the iPad App Store. You will see that there is no close button. You dismiss it by tapping anywhere outside its bounds. Apple has sold 800 million iOS devices so you can attach some importance to this :)

iPad App Store

We launched this popover without a close button in our app recently and not one person has asked us how to close it. The app is used by tens of thousands of people. So, it seems that clicking away to close can definitely be considered "conventional".

enter image description here

There is one exception to closing a popover when users click/tap outside its bounds and that’s when users have done work in a popover. As the iOS guidelines state:

Close the popover when people complete or cancel the task by tapping a button in the popover, such as Done or Cancel. In this scenario, you may not want to close the popover when people tap outside its borders, because it might be important that people finish—or explicitly abandon—the task. Otherwise, save people’s input when they tap outside a popover’s borders, just as you would if they tapped Done.

enter image description here

  • 7
    What reason would you have for not including a close button? – JonW Dec 4 '14 at 17:22
  • For me, the problem with the first example is that you have to be careful where you click so that you don't do something accidentally (or at least that's how it feels) whereas in Google's version I can comfortably click on the close button and not worry. – Matt Obee Dec 4 '14 at 17:30
  • Popovers which do not timeout nor close upon "mouseout" should always have a dedicated close button. It can be an X in the upper corner, a dedicated Cancel/Close button, or even some text styled as a link would produce sufficient confidence for your users. Clicking away from the popover in order to close it requires discovery which can immediately alienate inexperienced users. Depending on the importance of the information or action requested you might even lock the user into using only the OK or Cancel. – MonkeyZeus Dec 4 '14 at 18:38
  • @JonW because it takes up space where I would like to put other things. For example, if you look at my first screenshot, I am occupying that space with another element. – Andrew Dec 5 '14 at 20:35
  • @MattObee you can click anywhere because the first click you make won't trigger anything else. Instead, that first click just closes the popover. – Andrew Dec 5 '14 at 20:36
21

I would recommend going with the close button for the following reasons

  1. Your close button is a visual indicator to users that they can click there to close the popover. While some users might be accustomed to clicking outside or pressing ESC to close a popover (and you should support those users too), the close button helps establish the escape route.To quote this article

Offer a high contrast close button in the top corner Closing the modal window when they need to. Use the conventional ‘X’ icon for your close button. A high contrast close button will allow users to see their exit better. Your close button should stand in shape and color.

enter image description here

  1. It provides an additional accessibility element for users to close a popover : Though the primary accessibility recommendation is to enable users to press ESC to close a popover,quoting the above referenced article

Allow users to close the window with the ESC key For accessibility reasons, your modal window should close when users press the ESC key. You should also allow users to tab through controls in the modal window if you have them. This will allow users who use screen readers and keyboards to navigate your website.

It is also recommended to provide an additional link or action which can be accessed by the keyboard or mouse to close the popover. To quote this reference

Mouse control, you should be able to:

  • Click the link to open the pop-over.
  • Click a 'close' button to dismiss it.
  • Click outside of the pop-over to dismiss it.

Keyboard control should:

  • Allow tabbing to the link and pressing enter to open it
  • Move the keyboard focus to the top of the pop-over when it is opened. For screen reader users they will simply read from the top. For (visual) keyboard users pressing tab once should take you to the first focusable element in the pop-over.
  • Prevent tabbing outside of the pop-over, wrapping around. I.e. tab from the last focusable element moves to the first, and shift-tabbing from the first moves to the last.
  • Screen reader users should also not be able to 'browse' out of the pop-over. E.g. in Jaws, pressing down arrow at the end does not move out of the pop-over.
  • Closing the pop-over should put the link back where it was, on the triggering element.
  • You should be able to press esc to close the pop-over.
  • 2
    Thanks, but this is not a modal window - it's a popover. Also, that article was written over 3 years ago (which is about 80 years in Internet time ;) I'm wondering if users are savvy enough now to not need a close button. – Andrew Dec 5 '14 at 20:42
  • 4
    @Andrew His answer still stands. Very valid points. – Matt Rockwell Dec 5 '14 at 20:55
  • @MattRockwell fair enough. But where does that leave Apple? One of the most highly respected companies in the world when it comes to usability and great user experiences. – Andrew Dec 5 '14 at 21:04
  • 2
    @Andrew This may be true, but it doesn't mean they're infallible, or incapable of deploying something imperfect. My take is that big companies sometimes get things wrong because they're big (Microsoft being the extreme example) or simply because they can afford to. This all reminds me of sending an article to a (ecommerce site-owning) client, explaining multiple ways in which carousels are bad. He sent back a link to the Nike homepage. One big carousel. Something we can demonstrate to be a poor practice, in use by one of the biggest brands on the planet. – dennislees Dec 5 '14 at 21:17
  • 1
    I know what you mean @dennislees but Nike is not well known for user-friendly digital experiences - whereas Apple is. So, my point is not about the size of the company - rather, it's about that company's area of experise and the reason why they are successful. In your example, if it was a running shoe you were designing and they referred to Nike in their argument, I would take notice of that because Nike are extremely successful at designing good running shoes - millions of customers will tell you that. – Andrew Dec 6 '14 at 12:42
3

This question – and much of the discussion here – seems to stem from not having clear definitions and rules for when, why, and how to use several interface components. Below I attempt to explain the simple rules I follow for each component that's related to the one in the original question:


Tooltip

Used for small bits of read-only content that appear on hover and focus and disappear when hover or focus are lost. Google has a good outline of how/when to use tooltips.


Dropdown menus

Used for taking single actions. Once the dropdown is opened, it closes when the user either clicks an item within it or clicks outside of it. Again, Google has a great definition of exactly how and when to use them.


Popovers

Used for complex processes that require more than one click, and where:

  1. It is necessary to see the surrounding context in order to decide what action(s) to take within the popover.
  2. We want the user to perceive the interaction as 'lighter', non-blocking, and with little overhead.
  3. It is a complementary task to the outer context rather than an standalone process.
  4. It is acceptable for the user's progress to remain in a partially finished state.

@Andrew's updated solution is a great example: Once the popover is, opened the user can can edit, cut, and delete. Each of these actions might mutate the contents of the popover, so it's critical it stays open. However, if the click outside of the popover without saving an edit, their changes should not be persisted.

The decisions on what to do in the popover are aided by being able to see the outer context. Seeing immediate feedback in the outer context aids the user's actions.


Modal dialogs

Used for discrete, blocking processes where:

  1. The surrounding context is not needed in order to decide what actions to take.
  2. Requires explicit 'accept' or 'cancel' action in order to close it. It does not close when the area outside of it is clicked.
  3. It is not acceptable for the user's progress to be left in a partially finished state.

Again, Google's spec outlines these well.

2

Based on personal experience, I argue that the close button is not necessary when the popover was easily initiated by the user (he or she can quickly initiate the popover again, if necessary).

I have watched a couple of elderly people get very frustrated trying to click outside of the popover to try and close it with no success. They seem to have trouble finding the 'X' button. Similarly, I find it frustrating trying to navigate to a small 'X' in the corner of a popover.

However, one case where a close button would be necessary is on mobile devices where the popover takes up a lot of the screen real estate. In this case, I would suggest using the word 'close' instead of an 'X' because of the aforementioned frustration.

The example that Mervin Johnsingh provided was for a popover that was not initiated by the user, so I think a close button is applicable in this case. In the example that Andrew gave, the popover seemed to be initiated by the user, so I do not think it is necessary.

I suspect that the reason why Google Calendar uses an 'X' is that clicking off screen makes another popover appear to create a new event, making it a special case.

0

OK, I've done a bit of research and found something fairly conclusive. Facebook may not be everyone's favourite website but it has to be usable otherwise they would be absolutely inundated with confused users - they currently have 1.19 billion monthly active users. It's pretty hard to argue with that. Based on the popover in the screenshot below, I would say that clicking away is pretty conventional these days.

enter image description here

  • 5
    I am sorry Andrew but thats your personal opinion, do you have actual research which states that users dont mind clicking away ? – Mervin Johnsingh Dec 7 '14 at 6:56
  • 2
    @MervinJohnsingh I don't have user research but it would be an interesting thing to do. By the way, it's not only my opinion - it's the opinion of Facebook too who use it in the screenshot I've attached. As I said, they have 1.19 billion users so I think there is something that can be learned here. – Andrew Dec 7 '14 at 15:25
  • 1
    I suspect there's some confirmation bias in this answer – icc97 Jan 24 '16 at 17:40
  • I personally find it hard to navigate away from those bubbles at times because they occupy a lot of real estate and I have to find a safe spot to click. People not ditching a product over a small usability design flaw does not mean that the flaw does not matter. – Steve Dodier-Lazaro Feb 7 '16 at 4:00
  • @SteveDL If they occupy a lot of real estate then I think they are being mis-used and a modal with a close button would probably be better. It's interesting to see what Apple's guidelines say - "Avoid making a popover too big. A popover shouldn’t appear to take over the entire screen. Instead, it should be just big enough to display its contents and still point to the place it came from." – Andrew Feb 8 '16 at 9:09
0

It also depends on what type of info is in popover like of info nature or a form.

Why not provide both for the two kind of users. The new generation of users are pretty savvy to click away to close the popover. Evidence as pointed by Facebook example above.

Esc or clicking away closes the popover. This is also the default in angular Ui modals.

Final case when a user action is required from the popover don't close by esc or clicking out. This is typically done by providing ok and cancel actions on the popover. And both close the popover.

0

Actually, I have to say I'm surprised. But Apple Guidelines on popovers actually specify to avoid include any dismiss button, but when you're implementing a task then you should have a 'cancel':

Avoid providing a “dismiss popover” button. A popover should close automatically when its presence is no longer necessary. To determine when a popover’s presence is no longer necessary, consider the following scenarios:

If a popover…

  • Provides options that affect the main view, but doesn’t implement an inspector
    • Close the popover as soon as people make a choice or when they tap anywhere outside its bounds, including the control that reveals the popover.
  • Implements an inspector
    • Close the popover when people tap anywhere outside its bounds, including the control that reveals the popover.
    • In this scenario, don’t close the popover as soon as people make a choice, because they might want to make an additional choice or change the attributes of the current choice.
  • Enables a task
    • Close the popover when people complete or cancel the task by tapping a button in the popover, such as Done or Cancel.
    • In this scenario, you may not want to close the popover when people tap outside its borders, because it might be important that people finish—or explicitly abandon—the task. Otherwise, save people’s input when they tap outside a popover’s borders, just as you would if they tapped Done.

Note for the above you have to know what Inspectors are:

An inspector is a panel that allows users to view the attributes of a selection.

Update: Material Design intriguingly doesn't have popovers (see this other UX.SE question - but it's worth noting that in that question that the popover for producthunt.com doesn't have a dismiss). However even for dialogs, the only place where Google Material Design specify that there should be a 'x' is for 'Full Screen Dialogs':

Full-screen dialogs group a series of tasks (such as creating a calendar entry) before they may be committed or discarded. No selections are saved until “Save” is touched. Touching the “X” discards all changes and exits the dialog.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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