Diaporama : must have, nice to have et black list

Il existe de nombreux types de diaporamas. Voici quelques exemples de diaporamas que je considère être comme de mauvaises pratiques, de bonnes pratiques pouvant être optimisées et des exemples à suivre.

Quelques exemples de mauvaises pratiques :
– Psychologies (www.psychologies.com) :
1. Impossible de connaître le nombre total d’actualités mis en avant.
2. Impossible de revenir en arrière en un clic si l’actualité a défilé trop rapidement et qu’on veut la relire.
3. Impossible d’aller sur l’actualité suivante, voire sur la dernière actualité.

Psychologies

Psychologies

 

– Bloomsburys (http://ilovebloomsburys.com) :
1. Impossible de connaître le nombre total d’actualités mis en avant.
2. Impossible de lire l’ensemble des contenus car le défilement est trop rapide.
3. Après le défilement de la dernière actualité, le diaporama affiche de nouveau chaque actualité en « marche arrière » (de droite à gauche), ce qui me donne le tournis…

Bloomsburys

Bloomsburys

 

– L’Automobile Magazine (www.automobile-magazine.fr) :
Dans les standards, le titre de gauche (qui correspond à l’actualité qui s’affiche dans la partie de droite) doit avoir une couleur différente pour qu’on comprenne rapidement à quelle actualité correspond l’image affichée. Or dans ce site, il n’y a aucune différentiation.
De plus, normalement, quand on clique sur l’actualité de gauche, l’image associée doit s’afficher dans la zone de droite. Or dans ce site, au clic sur l’actualité de gauche, on arrive sur une nouvelle page.

L'Automobile Magazine

L’Automobile Magazine

 

– Zara (www.zara.com) :
1. Impossible de connaître le nombre total d’actualités mis en avant.
2. Impossible de revenir en arrière en un clic si l’actualité a défilé trop rapidement et qu’on veut la revoir.
3. Impossible d’aller sur l’actualité suivante, voire sur la dernière actualité.
4. Le diaporama prend tout l’espace de la page et empiète sur la barre de navigation (la rendant d’ailleurs illisible quand l’image est noire).
5. Défilement des images de bas en haut (original, certes, mais de mon point de vue, s’il y a bien un domaine dans lequel il faut limiter l’originalité, c’est bien en ergonomie !).

ZARA

ZARA

 

Quelques exemples de diaporamas corrects mais qui pourraient être optimisés :
– M6 (www.m6.fr) :
Il aurait été intéressant de connaître le nombre total d’actualités.

M6

M6

 

– TF1 (www.tf1.fr) :
Il aurait été intéressant de pouvoir cliquer sur l’actualité que l’on souhaite (pas uniquement sur la suivante et la précédente).

MYTF1

MYTF1

 

– SNCF (www.sncf.com/fr) :
J’aurais préféré que la flèche indiquant « passer à l’actualité suivante » soit positionnée à droite, et pas à gauche.

SNCF

SNCF

 

– Le coq sportif (www.lecoqsportif.com) :
Presque parfait… Il aurait été intéressant de pouvoir cliquer sur l’actualité que l’on souhaite (pas uniquement sur la suivante et la précédente).

Le coq sportif

Le coq sportif

 

Quelques exemples de bonnes pratiques :
– The Daily Beast (www.thedailybeast.com) :
1. Affichage clair du nombre total d’actualités mis en avant.
2. Possibilité d’aller sur l’actualité suivante et sur l’actualité précédente via des libellés explicites ayant une taille suffisamment grande.
3. Possibilité de découvrir le contenu de chaque actualité sans être obligé de cliquer dessus.
4. Possibilité de cliquer directement sur l’actualité que l’on souhaite.
5. Possibilité d’arrêter le défilement automatique des actualités.

The Daily Beast

The Daily Beast

 

– UGC (www.ugc.fr) : 
1. Affichage clair du nombre total d’actualités mis en avant.
2. Possibilité de cliquer directement sur l’actualité que l’on souhaite.
3. Possibilité d’arrêter le défilement automatique des actualités.
4. Temps de défilement automatique des actualités suffisamment long pour permettre de lire tous les textes affichés.
5. Indication précise du temps de défilement.

UGC

UGC

 

BREF, de mon point de vue, le diaporama le plus proche de la perfection est celui d’UGC ! 🙂

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s