Overview by Detail

Problem

Users need to inspect objects that are part of a set

Solution

Show an overview of all objects and display object details of a selected object on a new page

From www.macromedia.com

Use when

You are designing a Web-based Application or any other site where image collections are browse-able.

How

Show the overview of all objects in the set, or a part of it when the set is too large and a List Builder or Paging is used. Each object is selectable by clicking on it's name and/or other identifying label. Make both images of the item and the label clickable if relevant to create a Enlarged Clickarea. Selected objects are shown on a new page in their full glory.

When the screen-space permits it, combine both the overview and the detail view on the same page.

Why

People like to work from overviews and the overview is usually the main View they are working in. Overviews should contain enough information to select objects for a particular purpose. The detailed view then shows the object with all the details that cannot be shown otherwise, because they are not relevant or because it is too much information to show in the available space. This pattern underlies many other patterns such as the Image Browser and List Builder or Panning Navigator

More Examples

In this innovative example users see a miniaturized version of a document on the left and the text itself on the right.

At Flickr, a typical use of overview by detail is found when browsing images:

Comments

0 comments have been added to this pattern