In this modern era you can very well stumble across quality animated slideshow scripts, but how can we design a good slideshow interface to use these scripts on?
In this article we’ll analyze the current design trend when it comes to slideshows. We’ll start by taking a look at common uses of slideshows but also alternative and creative solutions. As you probably know, we can define a slideshow as a collection of items that can slide within a container. The content of every slide will be revealed for a fixed amount of time within the container.
A slideshow is a great solution to save space in a web layout and to catch the user’s eye with animations. Since slideshow scripts for popular javascript libraries are everywhere, this technique is becoming a little bit overused. This is the reason why, we would like to show you how you can still use a slideshow to make your website stand out without falling into mediocrity.
The Standard Slideshow
The first example is dedicated to the standard slideshow pattern. As you can see from the picture, it’s an animated slideshow with a non numbered navigation. Although this is the most utilized slideshow pattern of all, let’s try to understand why this example stands above the rest. First off, the animation is not a common fade or slide. It’s a slide with a subtle easing, that gives to the animation a personal look.
There’s a lot of space around the slideshow and the controls that creates a very elegant and subtle feel. The last important detail is the number of slides. By using a small amount of slides you’ll be able to ensure that all the slides will be viewed. If you use too many slides the user will be probably be repelled.
The Left/Right Slideshow
This is another very common slideshow pattern in web design. The container shows a fixed number of slides and the left and right controls make it possible to scroll left or right and reveal the next slides. Apart from the websites great design, there’s a detail in this example that makes this slideshow uncommon: the image at the center will never slide.
Your users are not expecting it and it’s a detail that you’ll never forget. Basically when you scroll left or right, in a normal slideshow all the three images will scroll in the selected direction. In this case the featured project in the center will remain in the same position, and the three slides will scroll behind it. If you take a look at the website you can delve into it and understand why it’s so different.
Another stand-alone detail is the slide up effect that every project name has. If you click on a project name, the description will slide up, without the necessity to go to the actual project page. It’s a slideshow with a different approach and an internal slide up effect. This is a great example of how it’s possible to use a common design pattern and take it to another level.
Different Location Slideshow
This pattern was very common when the first version of Flash became readily available. When you click on an element, something changes in another part of the website. In these days it seems to be less popular, but it could be useful in some cases. If you take a look at our example, when you click on the thumbnail images at the bottom of the page, the main image will be revealed in the iPhone illustration.
This is a clever slideshow example. The designer probably needed to show some screenshots of the iPhone app, and instead of using an overused lightbox effect (that is what the user probably expects) found the solution to show the screenshots directly in the iPhone illustration.
This approach has two main goals: avoiding images overlay and showing the screenshots in their real environment, an iPhone. When you click on the thumbnails you get the feeling that you’re currently seeing the real application on the iPhone, and you can better understand how the application works. When you use a screenshot outside the context (the iPhone in this case), it’s not so immediate for the user to understand it.
The Hover Slideshow Effect
This is another really common slideshow pattern that uses a small amount of space withiin the area of design. It can also relay quite a bit of information if you hover over the labels. In this particular example from Threadless, hovering over the labels will show an image related to that specific label.
If you click on the label you’ll be redirected to the right section of the website. It’s like a navigation menu with more information associated to the menu item. There’s a big debate on the Internet these days on subject matter of hover effects and hiding information beneath hovering.
The reason why these techniques are so discussed is that in touchscreen devices like the iPad or the iPhone there are no hover states. If this is true, it’s also true when you tap on an element containing a hover effect, the information will be shown on devices such as the iPad. And at the second tap you’ll be taken to the link specified. Point being, you shouldn’t avoid hover effects because you believe mobile devices do not have the capability of supporting them, as this is untrue.
The Full Screen Slideshow
Now we’re entering to the top chart zone. This is an example of one of the best full screen slideshow ever designed. You have two arrows at the top right corner of the website and when you click on one of them, the entire product page will shift and slide, revealing yet another product. This is beautifully designed and it gives the feeling as though you’re purchasing the product from a live store.
If you don’t immediately warm to the slideshow idea, there’s always a normal menu at the top left corner that will let you navigate between products within the slideshow. The combination of a great slideshow and a menu fallback is a state of the art full screen slideshow.
Numbered Slideshows
We’re closing this article with a great example of all previous patterns combined in one slideshow. Take a look at the screenshot to understand the power and simplicity of this approach. The slideshow on this page is the entire website. You have multiple controls, the left/right arrows and the numbered controls at the bottom.
After the numbered controls you have the website menu items, that will show the content of every section directly in the slideshow viewport. It’s the perfect slideshow. You can’t miss a section of the website, the navigation is clear, you’ll be totally captured by the slideshow and after navigating through it you visited the entire website.