2

We have a search form in a sidebar that currently looks like this:

enter image description here

Now, we'd like to add an option to this to let the user choose whether he wants to search the entire site, or only the section he's in at the moment.

The orange line behind is a line over the whole page, it emphasizes the sidebar. Because of this it's not possible to put a checkbox or toggle button below the search bar (or we'd have to put the whole form in a fieldset and draw an orange border around, which we'd rather not).

I was thinking of adding a second button to the form, next to the search button. This button would select the option. The behaviour of the search button wouldn't change, but the extra button selects whether you search in the whole site or this particular section.

So I was thinking of using an expressive icon with a tooltip - but the best would be to use an icon which is already clear in itself. Either the icon should change when a different option is selected, or the button could have a different background as if it were pushed in when one of the options is selected.

However, I can't come up with a good idea for an expressive icon for this, and also I can't find anything like this in fontawesome or glyphicons. It seems impossible to capture this rather complicated meaning in an icon, and the fact that there's no 'standard' (as for settings icons, for example) makes this solution also difficult.

Is there another way we could make this option clear to users without breaking the current sidebar layout?

Improve this question

3 Answers 3

Reset to default
0

Well, this would be much easier with some more background (maybe you have a very good reason to try to do this) but I would recommend against using one search form for two types of searching, because:

  • browsers, by default, already provide an option to search only the current page,
  • it's not a common design pattern to have two buttons for the search field and it could result in confusion.

If you really want to do this, I would go for the checkbox bellow the search input because you can at least describe the option (where with a button/icon you can't).

A Scoped search, as Nielsen describes it, could be an option here. Show the result page with scopes and let the user narrow down the scope.

Improve this answer
2
  • You're right on that, thanks. We may put a border around the form and give it a background colour, so that we can add radio buttons below, unless someone comes with a genius idea.
    – user30381
    Commented Jan 31, 2015 at 13:21
  • 1
    You could do something similar to Amazon search: provide different search options in a drop-down that comes from the search input. In your case with these two options: - search for "keyword" on whole website and - search for "keyword" on this page.
    – matejlatin
    Commented Jan 31, 2015 at 13:38
2

Invision Power Board has a dropdown next to Search Bar, it is simple and understandable.

enter image description here

If you click on the drop down, it will give you option how far do you want to search.

enter image description here

Improve this answer
1

Reddit has a good pattern for this exact problem, which I would suggest you use. I've found it to work quite well.

If you're not on the main page of the site, search starts off as a simple search bar.

Reddit search bar

But once it's active it expands to offer a simple checkbox to limit your search to the current section of the site.

expanded Reddit search bar

Improve this answer
2
  • 1
    I find the Reddit search to work incredibly well for me. I would however change one thing, that is that the checkbox is ticked by default as I find myself checking it everytime.
    – Daniel Zahra
    Commented Feb 2, 2015 at 15:56
  • @DanielZahra I would agree with that for my use, but I'm not sure how general that is for most users' needs.
    – JohnGB ♦
    Commented Feb 2, 2015 at 16:22

Your Answer

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