enter image description here

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?

  • So what happens when user selects/hit enter over folder/sub-folder? I guess it just open up, right?
    – divy3993
    Jul 22, 2016 at 4:58
  • It selects that folder/sub-folder as a filtering criteria.
    – uhlexsis
    Jul 22, 2016 at 18:37

4 Answers 4


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:

Autocomplete example

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

autocomplete with tags

, and moves on until your required position:

autocomplete with tags 2

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:

  -- italian
  -- french
  -- portuguese
  -- japanese
  -- hindi
  -- 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.


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:

enter image description here

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


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
  • I think the problem is that the number of folders and categories is so large. So even if I allow the user to select "Ingredients" for example as their filter facet, in order to get to "Lemon" let's say, they would have to go through "Fruit/Fruit Products"-> "Citrus Fruits"-> "Lemon" -> then they have the choice of 10 different variants of Lemon. Do you have an idea of how this would work with your solution?
    – uhlexsis
    Jul 22, 2016 at 18:42

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.