Gallery Design pattern

Problem summary

The user needs to browse a series multiple images in a high resolution.

Example

mmm.dk The gallery at mmm.dk focuses on providing the user with multiple navigation options. To go to the next image, the user can either click the top navigational tabs, click “Næste” (next), click the “Næste” button below the image, click one of the thumbnails below the main image, or use his or her keyboard arrow buttons.

Usage

  • Use when the user needs to browse through a series of images in a sequential way.
  • Use to enforce a sense of beginning and end.
  • Use when the user would like as much screen real estate as possible reserved for displaying images in high resolution.
  • Do not use when the purpose is to give the user a quick overview of multiple images at one time

Solution

A gallery consists of multiple images that can be browsed one by one by navigating between them. Only one image is viewed at a time. Often, several different options for navigating the gallery is provided in order to accomodate several different browsing behaviors of the different kinds of users browsing the gallery. Similar to almost all galleries is stating the context the current image image being views as in “Image 2 out of 18 images”, the shorter “2 out of 18”, or merely “2/18”.

Navigation options often include

  • Previous and next image buttons
  • A series of thumbnail images arranged in one of the following ways:
    • Previous- and next images with links to these images
    • The 2 or 3 of the nearest images (previous 2 or 3 and next 2 or 3 images) with links to these images
    • A list of all images in the gallery arranged in a grid – often with 3, 4, or 5 images in each row.
  • A text link after the image caption text saying “Next image”, “Next”, or the title of the next image.
  • Tabs with image numbers linking to each image in the gallery.
  • Clicking the current image itself tend to yield one of two effects: (1) Zoom the image or (2) navigate to the next image
  • Keyboard arrow key listeners: left arrow fires a “show previous image” event, right arrow fires a “show next image” event.

Tips when designing a gallery

Provide thumbnails and numbers

Thumbnails allow the user to find out where he or she is in the gallery: the context of the current image. Thumbnails also provide a great way to keep the user in the flow of going to the next image; if the image seems interesting in thumbnail mode it might be worth a click from the user’s perspective.

Listing the gallery images as numbers allow for quick navigation. Highlight the current image to let the user know where he or she is in the gallery: the context of the current image.

Decide on auto (slideshow) or manual (or both)

Galleries (or slideshows) work in one of two ways: either they switch automatically from image to image after a set time interval, or buttons and other navigation elements are provided to let the user browse through images manually. Some galleries provide pause buttons and thus provides a mix between the two.

Reload the entire page or change only the important parts

Newer galleries tend to be based on javascript where only the image, its context, captions, and comments are changed as opposed to having a complete page reload each time the user browses to a new image. This javascript way of browsing allows for much quicker navigation between images and provides a much more smooth and pleasing experience from the users perspective.

Rationale

Galleries has been heavily used by media sites relying on banner impressions for a living to get as many pageviews out of the user as possible. A gallery with 20 images that shows in separate page views yields a much bigger returns in banner impressions than having an article with 20 images beneath each other. However, as the javascript galleries, where only part of the page is reloaded, becomes increasingly more popular, the days of the gallery with separate page loads seems more and more outdated. If you are still aiming for as many banner impressions as possible, consider having the banners change as well for every time the user browses to a new image.

Sources

1 Slideshows In Web Design: When And How To Use Them by Matt Cronin at smashingmagazine.com

More example images of the 'Gallery' pattern

  • www.bbc.co.uk

    Clean gallery at BBC's website.

  • www.vogue.co.uk

    On the British vogue website, galleries are displayed in a modal box where a top banner is automatically reloaded every time the user clicks the next button.

  • www.b.dk

    Full screen gallery at b.dk

  • www.flickr.com

    Flickr.com has its previous and next navigation in the right hand sidebar, which also provide geographical info about the picture.

View more example screenshots

43 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
via Ad Packs

Browsing Design patterns

|
Vote down Vote up
Out of 34 votes, 38.24% like this one.

Example images

  • www.bbc.co.uk
  • www.vogue.co.uk
  • www.b.dk
  • www.flickr.com
  • facebook.com
  • cssremix.com
  • ing.dk
  • www.bbc.co.uk
  • screenshot
  • www.latimes.com
  • www.imdb.com
  • www.asos.com
View all 29 example screenshots

Related articles