SimpleWeb.fr

Aujourd’hui je vous propose un voyage dans le temps pour comparer l’évolution des pages d’accueil des gros sites web sur ces 10 dernières années. En fait c’est l’article suivant qui m’a inspiré : The Evolution of Websites: How 10 Popular Websites Have (And Have Not) Changed. L’idée n’étant pas de se moquer mais plutôt d’analyser ces évolutions et d’en déduire des courants ou tendances.

Commençons dans l’ordre alphabétique avec Adobe :

La page d'accueil d'Adobe.com en 2000

La page d'accueil d'Adobe.com en 2005

La page d'accueil d'Adobe.com en 2010

Vous noterez que le look & feel n’a pas beaucoup bougé en 10 ans : Toujours ce bandeau noir en haut de page, toujours les mêmes couleurs (rouge, noir, blanc et gris foncé), une mise en page carrée et une forte concentration de liens sur la bas de la page.

Poursuivons avec Amazon :

La page d'accueil d'Amazon.com en 2000

La page d'accueil d'Amazon.com en 2006

La page d'accueil d'Amazon.com en 2010

Outre l’abandon de la navigation par onglets en 2007 (au profit d’un bloc dépliable), le look & feel est d’une constance exemplaire avec une palette de couleurs et un logo quasi identiques, des blocs et un coeur de page toujours très épurés pour bien faire ressortir les produits. Notez que c’est quasiment le seul “gros” site web au monde à ne pas modifier le traitement graphique des liens.

Intéressons-nous à Apple :

La page d'accueil d'Apple.com en 2000

La page d'accueil d'Apple.com en 2005

La page d'accueil d'Apple.com en 2010

Là encore je ne peux qu’être admiratif devant la cohérence de la mise en page qui n’a pas bougée depuis 10 ans : Une barre de navigation, un visuel en pleine largeur, un bandeau pour les news et 3 ou 4 blocs de mise en avant. Vous noterez également l’absence du nom de la marque écrit en toutes lettres (juste le logo dans le premier item de navigation). Je trouve personnellement que les visuels détourés avec un léger ombrage n’ont pas pris une seule ride.

Voyons maintenant le site de Microsoft :

La page d'accueil de Microsoft.com en 2000

La page d'accueil de Microsoft.com en 2005

La page d'accueil de Microsoft.com en 2010

Alors que ce site a longtemps conservé son aspect très sobre qui fonctionnait plutôt bien (beaucoup de liens, très peu d’illustrations), ils ont récemment décidé d’adopter une intention graphique plus soignée et une navigation locale par onglets verticaux dans la moitié inférieure de la page (la mise en page est très déroutante). Vous pouvez néanmoins constater qu’ils conservent toujours une forte densité de liens pour faciliter l’accès aux contenus importants.

Finissons avec Yahoo! :

La page d'accueil de Yahoo.com en 2000

La page d'accueil de Yahoo.com en 2006

La page d'accueil de Yahoo.com en 2010

Tout comme Microsoft, Yahoo a longtemps été fidèle à sa mise en page : Le logo entouré de raccourcis vers les services principaux, la barre de recherche, la colonne centrale réservée aux liens et la colonne de droite un peu plus éditorialisée. Depuis peu cette mise en page a été complètement revue avec un système de navigation latérale dépliable et une zone centrale façon “Une”. Même si cette dernière version présente une bonne lisibilité et une densité d’information bien répartie, je ne peux que regretter les anciennes versions qui symbolisait l’attachement de Yahoo! à son héritage historique (l’annuaire).

Même s’il n’est pas réellement possible d’en tirer des tendances, cette belle collection de pages d’accueil permet de mettre en valeur un élément essentiel : la constance. Adobe, Amazon et Apple ont ainsi su capitaliser sur leur propre signature graphique (jeu de couleurs, mise en page…) alors que Microsoft et Yahoo! semblent avoir rompu avec le passé en opérant une réorientation dans leur univers graphique / ergonomique.

Notez que ces réorientations graphiques coïncide avec un changement de stratégie pour ces deux derniers qui souhaitent changer d’image. Dommage car les internautes y perdent leurs habitudes. Faut-il en déduire qu’une refonte est une opération délicate ? Oui et non : Oui car une refonte n’est pas une opération anodine (perte de repères) mais permet de corriger d’un coup de nombreuses faiblesses ergonomiques ; Non car il est tout à fait possible de conserver des couleurs, formes ou tonalités de l’ancienne version.

Pour finir je conclurais là-dessus : Changer n’est pas un problème (surtout si c’est pour améliorer) mais changer en douceur est encore mieux car cela évite de perturber les utilisateurs (et par la même Google qui pénalise durement les modifications dans l’arborescence). Je ne répèterais jamais assez qu’un site web n’est pas une application informatique, il ne faut donc pas raisonner en évolutions majeures (une nouvelle version tous les 2 ou 3 ans) mais plutôt en micro-évolution permanentes.

Je pense ne rien vous apprendre en déclarant que 2010 sera l’année des touchbooks : Présentation de nombreux modèles au CES 2010, lancement de l’iPad, concepts très intéressants de Google Tablet, rumeurs sur un iPad XL… Autant dire que le marché est en ébullition et que les éditeurs placent de gros espoirs dans les touchbooks.

Consultation de sites web sur l'iPad d'Apple

Oui mais voilà, le format touchbook apporte de grosses différences dans la façon de consommer et d’interagir avec des contenus : Absence de périphériques de saisie (clavier / souris), utilisation de nombreux capteurs (écran tactile, accéléromètre, GPS). De ce fait les touchbooks induisent des modalités d’interaction complètement différentes des navigateurs (lire à ce sujet les très interessantes Form Factors Explorations de l’équipe en charge de l’interface de Chrome OS).

Répartition des types d'éléments d'interface en fonction du terminal

Prenons comme exemple le cas d’usage le plus évident : La consultation de contenus (article, livre, BD, photos…). En l’absence de clavier, l’utilisateur peut parcourir le contenu de façon laterale ou horizontale en utilisant l’écran tactile (pression sur les bords de l’écran comme sur Panelfly, drag & drop) ou l’accéléromètre (en inclinant le terminal pour faire “glisser” le contenu).

Consultation d'une bande dessinée sur un iPhone

C’est sur ce type de contenus que les touchbooks vont exceller : proposer une expérience de lecture à la fois naturelle (manipulation avec les doigts) et enrichie (utilisation d’animations, de sons, de vidéos…). Je vous conseille à ce sujet la lecture de cet article qui prédit un retour en force des contenus d’éditeurs (par opposition aux contenus générés par les utilisateurs) : The return of the LP and the future of book publishing.

Deuxième cas de figure : La recherche d’informations. Là aussi l’absence de clavier peut être palliée par l’usage d’un clavier virtuel (pour une saisie d’appoint), de nuages de tags ou de concepts pour un affinage empirique à la Quintura ou de listes de résultats sous forme de frise comme chez Cooliris.

Le clavier virtuel de l'hypothétique touchbook de Google

Autres possibilités d’interaction : Personnaliser les résultats de recherche en exploitant les senseurs (filtrage géographique à partir des données GPS) ou le profil de l’utilisateur (filtrage par affinités en fonction de l’historique d’achat iTunes).

Troisième cas de figure : Les jeux. Les jeux de type arcade pourront être exploités à l’aide d’un joystick virtuel (déjà largement éprouvé sur l’iPhone) , les jeux de conduite se serviront de l’accéléromètre et les jeux de plateau (de type Tower Defense) bénéficieront du multitouch. C’est également dans ce cas de figure que les touchbooks offriront une expérience très enrichissante pour les joueurs, d’autant plus si vous couplez ça avec le GPS comme pour les MMTRG.

Exemple de jeu de voiture sur l'iPad

Dernier cas de figure : les applications sociales. Ici il ne serait pas tant question de rédiger un billet pour un blog mais plutôt de consulter des flux d’activité. Pour cela des interfaces “aériennes” comme celle de Seesmic Look se manipuleraient très bien en faisant défiler les entrés et en cliquant à droite et à gauche sur l’écran. L’absence de clavier n’est ici pas pénalisante quand il s’agit de parcourir un flux, envoyer un poke, noter un contenu ou faire un re-tweet.

L'interface aérienne de Seesmic Look

Au final la consommation de contenus et services sur un touchbook est beaucoup plus éloignée de ce que nous pratiquons sur un ordinateur que vous ne le pensez. Je rejoins ainsi l’avis de Luke W sur la nécessité de définir une toute nouvelle expérience : iPad User Experience Guidelines.

Mais le pire dans tout ça, c’est que nous n’en sommes qu’au balbutiement de l’informatique tactile. Microsoft nous a ouvert les yeux sur les nombreuses possibilités des interface tactiles avec sa table Surface et l’on commence à voir des choses très intéressantes comme le bureau 3D de BumpTop.

Imaginez un peu ce que cela va donner avec les améliorations hardware suivantes :

• Utilisation de la webcam pour capter les gestes, la position de l’utilisateur ou encore ses expressions faciales ;
• Utilisation de gâchettes sur les tranches de la machine (comme sur les DS) ou de zones tactiles à l’arrière de l’appareil ;
• Utilisation d’écran en relief…

Tout ceci vous semble farfelu et lointain ? Vous seriez très surpris d’apprendre pourtant que ces technologies sont bien plus avancées que vous ne le pensez. Pour vous en convaincre, jetez donc un oeil à ça : Synaptics Debuts Fuse™ Next-Generation Mobile Phone Concept.

Alors ?

Bon OK je sais le blanc n’est pas une couleur, mais pour ne pas nous perdre dans des querelles d’experts nous allons appelez ça une couleur. “Ça” ? Oui “ça“, ce non-élément graphique qui est l’élément le plus utilisé sur votre page web et à qui l’on peut faire dire de nombreuses choses. Je rebondis sur un article récemment publié chez WDL (Whitespace: The Underutilized Design Element) et qui m’a fait redécouvrir celui publié sur A List Appart (Whitespace).

Le blanc (”whitespace” en anglais) est en effet indispensable pour faire respirer une mise en page et éviter de saturer l’interface.

Exemple de mise en page saturée sans espaces blancs

Le blanc est essentiel à la fois pour structurer la grille de lecture (en mettant en évidence les colonnes verticales mais également les lignes verticales) et rythmer la page dans sa verticalité.

Le même texte avec un bon usage des espaces blancs

Les espaces blancs sont essentiels pour améliorer la lisibilité et pour concentrer l’attention. D’une part car ils facilitent le décryptage de la page (et son survol par l’oeil) et d’autre part car ils mettent en évidence les contenus qu’ils côtoient. Formulé autrement : si vous voulez mettre en évidence un bloc de contenus, oubliez les couleurs qui flashent et privilégiez plutôt de larges espaces blancs autours.

Dans l’exemple qui suit (Rikcat Industries), les espaces blancs permettent de faire ressortir les titres sans avoir recours à de la couleur :

Très belle mise en page minimaliste chez Rikcat

Les espaces blanc sont aussi très intéressants pou faire des regroupements comme ici sur le site d’Astheria ou le blanc permet d’associer les titres avec les chapô des articles :

Utilisation du blanc pour grouper des éléments sur le site d'Astheria

Enfin le blanc peut donner, s’il est bien utiliser, une impression d’élégance et de sophistication comme sur le site de Urban Outfitters :

Elégance et sophistication chez Urban Outfitters

Notez que lorsque l’on parle de blanc il peut également s’agir d’espaces vides, comme sur ce blog où le header est vide mais avec un léger dégradé.

Bref, le blanc est une couleur très puissante et un élément essentiel de l’architecture graphique de vos pages web. Je suis à la recherche d’écrits de référence sur ce sujet, si vous avez des suggestions, merci de les mettre dans les commentaires.

Une des règles de base de l’utilisabilité est de toujours veiller à ne pas surcharger un écran, ou plutôt de s’efforcer de supprimer tout ce qui n’est pas indispensable et qui peut distraire l’attention. Noble cause, mais qui peut parfois se révéler être une vrai profession de foie.

Illustration avec cette page d’accueil expérimentale pour Google :

La page d'accueil expérimentale de Google

Donc comme vous pouvez le constater, sur cette page il n’y a plus rien si ce n’est le logo et le champ de saisie, même pas un bouton pour lancer la recherche : Google’s Experimental Homepage Fades To A Single Word. L’astuce est de ne faire apparaitre le reste qu’après quelques secondes pour être sûr de bien concentrer l’attention sur l’élément le plus important : le champ.

Plutôt extrême comme expérimentation, d’autant plus que la page d’accueil de Google n’était pas la plus chargée. L’expérimentation se poursuit visiblement avec des variantes comme par exemple une version où est mentionnée la phrase “This space intentionally left blank” : Google Tests a Clutter-Free Homepage.

Dans le même genre il y a aussi Goosh, une interface textuelle façon Unix :

L'interface textuelle de Goosh

Un bel exemple d’épuration graphique qui va plus loin que YubNub mais qui aurait gagné à être encore plus épuré.

Toujours dans la série interfaces façon lignes de commande, je vous propose WriteRoom, un traitement de texte au look & fell très “roots“ :

L'interface très épurée de WriteRoom

La particularité de ce logiciel est de proposer un mode plein écran qui isole complètement l’utilisateur du système et donc de ses distractions potentielles. Bon par contre c’est un peu austère…

Terminons avec le remarquable Ommwriter, un traitement de texte qui propose la même approche mais nettement plus raffinée avec un fond d’écran très reposant et différentes ambiances sonores :

L'interface épurée et immersive d'Ommwriter

Le sentiment d’immersion est tout à fait remarquable et les fonctions ne sont jamais très loin puisqu’en bougeant la souris vous faite apparaitre une série d’icônes :

L'accès aux commandes avec Ommwriter

Autant je suis très sceptique vis à vis de WriteRoom, autant l’expérience utilisateur de ce Ommwriter est tout à fait convaincante car extrêmement aboutie : Ommwriter, écrire en toute sérénité. Notez qu’il existe des applications spécialement dédiées pour isoler l’application ouverte comme Think ou Backdrop.

Plein de bonnes idées / intentions… mais qu’il n’est pas forcément bon d’utiliser pour un site web. Je fais notamment référence à ces insupportables sites qui s’ouvrent dans une pop-up qui force l’affichage en plein écran, une horreur pour ceux qui utilisent des écrans à grandes résolution (HD ou Full HD). Bref, jusqu’où peut-on aller dans la recherche de l’épuration ? (d’où le titre du billet)

MàJ (30/11/2009) > Voici une méthode pour tester une autre version de la page de recherche de Google : Check the Redesigned Google (With Always-Visible Sidebar) Yourself.

Encore une autre version de la page expérimentale de Google

Vous noterez le travail fait sur les boutons et les liens en bas de page.

Je ne sais pas pour vous, mais j’ai comme l’impression que les sites à défilement horizontal sont à la mode en ce moment : 40 of the Best Horizontal Scrolling Websites et 38 Websites Using Horizontal Scrolling. Déjà l’année dernière le précurseur Smashing Magazing avait soulevé la question : Will Horizontal Layouts Return?.

Bon, autant le dire tout de suite sans faire durer le suspens : le défilement horizontal est une aberration d’un point de vue ergonomique, mais elle peut s’avérer utile d’un point de vue artistique. Autrement dit : ça peut aider si vous éditez un site expérimental à vocation artistique.

Illustration avec le portfolio du designer suédois Eric Johansson :

Le site de Eric Johansson

Ici le défilement se fait à l’aide d’une… barre de défilement horizontale (vous vous en doutiez) et le rendu graphique est plutôt sympa. Ceci n’est pas gênant dans la mesure où il n’y a que très peu de contenu sur ce site et que l’auteur souhaite se démarquer.

Autre exemple expérimental avec Google Fast Flip :

Le site de Google Fast Flip

J’imagine que l’idée était de reproduire la dynamique des lectures des journaux avec un défilement latérale des pages… c’est raté. Je préfère encore largement les applications de catalogues électroniques (avec les pages qui tournent) comme FluidBook.

Autre exemple plus embêtant avec le site de Lomotek Polymers :

Le site de Lomotek Polymers

Là c’est tout de suite beaucoup plus dommageable parce qu’il y a du contenu et parce que l’encrage de la barre de navigation par dessus le contenu qui défile provoque une drôle de sensation. Bref, rien de tel pour déstabiliser vos lecteurs…

Terminons avec le pire exemple, celui de Gucci :

Le site de Gucci

Là nous sommes dans le grand n’importe quoi avec une navigation très compliquée à manipuler et à repérer (il faut cliquer sur les petites flèches). Non seulement cela perturbe l’internaute mais en plus ça n’apporte rien à l’image de marque ou au positionnement des produits (les marques de luxe doivent-elles se démarquer à ce point ?).

Au final, je ne voit qu’un intérêt artistique à ce système de défilement, et encore. Le meilleur exemple que je puisse vous donner est celui du site MoCo Loco où il est possible de basculer d’un défilement horizontal à vertical et qui propose une navigation par clavier :

Le site de MoCo Loco

J’espère vous avoir convaincu de ne pas utiliser cette technique.

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)

Dans la série “les accidents du web”, je voudrais vous parler aujourd’hui de deux sites à très très forte audience qui proposent pourtant une expérience utilisateur très… perfectible. Et ça tombe bien puisqu’il sera question de proposer des améliorations !

Commençons avec Wikipedia, l’encyclopédie universelle qui a popularisée les wikis. Qui dit wiki dit interface de wiki, et c’est là où il y a un problème : mêmes s’ils sont parfaitement adaptés à la co-rédaction les wikis sont par défaut livrés avec des interfaces fonctionnelles mais pas très esthétiques. Voilà pourquoi la fondation Wikipedia a lancé un chantier de refonte pour améliorer l’expérience utilisateur : Wikipedia Usability Initiative.

Voici donc à quoi ressemble un article de Wikipedia aujourd’hui :

Un article de Wikipedia aujourd'hui

Et voici ce à quoi ressemble ce même article sur le prototype :

La prototype de nouvelle page d'article dans Wikipedia

Les changements concernent surtout l’emplacement de la boite de recherche, la mise en forme de la navigation latéralle et des onglets. Plus d’infos ici : Wikipedia Gets Beta Redesign.

Autre exemple avec Craigslist, le célèbres ite d’annonces qui n’a pas fait évoluer son design depuis plus de 10 ans. Le magazine Wired propose à ce sujet un article intéressant sur les raisons de cet immobilisme : Why Craigslist Is Such a Mess. Les raisons invoquées par l’auteur sont que les utilisateurs n’ont pas clairement exprimés le souhait de modifier le design, ils se sont adaptés et maintenant ne s’en plaignent plus (du moins ils se plaignent pour d’autres sujets, mais pas celui du design). Je trouve dans cette histoire beaucoup de similitude avec celle d’Ebay qui a longtemps arboré une affreuse mise en page sous prétexte que les utilisateurs ne s’en plaignaient pas (cf. Une nouvelle version pour eBay).

Pour mémoire, Craisglist ressemble à ça :

La verison actuelle de Craigslist (+mobile)

Et voici une des propositions de refonte de l’article (Extreme Makeover: Craigslist Edition) :

Proposition d'évolution de Craigslist

Ceci relance donc le débat sur la nécessité d’améliorer un site avec beaucoup de trafic (”si ce n’est pas cassé, pourquoi le changer ?“). Après une longue réflexion j’en suis arrivé à la conclusion que je n’ai pas le recul nécessaire pour répondre de façon objective à cette question. En tant que concepteur je me fais un devoir d’améliorer les sites dont on me confit la responsabilité mais peut-être est-ce une déformation professionnelle…

Bref, je n’ai pas de réponse ultime à cette question.

Mise à jour (21/09/2009) : Une initiative équivalente pour Google : RedesignGoogle: A Contest To Revamp The World’s Most Popular Search Engine.

Mise à jour (12/10/2009) : Encore une initiative du même type pour Facebook : One designer dreams of a more beautiful Facebook.

Une version plus sophistiquée de Facebook