Experts en commerce électronique et solutions Web

Une autre journée bien remplie qui se termine. Je dois avouer que ça donne beaucoup d’idées toutes ces conférences! J’espère d’ailleurs pouvoir vous en faire bénéficier.  Aujourd’hui ,je vous ferai un récapitulatif de cette deuxième journée de conférences (en considérant que la première journée et la dernière sont des ateliers ).

Walgreens – Mobile, Web et stores

Sona Chawla, présidente e-Commerce de Walgreens, nous parle de l’intégration de ces trois plateformes dans la stratégie de l’entreprise. Elle mentionne qu’il est important de pouvoir répondre aux besoins des clients sur tous les canaux possibles et qu’ils veulent utiliser. Toutefois, le besoin est différent d’un canal à l’autre. Par exemple, sur le Web autant que sur le mobile, il est possible de renouveler une prescription en moins de 30 secondes. L’application mobile scanne le code barre et envoie la requête à la pharmacie où la prescription avait été émise.

Ils ont plusieurs produits qui sont exclusifs sur le site Web qui ne sont probablement pas tous rentables de tenir en magasin: l’espace sur tablettes étant limité en plus que les quantités varient d’un magasin à un autre. Toutefois, tous ont accès à ces produits via le Web.

Un fait intéressant, un client qui est présent à travers plusieurs canaux est 3 fois plus payant ! Ça vaut donc la peine de développer ces canaux alternatifs.

Les ventes privées

Doug Mack de One King’s Lane, nous parle du phénomène des ventes privés, qui est en très forte croissance. Il fait la différence avec Groupon, qu’il qualifie de service de coupons localisés, tandis que les ventes privés sont “de la vente”. Cela dit, dans les deux cas, c’est un programme de marketing. Groupon sert principalement à un commerçant pour de l’acquisition de clientèle (on ne va pas faire le débat de Groupon, mais je ne suis pas convaincu de l’acquisition de clientèle..), tandis que les ventes privées permettent à des marques (manufacturiers) de se faire connaître. Ainsi, il y a une augmentation d’environ 60% des visites chez les manufacturiers après une vente privée de leur produit.

Qu’est-ce que le concept de vente privée ?

Juste un petit mot pour ceux qui ne savent pas ce que c’est. En fait, les utilisateurs ne peuvent voir les produits qu’après la création d’un compte, où ils donnent plusieurs informations. Après quoi, ils ont accès à un certain nombre de ventes. Les produits changent constamment et sont en vente en quantité limitée et pour une période de temps limité (afin de créer le sentiment d’urgence pour susciter l’achat). Bien entendu, il y a un rabais assez intéressant sur les produits afin de générer de l’intérêt. À titre d’exemple One King’s Lane a acquis 1.5 millions de nouveaux clients seulement l’an dernier et le site existe depuis 2 ans. Les utilisateurs sont très majoritairement des femmes.

Le succès d’un site de vente privée repose principalement sur:

  • Des produits exclusifs et soigneusement sélectionnés. Il ne faut pas que ce soit des items qui sont disponibles dans toutes les boutiques. Il faut que les utilisateurs sentent qu’on recherche les meilleurs produits pour eux (concept de rareté et d’unicité)).
  • Créer une habitude journalière. 75% des ventes proviennent de consommateurs fidèles. Contrairement au commerce normal, les gens magasinent pour répondre à un besoin précis. Dans le cas des ventes privés, il y a un aspect ludique et de jeu. On pique la curiosité avec les produits exclusifs, il y a donc un intérêt à y aller régulièrement afin de voir quels sont les produits présentés (d’où l’importance d’avoir une bonne sélection de produits).
  • Créer un sentiment d’urgence et ludique (j’en ai déjà parlé). Pour le sentiment d’urgence, il faut qu’il y ait une incitation à passer à l’action tout de suite. Le produit est disponible en quantité limité et pour une période de temps limité. C’est donc le même effet que le”boxing day” où tout le monde veut dénicher “la bonne affaire”.
  • Avoir un aspect social en encourageant les utilisateurs à recruter de nouveaux membres. Ce qui est le plus payant pour One King’s Lane, ce n’est pas la publicité, mais les références des membres qui font du bouche à oreille.

Selon Doug Mack, les utilisateurs ne pourront pas supporter plus de 5 adhésions à un site de vente privée.  Il y a définitivement un avantage pour les premiers joueurs à se lancer dans ce segment.

L’approche multicanal

Le contenu des autres conférence a beaucoup tourné sur les mêmes contenus. En gros, un thème récurent est la constance dans les approches: s’assurer que le client est dans un même environnement peu importe le canal employé. Il est aussi important d’apprendre des bons/mauvais coups des différents canaux et voir si cela peut s’appliquer pour les autres.

Un élément intéressant dans l’approche multicanal que l’on entend moins parler, c’est  l’utilisation du Web ou du mobile à l’interne. Par exemple, le site Web peut être utilisé par le service à la clientèle ou le personnel en magasin dans le but de consulter des recommandations ou de faire du “cross/up sell” au client. Bien entendu, avec cette approche, une application mobile peut aussi permettre à un client en magasin d’accéder à ce contenu.

Il faut aussi impliquer l’ensemble des départements, puisque s’il y a des usages internes possibles, il faut que tous puissent en bénéficier et pouvoir ainsi proposer des nouvelles fonctionnalités.

Afin de mesurer le succès des stratégies avec le multicanal, il est important d’avoir une vue et des rapports centrés sur le consommateur. Une façon de pouvoir les reconnaître est soit par un membership (concept des coop) ou bien par une carte fidélité du magasin. Ainsi, il est possible de suivre les canaux utilisés par un même utilisateur pour faire ses achats. Cette approche permet de voir s’il y a des différences entre les types de produits achetés selon le canal.

Puisque l’on parle de se centrer sur l’utilisateur, il est aussi important d’avoir son avis. Les médias sociaux sont souvent un endroit où il est facile d’entrer en conversation avec eux. D’ailleurs, pourquoi ne pas leur demander ce qu’ils pensent du site Web ou des fonctionnalités qu’ils aimeraient avoir ou ce qui ne fonctionne pas selon eux.

L’expérience utilisateur pour augmenter la conversion

Un sujet très intéressant ! Un point majeur est de penser à la navigation du point de vue de l’utilisateur afin qu’il puisse s’y retrouver (C’est le but non?) Par exemple de mettre des listes contenant une centaine de marques n’aidera certainement pas le consommateur à s’orienter (créera plutôt l’effet inverse).

La navigation implique aussi les messages d’interactions avec les utilisateurs. Trop souvent, les messages d’erreurs ne sont pas visibles ou ne sont pas clairs. Il est très important d’indiquer à l’utilisateur ce qu’il a fait de mal et ce que nous nous attendons de sa part. Ainsi, lorsqu’un utilisateur entre dans un champ, nous pouvons lui présenter une infobulle qui présente ce qui est attendu ainsi qu’un exemple du format. Lorsqu’une erreur est effectuée, il faut tenter de pointer le plus possible la cause et orienter l’utilisateur pour qu’il puisse la corriger (ce n’est pas nécessairement évident à coder cela dit). De plus, même ce qui peut sembler une évidence mais qu’il faut considérer c’est le choix des couleurs: rouge = erreur, vert = ok.

Dans les pages produits, s’il y a un rabais appliqué, il est super important de l’indiquer clairement et d’y inclure le prix initial. Par exemple, le “retail price”, notre prix, le rabais, le prix final et puis le rabais en pourcentage. Mais ces informations doivent être bien représentées pour ne pas créer trop de confusions dans l’interface.

Pour augmenter la confiance des utilisateurs sur votre site, intégrer les logos et les marques de vos fournisseurs (s’ils sont connus)  peut vous donner une bonne crédibilité. De plus, vous pouvez faire payer vos fournisseurs pour occuper ces espaces en mettant leur produits de l’avant. C’est la même chose avec les photos à mettre sur votre page d’accueil: peut être que les fournisseurs seront prêt à vous les fournir gratuitement, puisqu’elles mettent leur produits en valeur.

En résumé

L’approche multicanal est définitivement à prendre en considération dans vos stratégies e-Commerce. Toutefois, il est important d’avoir un bon plan et d’être constant dans l’ensemble des canaux. Il faut être ouvert et collaborer à l’interne, utiliser les idées de tous et faire circuler l’information. Le site Web ou les applications mobiles sont autant bonnes pour les clients que pour les employés. L’expérience utilisateur doit être au centre des préoccupations. A cet effet, il faut faire des tests (A/B par exemple), mais aussi, il ne faut pas hésiter à demander l’avis des utilisateurs sur les médias sociaux pour qu’ils s’impliquent à fournir leurs commentaires pour améliorer l’ expérience. Assurez-vous de donner des directions claires aux utilisateurs pour bien les orienter et ne pas les freiner dans leur processus d’achat.

À demain pour la dernière journée d’ateliers!

Je n’ai pas pu résister à partager avec vous ce clin d’oeil (courtoisie d’un de nos géniaux développeurs Web) :

Le site américain Blippy.com (qui propose aux internautes d’échanger des critiques sur des produits) a réalisé  une page 404 particulièrement travaillée et originale. En surfant sur le buzz de la vidéo YouTube “Double rainbow”, cette compagnie propose carrément une expérience interactive aux visiteurs qui se seraient égarés, avant de les ramener en douceur sur la page d’accueil. En cliquant sur la corne de la licorne, vous revivez presque intégralement la fameuse vidéo via le petit personnage ! Résultat : une page 404 chaleureuse, qui reste dans l’esprit du site et qui permet d’assurer la continuité de l’expérience de navigation de l’internaute, même en cas d’incident technique. Si le coeur vous en dit, cliquez sur l’image pour admirer le travail :

Cliquez sur sa corne pour revivre l'expérience "Double Rainbow" ! 

Vous avez peut-être déjà vécu la situation suivante : vous avez une page HTML qui s’affiche relativement bien et vous décider d’ajouter une déclaration de DocType au début du document pour respecter le standard W3C. Soudainement, plusieurs éléments ne s’affichent plus correctement, pourtant rien n’a changé dans la source HTML à part cette petite ligne au début.

Une question de compatibilité

La raison est que lorsqu’aucun doctype n’est présent le navigateur utilise généralement le mode Quirks pour rendre la page, tandis que lorsqu’un doctype est présent le mode de comptabilité standard est utilisé. Dans Firefox, voici comment savoir quel mode de compatibilité est utilisé pour l’affichage :
Right-click dans la page > Page Info : vous ouvrira le pop-up suivant :
 

 

Surmonter les guéguerres de navigateurs

L’origine du mode Quirks remonte à l’époque de la guerre des navigateurs où Internet Explorer et Netscape avaient chacun leur standard. Le mode Quirks permet donc aux navigateurs récents de supporter du HTML/CSS qui ne répond pas aux standards en essayant de faire un affichage décent. De nos jours, une déclaration de DocType devrait toujours être incluse et les pages devraient toujours être intégrées en fonction du mode de compatibilité standard. De cette façon il y a beaucoup plus de chance que l’affichage soit constant d’un navigateur à l’autre (dans les navigateurs récents), même si c’est loin d’être une garantie d’une compatibilité complète.

Voici quelques exemples courants d’éléments interprétés différemment en quirks mode :
- Les largeurs et padding du box model
- Certaines balises ont le droit ou pas d’être inclues dans d’autres balises (Ex : des LI sans UL)
- Les espaces blancs ou retour de ligne entre les balises peuvent avoir un impact sur l’affichage

Vous pensez avoir tout compris et ce n’est pas si compliqué que ça finalement? Sachez qu’il existe aussi un Almost standard mode (http://www.quirksmode.org/css/quirksmode.html). Vous y trouverez plus de détails l’histoire du mode quirks ainsi que les différences entre les interprétations des modes quirks et standard et almost standard. Également, l’arrivée du HTML 5 va remettre le concept de doctype en question.

Pour plus d’information, la référence ultime sur le sujet est le site http://www.quirksmode.org/

 

Articles connexes

 
La liste des différences entre le mode standard et quirks dans Firefox
https://developer.mozilla.org/En/Mozilla_Quirks_Mode_Behavior
La liste des doctypes qui font que Firefox va rendre la page en Strict, Almost-Strict, Quirks
https://developer.mozilla.org/en/Mozilla’s_DOCTYPE_sniffing
Les “Améliorations” (hors standards) d’Internet Explorer 6 qui ont fait suer la plupart des intégrateurs
http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

On parle  souvent de doctype, de l’impact que ça a sur l’affichage d’une page, des différences d’interprétation entre les navigateurs, des versions du HTML… mais en bout de ligne c’est quoi un doctype ?

 

C’est un interprète pour le W3C

Un doctype c’est en fin de compte une sorte de grammaire qui indique au navigateur comment interpréter le code HTML de la page. C’est également cette grammaire qui servira au validateurs du W3C pour déterminer si votre document respecte le standard. Voici un exemple de doctype :

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

 ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

La seconde ligne de la balise pointe vers la grammaire en question. De façon régulière, ce document est hébergé sur le site du W3C, mais notez que vous pourriez faire pointer cette adresse sur un de vos serveurs sans problème. En fait le navigateur n’utilise pas la DTD pour valider le fichier HTML/XHTML donc il ne télécharge pas la DTD.  Donc le doctype suivant est aussi valide bien qu’il ne référence pas l’URL du fichier de DTD.

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>

Un parser XHTML ou un validateur, lui, se servira généralement de la DTD pour valider la forme du fichier. (Le W3C éprouve d’ailleurs des problèmes car plusieurs logiciels téléchargent inutilement les DTD causant du trafic inutile : http://www.w3.org/2005/06/blog/systeam/2008/02/08/w3c_s_excessive_dtd_traffic )

 

C’est un guide pour le navigateur

La ”grammaire” du doctype indique au navigateur tout ce qu’il doit savoir sur le document :

  • Les événements supportés :

<!ENTITY % events

 ”onclick     %Script;       #IMPLIED

  ondblclick  %Script;       #IMPLIED

  onmousedown %Script;       #IMPLIED

  onmouseup   %Script;       #IMPLIED

  onmouseover %Script;       #IMPLIED

  onmousemove %Script;       #IMPLIED

  onmouseout  %Script;       #IMPLIED

  onkeypress  %Script;       #IMPLIED

  onkeydown   %Script;       #IMPLIED

  onkeyup     %Script;       #IMPLIED”

  >

  • Les types de listes :

<!ENTITY % lists “ul | ol | dl | menu | dir”>

  • La liste des attributs acceptés par une balise et les valeurs par défaut :

<!ELEMENT iframe %Flow;>

<!ATTLIST iframe

  %coreattrs;

  longdesc    %URI;          #IMPLIED

  name        NMTOKEN        #IMPLIED

  src         %URI;          #IMPLIED

  frameborder (1|0)          “1″

  marginwidth %Pixels;       #IMPLIED

  marginheight %Pixels;      #IMPLIED

  scrolling   (yes|no|auto)  “auto”

  align       %ImgAlign;     #IMPLIED

  height      %Length;       #IMPLIED

  width       %Length;       #IMPLIED

  >

Il existe des tonnes de doctypes (http://www.w3.org/QA/2002/04/valid-dtd-list.html) qui indiqueront à votre navigateur les règles à suivre pour comprendre votre document.

Dernier article de cette série sur l’ergonomie de la vente en ligne : l’étape transactionnelle. Il faut ici veiller à offrir à vos clients un environnement agréable, sécurisant et efficace.

 

Un panier d’achat accessible en tous temps

De nombreux internautes ont un comportement exploratoire (notamment les profils “indécis” et “aventurier”) lorsqu’ils se balladent sur un site de commerce électronique. Il faut leur donner la possibilité de mettre de côté des articles et de consulter l’état de leur panier tout en continuant leurs emplettes. On veillera donc au respect des élément suivants :

  • Le panier doit être visible sur les pages tout au long de la navigation
  • Les articles qui y sont contenus doivent être le plus possible visibles (au moins leur nombre)
  • Il doit être possible de facilement rentrer puis ressortir du panier, en raterrissant alors sur la dernière page ou fiche produit consultée (pour conserver le fil de la navigation)

 Exemple : En cours de navigation, le panier d’achat de Renaud-Bray est toujours visible et accessible :

Le panier d'achat en contexte de Renaud-Bray

 

Un véritable espace Zen

Logiquement, la phase d’achat intervient à la fin d’un magasinage effréné. Pour ménager l’internaute (et être sûr de convertir la vente), il convient donc de simplifier le plus possible cette dernière étape. Un design épuré et des informations trés claires sont la clé :

  • Nom de l’article et photo
  • Totaux et sous-totaux
  • Code réduction le cas échéant
  • Coûts et délais de livraisons
  • Possibilité de modifier les différents critères (taille, modèle, quantité) pour chaque item

Un exemple sur le site des magasins Clément :

 Le panier d'achat des magasins Clément (corps)

 

 La phase de paiement : inspirer confiance jusqu’au bout

Lors du “passage à la caisse”, il est indispensable de rappeller une dernière fois au client qu’il fait affaire avec des commerçants sérieux. L’internaute ne doit pas avoir l’impression que sa relation avec vous s’arrête à l’achat du produit, mais que sa demande est sérieusement prise en charge et qu’un suivi de qualité sera assuré.  Pour cela, pensez à inclure les infos suivantes :

  • Fil conducteur qui indique les différentes étapes du passage de commande (voir image ci-dessus)
  • Informations sur le paiement (sur les aspects sécuritaires notamment)
  • Numéro de téléphone de votre service client
  • Politiques d’échanges et de remboursement des produits
  • Permettre de suivre l’état de la commande en ligne après l’achat

 

Comme toujours, il faut choyer l’internaute et lui offrir une expérience d’achat optimale. La sécurité des paiements en ligne inspire de plus en plus de confiance (45% des internautes québécois font confiance au paiement en ligne, une proportion en constante augmentation). Ce qu’il faut maintenant réussir,  c’est recréer cette sensation de proximité qui crée la confiance dans les magasins physiques.