L’emploi de sliders dans le webdesign

Premier « guest post » sur Webdesigner Trends : Gaétan de Design Spartan a rédigé pour vous un article sur un sujet très actuel dans le webdesign, les sliders.

Depuis maintenant un moment déjà, nous voyons les pages de nombreux sites agrémentées de javascript pour des effets de rollover, de menus déroulant, de lightbox ou encore de sliders. Nous nous intéressons dans cet article aux sliders et à leur emploi dans le webdesign.

 

 

Qu’est-ce qu’un slider ?

Un slider est un élément présentant du contenu de façon ergonomique, souvent sous forme de diaporama avec une navigation. On les retrouve sous le nom de slideshows (= diaporamas) ou encore de carousels.

Ils peuvent ainsi présenter du contenu de tout type de manière à ne pas prendre trop de place à l’écran et sans rechargement de page intempestif.

Ils sont souvent utilisés pour afficher :

– des images : c’est le cas dans beaucoup de portfolios ou de sites en rapport avec l’image (photographie, graphisme). Il agit ainsi comme un petit diaporama pouvant ensuite renvoyer vers une page au travers de liens.

– des informations : souvent vu dans le cas de sites souhaitant présenter leur produit ou service innovant, on voit beaucoup de sliders présentant de façon claire et concise le fonctionnement du service ou du produit, ou encore ses avantages, etc… Cela est particulièrement utile pour ne pas avoir soit à charger une page de beaucoup d’informations, soit justement de naviguer entre plusieurs pages.

mettre en avant un contenu spécifique : particulièrement apprécié par les blogs pour mettre en avant leurs articles « stars » ou les plus récents. Plus que pour des blogs, lorsqu’il est bien utilisé, un slider peut mettre en avant de façon intuitive presque n’importe quel contenu.

De plus en plus, on voit des sliders remplacer totalement la zone de contenu du site (généralement entre le header et le footer) dans le cas de sites ayant relativement peu de contenu. Cela signifie que le menu de navigation principal renvoie, après un clic, non pas sur une nouvelle page mais fait en général « coulisser » le contenu jusqu’à la page demandée.

 

Comment bien utiliser un slider ?

Aussi amusants qu’ils puissent paraître, les sliders ont leur limite et mal les utiliser peut être un échec. Mais avec ces quelques conseils, vous ne devriez pas faire d’erreur :

Ne surchargez pas en contenu

L’intérêt d’un slider est de pouvoir montrer plus de contenu de façon intelligente et pratique. De ce fait il va de soi que surcharger chaque slide de contenu alourdira la page. De même, il vaut mieux ne pas avoir trop de slides. Par exemple avec une vingtaine de slides, il perd totalement son utilité car il y aurait trop de contenu et retrouver l’information deviendrait vite une galère terrible. On voit en général plutôt entre 4 et 7 slides, voire un peu plus lorsqu’il ne s’agit que d’image. Il faut donc garder à l’esprit que l’objectif d’un slider est de présenter et trouver rapidement un contenu (image, texte, vidéo, etc…).

N’oubliez pas la navigation

Dans le cas d’un diaporama d’images notamment, on peut être tenté de ne mettre aucun lien ni aucun bouton et de juste laisser le timer faire défiler automatiquement les images les unes après les autres. C’est une erreur. Comme dans toute interface utilisateur, il faut que l’utilisateur ait le contrôle. Ainsi, il faut qu’il puisse passer d’un slide à l’autre quand il le souhaite via des liens ou boutons (des petits boutons pour chaque slide ou encore flèches précédent / suivant, les idées ne manquent pas !).

Montrez le nombre de slides

Quelque chose qui est souvent oublié en ergonomie, est que de ne pas savoir où est le commencement et où est la fin peut être frustrant ! Cela rejoint en partie le point précédent sur la navigation, il faut que d’une façon ou d’une autre, l’utilisateur soit conscient du nombre de slides et de là où il se trouve (par exemple 4/7).

Bonne utilisation d'un slideshow

Sur le site de Sprinkle Penny, chaque slide met en avant une caractéristique du service avec peu de contenu ce qui met en valeur celui présent. A noter la place importante de la navigation du slideshow qui permet à la fois de naviguer entre les slides, mais aussi de montrer sur laquelle on se trouve.

Intégrer graphiquement le slider

Des slideshow tout faits, il en existe des dizaines téléchargeables gratuitement. Quelque fois les thèmes graphiques sont agréables à regarder et quelque fois non. Dans tous les cas, gardez à l’esprit que l’intégrer dans le design général du site est nécessaire et cela peut même devenir un élément-clé unique du design, comme nous verrons dans les exemples plus bas.

Radium - bonne intégration du slider dans le design

Radium offre ici un très bon exemple d’intégration du slider dans le design. Cela devient à la fois beau, interactif et surtout unique. Les éléments de navigation sont particulièrement bien intégrés, de même que le contenu des slides.

Les transitions

En général, si on aime bien les sliders, c’est parce qu’ils permettent de mettre du contenu en avant intelligemment, mais aussi et surtout pour leurs transitions ! A vous de réfléchir aux transitions, sachez qu’il en existe aujourd’hui pour tous les goûts, style diaporama, fondu, effet 3D, etc…

 

Un peu d’inspiration avec des exemples de sliders

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

Bonne utilisation d'un slideshow

 

 

Quelques liens et ressources pour aller plus loin sur le sujet :

http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solutions/

http://www.1stwebdesigner.com/inspiration/great-slideshows-web-design/

http://webdesignledger.com/inspiration/55-inspiring-examples-of-slideshows-in-web-design

http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/

 

 

J’espère que cet article vous aura plu et appris ou rappelé certains principes dans l’emploi de sliders en webdesign.

À propos de l’auteur :

Gaétan Weltzer aka Design Spartan est littéralement dépendant au graphisme, à l’illustration et au multimédia. Autodidacte et polyvalent, il adore partager et développer ses connaissances, comme en témoigne son désormais célèbre blog Design Spartan ! Il est également graphiste freelance dans le domaine du webdesign, de la création de sites internet, de l’illustration, de Flash (animations et sites interactifs) et de l’identité visuelle. N’hésitez-pas à le contacter pour vos projets, il mettra son expertise à votre service.

4 commentaires

Laisser un commentaire :

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*