Slideshow

Problem

You need to display a series of related information, with comparable content in terms of length, without consuming a considerable amount of vertical space.

Solution

When you have a series of related content that is extensive but not considerably important, you can save vertical space by having all pieces of that content arranged horizontally, placed virtually beyond the width of the device, while keeping a window — generally with the same width of the device — that works as a viewfinder for the list. Users can only see one item of the list at each time but have some method for traverse through the list. The SLIDESHOW is a common pattern on the web, and was previously formulated as a pattern for mobile in Designing Mobile Interfaces. It is commonly used with images, although it can be successfully implemented with text, or image and text. Each slide can be simply used to display information but can also work as a link.

However, do not use this pattern for presenting critical information. Since only one item will be visible at any time and users may not understand that they can scroll through the list, hidden content can easily go unnoticed. The SLIDESHOW is most suitable for presenting more casual information like a gallery of images.

Although you can use slides with different content in terms of length, it is a good idea to keep the slide height constant across slides to prevent the layout from moving up and down between slides.

Interaction Details

Signalize that additional content is hidden, moreover, use that sign as a hint of how to reveal it. An arrow or an index of the list (Figure 6.47) are commonly used to solve this problem. Alternatively, you can display a portion of the previous and following images to alert users that more content is available — closer to the behavior of what is usually described as a carousel1.

For scrolling through the content you can use one of these approaches or a combination of them:

  • Slides change automatically without any control of the user.
  • A tap on the slide to make it move to the next one; if this is the only method for navigating the SLIDESHOW, it has the inconvenient that if you have a long list and want to go back one slide, you need to scroll through the entire list.
  • You can use a “next” and “previous” buttons for scrolling through the slideshow; arrows or textual descriptions are usually used for this.
  • Use a swipe gesture, which is probably the most elegant and a natural of the alternatives because you are directly manipulating the content; however, because of its relative novelty it is harder to be discovered and more difficult to implement2. Whenever possible try to take advantage of the swipe gesture to traverse trough the gallery, But it is a good practice to provide a fallback — a button — for devices that may not support gestures; and for users who may not understand it or are not used to this kind of interaction.

Nevertheless, implement an animation between each slide to help users grasp what is happening. A crossfade is common with this type of pattern, but an animation of the section sliding in and out can provide a better affordance, particularly if a swipe is used to move between slides.

Web Design Patterns for Mobile Devices
Figure 1. SLIDESHOW index.

Provide some feedback of the user’s position within the list. It can be done by using an index of the list (Figure 1), and if it is important to identity each slide, you can number them. Markers can also work as buttons that link to the corresponding slide, although they need to be large enough to work efficiently. Thus, you should always provide an alternative method for scrolling through the list.

Web Design Patterns for Mobile Devices Web Design Patterns for Mobile Devices
Figure 2. Airbnb’s product page.

The Airbnb website has two SLIDESHOW galleries in the same page, and each one implements a different method for browsing the gallery: one only works with a swipe (Figure 2, left image) and one only works with buttons (Figure 2, right image). Although they are used for different purposes and are visually distinct, it can still confuse users and it would be expectable that at least the interaction worked identically.

***

Web Design Patterns for Mobile Devices
Verge mobile, 04/2012
Web Design Patterns for Mobile Devices
Boston Globe, 04/2012
Web Design Patterns for Mobile Devices
Etsy, 04/2012
Web Design Patterns for Mobile Devices
Microsoft mobile, 04/2012

  1. http://developer.yahoo.com/ypatterns/selection/carousel.html 

  2. http://lmjabreu.github.com/Swipe