Archives For January 2008

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.