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.

I'm not sure on which control to use on this case. Is it confusing to have two different checkbox styles that behave in different ways?

enter image description here

(note: this is just a small part of a whole bunch of filters and more checkboxes that appear on a sidebar of a search results page, I just cropped it here cause it shows the style of the two checkboxes)

For the first set of checkboxes it is clear that checkbox is the right choice as you can choose multiple options and it will only take effect after you update.

However I'm not sure about the second one. It works as a toggle and the changes take effect immediately by reloading the page and changing the search results.

I thought the best way was to change the checkbox style and enclose label + checkbox in a box to look like a button.

But by reading this I've also considered a toggle switch, however I feel it would be more of a mobile choice, and not sure if it works when the page needs to be reloaded for changes to take effect.

share|improve this question
Why do you require the user to manually "submit" some but not all settings? It's clearest to either have them all submit automatically upon changing, or have them all require manual submission. –  Mels Aug 1 '13 at 11:45
I can understand why. Depending on how quickly the page would update and how distracting it might be, if I want to see Boy Band and Club events, I would not want the page to change until I've made both selections. –  wootcat Aug 1 '13 at 13:16
yeah exactly, the ideal is what Mels said, but the problem is, there is a lot of filters on the sidebar of search results, if I create an 'update all' button at the bottom the user will have to scroll down and can end up not seeing it and I can't have 'update automatically' for things like a date range or as wootcat it can't be annoying when you have a bunch of checkboxes and it refreshes the page everytime you click in one. –  Taly Emmanuela Aug 1 '13 at 14:43
add comment

1 Answer 1

Your opening question is of the general form "is it confusing to have two different styles of the same control that behave in different ways on the same page?" The general answer to that is yes, visual similarity should be an indication of similar function and vice versa.

Generally, I think checkboxes are best used only where they have no "side effects" on the page, unless it's very clear from the context. You hinted at this yourself when you said why checkboxes are the right choice for the first set. The bottom checkbox presumably changes the top of the form by hiding items that no longer apply so I'd suggest a toggle button or similar.

Since what you're essentially building is a filter for the list, I'd personally do the UI as follows: have a link or button with the text "Show only ..." but no checkbox where it is now and if the user clicks it, change to displaying a line saying something like "Filter by:" above the selection and have an element "tickets available" in that line, with a circled X or similar next to it. My thinking here is that it makes clear to the user that the filter relates to the main list of checkboxes she's seeing and gives affordance how to turn it off again. This pattern also scales nicely to multiple filters.

Perhaps the bigger question though is why the two operate differently at all - an "update" button on a website is ditinctly old-fashioned, it's all about AJAX nowadays (which I presume you already have implemented if the bottom checkbox reloads things automatically). If you make everything work the same there's no reason you shouldn't use boxes for everything.

share|improve this answer
About your third paragraph, I have multiple filters so the 'tickets available' filter will not affect only those checkboxes but any search result. I could in fact make the whole thing update automatically but as I said to Mels, I think it can sometimes but annoying to update each time you click a checkbox.. but anyway about the button itself, you said to go for a toggle, can you tell me which kind? on the link 'reading this' you can see three examples, I can make just the bg color to toggle to indicate selection but I just thought a styled checkbox would make the selection more evident –  Taly Emmanuela Aug 1 '13 at 15:14
It's a matter of style as much as anything else but I'd use a toggle button. This seems to be the most standard behaviour to me - in thunderbird for example (the example closest to hand I could find) the "quick filter bar" has a sequence of toggle buttons (and the toolbar button to show/hide the filter bar is again a toggle button). –  Bristol Aug 2 '13 at 16:14
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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