The Ultra Rich Search Experience
February 23, 2008
After getting lots of great feedback on my Seek or Show Design Paradigms entry, I though I would elaborate a bit on each starting with Seek (Search).
Ajax, Flex and Laszlo have provided us with away to replace the effort intensive, page based search with a simple, more responsive user interface. Why should we move away from the traditional search design? Because it is inefficient, cumbersome, and designed around technical constraints that no longer apply.
| Traditional Search Requires lots of effort to find, refine, and explore the results. Searching starts with a keyword or multiple criteria and many pages of results are returned. The user must then refine the result set. Lots of back and forth ensues, while navigating from the ’search results page’ to the ‘detail page’ and back again. |
 |
| Rich Search Requires minimal effort to seek, refine and explore results. Refine options are integrated in the results screen. The results are dynamically refined when selections are made- no page refreshes. Multiple levels of details are readily available. |
 |
The Principles of a Rich Search
The user experience should include:
- Multiple view options
- Scrollable results (versus paging of results)
- Integrated refine feature
- Progressive disclosure of details
- Save functionality available (search, results or both)
- Ability to change initial Search terms without leaving the screen
The Principles in Practice
I’ve taken the best interaction design from three RIAs: AlexSystems Kids Store, Roost, and eBay’s Playground, and redesigned a major car sales website to demonstrate an ultra rich search experience.
RIA 1: AlexSystems Kids Store
AlexSystems created this prototype for the Laszlo showcase. They collapsed the traditional page based search into a single interface. The number of results are clearly displayed across the top, refine options down the left, with an integrated shopping cart below. Three levels of detail are available for each item.
| Hover Details Hovering over an item displays the item’s name and price. This is ideal for displaying results that are judged initially by appearance (homes, cars, dates) because it keeps the screen from being crammed with text. |
 |
|
| Birds Eye View Clicking on an item opens a layer with name, description, price, and common actions:[detail] and [add].The Birds Eye View requires less commitment from a visitor than asking them to navigate to another page just to see a short product summary. |
 |
|
| Full Description Accessible from the Birds Eye View, expands to show a full description of the item, and the options to [add] and navigation [back to the search results]. A nice addition to this would be next and previous buttons to jump directly to the other items in the results. |
 |
|
RIA 2: Roost
Roost is great example of a rich search experience. They have a very tight design that meets most of the requirements for providing an easy way to seek out information, refine the results, and save searches to make it easier for future use.
RIA 3: eBay’s Playground
eBay is looking to provide a better user experience by integrating some rich components. The Playground is still very page oriented, relaying heavily on breadcrumbs, and page reloads for refining results, but they have introduced some useful features.
| Multiple Views eBay’s Playground offers results as a List View, Picture Gallery or Snapshot. I think Picture and Snapshot will probably end up combined, but it is nice to have a more photo-focused option for scanning results. |
 |
|
| Hover Details Hovering over a photo in the Snapshot view provides the next level of details about an item. This is an decent design, but basically provides the same information as the List, yet it requires more effort on the visitors part to mouse over each item for the information. They could significantly improve this experience by integrating the full photo gallery in this layer. |
 |
|
| Narrow Your Search Common categories and sub categories are shown on the left, with the number of items in each. eBay users are accustomed to this method for filtering the results- and navigating deeper into eBay’s vast category hierarchy. Unfortunately, the filters aren’t dynamic, making it additional work to scroll down and find the silly ‘Go’ button. |
 |
|
The Ultra Rich Search Example
I decided to rework the CarMax search experience as an example. I’ve incorporated the principles to present a generic solution. A real redesign would need to involve allot more information than I have on hand at this time. Also assume there is a free form search on the CarMax home page that precedes these screens.
Results Screen
Shows all the results matching ‘mini cooper’. Left side allows for refining the results based on more criteria. The middle displays all the results, large photos making it easier to visually scan. There is a List View option as well as the default Photo Gallery view. Results are sorted by default. Right side acts as a workspace for Saved Searches and Saved Vehicles.
Click Details
Clicking on the photo opens a layer with more details about the vehicle, including the full set of vehicle photos, seller info, and the options to ‘Save’ and ‘View more details’.
Refine and Save Features
Adjusting controls on the left dynamically refines the results (no silly ‘Go’ or ‘Search within these results’ button needed). Saved Searches and Saved Vehicles are visually chronicled down the right side of the screen. Saved Vehicles can then be compared.
References
(1) Alex Systems LLC (2005) http://www.alexsystems.com/
February 28, 2008 at 3:39 pm
Great article. This visual search reminds me of used cars site we did for Ford Finland couple of years ago.
http://www.henry.fi/
Main idea was to dump the usual search forms. In real world people search for cars visually by looking at them. Why not to do same in Internet?
It is actually pretty powerful concept. It takes only two clicks to narrow you search to 2007 Ford Focus Wagon. Third click takes you to details page.
We are currently redesigning parts of site. So timing of your article was perfect.
March 4, 2008 at 8:48 am
To define all search as a visual search may not be totally true. I think ’search’ can be broadly categorized into Semiotic and Semantic (there may be more variations). Semiotic search is searching by form, icon, shape, image & impressions, whereas Semantic search is more about text or words search that may or may not have a clear image association. Also quite often we intend the search query to throw up fuzzy results…looking for all possible associations since we are sure that the search term may not be correct. So my question is what should we call a rich search experience…is it only visual search? Are there any other mode? I had read an interesting discussion on “Faceted Search” that creates a framework of relevance and meaning filter that lets the user have a better control over the intended results.
See here: http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=Modern
This shows a search result of a word modern. Thanks
May 31, 2009 at 11:23 pm
[...] the results, and save searches to make it easier for future use.” Theresa Neil, Design Genie http://theresaneil.wordpress.com/2008/02/23/the-ultra-rich-search-experience/ “The best example of this [‘ultra rich search experience’] is in kayak.com and roost.com [...]