(This post is sponsored by Shopify best place for creating e-commerce website )
We see slide shows in many web sites these days. They have been popular since couple years ago.
But does everyone know how to use them?
Slide shows can help us:
1- Showing important information in a compact and concise way on the site.
2- They are entertaining to watch.
3- They can prompt users to a “Call to Action” by clicking on a “Sign Up/In” or a landing page.
Why slides can work better than standard text and content on the site?
For one simple rule:
Users are lazy, they don’t have time and don’t want to think or read.
When they come to your site, they want you to show them the best content and information in the shortest amount of the time with most entertaining way.
Below we will explain some important aspects of a good slide show for better user experience.
What is the difference between using a video and a slide show on a site?
Even short videos have more features and are more complicated than slides shows. They need to get streamed from a source and they need loading time. However, slide shows are instant and immediately available
Slide shows are meant to be played only for few seconds and highlight just couple points. Videos are about telling a story (long or short), and most of the time have sounds and music.
Slides shows can be series of videos, especially when the focus is on showing a gallery of videos. Then videos are the products that site is going to present.
In this slide show each video is a slide that can be played within the slide show.
Timing is important
Setting a good transition time between two slides is important. If it is very slow then viewers may get board and consider it as a static image. If it is too fast it won’t let viewers comprehend the content.
Although below sample have a very nice user interface for the slides but there is not enough time to comprehend each slide and it is a bit too fast. For this speed, slides need to be simpler with less content and more visual.
Combining navigation bar and slide show
Since users will view the slides at the top of the site, it should contain the most important features, values or call to action(s) for the site. In some occasions it is a clever decision to integrate the navigation bar into the slide show.
Below is a good example:
Please note how they used their secondary navigation bar and integrated it with the slide show. With a short paragraph and few images they conveyed the core value of their products and services.
Use slide show for Sign Up or Sign In and Call to Action
As we mentioned above, one of the important use of the slide shows are encouraging viewers to click on sign in/ sign up buttons for going to a landing page.
Sprinkle Pinny site has one goal for their slide show and that is it to increase their “Sign Up”.
Their design of the user interface is so compelling, simple and effective; it doesn’t let users to get lost when viewing different slides. The Call to Action is clear “Sign up”
The button is big enough so you won’t miss it. The use of colors (black and orange) are the so powerful and not too colorful to distract users.
Thrudigital has a simple, minimal design with large space at the top of the site allocated to the slide show.
Each slide show focuses one subject and one call to action button to tell users what to do next.
The big button and the white background work very well to highlight what is important in the slide show
Static vs. moving slides
There are some slides that they don’t move by default till users click on a button or an image.
We see the best sample of it at the http://www.hyperxmedia.com/
The problem is some users may not realize and know they need to click on a button to go the next one. So if slides move after few seconds by default, it can be a good hint for users.
If you want to design a slide show to work just by user’s click ask this question first:
Is it clear for people to click on it? What is the advantage of this?
Zuno site has enough visual clue to tell users this is a slide show and you need to click on thumbnails photo.
Having thumbnails and showing the one that is playing sticks out of the row is a very helpful hint for user about where they need to click to see the next slide.
Nested or multi layered slide show
In Eight8four.com we see a multi layered and a complex slide show. That means each slide holds information to lead to another slide.
The information architecture that nested in this layered format is interesting and complex. The entire site and content are placed in a slide show format that took 2/3 of the home page space.
Interactivity and slide show
nclud.com has very powerful interface. The big slide show on the home page is very innovative.
Within each slide you can click on an item and it changes its position on screen for a better view or goes to another landing page.
Nice use of transparencies, overlaying and information architecture in the site and slide show makes the site very visual, concise and easy to follow. With less amount of text and wise use of images, they placed all-important features within or above the fold.
How much of web space should we allocate to a slide show?
Take a look at the below example, the slide show took the entire fold.
In this case the information that they placed in the slides are the most important messages and points that designers intended to show. Also they wanted to create an environment for users to “wow” them and make sure they take next step.
There is not a certain rule for the space you need allocate to a slide show. It deponds on the design you have for the slides. As you see in above samples, some slide shows can hold the entire information for a site to navigate . However some have just few hints.
Numbers, thumbnails and visual clues for the slides
It is a good practice if you let users know that how many slides are in the slide show.
There are different ways to do it but the common ways are:
1- Adding numbers (see http://www.sprinklepenny.com/
2- Having small thumbnails (see http://zunostudios.com/)
Using slide shows specially with all new JQuery plug-ins that are available is not a hard task to do these days. But it is not enough.
Slide show is a summary, preview, and a trailer of your entire site not just few pictures you choose to show.
It tells users about the content, style, stragegy, core values and messages.It goes beyond a trailer of your web site.
Make sure you study every single part and feature of a slide show before placing it in your site.