SimpleWeb.fr

Connaissez-vous la limite de visibilité ? Il s’agit de la ligne horizontale d’une page au-dessous de laquelle le contenu n’est plus affiché à cause de la résolution de l’écran. Cette notion est directement héritée de la presse ou les gros titres devaient être imprimés sur la partie haute de la page, juste avant la pliure (d’où le “page fold” en anglais).

Jusqu’ici rien de problématique, si ce n’est une fausse interprétation de cette notion qui laisse entendre que les contenus sous cette fameuse limite de visibilité ne sont pas lus. Grave erreur d’interprétation car les utilisateurs savent scroller, encore faut-il leur en donner envie.

Il y  déjà eu ainsi de nombreux articles écrits sur le sujet : Blasting the Myth of the Fold, Worried about content “below the fold”? Don’t be, Debunking the Myth of the Page Fold in Web Design… et je pense qu’il y en aura encore de nombreux autres…

Mais reprenons depuis le début : la limite de visibilité. Grâce à la très complète étude publiée par le blog ClickTale (ClickTale Scrolling Research Report – Visibility and Scroll Reach), nous savons maintenant qu’en moyenne la limite de visibilité se situe entre 560 et 600 pixels :

Statistiques sur la limite de visibilité

OK très bien, mais j’attire néanmoins votre attention sur le fait que cet article a été publié en 2007 (date à laquelle la résolution 1024*768 était majoritaire) et que depuis le parc informatique a évolué et que nous comptons un peu plus d’écrans avec une résolution de 1280*800 et 1280*1024 (cf. W3counter). Mais bon ça ne change pas grand chose, pour le moment…

Intéressons-nous maintenant à une étude plus récente publiée par le cabinet CX Partners : The myth of the page fold: evidence from user testing. Ces derniers nous font ainsi partager les résultats d’une vaste étude de eye-tracking qui révèle grosso-modo la même chose : les utilisateurs savent scroller. Il suffit de regarder la longueur des pages de sites à très grosse audience pour s’en convaincre :

Les limites de visibilité de sites à fortes audiences

En fait l’astuce est de bien surveiller l’endroit où la page est coupée : si elle s’arrête dans une zone vierge, aucun repère visuel (si ce n’est la barre de défilement horizontale) ne vous indique qu’il y a du contenu en dessous. Illustration avec cette page produit :

Comment savoir qu'il y a du contenu en dessous ?

Par contre, si la limite de visibilité tombe en plein milieu d’un paragraphe ou d’une photo, cela créé une invite visuelle pour l’utilisateur :

Ici il est évident qu'il y a du contenu sous la limite de visibilité

Conclusion : La limite de visibilité ne pose problème que si vous ne fournissez pas de bonnes raisons (ou une invitation visuelle) pour inciter les utilisateur à scroller.

Dans la mesure où les avis concordent, il semblerait que ce point soit définitivement réglé… jusqu’à ce que les statistiques évoluent de façon significative ! Je vous donne donc rendez-vous dans deux ans pour en reparler.

La loi des série c’est encore une fois vérifiée car à peine un mois après la publication d’un article sur la refonte de “vieux” sites (Wikipedia et Craigslist) voici qu’en quelques jours se sont trois dinosaures du web qui ont changés de peau : W3C, IMDB et MSDN. Ne vous méprenez pas, “dinosaures” n’est pas un terme péjoratif ou synonyme de mauvaise qualité ou ringard, il désigne juste des sites web de plus de 15 ans d’existence (un record de longévité). Prenons ainsi l’exemple du crocodile, une bestiole qui n’a quasiment pas évoluée depuis sa “version” préhistorique, tout simplement parce qu’elle n’a pas eu besoin d’évoluer. Pour certains sites web c’est la même chose : certains devaient évoluer, d’autres non.

Tout ceci tombent justement à pic pour illustrer les propos de Jakob Nielsen sur la refonte incrémentale : Fresh vs. Familiar: How Aggressively to Redesign. Les propos du Dr Nielsen sont de dire que les internautes n’aiment pas trop le changement et qu’il est préférable de procéder à une refonte par petits bouts (incrémentales) plutôt que de tout casser et reconstruire au risque de provoquer un sentiment de rupture et une perte de repères.

Commençons par l’exemple du W3C qui a complètement refondu son site (mise en page, structure, navigation…) :

Le nouveau site du W3C

Les changements sont importants mais sont-ils réellement perturbant dans la mesure où il n’y avait quasiment rien à garder dans la précédente version : un contenu mal structurer, un design archaïque et un système de navigation très limité. La nouvelle version apporte une solution à chacunes des ces lacunes avec un design moderne, une navigation simplifiée par groupes de standards et une grille de lecture cohérente. Non vraiment je ne regretterais pas l’ancienne version.

Intéressons-nous maintenant au cas de IMDB qui n’a pas changé grand chose à son site si ce n’est le header :

Le nouveau site d'IMDB

Ce cas de figure est intéressant car le cœur de page fonctionnait bien (structure et lisibilité des fiches) et parce que la navigation latérale ne représentait pas un handicap (évolutivité, intuitivité). Du coup, seules la navigation et la recherche avaient besoin d’une refonte. Un coup de neuf qui ne perturbe donc pas les habitués tout en améliorant l’expérience utilisateurs. Un authentique coup de force surtout lorsque l’on sait que ce site vient de fêtes ses 19 ans !

Terminons nos exemples avec MSDN qui a subit une cure de minceur :

Le nouveau site de MSDN

Beaucoup de place a donc été gagnée au niveau de header par rapport à la précédente version. Même si la grille de lecture est plus dense, les traitements graphiques minimalistes allègent la mise en page et procurent une lisibilité maximale tout en améliorant les performances (un critère très important pour la cible visée). Vous noterez au passage l’intégration de Bing comme moteur de recherche officiel.

Voici donc trois cas de figure intéressants pour illustrer un travail de refonte : du plus “léger” au plus “lourd”. Si vous avez d’autres exemples, n’hésitez pas à les signaler dans les commentaires.

Dans son dernier billet, Raphaël de Robiano, consultant en ergonomie, a effectué un test utilisateur sur un site Web. Il soulève un détail intéressant en ce qui concerne les formulaires de recherche. Je cite :

Ce test a été l’occasion d’identifier un problème sur un des formulaires de recherche du site que j’aimerais partager avec vous.

Le champ de recherche était accompagné sur la droite d’un petit bouton permettant de valider les caractères introduits et de déclencher le processus de recherche. Ce bouton représentait un petit triangle pointant vers la droite.

Or certains participants au test ont pensé qu’en cliquant dans ce champ, ils obtiendraient une liste déroulante reprenant l’ensemble des produits de la compagnie. Et, en effet, il y a une certaine similarité entre le bouton déclenchant la recherche et celui des listes déroulantes classiques (la balise SELECT  pour les familiers du HTML).

D’autres participants ont bien identifié cet élément comme un formulaire de recherche, mais se sont fait la remarque qu’un bouton « search », « go » ou « ok » serait plus approprié.

Comme quoi, la présence d’un petit élément graphique, peut parfois avoir un effet significatif dans l’interprétation de l’interface d’un site.

Voulant approfondir et échanger avec vous sur le sujet, j’ai regardé ce qu’il en était des formulaires de recherche sur d’autres sites sélectionnés au hasard : Twitter, Amazon, Facebook , Linkedin, Skype , Orange et Cyberpresse.ca

Le formulaire de recherche de Twitter :

Le formulaire de recherche de Amazon :

Le formulaire de recherche de Facebook :

Le formulaire de recherche de Linkedin :

Le formulaire de recherche de Skype :

Le formulaire de recherche du site de Orange :

Le formulaire de recherche du site Cyberpresse.ca (Google ) :

Je remarque que la mention ” Rechercher ” est celle qui est le plus utilisée. Il arrive aussi qu’on l’accompagne des mots ” OK ” ou ” GO” . À mon avis,  je crois que la mention “Rechercher”inscrite directement dans le champ de recherche avec l’ajout  icône ( loupe ) à droite est un choix intéressant.

À titre d’information, je partage avec vous un un article dont je me suis rappelée après la lecture du billet de Raphaël de Robiano. L’article en question traitait les observations de Jakob Nielsen. Je cite le passage intéressant sur le sujet :

3- Le moteur doit ressembler à un moteur !

Le moteur de recherche doit être facilement repérable par l’internaute. Mieux vaut donc éviter les libellés “amusants” ou originaux pour le bouton de recherche: “chercher” ou “rechercher” convient mieux que “trouver”, “OK”, “allons-y !” ou autres… éventuellement, “OK” ou “go !” est acceptable, à condition que le mot “recherche” (ou : “rechercher dans monsite.com”) figure avant le champ de saisie, comme suit:

la recherche sur amazon.fr

De plus, il est préférable que le bouton de recherche soit facilement identifiable comme tel: un bouton standard de formulaire, même si son esthétique est moyennement appréciée des designers, présente l’avantage d’être immédiatement reconnu. Si vous choisissez d’utiliser une image, arrangez-vous pour qu’elle ait bien l’air d’un bouton: forme allongée aux extrémités arrondies, et/ou dessin ombré suggérant le relief.

|
a priori, aucun problème d’identification pour ces boutons

Qu’en pensez-vous.

Comment concevez-vous vos formulaires de recherche ? Quelles mentions avez-vous tendance à ajouter ? :  ” Rechercher ” , ” OK “, “GO” , une loupe, une flèche, ect.  ? Intégrez-vous tout simplement le mot ” Rechercher” dans le champ de recherche ? Vous arrive-t-il de choisir un autre terme que ” Rechercher ” ?

J’ai déjà eu de nombreuses occasions de vous parler des bibliothèques de conception d’éléments d’interface (”design pattern gallery“). Aujourd’hui j’aborde à nouveau ce sujet mais pour une bonne cause. Le site UI-Patterns mène en effet une grande enquête auprès de ces lecteurs pour constituer une base de données statistique sur l’emplacement des éléments génériques d’un site web (logo, aide, recherche, navigation…) : UI Patterns Servey. En fait l’idée n’est pas de définir un emplacement idéal (car cela dépend de trop de variables) mais plutôt de répertorier les emplacements génériques pour les plus gros sites et d’en faire des statistiques.

16 éléments sont ainsi listés et il est possible de consulter les résultats (comme ici l’emplacement du lien de retour à la page d’accueil sur près de 80 sites) :

Statistique d'emplacement du lien de retour vers la page d'accueil

Vous noterez que les résultats sont assez similaires à ceux de la bibliothèque Web Design Practice :

Autre statistique d'emplacement du lien de retour vers la page d'accueil

En totu cas une initiative tout à fait intéressante pour ce constituer une base de référence et pouvoir argumenter dans la cadre d’un projet.

(via Imazine)

Depuis l’apparition des premières interfaces graphiques il y a presque 30 ans (cf. Quelle interface pour le système d’exploitation de demain ?), force est de constater que le modèle d’interaction des interfaces de nos système d’exploitation n’a pas beaucoup changé : toujours un bureau en 2D avec des icônes et des dossiers, puis des zones “intelligentes” comme le Dock de Mac OS ou la Sidebar de Windows Vista.

Alors que les géants du secteur sont encore en phase d’expérimentation (cf. Bientôt un bureau en 3D chez Apple ?), il semblerait qu’une start-up canadienne soit en train de s’illustrer avec une interface 3D tout à fait convaincante : BumpTop.

L'interface 3D de BumpTop

Pour faire simple, BumpTop est une interface qui vient se greffer par dessus Windows et qui permet de manipuler les fichiers et fonctions de votre ordinateur de façon beaucoup plus… naturelle. La grande nouveauté vient du fait qu’ils proposent depuis peu le support des écrans tactiles et du multitouch : BumpTop Gets Multi-Touch Support on Windows 7.

En pratique il est donc possible de manipuler les différents éléments de l’interface (fichiers, dossiers…) avec vos doigts et des gestes intuitifs :

Les gestes de manipulation de l'interface de BumpTop 3D

Pour vous rendre compte de la puissance de cette interface je vous propose cette petite démonstration vidéo :

Autant j’étais plus que sceptique quand à l’intérêt réel de la 3D dans l’interface d’un système d’exploitation, autant je me dis qu’une telle interface associée à un touchbook est une solution non seulement viable mais en plus tout à fiat innovante. Bref, les équipes de BumpTop ont réussi un authentique exploit en proposant des modalités d’interaction très intuitives et surtout adaptées à une partie du public des touchbooks (les séniors et autres utilisateurs réfractaires aux ordinateurs traditionnels).

(via Techcrunch)