Take the 2-minute tour ×

We're building a website where the user will be able to perform four different types of searches. We have to come up with 3-4 design ideas for the homepage.

  1. There will always be a menu from where the user can go to the advanced search for each type of search.

  2. The users want to see a quick search, which provides them with a basic search and takes them directly to the results page. It will also have an option of going to the advanced search page.

  3. One design idea is to display a section/box for each of these search types.

  4. Another is to add accordions to let the user expand or collapse the search types. And still have a section/box for each of these search types with some text in it, which will again take the user to the advanced search option.

Is it a good idea to have accordions on the home page? Is it making the home page too complicated?

share|improve this question

closed as not a real question by Ben Brocka May 20 '12 at 20:23


5 Answers 5

up vote 1 down vote accepted

It sounds like you’re concerned with the clutter or real estate consumed by multiple search options, but I’m not clear about your plans to manage it. Are you talking about putting each simple (single-text-box) search in a separate accordion? I don’t see much space savings with that because the control for the accordion will take almost as much space as the search text-box.

Perhaps you mean that each simple search section can be expanded for advanced searches? You are right to be concerned that such a design could disrupt the home page layout, confusing some users. I see little upside from the design –whether the user opens an accordion to goes to a separate page for advanced search, it’s still one click to navigate, so the accordion solution is no easier although it’s maybe twice as fast. Accordion/expanders are great when the user is going back and forth between what’s in the accordion and what’s on the rest of the page, but if the user is going to advanced search, the next place s/he is going is to Search Results, not back to home.

Actually, I’m more concerned with a different issue presented by multiple simple search boxes, and that’s users putting their search criterion in the wrong search box. Testing of course will confirm if this is an issue in your case, but users in general have gotten used to rather mindlessly typing whatever they’re searching for in whatever text box appears in the upper right. They often don’t read labels, maybe because too often search boxes are poorly labeled.

The ideal solution, saving both real estate and search confusion, is to have a single simple search box that takes all four types of searches. In other words, keep simple search simple. You handle the multiple kinds of searches by the following means:

  1. Include a dropdown list in front of a single search box to specify the type of search. Amazon does this, so I guess it works for them. On the other hand, now it adds two clicks to making a search, so it’s more work than four separate text boxes. Using tabs or radio buttons reduces it to one click, which helps, but that takes more space. In any case, you need to be prepared for users failing to notice search type control and leaving it as the default.

  2. Infer the type of search from the format of the criterion the user enters. For example, if it looks like a tracking number, do a search for shipments. If it looks like a date, then do a search of history. Google does this effectively. The hard part is intelligently recognizing the search type from the format. You can help this by “cascading” searches –if the criterion returns little or nothing from the first search type you try, then try it on the second most likely search type, and so on. You also can combine this approach with (1) above, where the dropdown list defaults to “All” (like Amazon does). This way, Search will still work, more or less, if users ignore the dropdown list, but it’ll work better if they don’t.

  3. Perform all four search types using the given criterion. Results can be a combined list, perhaps with the order of the items influenced by your best guess of the search type based on the criterion format, like (2). You can also include a “facet”-like list of links to allow the user to filter the results by search type post hoc. Alternatively, you can display the results in four separate columns, one for each search type. In any case, this can also be combined with (1).

To absolutely minimize space used on the home page, advanced search likewise can be a single button that takes the user to a single dedicated page. Tabs or radio buttons at the top allow users to select the search type, with the default based on whatever was indicated by the last simple search (users often go to Advance search only after a simple search fails).

share|improve this answer
I think I like option 1. We can't really give the users a search box. We have to give the users a dropdown and a checkbox list. Giving them an option to select the search type from the dropdown list seems like a good idea. However, the fourth search type may not have the same search criterion, in which case we can show different controls on selection from the search type dropdown list. –  Divi Mar 5 '11 at 11:07

Search boxes are usally placed on the right top of the page (just as this site). If there are advanced search options - just as google.com - there is an "Advanced search" text link on the right of the search box.

Then you'll have to decide where the link brings - if to another page (like google, but google has a lot of advanced options) or it just set as visible the additional options (which is preferable if you don't have many).

I wouldn't mess search options with menu - they have different goals.

share|improve this answer
Thanks for that, but we can't provide the user with a search box. So that's out of the picture. I do agree that a menu has a different goal to search options, but all that our menu will do is to navigate to the advanced search pages for the four different search types, because that's what the application will provide. Please have a look at my comment to Michael Zuschlag. –  Divi Mar 5 '11 at 11:14

enter image description here

If possible - you can adjust the expanded area so that it deosn't end up on top of anything important, such as buttons etc. so that the search area can stay expanded.

share|improve this answer

I'm surprised no one has suggested a faceted search, or perhaps exactly the type of faceted search I am talking about. Links to 'Advanced Search' pages is a nice option but if you want to allow a quick search field to be useful and provide advanced-esque search options, then users can often get what they want quickly.

Assuming that you have separate indexes for the most commons or most important searches performed on your site, then allowing text, radio button or checkbox options in close proximity to the search text field is a good idea. In the attached example the user can select one or all three options for full site, programs and/or courses.

You can add more options with this design or implement them differently but allowing a quick choice of indexes is pretty useful. A second piece of this (which we will be working on a little bit down the road) is to ensure the results are well articulated as to their type.

Faceted search box

share|improve this answer

Here's another original approch: on this page, the search link looks like a regular menu item, but it turns into a search input field when you click it:

enter image description here


share|improve this answer
But as a user, I'm not fond that the link looks the same as the menu links because it takes longuer to find the search box: you have to actually read the text instead of instinctively seeing it immediately. –  wildpeaks Mar 4 '11 at 17:09
Thanks for that, but how does this work with accessibility? –  Divi Mar 5 '11 at 11:04
