Theresaneil’s Weblog

I just posted a new stencil on Graffletopia. It is the stencil I have been using to make wire frames for iPhone web applications.

This makes it pretty easy to open OmniGraffle and put together some designs for discussion and testing.

And although I included tabs as a component, make sure to refer to Apple’s iPhone Human Interface Guidelines which encourage the use of lists for navigation:

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.

Refine Your Search Clear terminology and simple options make it easy to refine the search results. The most commonly used options are shown by default, while the less frequently used options are collapsed. Results are refined dynamically (no extra button to click)
Reset Filters This is one of the simplest ways I’ve seen for clearing filters. They used a custom component so it would visually stand out from other form components. The Reset option is available above and below the refine panel, making it hard to miss when it’s needed.
Saved Searches The Save option is in proximity to the Search box- so it is easy to find. Saved Searches are shown directly below- and have a quick remove feature, so it is simple to manage the list.

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/

Here are two design paradigms for handling large amounts of data, not to be confused (or combined) as web design meets desktop in rich Internet applications. This would seem self explanatory, except that the Seek (Search) paradigm is typically used in web sites, and the Show (View Based Lists) paradigm exists mainly in desktop applications. So the challenge arises when a RIA requires one of the Show patterns, but we only have Seek patterns documented for use on the web.

The Seek Paradigm: Have the user ask for what they want

This paradigm lets users go directly to the information they are seeking, rather than having to scan through all the data upfront. There are many variations on the search pattern used across the web. I have shown 7 common patterns below.

—You can click on any of the screenshots for a much larger  image—

01. Simple Search/ Results as List

	Free form text field for entering search terms. Results displayed integrated or on a results page.
	Songza Displays the search results integrated on the same page
	Clipfire Displays search results on a separate page

02. Simple Search/ Results with Refine & Sort Options

	Free form text field for entering search terms. Once displayed, the result list can be refined/narrowed.
	Roost Search results can be dynamically refined by adjusting the filters on the left.
	LLBean Search results can be narrowed by drilling into one of the offered categories.

03. Simple Search/ Grouped Results

	Free form text field for entering search terms. Results are displayed, already grouped.
	Flickr Displays the search results in groups, across tabs: Photos, Groups, People…
	Spotlight on the Mac Displays search results in groups by Kind: Document, Image, Folder…

04. Pre-Filtered Search / Results

	Free form text field for entering search terms, with category selector available for pre filtering the results.
	Ask Provides categories as tabs above the search field. Options to search within: Web, Images, City News.
	Amazon Provides categories as a select box next to the search field. Options to search within: Accessories, Books, Electronics…

05. Criteria Based Search/ Results

	Multiple criteria must be entered to perform the search. Results usually displayed in a sort-able grid.
	Travelocity Requires multiple criteria to perform search. Results are displayed in a matrix for easy comparison, and in a grid that can be sorted.
	Realtor Requires at least one selection to perform search. Results can be sorted at a column level.

06. Simple Search w/ Advanced Search Alternative (Criteria Based Search)

	A simple search is available by default, and the advanced search allows multiple criteria to be specified.
	Google Simple free form search is the default. Criteria based search is available on the ‘Advanced’ search screen.
	eBay Pre-filtered search is the default. Criteria based search, and a list of saved searches is available on the ‘Advanced’ search screen.

07. Saved Searches

	Users can explicitly chose to ‘Save a search’ that they can run again later, or request notification of matching results when they are added. Note: the search criteria is saved, not the result set. ‘Recent Searches’ may also be cataloged and displayed.
	Roost Offers an option to ‘Save this Search’. Saved searches are displayed on the right side, and can be selected (run) or removed.
	Indeed Automatically saves and displays all recent searches on the left. Also offers an option to be updated by e-mail when something new matches the search constraints. A separate page provides management of for the ‘saved searches’.

The Show Paradigm: Display everything up front, and let the user explore and organize it

This paradigm has existed in desktop applications since the first GUI. It may also contain a search feature, but the primary focus of the interface is to allow for optimal viewing and organization of the full set of data. Here are 3 common patterns.

01. View Based Lists

	Data containers (views) are displayed on the left, their contents listed on the right. Custom views can be created and are shown beneath the default views.
	Outlook Default views (Inbox, Drafts, Sent, Trash) are available on the left. The highest level views contains all the data, and cannot be removed. Custom views can be added to mange the data views.
	iPhoto Very similar. Actions (buttons in the toolbar) are available for individual or multiple records. Selecting a record discloses more available actions. A pre-filtered search feature is available to quickly find an item. Any refined data set or search result set can be saved as a new view and will show up on the left. ‘Searches’ themselves are not saved.

02. View Based Lists with Facetted Browse

	Views are available on the left, the right pane offers a way to browse the data in a view, and refine the display. Custom views can be created, and will be accessible on the left.
	Songbird Media Player Default views (Music, Movies, TV Shows…) are available on the left. Within a view, the 3 panel browser is available to explore data from multiple facets: Year, Genre, Artist, Album…
	iTunes ery similar. Single or multiple items can be selected and acted upon via action buttons or right-click menu options. A pre-filtered search feature is available to quickly find an item. Any refined data set or search result set can be saved as a new view and will show up on the left. ‘Searches’ themselves are not saved.

03. View Based Lists with Master/Detail

	Views are available on the left, the right pane provides a master/detail list of the view’s contents. Any item in the master list can also be opened in a new window.
	Mac Mail Default views (Inbox, Drafts, Sent…) are available on the left. Items are listed in the top pane, the selected record’s details displayed below. Items can be acted on individually or en masse. Custom views can be added.
	WebTop- Laszlo Mail Very similar. When a new view is created, the list of items is saved, but not the grid display preferences (sort order, showing columns are not persisted).

When To Use:

The Seek paradigm should be used when the user is looking through data they don’t ‘own’ and are looking:

• to see what is available
• for additional information about items (description, details, photos, ratings)
• to compare multiple items (homes, cars, flights)
• to consume items ( buy, play, read, vote on)

The user may want to save the search criteria they have entered so they don’t have to re-enter it again in the future. Saved searches can be presented in a variety of ways, typically displayed on the right side of the screen or on a separate page.

The Show paradigm should be used to present data the user (or user’s institution) ‘owns’. Data examples include:

• Employee records
• Songs/Audio/Video
• Files/documents
• Connections (friends, family, colleagues)
• Photos
• Sales Leads
• Customers/Accounts
• Bank/Credit transactions
• E-mail messages

The user will typically want to categorize the items into views-which can be accessed later to show items that have certain similar attributes. Default views are presented at the top. Actions may be applied to one or more items in a view, often to provide a more efficient mechanism for bulk transactions (delete, rate, e-mail, label, add to playlist, upload, mark as flagged, update). Items may also be opened individually, typically in a new window.