SimpleWeb.fr

Savez-vous combien pèse la page d’accueil de Yahoo ? Cette question n’est pas anodine car cette valeur a été pendant longtemps une unité de référence pour la vitesse de chargement des pages d’un site web. En presque 10 ans passés en agence, je ne compte plus le nombre de cahiers des charges et brief où il étai stipulé que le poids des pages du futur site du client ne devait EN AUCUN CAS dépasser la limite de 30 Ko (le poids théorique de la page d’accueil de Yahoo! dans l’inconscient collectif).

Puis il a été question de 60 Ko…

Puis ça a été l’avènement de l’ADSL, les années YouTube et maintenant plus personne ne se soucie du poids des pages. Il faut dire que les foyers français sont équipés en haut-débit à plus de 95% (ADSL + câble + fibre, si mes sources sont exactes), donc plus la peine de se soucier du temps de chargement.

Oui mais voilà : Il fut un temps où la page d’accueil de Yahoo! pesait 30 Ko, mais cette époque est loin derrière nous et je constate une inflation alarmante (euphémisme) dans le poids des pages d’accueil qui dépassent fréquemment le Mo. Ce fameux “poids” correspond à l’espace disque occupé par l’ensemble des fichiers qui composent une page d’accueil (HTML, javascript, css, flash, images…).

Je me suis amusé à comparer les pages d’accueil de certaines boutiques en ligne française, et le résultat n’est pas brillant :

• Cdiscount = 2,8 Mo
• Pixmania = 1,4 Mo
• RueDuCommerce = 1,3 Mo
• Amazon = 845 Ko
• MisterGoodDeal = 840 Ko
• PriceMinister = 570 Ko

Non vous ne rêvez pas, pour avoir le privilège d’admirer la page d’accueil de Cdiscount il vous faudra télécharger près de 220 fichiers pour un total avoisinant les 3 Mo. Hallucinant ? Oui, surtout dans un marché aussi concurrentiel. PriceMinister s’en sort très bien avec une page bien plus légère que les autres dû à une utilisation très limitée des images (contrairement à Cdiscount).

Concernant les sites d’information, c’est encore pire :

• L’Express = 3,5 Mo
• Liberation = 3,4 Mo
• 20Minutes = 2,7 Mo
• LeMonde = 2,2 Mo

Même si les mega-bannières et autres publicités au format vidéo plombent la page, n’est-il pas aberrant de ne pas trouver un site d’information sous la barre des 2 Mo ? Et ce n’est pas forcément mieux de l’autre côté de l’Atlantique :

• LA Times = 2,9 Mo
• WashingtonPost = 1,8 Mo
• Newsweek = 1,8 Mo
• NY Times = 1,55 Mo

Concernant les grands portails, la moyenne est moins élevée :

• Facebook = 2 Mo
• Free = 1,8 Mo
• MSN = 1,2 Mo
• Yahoo = 890 Ko
• Bing = 125 Ko
• Google = 125 Ko

De façon surprenante, les grands portails sont plutôt raisonnables dans leur utilisation de la bande passante. Mention spéciale à Facebook qui dépasse la barre des 2 Mo avec une ribambelle de fichiers javascript. Vous noterez au passage que les deux moteurs de recherche pèsent rigoureusement la même poids (je ne sais pas trop quoi en penser…).

Bref, cette rapide étude concurrentielle nous révèle une vérité bien dérangeante : Les pages d’accueil de sites de news sont plus lourdes que certains plug-ins dont le temps de téléchargement est soit-disant rédhibitoire. Même si nos liaisons ADSL sont très performantes, les tuyaux ont des limites et le nombre de fichiers à télécharger nous éloigne toujours plus de la limite symbolique des 2 secondes pour charger une page d’accueil (le temps d’attente est directement lié à l’expérience utilisateur).

Tout ceci est très dérangeant, surtout à partir du moment où Google annonce qu’il va prendre en compte le temps de chargement des pages dans son algorithme. Oups, c’est justement ceux qui ont le plus besoin d’un bon référencement (commerce en linge, news…) qui vont se faire dégrader. Je ne peux que me réjouir de cette annonce car cette escalade dans le poids des pages d’accueil n’augure rien de bon et surtout rend les éditeurs fainéants.

Pourtant il existe de nombreuses façons d’optimiser le poids des pages en limitant le nombre d’images, en optimisant les fichiers HTML et javascript… J’imagine que l’arrivée à maturation des terminaux de consultation alternatifs (smartphones, touchbooks…) va inciter les éditeurs à se remettre en question.

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.

Aviez-vous remarqué à quel point les choses ont changé aux États-Unis ? Oui c’est bien au président Obama que je fais référence, ou plutôt aux nouvelles versions que son administration a mises en ligne. Non seulement ils arborent une très belle charte graphique avec un choix judicieux de couleurs (blanc, bleu et rouge – comme sur le drapeau US) et de beaux volumes, mais ils sont en plus un modèle de lisibilité et d’organisation.

Vaisseau amiral de cette nouvelle charte, le site WhiteHouse.gov :

Le site de la Maison Blanche

Les spécialistes ne s’y trompent pas, c’est du très beau boulot (Whitehouse.gov Redesign: The Change Has Come) et le changement est spectaculaire (Whitehouse.gov: Looking Back at 12 Years of the US President’s Web Presence). Que se soit le choix des typos, la mise en page sur 3 colonnes, le menu de navigation ou le plan du site dans le pied-de-page, ce site est une flamboyante réussite.

Il y a aussi le site Change.gov (qui n’est maintenant plus en ligne) :

Le site Change.gov

On retrouve sur ce site les mêmes couleurs et typos mais une mise en page un peu plus “raide” avec une grille de lecture plus marquée.

Dernier site en date : Serve.gov.

Le site Serve.org

Toujours les mêmes couleurs sur ce site mais plus de liberté dans le choix des typos. Vous apprécierez les larges visuels et la très bonne utilisation des ombrage qui procure une expérience utilisateur tout à fait convaincante.

Il est certain qu’à côté de ces 3 sites, le USA.gov fait pâle figure :

Le site USA.gov

Espérons que les sites de l’administration US vont tous progressivement basculer vers cette nouvelle charte et que cela donne envie à notre président (ou nos ministres). Quel dommage que l’on ne trouve pas trace de cette charte sur les guidelines officiels du Usability.gov !

Voilà un petit moment que les sites de vidéo en ligne trustent l’audience du web mondial. Extrêmement appréciés des internautes, ces sites n’en sont pas moins d’une pauvreté affligeante au niveau de leur interface. Vous pourriez me dire que l’important c’est le contenu et que si YouTube et Dailymotion sont si dépouillés, c’est pour mieux mettre en valeur les vidéos. Certes, il n’empêche que d’autres sites proposent une expérience bien plus plaisante avec plus de sophistication dans l’interface sans toutefois “éclipser” l’intérêt pour les vidéos. Je pense notamment à Hulu, un site de contenus vidéo “officiels”, qui propose une expérience utilisateur en rupture radicale avec les autres hypermarchés de la vidéo.

Dès la page d’accueil le ton est donné avec un remarquable travail au niveau de la grille de lecture, de l’harmonie des couleurs et des typos :

La page d'accueil de Hulu

Rien à voir avec la page très déséquilibrée de YouTube (minuscules vignettes et colonne de droite trop courte) :

La page d'accueil de YouTube

Pour Dailymotion c’est un peu mieux même si la densité d’information est trop forte :

La page d'accueil de Dailymotion

Au niveau des chaînes thématiques c’est encore plus flagrant avec un très large bandeau identitaire pour Hulu et toujours ces zones de respiration très agréables (les espaces blanc entre les différents éléments) qui reposent l’oeil et concentre l’attention :

Une page intérieure de Hulu

Chez YouTube il y a un peu plus de place pour respirer, peut-être trop car les 6 lignes de texte sous les vignettes sont difficiles à lire et force l’oeil à faire des sauts :

Une page intérieure de YouTube

Chez Daillymotion la page est plus équilibrée mais la surabondance de vignettes (”Best of“), n’est pas très intuitive (est-ce la timeline d’un même film ?) :

Une page intérieure de Dailymotion

Bref, je suis admiratif du travail réalisé sur Hulu, qui même sur les pages de vidéo conserve cette remarquable lisibilité et toujours beaucoup de “rondeur” dans les formes et couleurs. Hulu réussi le tour de force de nous reposer l’oeil là où YouTube à plus des airs de prospectus publicitaire.

Oui la critique est sévère mais je pense que les sites de vidéo en ligne, de part leur audience et la place qu’ils ont pris dans notre société de l’infirmation méritent un meilleur traitement et surtout plus d’attention de la part des concepteurs.

Je vois encore bien trop souvent des articles ou des billets qui mélangent l’utilisabilité et l’expérience utilisateur. Je vous propose donc de régler cette ambiguïté une bonne fois pour toute avec cet article : The Battle Between Usability and User-Experience. L’auteur y explique clairement les deux concepts et utilise cette très bonne métaphore : les routes.

Utilisabilité = simplicité d’usage

Une autoroute est un très bon exemple des principes d’utilisabilité appliqués aux routes :

• elle demande moins d’efforts mentaux (car elle est large et rectiligne)
• elle occasionne moins d’erreurs (car toutes les voitures y roulent dans le même sens)
• elle est plus productive (on y roule plus vite et toutes les aires de repos se ressemblent)…

Expérience utilisateur = plaisir d’usage

Une petite route de campagne illustre très bien l’expérience utilisateur :

• elle est visuellement agréable (paysages)
• elle procure de belles sensations (visuelles, olfactives…)
• elle suscite l’intérêt (par la diversité des villes traversées)…

Moralité

Dans certains cas de figure, l’expérience utilisateur peut aller à l’encontre de l’utilisabilité (mais c’est quand même rare). En fait tout dépend du contexte d’usage : s’il s’agit d’une application d’entreprise, on privilégiera l’utilisabilité, s’il s’agit d’un service grand public, on… fera en fonction ! Je suis désolé mais je ne pense pas que l’on puisse appliquer de règle. Encore une fois, c’est selon.

/!\ Article initialement publié sur FredCavazza.net.