3

I have a website where the user will be able to see charts created based on filters that they have chosen. At the top of the page are several filter topics that, when clicked, expand a sort of dialog underneath (I am actually perverting Bootstrap's dropdown element for this purpose for the moment) where they can make specific choice (e.g., region, gender, etc., and some slightly more complex ones).

The dialog will have two buttons at the bottom, "OK" and "Cancel" - if you hit OK, the dialog closes and shows an abbreviated version of your selections under the filter label; and if you hit Cancel, the dialog closes and reverts to whatever the filter was at originally (that is, before your latest changes that you "canceled"). Then there is a button to trigger implementation of the filters you've chosen and change the charts.

However, the default behavior of these dialogs (and something that I think a lot of users probably expect, but I could be wrong) also allows people to close the dialog by "clicking off" - that is, clicking the page somewhere outside of the dialog box.

The question we have is: should this behavior trigger "OK" or "Cancel"? Or maybe we should disallow this behavior altogether and force them to choose one of the buttons in order to close the dialog.

I was thinking I would expect that the next time I opened the dialog, it would show the selections I had made unless I clicked cancel (kind of like how in some browsers, if you are filling out a form and click a link off of the page, but then use the back button, you find your answers still filled in). My colleague expected this behavior to cancel whatever was put in. I think we are too close to this so I appreciate any feedback. Thank you.

Improve this question

2 Answers 2

Reset to default
1

In this case it is wise to stick to conventions; clicking outside of a modal will act the same as the cancel option. Enabling this behaviour will help people who rely on this principle on other websites, while not harming those who never use it.

Remember, it's a good thing to label your call to actions appropriately - OK and Cancel are context dependant. They force a user to read everything before these actions make sense (and even then it can be dubious what lies beyond the click).

In regards to accessability: This link contains examples for how it works. And here is a demo. This helps both people that navigate through keyboard and people who like to click out of the window to close things. It's very user friendly.

Improve this answer
1
  • Thank you very much; that link is really helpful! I'm always looking for good, accessible helpers. However, the example in the demo actually did remember my selection when I clicked off to close (I selected one of the checkboxes, clicked off, and when I reopened the modal, the checkbox I had selected was still selected). So I'm a little confused because it sounds like you're saying the convention is to cancel selections the user had made.
    – UX Guest
    Oct 13, 2017 at 17:52
0

It should act as a "Cancel". You could disable that feature and be perfectly fine, as long as their keyboard focus and clicking behavior is trapped within the modal; forcing them to choose either "Ok" or "Cancel". It is imperative to lock their focus specifically for Accessibility reasons.

I also wouldn't remember any previous selections. The term "Cancel" means to act as if I did nothing.

For Web pages, you should read up on the WAI-ARIA Authoring Practices concerning Modals.

Improve this answer
3
  • Thanks very much, I totally forgot to look up what WAI-ARIA had to say on the matter. I may not have explained the "Cancel" button well enough; the idea is to have it revert back to whatever it was at the last time the person clicked the trigger button that changes the charts.
    – UX Guest
    Oct 13, 2017 at 14:40
  • 1
    I do not believe that is best practice. Your charts selection should have some sort of default selection or none. This is what it should revert to if the user hits "Cancel". The moment something is remembered after hitting "Cancel" will lead the user to think that his/her selection was actioned upon.
    – MrGrigri
    Oct 13, 2017 at 14:43
  • Hm, I don't know if I as a user would like that. There is a set of default selections when the user lands on the page. But let's say I modify a bunch of filters, including setting gender to "female." I look at the results and then think, "how does that compare to male?" So I open the dialog and change from "female" to "male" but before confirming, I think, "Wait, what was that value?" and I click "Cancel." In your scenario, the filters I painstakingly chose before (not a big deal for (fe)male but other filters are more complex) will revert to the defaults and I'll have to select them all again
    – UX Guest
    Oct 13, 2017 at 17:55

Your Answer

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

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