Most people know that designing effective and intuitive web applications is challenging. Recently I’ve been busy working on the software design and information architecture for a large web project which includes a blend of social networking, articles, discussions, and other information. As the design phase progressed, one question that came up is how to “do” search. Based on the specifics of the website, we don’t anticipate the need for a mega search across the all contents; however, in each high level area of content, we’d like a flexible search which is relevant to that content type and its unique metadata, yet with an interface that’s consistent across these various area searches.
Because the plan for this project includes a significant amount of growth over time, some metadata categories were established early on such as location, topic, etc. Various types of content will be tagged with various types of metadata. For example, location may be relevant when searching for people but not for articles. But probably both articles and discussions would share topic metadata.
Each type of metadata for this project is considered to be a taxonomy, with various levels of hierarchy. So location may have three levels of country, province, and city, while topic may be broken down into two levels, and industry may have just one.
Given this rich set of metadata, and the requirement of a consistent search interface with filtering by various taxonomies, how can a search be built that is both intuitive and effective?
There has been a trend over recent years to eliminate, or at least bury, advanced search features. However, sometimes a single Google-style text box and search button is simply not enough, and in this case we wanted to at least make some extra search options readily available.
Google Advanced Search Interface
After spending a morning searching for advanced search ideas (yes, via Google), the most useful information I found was on a blog called Federated Search. A federated search is actually about searching multiple repositories of information simultaneously. While that’s not exactly what this project needed, these guys had a very interesting article addressing the challenges of UI design of a complex search function. You can read the article Federated Search UI Woes, which focuses on a great 36 minute presentation (slides, audio).
eBay World of Good Advanced Search
A live example of a search which implements some of the UI ideas from the above presentation is eBay’s World of Good marketplace. Let’s say I wanted to buy some jewelry from around the world. This is the jewelry search page. Note that on the left there are jewelry “second level” category listings (bracelets, earrings, etc), each showing the number of results in that subcategory. And above this, you’ll see that your current filter of “jewelry” is present with an “x” in case you want to remove it.
Below category, there is a second taxonomy, unfortunately named “goodprint”, which allows the customer to narrow their search results by the socially conscious practices of the seller. World of Good also provides keyword, price, and location filters.
If you play around with the various controls on this site, you’ll see how the filters (including keyword) can be applied and removed, and how you can “drill down” from jewelry to earrings, and move back up again. I like this interface, although I think there are perhaps a few too many controls. I also am not sure why they provide the keyword box above the search results with a separate search button.
I intend to use these ideas in each of my project’s high-level areas to provide a keyword search along with 2 to 3 category filters. For example, see the wireframe snippet below which shows a rough draft of how this might look in a Q & A section. It’s not pretty yet, and it will probably evolve as we build it, but it’s a starting point. [please ignore the sticky notes; they are a remnant of our wireframe tool]
Advanced Search - Wireframe Concept (please ignore sticky notes)
Building this functionality will, of course, be challenging. But with some hard work, I hope to post a live example here in a few months when the site launches!
Tags: advanced search, user interface
Follow-Up to last week’s post… This morning I came across another website with a nice example of this type of search, House of Fraser in the UK (http://www.houseoffraser.co.uk). Like World of Good, they place the currently selected filters at the top of the left nav. I still intend to try placing them just above the search results, though, as I’ve read this is where users will tend to look first when their results appear.