Image de fond

Les webmasters ont appris a être raisonnables avec les fonds. L'effet est certainement très apprécié dans un premier temps, il devient vite un inconfort à la lecture. Du côté des logiciels, il y a toujours eu la possibilité de modifier l'apparence. Il suffit de se souvenir du logiciel de lecture audio Winamp. Fort de son succès, les utilisateurs voulaient personnaliser leur outil. Une façon aussi de se distinguer des autres. Des nombreuses skin (habillage) sont apparues rapidement. La communauté proposait ses propres créations mais difficile d'avoir une interface jolie sans nuire à la lisibilité.

J'ai toujours pensé qu'il ne s'agissait que d'un gadget. Pourtant, la pratique montre tout le contraire. La personnalisation (la customisation) plaît toujours autant et on la trouve dans de nombreuses applications.

Boîte de dialogue Windows Live Messenger avec un fond d'écran

Même Google s'y est mis ! Le plus étonnant est de retrouver ce lien sur la page d'accueil. On suppose donc que Google répond à une demande forte de ses utilisateurs, au point d'encombrer - un peu plus - sa page. Même si peu de gens cliquent sur ces liens, l'image en fond masque pratiquement le texte.

Capture Google et un fond d'images (24/06/10)

Semi-transparence

Tout comme les images en fond, la semi-transparence n'est pas un concept novateur. Ce gadget était déjà installé dans d'autres logiciels, notamment la messagerie ICQ (les plus jeunes ne s'en souvient pas). Considéré comme un gadget, il est longtemps resté enfouis dans les options. Depuis peu, il est remis au goût du jour. On aime ou on n'aime pas, tel n'est pas le propos. Le tout est de se demander si l'utilisateur y gagne en lisibilité.

Transparence sous Windows 7

Image de fond et semi-transparence

Mélangez transparence et fond d'images et vous obtenez... les personas de Firefox ! Depuis sa version 3.6, la navigateur se targue de proposer un grand nombre de ces bandeaux incrustés dans le haut du navigateur. Contrairement aux thèmes, les boutons ne sont pas redessinés, les menus restent parfaitement identiques ainsi que les boîtes de dialogue. Il s'agit d'une vulgaire simple incrustation, et c'est sans doute là où le bas blesse. Comment intégrer tout un catalogue d'images sans altérer la lisibilité du texte ? Tout ce bruit de fond ne profite pas au message, bien au contraire. Pour cette raison, j'ai gardé le thème classique de base classé dans la catégorie de contraste élevé. C'est moins sexy mais au moins c'est plus clair.

Capture du bandeau de Firefox et Toy Story en personas

Antoine Luu (conférence Paris web)

Le eytracking (oculométrie) ne date pas d'hier et ne se limite pas à la vision sur écran. Le head mounted est un casque positionné sur la tête et muni de lunette. Le sujet se déplace dans un environnement (un supermarché par exemple) et son champs oculaire est enregistré en permanence. Évidemment, le cadre mais surtout l'équipement encombrant n'incite pas à un comportement naturel.

Le remote eye tracking est plus sophistiqué. Sur certains modèles, un boîtier est positionné près de l'écran. Sur les eye trackers de dernière génération, tout l'appareillage est intégré à l'écran. Cela donne une totale liberté du volontaire sans aucune gêne. L'outil est précis au centimètre près et fonctionne par la projection d'infrarouges réfléchis par la pupille. Le logiciel enregistre différents paramètres: temps de fixation du regard sur une zone donnée, ordre du parcours visuel sur une page…

L'appareil complet coûte près de 30 000 euros à l'achat ou 1 000 euros par mois à la location. Autant dire, qu'il se destine prioritairement aux sociétés de grande taille. Cela peut paraitre un investissement énorme mais souvent ces entreprises gèrent de nombreux sites web. Aussi, l'outil seul n'a pas beaucoup d'intérêt. Sans une réflexion globale et un encadrement adéquat, les interprétations risquent bien de manquer de fiabilité. Par exemple, le cobaye soumis à une demande particulière a tendance a occulter toute forme de publicité pour se concentrer dans sa tâche. Cela ne veut pas dire que le positionnement des annonces est inefficace.

Moniteur eytracking (conférence Paris web)

Après l'installation du moniteur, une calibration est nécessaire pour capter et enregistrer le positionnement des pupilles. L'enregistrement peut commencer et le sujet est amené à exécuter certaines tâches définies par l'assistant. In fine, le logiciel fournit des statistiques plus ou moins détaillées dont les fameuses « cartes de chaleur ».

Je note également le mouse tracking. Ce dernier enregistre les déplacements de la souris. C'est un excellent complémentaire à l'eye tracking. Contrairement à ce que l'on pourrait croire, le pointeur se déplace très peu. En réalité, tout le travail est réalisé par les yeux. La souris n'intervient que quand un choix a été défini.

Selon Antoine, l'eyetracking a un avenir très prometteur et notamment dans le jeu vidéo. Il apporte déjà un bénéfice énorme en réponse à certains handicaps: alzheimer, autisme, handicap moteur. Néanmoins, une meilleure maîtrise du fonctionnement des comportements humains intéresse grandement les grandes entreprises commerciales et pose de nombreuses questions sur les limites de l'outil.

Sur le web, les tags permettent une navigation transversale à travers tout le site. Le nuage donne une vue d'ensemble des différentes thématiques et de leur popularité. Cette popularité est visible par une variation des tailles de caractère. Plus un mot-clé est grand, plus il a une forte présence sur le site. Or, cette distinction de mise en forme n'a rien d'intuitif. Et pour cause, on mélange ici la forme et le fond.

Quand il ne s'agit pas d'une création graphique, l'utilisation des tailles de caractère se fait pour mettre un contenu textuel en valeur, pour lui assurer une meilleure visibilité. Autrement dit, plus c'est grand et plus ça se voit. Avec le système de tag-cloud, la taille des caractères est en rapport avec sa popularité dans le contenu du site. Quand tout ces mots se retrouvent classés par ordre alphabétique, ça nous fait une belle soupe de mots-clés. Ce désordre est d'ailleurs un élément clé de reconnaissance.

Capture www.flickr.com/photos/tags

Et pour ajouter un peu plus de confusion, certains mélangent la taille, les couleurs et la mise en exergue. Des couleurs fantaisistes sans aucune harmonie, ni cohérence. Bonne chance pour s'y retrouver.

Capture fr.tag-clouds.com

Heureusement, dans l'exemple d'Arte, une gamme de couleurs tirées d'un dégradé permettent de faire le rapprochement entre la taille et sa couleur. Une teinte très contrastée avec le fond pour les mots populaires et inversement pour les mots sans popularité.

Capture plus7.arte.tv

J'observe également une sélection dans le choix des mots-clés. Un blog riche en articles et présent sur le web depuis longtemps possède un grand nombre de tags. Il est inimaginable de les afficher tous. Il faut sabrer dans les mots. Je n'ai pas encore découvert comment se faisait cette sélection mais elle décridibilise encore un peu plus l'usage des nuages.

Laurent Bourrelly a choisi une disposition dynamique en Flash. Les mots s'entremêlent et donne un résultat confus et déroutant. Pour bien comprendre, il faut passer la souris au-dessus des mots-clé pour déclencher l'animation et comprendre le principe.

Aussi, il faudrait se poser la question en terme d'accessibilité. Je ne suis pas certain que la variation de taille ait une influence sur les lecteurs vocaux. L'utilisation des balises de mise en exergue (em, strong) serait plus judicieuse mais les variations sont nettement plus restreintes.

Bref, ce rassemblement de mots-clés n'est pas suffisamment intuitif et mériterait d'être amélioré: la présence d'un titre « Recherche par mots-clé », l'ajout d'un title dans le lien pour signifier le nombre de références, le classement par ordre d'importance...

À propos de l'auteur, je n'avais jamais entendu parlé d'Isabelle Canivet. Enfin si, indirectement via son site web dont j'aime beaucoup l'adresse mais que j'ai déserté rapidement. À mon sens, c'est tout sauf un bon exemple: aucune accroche visuelle sur la page d'accueil, des liens en nombre et rien ne se détache réellement pour orienter le visiteur. Et surtout, une sensation de rester sur ma faim. Non pas que les articles sont inintéressants mais ils sont boostés à la liste à puce et à la graisse. Le même problème se pose sur d'autres sites comme www.ecrirepourleweb.com. À force d'user des techniques d'écriture, on fini par tuer le contenu. Le mieux est l'ennemi du bien.

Capture www.action-redaction.com

Capture www.ecrirepourleweb.com

Je suis sans doute de la vieille école, mais je suis toujours attaché à mes paragraphes. Vous savez, ces blocs de textes mis à mal par ces donneurs de leçons pour qui la lecture en ligne s'oppose à la lecture papier. C'est sans doute le reflet de notre société de consommation. On ne prend plus le temps pour rien. Cette attitude est d'ailleurs valorisée où il est de bon ton d'être « overbooké ». Paradoxalement, la curiosité est un(e) qualité/défaut de l'hyperactif. Il veut tout savoir, tout connaître en un minimum de temps. Et les formateurs en web-marketing rédaction-web l'ont bien compris. La contrainte technique du support (il est moins agréable de lire sur écran) a pratiquement disparue au profit des caractéristiques comportementales du lecteur-consommateur. L'internaute est pressé et n'hésitera pas à déserter dans ce vaste monde numérique de l'opulence. Vous avez 30 secondes pour plaire ! Autant dire que la pression est énorme et le formatage de l'information inévitable.

Même si je comprends bien le besoin de concision, il y a certainement un juste milieu à trouver entre la consommation rapide et l'information plus détaillée. Une fois trouvée, l'utilisateur est capable de se poser et lire un contenu plus ou moins long. Le rôle du webmaster sera d'y ajouter une dynamique de lecture via différentes techniques de mise en page. Ce comportement de lecture active est-il si minoritaire au point de généraliser des concepts en faveur des consommateurs pressés ?

Les sites perdent des clients non pas parce qu'ils sont inintéressants, mais tout simplement parce qu'ils ne sont pas lus. Or il ne suffit pas d'écrire bien. La rédaction web doit s'inscrire dans une logique de retour sur investissement sur un support de consommation rapide — votre site a 30 secondes pour agir. Fast service information, fast read, fast left — vite renseigné, vite lu, vite quitté....

Isabelle Canivet — Bien rédiger pour le web

Les liens visités changent de couleur

Les utilisateurs ont souvent la mémoire courte, le clic facile et le surf rapide. Un formatage adapté des liens permet de se retrouver aisément dans la navigation. Les liens doivent se distingués du texte. De la même manière, les liens visités sont des indicateurs visuels importants pour se situer dans l'architecture. Jakob Nielsen dénonce depuis toujours cette absence de distinction entre les liens et les liens visités. Il qualifie ce problème de grave et récurant sur la plupart des sites. Malgré sa facilité de mise en place, ce basique d'ergonomie web est majoritairement sous exploité. Seule exception à la règle: les zones régulièrement visitées comme dans le cas d'un menu de navigation.

Capture Pompage.net — Les liens cliqués sont atténués par rapport aux autres

Les ergonomes conseillent aux webmasters de se normaliser aux couleurs par défaut: liens en bleu et liens visités en violet. Même si ces couleurs sont devenues les teintes par excellence de l'hypertexte, il ne faut pas être intégriste ! À l'origine, la colorisation du texte cliquable sert à le distinguer du texte courant. Dans cette même optique, le recours aux feuilles de style rempli tout à fait ce rôle. La personnalisation de l'hypertexte (au niveau des couleurs et du formatage) profite à l'harmonie de la charte graphique du site.

Pour ce qui est de la feuille de style, pensez à respecter l'ordre d'apparition des déclarations. Un moyen mnémotechnique: LoVe Fuck HAte pour Link, Visited, Focus, Hover et Active.

a {
     color: blue;
}
a:link {
     color: blue;
}
a:visited {
     color: purple;
}
a:focus {
     color: green;
}
a:hover {
     color: green;
}
a:active {
     color: red;
}

Le soulignement réservé aux liens

À la différence d'un document écrit, le soulignement doit être réservé exclusivement aux liens hypertextes. C'est devenu une convention respectée de manière générale par les concepteurs. Le soulignement est un reliquat des machines à écrire. C'était la seule façon de mettre un texte en évidence.

Ouvrir ses liens dans la même fenêtre

De nombreux concepteurs décident d'ouvrir les liens externes dans une nouvelle page. L'idée est de différencier les sites externes et de conserver la page source en arrière-plan. Cette manœuvre brise la logique de navigation, basée sur le passage d'une page à l'autre au sein d'une même fenêtre ! Que dire aussi des personnes qui n'ont pas compris qu'il s'agissait de l'ouverture d'une nouvelle page et qui cherchent à revenir sur la précédente grâce au bouton retour (back) du navigateur ?

Signalons au passage que le code HTML pour ouvrir une page dans une nouvelle fenêtre (target="_blank") n'est pas conforme en (X)HTML strict. Si le sujet vous intéresse, Éric Daspet a largement approfondi la question: « Liens et nouvelle fenêtre » (Cybercodeur).

En plus de ces arguments, les navigateurs actuels ont tous intégré un système d'onglet qui permet d'ouvrir un lien en arrière-plan. Dans Firefox, un clic milieu sur la molette de la souris ouvre le lien dans la même fenêtre mais dans un onglet en arrière-plan. Le visiteur est seul maître à bord pour décider et gérer son arrangement des fenêtres. Internet Explorer a également adopté cette solution tout comme Opera ou Chrome pour ne citer que ceux là.

Un libellé efficace

L'internaute survole les pages en diagonale et son œil est attiré par les liens mis en exergue. Un lien « cliquez ici » ne lui donne aucune information de ce qui l'attend en cliquant dessus. Il est obligé de lire le contexte pour comprendre. Et ce qui est bon pour l'ergonomie est bon pour le référencement. Un lien correctement formulé et concis est beaucoup plus pertinent pour les moteurs de recherche.

Encourager le lecteur a agir

Le bouton call to action a pour fonction d'attirer l'internaute, le guider dans une direction et espérer de lui une action. Il s'agit de la souscription à une newsletter, le lancement d'une démo, la participation à un don, le téléchargement, etc. Ces boutons mis en exergue doivent se situer idéalement au-dessus du pli [⁴].

Capture Apple.com/fr/itunes

Une large zone de clic

La loi de Fitts est un concept assez simple en soi: le temps nécessaire pour cliquer sur une cible est inversement proportionnel à la taille de la cible. Autrement dit, plus la cible est petite plus on mettra du temps à cliquer dessus. Dans la page des résultats Google, ce dernier affiche des numéros de pages en bas de la recherche. Le risque d'erreur est inversement proportionnel à la zone de clic. Le bouton suivant atténue ce risque.

Une description facultative

Les liens peuvent être accompagnés d'une brève description ou l'URL grâce à l'attribut title. Lorsque la souris s'attarde sur le lien, la plupart des navigateurs affichent une info-bulle. Cette information est précieuse pour les lecteurs d'écran. Pensez-y.

<a href="http://www.tutoweb.be/" title="Tutoriels pour le web">Tutoweb</a>

Des liens sur les images

Les images permettent une plus grande créativité dans la forme. Par contre, elles sont plus lourdes à charger, elles n'indiquent pas un lien visité, elles sont insensibles à l'agrandissement de police et la feuille de style personnelle du visiteur n'a aucun d'effet dessus. Indiquez toujours la valeur de l'attribut alt au cas où les images ne peuvent être affichées par le navigateur. Évitez les images animées souvent associées à de la publicité.

La langue de la page cible

En général, une page en langue française fournit des liens externes dans la même langue. Dans certains cas, la langue de la page est différente. Il est intéressant de préciser ce changement dans le code HTML grâce à l'attribut hreflang suivi de l'abréviation de la langue. Cet ajout est totalement transparent pour le visiteur. Pour afficher cette information en clair sur la page, il suffit d'avoir recours à une feuille de style. Dans l'exemple ci-dessous, le contenu de hreflang sera mis entre crochets à la suite du lien.

Dans la feuille de style:

a[hreflang]:after {
     content: " [" attr(hreflang) "] ";
}

Dans le code source:

<a href="http://www.google.com/" hreflang="en">Google</a>

Ce soucis du détail est bien intégré par les robots mais risque de dérouter plus d'un visiteur ignorant cette pratique. Le procédé est loin d'être généralisé et encore moins intuitif. Le quidam aura du mal à deviner la signification d'une suite de deux lettres accolée à un lien. Dans le meilleur des cas, les habitués auront compris la signification de [en] pour l'anglais mais savez-vous que le code [hr] désigne le croate ? [¹]

Afin de remédier à ce problème, on a vu apparaître des petits drapeaux en lieu et place de l'abréviation. Ainsi, une page cible en anglais se voyait doté d'un drapeau... du Royaume-Uni. Cette représentation présente un risque de confusion et parfois de friction. Un article écrit par un Américain, un Canadien, un Australien - ou pire - un Irlandais, se verrait doté du même drapeau. Aussi, êtes-vous sûr que vos lecteurs connaissent tous les drapeaux ?

Capture Ergologique.com

Dans les deux cas, l'idée part d'une bonne intention, mais elle est loin d'être comprise dans la pratique de manière intuitive.

Les liens dans le corps du texte ou en annexes

Est-il plus pertinent d'indiquer les liens hypertextes directement dans le contenu éditorial ou plutôt en fin d'article ? Dans le premier cas, les liens sont directement accessibles mais peuvent rompre la lecture. Un bien, un mal ? difficile de répondre dans la mesure où rien n'empêche l'internaute de revenir en arrière, ouvrir le lien dans un onglet ou une nouvelle fenêtre.

Dans la pratique, la plupart des sites intègrent directement les liens dans le corps du texte en laissant la liberté au visiteur de faire une escapade ou non. Certains éditeurs de contenu, comme le Journal du Net, optent pour une séparation entre le texte et les liens.

Capture Journaldunet.com

La chasse aux liens brisés

Le serveur ne trouve pas votre page (page renommée, déplacée, renommée) et renvoie le message indigeste d'une erreur 404. Pensez à élaborer une page personnalisée à cet effet [²]. Au-delà de deux erreurs de ce type, n'espérez plus revoir votre visiteur ! Faites la chasse aux liens morts et surtout de la veille [³].

Des liens sans hypertexte

Les pages web sont reliées entre elles par des liens. Chaque lien permet de prolonger la lecture. À son tour, cette page redirige vers d'autres liens externes. De cette manière, l'essence même du web est le maillage de toutes ces pages entre elles. Il est regrettable de constater que certains ne l'entendent pas de cette oreille sous prétexte de maîtriser les liens entrants. En lisant les conditions d'utilisation de Nespresso.com, on peut lire: « Toute création d'hyperliens avec nos sites est interdite sans accord préalable écrit de Nespresso ». Pas certain que cette mention farfelue puisse être défendue devant les tribunaux. Quoiqu'il en soit, des auteurs prennent leurs précautions en retirant l'hypertexte tout en gardant le libellé. Résultat des courses, l'internaute se trouve devant un texte inactif sans comprendre les raisons de ce choix.

Une alerte pour les liens externes

On dit du web qu'il ressemble à une immense toile d'araignée car le visiteur passe d'une page à une autre pour entreprendre des chemins divers et variés. Selon son expérience, il juge de la pertinence d'un lien externe sur un site. Généralement, ce lien est offert par le webmaster. Ce dernier à tout intérêt de fournir une ressource vérifiée, fiable et pertinente. Il en va de sa crédibilité et de sa responsabilité.

Par contre, des liens peuvent être publiés par la communauté des internautes. C'est le cas des commentaires sur les blogs, des messages dans les forums ou des articles sur les réseaux sociaux. Dans la plupart des cas, la non-responsabilité du contenu tiré des liens externes est reprise dans les informations légales du site. Dans certains cas, l'éditeur prévoit un système d'alerte automatique pour prévenir le lecteur. Cette précaution (avant tout d'ordre juridique) est lourde dans la pratique pour le lecteur. Elle lance - a priori - un effet de suspicion. Ce rejet de responsabilité crée un climat de méfiance et nuit à la navigation.

Capture Forums.battle.net

Capture Facebook.com (05/07/10)

[¹] « Liste des codes ISO 639-1 » (Wikipédia)
[²] « Personnaliser une erreur 404 »
[³] « Débusquer les liens morts »
[⁴] « La notion de fold en ergonomie »

Les participants sont amenés à surfer librement sur un site donné ou a effectuer des tâches spécifiques. Ces tests ont une valeur toute relative. L'utilisateur ne choisi pas les sites qu'il désire consulter. Il a tendance à abandonner moins rapidement pour réaliser ce qu'on lui a demandé. Il est également conscient qu'il est utilisé comme cobaye et que chacun de ses faits et gestes est enregistré. Cet état d'esprit a tendance à influencer son comportement et à dénaturer ses interventions.

Le résultat final n'est pas une solution miracle aux problèmes d'ergonomie. Elle doit être soumise à des interprétations. Celles-ci peuvent également être erronées. Une zone chaude n'est pas forcément une zone intéressante pour le lecteur. Peut-être ne comprend-il pas le mot, la signification est trop évasive et le clic tardif. La soumission du testeur à une tâche et sa volonté de bien faire desservent également le résultat final. La non verbalisation est indispensable pour ne pas dénaturer le comportement, mais elle réduit sensiblement la fiabilité du test. Enfin, la soumission à une mission précise et la volonté de bien faire sont défavorables à une véritable mise en situation.

L'eyetracking est un procédé coûteux avec ses limites. Il n'est qu'un outil parmi d'autres. Les tests utilisateurs sont certainement moins onéreux et les résultats sont plus fiables. Il faut donc relativiser la portée de cet outil et prendre les résultats avec des pincettes. Cependant, il existe certaines constances:

• les gros titres attirent davantage l'œil
• une barre de navigation supérieure obtient de meilleurs résultats
• l'utilisateur a tendance à cliquer sur des photos
• les photos de visages en gros plan ont un gros pouvoir d'attraction

À lire également: « Paris web et le eyetracking »

Capture fr.canon.be

Du gris pour le texte, du rouge pour le titrage. Les liens de la navigation sont en gris et en rouge au survol. La mise en exergue est en gras et/ou souligné (!). Notez le très beau lien « ici » alors qu'il suffisait de le mettre sur les quelques mots précédents. Quelle confusion !

En allant sur la page, quelle est l'information mise en avant ? Vous recherchiez de l'aide à propos d'une imprimante, cette page vous a-t-elle aidée ? Si oui, où devez-vous cliquer ?

I have a dream. J'aimerais que tous les livres soient accessibles gratuitement en ligne tout comme quand je vais en librairie, tous les ouvrages sont à ma disposition. Dans certains endroits, des sièges confortables sont mis à disposition. Qui aurait idée de passer des heures à lire tout un livre pour éviter de l'acheter ? Personne. De même sur internet, qui a déjà lu une brique de 300 pages consciencieusement devant un écran d'ordinateur ? Au mieux, j'ai du lire 5 pages d'un PDF... et encore.

Dans un autre genre, je viens d'apprendre que le livre « Internet, donne-moi ce que je veux ! » est disponible dans son intégralité sur le web. Vous avez l'occasion de réagir via les commentaires, main tendue aux utilisateurs pour améliorer la prochaine édition. Je reste sceptique sur l'achat de la version PDF. Autre petit soucis, la mise en forme est un peu raide et de nombreuses parties ressemblent à du copier-coller, des erreurs dans les liens... Mis à part ces détails, l'initiative est intéressante.

Capture Ourtype.be

Journaux pliés en deux

Sur le web, on peut également définir une zone visible après le chargement complet de la page et sans intervention de l'internaute. Cette limite dépend de la résolution d'écran de l'utilisateur mais aussi du navigateur et des éléments affichés: menus, barre d'outils, barre personnelle, barre de recherche, barre additionnelle. Une multitude d'autres facteurs peuvent être pris en compte: blocage des éléments sur la page, taille du texte, redimentionnement de la fenêtre dans le cas des larges écrans de type 16/9. On pourrait presque dire qu'il y a autant d'espace visible affichable que d'utilisateur. Et encore, dans mon cas par exemple, j'utilise Internet Explorer sur mon écran 17" en 1024*768 et Firefox (Adblock activé) sur mon 19" en 1280*1024.

Capture Lefigaro.fr sous Internet Explorer 6.0

Capture Lefigaro.fr sous Firefox 2.0, plugin Adblock

Connaître cette limite virtuelle en fonction du public cible, permet de mieux organiser l'information sur la page et de s'arranger pour suggérer l'utilisation du scroll pour lire la suite du contenu par différentes méthodes: fond, image, texte. Les études actuelles en ergonomie confirment qu'une majorité des utilisateurs connaissent et emploient le défilement vertical. Cependant, le temps de fixation de l'œil accroit en fonction de la longueur de la page. Une longue page favorise une lecture en diagonale à la recherche de mot-clé.

Dans le cas suivant, l'annonceur place au mieux sa publicité au-dessus de la zone de flottaison (en cyan sur l'illustration pour une résolution de 1024*768). Trois formats sont présents pour augmenter au maximum sa visibilité: un fond de page, une bannière en haut et un encart dans la colonne de droite.

Capture Liberation.fr

D'autres sont plus maladroits. WebRankInfo, longtemps considéré comme inévitable en terrme de référencement, s'est vu inondé de publicité au fil du temps. Sur un affichage en 10204*764, la partie réservée à l'information est enfouie dans un décor de publicités. La limite de flottaison est très mal positionnée car l'utilisateur suppose qu'après les annonces Google, il n'y a plus rien. Ce choix est sans doute le résultat d'une optimisation pour les internautes équipés d'écrans larges.

Capture Webrankinfo.com

Même les Pro du web semblent ne pas connaitre cette notion. On ne saisi pas très bien l'intérêt de mettre une immense illustration abstraite dans le haut de la page. Toutes les rubriques sont logées à la même enseigne. Aucune information textuelle pertinente ne se trouve dans ladite zone. Le lecteur est obligé à chaque fois de descendre pour trouver le contenu.

Capture Produweb.be

Les boutons sont réactifs au survol de la souris, assez gros et espacés confortablement de manière à ne pas « déraper ». Rares sont les libellés puisque suffisamment explicites. Des options supplémentaires sont parfois disponibles mais je doute de leur succès. La paternité du player ne devrait être visible que pour des plateformes qui autorisent de récupérer la vidéo sur son blog. Le réglage du volume est superflu en raison de sa faible efficacité et redondant avec le volume des baffles.

La barre de lecture est un élément omniprésent. Dans la majorité des cas, le lecteur est affiché avant le lancement de l'animation et c'est une bonne pratique puisqu'il informe rapidement l'utilisateur sur la présence d'une vidéo. En lecture normale, le lecteur reste visible à des rares exceptions (Vimeo). Masquer les boutons valorise le contenu mais occulte la ligne du temps souvent utile pour des vidéos courtes et de petites tailles (VPod).

Le chargement du flux visible sur la barre permet de mettre la vidéo en attente pour éviter la lecture saccadée. La durée est présente dans la plupart des cas. La fluidité du taquet de lecture autorise une navigation à travers le film soit de manière très large (Dailymotion) ou plus courte (Winelibrary).

Au niveau des fonctionnalités, WineLibrary tire son épingle du jeu avec un système ingénieux de chapitrage et d'annotations sur la ligne de lecture. Au niveau graphique, peu d'évolution et une envolée pour les boîtes noires ou en niveaux de gris. On imagine dans un futur proche, la possibilité de personnaliser son outil de lecture à la façon des skins sur Winamp. Youtube a déjà commencé à le faire avec la personnalisation des teintes du player.

En vrac, quelques captures d'écran des outils de lecture vidéo. Pour information, la largeur des lecteurs a été adaptée dans un soucis d'homogénéité.

tv.winelibrary.com

fr.intruders.tv

vpod.tv

www.goosto.fr

six35.fr

video.msn.com

www.allocine.fr

www.vimeo.com

www.tetesaclaques.tv

www.neteco.com

www.youmake.tv

www.youtube.com

www.youtube.com - Player personnalisé

vids.myspace.com

www.culturepub.com

www.dailymotion.com

www.dailymotion.com (version beta)

video.google.fr

www.linternaute.com/video

fr.video.yahoo.com

arretsurimages.net

wiki.france5.fr

www.cnn.com

Face à cette montée en puissance de la vidéo sur internet et des (pseudo) TV en ligne, que restent-ils comme outil pour mettre en place un lecteur vidéo sur son blog ? L'offre est maigre et ne progresse pas. Les utilisateurs lambda préfèrent les plateformes d'échange vidéos: simple, rapide et l'hébergement est assuré par le site en question. En contre partie, vous dépendez du système et vous n'avez aucun contrôle sur la diffusion de vos vidéos.

Avec un hébergement payant et un minimum de connaissances techniques, des lecteurs vidéos libres et gratuits sont à votre disposition. Cela apporte un peu de gaïeté et de l'animation à votre blog. Le player FLV, le DewTube ainsi que le player de Jeroen Wijering (utilisé sur Arte TV) lisent les fichiers FLV. Pour convertir vos vidéos dans ce format, utilisez Riva FLV Encoder.

flv-player.net

www.alsacreations.fr/dewtube

www.jeroenwijering.com

Mise à jour (septembre 2009) — Les outils de lecture dont le contenu est destiné au partage gardent leur sobriété pour une meilleure intégration sur les sites externes. À l'inverse, les entreprises personnalisent les players et les contenus ne sont pas exportables.

www.eatwisconsincheese.com

Ted mise sur l'internationalisation et propose un sous-titrage dans un large choix de langue. Une très bonne idée qui exige un travail conséquent de traduction. L'appel à contribution peut apporter un coup de pouce et une valorisation des participants.

www.ted.com

De plus en plus de sites font apparaître le menu au survol de la souris. La vidéo est dépouillée de son lecteur (à l'exception d'une barre de défilement discrète) et d'icônes +/- larges accompagnées de légende apparaissent par réaction.

www.tetesaclaques.tv

www.vimeo.com

Pour le reste, les fonctionnalités restent sensiblement les mêmes. Même chose pour le design général et les couleurs. De temps à autres, on trouve des players aux couleurs vives et saturées sur un fond en niveau de gris. Il est assez rare de trouver toute l'interface avec des jeux de couleurs assez francs.

tv.winelibrary.com

fr.intruders.tv

www.goosto.fr

www.allocine.fr

www.neteco.com

fr.video.yahoo.com

www.wat.tv

video.on.nytimes.com

www.reuters.com

www.metacafe.com

tv.adobe.com

videos.arte.tv

Mise à jour (20/01/10) — Dailymotion propose d'essayer son nouveau player vidéo en beta pour le moment. Je dois dire que c'est une très bonne nouvelle car je trouve le modèle actuel peu ergonomique et pas très pratique: boutons trop petits, navigation dans la timeline séquentielle. J'observe également une tendance pour un fond en semi-transparence. Il faut bien avouer que ce nouveau design ressemble de très près à ce que fait Vimeo.

www.dailymotion.com - version beta

Mise à jour (28/03/10) — Sur les sites des grandes écoles dont le thème principal est lié aux sciences, à l'ingénierie ou à l'éducation, on trouve un chapitrage de la vidéo sous forme de titres. À l'image d'un DVD, il est possible de se déplacer d'un moment à un autre du film sans charger la vidéo au complet.

www.canal-u.fr

Mise à jour (02/05/10) — Youtube a intégré un nouveau lecteur vidéo dans l'esprit du moment: gros boutons, transparence et effet d'apparition. Contrairement aux autres, le player propose un choix de la qualité d'images: 360p, 480p et 720p pour la HD. On retrouve également une technologie propre à Google, la retranscription automatique de sous-titres (version beta) avec de nombreuses traductions. On connait les limites des services de traduction, mais ils permettent d'appréhender un sujet dans les grandes lignes. Ces systèmes sont amenés à se généraliser pour une question d'archivage, de référencement et de recherche.

www.youtube.com

Capture Techcrunch.com

Le libellé « Page suivante » avec une flèche vers la droite pointe vers une page plus ancienne alors que l'autre dirige vers la page d'accueil. Ce raisonnement correspond à celui qu’on retrouve dans de longs articles segmentés en plusieurs pages, une galerie photo, un forum, etc.

Capture JournalDuNet.com

C’est également le cas des moteur de recherche avec en plus une numérotation des pages pour une meilleure navigation. Les pages de résultats sont affichées sur une même ligne dans un ordre croissant. Si j'imprime chaque page sur un support physique et si je les dispose sur une table (sans les superposer), je placerais la première tout à gauche et les suivantes à droite. Cela correspond simplement au sens de lecture. La première feuille à l'extrême gauche est le commencement du classement et à l’extrême droite celle de la fin des résultats. Le problème c'est de savoir s'il est pertinent et logique dans la tête du visiteur d'adopter cette représentation pour l'archivage d'un blog ? À mon avis, non.

Dans un classement traditionnel, l’archivage se présente de manière chronologique. Le numéro 1 de la première page commence la numérotation. La suite des numéros est affichée très logiquement à droite en respect aux conventions culturelles du sens de la lecture. Dans un moteur de recherche, le classement se fait suivant la pertinence des résultats. Dans un album photo il peut s’agir de l’ordre alphabétique des clichés. Dans un forum, l’ordre est chronologique par rapport aux interventions et la pagination souvent à droite. Ce positionnement se réfère en quelque sorte à une ligne du temps où le passé est symbolisé à gauche et la suite à droite.

Capture forum Geckozone.org

Sur un blog, l’apparition des billets est antéchronologique. La dernière note se positionne tout en haut et les plus anciennes suivent. Un peu comme si vous classiez vos extraits de compte bancaires en les ajoutant chaque fois les uns au-dessus des autres. Du coup, ça devient compliqué de trouver un libellé correct, une direction et un emplacement qui correspondent à ce qu’on souhaite exprimer.

À mon avis, il est plus logique de tout placer à gauche (indique le passé) et commencer par une numérotation croissante (respecte le sens de la lecture). Le chiffre 1 représente la première page de l’archivage et non la page la plus récente. Dans l’exemple suivant, 1 est la première page écrite et 5 est la page d’accueil active. Ainsi, le numéro de la page de l’index du blog varie à chaque nouvel archivage.

Sur ce blog, j’ai simplement utilisé le plugin WP-PageNavi par facilité. L’idéal serait de pouvoir personnaliser soi-même les liens. Il y aurait beaucoup de choses à dire au niveau ergonomique sur la forme et la façon de les utiliser. Le bon sens n’est pas forcément le même pour tout le monde, en témoigne la navigation supérieure du site web de l’Université libre de Bruxelles.

Capture ULB.ac.be

Faruk Ates a publié un bon article à ce sujet : « Pagination 101 ».

Il y a quelque temps, je trouvais cette pratique absurde. Je supposais que l'envoi d'une confirmation n'est pas une garantie suffisante de la bonne réception du courrier. Évidemment, nul n'est tenu au problème technique. La raison de cette recommandation est tout autre. Elle permet à l'internaute de garder une trace de sa plainte, demande d'information, question. En effet, quelle preuve reste-t-il lorsqu'un message est envoyé par formulaire ? Aucune.

Il y a quelques années, je m'étais inscrit sur un site de recherche d'emploi. J'y avais déposé mon CV et laissé une brève présentation. Il y a peu, la société en question m'envoie un e-mail pour réactiver mon profil et mettre à jour mes données. En échange, la chance de gagner une superbe voiture.

Dans le courriel, aucun lien de désinscription. L'expéditeur est un certain Noreply. Bon, il ne me reste plus qu'à me rendre sur le site et de demander la suppression de mon compte et mes données personnelles. Je remplis le formulaire de contact, j'envoie et puis... plus rien.

Cet exemple montre bien la nécessité pour des entreprises qui doivent gérer un grand nombre de personnes de permettre à l'utilisateur d'avoir un suivi de sa démarche pour, le cas échéant, s'en rappeler mais aussi le proposer en cas de contradiction. La solution est simple: ajouter une case à cocher Recevoir une copie par e-mail et mettre un place un script d'envoi.

Cette loi est intéressante dans les résultats Google. Deux modèles de navigation sont possibles: soit par les liens Précédent et Suivant, soit en sélectionnant le numéro de page. Dans le dernier cas, la précision du geste nécessite un peu plus de temps. On aurait pu penser que ce dispositif allait disparaître... que du contraire. Le système d'archivage des blogs par exemple utilise largement cette classification. Pour voir des exemples, Smashing Magazine a consacré tout un billet.

Pagination Google

Cette loi est toujours effective dans certains cas précis où le site doit attirer l'attention du visiteur sur un élément précis de l'interface et l'inciter à cliquer sur le bouton: participer à un concours, demande de devis, inscription gratuite... La communauté Mozilla l'a bien compris avec son navigateur. Tous les liens vers les extensions se trouvent derrière un gros bouton vert bien identifiable. Même chose pour celui qui cherche à télécharger le navigateur, il atterrit sur une page très explicite.

Mozilla-europe.org

Le livre paraît aux éditions Eyrolles, un petit plus pour les internautes puisqu'ils ont l'occasion de consulter un large extrait du livre sous forme PDF. Tout se passe sur le site spécialement consacré à l'événement: ergonomie-sites-web.com.