Go-Referencement.org : Référencement, marketing de recherche et Web 2.0

Bien qu’il y ait plusieurs similarités entre le design de sites Web (sites marchands, sites de marque, sites de contenu, Intranet, etc) et celui d’applications Web, certaines attentions peuvent faire la différence entre une application médiocre et une de qualité.

Voici quelques points à considérer si jamais vous avez également à bâtir une application Web à usage commercial :

Simplifiez Oubliez les navigations atypiques ou navigations profondes; la navigation devrait être aussi linéaire que possible. L’utilisateur ne devrait jamais avoir à se demander où il se trouve, utilisez un fil d’Ariane.

Réduisez le nombre de clics La complexité de votre application ou des actions ne devrait jamais transparaître. Demandez-vous constamment si une action ne pourrait pas se faire avec moins de clics. Plus il y a de clics, plus il y a de possibilités d’erreurs et de perte de temps.

Facilitez la recherche Un champs de recherche complémentera bien votre navigation. Surtout si vous assignez des résultats aux mots-clefs les plus fréquemment recherchés (comme un FAQ).

Prévoyez les erreurs Qui sait comment les utilisateurs utiliseront votre application? Concevez votre système avec les erreurs en tête; prévoyez les avant qu’elles arrivent. Il ne sera pas facile de modifier votre application quand les utilisateurs auront commencé à apprendre à s’en servir.

Donnez des options Ne forcez pas vos utilisateurs à penser, donnez-leur toujours des manières simples de corriger leurs erreurs ou de compléter leurs actions.

Brisez le moule Oubliez la subtilité si vous voulez que vos utilisateurs remarquent un message ou une erreur. Changez le format de la page, l’affichage ou utilisez des couleurs vives pour attirer leur attention car l’habitude se développe très rapidement.

Utilisez le clavier Vous connaissez l’attribut tabindex? Il est essentiel quand vous concevez une application car il permet de contrôler la navigation clavier à l’intérieur des pages. Évitez les tendinites aux utilisateurs en excluant les éléments secondaires.

Utilisez des raccourcis claviers Observez comment vos utilisateurs utilisent réellement votre application. Surprenant? Simplifiez leur vie en créant des raccourcis claviers. Attention à ne pas interférer avec ceux du navigateur Internet.

Contrôlez le navigateur Évaluez la pertinence de permettre à vos utilisateurs de rafraîchir la page (F5), de faire Back ou Forward ou de voir l’URL. S’il n’y en a pas, débarassez-vous de ces options et sauvez de l’espace vertical.

Pensez accessibilité N’oubliez pas que des handicapés visuels et daltoniens travailleront probablement avec votre application. Assurez-vous que vos polices et liens soient conformes aux standards d’accessibilité. Ne forcez personne à cliquer sur un bouton radio, utilisez des labels.

Évitez la perte de temps Assurez-vous que vos utilisateurs savent toujours à quoi s’attendre quand ils cliquent sur un lien. Différenciez les liens externes, liens affichant / cachant du contenu, pdfs, boutons, actions, etc.

Enlevez les images Réduisez la pollution visuelle au minimum et accélérez votre application. Vos options principales devraient attirer toute l’attention de vos utilisateurs.

Dosez les couleurs Réduisez le stress de vos utilisateurs en utilisant des couleurs sobres, utilisez des couleurs vives pour attirer l’attention. Ne vous fiez jamais exclusivement à la couleur car les daltoniens auront de la difficulté à faire la différence.

Numérotez vos formulaires Réduisez la longueur des formulaires et numérotez-les. Vos pages seront plus ordonnées et paraîtront moins intimidantes.

Réduisez l’espacement Les applications nécessitent moins d’espacement que les sites commerciaux car les utilisateurs s’habituent rapidement aux éléments et à leur positionnement. Trop d’espacement réduira leur productivité en limitant la quantité d’information affichée par page.

Alignez votre contenu Le contenu d’une application devrait refléter la manière dont les utilisateurs parlent. L’apprentissage est plus difficile lorsqu’il faut apprendre de nouveaux termes pour des concepts déjà acquis.

Utilisez différents niveaux d’information Évitez de surcharger les écrans, séparez l’information en différents niveaux :

• 1) Information essentielle, affichée directement sur la page.
• 2) Information secondaire, accessible à 1 clic.
• 3) Information supplémentaire, requiert une recherche active de l’utilisateur.

Bien que plusieurs des points mentionnés s’appliquent également à la conception de sites Web, ils deviennent rapidement essentiels quand l’efficacité prime. Ne faites pas l’erreur de croire que concevoir une application est la même chose que concevoir un site Web; il est beaucoup plus difficile de faire des modifications quand des milliers d’utilisateurs dépendent de votre application.

Je suis un mordu de la qualité des sites Web… un mordu vacciné… je tente de respecter un maximum de bonnes pratiques mais je ne suis pas du genre à tordre le bras du client s’il veut quelque chose avec laquelle je suis en désaccord…

Un des volets pour avoir un site Web de qualité est l’accessibilité. Lors de mon article précédent, j’ai parlé plus longuement des concepts de base de l’accessibilité. Une des bonnes pratiques Opquast dans la rubrique “Accessibilité” est de pouvoir naviguer sur le site en utilisant seulement le clavier. Automatiquement, les sites utilisant le Flash ou le Java pour le menu principal sont identifiés comme non conformes. Les sites présentant des menus déroulant sont généralement non conformes également car les intégrateurs ne pensent que très rarement à ajouter les événements javascript onfocus et onblur pour supporter le clavier.

Le respects des bonnes pratiques en matière d’accessibilité numérique est aussi une bonne manière d’améliorer le référencement organique d’un site Web. Lorsque je parle d’accessibilité à un client et qu’il réplique en disant que les gens aveugles ne sont pas sa clientèle cible, je me plais à dire que les robots d’indexation de contenu de Google sont des visiteurs aveugles! En effet, si on dégage le code HTML des éléments superflus pour les concentrer dans le CSS, les robots auront moins de contenu inutile à traiter et pourront naviguer plus aisément sur le site ce qui améliorera le positionnement du site Web!

Pour apprendre à mieux exploiter les technologies HTML et CSS, le W3Québec propose une formation de 6 heures découpée en 2 blocs de 3 heures les 21 et 28 mars 2007, de 18h à 21h, à l’Université de Montréal. Le formateur Normand Lamoureux, est expert en accessibilité du Web et spécialiste en réadaptation en déficience visuelle à l’Institut Nazareth et Louis-Braille. Son travail de tous les jours consiste à rendre des personnes aveugles autonomes à l’ordinateur. L’un et l’autre volet du cours sera orienté accessibilité, standards et bonnes pratiques.

Vous pouvez vous inscrire en ligne à l’adresse suivante : http://www.w3qc.org/formation/formation-html-css/

Les places sont limitées. Une connaissance de base des langages HTML et CSS est requise.

Raphaël, rédacteur spécialiste de l’ergonomie sur ergonline.net, nous invite à nous prêter au petit jeu qui tourne sur la blogosphère depuis quelques temps : dévoiler 5 choses que vous ne savez pas sur nous.

Sarah

• J’ai une jumelle : lorsque nous étions plus jeunes, nous nous ressemblions beaucoup, ce qui nous a permis de tricher lors de nombreux examens scolaires…
• Je suis schizophrène : d’après les spécialistes, les personnes qui, comme moi, ne sont pas “latéralisées” (qui ne peuvent determiner s’ils sont droitiers ou gauchers) ont de plus grandes chances de développer une forme de schizophrénie. J’ai toujours pensé que pour être talentueux, il fallait être un peu fou
• Mon niveau en mathématique est désolant : j’ai suivi des études littéraires où je n’avais que 45 minutes de cours de maths par semaine… Cosinus ? C’est quoi ? Une marque de médicament ?
• Je suis une personne très maladroite : cela doit être dû à mon côté “non latéralisée-schizophrène”. Il ne se passe pas un jour sans que je laisse échapper quelque chose de mes mains. Dernièrement, je me suis laissée “échapper” en tombant au sol face la première. Bilan : une grosse bosse au nez !
• J’adore prendre de longues douches : cela m’a coûté une colocation !

Guillaume

• J’ai été un vrai fan de Starcraft pendant plus de 6 ans : j’ai même joué “professionnellement” dans plusieurs tournois au Canada, aux États-Unis, puis finalement en Corée pour les World Cyber Games, en 2000, finissant dans le top 15 mondial de cet événement réunissant 14 pays et plus d’une centaine de joueurs préqualifiés. Mon nom de joueur était X’Ds~Fire, et j’ai été le capitaine de l’équipe canadienne durant plusieurs années avec Simon Rouillier, l’autre associé principal chez NVI, qui avait comme nickname X’Ds~Kiwi.
• J’ai participé, en tant que recherchiste principal, responsable des joueurs et capitaine d’une équipe de joueurs, à une émission télé québécoise intitulée « GamerZ ». Le jeu joué était Call of Duty et l’émission comportait 11 épisodes d’une heure. Notre équipe a perdu en finale 11-8, lors du 11e épisode !
• Je suis la personne avec l’horaire le plus particulier et incohérent de NVI. Je peux être au bureau à 11h00 am, mais y rester jusqu’à très tard… Bref, pas vraiment de structure… Ah… ces créatifs ! Une chance que Simon est là pour mettre un peu de rigueur
• J’aimerais avoir un grand voilier et faire le tour du monde (et, bien sûr, inviter tous mes amis et clients à tour de rôle parce que sinon je mourrais d’ennui !)
• Je suis célibataire et j’accepte les CVs avec photos, lettre de motivation ainsi qu’un dépôt de 100 000 $ (dans mes rêves).

Olivier

• À l’âge de 13 ans, je me suis distingué dans mon école secondaire par ma remarquable imitation de l’alarme d’incendie. Bilan : 300 élèves dans la cour, une confusion généralisée, un fou rire difficile à contenir devant la directrice de l’établissement… et une journée d’exclusion.
• Adolescent, j’avais des bottes de ski alpin bleues que j’aimais tellement que j’ai tenu à les utiliser alors que mon pied avait grandi. Après une semaine de ski intense dans les Alpes, l’ongle de mon gros orteil est devenu bleu, lui aussi. Il est tombé quelques semaines plus tard. Par chance, il m’en est poussé un tout neuf.
• J’ai émigré de France au Québec à l’âge christique de 33 ans, avec femme et fille. Fervent adepte de la simplicité volontaire, j’avais vendu ou donné tout ce qui n’entrait pas dans mes deux malles : je pouvais ainsi porter dans mes bras tout ce que je possédais.
• Je suis le pire comptable au monde. En fait, je fuis la compta pour éviter la catastrophe. Même chose pour la planification : au travail et dans ma vie personnelle, sans un agenda et une liste de “trucs à faire”, je suis foutu !
• Je ne suis pas un grand sportif au sens classique du terme. Par contre, je suis un cycliste urbain depuis de longues années, et quand je traverse Montréal sur mon lourd bicyc’, je mets une fierté malsaine à n’être jamais rattrapé…

Voilà pour l’équipe de NVI ! Nous renvoyons la balle à Marc-Antoine sur Dev-Taxi, François sur QuiboWeb - Open-Source, et Louis Durocher sur Orénoque - Référencement

Il y a quelques jours, Rand Fishkin de SEOmoz a publié un billet sur l’ergonomie et l’efficacité que doit offrir un formulaire en ligne.

D’après une étude entreprise par UXMatters, certains types de formulaires sont plus ergonomiques et efficaces que d’autres. En effet, UXMatters a fournit une étude agrementée de tests d’utilisateurs couplés avec le “Eye tracking”, technique qui permet d’étudier le parcours visuel des utilisateurs face à une page web.

L’étude est assez complète et nous offre de précieux conseils pour construire un formulaire efficace et donc augmenter le taux de conversion (le taux de formulaires completés étant souvent l’agrégateur principal pour calculer le taux de conversion d’un site).

Ainsi, il apparait que le formulaire le plus ergonomique est celui qui présente les intitulés au dessus des champs de saisie (voir image).

Les chiffres indiquent, par ordre chronologique, à quels endroits les yeux des utilisateurs se sont attardés. Mise à part le bouton d’action (ici submit), nos yeux sont inconsciemment attirés par les champs de saisie. Il est donc plus judiciable de positionner au plus près des intitulés.

Certaines règles sont fortement déconseillées :

• L’utilisation du gras pour mettre en valeur les intitulés : il est plus difficile et plus fatiguant de lire en gras
• L’agencement où les intitulés se trouvent à gauche des champs de saisie : La séparation franche entre l’intitulé et son champ de saisie entraîne une plus grande difficulté pour la compréhension de l’utilisateur. En effet, d’après le Eye Tracking, les utilisateurs ne visualise pas le formulaire dans son ensemble en un coup d’oeil.
• Les listes sont à utiliser avec précaution : les listes déroulantes sont très/trop attractives pour les yeux. Donc, il faut les utiliser dans un but précis.

Si vous voulez lire l’étude au complet, visitez le site de UXMatters. Et pour pousser votre analyse je vous invite à lire les commentaires sur le site de SEOmoz, qui amorce le débat “Utilité versus Design” sur le sujet.

Une stratégie web ne se base pas que sur une optimisation ou du positionnement payant. Bâtir une stratégie de liens est une étape aussi capitale que les premières citées.

Une stratégie de liens se développe selon plusieurs points :

• La qualité de votre contenu : un contenu riche et réactualisé de manière régulière vous confère des ‘préscripteurs’! En effet, la pertinence de votre contenu peut conduire de nombreux webmasters ou éditeurs de contenu à ajouter votre adresse URL dans leur page de liens.
• Vos échanges/partenariat de liens : Vous pouvez procéder à des échanges de liens avec un autre site web.
• Vos inscriptions dans les annuaires : ceci est une façon simple mais fastidieuse, de commencer à construire votre stratégie de liens.

L’inscription dans les annuaires requiert de la patience mais aussi du bon sens. Il est inutile de vous inscrire dans des miliers d’annuaires avec peu de valeur ajoutée, autant au niveau de sa pertinence, que le ‘poids’ du lien qu’il vous apporte(trafic et qualité).

A peu de choses près, vous pouvez partir du constat que le prix (moins important) et la sélectivité à l’inscription (plus important) peuvent être d’assez bons indicateurs. Si vous achetez une voiture d’occasion à bas prix, n’attendez pas qu’elle vous fournisse confort et fiabilité. Je conçois qu’il existe des exceptions bien sûr … Mais cela reste des exceptions, donc rare.

L’autre point à considérer est le placement de vos concurrents, ou des grands joueurs de votre secteur, dans ces mêmes répertoires. Cela vous permettra de vous bâtir votre propre liste d’annuaires à évaluer. Dès lors, vous pouvez aussi déterminer le nombre de liens qu’obtient le repertoire en faisant un ‘linkdomain:www.votresite.com’ sur Yahoo (qui dresse un portrait beaucoup plus réel que la fonction ‘link:www.votresite.com’ sur Google, qui ont eux-mêmes avoué ne pas afficher tous les liens qui pointent vers un site). Un autre secret du GooglePlex…

A partir de là, à vous de vous vivre votre propre expérience d’utilisateur :

• Le nombre d’entreprises/sites enregistrés : un répertoire de qualité attire.
• Le nombre de sites enregistrée dans votre catégorie
• Le nombre et surtout la pertinence du classement : est-ce un classement géographique, thématique, peut-on faire des croisements ?
• L’ergonomie et la navigation : la navigation est elle intuitive ? Il y a-t-il un moteur de recherche interne ?

Construire une stratégie de liens est un travail de longue haleine. Procédez en étape et posez vous des objectifs clairs !

Pour les sites de commerce électronique, une des plus grandes difficultés est de gagner la confiance des internautes. Pour les convaincre, ces sites offrent des garanties sur la sécurité de paiement et de livraison, la qualité des produits et des services, mais beaucoup d’entre eux négligent l’accessibilité de leur site !

En commerce traditionnel, vous aurez beau offrir les meilleurs produits et services, si votre devanture est peu attrayante et votre force de vente peu disponible, les clients potentiels s’enfuiront bien vite.

Ainsi, la première étape, tant chronologique que stratégique, est de convaincre l’internaute de rester sur votre site web. Par analogie le premier obstacle à contourner est le temps d’attente du chargement de vos pages.
Un internaute est prêt à attendre au maximum environ 1 minute *(ce temps serait un délai maximum pour un document audio ou vidéo avec une connexion 56k, merci à EepP pour son commentaire!) , selon son type de connexion (les détenteurs d’un modem 56 kb/s sont plus enclins à attendre que ceux en ADSL).

Pour résoudre ce problème, il vous faut suivre ces deux étapes :

• Optimiser vos pages pour les rendre plus légères.
• Gérer le temps d’attente en occupant l’internaute.

Optimisation du site

Adaptez votre site selon votre cible et votre image de marque ! Si vos clients potentiels sont plutôt situés en zone rurale, vous devez épurer vos pages en évitant les contenus multimédias (Flash, lecture vidéo ou audio, etc. …). Rendez la navigation la plus intuitive possible. Un client potentiel qui cherche son information à l’impression de perdre son temps.
Si les contenus interactifs font partie de votre image de marque, il va falloir modifier la perception du temps d’attente de vos clients potentiels.

Gérer le temps d’attente

Un site de commerce électronique, tout comme un magasin traditionnel, se construit autour d’une ambiance. Pour changer la perception du temps d’attente de vos visiteurs, vous devez leur proposer une distraction qui requière peu d’attention.

• La musique : c’est un des outils les plus utilisés. Evitez les musiques familières et choisissez plutôt un tempo lent/moyen, à la seule condition que cela se fonde à l’ambiance de votre site.
• L’information : Informer le client sur le délai d’attente réduit sa frustration. Il sait qu’il sera servi le délai passé. La façon la plus optimale est de lui proposer un décompte, plutôt qu’une simple phrase l’informant qu’il attend.
• Une animation multimédia : Vous pouvez proposer un spot publicitaire, un ‘teasing’ de vos produits, voire un agent virtuel. Le chargement de cette animation devra être prioritaire, et n’oubliez pas que ce genre de contenu demande beaucoup de bande passante !

Si vous voulez plus de précisions sur la perception de l’attente chez un client potentiel, nous vous invitons à lire les billets sur le blogue de Michel Leblanc.