Landing on a website that prominently features a stunning image carousel fills me with satisfaction & delectation. Well that may be somewhat exaggerated, but it’s a good feeling to know that designers and developers work hard to create such amazing content carousels. The problem is that not every website uses a well-functioning carousel – and furthermore many websites don’t even need one at all.
In this post I’d like to cover a handful of ideas useful for website slideshows and image carousels. UI designers have a lot to consider regarding pixel density, screen resolution, browsing device, and especially support for modern code libraries. I’ll be focusing primarily on the design side but keep in mind that how you build each slideshow is also crucial with regard to user experience.
Snappy Response Times
If I was limited to only a single subject I would have to bring up response time. Websites that use big carousels often place them on the homepage where they take up lots of space. Whether images or text or both, slow-moving content brings the experience down to a snail’s pace. Maybe even slower.
This issue almost goes deep enough for me to paint picket signs in remonstration against slow content sliders. These interfaces are meant to be a huge addition to any website. But they’re only additive if visitors can smoothly get between slides and consume the content easily. I feel discouraged and despondent clicking the “next” arrow and waiting 1-2 seconds before the next slide animates.
A strange yet felicitous website for Nicky & Cookie has a perfect example of snappy response sliding. Each page has a big slideshow of content with red arrows located to the right and left sides. Although each page has quite a lot of content the sliders still animate quickly. Content slides at a reasonable pace and keeps you interested during the transition.
Dynamic Carousels
Almost every image rotator or carousel should be considered “dynamic”. This just means the content will update on the page without the page itself reloading. But how this effect transpires is also very important.
One such example is the German website Netzbewegung. Each of the next/prev slides in the carousel are visible on either side of the content rotator. Users can tap+swipe or click+drag to get the desired effect. The rotation is practically instantaneous which feels more interactive and fluid(always a good thing).
I also like the homepage example on Free People which is a women’s clothing outlet. Each slide links to an inner page with new fashions or sale items. But the rotator itself is completely controlled by the user so it doesn’t automatically demand attention. In fact, on first visit you might just assume the site uses a fullscreen background and not even consider the rotator.
Free People sticks the navigation bar right at the bottom of the page. Then as you scroll down it becomes a fixed navbar so you can traverse the site from any location. Since there are other links at the very top of the page this gives plenty of opportunity for new visitors to find exactly what they’re looking for. Definitely a great dynamic slider because it performs well but doesn’t overpower the page content.
Related: Build a Mini Image Gallery Slideshow using Galleria
Mobile Responsive Design
Unless you’ve been hiding out in a bunker since The Cold War, I’d like to assume you know about the popularity of smartphones and responsive web design. Many devices from tablets to smartphones and laptop/desktop monitors currently litter the technological landscape. This means you really can’t assume anything when it comes to maximum or minimum screen resolutions.
Responsive design for content rotators and carousels has been a precarious subject. Since carousel content often requires a decent amount of room on the page, it’s tough to resize and squeeze them down smaller. But if you’re just showcasing images then I would highly recommend using a fully-responsive carousel because they can be supported on mobile.
One of the best examples can be found on Watts Atelier which overall is a delightful responsive website. If you pay attention to the content slider you’ll notice it uses the bottom circle links for navigating between non-adjacent slides. Also the slides themselves lead into deeper pages which should be accessible even on mobile devices.
Transitions are slower than you might expect but still not difficult to manage. Some of the content may grow a little too small on the tiny screens but the carousel is still functional. This is one of those design choices where you have to decide if the carousel is important enough to keep on the page at all sizes, or if hiding it below a certain width is a better solution.
Dot UI Navigation
On the subject of interface design I’d like to mention the significance of dot navigation. You probably recognized this design on the Watts Atelier website but they certainly aren’t the first to come up with the idea. Dot navigation has been around for a long time because it offers a small yet usable solution to jump between content slides.
Another example can be found on Banneton Bakery which doesn’t even use arrows for the navigation. Their content rotator holds photos of various items and locations which you can navigate using the bottom-right corner links. Each circle is large enough to click without hitting the wrong one and the darkened circle represents the currently-visible slide.
To see another style check out the MTV website. Their slider uses boxes with labels of different shows which rotate as you hover between them. You’ll also find large arrows off to the side which give more than enough support to users.
The purpose of dot navigation isn’t to be perfectly circular or to save space. It just offers visitors a method of jumping between content slides which are not directly next to each other. If your content rotator needs 5 or more slides I would highly recommend adding this type of navigation to give visitors a “full picture” perspective.
Closing
There’s no comfortable onesie to snuggle into when it comes to image carousels. Each website has a different need and requires a slightly different interface. I do hope these tips can get you thinking about how to design carousels with purpose and vitality. Try approaching the design from a user’s perspective to imagine how the average person might want to interact with the content.
Our related tutorial can help you build a custom slideshow:
Code a Dynamic Featured Image Gallery Layout using jQuery
Author: Jake Rocheleau
Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau