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.
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.
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.
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/