Use thumbnails, item views, and a browsing interface to create a familiar structure for managing photos, videos, and other pictorial items.
People use your software to work with lists or collections of pictorial things: photos, drawings, video clips, and so on. The list might be in a web page, or in an application, or both. It might allow editing by the owner of the content, or it might simply show the content to the public for browsing, viewing, and comments.
This is a distinct style of application that many people recognize. It is also a guild of patterns—a set of patterns linked together and supporting each other in predictable ways. Once someone sees a Thumbnail Grid of images or videos in the right context, she knows what to expect: browse, click to view, set up slideshows or playlists, and so on.
Patterns and other components that often play parts in this guild include:
- Thumbnail Grid
- One-Window Drilldown
- Two-Panel Selector
- Tabs and Collapsible Panels
- Button Groups
- Trees or outlines
- Keyboard Only
- Sharing Widget
- Search box
- Social comments and discussion
Set up two principal views: a Thumbnail Grid of the items in the list, and a large view of a single item. Users will go back and forth between these. Design a browsing interface and associate it with the Thumbnail Grid to let users explore a large collection easily.
The Thumbnail Grid
Use this pattern to show a sequence of items. Many Picture Managers show a small amount of metadata with each item, such as its filename or author, but do this with care, as it clutters the interface. You might offer a control to adjust the size of the thumbnails. There may also be a way to sort the items by different criteria, such as date, label, or rating, or to filter it and show only the starred items (for instance).
When a user clicks on an item, show it immediately in the single-item view. Applications often let the user traverse the grid with the keyboard—for example, with the arrow keys and space bar. (See the Keyboard Only pattern.)
If the user owns the items, offer ways to move, reorder, and delete items at this level in the interface. This implies having a multiple-selection interface, such as Shift-select, checkboxes, or lassoing a group of items with the pointer. Cut, copy, and paste should also work in applications.
You can offer slideshow or playlist functionality to all users at the Thumbnail Grid level.
The single-item view
Show a large view of the selected image (or a player, for a video). Display metadata—information about the item—next to it. This view can be next to the Thumbnail Grid if the window is large, or it might replace the area used by the grid. In practice, this means choosing between a Two-Panel Selector and a One-Window Drilldown. See Chapter 5 for these list-related patterns.
If the interface is a website or is otherwise web-connected, you might choose to offer social features at this level. Comments, liking or thumbs-up, and sharing might be here; see the Sharing Widget and other patterns in Chapter 9. Likewise, tagging or labeling can also be done here, either privately or publicly. An “other items you may like” feature is sometimes found in web-based public collections.
Editing features for individual items will live here, also. For instance, a photo manager might offer simple functionality such as cropping, color and brightness adjustment, and red-eye reduction. Metadata properties could be edited here, too. If a full editor is too complex to present here, give the user a way to launch a “real” editor. (Adobe Bridge, for example, lets the user launch Photoshop on a photo.) Use Button Groups to maintain a simple, comprehensible visual grouping of all these features.
Link the item to the previous and next items in the list by providing “previous” and “next” buttons, especially if you use One-Window Drilldown to display the single-item view (which also requires a “back” button). See the Pyramid navigational pattern in Chapter 3.
The browsing interface
The contents of the Thumbnail Grid should be driven by a browsing interface that might be complex, simple, or nearly nonexistent, depending on the nature of the application.
At minimum, most interfaces should offer a search box, either to search an individual user’s items or to search all public items (or both).
Private photo and video management interfaces—especially desktop apps such as Picasa and iPhoto—should let the user browse the filesystem for images stored in different directories. If users can group items into albums, sets, projects, or other types of collections, these should be available in a browsing interface, too. Most also permit favoriting or star- ring of items.
Most apps and sites show the browsing interface above or to the left of the Thumbnail Grid. For highly interactive software, they relate to each other as a Two-Panel Selector: when the user selects a category or folder (or enters a search term), the contents immediately show up in the Thumbnail Grid next to the browsing interface.
Filters are sometimes found here. Adobe Bridge puts filters into its browsing interface; more than 10 properties can be used to slice through a large collection of items, including keywords, modification date, camera type, and ISO.
Websites that host public collections, such as YouTube and Flickr, sometimes use the entire home page as a browsing interface. Sites such as these are faced with an interesting choice: when a signed-in user who “owns” content visits the home page, should she see her own personal collections, or the featured content that the rest of the public sees? Or both?
Picasa and Adobe Bridge, along with iPhoto (above), are desktop applications for managing personal collections of images. Their browsing interfaces—all Two-Panel Selectors—vary in complexity from iPhoto’s very simple design to Adobe Bridge’s numerous panels and filters. Picasa and iPhoto use One-Window Drilldown to reach the single-item view, while Adobe Bridge puts all three views together on one page.
Flickr’s design has been mimicked by many other web-based image and video collections. Browsing images at Flickr is different from browsing in a private, desktop-based application—sets, pools, groups, and users’ public collections are the means by which one explores the Flickr universe. Social elements are critical to Flickr’s vitality, too. But you can still see a Thumbnail Grid, a single-item view reached via One-Window Drilldown, item details, and a Pyramid navigational pattern (previous, next, up).
Even video sites fit this pattern. When you view someone’s YouTube channel, you can choose to see either a Thumbnail Grid, or a list beside a video player (the default). (Both options are shown in this screenshot.) Clicking a thumbnail brings you to the page for that video, where detailed information and discussion are shown. Visitors can browse by looking at playlists, the latest videos added, the most-viewed videos, and the top-rated videos; a search box is also provided, as it is everywhere.
TED’s browsing interface is more complex. Its home page offers a dynamically changeable infographic made up of thumbnails of different sizes. By toggling fields on and off, visitors can narrow down the field of videos and find the ones they want. Rolling over a thumbnail gives item details. Clicking on it brings you to a single-item view, which looks a lot like YouTube’s.
In other libraries
The Image Browser pattern at Welie.com describes some aspects of a Picture Manager.
See my blog post that references this pattern: Notes on Picture Manager