I am developing a site based on an original idea.

Users will sort information based on keywords that comes from their own input.

For instance, they might type in "Sports" and will be greeted with search on sports.

However, they can continue to filter the results by typing in "Baseball"

So now their filter will contain "Sports" and "Baseball"

To me, this seems backwards. I currently have very little CSS behind it, so it displays simply as :

sports, baseball or baseball, sports depending on the order they typed it in.

Any ideas on best ways to convey to the user how the keywords are working? I.E. filtering down?

  • 1
    What seems backwards? Do you want to display the search/filter terms hierarchically? Do you actually have a classification/taxonomy or is it completely free for the user to type in anything the want? Nov 8, 2012 at 21:32
  • Try visiting some shopping sites (e.g., Amazon). Being able to filter into categories and attributes is pretty common. As for going up, use breadcrumbs.
    – Brian
    Nov 8, 2012 at 21:45
  • @mciarrocchi They are completely free to type in whatever they want. Nov 9, 2012 at 6:28

3 Answers 3


This isn't a terribly new UI/UX concept. It sounds like you're describing tagging. And many users are already accustomed to seeing tags in a space-delimited or comma-delimited manner. Check out a bookmarking site or two.

Try http://delicious.com, if you haven't already. They don't present tags in a comma-delimited fashion -- they pretty it up. But, it's still just an inline list of tags once you start entering tags.

For a much simpler approach, you can try searching around on my bookmarking site if you like (but it's very much a beta project!): http://svidgen.com/browse_bookmarks

You can either start typing in the "jump to" box or start clicking tags on the left side. It shows selected tags at the bottom on the left and in the search box immediately above the results. Perhaps you could do something like that. It's simple. (I think.) And simple is intuitive.

  • It is definitely a tagging system, and the DB is set up identically. The difference is that, unlike amazon, or any other similar site, the tags are created spontaneously via the user. Having checked out delicious, its similar, but imagine if each tag chosen could be further filtered down. Such as google >> search engine >> algorithm. This would yield a unique result...But just, 'search engine' would yield THAT result, as well as many other ones that relate to non google. Nov 9, 2012 at 6:32
  • Ok. But, many sites do entail spontaneous tagging. Namely bookmarking and sharing sites. Did you look at my two links?
    – svidgen
    Nov 9, 2012 at 14:25
  • Yes, and thanks for your help so far. For your site, after clicking a tag (i.e. google), do you display all affiliated tags on the left to allow a further drill down? I am considering a javascript(auto-complete?) that 'recommends' affiliated tags through a simple drop down. maybe it will make more sense to check out the prototype: rickymason.net/thebump Nov 9, 2012 at 14:47
  • Yes. Clicking a tag on the left or typing one in followed by a comma causes associated tags to appear.
    – svidgen
    Nov 9, 2012 at 15:03
  • its been inspiring. Thanks for the help, I at least have some examples to pull from. Nov 9, 2012 at 15:06

How about a tree?

  • Sports
    • Baseball
      • Bats

It implies hierarchy in the filtering.

  • The problem is that the keywords/filters/tags/whatever you want to call them are dynamically created by the user. Thus, how can you organize them hierarchically? Nov 9, 2012 at 6:26

You could show the relationship between the order in which each filter was selected by specifying the filters in order of selection. I really like how flipkart does this by creating deletable tags which are stacked against each other with the last tag being on the right

enter image description here

If you look at the image above, my first filter was Intel/MSI and then the price and "only in stock".

This method allows you to create multiple filter combinations as the user can delete and add tags as he needs without having to go through the entire process again.

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.