Seek or Show: Two Design Paradigms for Lots of Data

January 29, 2008 — 29 Comments

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.

29 responses to Seek or Show: Two Design Paradigms for Lots of Data

  1. 

    This is a great post. So informative and well-explained! Thanks, Theresa!

  2. 

    Nice overview, nice first post. The icons really helped scanning.

    Now get to theming!

  3. 

    Great compilation! What are your thoughts on visual searches?

  4. 

    Thanks.
    I think visual searches might be a good for the right data sets. I could see searching for homes, books, friends, jeans… things that are photo or illustration based, using a robust visual search (I think Riya is pretty decent). I don’t really understand its usefulness for returning text based results. It is much easier to scan text and numbers when they are presented in some type of list or grid format.
    Do you have a good example of a visual search?

  5. 

    I did come across Kartoo and Thinkmap Visual Thesaurus. Wondered if the benefit is the ability to display more data on one screen than having to page through numerous screens?

  6. 

    A question to “show paradigm 02″, the iTunes example. How do you save the refined data set? I cannot find this function.

  7. 

    To be honest, I haven’t used Thinkmap Visual Thesaurus much, but it looks like it can show around 20 results per screen (then you have to start wiggling the mouse around to find the rest). 20 results are pretty easy to display in a standard list view, so I’m still not won over (although, the visual representation of the data heirachy might work really well for some applications).

    As to paging, I think the best searches return results that can be scrolled through, instead of broken into ‘pages’.

    Good examples of this are:
    LiveGrid by BackBase http://demo.backbase.com/bbsearch/
    LiveGrid by OpenRico, the demo isn’t working at the moment
    The default grid component in both Flex and Laszlo

  8. 

    Hi Martin,
    You can save any refined set of data (list of songs) into a Playlist (I consider the iTunes Playlist to be like a view). Just like in iPhoto, you can save off any set of photos into an Album, or in Mac Mail, you can save any set of messages into a new ‘Mailbox’.

    I hope to elaborate more on the Show patterns in the next couple of posts. There is allot left to explore.

  9. 

    Boxes and Arrows just put out a good article about user behaviors for searching. It ties in nicely with determining which paradigm and pattern to use for certain user expectations:
    http://www.boxesandarrows.com/view/search-behavior

  10. 

    On http://www.parisenvies.com I did something different (although near from some of your examples) :
    Search or refine and see best results live on a map, and when you think your search is good, go to see your results in a list view clicking a button…

  11. 

    Great post, i will translate it in Italian, if i can.

  12. 

    nice.
    some thoughts:
    – the web contains way more information than your computer ever will.
    – the information on your computer is under your organizational control.
    – before there were search engines on the web, there were indexes. That’s how Yahoo! started.
    – only recently has the need for desktop search become urgent, as the amount of information we now store individually explodes.
    – context dictates how you want to find your data. Is it a place? give me a map. is it a point n time, give me a timeline. Is it a photo taken in a point in time at a specific place by a member of my immediate social group… ??
    :)

  13. 

    I’ve always thought that retrievr is a great example of a visual search: http://labs.systemone.at/retrievr/
    :-)

    Dom

  14. 

    I’m having this exact dilema, I’m glad I ran across this post. Very informative. Thanks.

  15. 

    Hi Theresa

    Just wanted to say I thought this was a fabulous post.

    Cheers
    Jessica

  16. 

    Big thanks for this post. It has provided me with a strong direction for our gwt-ext webapp. I like the idea of combining the 2 approaches for the same data. Seek with sensible defaults and refine criteria, and Show with most likely views.

  17. 
    Mahendra Kumar July 15, 2008 at 2:04 pm

    Excellent information Theresa, gr8 and thanks much for these – will be useful while designing the search system.

    thanks again.

  18. 

    Thank you for these useful pieces of information on how to show lots of data. You gave me something to think about when making UI for showing big lists of data.

  19. 

    nice piece on the future of ui and data display, thanks

Trackbacks and Pingbacks:

  1. Ajaxian » Seek or Show: Two Design Paradigms for Lots of Data - February 1, 2008

    [...] Bill Scott clued me in to this interesting first post from Theresa Neil on two design paradigms for handling large amounts of data: [...]

  2. Media Projects BG :: creating PROfitable Internet projects » Archive » Seek or Show: Two Design Paradigms for Lots of Data - February 1, 2008

    [...] Read on @ Theresa Neil [...]

  3. innerHTML » Blog Archive » Seek or Show - February 1, 2008

    [...] interesting exploration of different data presentation paradigms: Seek or Show: Two Design Paradigms for Lots of Data. I’m not positive “seek” or “show” encompasses all the options, but [...]

  4. Javascript News » Blog Archive » Seek or Show: Two Design Paradigms for Lots of Data - February 1, 2008

    [...] Bill Scott clued me in to this interesting first post from Theresa Neil on two design paradigms for handling large amounts of data: [...]

  5. The Blog that Noone Reads » Blog Archive » Seek vs. Show - February 2, 2008

    [...] a great article on differing design paradigms for displaying large amounts of data. Good concepts in there. Great [...]

  6. User First Web » links for 2008-02-02 - February 2, 2008

    [...] Seek or Show: Two Design Paradigms for Lots of Data « Theresaneil’s Weblog Good examples and explanation of seek vs. show. I’ve been around too many applications that use seek when they should use show. (tags: interface ui usability design patterns search) This entry was written by Jason Grigsby and posted on February 1, 2008 at 11:27 pm and filed under Bookmarks. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « Google = :CueCat? You call this news? [...]

  7. Vadi’s Rants :: The Seek or Show Paradigm - February 4, 2008

    [...] I just found something very interesting about two design paradigms that are basically for handling large amount of data. Have a look at this weblog. [...]

  8. outbreak » Content patterns (written on February 9th, 2008 by Marko Mrdjenovic) - February 8, 2008

    [...] recently read an article on design paradigms for lots of data which made me think about what I commonly use when laying out pages. I’ll call this the [...]

  9. The Ultra Rich Search Experience « Theresaneil’s Weblog - February 23, 2008

    [...] 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 [...]

  10. Чужие мысли » Поиск или просмотр: два подхода к организации работы с данными - August 29, 2010

    [...] Поиск или просмотр: два подхода к организации работы с данными Seek or Show: Two Design Paradigms for Lots of Data Источник: Theresaneil’s Weblog [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s