Nouvelle rubrique emploi e-commerce

25 points à vérifier avant de mettre votre site en ligne

Par Capitaine | août - 26 - 2009 | 32 commentaires  
Auteur de ce billet : Olivier Sauvage, l'auteur, est le fondateur de Capitaine-commerce.com et de Wexperience, agence d'ergonomie digitale pour le ebusiness. Il travaille pour les plus grands comptes du ecommerce en France et est spécialiste de l'optimisation des sites sur mobile, tablette et web. Pour plus d'informations sur cette critique, n'hésitez pas à le contacter ou à l'appeler directement sur son portable.
» Voir tous les articles de Capitaine

Cet article fournit une check-list de 25 points d’usabilité à valider avant de mettre en ligne votre site.

Prêt pour le décollage ? (photo par Ceejayoz)

Prêt pour le décollage ? (photo par Ceejayoz)

L’usabilité entend-t-on trop souvent est une question de bon sens. Même si c’est parfois vrai, une bonne usabilité repose également sur de bonnes grilles de travail qui permettent de systématiser l’analyse d’un site de manière quasi scientifique. C’est pourquoi, aujourd’hui, je trouvais pertinent de transcrire en français 25-point Website Usability Checklist, du Dr Peter J Meyers, programmeur et psychologue cognitif, un petit bréviaire à l’intention de tous les heureux possesseurs de e-commerce qu’ils pourront eux-mêmes tester sur leur site.

Il s’agit donc d’une liste de 25 points divisés en 4 parties destinés, je l’espère, d’améliorer votre sacro-saint taux de transfo.

Première partie : L’accessibilité est-elle correcte ?

Cette section ne traite pas que des traditionnels problèmes d’accessibilité, mais aussi de tout ce qui peut empêcher un visiteur d’avoir accès au site. Si personne ne peut le charger, ou si la police de caractère est impossible à lire, toute l’usabilité du monde ne pourra rien y faire.

1. Les temps de téléchargements sont-ils raisonnables ?

Dites que je suis de la vieille école, mais je pense toujours que les pages des sites doivent faire moins de 60 Ko (100 au pire !!). Si un site prend trop de temps à être téléchargé, les gens vont simplement partir. Oui, c’est vrai, la plupart des gens ont des connexions haut-débit aujourd’hui, mais ça les rend encore plus impatients.

2. Le contraste texte-fond est-il adéquat ?

Du gris foncé sur du gris clair peut avoir l’air cool, mais vos lecteurs ne vont pas se ruiner les yeux sur votre site. Que ce soit à cause de leur vue ou de leur moniteur, le rendu d’une page varie énormément d’un utilisateur à l’autre, c’est pourquoi vous avez intérêt à choisir un fort taux de contraste entre votre police d’écriture et le fond de votre site. Le bon vieux noir/blanc reste le meilleur dans la plupart des cas.

3. Taille des caractères et espacement sont-ils suffisants ?

Les opinions varient en ce qui concerne la taille idéale du texte, mais il vaut mieux être légèrement trop grand que l’inverse. Une mauvaise lisibilité augmente la frustration de l’utilisateur et la frustration conduit à l’abandon de site. Assurez-vous donc que l’espacement entre les lignes est suffisant et que votre taille de typo avoisine les 12 ou 14 pt.

4. Flash et autres addons sont-ils utilisés avec parcimonie ?

Peu importe l’interactivité géniale de votre site si les gens doivent attendre 5mn pour télécharger un plugin. Soyez parcimonieux et n’utilisez ceux-ci que lorsqu’ils servent vraiment un but commercial. Evidemment, coller aux standards du web, HTML et CSS, sera aussi un plus pour le référencement de votre site.

5. Les images ont-elles des tags ALT ?

Il n’y a pas que les utilisateurs mal-voyants (plus de 100,000 en France) à utiliser les tags ALT, mais aussi les moteurs de recherche pour comprendre vos images. N’oubliez pas les ALT, spécialement pour les menus en images.

6. Le site a-t-il une page 404 personnalisée ?

Si une page n’existe pas sur votre site, une 404 blanche standard Microsoft ou Linux le fera fuir. Créez donc une page personnalisée qui aidera vos visiteurs à s’y retrouver (lire à ce sujet : My 404 sucks)

Deuxième partie : votre site est-il bien identifié ?

Une des premières question que se pose un utilisateur lorsqu’il arrive sur votre site est : « Qui êtes-vous ? »Il est donc important de lui donner une réponse le plus vite possible et de lui rendre accessible rapidement les réponses à toutes les questions qu’il peut se poser. Du genre : « Que vend ce site? », « Pourquoi doit-on lui faire confiance ? » Etc…

7. Le logo de votre société est-il bien en évidence ?

Placez votre logo ou le titre de votre site là où il est facile de le trouver. Dans 99% des cas, ça signifie en haut à gauche de la page. C’est là que les gens s’attendent à le trouver et pas ailleurs. Ne soyez pas exotiques avec des usages qui font partie des us et coutumes du web.

8. Un « baseline » (slogan) mentionne-il le métier de la société ?

Répondez à la question « Que faites-vous ? » de manière concise dans une baseline, une courte phrase en quelques mots,  sous votre logo. Evitez le jargon marketing, soyez simple et explicatif. Ca aussi, ça compte pour le SEO.

9. La page d’accueil est-elle digérable en 5s

5 secondes, c’est court, mais c’est tout le temps que vous allouent vos visiteurs pour digérer mentalement tout ce qui se trouve sur la page d’accueil. Au delà, vous risquez de les embrouiller, alors, arrangez-vous toujours pour que votre offre soit compréhensible dès la page d’accueil.

10. L’information sur votre société est-elle visible ?

Nous en avions déjà parlé, mais il est essentiel de décliner votre identité avec d’autant de transparence que faire se-peut avec une page « Qui sommes-nous ? » bien structurée (lire aussi « Page Qui sommes-nous ? Soignez votre présentation »). C’est un des éléments clé de la confiance entre vous et vos utilisateurs.

11. Les moyens de vous contacter sont-ils suffisamment visibles ?

Après avoir appris qui vous étiez, vos visiteurs aiment pouvoir prendre contact avec vous : par mail, par téléphone, par Twitter, par tout ce que vous voudrez, du moment que vous rendrez l’accès à ces moyens de contact faciles. Afficher clairement un lien vers un formulaire de contact ou le numéro de téléphone de votre service clientèle sont des éléments importants de la confiance.

Troisième partie : la navigation est-elle efficace ?

Une fois que les gens ont compris qui vous étiez et ce que vous faisiez, ils ont tendance à rechercher de l’information sur votre site. Organiser l’information est une vaste question et nous couvrirons ici simplement les fondamentaux.

12. La navigation principale est-elle facilement identifiable ?

Depuis que les navigateurs existent, presque tous les sites ont un menu principal. Faites qu’il soit extrêmement visible et facile à utiliser. Si vous avez plusieurs menus de navigation, faites que leur hiérarchie et leur fonction soient claires pour les utilisateurs.

13. Les liens sont-ils clairs et concis ?

Ne dites pas « Communiquez avec notre équipe » quand un simple « Contactez-nous » suffira amplement. Votre navigation principale doit utiliser des intitulés courts, directs et non ambigus.

14. Le nombre de boutons et de liens est-il raisonnable ?

Les spécialistes aiment bien se battre à propos de la quantité d’informations que nous sommes capables d’appréhender et de retenir. Si votre navigation dépasse 7 items, réfléchissez sérieusement à ceux que vous ajouterez en plus. Si vos menus déroulants javascript comportent plus de 2 sous-menus, recommencez !

15. Le logo ramène-t-il à la page d’accueil

Ca n’a l’air de rien, mais les gens s’attendent à ce que le logo ramène à la page d’accueil et s’il ne le fait pas, ils se retrouvent embêtés. J’ai vu des vidéos où des utilisateurs cliquaient et cliquaient sur le logo pour revenir à la page d’accueil, sans effet et sans savoir ce qu’il fallait faire pour continuer.

[ndt : les tests que j’ai réalisés moi même m’ont montré que ce point n’était pas tout à fait vrai. En fait, les gens trouvent toujours un moyen de revenir à la page d’accueil et souvent, ce qui m’a surpris moi même, n’utilisaient pas le logo. Différence entre utilisateurs français et américains ?]

16. Les liens sont-ils cohérents et faciles à identifier

Le lien bleu, souligné du web est un basique. Un peu « d’art » sur ces liens est acceptable, mais faites attention à, au moins, les souligner ou les garder en bleu. Les liens doivent ressortir et vous devez les utiliser avec mesure de manière à ne pas perturber le contenu.

[ndt : encore une remarque. Cette assertion est de moins en moins vraie. En fait, la règle des liens bleus a été tellement bafouée qu’aujourd’hui, même l’utilisateur le plus débutant ne s’attend pas à trouver un lien bleu. En fait, il aurait plutôt tendance à cliquer au hasard sur ce qui lui semble être un lien. Cela dit, je pense que dans un texte souligner un lien reste le meilleur moyen de faire savoir que c’est un lien]

17. La recherche est-elle facile d’accès ?

Si votre site possède un moteur de recherche, assurez-vous qu’il soit bien visible. Les règles de l’usabilité préconisent de le mettre en haut à droite de la page. Le bouton de recherche doit être simple et clair : le mot « Chercher » est ce qui se fait de mieux en la matière.

[ndt : les utilisateurs utilisants de plus en plus souvent des chaînes de 2 ou 3 mots clés, faites que le champ de recherche soit suffisamment grand pour ces mots restent visibles dans le champ sans avoir à scroller horizontalement]

Quatrième partie : le contenu est-il adapté ?

Vous l’avez déjà sûrement lu quelque part : le contenu est roi. Alors, faites tout pour que celui de votre site soit bien organisé, cohérent et facile à naviguer.

18. Les titres principaux sont-ils clairs et descriptifs ?

La plupart des gens ne lisent pas en ligne, ils scannent. Utilisez des titres pour hiérarchiser les contenus et les organiser. Les titres doivent être clairs et pour améliorer le SEO utiliser les tags <H1>, <H2>, etc.

19. Le contenu important est-il au dessus de la ligne de flottaison ?

La ligne de flottaison est cette ligne imaginaire en bas de votre écran qui « coupe » une page web en une partie visible et une partie non visible. Faites que le contenu important de chaque page soit donc bien au-dessus de cette ligne. Attention à prendre en compte la résolution d’écran, car elle peut varier d’un utilisateur à l’autre (la résolution moyenne aujourd’hui est considérée à 1024x768px)

20. Le style du site est-il homogène ?

Assurez-vous pour que les gens sachent toujours qu’ils sont sur votre site en gardant son style cohérent. Structure des pages, entêtes et styles doivent respecter la même charte d’un bout à l’autre du site et les couleurs doivent garder la même signification. N’utilisez pas des entêtes rouges sur une page, des liens rouges sur une autre et du texte rouge encore ailleurs.

21. Les mises en avant sont-elles utilisées avec parcimonie ?

C’est un fait : essayez d’attirer l’attention sur tout et vous n’attirerez l’attention sur rien. On a tous vu ce genre de site, celui avec un « NOUVEAU! » surligné en rouge qui clignote à côté de chaque article. Faites que ce ne soit pas le votre.

[ndt : oui, en France, nous avons cDiscount qui vient contredire cette affirmation. Encore que rien ne prouve que cDiscount n’améliorerait pas son taux de transfo avec un site un petit peu plus sage]

22. Les publicité et les popups se font-elles discrètes ?

Si vous avez de la pub sur votre site, intégrez la en douceur. Ne forcez pas les gens à devoir « avaler » vos pubs ou vos popups.

[ndt : évidemment, cette affirmation est antinomique avec la publicité. Si pub, il y a, elle doit être voyante. Autrement, ça n’a aucun intérêt. Mais bien sûr, si votre contenu est important, ne le noyez pas sous des rafales de bannières.]

23. Les textes sont-ils concis et explicatifs

Ne soyez pas bavard ! Vos descriptifs produits doivent respecter les règles de base de l’écriture web : phrases simples et courtes, mots importants en gras, pas de jargon. Pour connaître ces règles, vous pouvez lire sur ce même blog : 10 améliorations faciles pour augmenter votre ROI [6] – 3

24. Les URLs sont-elles signifiantes et user-friendly ?

Des URLs basées sur des mot-clés signifiants sont généralement bonnes et pour les visiteurs de votre site et pour les moteurs de recherche.

25. Les titres des pages sont-ils évidents ?

De manière plus importante, vos titres de page (dans le tag <TITLE>) doivent être descriptifs, unique et libre de tout mélimélo de mots clés. Les titres de pages sont la première chose que lisent les moteurs de recherche et si ces titres ne sont pas compréhensibles ou ressemble à du spam, ils iront au prochain résultat.

Article librement traduit de l’anglais

Je partage cet article sur Tweet about this on TwitterShare on FacebookShare on LinkedInDigg thisPin on PinterestShare on Tumblr

32 commentaires pour l'instant.

  1. samhickmann dit :

    et je rajouterais : testez-le sous tous les navigateurs ! Encore près de 15% des internautes utilisent le dinosaure Internet Explorer 6 !!!

  2. Benoit dit :

    Pareil que Sam, le test sous tous les navigateurs semble essentiel et en particuliers sur les points sensibles des fiches produits et du tunnel.

  3. Capitaine dit :

    @Benoit et Samhickmann : tout à fait !

  4. Ergonomie – 25 points à vérifier avant de mettre votre site en ligne – capitaine commerce…

    L’usabilité entend-t-on trop souvent est une question de bon sens. Même si c’est parfois vrai, une bonne usabilité repose également sur de bonnes grilles de travail qui permettent de systématiser l’analyse d’un site de manière quasi scien…

  5. Antoine Nilros dit :

    Très bon article, rien à redire. Je suis d’accord avec tous les points…

    A propos d’internet Explorer 6.0 devrions-nous pas faire comme en Finlande (ou Suède, je ne sais plus trop) et lancer un mouvement en accord avec tous les sites e-commerce en demandant au visiteurs étant sous IE6 de mettre à jour leur navigateurs ?

    sinon à la base j’écrivais ce commentaire pour signaler que le lien du point 23 est mort :(

  6. Pour ma part, en temps que développeur et soucieux des « normes », je fais du W3C à toutes les sauces quand c’est possible (développement complet), développe pour une validité Safari, IE7 et IE8, Opéra et Firefox…

    Je refuse catégoriquement de développer pour IE6. Développer sur ce dernier reviendrait à cautionner le fait qu’il n’est pas nécessaire de mettre à jour son navigateur par feignantise (ou version pirate), puisque Windows 2000 accepte Firefox, que lorsque l’on commande en ligne, on peut mettre à jour un navigateur.

    Si la majorité des développeurs s’y mettait, l’internaute serait obligé de mettre à jour son navigateur ou utiliser un navigateur alternatif pour pouvoir surfer sur le web.

    Les internautes « freins » du progrès, non merci, surtout lorsque l’effort demandé est gratuit. Pour ma part, et mes clients le vivent très bien et comprennent mes arguments, nous nous passons de ces internautes qui vivent dans une grotte…

    Rappelons enfin pour finir qu’il ne s’agit pas d’un caprice de développeur, mais le debuggage d’un site pour IE6, se paye au client, car cela prend du temps, c’est donc tous le monde qui gagnerait à oublier cette version.

  7. samhickmann dit :

    Je suis tout à fait d’accord pour un mouvement d’éradication d’IE6. Sauf que dans tous les appels d’offres (Offices de tourisme, collectivités locales, e-commerces, etc.) il est clairement mentionné que le site doit être compatible avec IE6. Répondre qu’on refuse de développer pour IE6 c’est se tirer une balle dans le pied.
    C’est donc également en amont qu’il faut traiter le problème : cabinets d’étude qui pondent les cahiers des charges, sensibilisation des donneurs d’ordre, etc.

  8. Tout à fait, il est vrai que je passe un peu de temps à expliquer au client ce qu’il a à perdre en plaçant IE6 dans les pré-requis et en majorité ils comprennent, mais on ne fera pas l’unanimité.

    La volonté devrait être nationale car tout le monde y gagne, une petite campagne de publicité et c’est l’ensemble des sites institutionnels et internet français qui mettent à disposition les dernières technologies au profit de l’internaute.

    Déclarer ses impôts sur internet, consulter ses comptes en ligne, les sites des mairies, de formalités en ligne, des grandes enseignes commerçantes non compatibles IE6, c’est une révolution, mais cela ferait bien avancer le débat…

  9. David Lafon dit :

    Je rajouterais également une portion sur les formulaires qui font partie du coeur d’un site :
    – labels appropriés aux champs
    – longueur du formulaire
    – présence, placement et pertinence des messages à l’utilisateur
    Il n’y a rien de plus horrible qu’un formulaire qui ne retourne aucun message lorsqu’on clique sur le bouton de validation. Et c’est encore plus vrai sur un site e-commerce :)

  10. Airtek dit :

    Pour moi le problème n’est pas tant le client final qui met a jour pratiquement automatiquement son explorateur que le client lui même. Beaucoup de parc ne sont pas mis a jour pour des questions d’economies sur le déploiement. Ainsi certaines grosses entreprises conservent IE6. Difficile de leur faire un site qu’il ne voient pas correctement 😉

  11. @capitaine :
    Beaucoup de vérités qu’il est toujours bon de rappeller, il s’agit comme toujours de bon sens.

    Le premier point illustre parfaitement cela « Oui, c’est vrai, la plupart des gens ont des connexions haut-débit aujourd’hui, mais ça les rend encore plus impatients ».

    @samhickmann: Exactement !

  12. David Lafon dit :

    La problématique d’IE6 dans les entreprises est effectivement due au coût. Cependant, le poste du déploiement n’est pas le plus important, je dirais même qu’il est négligeable. Là où le bât blesse est que les applications existantes (intranet entre autres) ont été développées à une époque anté-diluvienne où IE6 prédominait outrageusement le monde des navigateurs. Depuis changer la version du navigateur pour ces DSI reviendrait à re-développer leur outil interne principal d’où un coût exorbitant. Le particulier utilisant IE6 ne représente qu’une portion congrue de l’ensemble des utilisateurs : un utilisateur peu au fait des technologies internet, sous un vieil OS et qui a, probablement, peur d’utiliser internet pour ses achats. Je préconise une compatibilité limitée d’IE6 mais avec une dégradation propre de l’aspect et des fonctionnalités. Si le client souhaite un support totale (le client est tout de même roi mais pas à n’importe quel coût), cela devient une option du contrat et est facturée en tant que telle.

  13. C’est vrai que j’ai déjà rencontré ce point de « détail » très important. La solution serait peut-être d’habituer les entreprises à donner accès au web par le biais exclusif de Firefox et garder IE6 pour ses applis et son intranet… M’enfin, le débat et le chemin sont encore long… Très long…

  14. Anne Onyme dit :

    Bonjour,

    L’adresse dans le point 23 pointe sur une jolie page 404…

  15. Capitaine OlivierS dit :

    @Onyme : merci, c’est corrigé.
    @ à propos d’IE6 : le tout est de savoir s’il est rentable d’optimiser votre site sur IE6. Pour cela, il suffit simplement de calculer le ratio « coût pour optimiser »/ »marge brute supplémentaire réalisée prévisionnelle sur 1 an ». Si c’est supérieur à 1, faites-le ! Sinon, laissez tomber !

  16. Pour moi IE6 c’est de nos jours principalement un problème d’accesibilité.
    Si on accepte le fait de perdre des clients (et de la réputation) en rognant sur ces coûts. Ben c’est un choix tout à fait compréhensible comme le démontre le calcul d’OlivierS.
    Par contre faire un site super optimisé niveau accessibilité (le truc que même un manchot sourd et aveugle arrive à utiliser sur son iphone) et dire qu’on s’en fout de IE6. Ca démontre juste qu’on à rien compris à l’accesibilité.
    Ne pas oublier que finalement le client est roi, est que si le roi dit qu’il utilise IE6. Ben faut faire avec, même si ça emmerde le développeur moyen.
    Perdre 15% au taux de conversion à cause de ça, c’est quand même dommage non?

  17. Julien dit :

    Microsoft a malheureusement annoncé le support d’IE 6 jusque 2014 ! Mais quand on réalise un développement pour IE 7 c’est là aussi tout un casse tête (voir pire).

    La question sur IE 6 est à la mode en ce moment car l’équipe du framework Elgg se pose aussi la question d’en continuer les développements pour le rendre accessible via IE 6…

  18. Capitaine dit :

    Bon, les gars, ce billet n’est pas un débat sur IE6 😉

  19. Fred dit :

    merci mon captain pour ce très bon post qui va bien me servir pour la nouvelle version de notre site ecommerce!

  20. Alphonse dit :

    Je lance mon ecommerce cette année, une mouture faite maison… un défi personnel!
    J’ai trouvé cet article très intéressant et j’ai vérifié un à un les points énoncés, et je les avais tous mis en place d’instinct !
    Il m’en reste beaucoup à vérifier en suivant les autres billets, mais celui-ci répond tout particulièrement à une phobie des jeunes entrepreneurs du web comme moi 😉

    Donc, chapeau et merci 😀

  21. Kilroy dit :

    Avant le lancement d’un site, il est intéressant de faire un test de crawl : récupérer la liste de toutes les pages accessibles et certaines de leurs infos (titres, etc.). Pour ce faire, on peut utiliser des outils de de création de sitemap XML qui permettent l’accès aux données.
    En récupérant la liste des pages dans un fichier Excel, on peut facilement voir des anomalies éventuelles.

    Je compléterais donc la liste des 25 points avec :
    – tester le site pour des erreurs 404 éventuelles
    – vérifier que le site ne comporte pas d’URLs avec du contenu dupliqué (possible en comparant notamment les title des pages)
    – vérifier que le site ne comporte pas trop de niveaux de profondeur (4 ou 5 au plus)

    C’est un peu de « l’utilisabilité pour robots », mais c’est quand même intéressant

  22. […] 25 points à vérifier avant de mettre un site en ligne, au niveau de l’accessibilité, l’identification, la navigation et le contenu. (via Capitaine Commerce) […]

  23. […] 25 points à vérifier avant de mettre votre site en ligne […]

  24. pligg.com dit :

    25 points à vérifier avant de mettre votre site en ligne…

    Une excellente check list…

  25. […] * 25 points à vérifier avant de mettre votre site en ligne […]

  26. […] 25 points à vérifier avant de mettre votre site en ligne Ne sortez pas sans votre checklist avant de mettre en ligne votre beau site de ecommerce, cela pourrait vous éviter des mauvaises surprises […]

  27. Joe NDZULO dit :

    Cette liste est génial, et j’ajoute la phase « teste » peut ce faire sur son propre ordinateur en installant un de plusieurs logiciels qui transformera le PC en véritable serveur web. Par example XAMMP ou WAMP, qui on des fonctionnalités apache,php. et bien d’autres.

    Vraiment une liste cool, Merci.

  28. […] Ergonomie – 25 points à vérifier avant de mettre votre site en ligne – blog ecommerce … […]

  29. sonia dit :

    Merci beaucoup il ya quelques points qu’il va falloir que je revoit même si mon site est déjà en ligne.
    Merci captain commerce 2.1

  30. P&M dit :

    Merci pour tes 25 points! :) C’est nickel !

Rédiger un commentaire


Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.



Blogs ecommerce et sites amis à visiter : Ecommerce Squad - Exciting Commerce - I Love Web - Ludovic Passamonti - Pauline Pauline - Rich Commerce - Tablette Tactile - Ziserman.com

Site hébergé par NBS System, spécialiste de l'hébergement ecommerce NBS System

Copyright © 2006 - 2016 Capitaine commerce - Le Blog du Commerce Digital - Ce blog utilise WordPress - Mentions légales

Webmaster : Alexis Sauvage aka Mecano Commerce