10 facteurs à la source de l’évolution de l’ergonomie Web

par
   

Il semble que les entreprises soient condamnées à périodiquement entreprendre la refonte de leur site. Frustrant pour certains, normal pour d’autres.

Cela dit, les refontes sont parfois nécessaires. Parfois un changement technologique s’impose.  Mais souvent, ces refontes ont plus à avoir avec l’évolution des attentes des internautes. On pourrait aussi dire que les attentes augmentent au fil du temps.

Voici un palmarès des facteurs (parfois surprenants) qui ont eu le plus d’influence sur l'évolution de l'ergonomie Web.

Souris Microsoft avec molette1- La molette de souris (Scroll wheel)

Inventée en 1995,  elle est devenue monnaie courante au début des années 2000. La molette facilite grandement le défilement des pages. Le pavé tactile (touch pad), pour les ordinateurs portables, a eu le même effet.

Conséquence : Les pages se sont beaucoup allongées dans la dernière décennie. Or, les recherches démontrent que les pages web plus longues sont efficaces.

2- Les écrans à cristaux liquides

Les écrans à cristaux liquides,  majoritaires depuis 2007 et omniprésents désormais, ont conduit à une nette augmentation de la résolution moyenne des écrans (et à une légère augmentation de la densité des pixels).

Conséquences:

  • La résolution de référence est passée de 640 pixels de large à 1024 pixels.
  • Les boutons et textes sur le web ont gagné en taille.
  • Les logiciels consacrent maintenant plus d'espace aux menus. Le ruban de Microsoft est un bon exemple.

Oculométrie d'une page3- Invisibilité cognitive des publicités (ad blindness)

Ce terme (la version française est de mon cru) désigne le fait que les internautes ont cessé de porter attention à ce qui ressemble à de la publicité. Les ergonomes et les designers web doivent en tenir compte.

Une expérience personnelle me l’a démontré de manière éloquente : il y a quelque temps, je naviguais sur le site d'American Airlines. Je n'arrivais pas à trouver certaines fonctionnalités dont j'avais besoin. En parlant avec un représentant au téléphone, je me suis rendu compte que les fonctionnalités que je cherchais étaient bien là, mais elles étaient situées dans un menu qui avait l’apparence des publicités AdSense. À cause de son apparance , ce menu était devenu carrément invisible à mes yeux.

Conséquence : Il vaut mieux éviter de communiquer des informations importantes à l’aide de zones qui ressemblent à une publicité. Pour en savoir plus, lire : « Banner Blindness: Old and New Findings ».

4- WordPress et la popularité des blogues

La popularité des blogues a influencé l’interface des sites, c’est-à-dire que de plus en plus de sites ressemblent à des blogues. Ce n’est probablement pas étrange dû au fait que WordPress, qui était au départ uniquement conçu pour des blogues, est présentement le gestionnaire de contenu le plus utilisé dans le monde.

Conséquence : Beaucoup de sites finissent par ressembler à des blogues WordPress.

5- La spécialisation des artisants du Web

La conception d’un bon site fait désormais appel à une armée de spécialistes : stratège, ergonome, graphiste, programmeur, intégrateur, etc. Mais, il n’y a pas si longtemps que les programmeurs représentaient les seules ressources web dans certaines organisations, et ils étaient fréquemment amenés à prendre des décisions qui sortaient de leur champ de compétence.

Conséquence : Les programmeurs, livrés à eu même, commettaient des erreurs, ergonomiquement parlant.

resetUne des erreurs les plus classiques est d’ajouter le bouton « Recommencer» au bas d’un formulaire. Pourtant, même en 2010, ça existe encore. J’en ai aperçu un il y a quelques mois à peine sur le site de la ville de Montréal, en payant un billet de stationnement en ligne. Désolant.

Évolution des navigateurs web

Animation du navigateur MosaicÉvidemment, les navigateurs ont beaucoup évolué depuis NCSA Mosaic, en 1995. Au départ, il s’agissait seulement de textes et d’images sur un fond gris, avec des liens soulignés en bleu. Et on avait besoin d’un logo animé pour nous indiquer que la requête était envoyée et qu’il fallait maintenant être patient! (Les gens avaient l’habitude de cliquer plusieurs fois sur le même lien, ce qui ne faisait qu’envenimer les choses)

L’histoire des navigateurs Web est complexée et mouvementée. Aujourd’hui, c’est surtout le World Wide Web Consortium qui chapeaute l’évolution des navigateurs. À l’origine c’était plutôt Microsoft et Netscape qui rivalisaient en termes d’innovation.

6- JavaScript

Fenêtre d'alerte standard en JavaScriptCe langage introduit par Netscape, qui n’a rien à voir avec le langage Java soit dit en passant, était nécessaire à tout ce qui allait suivre. Cela dit, le JavaScript a pris un certain temps avant d’améliorer l’expérience utilisateur. C’est au JavaScript qu’on doit les désagréables alertes qui apparaissaient subitement dans notre navigateur. Par contre, il n’est plus nécessaire de faire un aller-retour au serveur web pour valider la soumission d’un formulaire par exemple.

Conséquence : Une accélération de l’expérience lors des interactions.

7- Ajax ou plus précisément XMLHttpRequest

Cette fonctionnalité, apparue dans Internet Explorer 5, permet de rafraîchir uniquement une région d’une page plutôt que toute la page.

Par exemple, elle permet de valider si un nom d’utilisateur est déjà réservé, sans rafraîchir la page. Un des premiers sites à l’utiliser massivement a été Facebook. On peut aussi l’attribuer à Google Docs.

Conséquences : Une accélération brutale de l’expérience lors des interactions.

8- CSS

modal1

Bien que le standard de la norme CSS soit toujours en chantier, les feuilles de styles en cascade permettent de séparer entièrement le contenu d’un site et son apparence. Les intégrateurs peuvent, par exemple, créer une feuille de styles pour différents contextes d’affichage, par exemple pour les appareils mobiles ou pour l’impression.

Conséquences : On peut maintenant remplacer les boîtes de dialogue classique (ainsi que les fenêtres surgissantes) par des fenêtres « modales » très riches visuellement.

9- jQuery

La librairie JavaScript jQuery facilite grandement la programmation d’interaction avancée. Or, un intégrateur web n’a pas souvent le temps d’implémenter la solution idéale à partir de zéro. Il doit adapter ce qui existe déjà. Entre programmer une fonctionnalité de zéro (des centaines d’heures de travail) et intégrer une solution existante (quelques minutes), le choix est clair.

jQuery facilite également le partage et l’intégration de plugiciel (plug-ins) existants. Il y en a près de 3000. Un bon exemple serait le plugiciel YoxView, gratuit, à code ouvert, qui permet de créer une visionneuse de photo de très haut niveau en quelques minutes.

Conséquence : jQuery peut aisément réduire par 5 ou 10 le temps nécessaire pour ajouter des fonctionnalités avancées. Cette facilité a donc augmenté la qualité des interactions sur les sites. Par conséquent, les sites qui n’ont pas fait ce passage à jQuery ont habituellement l’air plus amateur.

10 - Le PageRank de Google

Pour 91% des internautes (98% pour le mobile), c’est l’algorithme de classement PageRank de Google qui décide de la position de votre site dans les résultats de recherche. Pour optimiser la position d’un site dans Google, il est nécessaire d’adopter certaines pratiques de référencement organique qui influent sur le design des sites.

Conséquence : Par exemple, il a fallu abandonner l’usage d’image pour les titres.

Une autre conséquence de cet algorithme très performant et que les utilisateurs atterrissent de moins en moins souvent sur la page d’accueil.

Conséquence : Il faut qu’un utilisateur puisse se situer rapidement lorsqu’il arrive sur une page. C’est pour cette raison que les fils d’Ariane sont devenus incontournables.

Autres facteurs

J’aurais pu aussi parler de Facebook, des tests A/B, de Google Analytics, des systèmes d’exploitation, des téléphones intelligents, des AdWords, de Flash. Peut-être y aura-t-il une suite…

COMMENTAIRES

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>