Usability of the Header Search Form

When designing the search interface for the McGill Univesrity Health Centre website, there was a lot of discussion around the interface for the header search form. Like most large websites, the MUHC would have a search form in the top right corner of every page, but we wanted to include a drop down to that form to let users filter by content type.

The search for the MUHC website is powered by Solr and the Apache Solr Ajax module is responsible for the interface. We wanted users to take advantage of these new tools. The main search interface has tabs across the top that roughly correspond to the major content types on the site (see the screenshot below). The drop down from the search form allows users to jump to these tabs directly.

We looked at some similar interfaces on other sites.

This is the search form for NY Magainze:

This is the search form for Kontain.com:

We wanted to make the drop down prominent, but not confusing or disorienting for users expecting a simple input box and submit button. In the end, we decided to keep the exptected interface intact and added the dropdown to the right of the search button. Each item in the drop down acts as a search button, taking the user to the correct tab.