ReviewDisplay2.0 ENT StyleGuide fr FR
Guide du rédacteur pour l’affichage des évaluations 2.0 Évaluations Clients Entreprise Du feedback de confiance qui incite les gens à acheter
3 janvier 2013
Confidentiel Bazaarvoice
Avertissement Copyright © 2012 Bazaarvoice. Tous droits réservés. Les informations contenues dans ce document :
Sont confidentielles et destinées aux clients de Bazaarvoice. Aucune partie de ce document ne peut être partagée avec quiconque en dehors de votre société ou des partenaires de votre société sans accord préalable de Bazaarvoice.
Sont fournies « telles quelles » sans garantie d'aucune sorte, expresse ou implicite, y compris, mais sans s'y limiter, les garanties implicites de qualité marchande, d'adéquation à un usage particulier ou de non-contrefaçon.
Sont périodiquement mises à jour pour être en phase avec les améliorations et / ou changements dans nos offres de produits.
Peuvent être modifiées sans préavis. Certains exemples décrits dans ce document sont fournis à titre d'illustration et ne garantissent pas de résultat particulier. Vous assumez le risque de l'utilisation de ce document.
Bazaarvoice n'est pas responsable des erreurs techniques ou typographiques qui pourraient être accidentellement présentes dans ce document. Bazaarvoice peut détenir des brevets et / ou demandes de brevet en instance couvrant le sujet du présent document. La remise de ce document ne vous donne aucun droit de licence sur ces brevets, ni aucun droit juridique à toute autre propriété intellectuelle dans un service ou produit Bazaarvoice. Tous les noms de marques et de produits Bazaarvoice sont des marques commerciales ou des marques déposées de Bazaarvoice aux États-Unis et peuvent être protégés en tant que marques ou marques déposées dans d'autres pays. Tous les autres noms de produits, services ou sociétés mentionnés ici sont des marques déposées et noms commerciaux de leurs propriétaires respectifs.
Contactez-nous : 3900 North Capital of Texas Highway Suite 300 Austin, Texas 78746, États-Unis Appel gratuit : (866) 522-9227 | Téléphone : (512) 551-6000 | Fax : (512) 551-6001 www.bazaarvoice.com
Historique des versions : Pour plus d'informations sur les révisions majeures qui ont été apportées à ce document, voir l’Annexe A, « Historique des révisions ».
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Sommaire Liste des illustrations.................................................................................................. v Liste des tableaux ..................................................................................................... vii À propos de ce guide .................................................................................................. ix Public et objet ......................................................................................... x Organisation de ce guide ......................................................................... x Coordonnées......................................................................................... xi
Chapitre 1.
Introduction ........................................................................................... 1 Composantes de l’affichage des évaluations ...............................................2 Affichage des aperçus ........................................................................2 Affichage des évaluations ...................................................................2 Éléments d’affichage du style des évaluations .............................................3 Références en ligne .................................................................................4
Chapitre 2.
Style de l’affichage des évaluations ........................................................ 5 Aperçus des évaluations ...........................................................................6 Aperçus compacts .............................................................................6 Aperçus minimalistes .........................................................................7 Abrégés des évaluations ..........................................................................8 En-tête de l’abrégé ............................................................................9 Résumé des notes..............................................................................9 Résumé des étiquettes ..................................................................... 10 Résumé des attributs ........................................................................ 12 Lien vers la page « Rédiger une évaluation » ........................................ 12 Affichage des évaluations ....................................................................... 13 En-tête de l’évaluation ..................................................................... 14 Profil de l’évaluateur ........................................................................ 15 Date de l’évaluation ......................................................................... 15 Étiquettes de l’évaluation ................................................................. 16 Commentaires de l’évaluation........................................................... 16 Attributs de l’évaluation ................................................................... 16 Bas de page de l’évaluation .............................................................. 16 Mise en page sur une seule colonne ......................................................... 17
Chapitre 3.
Style des fonctionnalités facultatives d’Évaluations Clients..................... 19 L’histogramme des évaluations ............................................................... 20 La comparaison d’évaluations ................................................................. 21 Les badges ........................................................................................... 24 Acheteur vérifié ............................................................................... 24 Évaluateur vérifié ............................................................................. 24 Badge personnalisé ......................................................................... 25
Dernière révision: 3 janvier 2013
iii
Confidentiel Bazaarvoice
Facebook intégré .................................................................................. 26 Images personnelles des clients .............................................................. 28
Chapitre 4.
Style de la page « Rédiger une évaluation »........................................... 30 Formulaire de soumission de l’évaluation ................................................. 31 Page de prévisualisation de l’évaluation ................................................... 35 Page de remerciements pour l’évaluation ................................................. 36
Annexe A.
iv | Sommaire
Historique des révisions .......................................................................37
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Liste des illustrations Illustration 1.
Affichage classique d’un aperçu ..........................................................2
Illustration 2.
Abrégé d’une évaluation ....................................................................3
Illustration 3.
Exemple d’une évaluation individuelle .................................................3
Illustration 4.
Éléments de l’aperçu d’une évaluation .................................................6
Illustration 5.
Aperçu compact ................................................................................6
Illustration 6.
Aperçu minimaliste ............................................................................7
Illustration 7.
Sections de l’abrégé d’une évaluation .................................................8
Illustration 8.
Avant (étoiles par défaut) ....................................................................9
Illustration 9.
Après (étoiles personnalisées) .............................................................9
Illustration 10.
Gamme complète de notes en étoiles personnalisées .......................... 10
Illustration 11.
Avant (résumé des étiquettes par défaut) ............................................. 11
Illustration 12.
Après (résumé des étiquettes personnalisé) ......................................... 11
Illustration 13.
Avant (lien « Rédiger une évaluation » par défaut) ................................ 12
Illustration 14.
Après (bouton personnalisé pour le lien « Rédiger une évaluation »)....... 13
Illustration 15.
Avant (lien « Rédiger une évaluation » par défaut) ................................ 13
Illustration 16.
Après (imitation de bouton pour le lien « Rédiger une évaluation ») ........ 13
Illustration 17.
Sections de l’affichage d’une évaluation ............................................. 14
Illustration 18.
Bas de page par défaut .................................................................... 16
Illustration 19.
Avant (textes d’utilité et d’alerte par défaut)........................................ 17
Illustration 20.
Après (textes d’utilité et d’alerte séparés au bas de la page de l’évaluation)17
Illustration 21.
Format d’affichage de l’évaluation en une seule colonne ...................... 18
Illustration 22.
Fenêtre pop-up de l’histogramme d’une évaluation ............................. 20
Illustration 23.
Icône de l’histogramme ................................................................... 20
Illustration 24.
Affichage de comparaison d’évaluations ............................................ 22
Illustration 25. vérifié) 26
Évaluation avec Facebook intégré (par un évaluateur au compte Facebook
Illustration 26. évaluations »)
Profil d’un évaluateur mis en valeur par Facebook (« Voir toutes mes 27
Dernière révision: 3 janvier 2013
Sommaire | v
Confidentiel Bazaarvoice
Illustration 27.
Images personnelles miniatures en vue pellicule .................................. 28
Illustration 28.
Fenêtre pop-up d’une image personnelle ........................................... 29
Illustration 29.
Éléments de la page « Rédiger une évaluation », 1ère partie .................. 31
Illustration 30.
Éléments de la page « Rédiger une évaluation », 2ème partie ................32
Illustration 31.
Formulaire « Rédiger une évaluation » personnalisé, 1ère partie ............33
Illustration 32.
Formulaire « Rédiger une évaluation » personnalisé, 2ème partie ..........34
Illustration 33.
Éléments de la page de prévisualisation d’une évaluation .....................35
Illustration 34.
Éléments de la page de remerciements .............................................. 36
vi | Sommaire
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Liste des tableaux Tableau 1.
Formats de la date des évaluations ............................................................. 15
Tableau 2. Éléments personnalisables pour Facebook intégré ....................................... 27 Tableau 3. Éléments personnalisables pour les images personnelles des clients ..............29 Tableau 4. Historique des révisions ............................................................................ 38
Dernière révision: 3 janvier 2013
Sommaire | vii
À propos de ce guide Évaluations Clients ™ est un service clients clefs en main qui permet aux vendeurs de recevoir, modérer et afficher des évaluations de clients sur leurs sites web. Ce contenu généré par les utilisateurs aide à convertir davantage de visiteurs en acheteurs et à attirer de nouveaux clients dans votre boutique en ligne. Cette section explique ce qui se trouve dans le guide et la manière dont il est organisé.
Dans cette section
Public et objet
Organisation de ce guide
Coordonnées
Confidentiel Bazaarvoice
ix
Confidentiel Bazaarvoice
Public et objet Ce guide est destiné aux marchands qui intègrent Évaluations Clients à leurs sites web. Ce document montre comment modifier l’apparence de nombreux éléments de l’affichage des évaluations.
Organisation de ce guide Ce guide est organisé de la manière suivante :
Le Chapitre 1, « Introduction », contient une description générale des éléments d’affichage, des instructions générales pour personnaliser ces éléments et d’utiles références du secteur concernant CSS et HTML.
Le Chapitre 2, « Style de l’affichage des évaluation », fournit des informations détaillées à propos des sections de l’affichage des évaluations et des éléments dont vous pouvez modifier le style.
Le Chapitre 3, « Style des fonctionnalités facultatives d’Évaluations Clients », décrit les modifications du style des fonctionnalités optionnelles d’affichage des évaluations que vous pouvez effectuer.
Le Chapitre 4, « Style de la page « Rédiger une évaluation », décrit les pages individuelles générées par le cadre iFrame « Rédiger une évaluation » d’Évaluation Clients, ainsi que les éléments de chaque page.
Si vous avez des questions, contactez votre responsable de mise en œuvre réussie. IMPORTANT
x | À propos de ce guide
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Coordonnées Au cours de vos efforts initiaux pour d’intégration, vous devriez utiliser Camp de base (une application de gestion de l’intégration) pour tous problèmes. Pour vous connecter à votre compte, ouvrez un navigateur web, allez sur http://prprojects.grouphub.com et entrez votre nom d’utilisateur et votre mot de passe. Après l’intégration, utilisez le tableau de bord pour porter tout problème ou question à notre attention (Support Soumettre un ticket). Si vous ne pouvez pas accéder au tableau de bord, vous pouvez utiliser l’adresse e-mail du support pour tout problème : [email protected].
Dernière révision: 3 janvier 2013
Coordonnées | xi
Chapitre 1.
Introduction
L’affichage des évaluations 2.0 apporte un renouvellement visuel de l’affichage des évaluations original (la version 1.0). Non seulement l’affichage des évaluations 2.0 est plus séduisant visuellement, mais il est bien plus flexible, extensible et personnalisable. Ce chapitre fournit une description générale des éléments de l’affichage, des instructions générales pour personnaliser ces éléments, et d’utiles références du secteur concernant CSS et HTML.
Points-clefs du chapitre
Composantes de l’affichage des évaluations
Éléments d’affichage du style des évaluations
Références
Confidentiel Bazaarvoice
1
Confidentiel Bazaarvoice
Composantes de l’affichage des évaluations « L’affichage des évaluations » comprend plusieurs affichages distincts dont les paramètres et le style peuvent être modifiés indépendamment, comme le décrivent les sections ci-dessous.
Affichage des aperçus L’aperçu d’une évaluation est une version condensée du contenu de l’évaluation, développée de manière à prendre moins de place sur votre page web. L’aperçu d’une évaluation, qui inclut un résumé de la note en étoiles et du nombre d’évaluations reçues par le produit, peut être utilisé n’importe où sur votre site web (les pages de catégories ou de produits), mais est généralement affiché dans la partie supérieure de la page (la portion d’une page web qui est visible immédiatement, sans faire défiler la page) sur une page de détail d’un produit, afin d’être visible immédiatement par quiconque regardant ce produit.
Nous vous recommandons d’afficher des aperçus à la fois sur les pages de catégories et les pages de produits. ASTUCE Vous pouvez voir un aperçu typique dans l’Illustration 1.
Illustration 1.
Affichage classique d’un aperçu
Affichage des évaluations L’affichage d’une évaluation inclut un abrégé de l’évaluation ® (Illustration 2) ainsi que toutes les évaluations clients individuelles (voir par exemple l’Illustration 3). Les points positifs, les points négatifs et les meilleurs usages sont affichés en colonnes afin de faciliter la lecture rapide. L’affichage de l’évaluation se trouve habituellement dans la partie inférieure de la page ou dans un onglet sur la page de détail du produit. Contrairement aux aperçus des évaluations, les affichages des évaluations ne peuvent apparaître qu’une fois par page web.
2 | Chapitre 1 Introduction
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Illustration 2.
Abrégé d’une évaluation
Illustration 3.
Exemple d’une évaluation individuelle
Éléments d’affichage du style des évaluations Pour configurer le style CSS de votre formulaire « Rédiger une évaluation », vous devez créer un fichier CSS prioritaire et l’héberger sur un serveur web accessible publiquement. Ensuite, dans le code source de la page de métadonnées de « Rédiger une évaluation », indiquez le chemin du fichier CSS prioritaire en utilisant la variable JavaScript pr_style_sheet.
Le chemin que vous spécifiez pour la valeur pr_style_sheet doit être qualifiée absolument/entièrement; par exemple : IMPORTANT
Dernière révision: 3 janvier 2013
var pr_style_sheet = "http://www.yoursite.com/css/my_styles.css";
Éléments d’affichage du style des évaluations | 3
Confidentiel Bazaarvoice
Références en ligne Nous vous encourageons à consulter les références du secteur pour en apprendre davantage sur l’utilisation des éléments de style CSS sur votre site web. Voici quelques suggestions de ressources :
Patrons CSS – http://www.alistapart.com/articles/sprites/
Priorités CSS – http://www.yourhtmlsource.com/style sheets/advancedcss.html
Éléments fondamentaux de formatage « float » – http://css.maxdesign.com.au/floatutorial/introduction.htm
Images d’arrière-plan pour remplacer le texte – http://stopdesign.com/archive/2003/03/07/replace-text.html
Les coins arrondis de CSS3 – http://www.css3.info/preview/rounded-border/
Les propriétés de bordure de CSS – http://www.w3schools.com/css/css_border.asp
(Liens vérifiés le 26 avril 2011.)
4 | Chapitre 1 Introduction
Dernière révision: 3 janvier 2013
Chapitre 2. Style de l’affichage des évaluations Ce chapitre fournit des informations détaillées à propos des sections de l’affichage des évaluations et des éléments dont vous pouvez modifier le style.
Points-clefs du chapitre
Aperçus des évaluations
Abrégés des évaluations
Affichage des évaluations
Confidentiel Bazaarvoice
5
Confidentiel Bazaarvoice
Aperçus des évaluations Les aperçus des évaluations peuvent être personnalisés afin d’être affichés dans de nombreux formats différents. Le style de la version par défaut peut être modifié pour rendre l’affichage plus compact (voir « Aperçus compact » below) ou minimaliste (voir « Aperçus minimal », page 7.)
Illustration 4.
Éléments de l’aperçu d’une évaluation
Aperçus compacts Les aperçus compacts sont généralement utilisés sur les pages des produits (en dehors de la section de l’évaluation) et sont habituellement placés dans la partie supérieure des pages, près du prix et des informations de détail des produits.
Illustration 5.
Aperçu compact
Pour afficher l’aperçu compact, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snippet-wrapper { background-color: #FFF; border: 1px solid #CBCBCB; } .pr-snippet-stars { background: #FFF; border: none; float: none; margin: auto; width: 110px; }
6 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
.pr-snippet-review-count { display: none; } .pr-snippet-read-write { background: none; border: none; } .pr-snippet-read-review, .pr-snippet-write-review { float: none; }
Le bloc parent contrôle la largeur de l’aperçu. Pour définir explicitement la largeur de l’aperçu, ajoutez une largeur à la classe pr-snippet et ajoutez la classe à votre feuille de style CSS prioritaire.
Aperçus minimalistes Les aperçus minimalistes sont généralement utilisés sur les pages des catégories, où de nombreux produits sont affichés. Ces aperçus apparaissent à côté de l’image et du nom du produit, et fournissent un petit aperçu de la note moyenne en étoiles ainsi que de la moyenne numérique.
Illustration 6.
Aperçu minimaliste
Pour afficher l’aperçu minimaliste, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snippet { background: none; border: none; padding: 0; } .pr-snippet-stars { background: none; border: none; float: none; margin: auto; padding: 0; width: 110px; }
Dernière révision: 3 janvier 2013
Aperçus des évaluations | 7
Confidentiel Bazaarvoice
.pr-snippet-review-count { display: none; } .pr-snippet-read-write { display: none; }
Abrégés des évaluations Comme le montre l’Illustration 7, l’abrégé d’une évaluation ® comprend cinq sections majeures :
l’en-tête de l’abrégé
le résumé des notes
le résumé des étiquettes
le résumé des attributs
le lien « Rédiger une évaluation »
Illustration 7.
Sections de l’abrégé d’une évaluation
Vous pouvez personnaliser le style de l’abrégé des évaluations pour qu’il corresponde à l’apparence et à l’atmosphère de votre site web ; consultez les sous-parties de cette section pour plus de détails.
8 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
En-tête de l’abrégé L’en-tête de l’abrégé contient le texte du titre de l’abrégé de l’évaluation ® et se compose de trois éléments principaux :
.pr-snapshot-head – le style de l’arrière-plan pour le bloc contenant l’en-tête de
l’abrégé
.pr-snapshot-title – le titre de l’abrégé de l’évaluation ™
.pr-snapshot-cobrand – le lien vers notre site web
Pour personnaliser facilement l’en-tête, vous pouvez notamment changer l’image d’arrière-plan par défaut en ajoutant les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snapshot-head { background-image: url(/path/to/your/image.gif); background-repeat: repeat-x; }
Résumé des notes Le résumé des notes fournit la note globale d’un produit ; ses éléments sont :
.pr-stars – la note – la la note moyenne de ce produit en étoiles
.pr-rating – la note numérique moyenne de ce produit
.pr-snapshot-average-based-on-text – le nombre d’évaluations utilisées pour
établir les notes moyennes numérique et en étoiles.
.pr-snapshot-consensus-value – le pourcentage moyen d’évaluateurs qui
recommanderaient ce produit à un ami. L’une des personnalisations les plus populaires est de remplacer les étoiles par défaut par un ensemble graphique personnalisé reflétant votre produit ou votre marque.
Illustration 8.
Avant (étoiles par défaut)
Illustration 9.
Après (étoiles personnalisées)
Dernière révision: 3 janvier 2013
Abrégés des évaluations | 9
Confidentiel Bazaarvoice
Spécifications requises pour l’image d’étoile Il est très important que vos nouvelles images d’étoiles soient conformes aux spécifications suivantes :
Format GIF ; nous recommandons d’utiliser un fond transparent.
Les grandes notes en étoiles font 112 pixels de large sur 250 pixels de haut ; les petites notes en étoiles font 83 pixels de large sur 195 pixels de haut.
Trois (3) pixels entre les rangs.
Illustration 10.
Gamme complète de notes en étoiles personnalisées
Les affichages en étoiles sont rendus en utilisant les patrons CSS (cf. http://www.alistapart.com/articles/sprites/). Nous utilisons une grande image d’étoile et une petite image d’étoile, et affichons seulement une petite portion de l’image à la fois via CSS. Introduire les priorités CSS suivantes dans votre feuille de style CSS prioritaire, sans oublier de faire référence à vos nouvelles images d’étoiles, modifiera effectivement toutes les images de notes en étoiles sur votre site : .pr-snapshot-rating .pr-stars, div.prStars { background-image: url(http://www.yoursite.com/images/large_stars.gif); } .pr-stars-small, .pr-snippet-stars .pr-stars-small { background-image: url(http://www.yoursite.com/images/small_stars.gif); }
Résumé des étiquettes Le résumé des étiquettes est le recueil des étiquettes ou mots-clefs le plus souvent appliqués au produit par les évaluateurs. Les étiquettes sont affichées selon une mise en page en trois colonnes correspondant aux catégories « points positifs », « points négatifs » et « meilleurs usages ».
10 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Les exemples suivants montrent le marquage HTML utilisé pour construire la colonne des points positifs :
Par défaut, chaque bloc contient une bordure grise d’un pixel, et le titre de chaque colonne a un arrière-plan gris. Pour retirer à la fois la bordure et l’arrière-plan, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-attribute-key p { background-color: transparent; } .pr-review-points-attr-wrapper .pr-attribute-group { border: none; }
Illustration 11.
Avant (résumé des étiquettes par défaut)
Illustration 12.
Après (résumé des étiquettes personnalisé)
Dernière révision: 3 janvier 2013
Abrégés des évaluations | 11
Confidentiel Bazaarvoice
Résumé des attributs Le résumé des attributs est un recueil des attributs personnalisés que les clients ont associé au produit. Le marquage consiste en une liste non ordonnée et les éléments de la liste :
.pr-other-attributes-list – l’élément
3 janvier 2013
Confidentiel Bazaarvoice
Avertissement Copyright © 2012 Bazaarvoice. Tous droits réservés. Les informations contenues dans ce document :
Sont confidentielles et destinées aux clients de Bazaarvoice. Aucune partie de ce document ne peut être partagée avec quiconque en dehors de votre société ou des partenaires de votre société sans accord préalable de Bazaarvoice.
Sont fournies « telles quelles » sans garantie d'aucune sorte, expresse ou implicite, y compris, mais sans s'y limiter, les garanties implicites de qualité marchande, d'adéquation à un usage particulier ou de non-contrefaçon.
Sont périodiquement mises à jour pour être en phase avec les améliorations et / ou changements dans nos offres de produits.
Peuvent être modifiées sans préavis. Certains exemples décrits dans ce document sont fournis à titre d'illustration et ne garantissent pas de résultat particulier. Vous assumez le risque de l'utilisation de ce document.
Bazaarvoice n'est pas responsable des erreurs techniques ou typographiques qui pourraient être accidentellement présentes dans ce document. Bazaarvoice peut détenir des brevets et / ou demandes de brevet en instance couvrant le sujet du présent document. La remise de ce document ne vous donne aucun droit de licence sur ces brevets, ni aucun droit juridique à toute autre propriété intellectuelle dans un service ou produit Bazaarvoice. Tous les noms de marques et de produits Bazaarvoice sont des marques commerciales ou des marques déposées de Bazaarvoice aux États-Unis et peuvent être protégés en tant que marques ou marques déposées dans d'autres pays. Tous les autres noms de produits, services ou sociétés mentionnés ici sont des marques déposées et noms commerciaux de leurs propriétaires respectifs.
Contactez-nous : 3900 North Capital of Texas Highway Suite 300 Austin, Texas 78746, États-Unis Appel gratuit : (866) 522-9227 | Téléphone : (512) 551-6000 | Fax : (512) 551-6001 www.bazaarvoice.com
Historique des versions : Pour plus d'informations sur les révisions majeures qui ont été apportées à ce document, voir l’Annexe A, « Historique des révisions ».
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Sommaire Liste des illustrations.................................................................................................. v Liste des tableaux ..................................................................................................... vii À propos de ce guide .................................................................................................. ix Public et objet ......................................................................................... x Organisation de ce guide ......................................................................... x Coordonnées......................................................................................... xi
Chapitre 1.
Introduction ........................................................................................... 1 Composantes de l’affichage des évaluations ...............................................2 Affichage des aperçus ........................................................................2 Affichage des évaluations ...................................................................2 Éléments d’affichage du style des évaluations .............................................3 Références en ligne .................................................................................4
Chapitre 2.
Style de l’affichage des évaluations ........................................................ 5 Aperçus des évaluations ...........................................................................6 Aperçus compacts .............................................................................6 Aperçus minimalistes .........................................................................7 Abrégés des évaluations ..........................................................................8 En-tête de l’abrégé ............................................................................9 Résumé des notes..............................................................................9 Résumé des étiquettes ..................................................................... 10 Résumé des attributs ........................................................................ 12 Lien vers la page « Rédiger une évaluation » ........................................ 12 Affichage des évaluations ....................................................................... 13 En-tête de l’évaluation ..................................................................... 14 Profil de l’évaluateur ........................................................................ 15 Date de l’évaluation ......................................................................... 15 Étiquettes de l’évaluation ................................................................. 16 Commentaires de l’évaluation........................................................... 16 Attributs de l’évaluation ................................................................... 16 Bas de page de l’évaluation .............................................................. 16 Mise en page sur une seule colonne ......................................................... 17
Chapitre 3.
Style des fonctionnalités facultatives d’Évaluations Clients..................... 19 L’histogramme des évaluations ............................................................... 20 La comparaison d’évaluations ................................................................. 21 Les badges ........................................................................................... 24 Acheteur vérifié ............................................................................... 24 Évaluateur vérifié ............................................................................. 24 Badge personnalisé ......................................................................... 25
Dernière révision: 3 janvier 2013
iii
Confidentiel Bazaarvoice
Facebook intégré .................................................................................. 26 Images personnelles des clients .............................................................. 28
Chapitre 4.
Style de la page « Rédiger une évaluation »........................................... 30 Formulaire de soumission de l’évaluation ................................................. 31 Page de prévisualisation de l’évaluation ................................................... 35 Page de remerciements pour l’évaluation ................................................. 36
Annexe A.
iv | Sommaire
Historique des révisions .......................................................................37
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Liste des illustrations Illustration 1.
Affichage classique d’un aperçu ..........................................................2
Illustration 2.
Abrégé d’une évaluation ....................................................................3
Illustration 3.
Exemple d’une évaluation individuelle .................................................3
Illustration 4.
Éléments de l’aperçu d’une évaluation .................................................6
Illustration 5.
Aperçu compact ................................................................................6
Illustration 6.
Aperçu minimaliste ............................................................................7
Illustration 7.
Sections de l’abrégé d’une évaluation .................................................8
Illustration 8.
Avant (étoiles par défaut) ....................................................................9
Illustration 9.
Après (étoiles personnalisées) .............................................................9
Illustration 10.
Gamme complète de notes en étoiles personnalisées .......................... 10
Illustration 11.
Avant (résumé des étiquettes par défaut) ............................................. 11
Illustration 12.
Après (résumé des étiquettes personnalisé) ......................................... 11
Illustration 13.
Avant (lien « Rédiger une évaluation » par défaut) ................................ 12
Illustration 14.
Après (bouton personnalisé pour le lien « Rédiger une évaluation »)....... 13
Illustration 15.
Avant (lien « Rédiger une évaluation » par défaut) ................................ 13
Illustration 16.
Après (imitation de bouton pour le lien « Rédiger une évaluation ») ........ 13
Illustration 17.
Sections de l’affichage d’une évaluation ............................................. 14
Illustration 18.
Bas de page par défaut .................................................................... 16
Illustration 19.
Avant (textes d’utilité et d’alerte par défaut)........................................ 17
Illustration 20.
Après (textes d’utilité et d’alerte séparés au bas de la page de l’évaluation)17
Illustration 21.
Format d’affichage de l’évaluation en une seule colonne ...................... 18
Illustration 22.
Fenêtre pop-up de l’histogramme d’une évaluation ............................. 20
Illustration 23.
Icône de l’histogramme ................................................................... 20
Illustration 24.
Affichage de comparaison d’évaluations ............................................ 22
Illustration 25. vérifié) 26
Évaluation avec Facebook intégré (par un évaluateur au compte Facebook
Illustration 26. évaluations »)
Profil d’un évaluateur mis en valeur par Facebook (« Voir toutes mes 27
Dernière révision: 3 janvier 2013
Sommaire | v
Confidentiel Bazaarvoice
Illustration 27.
Images personnelles miniatures en vue pellicule .................................. 28
Illustration 28.
Fenêtre pop-up d’une image personnelle ........................................... 29
Illustration 29.
Éléments de la page « Rédiger une évaluation », 1ère partie .................. 31
Illustration 30.
Éléments de la page « Rédiger une évaluation », 2ème partie ................32
Illustration 31.
Formulaire « Rédiger une évaluation » personnalisé, 1ère partie ............33
Illustration 32.
Formulaire « Rédiger une évaluation » personnalisé, 2ème partie ..........34
Illustration 33.
Éléments de la page de prévisualisation d’une évaluation .....................35
Illustration 34.
Éléments de la page de remerciements .............................................. 36
vi | Sommaire
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Liste des tableaux Tableau 1.
Formats de la date des évaluations ............................................................. 15
Tableau 2. Éléments personnalisables pour Facebook intégré ....................................... 27 Tableau 3. Éléments personnalisables pour les images personnelles des clients ..............29 Tableau 4. Historique des révisions ............................................................................ 38
Dernière révision: 3 janvier 2013
Sommaire | vii
À propos de ce guide Évaluations Clients ™ est un service clients clefs en main qui permet aux vendeurs de recevoir, modérer et afficher des évaluations de clients sur leurs sites web. Ce contenu généré par les utilisateurs aide à convertir davantage de visiteurs en acheteurs et à attirer de nouveaux clients dans votre boutique en ligne. Cette section explique ce qui se trouve dans le guide et la manière dont il est organisé.
Dans cette section
Public et objet
Organisation de ce guide
Coordonnées
Confidentiel Bazaarvoice
ix
Confidentiel Bazaarvoice
Public et objet Ce guide est destiné aux marchands qui intègrent Évaluations Clients à leurs sites web. Ce document montre comment modifier l’apparence de nombreux éléments de l’affichage des évaluations.
Organisation de ce guide Ce guide est organisé de la manière suivante :
Le Chapitre 1, « Introduction », contient une description générale des éléments d’affichage, des instructions générales pour personnaliser ces éléments et d’utiles références du secteur concernant CSS et HTML.
Le Chapitre 2, « Style de l’affichage des évaluation », fournit des informations détaillées à propos des sections de l’affichage des évaluations et des éléments dont vous pouvez modifier le style.
Le Chapitre 3, « Style des fonctionnalités facultatives d’Évaluations Clients », décrit les modifications du style des fonctionnalités optionnelles d’affichage des évaluations que vous pouvez effectuer.
Le Chapitre 4, « Style de la page « Rédiger une évaluation », décrit les pages individuelles générées par le cadre iFrame « Rédiger une évaluation » d’Évaluation Clients, ainsi que les éléments de chaque page.
Si vous avez des questions, contactez votre responsable de mise en œuvre réussie. IMPORTANT
x | À propos de ce guide
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Coordonnées Au cours de vos efforts initiaux pour d’intégration, vous devriez utiliser Camp de base (une application de gestion de l’intégration) pour tous problèmes. Pour vous connecter à votre compte, ouvrez un navigateur web, allez sur http://prprojects.grouphub.com et entrez votre nom d’utilisateur et votre mot de passe. Après l’intégration, utilisez le tableau de bord pour porter tout problème ou question à notre attention (Support Soumettre un ticket). Si vous ne pouvez pas accéder au tableau de bord, vous pouvez utiliser l’adresse e-mail du support pour tout problème : [email protected].
Dernière révision: 3 janvier 2013
Coordonnées | xi
Chapitre 1.
Introduction
L’affichage des évaluations 2.0 apporte un renouvellement visuel de l’affichage des évaluations original (la version 1.0). Non seulement l’affichage des évaluations 2.0 est plus séduisant visuellement, mais il est bien plus flexible, extensible et personnalisable. Ce chapitre fournit une description générale des éléments de l’affichage, des instructions générales pour personnaliser ces éléments, et d’utiles références du secteur concernant CSS et HTML.
Points-clefs du chapitre
Composantes de l’affichage des évaluations
Éléments d’affichage du style des évaluations
Références
Confidentiel Bazaarvoice
1
Confidentiel Bazaarvoice
Composantes de l’affichage des évaluations « L’affichage des évaluations » comprend plusieurs affichages distincts dont les paramètres et le style peuvent être modifiés indépendamment, comme le décrivent les sections ci-dessous.
Affichage des aperçus L’aperçu d’une évaluation est une version condensée du contenu de l’évaluation, développée de manière à prendre moins de place sur votre page web. L’aperçu d’une évaluation, qui inclut un résumé de la note en étoiles et du nombre d’évaluations reçues par le produit, peut être utilisé n’importe où sur votre site web (les pages de catégories ou de produits), mais est généralement affiché dans la partie supérieure de la page (la portion d’une page web qui est visible immédiatement, sans faire défiler la page) sur une page de détail d’un produit, afin d’être visible immédiatement par quiconque regardant ce produit.
Nous vous recommandons d’afficher des aperçus à la fois sur les pages de catégories et les pages de produits. ASTUCE Vous pouvez voir un aperçu typique dans l’Illustration 1.
Illustration 1.
Affichage classique d’un aperçu
Affichage des évaluations L’affichage d’une évaluation inclut un abrégé de l’évaluation ® (Illustration 2) ainsi que toutes les évaluations clients individuelles (voir par exemple l’Illustration 3). Les points positifs, les points négatifs et les meilleurs usages sont affichés en colonnes afin de faciliter la lecture rapide. L’affichage de l’évaluation se trouve habituellement dans la partie inférieure de la page ou dans un onglet sur la page de détail du produit. Contrairement aux aperçus des évaluations, les affichages des évaluations ne peuvent apparaître qu’une fois par page web.
2 | Chapitre 1 Introduction
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Illustration 2.
Abrégé d’une évaluation
Illustration 3.
Exemple d’une évaluation individuelle
Éléments d’affichage du style des évaluations Pour configurer le style CSS de votre formulaire « Rédiger une évaluation », vous devez créer un fichier CSS prioritaire et l’héberger sur un serveur web accessible publiquement. Ensuite, dans le code source de la page de métadonnées de « Rédiger une évaluation », indiquez le chemin du fichier CSS prioritaire en utilisant la variable JavaScript pr_style_sheet.
Le chemin que vous spécifiez pour la valeur pr_style_sheet doit être qualifiée absolument/entièrement; par exemple : IMPORTANT
Dernière révision: 3 janvier 2013
var pr_style_sheet = "http://www.yoursite.com/css/my_styles.css";
Éléments d’affichage du style des évaluations | 3
Confidentiel Bazaarvoice
Références en ligne Nous vous encourageons à consulter les références du secteur pour en apprendre davantage sur l’utilisation des éléments de style CSS sur votre site web. Voici quelques suggestions de ressources :
Patrons CSS – http://www.alistapart.com/articles/sprites/
Priorités CSS – http://www.yourhtmlsource.com/style sheets/advancedcss.html
Éléments fondamentaux de formatage « float » – http://css.maxdesign.com.au/floatutorial/introduction.htm
Images d’arrière-plan pour remplacer le texte – http://stopdesign.com/archive/2003/03/07/replace-text.html
Les coins arrondis de CSS3 – http://www.css3.info/preview/rounded-border/
Les propriétés de bordure de CSS – http://www.w3schools.com/css/css_border.asp
(Liens vérifiés le 26 avril 2011.)
4 | Chapitre 1 Introduction
Dernière révision: 3 janvier 2013
Chapitre 2. Style de l’affichage des évaluations Ce chapitre fournit des informations détaillées à propos des sections de l’affichage des évaluations et des éléments dont vous pouvez modifier le style.
Points-clefs du chapitre
Aperçus des évaluations
Abrégés des évaluations
Affichage des évaluations
Confidentiel Bazaarvoice
5
Confidentiel Bazaarvoice
Aperçus des évaluations Les aperçus des évaluations peuvent être personnalisés afin d’être affichés dans de nombreux formats différents. Le style de la version par défaut peut être modifié pour rendre l’affichage plus compact (voir « Aperçus compact » below) ou minimaliste (voir « Aperçus minimal », page 7.)
Illustration 4.
Éléments de l’aperçu d’une évaluation
Aperçus compacts Les aperçus compacts sont généralement utilisés sur les pages des produits (en dehors de la section de l’évaluation) et sont habituellement placés dans la partie supérieure des pages, près du prix et des informations de détail des produits.
Illustration 5.
Aperçu compact
Pour afficher l’aperçu compact, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snippet-wrapper { background-color: #FFF; border: 1px solid #CBCBCB; } .pr-snippet-stars { background: #FFF; border: none; float: none; margin: auto; width: 110px; }
6 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
.pr-snippet-review-count { display: none; } .pr-snippet-read-write { background: none; border: none; } .pr-snippet-read-review, .pr-snippet-write-review { float: none; }
Le bloc parent contrôle la largeur de l’aperçu. Pour définir explicitement la largeur de l’aperçu, ajoutez une largeur à la classe pr-snippet et ajoutez la classe à votre feuille de style CSS prioritaire.
Aperçus minimalistes Les aperçus minimalistes sont généralement utilisés sur les pages des catégories, où de nombreux produits sont affichés. Ces aperçus apparaissent à côté de l’image et du nom du produit, et fournissent un petit aperçu de la note moyenne en étoiles ainsi que de la moyenne numérique.
Illustration 6.
Aperçu minimaliste
Pour afficher l’aperçu minimaliste, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snippet { background: none; border: none; padding: 0; } .pr-snippet-stars { background: none; border: none; float: none; margin: auto; padding: 0; width: 110px; }
Dernière révision: 3 janvier 2013
Aperçus des évaluations | 7
Confidentiel Bazaarvoice
.pr-snippet-review-count { display: none; } .pr-snippet-read-write { display: none; }
Abrégés des évaluations Comme le montre l’Illustration 7, l’abrégé d’une évaluation ® comprend cinq sections majeures :
l’en-tête de l’abrégé
le résumé des notes
le résumé des étiquettes
le résumé des attributs
le lien « Rédiger une évaluation »
Illustration 7.
Sections de l’abrégé d’une évaluation
Vous pouvez personnaliser le style de l’abrégé des évaluations pour qu’il corresponde à l’apparence et à l’atmosphère de votre site web ; consultez les sous-parties de cette section pour plus de détails.
8 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
En-tête de l’abrégé L’en-tête de l’abrégé contient le texte du titre de l’abrégé de l’évaluation ® et se compose de trois éléments principaux :
.pr-snapshot-head – le style de l’arrière-plan pour le bloc contenant l’en-tête de
l’abrégé
.pr-snapshot-title – le titre de l’abrégé de l’évaluation ™
.pr-snapshot-cobrand – le lien vers notre site web
Pour personnaliser facilement l’en-tête, vous pouvez notamment changer l’image d’arrière-plan par défaut en ajoutant les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snapshot-head { background-image: url(/path/to/your/image.gif); background-repeat: repeat-x; }
Résumé des notes Le résumé des notes fournit la note globale d’un produit ; ses éléments sont :
.pr-stars – la note – la la note moyenne de ce produit en étoiles
.pr-rating – la note numérique moyenne de ce produit
.pr-snapshot-average-based-on-text – le nombre d’évaluations utilisées pour
établir les notes moyennes numérique et en étoiles.
.pr-snapshot-consensus-value – le pourcentage moyen d’évaluateurs qui
recommanderaient ce produit à un ami. L’une des personnalisations les plus populaires est de remplacer les étoiles par défaut par un ensemble graphique personnalisé reflétant votre produit ou votre marque.
Illustration 8.
Avant (étoiles par défaut)
Illustration 9.
Après (étoiles personnalisées)
Dernière révision: 3 janvier 2013
Abrégés des évaluations | 9
Confidentiel Bazaarvoice
Spécifications requises pour l’image d’étoile Il est très important que vos nouvelles images d’étoiles soient conformes aux spécifications suivantes :
Format GIF ; nous recommandons d’utiliser un fond transparent.
Les grandes notes en étoiles font 112 pixels de large sur 250 pixels de haut ; les petites notes en étoiles font 83 pixels de large sur 195 pixels de haut.
Trois (3) pixels entre les rangs.
Illustration 10.
Gamme complète de notes en étoiles personnalisées
Les affichages en étoiles sont rendus en utilisant les patrons CSS (cf. http://www.alistapart.com/articles/sprites/). Nous utilisons une grande image d’étoile et une petite image d’étoile, et affichons seulement une petite portion de l’image à la fois via CSS. Introduire les priorités CSS suivantes dans votre feuille de style CSS prioritaire, sans oublier de faire référence à vos nouvelles images d’étoiles, modifiera effectivement toutes les images de notes en étoiles sur votre site : .pr-snapshot-rating .pr-stars, div.prStars { background-image: url(http://www.yoursite.com/images/large_stars.gif); } .pr-stars-small, .pr-snippet-stars .pr-stars-small { background-image: url(http://www.yoursite.com/images/small_stars.gif); }
Résumé des étiquettes Le résumé des étiquettes est le recueil des étiquettes ou mots-clefs le plus souvent appliqués au produit par les évaluateurs. Les étiquettes sont affichées selon une mise en page en trois colonnes correspondant aux catégories « points positifs », « points négatifs » et « meilleurs usages ».
10 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Les exemples suivants montrent le marquage HTML utilisé pour construire la colonne des points positifs :
Pros
- Durable (26)
- Attractive design (17)
- Smooth (17)
- Ergonomic (12)
- High quality (12)
Par défaut, chaque bloc contient une bordure grise d’un pixel, et le titre de chaque colonne a un arrière-plan gris. Pour retirer à la fois la bordure et l’arrière-plan, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-attribute-key p { background-color: transparent; } .pr-review-points-attr-wrapper .pr-attribute-group { border: none; }
Illustration 11.
Avant (résumé des étiquettes par défaut)
Illustration 12.
Après (résumé des étiquettes personnalisé)
Dernière révision: 3 janvier 2013
Abrégés des évaluations | 11
Confidentiel Bazaarvoice
Résumé des attributs Le résumé des attributs est un recueil des attributs personnalisés que les clients ont associé au produit. Le marquage consiste en une liste non ordonnée et les éléments de la liste :
.pr-other-attributes-list – l’élément
- qui contient le label « attribut »
.pr-other-attributes-value – l’élément - qui contient l’attribut
Pour passer outre les marqueurs de liste par défaut, ajoutez la priorité CSS suivante à votre feuillez de style CSS prioritaire : .pr-other-attributes-list li.pr-other-attribute-label { background-image: url(path/to/your/marker.gif); background-position: left center; background-repeat: no-repeat; padding: 0 0 0 0.7em; /* padding varies depending on image size */ }
Lien vers la page « Rédiger une évaluation » La section inférieure des abrégés d’évaluations est un lien vers la page « Rédiger une évaluation ». Pour afficher le lien en tant que bouton, vous pouvez soit faire référence à une image de bouton personnalisée, soit imiter un bouton en ajoutant une couleur en arrière-plan, comme décrit ci-dessous.
Faire référence à un bouton personnalisé Pour faire du lien un bouton personnalisé, ajoutez les règles CSS suivantes à votre feuille de style CSS prioritaire : .pr-snapshot-write-review { background-image: url("path/to/your/write_review.gif"); height: 25px; width: 10em; } .pr-snapshot-write-review span { display: none; }
Illustration 13.
Avant (lien « Rédiger une évaluation » par défaut)
12 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Illustration 14. évaluation »)
Après (bouton personnalisé pour le lien « Rédiger une
Imiter un bouton (ajouter de la couleur) Si vous préférez imiter un bouton au lieu d’utiliser une image de bouton personnalisée, modifiez la couleur de l’arrière-plan du div correspondant, comme suit : .pr-snapshot-write-review { background-color: #000; color: #FFF; padding: 0.5em; width: 7em; /* set width; else it stretches over the entire page */ }
Illustration 15.
Avant (lien « Rédiger une évaluation » par défaut)
Illustration 16. évaluation »)
Après (imitation de bouton pour le lien « Rédiger une
Affichage des évaluations Comme le montre l’Illustration 17, les abrégés des évaluations ® comprennent les sections principales suivantes :
l’en-tête de l’évaluation
le profil de l’évaluateur
la date de l’évaluation
les étiquettes de l’évaluation
les commentaires de l’évaluation
les attributs de l’évaluation
le bas de la page de l’évaluation
Dernière révision: 3 janvier 2013
Affichage des évaluations | 13
Confidentiel Bazaarvoice
Illustration 17.
Sections de l’affichage d’une évaluation
Vous pouvez personnaliser le style des abrégés des évaluations afin qu’il corresponde à l’apparence et à l’atmosphère de votre site web ; consultez les sous-parties de cette section pour plus de détails.
En-tête de l’évaluation L’en-tête de l’évaluation est très similaire au résumé des notes, mais inclut le texte sur l’utilité (par exemple, « 1 client(s) sur 1 a/ont trouvé cette évaluation utile ») et les petites étoiles de notes. Pour en savoir plus sur l’usage d’étoiles personnalisées, cf. « Résumé des notes », page 9. L’en-tête d’une évaluation se compose des éléments suivants :
.pr-review-most-helpful – texte sur l’utilité de l’évaluation
.pr-stars – note en étoiles de l’évaluation
.pr-rating – note numérique de l’évaluation
14 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Profil de l’évaluateur La section dédiée au profil de l’évaluateur contient les informations que l’évaluateur a fourni au cours du processus de rédaction de l’évaluation, comprenant son nom, son lieu de résidence et ses affinités. Le profil d’un évaluateur se compose des éléments suivants :
.pr-review-author-name – le nom de l’auteur de l’évaluation
.pr-review-author-location – le lieu de résidence de l’auteur
.pr-review-author-affinities – les affinités indiquées par l’auteur (il peut y en
avoir plusieurs)
Date de l’évaluation La date de l’évaluation correspond à la date à laquelle l’évaluation a été soumise. Il y a plusieurs variations de l’affichage du bloc de la date ; par défaut, celui-ci est aligné (numérique uniquement).
Pour changer le format de la date par rapport à son affichage aligné par défaut (numérique uniquement), ou pour modifier son format (comme mm/jj ou jj/mm/aaaa), vous devez nous contacter. Si vous êtes toujours en phase initiale d’intégration, demandez à votre ingénieur d’intégration ; sinon, soumettez un ticket auprès du support depuis le tableau de bord.
NOTE
Tableau 1.
Formats de la date des évaluations
Aligné (numérique uniquement)
Dernière révision: 3 janvier 2013
Aligné (alphanumérique)
Bloc
Affichage des évaluations | 15
Confidentiel Bazaarvoice
Étiquettes de l’évaluation Le résumé des étiquettes de l’évaluation est identique au résumé des étiquettes se trouvant dans l’en-tête de l’abrégé. Pour en savoir plus sur la personnalisation des étiquettes des évaluations, cf. « Résumé des étiquettes », page 10.
Commentaires de l’évaluation Les commentaires de l’évaluation sont le centre de l’évaluation du client, et correspondent aux commentaires fournis au cours du processus de rédaction de l’évaluation. Cette section se compose des éléments suivants :
.pr-comments-header – le nom du produit évalué
.pr-comments – les commentaires ou le texte de l’évaluation eux-mêmes
Attributs de l’évaluation Les attributs de l’évaluation sont l’ensemble des attributs avec lesquels l’évaluateur a étiqueté le produit durant le processus de rédaction de l’évaluation. Il est identique au résumé des attributs décrit dans le paragraphe « Résumé des attributs », page 12.
Bas de page de l’évaluation Le bas de page de l’évaluation est la dernière section de l’évaluation du client. Il contient la conclusion et les outils destinés aux lecteurs de l’évaluation :
.pr-review-bottom-line-wrapper – conclusion précisant si l’évaluateur
recommanderait le produit
.pr-review-helpful-text – liens permettant aux clients d’indiquer si l’évaluation
leur a été utile ou non
.pr-review-report-issue – lien permettant aux clients de signaler une évaluation
pour son contenu injurieux ou incorrect.
Illustration 18.
Bas de page par défaut
16 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Une personnalisation courante consiste à séparer le texte « utilité de l’évaluation » et le texte « signaler cette évaluation » (Illustration 19) en deux lignes séparées (Illustration 20) en ajoutant les règles suivantes à votre feuille de style CSS prioritaire : .pr-review-tools p { display: block; } .pr-review-report-issue-hyphen { display: none; }
Illustration 19.
Avant (textes d’utilité et d’alerte par défaut)
Illustration 20. Après (textes d’utilité et d’alerte séparés au bas de la page de l’évaluation)
Mise en page sur une seule colonne L’affiche des évaluations par défaut est un format en deux colonnes : la première colonne contient le profil de l’évaluateur, et la seconde contient tout le reste. Cependant, si vous avez peu de place pour afficher vos évaluations, vous pouvez aisément modifier l’affichage des évaluations pour le faire passer à un format en une colonne, de manière à afficher tous les éléments dans une seule colonne (voir l’Illustration 21). Ajoutez les règles suivantes à votre feuille de style CSS prioritaire : .pr-review-author p { display: inline; } .pr-review-rating-wrapper, .pr-review-main-wrapper { float: none; width: 100%; } .pr-review-author float: none;
Dernière révision: 3 janvier 2013
{
Mise en page sur une seule colonne | 17
Confidentiel Bazaarvoice
width: 100%; }
Illustration 21.
Format d’affichage de l’évaluation en une seule colonne
18 | Chapitre 2 Style de l’affichage des évaluations
Dernière révision: 3 janvier 2013
Chapitre 3. Style des fonctionnalités facultatives d’Évaluations Clients À mesure que nous continuons d’innover et d’ajouter de nouvelles fonctions et fonctionnalités à notre affichage des évaluations, nous rendons disponibles des styles supplémentaires que vous pouvez utiliser pour personnaliser l’apparence et l’aspect de ces fonctions. Ce chapitre décrit les modifications du style des fonctionnalités optionnelles d’affichage des évaluations que vous pouvez effectuer.
Points-clefs du chapitre
L’histogramme des évaluations
La comparaison d’évaluations
Les badges
Facebook intégré
Images personnelles des clients
Confidentiel Bazaarvoice
19
Confidentiel Bazaarvoice
L’histogramme des évaluations L’histogramme des évaluations est une fenêtre pop-up modale qui affiche la distribution des notes d’un produit : combien d’évaluations pour chaque note en étoiles. L’histogramme donne une représentation visuelle rapide du pourcentage des évaluations correspondant à chaque note en étoiles, et le nombre exact d’évaluations pour chaque note est indiqué entre parenthèses à droite. (S’il n’y a aucune évaluation pour une note donnée, la barre de l’histogramme est grise et le nombre affiché est « (0) », comme pour la note 2 étoiles dans l’Illustration 22.)
Illustration 22.
Fenêtre pop-up de l’histogramme d’une évaluation
La fenêtre pop-up est activée quand un acheteur place le curseur de sa souris sur l’icône de l’histogramme dans l’abrégé d’une évaluation, comme le montre l’Illustration 23.
Illustration 23.
Icône de l’histogramme
20 | Chapitre 3 Style des fonctionnalités facultatives d’Évaluations Clients
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Le style des éléments suivants peut être modifié :
.pr-snapshot-histogram-header – l’en-tête de l’histogramme
.pr-histogram-label – le label en étoiles (c’est-à-dire 5 étoiles, 4 étoiles, etc.)
.pr-ratings-histogram-bar – la barre de distribution de l’histogramme
.pr-histogram-count – le total pour chaque note en étoiles
La comparaison d’évaluations Avec la comparaison d’évaluations, les clients peuvent voir les évaluations positives et négatives (critiques) les plus utiles, côte à côte. La comparaison d’évaluations est affichée sur les pages des produits, sous l’abrégé des évaluations et au-dessus de l’affichage de la première évaluation (Illustration 24).
Dernière révision: 3 janvier 2013
La comparaison d’évaluations | 21
Confidentiel Bazaarvoice
Illustration 24. Affichage de comparaison d’évaluations Le style des éléments suivants peut être modifié :
.pr-review-faceoff – le bloc de « div » pour tout l’affichage de la comparaison .pr-review-faceoff-review-wrapper – le bloc de « div » pour les éléments de la
comparaison
22 | Chapitre 3 Style des fonctionnalités facultatives d’Évaluations Clients
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
.pr-review-faceoff-review-positive – le bloc du contenu des évaluations
positives (notes, commentaires, etc.) .pr-review-faceoff-review-negative – le bloc du contenu des évaluations
négatives (notes, commentaires, etc.) .pr-review-faceoff-container – les éléments des notes en étoiles, des titres,
des commentaires, etc. .pr-review-faceoff-img – la bordure ou séparation entre les évaluations
positives et négatives
.pr-review-faceoff-img-txt – l’arrière-plan de « VS » (versus)
.pr-review-faceoff-review-full – le bloc contenant la fenêtre pop-up modale
qui affiche l’évaluation complète (qui est affichée quand un utilisateur clique sur Lire l’évaluation complète). Si la section « comparaison d’évaluations » de votre affichage des évaluations n’est pas affichée correctement dans Microsoft ® Internet Explorer ® (par exemple, si la page est extrêmement large et qu’il faut la faire défiler à cause de grandes zones vides qui donnent l’impression qu’il manque du contenu), vous pouvez utiliser les règles CSS suivantes pour corriger l’affichage : .pr-review-faceoff-review-negative { padding-left: <padding-number>em; } .pr-review-faceoff-review-positive { padding-right: <padding-number>em; }
où
<padding-number> est le nombre d’espaces « em » à ajouter pour l’espacement
(padding). Vous devriez commencer avec une valeur de 3 et faire les ajustements nécessaires pour l’affichage de vos évaluations.
Dernière révision: 3 janvier 2013
La comparaison d’évaluations | 23
Confidentiel Bazaarvoice
Les badges Lorsque vous créez des badges personnalisés, leurs noms doivent être conformes aux noms des classes CSS qui leur correspondent. En plus d’outrepasser les noms des classes, vous pouvez aussi personnaliser ou modifier le style des badges standard ainsi que des badges personnalisés. Consultez les sous-parties de cette section pour des exemples détaillés.
Acheteur vérifié Pour personnaliser le badge d’acheteur vérifié, ajoutez le code suivant à votre feuille de style CSS prioritaire (et modifiez-le à votre gré) : .pr-review-author-verified-buyer-wrapper.pr-review-author-verified-buyeren_US a { display: none; } .pr-review-author-verified-buyer-wrapper { background: url("http://www.yourSite.com/images/verifiedBuyer.gif") no-repeat; height: 21px; }
Évaluateur vérifié Pour personnaliser le badge d’évaluateur vérifié, ajoutez le code suivant à votre feuille de style CSS prioritaire (et modifiez-le à votre gré) : .pr-review-author-verified.pr-review-author-verified-en_US a { display: none; } .pr-review-author-verified { background: url("http://www.yourSite.com/images/verifiedReviewer.gif") no-repeat; height: 21px; }
24 | Chapitre 3 Style des fonctionnalités facultatives d’Évaluations Clients
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Badge personnalisé Outre les badges d’acheteur et d’évaluateur vérifiés, vous pouvez ajouter vos badges personnalisés, par exemple pour les meilleurs contributeurs, les experts d’une catégorie, et ainsi de suite. Les badges personnalisés sont partagés par tous les marchands au sein du même groupe de marchands, comme les évaluations. Cependant, vous pouvez personnaliser l’apparence des badges au niveau des marchands en utilisant des priorités CSS : .pr-review-author-topContributor-wrapper.pr-review-author-topContributorwrapper-en_US { background: url("http://www.yourSite.com/images/merchantName_topContributor.gif") no-repeat; } .pr-review-author-topContributor-wrapper.pr-review-author-topContributorwrapper-en_US img { visibility: hidden; } .pr-profile-author-container .pr-profile-badge-wrapper { width: 85px; margin-left: 65px; }
Le code donné en exemple dans cette section suppose que « topContributor » est le label du badge que vous avez spécifié lorsque vous avez créé le badge personnalisé depuis le tableau de bord. NOTE
Dernière révision: 3 janvier 2013
Les badges | 25
Confidentiel Bazaarvoice
Facebook intégré La fonction Facebook intégré tire profit des recommandations fiable d’ami à ami et intègre le plus grand réseau social du monde directement sur votre page de produit. Facebook intégré rend possible le flux ouvert de données et de contenu généré par les utilisateurs entre votre site web de commerce en ligne et Facebook. Vous pouvez personnaliser et modifier le style des fonctions suivantes de Facebook intégré :
les évaluations sur votre site web incluent les éléments suivants (voir l’Illustration 25) qui ne sont pas affichés si vous n’activez pas Facebook intégré :
les photos des évaluateurs au compte Facebook vérifié (à moins que l’évaluateur ne sélectionne Ne pas afficher la photo après avoir vérifié son compte Facebook) – flèche A
le lien Voir toutes mes évaluations pour les évaluateurs au compte Facebook vérifié ayant soumis deux évaluations ou plus – flèche B. (Quand on clique sur ce lien, l’Illustration 26 apparaît.) (Cette fonction peut être activée sans Facebook intégré en croisant le nom de l’utilisateur avec les évaluations soumises.)
le lien commenter cette évaluation – flèche C
Illustration 25. Évaluation avec Facebook intégré (par un évaluateur au compte Facebook vérifié)
26 | Chapitre 3 Style des fonctionnalités facultatives d’Évaluations Clients
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
les profils des évaluateurs mis en valeur par Facebook incluent la photo de profil Facebook des évaluateurs (en plus des données standard des évaluations concernant les évaluateurs, les données d’historique, d’histogramme de notes et concernant la personnalité de l’utilisateur). En outre, les évaluateurs peuvent ajouter ou retirer leur photo de profil en gérant leurs préférences Facebook (flèche D).
Illustration 26. Profil d’un évaluateur mis en valeur par Facebook (« Voir toutes mes évaluations ») Le Tableau 2 décrit les éléments dont le style peut être modifié.
Tableau 2.
Éléments personnalisables pour Facebook intégré
Classe CSS
Illustration et flèche
Description
.pr-review-author-info-wrapper
Illustration 25, flèche A
Photo de l’évaluateur au compte Facebook vérifié
.pr-review-author-profile-link
Illustration 25, flèche B
Lien Voir toutes mes évaluations
.pr-fb-reviewComment
Illustration 25, flèche C
Lien Commenter cette évaluation
Illustration 26, flèche D
Lien Gérer les paramètres
.pr-profile-fb-help-icon .pr-profile-fb-manage-settings
Dernière révision: 3 janvier 2013
Facebook intégré | 27
Confidentiel Bazaarvoice
Images personnelles des clients Les images personnelles des clients sont des versions miniatures d’images que les évaluateurs ont jointes à leurs évaluations, affichées comme une pellicule sur les pages de vos produits (Illustration 27).
Illustration 27.
Images personnelles miniatures en vue pellicule
Quand les clients cliquent sur une image personnelle miniature d’un client, l’image apparaît dans sa taille originale dans une fenêtre pop-up (Illustration 28).
28 | Chapitre 3 Style des fonctionnalités facultatives d’Évaluations Clients
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Illustration 28.
Fenêtre pop-up d’une image personnelle
Le Tableau 3 décrit les éléments dont le style peut être modifié.
Tableau 3. clients
Éléments personnalisables pour les images personnelles des
Classe CSS
Description
.prImageSnippetNonempty
DIV qui encadre tout l’affichage de la pellicule.
.prImageSnippetHeader
DIV d’en-tête, qui affiche « Customer Images » (images des clients) par défaut.
.prImageSnippetImage
DIV qui encadre chaque image miniature.
.prImageSnippetEmpty
DIV utilisé quand il n’y a pas d’image personnelle ; vous permet de cacher la pellicule quand il n’y a pas d’image à afficher.
Dernière révision: 3 janvier 2013
Images personnelles des clients | 29
Chapitre 4. Style de la page « Rédiger une évaluation » Comme pour les aperçus des évaluations et l’affichage des évaluations, vous pouvez modifier le style du formulaire « Rédiger une évaluation » en utilisant CSS afin qu’il corresponde à l’apparence et à l’atmosphère de votre site web. Ce chapitre fournit des informations sur les pages individuelles générées par le cadre iFrame « Rédiger une évaluation » d’Évaluation Clients, ainsi que les éléments de chaque page.
Points-clefs du chapitre
Formulaire de soumission de l’évaluation
Page de prévisualisation de l’évaluation
Page de remerciements pour l’évaluation
Confidentiel Bazaarvoice
30
Confidentiel Bazaarvoice
Formulaire de soumission de l’évaluation Le formulaire de soumission d’évaluation est la page principale du processus « Rédiger une évaluation ». Il s’agit de la première page du processus de soumission, et elle contient les champs utilisés par les clients (les acheteurs) pour saisir leur évaluation.
Illustration 29.
Éléments de la page « Rédiger une évaluation », 1ère partie
Dernière révision: 3 janvier 2013
Formulaire de soumission de l’évaluation | 31
Confidentiel Bazaarvoice
Illustration 30. Éléments de la page « Rédiger une évaluation », 2ème partie
Exemples L’Illustration 31 et l’Illustration 32 montrent un formulaire de soumission « Rédiger une évaluation » très personnalisé.
32 | Chapitre 4 Style de la page « Rédiger une évaluation »
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Illustration 31.
Formulaire « Rédiger une évaluation » personnalisé, 1ère partie
Dernière révision: 3 janvier 2013
Formulaire de soumission de l’évaluation | 33
Confidentiel Bazaarvoice
Illustration 32.
Formulaire « Rédiger une évaluation » personnalisé, 2ème partie
34 | Chapitre 4 Style de la page « Rédiger une évaluation »
Dernière révision: 3 janvier 2013
Confidentiel Bazaarvoice
Page de prévisualisation de l’évaluation Quand un client complète le formulaire de soumission d’une évaluation, il peut voir l’évaluation (voir la page « Prévisualisation de l’évaluation ») avant de la soumettre. Vous pouvez modifier le style ou personnaliser la page « Prévisualisation de l’évaluation » grâce à aux feuilles de style CSS ; l’Illustration 33 montre les éléments modifiables.
Illustration 33.
Éléments de la page de prévisualisation d’une évaluation
Dernière révision: 3 janvier 2013
Page de prévisualisation de l’évaluation | 35
Confidentiel Bazaarvoice
Page de remerciements pour l’évaluation La page finale du processus de soumission des évaluations est la page de remerciements. Cette page confirme aux clients qu’ils ont bien soumis leurs évaluations auprès du système et les redirige vers la page d’accueil ou la page du produit. L’Illustration 34 met en évidence les éléments dont le style peut être modifié.
Illustration 34.
Éléments de la page de remerciements
36 | Chapitre 4 Style de la page « Rédiger une évaluation »
Dernière révision: 3 janvier 2013
Annexe A.
Historique des révisions
Cette annexe décrit les principales révisions ayant été successivement apportées à ce document.
Points-clefs de l’annexe
Tableau 4, « Historique des révisions »
Confidentiel Bazaarvoice
37
Confidentiel Bazaarvoice
Le Tableau 4 décrit les révisions majeures apportées à ce document.
Tableau 4.
Historique des révisions
Date
Révisions
25 mai 2011
À partir de la version précédente v5, ce document a été reformaté et les informations concernant les badges ont été ajoutées.
7 juillet 2011
Ajout des informations de style pour Facebook intégré et les images personnelles des clients.
30 août 2011
Ajout des informations de style pour la comparaison d’évaluations pour Internet Explorer.
23 octobre 2011
Mise à jour du logo PowerReviews.
12 mars 2012
Mise à jour du nom des produits.
4 décembre 2012
Marque mise à jour pour Bazaarvoice.
3 janvier 2013
Traduit en français.
38 | Annexe A Historique des révisions
Dernière révision: 3 janvier 2013
.pr-other-attributes-label – l’élément
