Le document présente les meilleures pratiques pour optimiser les fiches produits dans le commerce en ligne, notamment à travers l'ergonomie et les éléments visuels qui influencent la décision d'achat. Blue-infinity, une société basée à Genève avec une expertise en technologie et marketing, partage également des conseils sur la recherche de produits, le référencement et l'expérience utilisateur. Enfin, il aborde les exigences normatives et techniques qui peuvent améliorer la visibilité et l'efficacité des sites e-commerce.

1. blue-infinity
b-i branding. technology. integration.
www.b-i.com

2. Recherche produit &
déclenchement d’achat
Bonnes pratiques ergonomiques &
solutions techniques
b-i branding. technology. integration.
Salon eCom – Genève – 24 mai 2011
www.b-i.com

3. Agenda
- Qui sommes-nous ?
> Guillaume Arluison et Laetitia Giannettini : profil & background
- Zoom sur quelques fondamentaux du commerce en ligne
> Fiche produit : bonnes pratiques ergonomiques pour optimiser le
déclenchement d’achat / visibilité de l’étendue de l’offre
> Recherche produit et référencement : quelques pistes
technologiques
- Conclusion et prospectives
branding.technology.integration confidential and proprietary ©blue-infinity

4. qui nous sommes
– blue-infinity (b-i) est une société de services professionnels qui mise
sur son expertise des nouvelles technologies de l’information et des
concepts marketing d'avant-garde pour répondre aux enjeux
d’organisations innovantes.
– Basée à Genève, l’équipe de b-i qui est composée de plus de 250
experts, conjugue ses compétences spécialisées, sa culture
internationale et son expérience à travers diverses industries pour
délivrer des solutions intégrées.
– Notre travail pour plus de 100 clients multinationaux dans quelque 30
pays, nos projets primés et nos alliances stratégiques avec les
principaux acteurs des technologies de l’information reflètent la valeur
ajoutée unique de b-i.
branding.technology.integration confidential and proprietary ©blue-infinity

5. services & solutions intégrés
Branding & Interactive Marketing
Strategy & Creative, Web & Social Media, E-commerce & E-CRM, Enterprise Collaboration,
Mobile Marketing, User Experience, Interface design
Technologies: RIA , Web, CMS, iOS, Mobile
Systems Integration
Enterprise Portals, Digital Asset Management, ERP, Business Intelligence, Tracking & Monitoring,
ECM & Enterprise Search, E-government
Technologies: Microsoft, Java/J2EE , Open Source Solutions, Business Intelligence & ERP
Technology & Infrastructure
Service Management, PMO, Adoption Management, ITIL Process Definition, IAM,
Directory Services, Systems Management, Networks, Mobile & Wireless, Security,
Software Management, Desktop Management & Support, Service Desk, Education
Technologies/Best Practices: ITIL, SD 2, New Scale, Autonomy, Altiris, Bladelogic, …
branding.technology.integration confidential and proprietary ©blue-infinity

6. Zoom sur quelques fondamentaux
du commerce en ligne
branding.technology.integration confidential and proprietary ©blue-infinity

7. Fiche produit : bonnes pratiques
ergonomiques pour optimiser le
déclenchement d’achat
- Pourquoi la fiche produit ?
branding.technology.integration confidential and proprietary ©blue-infinity

8. La fiche produit comme “landing page”
- Dans le contexte d’une mission de re-conception, l’analyse des
statistiques de consultation du site e-commerce d’un acteur
majeur de la VPC en France a montré:
> Une augmentation significative du nombre
d’utilisateurs arrivent directement sur les
fiches produits du site.
branding.technology.integration confidential and proprietary ©blue-infinity

9. La fiche produit comme “landing page”
- Dans le cadre de campagne publicitaire en ligne:
> La fiche produit est un choix de page de
destination pertinent des liens publicitaires
sponsorisés.
branding.technology.integration confidential and proprietary ©blue-infinity

10. La fiche produit comme “landing page”
- Ainsi dans le cadre du commerce en ligne:
> Il est fréquent que l’utilisateur arrive
directement sur une fiche produit
sans avoir vu ou appréhendé l’ensemble du
contexte de l’univers de la marque porté
par le site.
branding.technology.integration confidential and proprietary ©blue-infinity

11. La fiche produit comme “landing page”
-Comment créer dans ce contexte une bonne
expérience utilisateur pour soutenir l’acte d’achat ?
-Comment donner envie de découvrir les autres
contenus et optimiser la visibilité de l’étendue de
l’offre ?
branding.technology.integration confidential and proprietary ©blue-infinity

12. La fiche produit comme “landing page”
- Nous traiterons en particulier :
> Des informations clés qui, sur une fiche produit,
soutiennent chez les utilisateurs le passage à l’acte
d’achat.
> Des éléments qui, depuis la fiche produit, rendent
efficaces la recherche et la découverte des produits
sur un site.
branding.technology.integration confidential and proprietary ©blue-infinity

13. Fiche produit : bonnes pratiques
ergonomiques pour optimiser le
déclenchement d’achat
- Les éléments clés pour soutenir l’acte d’achat.
branding.technology.integration confidential and proprietary ©blue-infinity

14. Fiche produit: les éléments clés pour
soutenir l’acte d’achat
> Visuels produit
Outre l’importance du descriptif produit, les visuels et
leur qualité sont des éléments essentiels à l’utilisateur
dans sa prise de décision.
branding.technology.integration confidential and proprietary ©blue-infinity

15. Visuels produit : bonnes pratiques
- Exemple sarenza :
Visuels du
produit sous tous
les angles.
branding.technology.integration confidential and proprietary ©blue-infinity

16. Visuels produit : bonnes pratiques
- Exemple sarenza :
Zoom dynamique
permettant de
voir les détails.
branding.technology.integration confidential and proprietary ©blue-infinity

17. Visuels produit : bonnes pratiques
- Exemple sarenza :
Fonctionnalité
“zoom +”.
branding.technology.integration confidential and proprietary ©blue-infinity

18. Visuels produit : bonnes pratiques
- Exemple sarenza :
“Encore plus de
zoom”.
branding.technology.integration confidential and proprietary ©blue-infinity

19. Visuels produit : bonnes pratiques
- Exemple ebags :
Vue produit dans
les différentes
couleurs
disponibles.
branding.technology.integration confidential and proprietary ©blue-infinity

20. Visuels produit : bonnes pratiques
- Exemple ebags :
Possibilité de
zoomer sur les
détails.
branding.technology.integration confidential and proprietary ©blue-infinity

21. Visuels produit : bonnes pratiques
- Exemple ebags :
Différentes vues
(sac ouvert,
fermé, avec des
exemples
d’usage, porté).
branding.technology.integration confidential and proprietary ©blue-infinity

22. Visuels produit : bonnes pratiques
- Exemple La Redoute :
Mis en contexte
concrêt du produit
avec accès à une
vidéo permettant
de voir le vêtement
porté en
mouvement.
branding.technology.integration confidential and proprietary ©blue-infinity

23. Visuels produit : bonnes pratiques
- Exemple Darty :
Outre les
différentes vues
produit,
possibilité de
zoomer jusqu’à
un niveau de
détail très fin.
Possibilité
d’affichage plein
écran.
branding.technology.integration confidential and proprietary ©blue-infinity

24. Fiches produits: les éléments clés pour
soutenir l’acte d’achat
> Livraison et service client
Infos claires et aisément accessibles sur la disponibilité du
produit, les différents modes, délais et frais de livraison.
Réassurance sur le service client : visibilité du contact, les
garanties, possibilité de retour, remboursement.
branding.technology.integration confidential and proprietary ©blue-infinity

25. Disponibilité et livraison: bonnes pratiques
- Exemple Darty :
Info disponibilité
avec la mention
“En stock”.
Présentation
claire des
différents modes
de livraison.
Jour de livraison
estimé et accès
contextuel à “+
d’infos” sur les
différents modes.
branding.technology.integration confidential and proprietary ©blue-infinity

26. Disponibilité et livraison: bonnes pratiques
- Exemple Darty :
Possibilité de
trouver et de
spécifier le
magasin le plus
proche de son
lieu d’habitation.
Accès aux détails
sur le magasin :
horaires
d’ouverture, plan
d’accès.
branding.technology.integration confidential and proprietary ©blue-infinity

27. Disponibilité et livraison: bonnes pratiques
- Exemple Darty :
Livraison à
domicile : accès
aux jours et
créneaux horaires
possibles de
livraison en
fonction du lieu
d’habitation.
branding.technology.integration confidential and proprietary ©blue-infinity

28. Disponibilité et livraison: bonnes pratiques
- Exemple Darty :
Mise en valeur des
garanties
et possibilité de
retour avec accès
contextuel au
téléphone du
service client.
branding.technology.integration confidential and proprietary ©blue-infinity

29. Disponibilité et livraison: bonnes pratiques
- Exemple Sarenza :
Téléphone du
service client.
Réassurance sur le
retour du produit.
branding.technology.integration confidential and proprietary ©blue-infinity

30. Fiches produits: les éléments clés pour
soutenir l’acte d’achat
> Notations et avis des utilisateurs
Eléments issus du “social networking” qui a prouvé son
efficacité et représente une dimension importante dans
le processus de décision de l’utilisateur.
branding.technology.integration confidential and proprietary ©blue-infinity

31. Notations et avis client: bonnes pratiques
- Exemple Amazon
ou Darty :
Système
d’évaluation des
produits ouverts
aux utilisateurs
matérialisé
visuellement par
une échelle de 5
étoiles.
Accès aux
commentaires
client.
branding.technology.integration confidential and proprietary ©blue-infinity

32. Notations et avis client: bonnes pratiques
- Exemple La Redoute :
Synthèse des pour et
des contres avec le
nombre de clients.
Accès aux avis client
les plus récents.
branding.technology.integration confidential and proprietary ©blue-infinity

33. Fiche produit : bonnes pratiques
ergonomiques pour favoriser la
découverte du catalogue
- Quelques exemples pour favoriser la visibilité de l’étendue de
l’offre.
branding.technology.integration confidential and proprietary ©blue-infinity

34. Passerelle vers les produits de la même
marque
- Exemple Sarenza :
Mise en avant avec
des visuels de
produits de la
même marque +
lien de catégorie sur
l’ensemble des
modèles.
branding.technology.integration confidential and proprietary ©blue-infinity

35. Passerelle vers les produits de la même
gamme
- Exemple 3 Suisses :
Visibilité d’autres
produits de la
gamme (ici : robes).
- Exemple La Redoute :
(ici : commodes)
branding.technology.integration confidential and proprietary ©blue-infinity

36. Passerelle vers les produits des autres
rayons
- Exemple Sarenza :
Thématique
“complétez votre
look”.
branding.technology.integration confidential and proprietary ©blue-infinity

37. Remontée de produits d’intêret similaires
- Exemple amazon :
Thématique
“Produits
fréquemment
achetés ensemble”.
- Calcul dynamique
du “prix
d’ensemble”.
branding.technology.integration confidential and proprietary ©blue-infinity

38. Remontée de produits coordonnés
- Exemple La Redoute :
Vêtements
coordonnés avec le
produit.
branding.technology.integration confidential and proprietary ©blue-infinity

39. Recherche produit et référencement:
quelques pistes technologiques
branding.technology.integration confidential and proprietary ©blue-infinity

40. Sommaire
- Introduction
- Normes et standards dans les interfaces
- Bonnes pratiques d’implémentations
- Introduction au SEO (Search Engine Optimization)
branding.technology.integration confidential and proprietary ©blue-infinity

41. Normes et standards
- HTML ? Markup language  définit la structure de vos pages.
- 2011 plusieurs normes :
> HTML 4.01 Transitional
> XHTML 1.0 Transitional
> XHTML 1.1 Strict
> HTML5
- Bien séparer contenu et présentation (CSS).
- Essayer de valider (X)HTML : http://validator.w3.org/.
- Character Set : UTF-8 (pratique pour multi-langue).
branding.technology.integration confidential and proprietary ©blue-infinity

42. Sémantique HTML / POSH
<div>
<div class="big">Mon produit</div>
Introduction à mon produit
<div class="subtitle">Description</div>
Voici la description de mon produit
<br />
Et les notes
</div>
<div>
<h1>Mon produit</h1>
<p>Introduction à mon produit</p>
<h2>Description de mon produit</h2>
<p>Voici la description</p>
<p class="notes">Et ici les notes</p>
</div>
branding.technology.integration confidential and proprietary ©blue-infinity

43. Accessibilité
- Un ensemble de règles provenant de deux normes (principales)
> Section 508
> WACG provenant de WAI (W3C)
- WAI :
> Priorité 1 A Doit
> Priorité 1,2 AA Devrait
> Priorité 1,2,3 AAA Peut
Exemples de règles :
- <img src="X1234.jpg" ALT="enfant utilisant le jouet à la crèche">.
- La navigation doit pouvoir s’effectuer si Javascript ou CSS est désactivé.
- Contraste des couleurs.
Etc…
branding.technology.integration confidential and proprietary ©blue-infinity

44. Pourquoi respecter les normes ?
- Meilleure reconnaissance dans les moteurs de recherche.
- Taille des pages réduites = rapidité de chargement
> Maintenant un indice Google.
- 1ère étape de l’accessibilité pour les personnes avec handicap.
- Facilité de partage sur réseau social (webclipping, crawling, widget Javascript …).
- Maintenance et évolutions simplifiées.
branding.technology.integration confidential and proprietary ©blue-infinity

45. Quelques bonnes pratiques
d’implémentation
branding.technology.integration confidential and proprietary ©blue-infinity

46. Deep Linking
- La puissance du web, ce sont ses liens.
- Pas de passage forcé pour accéder à un élément public
> Pas de frames (pas nouveau!)
> Utilisez flash comme du contenu et non comme un conteneur
– Evitez les menus en flash
> Si vous utilisez quand même flash comme un conteneur
– Utilisez des techniques pour signifier à flash des chemins précis
Exemple : http://www.site.com/home.php#flash_page_2
– Et générez un sitemap avec ces liens spéciaux
> Même problème avec le « Web 2.0 » et AJAX
Exemple : http://www.site.com/home.php#!key=value
branding.technology.integration confidential and proprietary ©blue-infinity

47. Urls « Search Engine Friendly » (SEF)
C’est-à-dire « URL signifiantes »
- http.//www.monsite.com/index.php?id=3
ou
- http://www.monsite.com/contact.html ?
ou même :
- http://www.monsite.com/voitures/renault/megane.html ?
 Indiquez vos catégories et sous-menu comme des « faux » répertoires.
branding.technology.integration confidential and proprietary ©blue-infinity

48. Améliorer la recherche
Auto-complete dans un moteur de recherche
y compris vos magasins… ou autres informations utiles !
Proposez des alternatives (did you mean)
branding.technology.integration confidential and proprietary ©blue-infinity

49. Améliorer la recherche
Corrigez automatiquement les mots à fort pouvoir discriminant
branding.technology.integration confidential and proprietary ©blue-infinity

50. Introduction au SEO
Publicité
payante (SEA)
85% des
Réponses clicks
Organiques
(SEO)
- La plupart des précédents points sont déjà du SEO !
branding.technology.integration confidential and proprietary ©blue-infinity

51. Introduction au SEO… suite
- Stratégie au long terme.
- Différents types d’optimisation:
Contenu Technique
Keywords: SEF
-Titre Structure HTML
-Meta Tags Robots.txt
-Page Sitemap XML
Unicité du contenu Chargement
Mises à jour
Marketing
Backlinks (liens venant
d’autres sites)
branding.technology.integration confidential and proprietary ©blue-infinity

52. Conclusion & prospectives
branding.technology.integration confidential and proprietary ©blue-infinity

53. Respecter (encore et encore !) les
fondamentaux du e-commerce
- La valorisation des produits.
- L’utilisabilité, condition de la bonne expérience et réassurance
client (recherche produit, fiche produit, ajout au panier, processus de
commande…).
- Les normes et bonnes pratiques d’implémentation.
- Le référencement.
Mais aussi :
- L’animation des contenus, en lien avec les communautés
d’utilisateurs.
- L’image de marque.
branding.technology.integration confidential and proprietary ©blue-infinity

54. Quid du “m-commerce” ?
- Média émergeant qui a ses spécificités qui enrichissent
l’expérience utilisateur et la relation client (géolocalisation,
écran tactile…).
- Mais pour lesquels les fondamentaux du e-commerce doivent
également s’appliquer:
> Constat d’un certain nombre de sites ou applications e-commerce
web mobiles qui ne fournissent aucune information ou accès aux
informations liées à la livraison au niveau des fiches produits.
branding.technology.integration confidential and proprietary ©blue-infinity

55. Pour un complément d’information
merci de nous contacter
Laetitia Giannettini
laetitia.giannettini@b-i.com
Guillaume Arluison
guillaume.arluison@b-i.com
Retrouvez la totalité de nos parutions
sur le blog de blue-infinity
b-i branding. technology. integration.
blog.b-i.com
www.b-i.com