Alternate titles: Slideshow.
The user needs to browse a collection of high quality images
- 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
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 accommodate several different browsing behaviors of the different kinds of users browsing the gallery. It is common for a gallery to display 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 for 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 allows 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
1 Slideshows In Web Design: When And How To Use Them by Matt Cronin at smashingmagazine.com
More examples of the Gallery pattern See all 30 example screenshots
User Interface Design Patterns
- Explaining the process
- Community driven
- Jumping in hierarchy
- Formatting data
- Social interactions
- Increasing frequency
Persuasive Design Patterns
- Loss Aversion
- Other cognitive biases
- Gameplay design
- Fundamentals of rewards
- Gameplay rewards