How to select items within a faceted filtered search that also includes folders?

Question

We are having a hard time figuring out how to allow users to drill down within these filters with only their keyboard (typing in the search query and pressing enter) when there are also folders. Any suggestions on how a user would do this without a mouse?

Answer 1

The most common typing based interfaces rely a lot on autocomplete features (ex: link search in your browser, coding, etc.). Although it seems like a pretty straightforward technology the truth is you can customize it a lot. Let's say you build a search line:

, that once it recognizes the word inserted in the model builds a tag and waits for the next:

, and moves on until your required position:

As you probably have noticed it the dropdown list typically only shows the words that start by the sequence you have in the text input. You can change the type of filter (to provide more choices) and even make shortcut keywords (for instance "wine" would directly build the entire path).

This, however, works well because most people that use autocomplete functions know what they want to autocomplete (coding is probably the most common example). This implies that autocomplete, although fast and efficient, has a slower learning curve than your example. One alternative would be to provide another widget that dynamically shows the tree of options that can be used in the auto-completer:

food
  -- italian
  -- french
  -- portuguese
  -- japanese
  -- hindi
beverages
  -- fruity
  -- alcohol
  -- etc.

From the point of view of the more experienced user notice that this will be much faster. That person will already know what typed shortcuts will get to the position it wants, faster (wine will do beverage/alcohol/wine for example). It just needs some aid in learning how to "code" its request, thus the tree viewer.

I say "code" because you can actually create "code" keywords that will give a much demanded path faster, or a specific query that returns a dropdown with all relevant elements (start=w could return "Wine","Water", "Walnut", "Wasabi", etc.) inside the already existing path.

Answer 2

This searching by two kinds of things (an item and a category) in the same affordance is confusing. Can they pick multiple categories and then what, right click or something? This is all too complicated.

There are a few ways to go:

1. Have them pick a category first and then search within that category.
2. Deliver search results and let them filter the results by category.
3. Offer categories along with the results (e.g., search for "alcohol" would offer options in "beverages" and "first aid"). This is how Amazon does it:

The benefit to this approach is that it doesn't require an extra step of the user.

Answer 3

What a thoroughly confusing widget - a search field which contains a drop-down tree control which is being used to filter by facet .

This will be difficult to make keyboard enabled because you need to:

• expand the drop-down
• Navigate the folders
• Select a folder
• Get out the widget

It will be easier for everyone (mouse and keyboard) if you created two separate simple controls:

• Drop down field for selecting your facet filter (and try and flatten the folder hierarchy - there is no need to expose your architecture in the UI)
• Simple Search field for entering your search string

Answer 4

My suggestion:

Flatten your folder tree representation used for autocomplete.

This way a user typing "alcohol", will match a single folder path.

beverage > alcohol

...reducing navigation requirements.

A search for "beverage", could then either suggest beverage, or a list of the paths-to-leaf-nodes under beverage.