Référencement, Design et Cie

Attention ce blog a déménagé et est en lecture seule. Cliquez ici pour accéder à Référencement Design et Cie 2.0

Aller au contenu | Aller au menu | Aller à la recherche © Sébastien Billard

1/04/2009

Eye tracking : lecture en "F" ? en "E" ? ou bien en forme de cacahuète ?

Depuis quelques années, les études d'eye-tracking (aussi appelée oculométrie) suscitent énormément d'intérêt chez les webmasters et les e-marketers, qui y voient de quoi alimenter leur reflexion quant au design des pages web et à l'importance d'être positionné dans le fameux triangle d'or de Google.

On a ainsi pu voir que la lecture d'une page web pouvait suivre un chemin en "F", ou en "E". Une nouvelle étude menée par la société américaine Bream Eye semble montrer que l'oeil effectuerait également des mouvements en forme de "cacahuète" (JPG). A ce stade de l'étude, les raisons de ce mouvement ne sont pas encore claires, et des tests supplémentaires sont actuellement conduits pour expliquer ce comportement. D'autres résultats (JPG) ont d'ailleurs grandement surpris les chercheurs.

Edit : il s'agissait bien entendu d'un poisson d'avril... quoique les images présentées possèdent une saillance certaine ;)

11/06/2008

Utilisation pertinente des images sur un site web

Un récent billet sur le blog Ergonomic Garden fait le point sur la perception et l'influence des images dans la consultation d'une page web, en se basant à la fois sur des tests d'eye tracking effectués en interne et sur les résultats de l'étude Eyetrack III.

Il semblerait que sur une page web les images de petites dimensions soient en général peu regardées, sauf dans le cas d'une tâche ou l'information recherchée est susceptible d'être contenue dans l'image. Si les petites images sont peu regardées, elles ont cependant un rôle structurant, car elles attirent le regard, qui se pose alors sur les textes adjacents (Cette technique est d'ailleurs utilisée par certains MFA sous la forme de vignettes accollées aux annonces, dans le but de provoquer un plus grand nombre de clics sur les liens sponsorisés).

Les images de plus grandes dimensions seraient elles davantage regardées. Leur contenu aura cependant une influence décisive sur le comportement de l'utilisateur.

15/05/2008

Google Doctype, une encyclopédie collaborative sur le développement web

Google vient juste de lancer Google Doctype, sorte de wiki de référence sur les technologies ouvertes du web : HTML, DOM, CSS. Les articles existants ont été écrits par les googlers eux-même, mais il est possible au détenteurs d'un compte Google d'y contribuer. On y trouve pas moins de 8000 lignes de code javascript (en fait la propre librairie de Google, mise librement à disposition), ainsi que des articles intéressants, comme celui sur l'usage des balises de titres <h1>.

16/04/2008

Des statistiques sur l'utilisation des tag clouds

Dans sa présentation "Do Real People Really Use Tag Clouds?: Research To Help Separate Web 2.0’s Hits From Hype", Garrick Schmitt fournit notamment des données sur l'utilisation par les internautes des tag clouds, aussi appelés "ou nuages de mots-clés" (slide 17). Ces chiffres sont tirés de l'étude "Digital Consumer Behavior Study" (PDF) menée par Avenue A | Razorfish en juillet 2007 auprès de 475 "consommateurs connectés" sur le sol américain.

A en croire les résultats de cette étude, 88% des internautes n'utiliseraient jamais ou seulement une fois de temps en temps les tag clouds. Ils seraient même 65% à ne jamais les utiliser. Quand on les interroge sur l'utilité des nuages de mots, 68% répondent qu'ils sont la plupart du temps inutiles.

Notez que Garrick Schmitt a semble-t-il une interprétation un peu plus optimiste de ces données, puisqu'il considère que 35% utilisent les tag clouds au moins une fois de temps en temps.

Il semblerait donc qu'il y ait un décalage entre l'engouement des concepteurs de sites "web 2.0" pour ce mode de navigation et son usage par l'utilisateur moyen.

22/01/2008

Le Bad Usability Calendar 2008 est arrivé !

L'édition 2008 du désormais traditionnel calendrier consacré à l'inusabilité est disponible. Au menu : indigestion de vidéos, interfaces trop riches, abus de réseaux sociaux et web double zero :)

23/10/2007

30 concepts-clés de l'utilisabilité

Dans un article intitulé "30 Usability Issues To Be Aware Of", Smashing Magazine recense 30 concepts et définitions que toute personne s'intéressant à l'ergonomie et à l'utilisabilité devrait connaître. Ce billet en est une adaptation en français :

Le principe des 7±2 éléments

Le cerveau humain étant limité dans sa capacité à traiter l'information, celui-ci aborde la complexité en traitant l'information par blocs. Les études menées par George A. Miller tendent à montrer que notre mémoire à court-terme ne peut retenir que 5 à 9 éléments à la fois. Ce fait est souvent utilisé comme un argument pour limiter le nombre d'options de navigation d'un menu à 7. Celà dit ce principe fait débat.

La règle des 2 secondes

En vertu de ce principe, un utilisateur ne devrait pas avoir à attendre plus de 2 secondes certaines réponses du système, comme le passage d'une application à une autre, ou le lancement d'un programme. Le choix des 2 secondes est arbitraire, mais il s'agit d'un ordre de grandeur raisonnable. Ce qui est sûr, c'est que moins l'utilisateur attend, meilleure est son expérience.

La règle des 3 clics

Selon cette régle, les utilisateurs tendent à abandonner un site lorsqu'ils ne sont pas capables d'accéder à l'information ou au service en l'espace de 3 clics. Cette régle mets donc l'accent sur la necessité d'une navigation claire, d'une structuration logique, et d'une arborescence simple à appréhender.

Le chiffre de 3 clics n'est cependant pas critique : le plus important est que l'utilisateur sache où il en est, et qu'il n'ait pas l'impression de perdre le contrôle.

La loi de Pareto ou la règle des 20/80

Cette loi postule que 80% des effets viennent de 20% des causes. Bien connue du marketing, cette loi peut aussi s'appliquer en matière d'utilisabilité. Par exemple, des progrès très importants peuvent souvent être accomplis en identifiant les 20% d'utilisateurs, des activités ou des processus qui représentent 80% du profit, et en ciblant les efforts sur cette population.

Les 8 règles d'or de la conception d'interface

Suite à ses recherches sur la conception d'interfaces, Ben Shneiderman a proposé un ensemble de règles empiriques, applicables dans la plupart des systèmes interactifs. Ces règles concernent tout aussi bien les interfaces utilisateurs que les interfaces web.

  • Recherchez la cohérence avant tout.
  • Offrez des raccourcis aux utilisateurs avancés.
  • Offrez un retour d'information (feedback).
  • Concevez des dialogues avec une fin explicite.
  • Offrez des moyens simples de gestion des erreurs.
  • Permettez des retours en arrière simples.
  • Faites en sorte que l'utilisateur se sente le maître.
  • Ne sollicitez pas trop la mémoire à court-terme de l'utilisateur.

La loi de Fitts

Enonçé par Paul Fitts en 1954, ce modèle du mouvement humain prévoit que le temps nécessaires pour atteindre rapidement une zone cible est fonction de la distance et de la taille de la cible. C'est le cas par exemple d'un mouvement de souris. Jouer sur la taille et la distance de la cible peut alors influer sur l'accessibilité et l'efficacité de l'interface.

La pyramide inversée

La pyramide inversée est un mode d'écriture où le résumé d'un article est présenté dès le début de celui-ci. Cette approche est bien connue des journalistes : l'article débute donc par une conclusion, suivie d'éléments-clés et finalement d'élément de moindre importance. Les internautes recherchant une gratification immédiate, la pyramide inversée est importante aussi bien en matière d'écriture qu'en matière d'expérience utilisateur.

Satisfaction

Les utilisateurs du web ne recherchent pas la meilleure façon de résoudre leur problèmes, mais bien la résolution effective de ceux-ci. Ils ne sont pas intéressés par la solution la plus intelligente, mais aux contraire favorisent les solutions qu'ils jugent "satifaisantes", même s'il existe des solutions plus performantes sur le long terme.

Le syndrome de l'oisillon

Ce syndrome décrit la tendance naturelle des utilisateurs à adhérer au premier type d'interface expérimenté, et à juger les autres en fonction de leur degré de similarité avec le premier. La conséquence est que les utilisateurs préfèrent en général les systèmes auxquels ils sont habitués et rejettent ceux qui ne leur sont pas familiers. Ce qui posent des problèmes en matière de redesign : les utilisateurs, habitués à un design, se sentent souvent mal à l'aise lorsque une nouvelle interface est mise en place.

Banner blindness

Les internautes tendent à ignorer tout ce qui ressemble à de la publicité, et ils sont même assez bons à ce jeu. La publicité est bien perçue, mais elle est ignorée la plupart du temps. La raison en est que les utilisateurs cherchant de l'information se concentrent uniquement sur les zones où ils pensent pouvoir trouver celle-ci, c'est-à-dire les liens et les zones de texte.

Les effets Cliffhanger et Zeigarnik

L'être humain ne supporte pas l'incertitude : qu'une question lui vienne à l'esprit, il lui faut absolument une réponse. L'effet Cliffhanger, qui est fréquemment utilisé pour pimenter les intrigues, exploite cette tendance en introduisant une interruption soudaine qui laisse l'utilisateur face à révélation choc, ou à une situation non-résolue. Cet effet est aussi très souvent utilisé dans la publicité, où poser des questions ouvertes ou provocantes pousse l'utilisateur à lire une publicité ou à cliquer sur une bannière.

Découvert en 1927, l'effet Zeigarnik désigne le fait qu'une tâche a tendance à être mieux mémorisée lorsque elle est interrompue. Appliqué au web, cet effet établit une connection émotionnelle avec les lecteurs, et est extrêmement efficace en terme de marketing. Les internautes mémorisent alors mieux les publicités. Cet effet est aussi exploité pour fidéliser les utilisateurs d'un site (ex : "Abonnez-vous à notre fil RSS pour ne pas manquer la suite de l'article").

Les lois de la Gestalt

Aussi appelé "psychologie de la forme", cet ensemble de principes constitue un des fondamentaux de la conception d'interfaces.

  • Loi de proximité : lorsque nous percevons une collection d'objets, nous considérons les objets proches les uns des autres comme formant un groupe.
  • Loi de similitude : lorsque nous percevons des objets jugés similaires, nous les voyons comme formant un groupe.
  • Loi de Prägnanz : au sein de notre champ visuel, certains objets sont perçus comme étant de premier plan (les figures), tandis que les autres sont perçus comme d'arrière plan (le fond).
  • Loi de symétrie : nous concevons souvent les objets comme des formes symétriques ayant un centre.
  • Loi de bonne continuité : nous tendons naturellement à clôre ou compléter des objets qui ne sont en réalités pas clos (ex : le logo IBM)

L'effet d'autoréférence

L'autoréférence est particulièrement importante en matière d'écriture web, et peut améliorer significativement la communication entre l'auteur et le lecteur. Nous nous souvenons en effet davantage des choses lorsque elles ont un lien avec nos concepts, nos expériences. Il est donc souhaitable d'exploiter l'autoréférence quand on souhaite communiquer plus efficacement.

L'eye-tracking (ou oculométrie)

L'eye-tracking est un procédé qui consiste à enregistrer le parcours du regard sur une interface, pour ensuite dresser une carte des zones les plus vues. Cette technique permet notamment d'évaluer la facilité de navigation d'un site.

Le "pli" (fold)

Le "pli" se définit comme étant la limite inférieure en dessous de laquelle le contenu du site n'est plus visible. Cette limite est dépendante de la résolution de l'écran. La région au dessus du pli, visible sans scrolling, est appelée "page écran".

La zone fovéale

La fovéa est la partie de l'oeil humain en charge de la vision centrale. Cette vision centrale nous sert à lire, conduire, regarder la télévision, et à accomplir toutes les activités où le besoin de détail est très important. La zone fovéale désigne la zone du regard où le maximum de détail peut être perçu. cette zone occupe un angle de vision d'environ 2 degrés.

Les annotations

L'annotation est une action automatique fournissant des informations sur la destination d'un lien ou la fonction d'un contrôle. Concernant les liens, une annotation peut être délivrée grâce à l'attribut "title". Les annotations participent à l'usabilité d'un site, en permettant aux utilisateurs de savoir précisément où ils vont.

Dégradation élégante

La dégradation élégante désigne la capacité d'un site ou d'une page à fournir une information ou un service même si certains de ses composants ne peuvent être utilisés. En pratique, cela revient à s'assurer que le site reste utilisable quelle que soit la configuration de l'utilisateur.

La granularité

La granularité mesure à quel degré un ensemble complexe d'informations a été réduit en un nombre plus petit d'éléments. La granularité de l'information peut être adapté en fonction du public visé.

Les zones sensibles

Les zones sensibles sont des zones cliquables qui changent de forme ou d'apparence une fois survolées ou cliquées. Ces zones utilisent souvent la propriété CSS ":focus".

La lisibilité perceptive

La lisibilité perceptive (legibility) mesure la facilité d'un texte à être lu. Elle ne s'intéresse qu'à la perception visuelle, et non à la compréhension du texte.

La navigation en "démineur"

Ce terme (minesweeping) désigne un mode de navigation à l'aveugle où l'utilisateur promène sa souris sur la page, en utilisant le changement d'apparence du curseur pour détecter les liens. Un tel comportement indique la plupart du temps un défaut de conception de l'interface.

La navigation "mystère"

La "navigation mystère" (mystery meat navigation) est un terme décrivant des interfaces de navigation difficilement utilisables du fait que les destinations des liens ne sont pas clairement identifiables. C'est souvent le cas des éléments de navigation à base d'icônes non-standards.

La cohérence visuelle

Ce concept décrit la cohérence de l'agencement physique du site (places du logo, des éléments de navigation, typographie...). La cohérence est essentielle pour un repérage et une navigation efficaces.

L'enrichissement progressif

L'enrichissement progressif est une stratégie de conception d'interfaces où les fonctionnalités sont ajoutées par couches. A la couche de base, accessible à tous les navigateurs, sont ajoutées des fonctionnalités supplémentaires pour les utilisateurs de navigateurs modernes. L'avantage principal de ce mode de conception est l'accessibilité des interfaces ainsi produites.

La lisibilité cognitive

La lisibilité cognitive (readability) mesure la facilité d'un texte à être compris, en se basant sur la complexité des phrases et sur le vocabulaire employé. Le plus souvent, ce type de lisibilité se mesure en terme d'âge ou d'années d'étude nécessaires pour comprendre le texte. La lisibilité cognitive est à distinguer de la lisibilité perceptive.

La conception centrée utilisateur

La conception centrée utilisateur (CCU) est un mode de conception où les utilisateurs, leurs besoins, leurs interêts, et leurs comportements définissent les fondations d'un site en termes de structure, de navigation, et d'information. La CCU est aujourd'hui devenue un standard, en particulier grâce à l'essor du web 2.0 où le contenu est généré pour une large part par les utilisateurs.

La vigilance

La vigilance, ou état de veille, est la capacité à rester attentif lors de l'accomplissement de tâches longues, monotones ou répétitives, comme la relecture de documents, la gestion d'emplois du temps, la sauvegarde régulière de fichiers etc. Dans les applications web modernes, les tâches de cet ordre sont automatisées et gérées en arrière-plan, ce qui améliore l'usabilité puisque la vigilance des utilisateurs est limitée.

Le design intuitif (Walk-Up-And-Use design)

Le design d'une interface est dit intuitif quand un utilisateur est capable d'utiliser l'interface dès la première fois, sans aucune introduction ou formation.

Les Wireframes

Le wireframe, ou "maquette fonctionnelle", est un squelette qui décrit les idées, les concepts et la structure d'une interface ou d'un site (exemples ici et ). Les wireframes peuvent être utilisés pour présenter un projet de site aux parties prenantes. Le design d'un wireframe est en général très sommaire, et il s'agit même fréquement de simples croquis (JPG) réalisés sur papier.

16/07/2007

Une interview où l'on reparle de contenu web

A lire sur Mots & Co, une interview très intéressante et pleine de bons mots de Frédéric Rauss, conseiller en communication et rédaction web à l'Ecole Polytechnique de Lausanne, et auteur d'un mini-guide sur l'écriture web (PDF) : "(...) que de ressources mobilisées, humaines, techniques, financières ! Que d'heures de réunions passées à discuter pour élaborer une vision du site (...) Mais lorsqu'on en arrive à l'écriture des textes ou aux choix ergonomiques, le travail s'affaiblit. La pointe de l'iceberg est effritée. Comme si, l'élaboration technique du site avait épuisé les énergies et qu'au moment de faire les derniers mètres, on abdique".

Il est vrai que le rédactionnel reste malheureusement le parent pauvre de nombreux projets web : pour le graphiste il est cette chose barbare et morne comme un Lorem Ipsum, qui échappe à son contrôle, puisque non manipulable par une courbe de bezier. Pour le programmeur, le contenu n'est jamais qu'une matière première à stocker dans une base de données. Stocker des chiffres ou des mots, ça ne fait pas grande difference. Pour le client, souvent seul en charge de son contenu, celui-ci est parfois vu comme important. Mais n'ayant aucune expérience en la matière, nourri au parler moche et au langage zombie, obsédé par l'aspect visuel de son site et étant persuadé que l'aura de sa marque suffira à convaincre le visiteur, il est souvent désarmé pour créer du contenu de qualité...

25/06/2007

K-html, éditeur HTML léger et universel (ou presque)

A découvrir : K-html est une petite application permettant de transformer n'importe quel éditeur de texte en éditeur (X)HTML, grâce à des raccourcis clavier. Par exemple la combinaison AltGr+Tab transforme immédiatement le mot tapé en une balise. "div" suivi de cette combinaison devient aussitôt <div></div>. D'autres fonctions sont également bien utiles, comme la création de pages XHTML vides à l'aide de Verr.Maj+Espace ou la fermeture automatique des guillemets et parenthèses. A noter que K-html fonctionne aussi sur les formulaires web, ce qui peut en faire un éditeur de code pour blogs et CMS.

Voila donc semble-t-il une solution d'édition de code HTML presque universelle (une fois assimilés les différents raccourcis), puisque fonctionnant sur tout système d'édition de texte. Attention par contre à désactiver le programme lorsque le travail sur le code est terminé pour retrouver un comportement normal des touches...

30/04/2007

Observez le comportement de vos visiteurs avec RobotReplay

Des applications telles que Crazy Egg ou ClickHeat permettaient déjà de cartographier les clics des utilisateurs sur un site. RobotReplay va encore plus loin, en enregistrant les actions de la souris et les défilements d'écran, et en permettant de suivre l'utilisateur à travers le site. Tout se passe donc comme si l'on suivait la session de l'utilisateur par dessus son épaule !

L'outil s'avère très intéressant. En observant les différentes sessions, on remarque par exemple plusieurs types de comportements très différents : certaines consultations sont très linéaires, le curseur de la souris étant parfois même utilisé comme un stylet pour suivre les lignes. Au contraire, certaines consultations sont très destructurées en apparence, l'utilisateur scrollant tantôt vers le bas, tantôt vers le haut, sautant sur une page pour revenir très rapidement à la précedente...

Quelques demos de l'outil visibles sur YouTube

12/01/2007

Interview avec Rafael Mizrahi (Feng-GUI)

La présentation de ViewFinder il y a 2 jours avait soulevé quelques commentaires et interrogations. Rafael Mizrahi, directeur de la technologie chez Feng-GUI et créateur de l'algorithme a gentiment accepté de répondre à mes questions.

Sébastien Billard : Bonjour Rafael, pourriez-vous vous présenter aux lecteurs ?

Rafael Mizrahi : Je travaille dans l'industrie informatique depuis plus de 16 ans. Jouant de la musique et faisant de la peinture, j'ai toujours eu une forte sensibilité pour l'harmonie. Ces deux aspects de ma personnalité m'ont naturellement conduit à l'étude des interfaces utilisateurs, une branche de la recherche informatique.

SB : Quand avez vous commencé à développer cet algorithme ?

RM : J'ai mené des recherches sur la composition dynamique et enseigné durant les 10 dernières années. Mais l'implémentation de ViewFinder à proprement parler n'a débuté qu'il y a 2 ans environ.

SB : Quelles recherches avez-vous utilisé pour mettre au point ViewFinder ?

RM : La question nous est souvent posée, c'est pourquoi nous allons ajouter plus d'informations sur le site à ce sujet. Mais si je devais résumer en un seul mot, je dirai : la saillance (NdT : c'est à dire la capacité d'un élément à ressortir prioritairement lors de la perception visuelle d'une scène, au point de prendre une importance cognitive particulière. Plus d'info dans ce Powerpoint).

L'algorithme ViewFinder crée une carte de saillance du site. Les cartes de saillance ont été développées durant les 25 dernières années par les laboratoires de recherche sur la vision numérique. L'algorithme a été développé puis comparé aux résultats expérimentaux de recherche sur les mouvements du regard, de façon à représenter fidèlement la façon dont les humains sont attirés par les visuels.

SB : Votre algorithme analyse-t-il seulement les contrastes, ou prend-il en compte d'autres stimuli ou comportements ?

RM : ViewFinder prend en compte les contrastes, mais aussi les couleurs, les mouvements, les textures, les flux ainsi que d'autres critères, dans le but de se comporter comme un oeil et un cerveau (modèle "bottom-up", de l'oeil vers le cerveau). Nous travaillons également à inclure dans l'algorithme des capacités de détection des textes et des visages, qui sont des éléments clés de l'attention chez les humains (modèle "top-down").

SB : Qu'entendez-vous exactement par "flux" ?

RM : Qu'il s'agisse de flux, de mouvements, de textures, tout cela se rapport aux motifs que l'on peut retrouver dans les images. Par exemple, prenez une voiture de petite taille (disons 2% de la surface de l'image) suivant une route à flanc de montagne. Les algorithme de détection du mouvement inclus dans ViewFinder peuvent identifier cette voiture, car elle brise la fluidité de la texture de la montagne.

SB : Et concernant le texte, parlez-vous d'analyser le sens des textes, ou seulement leur apparence ?

RM : La détection des textes (en fait leur localisation) ainsi que celle des visages sont utilisées pour déterminer les endroits affichant du texte et des visages. Il s'agit d'algorithmes de classification, qui localisent des motifs, mais n'essayent pas de les comparer à une base de données biométrique ou d'effectuer une reconnaissance de caractères. Il s'agit donc juste de savoir qu'il y a quelque chose d'intéressant à un endroit donné.

SB : Votre outil suggère souvent une attention visuelle portée aux bordures, alors que ces zones sont vides. S'agit-il d'un bug ? d'un artefact ?

Effectivement, un certain nombre de personnes nous l'ont fait remarquer, et nous pensons fournir des exemples et expliquer ces résultats. Ce n'est pas un bug. Bien souvent il s'agit de régions présentant un fort contraste avec la zone intérieure, et ces zones attirent votre attention, même si c'est de façon subliminale et qu'elles ne contiennent rien de significatif. Comme le souligne l'article Psychologie de la forme et symétrie dynamique, "le rythme est au temps ce que la symétrie est à l'espace".

SB : Votre outil n'analyse pas le sens, c'est-à-dire le signifié des éléments. Dans quelle mesure la teneur des textes ou des images affecte-t-elle l'attention visuelle ? L'attention visuelle dépend-elle de ce qui est représenté, ou dépend-elle uniquement de la façon dont les choses sont représentées ?

RM : L'attention peut aussi bien être réflexive, impulsive ("bottom-up") que cognitive, liée au contexte ("top-down"). Elle dépend à la fois du "comment" et du "quoi".

Prenez cette exemple : vous conduisez la nuit, sur une route circulaire. Sur cette route, une voiture est garée, avec ses clignotants allumés. Votre attention est attirée par ces lumière qui s'allument et s'éteignent, une fois ("bottom-up"). Vous continuez votre route, et commencez à ignorer ces lumières ("top-down") parce que vous savez que cette voiture n'aura plus d'influence sur vous. C'est juste une voiture en train de se garer.

SB : Quels sont les projets et développements futurs ?

RM : Notre société Feng-Gui a pour spécialité la perception des visuels, qu'il s'agisse d'attention ou d'attraction. Notre business model est de développer différentes applications de Viewfinder, pour ensuite les intégrer dans les produits d'entreprises leaders telles que Apple, Adobe, Google, Yahoo, etc.

10/01/2007

Un simulateur d'eye-tracking pour tester ses interfaces

Découvert via le blog d'Eliaz, ViewFinder Heatmap est un service en ligne simulant l'eye-tracking (ou oculométrie) d'une page web.

Il ne s'agit pas de réel tests utilisateurs, mais d'une modélisation du comportement de ceux-ci, basées sur des études en neurosciences portant sur l'attention, la perception et la cognition.

Ce que l'outil permet de prédire n'est donc pas tant ce qui sera réellement vu par les utilisateurs (ce qui dépend du contexte d'utilisation) que le potentiel d'attention visuelle des différents éléments de la page.

A lire également : l'évaluation des documents par oculométrie (PDF) par Jean Caelen, directeur de recherche au CNRS

ClickHeat, un script PHP de cartographie des clics

Développé par Labsmedia, ClickHeat est un script PHP vous permettant de cartographier les clics des utilisateurs sur vos pages web, de façon similaire à Crazy Egg. Le script est disponible sous licence Open Souce.

4/01/2007

Quel comportement de l'utilisateur face au scrolling ?

On a longtemps recommandé de minimiser voir d'éviter les scrolls verticaux (aussi appelés ascenseurs), bien qu'il aient pourtant été adoptés assez rapidement par les utilisateurs (Voir par exemple cette alerte de Jakob Nielsen de 1999).

Une étude menée récemment par ClickTale apporte des statistiques intéressantes sur le comportement de l'utilisateurs face aux scrolls :

  • 91% des pages consultées comprendraient un ascenseur vertical.
  • 76% des pages comportant un ascenseur vertical auraient été scrollées.
  • 22% des pages comportant un ascenseur vertical auraient été scrollées intégralement (jusqu'au pied de page).

22% peut paraître peu, mais si l'on observe la distribution de la part des pages effectivement scrollées, on s'aperçoit que la part des utilisateurs ayant scrollé moins de 25% des pages est finalement réduite. Et si l'on observe la distribution des utilisateurs ayant scrollé intégralement les pages (c'est-à-dire scanné ou lu), on ne peut que constater que les utilisateurs n'hésitent pas à scroller de très longues pages, de près de 10000 pixels de haut.

Ces données semblent donc indiquer que des pages longues de 2 ou 3 écrans (éventuellement plus) sont admissibles si le contenu le justifie, à condition que l'utilisateur puisse juger de la teneur du contenu dès le premier écran. On peut aussi penser, comme le souligne ClickTale, qu'il y a finalement peu de bénéfice à compacter les pages pour gagner de l'espace. Mieux vaut travailler sur la lisibilité des textes, en jouant par exemple justement sur les espaces, ainsi que sur les tailles de polices et les interlignes.

5/12/2006

Firebug : l'extension ultime pour débugger un site

La barre d'outil Web Developer permettait déjà d'éditer à la volée le code HTML et CSS d'une page.

Firebug va bien plus loin : Les codes HTML, CSS, Javascript, ainsi que le DOM sont éditables, et bénéficient de la coloration syntaxique. De nombreuses fonctionnalités d'aide au debuggage et à l'optimisation sont disponibles : par exemple, un carré coloré apparaît au survol d'un code couleur dans la fenêtre d'édition des feuilles de style qui affiche la couleur spécifiée. Les éléments blocs sont également encadrés quand leur code est selectionné dans la fenêtre d'édition du code HTML. Autre fonctionnalité intéressante : le temps de chargement des différents éléments composant la page est analysé, ce qui permet d'identifier les causes d'un chargement trop long.

L'essayer c'est l'adopter ;)

19/10/2006

Lisibilité, contrastes et typographie

Peter Gabor, auteur du blog Design et Typo, revient sur un thème que j'avais abordé il y a quelques temps, à savoir la relation entre contraste et lisibilité.

Qu'il s'agisse de papier ou de lecture à l'écran, les conclusions sont les mêmes : un contraste négatif (du blanc au noir) est favorable, et il faut éviter les contrastes trop importants, qui fatiguent inutilement les yeux. Peter fait également remarquer que la variation de confort suite à une variation du contraste est aussi fonction de la police utilisée.

1 2 3 >