Slideshows: Organizing Web Content for the Best Results
Manoj kumar | 20th June 2018
The Design Problem
You wish to show users a range of images without calling on them to scroll or flick through them manually. This may be on an eCommerce site, a personal website or any other situation in which there are a number of useful and/or interesting images you want to bring to the user’s attention.
The Solution
Slideshows are often used to grab the user’s attention and tease them with the promise of further images or products. It is a popular design pattern in eCommerce, as is evidenced by the image above, taken from play.com. Slideshows enable a number of images, or products to be displayed within a fixed point on the screen. This helps to conserve the amount of space consumed in a web page to display as many images as you would like – although it is recommended that the number of items within the slideshow is not excessive as users may well just navigate away if they become bored of watching a procession of seemingly never-ending images.
Why choose a slideshow?
Slideshows are used primarily in web design as a way of showing potential customers a range of products they might not ordinarily consider, or alternatively to show them recommendations chosen according to their previous purchasing habits. The automatic, revolving nature of images in slideshows relieves the user of having to progress through the images by interacting with the user interface. Keeping the number of interactions expected of the user to a minimum removes obstacles from them viewing these images or products; increasing the chance they will take the time to assess and consider these options. Broadening the user’s pool of considerations in this way means you can target them with products that might not be performing so well, or to simply show them a range of products that they are more likely to purchase given what they have bought previously. Some slideshows do, however, require interaction, through clicking arrows at either end of the panel or some other designated symbol or icon. The benefit of including manual controls rather than implementing automatic movement through the images is the user is given autonomy so they can decide when to move forward or back; saving them from missing an image as the items move around. Many designs employ a combination of both automatic and user-controlled movement. For example, a common feature is a play button that initiates automatic movement through the images. The user can then pause the slideshow and manually skip forward or backward using arrows at either end or, as is quite often the case, small clickable circles.
