5

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:

Filter is above list

Pro:

  • Filter immediately visible.

Con:

  • Filter distracts from the actual list.

Below:

Filter is below list

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?)

  • What about putting above and below together? – herci Aug 24 '15 at 13:01
  • 1
    I would personally want to put it above the list, as you'll want the user to engage with that control first, rather than the list first and then the control. – AStopher Aug 24 '15 at 20:28
16

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.

  • That's a great answer and a great explanation. Thank you very much! – Uwe Keim Aug 24 '15 at 12:38

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.