InfoWebMaster

Optimiser l'ergonomie des formulaires web

Mon, 15 Aug 2011 15:15:00 +0100

Les formulaires sont tr�s fr�quents sur les sites web et parfois compl�tement incompr�hensible. Il existe une multitudes d'astuces pour am�liorer la compr�hension de ceux-ci, �viter que les utilisateurs fassent des erreurs et optimiser le dur�e n�cessaire pour les remplir. Cet article pr�sente plus de 60 astuces et recommandations avec des explications.

Structurer le formulaire

Dans le cas d'un formulaire pour se connecter, il est possible de faire appara�tre le formulaire au survol ou avec un clic de souris. Si le design poss�de assez de place il est aussi possible de placer les champ pseudo + mot de passe directement dans le design d'un site web. �a fait gagner du temps aux utilisateurs.
Lorsque le formulaire est long il est possible de le d�composer en plusieurs partie et de faire plusieurs pages distinctes.
Faire un nombre de pages r�duit au minimum sur les formulaires qui font plusieurs pages. Ceci afin d'�viter de perdre du temps lorsque le formulaire est souvent utilis� et dans le cas o� l'utilisateur � une faible connexion internet.
Les �l�ments li�s doivent �tre proches les uns des autres. Si le formulaire est sur plusieurs pages, les �l�ments qui d�pendent les uns des autres doivent �tre sur la m�me page. Si le formulaire est sur une page, les �l�ments li�s doivent �tre visible sur le m�me �cran sans avoir � scroller la page.

Choix des �l�ments � ins�rer

Ne pas utiliser le bouton "reset" (bouton pour r�initialiser le formulaire). Ce n'est pas parce que ce bouton peut exister qu'il doit forc�ment exister. Souvent les designers place ce bouton � c�t� de celui de validation du formulaire. Il en reste que l'utilisateur doit d�terminer avec certitude quel bouton utiliser, car l'un valide le formulaire tandis que l'autre bouton d�truit tout et il faut tout recommencer.
Ne pas utiliser de bouton "annuler" pour la m�me raison. Si c'est vraiment n�cessaire il faut plut�t utiliser un bouton "retour". Attention � ne pas confondre le bouton "retour" et "annuler" sur un formulaire de plusieurs pages. Si c'est vraiment n�cessaire il faut songer � mettre un message de confirmation au cas o� l'utilisateur clique dessus par erreur.
Si on utilise un bouton "retour", il faut le mettre sous la forme d'un lien d'action secondaire. Le bouton d'action primaire reste le bouton d'envoi du formulaire. Il faut veiller � ce que le bouton d'envoi soit un bouton, tandis que l'action secondaire est un lien.
Afficher un minimum de champ � compl�ter. Voici une liste d'exemple possible:
- Pour inscrire une date de naissance il est pr�f�rable d'avoir un seul champ � remplir (exemple au format JJ/MM/AAAA) plut�t que 3 champs distincts (pour le jour, le mois et l'ann�e). Pour une date il est m�me conseill� d'afficher un calendrier pour choisir la date.
- Utiliser un seul champ pour remplir le nom et le pr�nom (mais �a d�pends des cas bien s�r).
Ne pas doubler les champs. Par exemple des formulaires demandent de re-�crire l'email pour s'assurer qu'il n'y a pas eu d'erreur (idem pour le mot de passe). Il est pr�f�rable d'afficher une fois chaque champ.
Sur un site d'ecommerce, permettre de pr�-remplir l'adresse de livraison � partir de l'adresse de facturation d'un simple clic.
Lorsqu'il faut demander l'age d'un visiteur (cf. pour du contenu pour adulte), le plus simple et rapide consiste � demander l'age du visiteur en utilisant un champ o� l'utilisateur entre son age � la place de la date de naissance. Tous les formulaires qui demandent une date de naissance sont trop fastidieux.

Positionnement des �l�ments

Lister les champs les uns au dessus des autres. De m�me il convient de placer le label du champ juste au dessus de la zone � compl�ter. Un tel placement des �l�ments permet de scanner plus facilement et rapidement le formulaire pour les raisons suivantes:
- L'utilisateur vois clairement s'il a oubli� de remplir des champs.
- L'�il n'a pas besoin de faire de zig-zag.
- �a respecte plus facilement la loi de proximit� (cf. les �l�ments proches sont en rapport les uns des autres).
- �a respecte mieux la loi de Fitts.

Comparatif de placement des �l�ments sur un formulaire web.

Placer le bouton d'envoi en bas � droite si c'est un formulaire de plusieurs pages ou de plusieurs sections. C'est mieux car l��il du visiteur parcours la page en formant un "Z". De plus, nous lisons de la gauche vers la droite et de haut en bas, donc le bouton d'envoi est la derni�re chose qui est vu par l'utilisateur. Si le bouton est situ� � gauche (par exemple) le regard de l'utilisateur est oblig� de retourner en arri�re pour revenir sur ce bouton (ce qui fait perdre du temps).
Aligner � gauche le bouton d'envoi si c'est un formulaire simple d'une seule page. �a associe le bouton avec les champs (qui sont aussi align�s � gauche) et �a �vite que le visiteur perde du temps � chercher le bouton sur l'�cran.
Centrer le bouton d'envoi n'est pas recommand�, sauf s'il fait toute la largeur du formulaire.
Si possible, placer tout le formulaire au dessus du pli et mettre le bouton d'envoi au dessus du pli �galement.
Dans le cas o� il s'agit d'un formulaire important (exemple: formulaire pour acheter un produit) il faut placer le call to action au dessus et en dessous du pli.

Call to action

Le bouton de validation doit avoir un intitul� personnalis� (exemple: "s'inscrire", "cr�er un compte", "envoyer le message", "commander", "valider ma commande" ...). Un bouton intitul� "Ok" ou "Envoi" ne veut pas signifier grand chose. Ind�pendamment du formulaire un bouton "ok" ne peut m�me pas �tre compris par les utilisateurs. Ils doivent m�me r�fl�chir avec attention pour pr�dire ce que le bouton va faire afin d'�viter d'effectuer une mauvaise manipulation.
Utiliser un poids visuel sur le bouton primaire. Diff�rencier ce poids visuel entre le bouton primaire (exemple: "envoyer") et le bouton secondaire (exemple: "retour"). Il est possible d'utiliser une couleur sur le bouton principal et du gris (ou autre couleur neutre) sur le bouton secondaire.

Exemple de poids visuel sur le bouton primaire.

Si le bouton primaire est une action irr�m�diable qui peut causer du tort (exemple: supprimer son compte utilisateur), il est pr�f�rable de mettre le poids visuel sur le bouton secondaire (le bouton "retour" ou "annuler") plut�t que sur le bouton primaire (bouton "supprimer").
Utiliser des liens pour d�signer les actions qui font l'inverse d'un bouton. Par exemple pour publier du contenu: faire un bouton "Publier ce contenu" et un lien "Supprimer ce contenu". Placer le bouton et le lien � proximit�, mais pas trop proche pour �viter les erreurs si l'utilisateur clique par inadvertance sur le lien.
D�sactiver un bouton lorsqu'il n'est pas utilisable. Par exemple le bouton d'envoi ne peut pas �tre utilis� si certains champs requis ne sont pas rempli (�vite indirectement certains probl�mes de spam).
Ne pas cacher un bouton inactif. �a surprend l'utilisateur lorsque le bouton appara�t, celui est susceptible de se demander s'il doit relire toute la page pour voir si d'autres �l�ments sont apparut et il arrive que l'utilisateur ne vois m�me pas le bouton appara�tre (car il avait d�j� scann� la page).
Utiliser un design sp�cifique pour montrer lorsqu'un bouton est inactif. Cette astuce est pratique pour ne pas afficher un bouton d'action de la m�me fa�on si on peut l'utiliser ou non. Le plus souvent il convient d'utiliser une couleur satur� ou neutre pour d�signer le bouton en mode inactif.
Faire des boutons qui ressemblent � des boutons. Utiliser un effet de 3D, une ombre et des coins arrondis pour que �a paraisse plus r�el.
Faire de gros boutons (mais pas trop gros non plus) avec des couleurs � fort contraste compar� au reste du design.
Utiliser des mots qui expriment le c�t� urgent et important (exemple: "S'inscrire imm�diatement", "Demander un devis gratuit", "Acheter maintenant" ...). Autoriser des mots plus mod�r�s dans certains cas pour �viter de faire fuir un visiteur (exemple: "Essayer la d�mo gratuitement", "Tester sans engagement pendant 5 jours" ...)
Si l'intitul� du bouton fait 1 ou 2 mots: utiliser des majuscules au d�buts des mots. S'il y a plus de 2 mots ou 3 mots, utiliser une majuscule pour le premier mot puis que des minuscules.
Utiliser une ic�ne dans le bouton (en plus de l'intitul� du bouton) pour illustrer le r�sultats de l'action (exemple: petit fl�che vers la droite si le bouton envoi l'utilisateur sur une autre page, petite enveloppe si �a envoi un email ...).

Compl�ter le formulaire

Pr�-remplir les champs lorsque c'est possible. Par exemple, si l'utilisateur a entr� son code postal, il est possible de pr�-remplir la ville et le pays. Il est aussi possible de pr�-remplir le pays gr�ce � l'adresse IP du visiteur (voir le tutoriel "Conna�tre le pays d'un visiteur avec son adresse IP").
Sugg�rer une liste de r�sultats � l'aide des premiers caract�res d�j� entr�s par l'utilisateur. Tr�s pratique pour gagner du temps et �viter les erreurs lorsqu'il faut remplir un champ "ville" ou "pays". Sinon, faire une liste d�roulante (un peu moins bien). Il faut �viter de laisser l'utilisateur entrer lui-m�me un tel champ. Si l'utilisateur entre lui-m�me ce champ, il faut v�rifier s'il y a une erreur (notamment les erreurs de frappes).

Utilisation de Google suggest qui sugg�re une liste de mots-cl�s vis-�-vis des premiers caract�res entr�s.

Sur un formulaire pour se connecter: autoriser l'utilisateur � se connecter avec une adresse email ou un pseudo. S'il se souvient de l'un mais pas de l'autre, c'est un gain de temps pour lui.
Sur un formulaire pour se connecter: autoriser l'utilisateur � se connecter avec ses identifiants Facebook, Google, Twitter, OpenID ...

Utilisation du formulaire

Pr�-s�lectionner le premier champ du formulaire automatiquement.
Utiliser la balise HTML label. Cette balise permet de faire en sorte que si l'ont clique sur le texte qui labellise un champ, �a s�lectionne automatiquement le champ associ� ou coche la case associ�e.
Ajouter un effet au survol de la souris sur les boutons. Permet de mieux comprendre qu'un bouton est un bouton et que c'est un �l�ment dynamique qui va effectuer une action.
Ajouter un effet au survol de la souris sur les champs � remplir (champ texte, case � cocher ...). Permet de mieux associer les labels avec leurs champs associ�s. Dans le cas d'une case � cocher, c'est aussi pour mieux d�finir la zone cliquable (cf. le label de la case).
Afficher en surbrillance un champ lorsqu'il est s�lectionn�. C'est pratique pour visuellement voir quel champ est actif, notamment lorsque le visiteur navigue sur le formulaire avec un clavier. Si l'utilisateur quitte des yeux le formulaire puis retourne dessus, il perd moins de temps � savoir o� il �tait rendu et d�terminer quel champ �tait actif.
Afficher une aide pour chaque champ qui le n�cessite. Le petit message d'aide doit �tre situ� � proximit� du champ concern�. S'il le faut, il ne faut pas h�siter � afficher un sch�ma ou une petite image. Par exemple pour les trois chiffres aux dos d'une carte bleu, il est possible d'afficher un sch�ma qui indique o� sont situ� ces chiffres sur la carte bancaire.
L'aide associ� � un champ peut s'afficher automatiquement lorsque celui-ci est s�lectionn�. Il est aussi possible de placer un lien "aide" ou une ic�ne "" et d'afficher les explications au survol de la souris. Il ne faut pas faire de lien cliquable car l'utilisateur peut avoir peur de perdre les informations d�j� remplis si le lien ouvre une nouvelle page. Certes, certains liens ouvrent des pop-up, mais l'utilisateur ne peut pas le pr�dire et par d�faut il a peur de perdre tout le travail qu'il viens juste de faire en remplissant chaque champ un � un.
Remplacer les captcha anti-robot par d'autres solutions plus ergonomiques. Il est possible d'afficher une case � cocher "je ne suis pas un robot". Cette case peut �tre g�n�r�e en javascript pour �viter que les robots ne la lise. Il est aussi possible de cacher un champ intitul� "nom" au visiteur avec du CSS. Les visiteurs ne voient pas le champ qui est cach� donc le laisse vide. En revanche les robots voient un champ intitul� "nom" donc il le remplisse par un nom al�atoire par d�faut. Il suffit ensuite de valider le formulaire que si le champ reste vide (sinon c'est forc�ment un robot). Enfin, pour renforcer la s�curit� pour �viter le spam il est possible d�emp�cher a validation d'un formulaire si celui-ci est rempli en moins de 2 secondes (par exemple).
Possibilit� d'indiquer l'intitul� des zones textuelles � l'int�rieur du champ � compl�ter. Il faut que le nom du champ soit en gris sur fond blanc (ou texte avec couleur satur� selon le design). De plus, ce nom doit dispara�tre lorsque le champ est s�lectionn� et r�-appara�tre si le champ est vid�.

Comparatif de placement des libell�s sur un formulaire web.

Si le nom du champ est � l'ext�rieur de la zone de texte, � l'int�rieur il est possible d'indiquer la fa�on dont le texte doit �tre format�. Voici des exemples:
- S'il faut �crire une date, il est possible d'�crire en gris dans le champ: "JJ/MM/AAAA".
- Si l'utilisateur doit entr� un num�ro de t�l�phone d'une certaine fa�on, � l'int�rieur du champ il est possible d'inscrire en gris: "+33 212345678".
Si l'int�rieur du champ est vide, il est possible d'�crire dedans si le champ est optionnel.
Ne pas utiliser d'ast�risque rouge pour d�signer les champs obligatoire. �a rempli le formulaire de bruit visuel et parfois il n'y a m�me pas de l�gende pour expliquer � quoi �a correspond. A la place il est sugg�r� d'�crire avec du texte si les champs sont requis ou non. La meilleure solution consiste plut�t � indiquer seulement lorsque les champs sont optionnels (cf. voir astuce pr�c�dente).
Le formulaire ne devraient pas attendre le dernier moment pour v�rifier l'int�grit� des informations de chaque champs. Si l'utilisateur indique un nom d'utilisateur qui existe d�j�, le formulaire devrait lui indiquer une erreur juste apr�s avoir rempli le champ (avant qu'il ne soit trop loin sur le formulaire). Pour cela il est possible de v�rifier les champs juste au moment o� le champ est d�-selectionn� (c'est-�-dire lorsque l'utilisateur passe au champ suivant). Chaque �l�ment devrait alors avoir une petite indication visuelle pour savoir s'ils y a une erreur ou non (exemple une ic�ne Famfamfam ou ).
Choisir judicieusement les intitul�s des �l�ments et les types de champs (bouton "radio" diff�rent des checkbox").
Afficher un calendrier lorsqu'il faut choisir une date. �a �vite tout probl�me de mauvaise saisie de la date et c'est plus facile et rapide � utiliser.
Ne pas masquer les mots de passe par des �toiles. C'est plus compliqu� de se rendre compte d'une erreur. A la place, faire un bouton pour que l'utilisateur cache son mot de passe quelque seconde apr�s l'avoir entr�. Ou alors afficher les caract�res pendants quelques millisecondes puis les remplacer � l'�cran par des �toiles.

Design

Bien utiliser la loi de proximit� pour montrer ais�ment les �l�ments qui sont en rapports et ceux qui sont compl�tement diff�rents.
�viter trop de bruit visuel. Garder un design sobre pour ne pas distraire inutilement les utilisateurs. Faire en sorte que le formulaire soit lisible: bon contraste, police d'�criture adapt� au format web avec une taille de caract�re raisonnable.
Lorsque le formulaire est d�coup� en plusieurs zones, penser � utiliser une ligne de s�paration ou des couleurs distinctes pour bien d�limiter les zones.
Id�alement il faut grouper les champs par petit groupe de 5 �l�ments environ. L'accroche visuelle est ainsi mieux r�alis�e.
Adapter la taille des champs � ce qu'ils peuvent contenir. Un champ "age" contient 1 � 3 caract�res, donc il faut faire un petit champ. A l'inverse le champ "nom" doit �tre plus long car il peut parfois contenir plus de 20 caract�res. �viter de faire un champ trop petit par rapport � ce qu'il va contenir car c'est aga�ant de devoir "scroller" � l'int�rieur d'un champ texte. C'est aussi bien valable pour les champs une ligne (input text) que les champs de plusieurs lignes (textarea). Par exemple sur une page de contact, le champ qui contient le message doit �tre assez grand au cas o� le visiteur souhaite �crire un long message.

Comparatif de la taille des champs sur un formulaire.

Sauvegarder automatiquement les informations d�j� saisie ou proposer une option pour le faire. Afficher cette option lorsque le visiteur souhaite quitter le formulaire. C'est particuli�rement pratique lorsque les formulaires font plusieurs pages.
Faire des cases � cocher assez grandes. Au mieux il faut les faire plus grandes que la souris.
A la place d'une simple case � cocher pour s'inscrire � la newsletter, proposer � l'utilisateur l'aper�u d'une newsletter pour qu'il sache � quoi s'attendre. Si vous souhaitez �tre un site de qualit�, il ne faut pas pr�-cocher la case d'inscription � la newsletter.

Avant/pendant/apr�s l'envoi

Si c'est un formulaire important qui n'est pas modifiable apr�s (exemple: demande de visa, paiement sur un site d'e-commerce ...) alors faire une page qui r�capitule les informations avec la possibilit� de modifier et/ou de retourner sur les pages pr�c�dentes.
Afficher un message apr�s l'envoi du formulaire pour savoir si l'action � bien �t� r�alis�e. Dans le cas d'un formulaire important, r�-afficher les informations saisies avec possibilit� d'imprimer la page.
Dans certains types de formulaire, tel qu'un formulaire pour se connecter � un site, il faut rediriger le visiteur automatiquement sur la page o� il �tait avant de se connecter. Si le formulaire de connexion redirige le visiteur sur la page d'accueil alors l'internaute est perdu et doit essayer de retrouver lui-m�me la page o� il se situait (ce n'est pas pratique).
Sur un formulaire d'inscription il est possible de demander un pseudo d'utilisateur apr�s que celui-ci se soit inscrit.

Gestion des erreurs

Faire des formulaires les plus intelligents possible pour �viter des petites erreurs courantes. Il est par exemple possible de comprendre lorsqu'un num�ro de t�l�phone n'est pas entr� dans le bon format (exemple: "06.12.34.56.78", "06-12-34-56-78", "06 12 34 56 78", "0612345678" ou m�me "+33(0)6.12.34.56.78")
Penser � toujours afficher les erreurs et � les expliquer. Ne pas afficher de messages en anglais ou de messages techniques.
Indiquer visuellement o� se trouve l'erreur si �a concerne un champ en particulier. Et donner des explications pour r�soudre le probl�me � proximit� du champ erron�. Par exemple, si la date n'est pas entr�e au bon format, alors indiquer quel format il faut utiliser.
Ne pas vider tout le formulaire lors d'une erreur. Les d�veloppeurs web doivent aussi penser � retirer les backslashs avant les guillemets (ils comprendront).

Bon courage pour la r�alisation de vos formulaires. Vous n'avez maintenant plus d'excuses pour faire des erreurs d'utilisabilit�s sur ce type de pages. Et n'h�sitez pas � partager cette page � vos coll�gues.

Article original: Optimiser l'ergonomie des formulaires web.

Balise canonical: �viter le contenu dupliqu�

Wed, 10 Aug 2011 21:37:00 +0100

Pour optimiser le r�f�rencement d'un site, il faut �viter le contenu dupliqu�. C'est-�-dire �viter d'afficher le m�me contenu sur plusieurs pages (ou plusieurs URL). Pour lutter facilement contre ce ph�nom�ne il existe une balise dites canonique qui est lue par les moteurs de recherche.

L'int�r�t de cette balise c'est d'indiquer � Google et Bing quel est l'adresse unique d'un contenu. De cette fa�on, m�me si un contenu est dupliqu�, les moteurs savent quels pages privil�gier parmi tout une liste de contenu identique (ou similaire).

Probl�mes du contenu dupliqu�

Le contenu dupliqu�, aussi appel� "duplicate content" est un v�ritable cauchemar pour les moteurs de recherche. Chaque contenu dupliqu� fait perdre inutilement de la place dans leurs bases de donn�es. Sachant que Google indexe plusieurs milliers de milliards de pages, le soucis est r�el!

En plus du probl�me de place, les moteurs ont pour devoir de proposer des r�sultats pertinents � leurs visiteurs. Or, ils est tr�s difficile pour eux de d�terminer quels pages doivent �tre pr�sent�es aux visiteurs s'il existe des dizaines de version d'un m�me contenu. D'autant plus qu'il n'y a aucun int�r�t � pr�senter 20 fois le m�me contenu dans les r�sultats de recherche.

Solutions pour �viter le duplicate content

Avant m�me de parler de la balise canonical, il convient de limiter en amont les causes du contenu dupliqu�. Il faut par exemple �viter de copier volontairement un m�me gros contenu � afficher sur plusieurs pages. Chaque page d'un site doit avoir un contenu unique et pertinent.

S'il y a pour une raison ou pour une autre une page qui est disponible sur plusieurs adresse, il faut choisir qu'une version et effectuer une redirection permanente de toutes les versions dupliqu�es vers la version unique de ce contenu. Cette solution est � privil�gier avant m�me de vouloir utiliser la balise canonical.

Il n'y a que certains cas o� il n'y a pas d'autres possibilit�s que d'utiliser la balise canonical. Cela inclue les sc�narios suivants:

Si les identifiants de session sont pass�s en param�tre.
S'il y a des param�tres pour le tracking des visiteurs. C'est le cas pour certains agr�gateurs RSS qui ajoutent des param�tres aux URLs pour que les sites web savent que le visiteurs est venu � partir de tel ou tel agr�gateur. Si un internaute fait un lien vers l'article avec le param�tre de tracking �a deviens une nouvelle URL. Mais aux yeux des moteurs de recherche, s'il y a la balise canonical il n'y a qu'une seule adresse.
Si pour une raison technique il n'est pas possible d'utiliser une redirection permanente. C'est le cas notamment pour certains logiciels de cr�ation de site web.
S'il y a un tableau (exemple: pour afficher des produits) et qu'il y a plusieurs URLs pour trier les r�sultats de fa�ons diff�rentes. Par exemple pour classer par ordre croissant ou d�croissant ou pour choisir la colonne sur lequel s'effectue le tri.

Pour tous ces cas, la balise canonical est l'allier de force pour optimiser le r�f�rencement des pages web concern�es.

A savoir: il convient de lire l'article pour �viter le duplicate content simple afin de limiter l'utilisation abusive de la balise canonical dans certains cas.

Utiliser la balise canonique

L'utilisation de cette balise est simple. Il suffit d'ins�rer le code suivant dans le des pages web concern�es par le duplicate content:

Code:

L'adresse en rouge doit �tre l'URL de la page avec le contenu unique. Quelques petites r�gles � savoir sur cette URL:

Il est possible d'inscrire l'URL d'un site externe. C'est pratique par exemple pour �viter le duplicate content entre plusieurs versions d'un site (diff�rents noms de domaine ou sous-domaine, site disponible avec sans le sous domaine "www" ...).
L'URL peut �tre relative ou absolue. C'est � dire commencer par "http://" ou faire le lien selon l'emplacement du r�pertoire (exemple: "../../dossier/ma-page.html". Il est toutefois recommand� d'utiliser une URL absolue (commencer par http://).

Erreur � ne pas faire

Attention, il convient de bien comprendre l'utilisation de cette balise car utilis�e � mauvais escient elle peu nuire au r�f�rencement. Il faut bien comprendre que pour les moteurs de recherche, la balise fait en quelque sorte une redirection vers l'URL indiqu�e dans la balise. Voici une liste d'erreurs � �viter:

Faire pointer toutes les balises canonical d'un site sur une seule page (exemple: la page d'accueil). Ca serait d�sastreux pour le r�f�rencement de tout le site (sauf la page d'accueil).
Ins�rer une URL qui n'existe pas.
Indiquer l'URL d'un mauvais site externe. Cela aurait pour effet d'optimiser le mauvais site! Pour cette raison, il ne faut pas se faire duper par un webmaster ou r�f�renceur qui vous demande d'ins�rer l'URL d'une de ses pages. Et il faut aussi �viter de se faire pirater son site web, car des petits malins place des balises canonical avec l'URL de leurs sites web!

Pour obtenir d'autres conseils sur le r�f�rencement, il est possible de consulter le dossier sur le r�f�rencement disponible sur ce site. Bonne lecture.

Article original: Balise canonical: �viter le contenu dupliqu�.

La Pyramide Invers�e

Wed, 18 Aug 2010 12:25:44 +0100

La pyramide invers�e est un concept, utilis� en r�daction, qui consiste � placer les informations g�n�rales en haut de pages et au fur et � mesure de page les informations deviennent plus pr�cises et d�taill�es. Cette m�thode r�dactionnelle est particuli�rement adapt�e au format web. Cet article pr�sente ses avantages et les m�thodes pour la mettre en pratique.

Int�r�ts

Initialement emprunt� au monde journalistique, la m�thode la pyramide invers�e � trouv�e sa place sur le web pour diverses raisons:

Les internautes sont press�es et veulent l'information rapidement. Placer les informations importantes en haut de l'article permet de donner rapidement les informations � ceux qui les veulent. Au fil d'un article, les internautes peuvent quitter la page, ils auront tout de m�me saisie les informations importantes
Le visiteur n'a pas besoin d'arriver en bas d'une page pour savoir si c'est la page qui l'int�ressait. Dans le cas o� l'internaute provient de Google, la page ne correspond peut-�tre pas � ce qu'il d�sire. Gr�ce � la pyramide invers�e il saura tout de suite s'il doit poursuivre sa lecture ou non
Sur le web, quelques rares utilisateurs ne scroll pas (ou pas souvent). Pour cette raison, il est judicieux de placer les informations importantes au dessus du pli
En g�n�ral il faut expliquer les g�n�ralit�s avant d'�laborer un sujet. Cela permet de s'assurer que tout le monde a les bases requises pour comprendre le contenu pr�sent� sur la page (particuli�rement vrai sur les pages associ� � une th�matique sp�cifique)
Meilleur accessibilit� du contenu. Le premier paragraphe (chapeau) explique facilement et simplement le contenu. Les visiteurs qui utilisent un lecteur d'�cran peuvent zapper d�s le d�but s'il s'av�re que ce n'est pas le contenu qu'ils d�siraient

Principes de bases

L'id�e fondamentales consiste � classer le contenu du plus g�n�ral au plus d�taill�, de l'essentiel au n�gligeable. M�taphoriquement, il est ainsi possible d'organiser le contenu en trois parties principales:

Chapeau: texte court qui r�sume l'article. Doit donner envie de lire le reste de l'article. Id�alement �a r�ponds aux questions: Qui? Quoi? O�? et Quand?
Corps du contenu: pr�sente les informations. A l'int�rieur du corps du contenu, il est toujours possible d'organiser du plus g�n�ral au plus pr�cis. Peut r�pondre plus en d�tail aux questions "Qui? Quoi? O�? et Quand?". Si cela s'applique, peut r�pondre �: Comment? Combien? et Pourquoi?
D�tails: petites informations accessoires qui sont relatifs au contenu mais qu'il n'�tait pas n�cessaire de placer au milieu de la page. Peu inclure les sources li�es � l'article, la pr�sentation de l'auteur, les articles relatifs, les liens pour promouvoir l'article ...

Sch�ma de la pyramide invers�e

Applications � diff�rentes �chelles

Le concept de la pyramide invers�e peut �tre appliqu� � divers niveau. Cela ne concerne pas n�cessaire un article ou une page, mais peu s'appliquer � une �chelle plus large ou au contraire plus petite.

Site web

Un site utilise souvent la pyramide invers� pour pr�senter son contenu. La page d'accueil est tr�s g�n�raliste, puis plus une page est profonde dans la hi�rarchie et plus le contenu sera d�taill� et sp�cialis� (exemple: accueil > cat�gorie > sous-cat�gorie > page de contenu).

Page ou article

Au sein d'une page ou d'un article, la structure de la pyramide invers�e peut �tre utilis�e. Certains consid�rent que c'est en quelque sorte la conclusion qui est �crit au d�but de l'article. Pour cette raison, il est intelligent d'�crire un article et de finir par le chapeau (qui est similaire � une conclusion).

Phrase

A l'int�rieur m�me des phrases il est possible d'utiliser le principe de la pyramide invers�e, en pla�ant les mots importants au d�but. Ceci est particuli�rement important pour les messages courts tels que les titres ou les textes d'introduction.

Cela est recommand� car les internautes ont tendance � scanner les informations. Dans une foule de d'informations (exemple: liste d'articles) seuls les premiers mots peuvent �tre regard�.

Conseil: il peut �tre recommand� d'utiliser la forme active plut�t que la forme passive.

Limite

Bien que ce concept soit souvent utilis� sur les sites d'actualit�s, cela ne s'applique pas � tous les types de site et de leur contenu. Les cas les plus fr�quents auxquels la pyramide invers�e ne s'applique pas sont les suivants:

Les pages o� l'ordre est important (tutoriel, forum ...). Par exemple, cet article ne suit pas vraiment les propres conseils �voqu�s
Les pages qui pr�sentent les informations sous forme de r�cit
Les contenu qui pr�sente l'information sous un ordre bien d�finit, tel que l'ordre alphab�tique (glossaire, dictionnaire ...), l'ordre chronologique (exemple: liste de mises � jour) ou l'ordre ant�chronologique (exemple: blog)

Article original: La Pyramide Invers�e.

Comment fonctionne un moteur de recherche?

Sat, 14 Aug 2010 20:28:23 +0100

Le web est constitu� de plusieurs milliards de documents. Les internautes peuvent utiliser les moteurs de recherche pour trouver une ressource parmi cette jungle. La m�thodologie utilis�e par les moteurs de recherche est pr�sent� d'une mani�re simple dans cet article.

Comment un moteur de recherche trouve les pages web?

Les moteurs de recherche (Google, Yahoo ou encore Bing) utilisent des robots, intitul�s crawlers ou spiders dans la langue de Shakespeare. Ces robots sont des processus informatiques qui se contentent de lire une page web, d'y extraire les liens et d'aller visiter ult�rieurement les liens trouv�s. En suivant les pages, de liens en liens, ces robots sont capables de visiter pratiquement tout le web.

Malgr� la puissance de ces crawlers, il y a certaines limitations:

Il n'est normalement pas possible pour ces robots de trouver une page orpheline (page qui ne re�oit aucun lien)
Le web �tant si grand, les robots ne peuvent tout indexer et mettre � jour rapidement. Selon le moteur de recherche et la m�thodologie qui lui est associ�, une page peut �tre revisit�e quelques heures apr�s sa publication ou plusieurs mois apr�s

A titre d'exemple, le moteur de recherche Google utilise un principe simple lorsqu'il d�couvre des nouvelles pages: s'il d�couvre une page lambda il l'a met dans une file d'attente et ira la visiter quand il aura le temps. Si ce m�me robot trouve un autre lien vers cette page, alors il met l'adresse de la page dans une liste d'attente prioritaire. Le robot se contente ensuite de visiter les pages prioritaires et les autres pages ne sont visit�es qu'ult�rieurement lorsque le spider � un peu plus de temps.

En vue de ces raisons, il est possible de faire un petit constat:

Un site qui ne re�oit aucun lien sera plus difficilement trouv� par les moteurs de recherche
Les modifications apport�es sur un site web ne sont pas r�pertori�es instantan�ment sur les r�sultats d'un moteur de recherche. Il faut alors une autre visite des robots (peut-�tre une semaine plus tard)

Comment les pages sont sauvegard�es?

Une fois qu'un robot � visit� une page, il va l'enregistrer dans des �normes data-center. Ces derniers enregistrent ainsi des milliards et des milliards de pages web.

L'�tape suivante consiste pour le moteur de recherche d'extraire les informations et des les indexer. Sachant que les robots ne sont que ces processus information, ils sont en g�n�ral capables de lire uniquement le contenu textuel. Il est compliqu� et fastidieux pour un processus informatique d'essayer de lire le contenu textuel incluant sur une image ou de reconnaitre les mots d'une bande son.

Le processus qui consister � enregistrer les informations dans un index est fort simple � comprendre. En langage informatique, un index est similaire au principe des index utilis� dans les livres. L'index recense les mots et l'endroit o� ils sont pr�sents. Par exemple, l'index peut indiquer que le mot "bonjour" est utilis� sur les pages 12, 34, 35 et 57. Cela sera ult�rieurement utilis� pour gagner du temps lorsqu'un visiteur effectuera un requ�te.

Les index ne listent cependant pas tous les mots. Les skip words (ou "stop words) d�signent des petits mots tr�s souvent utilis�s, qui ne sont pas index� en raison de leur utilisation tr�s commune. Parmi ces petits mots, il y a par exemple: "le", "la", "du", "�" et plusieurs autres du m�me genre.

Il est aussi important de savoir que le moteur de recherche Google poss�de deux index. L'un est consacr� aux pages principales de confiance et le second est un index suppl�mentaire concernant des pages avec un contenu dupliqu�, un contenu insignifiant, un contenu peut-�tre de tr�s mauvaise qualit� (possibilit� que ce soit du spam) ou diverses raisons. Sans nul doute, ce sont les pages pr�sentes sur l'index principal qui seront les plus visibles dans les r�sultats de recherche.

Pour finir, il est judicieux de savoir que toutes les pages ne seront pas sauvegard�es. Certaines pages provenant de site ill�gaux ou pratiquant de tr�s mauvaises pratiques, seront tout simplement blacklist�s. Dans ce cas de figure, un moteur de recherche m�morise l'adresse de la page (ou du site) pour l'ignorer s'il d�couvre un lien vers le site ult�rieurement. Pour cette raison, il faut faire attention lors de l'achat d'un nom de domaine que ce nom de domaine ne soit pas "blacklist�".

Comment un engin de recherche classe les r�sultats?

Lorsqu'un internaute effectue une recherche, il y a souvent des millions de pages qui poss�dent le mot recherch�. Pour cette raison, les moteurs doivent classer les r�sultats par pertinence. Les utilisateurs d'un moteur de recherche doivent facilement trouver le r�sultat qui r�pondra � leurs attentes.

Il y a deux grands crit�res qui influent le classement des r�sultats: la pertinence de la page vis-�-vis des mots recherch�s et la popularit� de la page. Des centaines de crit�res peuvent �tre pris en compte, tous ne seront pas d�crit, voici juste une petite liste de certains crit�res:

�valuer la pertinence: le mot-cl� est-il pr�sent dans le titre? dans l'URL? dans le contenu? Y'a t-il des synonymes du mot recherch� dans le contenu? ...
�valuer la popularit�: est-ce que la page re�oit beaucoup de liens? Ces liens proviennent-ils de pages elles-m�mes populaires? Les pages faisant des liens ont-elles la m�me th�matique? Les sites qui font des liens vers cette page sont-il dans la m�me langue? Sont-ils des sites de confiance? ...

Malgr� ces deux principaux facteurs influant sur les r�sultats, des crit�res alternatifs font leurs apparitions. Par exemple, le moteur de recherche Google base maintenant ses r�sultats selon la localit� du visiteur et selon l'historique des pr�c�dentes recherches effectu�es par l'internaute.

Pourquoi les pages de r�sultats sont si rapides?

Il y a quelques petites choses � savoir sur le fonctionnement d'un moteur de recherche lors d'une requ�te. La premi�re chose � savoir c'est que le moteur de recherche ne cherche pas sur le web, mais cherche plut�t sur ce qui est connu des moteurs de recherche et index�. Ensuite, le moteur de recherche utilise le principe des index. Pour utiliser une analogie, c'est comme s'il utilisait l'index d'un livre pour chercher les pages qui contiennent le(s) mot(s) recherch�s.

Contrairement � une pens�e commune, certains moteurs de recherche tel que Google, n'utilisent pas un super ordinateur. A la place, c'est un r�seau de tr�s nombreux ordinateurs � capacit�s normales qui est utilis�. Les performances sont beaucoup plus notables. Pour faire une analogie, c'est comme si Google demandait � un groupe de 20 personnes de regarder l'index d'un livre chacun. C'est plus efficace que de demander � une seul personne (aussi brillante soit-elle) de lire seul l'index de chacun des 20 livres.

Finalement, les moteurs de recherche ont une astuce secr�te pour fournir des r�sultats encore plus rapide. Sachant que certaines requ�tes sont tr�s populaires (exemple: "Facebook", "Youtube", "Vid�o", "TV", "Jeux" ...), les moteurs pr�parent � l'avance les r�sultats. Ainsi, ils donnent directement les r�sultats sans n�cessairement avoir � chercher dans l'index.

Comment un moteur de recherche gagne de l'argent?

La m�thode la plus commune pour un moteur de recherche pour gagner de l'argent, consiste � afficher des r�sultats sponsoris�s lors d'une recherche. Des sites web payent donc les moteurs pour que leur site soit en t�te de certains r�sultats, mais uniquement dans la partie r�serv�e aux r�sultats sponsoris�s.

Le moteur de recherche Google affiche des annonces � droites des r�sultats de recherches dits naturels et parfois en haut des r�sultats, comme le montre la capture d'�cran ci-jointe:

R�sultats naturels et r�sultats sponsoris�s sur Google

Comment am�liorer la visibilit� d'un site sur un moteur?

Il y a deux mani�res d'obtenir une bonne visibilit� sur les moteurs de recherche. La premi�re consiste � utiliser des m�thodes de r�f�rencement naturel. Cela consiste � utiliser des m�thodes de bonnes pratiques pour qu'un site obtienne un bon positionnement dans les r�sultats de recherche. Ces techniques mettent du temps � porter leurs fruits mais sont avantageuses sur le long terme.

La deuxi�me mani�re consiste � payer pour avoir une page dans les r�sultats sponsoris�s. Pour le moteur de recherche Google, il faut utiliser le service Google AdWords. Le positionnement des annonces dans les r�sultats sponsoris�s est bas� sur un syst�me d'ench�re.

Il est �galement possible d'utiliser des m�thodes de r�f�rencement dites black hat. Cela consiste � exploite les failles des algorithmes des moteurs de recherche pour tenter d'�tre bien plac� dans les r�sultats de recherche. Ces techniques ne sont pas appr�ci�es par les moteurs. D�s lors, si un moteur arrive � d�tecter une m�thode de r�f�rencement black hat, il peut p�naliser le site (certains sites peuvent �tre blacklist�s).

Article original: Comment fonctionne un moteur de recherche?.

Optimiser le chargement des images web

Sat, 07 Aug 2010 15:53:59 +0100

Les images sur un site web peuvent tout aussi bien embellir les pages web, que ralentir la vitesse de chargement des pages. Cet article pr�sente une s�rie d'astuces permettant d'acc�l�rer l'affichage des pages web en optimisant le poids des images ou en utilisant des astuces avanc�es.

Raisons pour optimiser les images

Optimiser le poids des images et optimiser la vitesse de chargement des pages sont des bonnes pratiques pour plusieurs raisons:

Personne n'appr�cie d'attendre qu'une page se charge
La vitesse de chargement est un crit�re sur le positionnement des sites dans les r�sultats de recherche
Certains visiteurs ne poss�dent par de connexion internet rapide. Cela est particuli�rement vrai pour les internautes qui utilisent un appareil utilisant la 3G
�a �vite de faire fuir les visiteurs et les ventes. En effet, c'est ind�niable, le temps de chargement � un impact sur les visiteurs:
- Plus le temps de chargement est long et plus le taux de sorties l'est aussi
- Sur le site d'Amazon: 100 ms de temps chargement suppl�mentaire fait perdre 1% des ventes
- Sur Google: 500 ms suppl�mentaire r�duit le nombre de recherche de 20%
Moins de trafic utilis� sur l'h�bergement web car les pages sont moins lourdes

Ne jamais redimensionner dans le code

Certaine pages web d�cident d'utiliser des grosses images (exemple: 800 x 600 pixels) et de les ins�rer sur une page web en tant que miniature (exemple: 80 x 60 pixels). Cette m�thode � deux inconv�nients majeurs:

Les images sont tr�s lourdes � charger alors qu'il faut seulement afficher une petite miniature
Les navigateurs web ne sont pas des logiciels de graphismes. L'image redimensionn� par un navigateur web sera de moins bonne qualit� qu'une image redimensionn� par un logiciel sp�cialis� (exemple: Gimp ou photoshop). La photographie ci-dessous montre la diff�rence de qualit� d'une image selon qu'elle soit redimensionn�e avec Firefox ou Gimp.

Aper�u d'un redimensionnement avec Firefox et Gimp

La solution simple consiste de toujours utiliser les dimensions exact de l'image que l'ont souhaite ajouter � son site. Le redimensionnement d'une image est quelque chose de tr�s facile que pratiquement tous les logiciels de retouche photo poss�dent.

Choisir le bon format

Certains formats d'images sont plus lourds que d'autres. Utiliser le format d'image appropri� permet de r�duire le poids des images d'une mani�re assez facile. Il suffit d'utiliser un logiciel photo et d'enregistrer dans le format appropri�.

Conseil: il ne faut jamais utiliser le format ".bmp". C'est le format le plus lourd qu'il puisse exister.

Gif

Ce format d'image num�rique est limit� � 256 couleurs, ce qui en fait un format relativement l�ger. Ce format est connu et appr�ci� pour pouvoir afficher des images anim�es. Malheureusement, lorsqu'il convient d'afficher une belle photographie, la limitation � 256 couleurs r�duit nettement la qualit� de l'image. De ce fait, ce format est � privil�gier pour: les logos, les petites ic�nes et les petites images anim�es.

Jpg

Le JPEG est une norme d�finissant un format compress� d'image num�rique. Le degr� de compression peut �tre choisi. Plus la compression est importante et moins l'image sera lourde, mais en contrepartie l'image perd de sa qualit�. Il convient alors de choisir le meilleur compromis entre qualit� et poids de l'image. Cela d�pend notamment du type de site (site web d'un photographe?) et du but des photos (simple photo d'illustration ou photographie importante?). En clair, dans la majorit� des cas, le JPEG est � utiliser pour les photographies sur le web.

Png

Le format PNG a sp�cifiquement �t� con�u pour le web. Une image PNG est g�n�ralement plus l�g�re qu'une image GIF. Toutefois, la qualit� n'est pas aussi performante qu'avec le format JPG. Sachant que PNG accepte la transparence, son utilisation sur le web est � privil�gier lorsqu'il faut afficher une image qui poss�de de la transparence.

Attention: les vieilles versions d'internet explorer ne g�rent pas la transparence. Pour une bonne compatibilit� avec diff�rents navigateurs, il faut donc faire attention � son utilisation.

Exceptions

En d�pit des conseils �nonc�s pr�c�demment, il se peut qu'� certains moments une photographie soit plus l�g�re en PNG qu'en JPEG. Idem pour un ic�ne. Par cons�quent, pour v�ritablement optimiser le poids des images, la solution consiste � enregistrer une image dans diff�rents formats pour tester lequel est le plus l�ger.

Compresser les images

En plus du choix du format, il est judicieux de compresser judicieusement les illustrations. Comme cela a �t� dit pr�c�demment, le format JPG permet de faire un choix entre qualit� et poids de l'image. L'exemple ci-dessous permet de comparer la qualit� d'une image par rapport � son taux de compression dans le logiciel Gimp:

Images avec diff�rent taux de compression

Personnellement, j'opte pour une qualit� de 85% pour mes images JPG, car je consid�re que c'est un bon compromis. Pour aller plus loin, il y a deux techniques:

Cocher l'option "image pour le web" dans son logiciel de retouche d'image
Utiliser un service de compression d'image tel que Smushit pour comprimer encore plus le poids des images

CSS Sprite

Image pour faire du CSS sprite

La technique des CSS sprites consiste � utiliser une seule image qui contient plusieurs autres petites images, les unes au dessus des autres, comme dans l'exemple de droite. Ce n'est qu'avec du code CSS que le webdesigner s�lectionne l'image qu'il souhaite utiliser. Cette technique, r�serv� aux personnes qui connaissent le CSS permet de ne charger qu'une image (plus rapide). Utilis� � mauvais escient, cela peut toutefois poser des probl�mes de compatibilit�.

D'un point de vue CSS, cette technique consiste � exploiter la propri�t� "background-position".

Parall�liser les chargements

Astuce r�serv� aux d�veloppeurs web qui savent ce qu'ils font, la parall�lisation des chargements permet d'aider un navigateur � lancer plusieurs chargements � la fois. Cette technique permet de contrer le protocole HTTP, qui stipule que les navigateurs web ne devraient pas t�l�charger plus de 2 fichiers � la fois en provenance d'un m�me domaine. En d'autres mots, si une page poss�de plusieurs �l�ments (fichiers CSS, fichiers javascript, images ...), ceux-ci seront t�l�charg�s les uns � la suite des autres, avec un maximum de 2 �l�ments en parall�le. C'est bien, mais si l'utilisateur poss�de une connexion � internet rapide, il peut �tre judicieux de lancer le t�l�chargement de plus d'�l�ments en parall�le. Pour cela il suffit de tromper le navigateur web en installant les images (par exemple) sur un autre sous-domaine (ou un autre nom de domaine).

Cette astuce peut �tre tr�s judicieuse mais elle poss�de ces inconv�nients:

Augmentation de l'utilisation du processeur sur le poste de l'internaute. C'est donc � d�conseiller si les visiteurs ont des ordinateurs peu puissants (exemple: t�l�phone qui se connecte � internet)
Ajoute des allers-retours suppl�mentaires pour chaque nouvelle TCP connexion
La recherche des DNS peut largement varier selon la localisation du visiteur. Si le serveur est aux �tats-Unis et que les visiteurs sont en France, la technique ne sera peut-�tre plus aussi avantageuse

Pour conclure

Les m�thodes pour r�duire le poids d'une page web � partir des images ont �t� �voqu�es. Il ne faut pas perdre de vue qu'il y a d'autres m�thodes envisageable, mais celles-ci sont les plus souvent utilis�es. Pour finir, il ne faut pas oublier non plus, qu'il est possible de supprimer des images d'une page web si elles sont inutiles.

Article original: Optimiser le chargement des images web.

Am�liorer l'impact des commentaires sur blog

Mon, 02 Aug 2010 12:03:26 +0100

R�diger des commentaires sur des articles de blogs est un moyen simple et rapide d'obtenir des liens. Commenter les blogs dofollow permet en plus d'am�liorer son r�f�rencement. Pour en tirer le meilleur, il y a des astuces � essayer. Cet article pr�sente certaines de ces astuces.

Th�matique similaire

Les liens entre les pages de th�matiques diff�rentes ne sont pas aussi int�ressant que les liens entre deux pages de th�matique proche. Lorsqu'un blog sur la cuisine fait un lien vers un boutique de t�l�phonie mobile, ce n'est probablement pas un lien naturel, ou tout du moins �a ne risque pas d'int�resser les lecteurs du blog.

Puisqu'il est plus naturel que le lien pr�sent dans les commentaires soit en rapport avec la th�matique de l'article, il est judicieux de chercher en priorit� les blogs consacr� au th�me du site � promouvoir.

Chercher les blogs importants

En plus de chercher les blogs � th�matique similaire, il est judicieux de chercher en priorit� les blogs ayant un pagerank �lev�, un fort trafic et ayant peu de commentaires. La quantit� de commentaire doit id�alement �tre basse, car plus il y a de commentaires et moins les liens auront de potentiel.

Pour chercher un blog dofollow, il y a deux options � privil�gier:

Utiliser une liste de blog dofollow disponible sur certains sites
Faire une recherche en utilisant le mot-cl� "dofollow" (les blogs dofollow �crivent g�n�ralement un article pour expliquer qu'ils ont retir�s le nofollow)

Astuce: Cr�er une liste de blog dofollow � classer selon la popularit� ou la th�matique des blogs.

Chercher les articles de qualit�s

Un article populaire sera obtiendra plus facilement des liens (et donc sera plus int�ressants). Il convient alors de d�nicher des articles int�ressants. Pour cela il y a deux techniques: chercher des anciens articles populaires (qui ont un fort pagerank et peu de liens sortants) ou partir � la recherche de nouveaux articles qui ont du potentiel.

Pour chercher les articles de blogs populaire il y � plusieurs moyens:

Consulter les archives des digg-like
Essayer des requ�tes sur Google en limitant sa recherche aux blogs
Chercher un article sur BlogSearch de Google en pr�cisant une ancienne date de publication (voir dans les recherches avanc�es)
Visiter les archives de Yoolink

Pour ce qui est de la recherche d'article r�cent qui vont probablement devenir populaire il y a encore plusieurs techniques, dont voici une liste non-exhaustive:

Utiliser les digg-like (dans les cat�gories "presque promus")
Faire de la veille sur Wikio, Yoolink, Stumbleupon ...
Faire de la veille sur certains comptes Twitter
Faire de la veille Google Reader

Promouvoir les articles comment�s

Il y a tout int�r�t � ce que les articles comment�s ait un fort PageRank et soit bien visit� (�a b�n�ficiera indirectement les liens en commentaires). De ce fait, il est possible de faire la promotion des articles comment�s. Tout en �vitant les liens r�ciproques (qui diminueront l'impact du lien dans les commentaires), il est possible de populariser des articles � l'aide de m�thodes suivantes:

R�seaux sociaux habituels (Twitter, Facebook ...)
Digg-like, bookmark ...
Utiliser un blog (ou mini-blog) consacr� � promouvoir certains articles (indirectement �a peut �tre un support pour suivre sa veille technologique)

Il faut noter au passage que �a fait un peu �go�ste de toujours promouvoir uniquement SES articles sur les r�seaux sociaux. Donner le lien vers un article provenant d'une autre source plaira � son r�seau.

Commenter rapidement

Un lien pr�sent t�t sur un article est pr�f�rable pour deux raisons:

Google va lui donner un peu plus de poids (car il sera au milieu de la page et qu'il � plus d'anciennet� que les liens des derniers commentaires)
Les visiteurs commencent � lire les commentaires mais se fatiguent rapidement (o� cliquent sur les premiers liens et ne reviennent pas)

Astuce: Ajouter les flux RSS des blogs dofollow � un agr�gateur RSS tel que Google Reader. Cela permet de voir facilement et rapidement les nouveaux articles publi�s.

CommentLuv

CommentLuv est un plugin pour WordPress. Ce plugin r�cup�re le flux RSS de l'URL du commentateur et ajoute le lien vers le dernier article dans ce flux. Ainsi une fois install�, les commentateurs d'un blog re�oivent un lien suppl�mentaire et qui plus est un lien profond. Par ailleurs, l'ancre du second lien utilise le titre de l'article en question, donc sera automatiquement un lien avec de bons mots-cl�s dans son ancre (alors que le premier c'est le pseudo et il n'est pas toujours autoris� d'utiliser des mots-cl�s).

Il y a donc tout int�r�t � chercher les blogs qui poss�dent ce plugin et qui sont en dofollow. Pour cela, effectuer une recherche sur Google France en utilisant la requ�te suivante:

"s last blog"

Diversit�

Il faut �viter de laisser de baser une campagne de commentaires uniquement sur une quelques blogs ou sur une seule plateforme de blog. Si la plateforme de blogs d�cide d'ajouter un nofollow ou de supprimer les liens, c'est une grande perte pour le r�f�rencement d'un site. L'id�al est donc de varier la provenance des liens.

Pour finir

Attention: ces m�thodes sont indiqu�es � titre indicatif. L'auteur de cet article ne cautionne pas toutes ces m�thodes et n'invite pas � (toutes) les utiliser. A vous d'utiliser votre propre sens moral pour les utiliser ou non.

Article original: Am�liorer l'impact des commentaires sur blog.

Commenter les blogs dofollow

Mon, 02 Aug 2010 01:44:24 +0100

Dans une campagne de r�f�rencement il est important d'avoir de nombreux liens de qualit�s vers le site � promouvoir. L'une des m�thodes simples pour obtenir des backlinks consiste � commenter les articles de blog dofollow. Cet article pr�sente les multiples int�r�ts de laisser des commentaires et introduit les limites de cette m�thode.

Int�r�ts

Les avantages de commenter les blogs sont vari�s. Certes le r�f�rencement est l'effet recherch� en priorit�, mais m�me les commentaires sur des blogs en nofollow peuvent �tre b�n�fiques, comme cela va �tre expliqu� plus bas.

R�f�rencement

Les personnes qui s'int�resse au r�f�rencement savent qu'obtenir des liens vers sont site est int�ressant pour son r�f�rencement gr�ce au pagerank qui en d�coule et aux ancres de lien optimis�es. Par cons�quent, lorsque l'ont sait que commenter un blog permet d'obtenir un lien, il devient judicieux d'int�grer cette pratique dans une campagne de r�f�rencement.

Le seul soucis est toutefois de trouver des blogs qui utilisent le dofollow (dans le cas contraire, cela n'apporte pas de jus).

Trafic

En d�pit de l'aspect r�f�rencement pur, les liens peuvent apporter du trafic direct. Au minimum, un blogueur qui mod�re les commentaires pourra aller visiter votre lien pour s'assurer que votre site est l�gal. Au mieux, de nombreux visiteurs vont visiter votre lien. Cela est peut-�tre d'autant plus vrai si votre commentaire est pertinent et qu'il engendre une discussion.

Notori�t�

Que le lien soit visit� ou non, votre commentaire est en ligne et sera peut �tre lu par d'autres personnes. Cela peut assoir votre exp�rience sur un sujet. Indirectement votre nom (ou marque) aura �t� vu. Un visiteur se souviendra peut �tre votre nom (ou la marque) s'il la voie ult�rieurement. Jusqu'� �ventuellement devenir client.

A titre d'exemple, en ce qui me concerne, j'ai d�couvert des sites/blogs � partir de commentaires laiss� sur mon blog. Et pour certains d'entre eux, je suis devenu un visiteur r�gulier.

Limite

Malgr� ces avantages, il ne faut pas perdre de vue qu'il y � des limites. Les liens dans les commentaires n'est pas LA technique ultime � elle-seule.

Pas de spam

Il n'est pas rare de croiser des spammeurs qui tentent de laisser un message tout simple, tel que "je suis d'accord avec cet article". Ce type de commentaire n'est pas toujours appr�ci�. Bon nombres de blogueurs supprime illico ce type de commentaire qui n'apporte rien du tout.

Non seulement un commentaire trop "spammy" peut �tre supprim� (et donc vous faire perdre votre temps) mais en plus il peut d�grader votre r�putation. Certains blogueurs sp�cialiste du r�f�rencement sont m�me pr�t � faire du r�f�rencement n�gatif.

Int�r�t du lien

Qu'on soit bien clair, un lien est un lien. Dans une campagne de r�f�rencement (presque) tous les liens sont bon � prendre. Mais il ne faut pas oublier que certains liens obtenu via cette m�thode ne sont pas tr�s int�ressant. Voici une liste non-exhaustive des raisons � cela:

Certains articles populaire ont plus d'une centaine de liens externes, ce qui diminue l'impact de ces liens
La th�matique de l'article n'est pas toujours li�e � celle du site li�e
Je ne suis pas sur qu'un lien dans les commentaires soit aussi pertinent que les liens dans les articles eux-m�mes
Certains blogs (ou plate-forme de blogs) sont en dofollow un jour et du jour au lendemain passe en nofollow
Cette technique peut demander du temps s'il faut les articles avant de publier. Toutefois, apr�s avoir lu un article, �a ne prend pas beaucoup de temps suppl�mentaire de r�diger un article. En cons�quent, si vous lisez des articles profitez-en toujours pour laisser un commentaire

Faire en sorte que le commentaire ne soit pas supprim�

Les blogueurs choisissent souvent de mod�rer les commentaires pour �viter les commentaires ressemblant trop � du spam. Voici une liste d'astuce pour �viter que �a arrive

Pseudo:
- Ne pas utiliser un mot-cl� en tant que pseudo. Le pseudo est souvent utilis� en tant qu'ancre du lien (donc un pseudo poss�dant des mots-cl�s est cens� �tre pr�f�rable) mais les blogueurs n'appr�cient pas toujours �a
- Utiliser un nom f�minin. Pour la m�me raison que dans certains jeux-vid�os en ligne, des joueurs utilisent des personnages et pseudo f�minin dans le but d'attirer la sympathie des autres joueurs (principalement masculin)
Email:
- Utiliser une adresse email personnalis�e (en rapport avec le pseudo). Certaines adresses r�v�lent la vrai nature du commentateur
- Varier l'adresse email lorsqu'il faut commenter beaucoup de blogs (ou plusieurs fois un m�me blog). Cela est d'autant plus vrai lorsqu'une adresse email � �t� bannis par un logiciel ou plugin anti-spam
URL:
- Utiliser le lien d'une page d'accueil. Le plus int�ressant pour un r�f�renceur est d'obtenir un lien vers une page profonde, mais si le blogueur � des comp�tences en r�f�rencement il saura qu'un commentaire avec une l'URL d'une page profonde est uniquement cr�� pour son aspect SEO
- Utiliser une URL raccourci pour �viter que le blogueur voit illico le site qui se cache derri�re un commentaire et (peut-�tre) duper les logiciels anti-spam
Commentaire:
- Faire un commentaire construit et personnalis� � l'article et/ou r�pondre � un autre commentaire
- F�liciter et remercier le blogueur
- R�diger plusieurs commentaires (l'un r�pondant � un autre). Cela �vite que le premier commentaire soit supprim�
Utiliser un proxy pour (peut-�tre) duper les logiciels anti-spam et pour �viter qu'un blogueur d�cide de supprimer d'un coup tous les commentaires associ� � une adresse IP

Certains de ces conseils sont issus de l'excellent article "comment bien spammer les blogs dofollow" de Seoblackette.

Astuce: le plugin Firefox Autofill Forms permet de pr�-remplir des champs de formulaire sur les pages web. Cela fait gagner du temps en �vitant de toujours taper les m�mes choses dans les champs "pseudo", "email" et "site web". Il est juste un peu compliqu� � utiliser la premi�re fois, mais une fois param�tr� il suffira d'un clic pour pr�-remplir les champs des commentaires.

Pour finir

L'article Am�liorer l'impact des commentaires sur blog permet de booster convenablement l'impact des commentaires lors d'une campagne de r�f�rencement.

Article original: Commenter les blogs dofollow.

Qu'est-ce qu'un march� �mergent et comment le trouver?

Thu, 11 Mar 2010 12:39:29 +0100

Le d�veloppement d'une soci�t� au niveau international est facilit� de nos jours gr�ce � internet. Malgr� tout, il convient de penser judicieusement les march�s pour ne pas effectuer de mauvaises man�uvres. Cet article, r�dig� par un r�dacteur invit�, pr�sente les march�s �mergents et les m�thodes pour les identifier.

Les march�s �mergents

Le Br�sil, la Russie, l'Inde et la Chine sont connus collectivement sous l'acronyme � BRIC � et ont �t� regroup�s ainsi par ce qu�ils repr�sentent les �conomies dont la croissance �conomique est la plus rapide dans le monde.

Toutefois, un march� �mergent ne se limite pas � la d�finition ci-dessus. Il peut s'agir de tout pays, ou tout ensemble de personnes au sein d'un pays, dont la demande pour un produit ou un service sp�cifique est en augmentation constante.

La d�finition de ce produit/service est d�ailleurs tr�s large. Il faut bien comprendre qu'un nouveau march� doit �tre en �mergence dans le domaine qui int�resse votre entreprise, quelle qu'elle soit. Les pays du BRIC peuvent repr�senter une cible fantastique pour la vente de certains produits, mais vous devez rechercher les pays qui ont un besoin sp�cifique de vos marchandises.

Identifier les march�s

Le meilleur moyen, et certainement le plus �conomique, d�identifier vos march�s cibles cl�s � l'international est la recherche en ligne. En r�sum�, s'il existe des soci�t�s de votre secteur industriel op�rant dans un pays sp�cifique, c'est un signe positif indiquant qu'il existe une demande.

Vous devez ensuite rechercher le plus d'informations possible sur ces soci�t�s : depuis combien de temps elles sont actives, quel est leur chiffre d'affaires et � quel groupe elles appartiennent. De plus, v�rifiez pr�cis�ment les services qu'elles offrent : si vous observez des lacunes, ce peut �tre un bon moyen de les exploiter. Toutes ces informations sont indispensables pour vous aider � d�terminer votre probabilit� de succ�s dans ces pays.

Bien entendu, si de nombreuses soci�t�s op�rent d�j� dans l'un de ces pays, m�fiez-vous. En effet, une saturation du march� peut signifier qu'il n'y a pas de place pour vous. Prenez donc le temps d�une recherche approfondie, et choisissez vos march�s cibles avec pr�caution.

Pr�sence en ligne

Une fois la liste de pays �tablie, l'�tape suivante pour toute entreprise cherchant � se globaliser est de mettre en place une pr�sence en ligne pour chaque march� cibl�. Ceci n�cessite deux �tapes : la localisation et l'optimisation.

Localisation

La raison justifiant la localisation de votre site Internet actuel est assez �vidente : un quart seulement de la population mondiale parle anglais, dont 94 % en seconde langue. La langue maternelle d'une �crasante majorit� de personnes n'est donc pas l'anglais.

Vous devez aussi parler le dialecte pr�cis de votre march� cible. Si vous ciblez, par exemple, la Belgique ou la Suisse francophone, vous devrez utiliser des traducteurs professionnels issus de ces pays. Pourquoi ? Et bien, il existe suffisamment de diff�rence entre le fran�ais parl� en France, en Belgique, en Suisse et dans d'autres r�gions francophones du monde pour le justifier. Par exemple, d�jeuner signifie � repas de midi � en France, mais � repas du matin � en Belgique ou en Suisse. Il existe d�innombrables exemples similaires entre les dialectes fran�ais, allemand, espagnol, portugais et anglais dans le monde.

Promotion du site

Apr�s la localisation, vient l'optimisation. Cela n�offre que peu d'int�r�t de traduire votre site si personne ne parvient � vous trouver sur Internet.

Vous devez trouver les mots-cl�s utilis�s localement pour la recherche de votre offre de produit ou de service dans chaque pays. Il ne s'agit pas simplement de traduire les mots-cl�s de l'anglais : une traduction litt�rale directe, bien que correcte, peut ne pas correspondre � ce que les gens cherchent au niveau local. Ils peuvent utiliser des synonymes ou des abr�viations. Donc de la m�me fa�on que vous rechercheriez les mots-cl�s pour votre site Internet en anglais, par exemple gr�ce � Google�s Keyword Finder, vous devriez utiliser le g�n�rateur de mots-cl�s de Google dans les moteurs de recherche de chaque pays (Google.de, Google.fr, Google.nl, etc.).

Ces mots-cl�s locaux devront ainsi �tre incorpor�s dans votre site Internet professionnel traduit, afin de maximiser votre exposition en ligne dans chacun de vos march�s cibles.

� propos de l'auteur

Christian Arno est le fondateur et le directeur g�n�ral de la soci�t� de traduction et de localisation. Avec des bureaux dans quatre continents et des clients dans plus de soixante pays, Lingo24 a r�alis� un chiffre d'affaires de 3,65 millions de Livres en 2009.

Article original: Qu'est-ce qu'un march� �mergent et comment le trouver?.

Accessibilit� web

Wed, 03 Mar 2010 23:42:37 +0100

L'accessibilit� est un terme faisant r�f�rence � l'acc�s des ressources � tous, en d�pit des handicaps. Dans le domaine du web, l'accessibilit� permet id�alement de s'assurer que le contenu est per�u, op�rable et compris par tout le monde. Cela inclue les personnes ayant des d�ficiences et les logiciels (exemple: les technologies d'assistance).

Symbole handicap�

Int�r�t de prendre en compte l'accessibilit�

L'exp�rience des utilisateurs sur un site web, ne pourra jamais �tre pareille pour tout le monde, mais devrait �tre �quivalent malgr� les handicaps. Il existe une vaste quantit� de raisons qui poussent � concevoir des sites web accessibles. Certaines de ces raisons sont list�es ci-dessous, mais cela reste non-exhaustif.

Int�r�ts divers

De nombreux pays ont vot�s des lois obligeant les sites web � �tre accessibles, tel que les �tats-Unis ou le Royaume-Unis. En g�n�ral, les pays n'ayant pas encore vot�s de lois y travaillent. De ce fait, il est possible de s'avancer en disant que dans les ann�es � suivre la plupart des grands pays obligeront les sites web � �tre accessible.
Sachant que les robots des moteurs de recherche sont aveugles, les conseils d'accessibilit�s sont souvent b�n�fiques pour le r�f�rencement. A titre d'exemple, les textes alternatifs sur les photos permettent aux d�ficients visuels de comprendre la photo, tout autant que les moteurs de recherche d'images.
Certains conseils d'accessibilit� sont �galement utiles pour l'usabilit� des sites. D'ailleurs, une recherche � d�montr� qu'un site optimis� pour l'accessibilit� est �gale ment plus efficace pour les personnes sans handicaps
Faire un site accessible peut �tre un gage de bonne r�putation. A contrario, un site web qui ne prend pas en compte l'accessibilit� peut affecter n�gativement son e-reputation. Cela est d'autant plus vrai pour les organismes qui pr�ne l'�tique et l'�galit�.
Certains conseils ont une port�e plus importante qu'on ne le pense. Par exemple, il est recommand� de faire des textes simples et court pour les internautes qui souffrent de d�ficiences mentales (allant de la simple dyslexie aux handicaps plus importants). Ce conseil � la force d'aider indirectement les utilisateurs qui n'ont pas le fran�ais comme langue natale.

Int�r�ts financiers

Billets et pi�ces

Si la loi oblige stipule de concevoir des sites accessibles et qu'il y a un proc�s contre un site web non-accessible, le prix de l'amende peut �tre sup�rieur au prix de cr�ation du site. Par ailleurs, le site doit par la m�me occasion investir une nouvelle fois pour refaire le site (accessible cette fois-ci). De ce fait, il est bien plus rentable de prendre en compte l'accessibilit� d�s la premi�re version d'un site.
Le nombre de personnes ayant un handicap, repr�sente un tr�s grand potentiel d'achat.
Sachant que certains handicaps r�duisent la mobilit�, certaines personnes ayant des handicaps sont plus facilement susceptibles de faire leur shopping en ligne. Il est donc tr�s motivant pour un site d'e-commerce de prendre en compte l'accessibilit� de leur boutique en ligne.

Int�r�ts sociologiques

Le nombre de personnes poss�dant une d�ficience est tr�s �lev�. A titre d'exemple, au Royaume-Unis, sur les 60 millions d'habitants, il y a pr�s de 10 millions de personnes qui ont un handicap.
Concevoir un site accessible � tous est un bon choix d'un point de vue �thique.
Sachant que certains handicaps r�duisent la mobilit�, le web est parfois l'un des seuls moyens de rester en contact avec la soci�t�, pour certaines personnes.

Type de handicaps

Diff�rents types de handicaps

Une erreur commune consiste � croire que l'accessibilit� web concerne uniquement les aveugles. Cette mauvaise interpr�tation r�duit le champ d'efficacit� des actions consistant � am�liorer l'acc�s � un site pour tous. Il est important qu'un site prenne en compte tous les types de handicaps pour ne pas exclure des cat�gories d'utilisateurs. Par ailleurs, il est judicieux de veiller � ce que le site soit �galement accessible � des utilisateurs qui combineraient plusieurs d�ficiences. Les personnes souffrant de plusieurs d�ficiences sont plus fr�quentes qu'on pourrait le penser (exemple: les personnes �g�es).

Il est possible de classer les types de d�ficiences dans trois cat�gories: d�ficiences sensorielles, d�ficiences moteurs et d�ficiences mentales. Les points �voqu�s ci-dessous tentent d'�tre complet, mais il s'agit probablement d'une liste non-exhaustive.

D�ficiences sensorielles

Les d�ficiences sensorielles incluent entre autres les difficult�s visuelles et auditives. Ces deux facteurs affectent bien souvent les personnes �g�es. Concernant les difficult�s visuelles, cela concerne aussi bien les utilisateurs ne pouvant pas distinguer les petits caract�res que les personnes ayant des d�ficiences au niveau des couleurs.

Bien que moins affect�s dans le domaine du web, l'aphasie (mutisme) doit �galement �tre prise en compte.

D�ficiences moteurs

Les handicapes moteurs concerne � la fois les personnes souffrant de difficult� de mobilit� (exemple: arthrite) jusqu'aux paralysies plus importantes (exemple: t�trapl�gie). Il ne faut pas oublier de prendre en compte les personnes ayant �t� amput�.

D�ficiences mentales

Encore une fois les d�ficiences peuvent �tre b�nigne (exemple: dyslexie) � beaucoup plus importante. Cela inclue �galement les handicaps concernant les probl�mes de m�morisation � court terme.

Recommandations actuelles

Le W3C � lanc� en avril 1997 le WAI. Ce dernier est un programme qui a pour mission de rendre le world wide web plus accessible pour les personnes ayant des d�ficiences. Ce programme a notamment r�dig� des directives telles que le WCAG, ATAG, UAAG et XAG.

La directive la plus commune pour les cr�ateurs de sites web est le WCAG (traduction: directives de l'accessibilit� du contenu web). Il existe deux versions de cette directive. La version 1.0 a �t� publi�e en 1999 et �tait tr�s sp�cifique. La version 2.0, publi�e en 2008, est plus g�n�rale et facile � comprendre. Cette deuxi�me version ne stipule pas de technologies particuli�res, de ce fait elle est plus apte � �tre utilis� dans le temps. C'est actuellement la deuxi�me version qui est en vigueur.

La directive WCAG 2.0 stipule que les contenus doivent �tre:

Per�u par tous. Par exemple, en fournissant du contenu textuel alternatif pour tous les contenus non-textuel (exemple: image ou vid�o)
Op�rable par tous. Par exemple, en r�alisant un site enti�rement accessible au clavier.
Compris par tous. Par exemple, en utilisant des textes clair et simple � comprendre.
Robuste. Par exemple, en s'assurant que les logiciels d'assistances puissent interpr�ter correctement le contenu.

Pour juger de la conformit� du contenu avec les directives il existe trois niveaux d'accessibilit�: A (niveau minimum), AA (am�lioration du niveau d'accessibilit�) et AAA (niveau sup�rieur d'accessibilit�).

Comprendre pour apprendre

Pour vraiment prendre conscience de certaines difficult�s li�es � un handicap, il faut se mettre dans la peau du personnage. Cela � plusieurs avantages:

Comprendre les points non-accessibles sur un site web
D�couvrir les points qui peuvent �tre am�lior�
Inciter les concepteurs et d�veloppeurs � s'int�resser � l'accessibilit�

L'id�e consistant � se mettre dans la peau du personnage n'est pas de jouer le jeu 5 secondes, mais d'essayer d'effectuer une r�elle t�che. Un exemple de t�che pourrait �tre d'acc�der � un contenu pr�sent sur une page profonde et de le consulter ou de contacter l'administrateur par email. Il est facile de s'amuser � lire une page avec un lecteur d'�cran juste pour le "fun", mais il est bien plus compliqu� de r�ellement naviguer sur un site en utilisant un lecteur d'�cran. La liste non-exhaustive ci-dessous pr�sente une s�rie de chose qu'il est possible de faire pour comprendre les difficult�s li�es � certains handicaps:

Utiliser un logiciel de lecture d'�cran. Cela est tr�s instructif car les logiciels pr�sentent les �l�ments d'une certaine fa�on. A titre d'exemple, le logiciel pr�cise vocalement qu'il y a une image puis lit le contenu du texte alternatif. De ce fait, le texte alternatif d'une image ne doit donc pas commencer par "photo de...", sinon le logiciel va dire "photo de: photo de mon chien".
Utiliser le zoom du navigateur web. Le plus souvent il suffit de maintenir la touche ctrl appuy� et d'utiliser la molette de la souris pour zoomer ou d�-zoomer.
Naviguer sur un site exclusivement avec la souris. La touche tabulation permet de passer d'un lien � un autre. N'h�sitez pas � consulter une page tr�s profonde. Par ailleurs, l'id�al est de compter le nombre de fois que la touche tabulation est utilis�e. Une �tude � prouv� que sur certains sites il faut appuyer plus de 100 fois sur la touche tabulation pour acc�der � une page (alors que la page est accessible en trois clics de souris).
Utiliser un site web avec une seule main. Il est notamment possible d'apprendre qu'il est tr�s compliqu� d'appuyer simultan�ment sur ctrl+alt+suppr avec une seule main.
Couper le son et naviguer sur un site r�pertoriant des vid�os. C'est id�al pour se rendre compte que les sous-titres sont primordiaux.

Ressources

Pour en savoir plus sur le sujet et approfondir ces connaissances, je vous recommande les liens ci-dessous.

Web Content Accessibility Guidelines (WCAG) 2.0 [en]: Recommandation officielle du W3C concernant l'accessibilit� du contenu
Web Accessibility Initiative (WAI) [en]: Site officiel du programme consistant � am�liorer l'accessibilit� du web.

Article original: Accessibilit� web.

Call to action: cas pratiques

Thu, 11 Feb 2010 23:15:22 +0100

Le call to action (en fran�ais: inciter � l'action) est une m�thode consistant � guider un visiteur sur une page web. Pr�sent� en d�tail dans un pr�c�dent article, le call to action se veut indispensable pour qu'un site r�alise ses objectifs (inciter le visiteur � s'inscrire, � acheter, � t�l�charger un logiciel ....). Cet article va pr�senter des cas concrets et les analyser pour d�couvrir s'il est possible de les am�liorer.

Int�r�t de cette analyse

L'int�r�t d'analyser de tel site consiste � apprendre concr�tement la mani�re permettant de mettre en application des concepts. De plus, dans certains cas il y a des exceptions aux r�gles traditionnelles et ces exemples sont alors indispensables pour avoir un large �ventail de m�thodes possibles pour r�aliser un call to action.

Le but de cet article n'est pas de reprocher une mauvaise conception de certains sites web. Bien au contraire, certains des sites qui sont pr�sent�s sont excellents dans leurs domaines. Ils ont beaucoup � nous apprendre. Cela a d'ailleurs �t� compliqu� de trouver des sites francophones qui font de bons call-to-action.

Liste des sites analys�s

Information: les sites sont pr�sent�s par ordre alphab�tique � partir de leur nom de domaine.

Amiando.com

Cette capture d'�cran a �t� redimensionn�e pour les besoins de l'article.

Points positifs

Initialement le texte et le bouton prenne toute la largeur de l'�cran, ce qui est un point positif pour clairement voir le call-to-action. Le choix des couleurs est judicieux (le bouton est clairement visible). Le lien "Essayer amiando maintenant!" sugg�re l'urgence de la situation.

Points n�gatifs

Il n'est pas obligatoire d'utiliser de points d'exclamation dans le bouton, cela rajoute du bruit. Le texte du lien est plus petit que le texte qui l'accompagne alors que cela devra �tre l'inverse. Enfin, sur le site il ne se passe rien au survol de la souris, alors qu'il serait judicieux de r�aliser une interaction pour faire comprendre qu'il s'agit bien d'un lien.

Apple.com

Points positifs

Les syst�mes d'exploitation support�s par le logiciel sont clairement indiqu�. Le reste de la page d�tail les configurations technique li�es au logiciel. Le bouton de t�l�chargement est gros, d'une couleur radicalement diff�rente du reste de la page et l'intitul� du bouton est clair.

Points n�gatifs

Impossible de savoir rapidement la taille du fichier � t�l�charger. Pas �vident de comprendre que l'ajout de son adresse email est optionnel. La petite ic�ne de la fl�che qui descend n'est pas forc�ment indispensable.

Avast.com

Cette capture d'�cran a �t� redimensionn�e pour les besoins de l'article.

Points positifs

Choix de la langue facile � comprendre. Taille du fichier pr�cis�.

Points n�gatifs

Le lien pourrait �tre plus gros. La liste du choix des anglais est dans le d�sordre, un classement alphab�tique serait pr�f�rable.

Codeur.com

Points positifs

La gratuit� incite � effectuer l'action. L'intitul� du bouton est clair, m�me sans connaitre le site il est possible de comprendre. Le bouton est gros et bien visible.

Points n�gatifs

Bien que les ic�nes semblent ajouter un confort d'utilisation, en r�alit� ils sont plut�t inutiles. Au contraire il faut un certains temps au cerveau pour analyser les images et il faut encore plus de temps pour les associer avec le texte appropri�. Ces ic�nes sont d'autant plus non-n�cessaires que les textes peuvent �tre compris sans les ic�nes et qu'au contraire les ic�nes � elles seule ne permettent pas de comprendre l'argument.

Pas �vident de comprendre que le cadre du bas ("trouver un prestataire 100% gratuitement") est en r�alit� un lien. M�me apr�s savoir qu'il s'agit d'un lien, ce n'est pas �vident de savoir o� il m�ne.

Java.com

Cette capture d'�cran a �t� redimensionn�e pour les besoins de l'article.

Points positifs

Le lien est normalement beaucoup plus gros, ce qui est un tr�s bon point. Il est clair de savoir quelle version du logiciel est propos�e en t�l�chargement. L'intitul� est clair. Au survol de la souris, le bouton r�agit. 3 liens compl�mentaires sont disponibles � proximit� du bouton de t�l�chargement.

Points n�gatifs

Le lien emm�ne vers une seconde page qui propose le t�l�chargement du logiciel. Je pense que ce choix s'explique par des raisons techniques mais c'est assez bizarre. En effet, le visiteur semble atterrir sur la m�me page car: le design de la page de destination est presque similaire et il y a encore une fois le lien de t�l�chargement.

Leetchi.com

Cette capture d'�cran a �t� redimensionn�e pour les besoins de l'article.

Points positifs

Bien que le terme "cagnotte" soit une m�taphore qui demande quelques secondes de r�flexion, le texte ne s�en sort pas trop mal pour expliquer le principe du site.

Points n�gatifs

En r�alit�, c'est l'environnement autour du bouton qui complique la compr�hension rapide du service en ligne. Le site devrait probablement ajouter un tagline plus court et compr�hensif tel que: "Collecter des sous � plusieurs facilement". Car actuellement le tagline est long et n'indique pas clairement le but du site (cf: "Avec Leetchi.com fini la gal�re des cadeaux � plusieurs !").

Le bouton n'�tant pas en 3D, il faut survoler le lien pour �tre sur qu'il s'agit bien d'un �l�ment cliquable. Le contraste bleu sur bleu n'est pas optimum. Et enfin, le bouton est relativement petit et n'a pas assez d'espace autour de lui.

Madmagz.com

Points positifs

Le bouton est gigantesque. Il y a de l'espace blanc autour du bouton. L'intitul� du bouton est clair. L'�tiquette "gratuit" incite l'utilisateur � tester.

Points n�gatifs

Le bouton est certes gigantesque, mais les autres �l�ments de la page le sont aussi. Le bouton est au niveau du pli de la page, pour le voir en entier il faut descendre un peu sur la page. De ce fait, le bouton est moins visible qu'on pourrait le penser. Il est possible de simplifier le texte du bouton en �crivant "Cr�er mon magazine" au lieu de "Je cr�e mon magazine".

Il est difficile de distinguer l'ast�risque et de l'associer avec le texte sous le bouton. Le point d'exclamation pr�s du "gratuit" est peu clair, il ressemble plus � une barre verticale.

Mozilla-europe.org

Cette capture d'�cran a �t� redimensionn�e pour les besoins de l'article.

Points positifs

Le bouton est clairement visible au centre de la page. Toutes les informations n�cessaires sont visible (version, fonctionne sous windows, langue et taille du fichier). Il est pr�cis� que c'est gratuit. Si l'internaute souhaite une autre version les autres liens sont disponible � proximit�. Contraste et taille du texte utilis� avec attention pour mettre en avant les informations importantes.

Points n�gatifs

Au survol de la souris, il n'y a pas une grande interaction qui fait comprendre tr�s clairement qu'il s'agit d'un lien. Seul �l�ment pour comprendre qu'il s'agit d'un lien: la couleur de la bordure du bouton change l�g�rement et le curseur se transforme en main. Il manque un peu d'espace autour de ce bouton.

Scribd.com

Points positifs

Gros bouton avec un bon contraste et un bon choix de couleurs. Effet au survol du lien tr�s r�ussi pour faire comprendre qu'une interaction est possible.

Points n�gatifs

L'intitul� du lien (en fran�ais: "envoyer le votre") est presque parfait. En r�alit� il faut lire le texte � c�t� pour savoir ce qu'il est possible d'envoyer. Les points et points d'exclamation pour les boutons et tagline ajoute du bruit.

Sfr.fr

Points positifs

Bon choix de couleurs qui rende cet �l�ment visible (car la couleur habituelle du site est le rouge).

Points n�gatifs

Lorsqu'un bouton permet de t�l�charger quelque chose il y a parfois le symbole d'une fl�che qui pointe vers le bas. Cette fois-ci la fl�che d�signe un menu qui se d�roule au clic de l'internaute. Cette une grande surprise pour les visiteurs qui s'attendait � �tre rediriger vers une nouvelle page lors du clic.

Le terme "client" est tr�s bien d�finit pour les professionnels de SFR. Mais le visiteur ne se consid�re pas n�cessairement comme un client, mais plut�t comme quelqu'un qui a un t�l�phone avec un abonnement SFR. Les termes ne doivent pas �tre utilis�s selon l'attente de l'agence mais plut�t selon l'attente du visiteur.

La description laisse penser que l'utilisateur va �tre redirig� vers est un compte client en ligne. En r�alit�, lorsqu'il clique il est redirig� vers une seconde page d'accueil. La m�taphore du terme "portail" est un peu flou, le visiteur ne sais pas trop ce qui l'attends au clic sur le bouton.

Skype.com

Cette capture d'�cran a �t� redimensionn�e pour les besoins de l'article.

Points positifs

Le choix des couleurs est judicieux, car sur cette page le vert est seulement utilis� pour le bouton. L'intitul� du lien est clair et le texte pr�sent � c�t� aussi.

Points n�gatifs

Le bouton semble grand, mais en r�alit� il est petit compar� aux autres �l�ments de la page. L'ic�ne pr�sente dans le bouton est un peu petite. L'utilisateur habitu� reconna�t vaguement le logo de Skype avec un petit quelque chose en plus. L'�l�ment suppl�mentaire n'est autre qu'une fl�che vers le bas. Le choix �tait probablement de faire comprendre qu'il s'agit d'un lien de t�l�chargement mais sans l'ic�ne le lien est tout aussi compr�hensible. D'ailleurs sans l'ic�ne le lien est plus compr�hensible (l'internaute n'a pas besoin d'essayer de comprendre le sens de l'ic�ne).

Le lien est relativement bas sur la page, il est presque au niveau du pli.

Tungle.me

Points positifs

L'intitul� du lien (en fran�ais: Inscription gratuite) est bien choisie. La couleur, la taille et la position du bouton sont excellent.

Points n�gatifs

D'apr�s certaines �tudes, des polices d'�criture sont mieux adapt�es au support web que d'autres. La police d'�criture utilis�e par Tungle est certes "esth�tique" mais elle est difficile � lire. Mettre tout le texte en italique complique encore plus la lecture. Les deux paragraphes se contredisent. Ces paragraphes sont longs et compliqu�s � lire le mieux aurait �t� de faire un bon tagline et une liste � puce des int�r�ts du service.

Twitter.com

Points positifs

Bon choix de couleur et de contraste. Intitul� du bouton parfait. Positionnement et taille du bouton id�al.

Points n�gatifs

Le terme "rejoindre la conversion" n'est pas vrai. En r�alit� il s'agit d'une m�taphore, mais cette m�taphore est difficile � deviner et � comprendre. Cela est d'autant plus difficile � comprendre que Twitter est un concept pas �vident � expliquer � un novice. De plus, ce texte est en bleu sur fond bleu, ce qui le rendre presque invisible. Si le but est justement de rendre cet �l�ment invisible, autant ne pas le mettre du tout.

Unprobleme.com

Points positifs

Bonne taille du bouton et bon placement. L'intitul� du bouton est assez clair, m�me sans connaitre le but du site.

Points n�gatifs

Paragraphe d'introduction beaucoup trop long. C'est trop petit et trop repoussant pour avoir envie de le lire.

Le bouton n'a aucun effet au survol de la souris. La couleur est certes diff�rente de la charte graphique, mais le vert semble un peu trop "flashy". J'ai d�j� vu des publicit�s qui ressemblaient � �a, de ce fait le lien pourrait presque �tre une publicit�.

Viadeo.com

Points positifs

Excellent contraste. Bon choix des couleurs. Le texte explique clairement que la communaut� est gigantesque et sugg�re � l'utilisateur de la rejoindre. Le reste de la page explique les int�r�ts tr�s clairement.

Points n�gatifs

Le texte "nouveau sur Viadeo?" n'est pas clair � 100%. Un "nouveau" peu tout aussi �tre quelqu'un r�cemment inscrit que quelqu'un qui arrive sur le site pour la premi�re fois. Il semblerait plus judicieux d'inscrire "Pas encore inscrit?" ou "Pas encore membre de Viadeo?".

Pourquoi ne pas tenter d'utiliser un lien "M'inscrire gratuitement" et supprimer le petit texte "inscription gratuite". Cela enl�ve du bruit, agrandi le bouton et la gratuit� (plus visible) incite � l'inscription.

Xing.com

Points positifs

Bon choix des mots pour le bouton.

Points n�gatifs

Bouton trop petit. Pas indispensable d'utiliser un point d'exclamation dans l'intitul� du bouton. Redondance des mots "gratuitement" et "Xing". Au lieu d'expliquer pourquoi XING est int�ressant, il serait plus judicieux d'expliquer ce qu'il apporte � l'internaute. De ce fait "Booster mon r�seau professionnel dans le monde entier" semble plus int�ressant que "XING booste le r�seau des professionnels du monde entier". Contraste du bouton pas assez fort.

Mot de la fin

Certains points ne reposent que sur des "pr�jug�s" de l'auteur et d'autres se basent sur des �tudes s�rieuses. Ces points de vue peuvent �tre discut�s dans les commentaires de l'article.

La meilleure fa�on de savoir s'il faut modifier quelque chose consiste � faire des tests A/B. C'est � dire qu'il faut proposer une am�lioration et voir si �a am�liore le taux de conversion visiteur/client.

Article original: Call to action: cas pratiques.