Category filter using checkbox, tag or most popular?

Question

I'm in the process of creating a filter system for the category of restaurants. This category list can consist of dozens of items, while each restaurant can have only 3 categories. So if users selects at least one of the 3 categories, this restaurant will show up on the result. This project is a responsive web site, so this functionality will also be avaliable on a mobile device. So the question is:

Should I use checkbox list? A tag system? Or even explicitly display the text?

See the screens for examples:

Checkbox

Tag

Explicit

Note: All of them will be ordered based on the amount of use. The category with most registered restaurants will be higher on the list. In the future (after we collect some data) we will change to a list based on most searched category.

Both cases, checkbox and explicit, will be limited to the top 4 results, for example, with an option to + show more. The tag list will already be a dropdown menu, so there is no need to do that. But the tag menu may have a limit so users can't select a huge amount of tags.

At the momment I don't know what I should consider when picking these options. Currently I'm thinking about using the explicit option because it already guide users to the most common categories (or most searched - in the future) where he can select a category with just a click. The tag system will need users to click on the input to open a list and then make the decision or type to search another category.

The checkbox also have the option to be one click way of filtering, but since it's a high priority filter I'm trying to have a better visual since the other checkboxes aren't that much important.

Answer 1

From UX perspective, a checkbox list will work better for all types of users. Because a user will be able to see some of the items immediately. It will force him to interact.

The best practices are not to hide content under expanded controls.

Answer 2

Bin the categories, well not really, allow me to explain.

You have your free-text search, the search by name field, my suggestion is not to clutter the user with categories up front. Allow them to search, using the free text field, then provide categories that match what they have typed.

It sounds a bit strange, but we've just gone through this with an inventory search, which was weighed down by a category section that was presented to the user up front.

For example, user types "pizza"

Say we have 3 results:

Jimmy's Fast Food (Categories: Pizza, Kebabs, Chicken) Pizza by Goli (Categories: Italian, Pasta, Mediterranean) Dominos Pizza (Categories: )

*notes: we're taking some licence here, assume someone made an error and didn't fill in Dominos categories.

So your search results would be:

The reason this style works is because no category will ever produce an empty result, also you can put the filter box horizontally below the search box, in a mobile app.

Answer 3

I'd suggest a single full-text search box for two kinds of results: restaurants and categories. Matching restaurants work like links to them, while clicking on matching categories restricts the search (no checkboxes needed). The clicked-on categories can appear as tags in the search line or close to it depending on available room.

Initially (when the search box is empty), you can show the most popular categories and restaurants of your choice (which could be a paid feature).