I have two mock-ups of how a user's selected filters appear at the top of a Learning Center page. The first mock (filterboxes2.jpg) shows each filter in a box, with the category name in front of the item name. The second mock (filterSeparateLines.jpg) shows items filtered by category for organizational purposes. Our team thinks the first option makes the most sense, but wanted to get some other feedback and hear if anyone is aware of a best practice. filter option 1

filter option 2


4 Answers 4


It seems that the first screenshot shows what is most common nowadays wrt tagging/filtering. The second one has merit, but:

It is important to design your web app so that it follows user expectations, a principle also known as the principle of least astonishment.

Users will expect your web app to funtion as they have seen others do. Hope that helps. :)


Do you sure of the usefulness of the filter box at all? Some drawbacks are:

  • Bad findability. Inline items (option 1) suffer of bad findability, as there isn't organization and sequential reading is required. The names of the categories are repeated, which produce excessive information, too. Also option 1 has bad scalability, as a lot of selected items produce huge multi-line block.

  • Cognitive load. The lack of organization in option 1 lead to high cognitive load while reading and recognizing the filtering options.

    On the contrary, selected items in the filter column are perceived from the first view due to visual organization (category sections and checkboxes).

  • Limited actions. The only action with the items in the filter box is deletion. Deletion of the items lead to increasing of the search results, it looks counterintuitive, as filters intended to reduce the number of search results.

    As an example, having 165 results, the deletion of an item leads to, say, 200 results. So the only action (deletion) leads to increasing complexity!

It seems, Filter by column on the left is convenient and sufficient tool for the filtering. It provides feedback with selected items.

As an option, you could try the solution, which pushes to use filters if there are too much results and displays selected items in more usable way:
enter image description here

  • This makes sense, but option 1 is so common on ecommerce sites with detailed filtering. For example: imgur.com/rx0nZlF
    – erik_lev
    Jan 7, 2014 at 0:35
  • @usingtheinternet – yes, you are right. In case of complex filters, which are hard to observe, it's a mean for indicating system state. But you have rather simple (observable) filters. Jan 8, 2014 at 21:23

I believe part of the issue in your mockups is the need to separate the filters by their parent category. Is this necessary? To have to read both the filter name and the category for each checked filter imposes a slight cognitive load, not to mention the redundancy of text which adds to the clutter. Even in the example you referenced in another reply, they do away with the categories because it is assumed the user is aware enough of what filters they've checked.

I would suggest doing away with the categories, with the assumption that the user wouldn't be checking more than 6-8 filters at once. However, if that isn't the case, or if organization is a priority for this page, than the best solution is one that combines convention of listing the filters along a line, with grouping to clearly distinguish sets of filters (as shown in the mockup I sketched). Not all categories would be displayed, rather shown and hidden depending on the filters checked, but it clearly organizes the filters at the expense of some vertical space. Again, this would be overkill unless you plan on the user clicking on a lot of filters, at once.

enter image description here


To my judgement, the second approach is more powerful than the first one


You get to see all categories and then respective tags under those categories more clearly, but it is missing one thing which is READABILITY. If you can follow the same approach and make tag's visibility as good as first prototype has, your second prototype would become more useful and effective. Try adding some vertical and horizontal space to them - and - differentiate between the colour of categories and tags.

for the X (cross) next to tags, in first prototype, the landing space around X makes it look easy to delete tags but in second prototype, X is alone and tiny and we perceive it would be hard to click on it. Improve on this aspect.

Another question which you need to ask is how much value do these categories have? Would it be okay to place tags without categories? or is it important that those categories be seen DISTINCTIVELY and eye be able to spot them and visually isolate them from the tags they have? Sometimes categories could be important to select the right tag but once tag is selected, categories may not hold value any more. In case categories are not important, your first prototype would be more sleek approach than second one but in case Categories have value and they keep their value among tags, second prototype would be better.

Your Answer

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

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