Using different checkbox style for different checkbox behavior

Question

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?

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

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.