Solutions de gestion de site Internet et d'entreprises

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.

 

 

Si vous avez lu le premier post de cette série, vous savez comment les différents types d’internautes trouvent l’information sur votre site. Il faut maintenant vous assurer que ce qu’ils trouvent leur plaise. En commerce électronique, la présentation de vos produits est donc un point clé.

Votre liste de produits

Le premier contact avec vos produits se fait au niveau de votre liste. Dès cette étape, la présentation proposée doit avoir un impact positif sur vos internautes (particulièrement pour les profils “impulsifs”). Votre liste doit être agréable à regarder bien sûr, mais surtout les produits qui y sont inclus doivent déjà présenter une information pratique et attractive. Considérez ainsi les éléments suivants lorsque vous imaginez votre liste :

  • Disposition générale agréable, offrant une navigation facile (colonnes ou liste)
  • Vignettes suffisaments larges, avec des images attractives
  • Brève description/titre du produit
  • Prix/promotion
  • Disponibilité
  • Bouton “Ajouter au panier” 

 

L’exemple des Librairies Renaud-Bray :

La liste de produits sur le site de Renaud-Bray

Votre fiche produit – images et textes

Second contact virtuel avec votre offre : votre fiche produit. Elle doit permettre de présenter votre produit sous son meilleur jour et de fournir une information complète et attractive. Éléments clés :

  • Descriptif bref, efficace
  • Photos de bonne qualité, sous différents angles si le produit s’y prête
  • Zoom HD (en cliquant sur l’image)
  • Le prix, information clé, est en gras, si il y a un rabais exclusif en ligne, il doit apparaitre très clairement
  • La disponibilité
  • Les frais et délais de livraison
  • Présenter les différents modèles (menu déroulant par ex.)
  • Les boutons de passage à l’action (acheter, rajouter au panier d’achat) doivent être mis en évidence, par exemple avec des icônes
  • Le cas échéant, la liste des magasins où le produit peut-être trouvé
  • Donner le numéro de téléphone du service à la clientèle est une bonne pratique pour rassurer le client

 

L’exemple d’une fiche produit Renaud-Bray :

Une fiche produit Renaud-Bray

 

Votre fiche produit – des applications exclusives en ligne

Enfin, votre fiche produit est aussi l’occasion d’offrir des fonctionnalités à fortes valeurs ajoutées dont vos clients ne pourraient pas bénéficier dans un magasin physique. Notamment :

  • Afficher des produits complémentaires (voir image plus haut)
  • Permettre d’imprimer la fiche produit
  • Permettre de créer une liste dans le panier d’achat, pour des commandes ultérieures
  • Donner des espaces de commentaires pour les internautes (type Amazon)
  • Offrir un lien vers les derniers produits consultés
  • Si le produit n’est pas en stock, proposer au client de le contacter par courriel dès qu’il est de nouveau disponible

 

Une présentation attractive de vos produits permet d’offrir une expérience d’achat optimale. C’est donc un élément essentiel pour dynamiser vos ventes, fidéliser vos clients et les inciter à passer à l’achat. Dans le prochain et dernier post de cette série sur l’ergonomie de la vente en ligne : l’étape transactionnelle !