presentation blue infinity-e-com2011_pour audience

www.b-i.com

b-i branding. technology. integration.

blue-infinity

www.b-i.com

b-i branding. technology. integration.

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

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

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.

confidential and proprietary ©blue-infinity branding.technology.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

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

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

Zoom sur quelques fondamentaux du commerce en ligne

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

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

- Pourquoi la fiche produit ?

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

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.

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

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.

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

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.

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

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 ?

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

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.

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

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

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

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

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.

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

Visuels produit : bonnes pratiques

- Exemple sarenza :

Visuels du produit sous tous les angles.

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

Visuels produit : bonnes pratiques

- Exemple sarenza :

Zoom dynamique permettant de voir les détails.

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

Visuels produit : bonnes pratiques

- Exemple sarenza :

Fonctionnalité “zoom +”.

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

Visuels produit : bonnes pratiques

- Exemple sarenza :

“Encore plus de zoom”.

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

Visuels produit : bonnes pratiques - Exemple ebags :

Vue produit dans les différentes couleurs disponibles.

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

Visuels produit : bonnes pratiques

- Exemple ebags :

Possibilité de zoomer sur les détails.

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

Visuels produit : bonnes pratiques - Exemple ebags :

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

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

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.

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

Visuels produit : bonnes pratiques

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

Disponibilité et livraison: bonnes pratiques

- Exemple Sarenza :

Téléphone du service client.

Réassurance sur le retour du produit.

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

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.

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

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.

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

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.

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

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

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

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

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.

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

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)

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

Passerelle vers les produits des autres rayons

- Exemple Sarenza :

Thématique “complétez votre look”.

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

Remontée de produits d’intêret similaires

- Exemple amazon :

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

- Calcul dynamique du “prix d’ensemble”.

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

Remontée de produits coordonnés

- Exemple La Redoute :

Vêtements coordonnés avec le produit.

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

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

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

Sommaire

- Introduction

- Normes et standards dans les interfaces

- Bonnes pratiques d’implémentations

- Introduction au SEO (Search Engine Optimization)

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

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

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

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>

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

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…

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

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.

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

Quelques bonnes pratiques d’implémentation

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

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

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

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.

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

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 !

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

Améliorer la recherche

Corrigez automatiquement les mots à fort pouvoir discriminant

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

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

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

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)

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

Conclusion & prospectives

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

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.

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

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

b-i branding. technology. integration.

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

blog.b-i.com