I'm trying a new kind of search navigation (sort of tag based) where a user selects already populated options (relationships and occasion) and search.

enter image description here

Already populated options are on the left side, some products (latest ones or on the basis of any preference) are on the right. The user selects the options from the left and hits the "find product" button. The right column gets updated with the search results.

Advantage: User gets options up front which means less burden while searching.

Disadvantage: It might be a new idea for the user so there could be a learning curve.

I want the community to evaluate this option before I push it in development. I'd appreciate if any of you can give any better example or have seen the same example anywhere.

I can use drop down, but I don't want to use it because it is boring and needs 1 click and scroll to see options.

4 Answers 4


I feel that rather than thinking about this as a "search"-filter, just think of it as a filter or as a menu laid out bare.

Something along the lines of such web designs: http://themeforest.net/item/yin-yang-light-and-slick-wp-portfolio-theme/full_screen_preview/634395?ref=lvraa

Rather than going for a traditional top-down or narrow-to-wider (wherein you start off with a small piece/nothing/trending and as you add filters the content is populated for your selection) you go for the approach where you lay out everything you've got and then let the user filter if need be, else just select whatever they want and get on with it. Two main things I will like to point out in the theme I linked, there is an option called "All" which tells the user that there is a possibility of seeing everything at once OR filtering by the other options. Also, adding the tooltip or the number of items in each category (or just writing the number besides the filter can indicate that they are interactive and not just labels.

Hope my explanation was clear enough :)

  • nice idea of adding number beside the category. Will evaluate it with design.
    – UXbychoice
    Commented Mar 20, 2013 at 4:41
  • Any updates? :)
    – rk.
    Commented Mar 22, 2013 at 18:08

Your question is hard to answer, "will it work." Someone already mentioned testing with your target audience, that should be a no-brainer, especially with something new like this. One of the things that your model does do is hopefully reduce the time of searching. As long as you keep your number of choices fairly low, having them out in the open will hopefully lower the time it takes to complete that task. You can read more about it and even see an example for yourself here: http://www.measuringusability.com/predicted-times.php


Based on my experience, I would say that it looks like a good way of handling this. You are basically providing pre-defined filters for people to use, which isn't very complicated.

I agree that it is better to avoid a dropdown for the filter elements, but you also have to consider the design for cases where they may be 100 'tags' to filter by, and make sure that that works too.

My only issue right now is that the labels 'Select the relationship' and 'Select the occassion' look too much like filters themselves. Don't put them in a box if they are headings, rather just use plain text there and use the colour and/or weight to show that they are headings.

Otherwise, nice job, but you still need to test it with your target audience. Never forget that that is what really matters.

  • Relationship category is again divided into three parts i.e male, female, couple.( it's like 3 tabs and currently male tab is selected). So i m assuming there wont be more than 15 max relation for 'his'. 'Select the relationship' and 'Select the occassion' are label, surly i'll remove border and make them looks like labels.
    – UXbychoice
    Commented Mar 20, 2013 at 4:49

This is a pretty safe and well-tested approach and has been implemented by thousands of stores but using slightly different controls. For example Look at the screenshot attached.

Here difference is that instead of letting your customers select multiple tags (Check-boxes or list items)and Press the Search Button once, you are using each tag as a button. I suppose you would allow selection of multiple of those tags as well and logically this is pretty much in the line of shared example.


Will this approach work or not? My experience is that it will as I do not find any confusing elements in it. Relationship tags would be used as Radio Buttons (One selection possible within the group) but other list can be used in combinations (Anniversary, Housewarming). So go on with that and best of luck!

A suggestion

Once a tag is selected, make it seen as "pressed" like these http://www.seanpatrickobrien.com/journal/posts/3

search-filters example

  • in my case, all the tags are radio buttons which means u can select one item per category and search. thanks for the presses state example.. it is already in my mind :)
    – UXbychoice
    Commented Mar 20, 2013 at 4:44

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.