The Best Solution for Faceted-Search in Account Area

Question

My company is launching a new membership site that displays data in a list. As the designer, I'm trying to design the account area with the user in mind. I'm having trouble getting the filters for the search just right.

I'd really just like a new perspective. The filters are going down the left side and, one idea, was to have a fly out when each filter is clicked on (we'd rather not have all the filters expand vertically [like Amazon] because the categories and countries would be way too long). So, when the user clicks on "Categories," one possible scenario is a fly out menu pops out with all the categories and they can choose however many, than click on Categories and close that menu.

The buttons across the top show what filters they've chosen.

Like I said, I'm just looking for new perspectives and any ideas. Total re-positioning, different ideas ... anything.

Answer 1

Something confuses me. It says "Browse vendors: [search box ] [submit]"

To me Browsing is about clicking around, not entering search queries. I think "Browse vendors" is the title for this page, but you're presenting it as the label for the search box.

I think Chris makes a great suggestion for integrating the filter controls. It keeps the control that sets a filter united with feedback on wether it's set or not, as well as the control that un-sets the filter. If at all possible always keep a clear relation between control, feedback on its state, and reversal of that state. Like how the power switch on a receiver turns it both on and off and usually has a LED integrated or nearby that glows green when on.

I'd like to add that it might be possible to forego the use of flyouts or dropdowns. They're moving targets for a user. You usually need to be careful of the location of the cursor. Also, they cover information that may be useful. Instead, why not slide out an area between the filters and the table? You could let it sit there until the user clicks submit, to solve the "Operation game" problem (Dr. Bibber in Dutch) of needing to keep your cursor in a specific area or being careful not to click outside the area.

That might also give you enough room to enhance the filter. You could have a alphabet index for all the countries instead of a huge drop down menu.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

If it wasn't for your arrows pointing out which ones were the filters and display text, I would have gotten them mixed up.

The icons navigation on the left simply look like buttons navigations(to other page) and not dropdown filters. I would incorporate arrows or something to indicate there are more option available. I would also consider activating those dropdowns on hover rather than a click(as you described). Hovering is much faster than clicking every single filter.

Newegg is a good example.

The display text also look like buttons to me. In fact, I would have most likely clicked on them first expecting a dropdown menu. The wording and their position on top of the table seems more related.

Is there a reason why you can't expand the table to the full width and have one filter navigation(combining filters and the display text) on top of the table? At the moment, the distance between the filters and display text make them seem unrelated and a bit confusing. You can also automatically update the search results when a new filter is selected.