Presentation blue infinity-e-com2011_pour audience

www.b-i.com

b-i branding. technology. integration.

blue-infinity

www.b-i.com


Recherche produit & déclenchement d’achat

Bonnes pratiques ergonomiques & solutions techniques

Salon eCom – Genève – 24 mai 2011

confidential and proprietary ©blue-infinity branding.technology.integration

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


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.


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

Strategy & Creative, Web & Social Media, E-commerce & E-CRM, Enterprise Collaboration, Mobile Marketing, User Experience, Interface design Technologies: RIA , Web, CMS, iOS, Mobile

Branding & Interactive Marketing

Systems Integration

services & solutions intégrés

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, …

Technology & Infrastructure


Zoom sur quelques fondamentaux du commerce en ligne


Fiche produit : bonnes pratiques ergonomiques pour optimiser le déclenchement d’achat

- Pourquoi la fiche produit ?


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.



- Dans le cadre de campagne publicitaire en ligne:

> La fiche produit est un choix de page de destination pertinent des liens publicitaires sponsorisés.



- 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.



-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 ?



- 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.


Fiche produit : bonnes pratiques ergonomiques pour optimiser le déclenchement d’achat

- Les éléments clés pour soutenir l’acte d’achat.


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.


Visuels produit : bonnes pratiques

- Exemple sarenza :

Visuels du produit sous tous les angles.



- Exemple sarenza :

Zoom dynamique permettant de voir les détails.



- Exemple sarenza :

Fonctionnalité “zoom +”.



- Exemple sarenza :

“Encore plus de zoom”.


Visuels produit : bonnes pratiques - Exemple ebags :

Vue produit dans les différentes couleurs disponibles.



- Exemple ebags :

Possibilité de zoomer sur les détails.


Visuels produit : bonnes pratiques - Exemple ebags :

Différentes vues (sac ouvert, fermé, avec des exemples d’usage, porté).



- 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.



Possibilité d’affichage plein écran.

- Exemple Darty :

Outre les différentes vues produit, possibilité de zoomer jusqu’à un niveau de détail très fin.


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.


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.


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.


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.



- Exemple Darty :

Mise en valeur des garanties

et possibilité de retour avec accès contextuel au téléphone du service client.



- Exemple Sarenza :

Téléphone du service client.

Réassurance sur le retour du produit.


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.


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.


Notations et avis client: bonnes pratiques


Synthèse des pour et des contres avec le nombre de clients.

Accès aux avis client les plus récents.


Fiche produit : bonnes pratiques ergonomiques pour favoriser la découverte du catalogue

- Quelques exemples pour favoriser la visibilité de l’étendue de l’offre.


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.


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)


Passerelle vers les produits des autres rayons

- Exemple Sarenza :

Thématique “complétez votre look”.


Remontée de produits d’intêret similaires

- Exemple amazon :

Thématique “Produits fréquemment achetés ensemble”.

- Calcul dynamique du “prix d’ensemble”.


Remontée de produits coordonnés


Vêtements coordonnés avec le produit.


Recherche produit et référencement: quelques pistes technologiques


Sommaire

- Introduction

- Normes et standards dans les interfaces

- Bonnes pratiques d’implémentations

- Introduction au SEO (Search Engine Optimization)


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).


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>


Accessibilité

- Un ensemble de règles provenant de deux normes (principales)

> Section 508

> WACG provenant de WAI (W3C)

- WAI :

> Priorité 1 A

> Priorité 1,2 AA

> Priorité 1,2,3 AAA

Doit

Devrait

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…


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.


Quelques bonnes pratiques d’implémentation


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


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.


Améliorer la recherche

Auto-complete dans un moteur de recherche

Proposez des alternatives (did you mean)

y compris vos magasins… ou autres informations utiles !


Améliorer la recherche

Corrigez automatiquement les mots à fort pouvoir discriminant


Introduction au SEO

- La plupart des précédents points sont déjà du SEO !

Réponses Organiques

(SEO)

Publicité payante (SEA)

85% des clicks


Introduction au SEO… suite

- Stratégie au long terme.

- Différents types d’optimisation:

Contenu

Keywords: -Titre -Meta Tags -Page Unicité du contenu Mises à jour

Technique

SEF Structure HTML Robots.txt Sitemap XML Chargement

Marketing

Backlinks (liens venant d’autres sites)


Conclusion & prospectives


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.


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.

www.b-i.com


Pour un complément d’information merci de nous contacter

Laetitia Giannettini

[email protected]

Guillaume Arluison [email protected]

Retrouvez la totalité de nos parutions sur le blog de blue-infinity

blog.b-i.com