Carrousels d'images dans la conception Web - Avantages et meilleures pratiques

Il ne manque pas de présentations de carrousel sur le Web. En fait, cette tendance n’a fait que grandir au cours des 5-10 dernières années avec plus de soutien de navigateur maintenant que jamais auparavant. Mais les carrousels d'images valent-ils vraiment la peine? Quels types d'avantages produisent-ils et comment devraient-ils être utilisés de manière productive dans une mise en page??

J'aimerais partager quelques tendances communes, exemples en direct et idées pour les concepteurs Web intéressés par les carrousels d'images. Ces curseurs dynamiques sont très controversés, mais je pense qu’ils ajoutent de la valeur quand ils sont conçus dans le bon contexte..

Carrousels de produits pour le commerce électronique

Le monde du commerce électronique regorge de carrousels en rotation sur les pages d'accueil et les pages de produits. Le but est de maintenir une densité d'information claire avec des photos et du texte raconter une histoire unique mais précieuse pour aider à vendre des produits.

Il y a deux placements principaux pour un curseur de produit de commerce électronique:

1. Sur la page d'accueil d'un magasin
2. Sur une page de produit

Ils travaillent tous les deux différemment mais servir le même objectif - vendre des produits de manière visuelle.

Exemple 1: Au Lit Fine Linens - page d'accueil

Consultez la page d'accueil de Au Lit Fine Linens, that utilise un carrousel à rotation automatique plein écran montrer différents produits, tels que couettes, oreillers et couvre-lits.

Les images prendre toute la largeur de la page d'accueil, et ils apparaissent bien au-dessus du pli. En fait, ce curseur devrait être la première chose à attirer votre attention lors de la première arrivée sur la page. Chaque diapositive mène à une page différente du site pour guider les clients à travers l'expérience d'achat.

Ce curseur peut être un peu intimidant lors du premier atterrissage sur la page, mais avec le lien de bouton et texte superposé cela peut aussi être très encourageant pour les visiteurs qui veulent juste plonger et magasiner.

Exemple 2: Etui de téléphone Eden - page produit

Vous pouvez voir un exemple plus spécifique sur la page de produit du boîtier de téléphone Eden. Il utilise un curseur à rotation automatique montrer des images du produit.

Je trouve ça un peu “trop” dans le monde du commerce électronique. Quand je cherche un produit, je veux être en contrôle de la commutation entre les images.

Le meilleur choix est de faire une galerie d'images avec contrôle donné au visiteur. Par exemple, la page Design by Humans utilise vignettes pour chaque photo ce qui est beaucoup plus encourageant et donne plus de contrôle à l'utilisateur.

Carrousels de portefeuilles Web

Les portefeuilles de sites Web en ligne sont un peu différents car ces diapositives ne clique pas toujours vers une autre page. Il est vrai que certains mèneront à une étude de cas ou à un article sur un projet, mais de nombreux carrousels sur des sites Web de portefeuilles sont simplement destinés à montrer le travail visuel.

Exemple 1: Biboun - page d'accueil

L’artiste française travaillant sous le nom de Biboun a une curseur carrousel sur la page d'accueil avec des extraits d'œuvres d'art. Les diapositives individuelles mènent aux pages internes du portefeuille qui couvrir un projet entier avec plusieurs photos.

C'est probablement la meilleure façon de faire un slider sur un site de portefeuille. Présenter une liste aléatoire de travaux est inutile à moins que ces œuvres spécifiques aient une raison d'être présentées..

Toutes les pièces sont exquis dans le curseur de Biboun, et ne prend pas beaucoup de place non plus. Bien que je sache que certaines personnes détestent les diaporamas à rotation automatique pour une bonne raison, avec une mise en page aussi minimaliste, j'ai de la difficulté à me plaindre de cette fonctionnalité.

Exemple 2: site Web d'Aaron Blaise - page d'accueil

J'aime beaucoup l'exemple trouvé sur le site web d'Aaron Blaise parce qu'il présente son travail en tant que portfolio, mais utilise principalement ce site pour vendre ses vidéos d'art. Aaron Blaise a travaillé chez Disney pendant quelques décennies et il a les compétences pour le prouver..

Bien que le curseur de la page d'accueil de son site effectue une rotation automatique, je ne le trouve pas incroyablement ennuyeux ou déplacé. Chaque diapositive a un peu de contenu pertinent pour l'image, et ça aide Aaron attirer l'attention sur ses dernières leçons vidéo qui enseignent aux jeunes artistes comment maîtriser des compétences spécifiques.

Un excellent carrousel de portefeuilles se concentre sur les visuels, et conduit les visiteurs plus loin dans le site. Si vous pouvez obtenir ces deux choses, je ne serais pas contre une telle fonctionnalité dans un site Web de portefeuille personnel.

Tendances de design communes

Si vous regardez certains de mes exemples ci-dessus, vous remarquerez qu'il existe généralement deux types de curseurs différents: plein écran et largeur fixe.

Ces choix stylistiques souvent se rapporter à la mise en page et à combien de contenu il peut contenir. Si une mise en page couvre toute la largeur de la page, il est également judicieux d'élargir le curseur. Mais cela vous oblige aussi à trouver des images de haute qualité qui a toujours fière allure en plein écran sur des moniteurs de grande résolution.

Personnellement, je préfère le style à largeur fixe, comme vous le verrez dans les deux exemples de portfolio d'art. Ceux-ci sont beaucoup plus facile à contrôler, et ils sont souvent pas aussi grand - rendant plus facile pour les visiteurs tout simplement les ignorer s'ils le souhaitent.

Considérez également la valeur des diapositives à avancement automatique, et comme c'est difficile pour les utilisateurs d'attraper ce contenu. Il existe une excellente étude de cas réalisée par le groupe Nielsen Norman et montrant qu'il vaut mieux ne pas avoir de curseurs à avance automatique.

Je suis à bord avec cette approche dans le sens où il est moins intensif en mémoire avec moins d'animations et de mouvements dans le navigateur, et la plupart des gens n'aiment pas non plus les carrousels à rotation automatique - et vous devriez toujours répondre à votre public.

Cependant, je ne peux pas dire que ça ne vaut jamais la peine d’ajouter un curseur automatique, surtout qu’avec les curseurs statiques, n'obtiens pas autant de vues, et vous devez aussi faites de votre première diapositive le plus important autant d'utilisateurs ne passeront pas à la diapositive suivante. Décider de faire un curseur en rotation automatique ou non est malheureusement un zone d'essais et d'erreurs.

Ce qu'il faut éviter à tout prix

Voici une chose importante que je pense personnellement tombe sous “éviter à tout prix”. Regardez ou cliquez sur la capture d'écran ci-dessous, et essayez de deviner ce que cela peut être.

Le site Web du café Yozenn utilise un curseur d’en-tête plein écran. Elle ne tourne pas automatiquement, ce qui est bien, mais les diapositives aussi servir uniquement à la décoration.

Les images ne lie pas n'importe où, et ils montrent une petite poignée de produits. Ils pourraient tous être juste ajouté au fond de la page d'accueil sans le curseur pour économiser la confusion et les kilo-octets supplémentaires de JavaScript.

Je dirais que cette fonctionnalité de glissement d'arrière-plan n'ajoute pas beaucoup de valeur à un site Web déjà à l'étroit. Si les images comportaient des liens ou un texte d'accompagnement, elles seraient au moins plus pertinentes..

N'hésitez pas à utiliser des images dans votre en-tête qui occupent toute la page, mais si elles ne pas créer de lien ou offrir des informations authentiques alors ne les transformez pas en carrousel.

Fonctionnalités interactives

La façon dont les utilisateurs naviguent dans un carrousel affecte la conception elle-même. Il ya un variété de styles de navigation, mais ce sont les plus populaires:

• Navigation par points
• Flèche de navigation
• Navigation par vignettes
• Liste des liens ou des éléments de titre

Le plus commun est le navigation par points que vous trouverez sur des centaines de sites modernes.

Exemple 1: Chic at Home - page d'accueil

Chic at Home est un bon exemple en utilisant trois petits points sous le curseur pour désigner la navigation. Chaque image pivote automatiquement et le point correspondant de la série se remplit de noir. Les deux autres points vides dénoter des diapositives potentielles pour les utilisateurs à parcourir.

C'est un modèle de conception populaire que beaucoup d'utilisateurs reconnaissent déjà. Il tombe dans la même catégorie que le menu hamburger que beaucoup de concepteurs n'aiment pas, mais les utilisateurs le reconnaissent déjà, et instinctivement savoir comment l'utiliser.

Exemple 2: Pure Cycles - page d'accueil

La page d’accueil de Pure Cycles utilise un combinaison de navigation par points et flèches. De cette façon, les utilisateurs ont la navigation en avant et en arrière, mais voir aussi le “global” la navigation par des liens de points dans le bas.

En fait, je trouve difficile de voir les liens de points dans cet exemple. La difficulté avec les diapositives visuelles est que de nombreux éléments ne sont pas faciles à distinguer. Par conséquent, les flèches et les points peuvent se fondre facilement dans le fond.

Exemple 3: IGN - page d'accueil

Sur la page d'accueil d'IGN, vous trouverez un autre carrousel à rotation automatique qui utilise liens de titre pour la navigation. C’est très courant pour les éditeurs qui veulent vendre des titres plutôt que des produits. Chaque lien mène à la diapositive individuelle qui finit par mène à la page de l'article.

Ces liens pourrait être remplacé par des vignettes, ou même inclure des vignettes de chaque histoire - mais le l'aspect visuel est montré dans le carrousel, si omettre la vignette économise réellement de l'espace.

Différents sites Web utilisent différents styles de navigation pour différentes raisons.. Considérez le but de vos visiteurs, et concevoir pour la meilleure expérience utilisateur.

Plats à emporter

Vous devriez viser à produire une valeur réelle, ou des informations supplémentaires avec un carrousel. C’est peut-être une information que le visiteur n’avait pas auparavant, ou cela peut donner lieu à des pages que le visiteur n’aurait peut-être pas trouvées autrement..

Essayez d'éviter les carrousels à rotation automatique, et ne les utilisez que sur les principales pages de destination (la page d'accueil étant un exemple). Tant que le carrousel a un but, et ne ressemble pas à une annonce, votre conception devrait bien faire.

Si vous recherchez plus d'informations sur les carrousels Web, consultez certains des messages suivants:

• Carrousels de Brad Frost
• 8 Exigences UX pour la conception d’un carrousel de page d’accueil conviviale
• Ergonomie du carrousel: conception d'une interface utilisateur efficace pour les sites Web avec surcharge de contenu