Can we expect users to close popovers by just clicking away?

Question

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?

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.

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

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 :)

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".

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.

Answer 1

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.

2. 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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.