User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
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? – Marcos Ciarrocchi Nov 8 '12 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 '12 at 21:45
@mciarrocchi They are completely free to type in whatever they want. – Ricky Mason Nov 9 '12 at 6:28
up vote 1 down vote accepted

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, 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!):

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.

share|improve this answer
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. – Ricky Mason Nov 9 '12 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 '12 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: – Ricky Mason Nov 9 '12 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 '12 at 15:03
its been inspiring. Thanks for the help, I at least have some examples to pull from. – Ricky Mason Nov 9 '12 at 15:06

How about a tree?

  • Sports
    • Baseball
      • Bats

It implies hierarchy in the filtering.

share|improve this answer
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? – Ricky Mason Nov 9 '12 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.

share|improve this answer

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.