6

I am designing a page with search/filter section.

I would like to know where is the most effective place to put the search button?

In the picture the gray box, created dynamically so it maybe 15 field and a scroll will shown.

Option 1: enter image description here

Opinions:

  • The buttons (Search and Clear) are always on top and visible (most common) +1
  • I think it doesn't look good to put the buttons on the header -1
  • If the user fills all the field he will have to go back to top to click the search button -1

Option 2 Option 2

Opinions:

  • I think it fit more elegantly in the page. +1
  • If the user only wants to search for student name he will have to scroll down (some cases) to click the search button. -1
  • In other hand when the user need all field it will be natural flow, he will fill all the field and in the end he will click the search button which located at the end of the form. +1

What do you think?

Improve this question

3 Answers 3

Reset to default
6

Both options have some troubles:

  1. Users can't see button at top at first time, because it so little and invisible.
  2. If your filter grow in height, users can not see search button, if it located at bottom.

The best way - run AJAX search after change one of filter inputs. But it be more complicated that your two options.

Also, users can accidentally click to "clean", it very bad. You can solve it like this:

enter image description here

Improve this answer
3
  • Thanks, what do you think about inner scroll in the gray area only, So the buttons always be located and visible at the bottom.
    – Silagy
    Commented Feb 26, 2013 at 9:46
  • It's not good, what if right criteria located at bottom in scrollable area? User must scroll it always. If you can reduce a amount of fields then buttons can placed at first screen without scroll in filter.
    – denisoid
    Commented Feb 26, 2013 at 9:53
  • I don't think a scroll in the search area is a good idea. Instead, I would do two tricks: 1. limit the height of both areas by placing the field labels to the left (or in the field; it is going to be an interface used regularly by some people, after one day they will learn it) and 2. group the additional options and trigger them on demand. More on the pic: imgur.com/U7fZ22m (by the way, you have "Search" doubled, once as a name of the search column, and once as a label for the field - I have changed the label to Find).
    – Dominik Oslizlo
    Commented Feb 26, 2013 at 12:36
3

I don't really get your design. First of all: you have a Search field inside a Search section with a Search button there as well. That is not very clear. What does search search on exactly?

If searching immediately isn't an option or you think you need a search button even if you update immediately too, I'd consider putting a search button under each of the sections of search fields you place there. Putting it only at at the bottom if you know that the list of options will grow is a bad idea: you run the risk of putting it under the fold.

Improve this answer
-1

Inside the search textinput, you can provide a search icon to differentiate it easily from other textinputs. Images provide a better sign rather than words and will be easily understood by all.

Improve this answer
1
  • I would disagree with several points here. Firstly, icons for search test badly compared to a search button and also images are not easily understood by all. Screen reader users, keyboard users etc. Just because you understand something doesn't mean that everyone else also does.
    – JonW ♦
    Commented Feb 26, 2013 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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