Design Pattern Example

Name

Slideshow Image Viewer

Summary

A Slideshow Image Viewer is a UI component that displays a collection of images within a fixed area. It identifies the range of images available for display, displays a primary image, and provides interactive functionality that allows users to change the image being displayed.

Problem

A designer must present many images in limited screen space.

When to Use

Use whenever the user may benefit from having access to a large number of pictures while viewing a screen with limited real estate.

How to Use

Place the main image on display in a prominent area. Provide clearly marked, obvious controls for navigating the collection of images. Identify the overall number of images in the collection as well as the user's place in the collection based on the photo on display. Provide a way for users to enlarge the overall image and, if appropriate, zoom in and out of specific areas.

Why Use

​The Slideshow Image Viewer provides users with the ability to browse a collection multiple images on a Web page with limited real estate without having to leave the page they are viewing. This is useful when the user is trying to perform a task, such as selecting a hotel, that involves viewing images while consuming a large quantity of information in other forms, such as text.

Example

Picture

Accessibility Considerations

Images should include appropriate markup, such as alt tags.

Additional Considerations

​This pattern typically guides users to view images in sequence, a which may impact user experience goals. To provide additional comfort to users and discourage feelings of information overload, it is good practice for the slideshow to identify the relative place of the displayed image within the overall collection of images. Optionally, provide a way for users to navigate to a separate page dedicated to browsing the image collection.

Supporting References

Update Log

Created by: David DeMumbrum, 10/2012.