Put a search/filter above or below a list?

Question

I'm giving users a dialog box to search for and select one font and provide a way to filter the list of fonts.

What I don't know is whether to put the search box above or below the list.

Above:

Pro:

• Filter immediately visible.

Con:

• Filter distracts from the actual list.

Below:

Pro:

• List more visible.
• UI may look less confusing.

Con:

• Filter may not be found as fast as when above.

My question:

Where should I put the filter text box? (and why?)

Answer 1

For most decisions about whether to put an interactive element (filter control, comments box, etc.) above or below an element it usually comes down to which you want the user to read and engage first.

In this case you likely don't want the user to read each of the fonts before choosing to filter them, so I would put it at top. This allows the user to filter down if they already know what they want and then start scrolling if they dont. This also guarantees that both elements will be above the fold even on the smallest devices. If you put the filter at the bottom it may be pushed off screen if the select list is tall enough.