Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Nous avons également travaillé sur une version « grand large » (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

• Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
• Ajout de la microdata Article ;
• Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
• Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
• Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
• Création d’un media print pour l’impression de l’article ;
• Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
• Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
• Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

• La page d’accueil « version mobile » ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page « normale » pèse 1,6 Mo alors que la page « mobile » pèse 158 Ko) ;
• Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
• Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
• Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
• Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

• Pour IE 10, utilisation basique des dégradés et media query ;
• Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
• Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…

Le web est constitué d’une infinité de sites, plus ou moins jeunes. Certains sites changent régulièrement, d’autres sont tellement connus qu’ils se contentent d’une refonte tous les 10 ans (W3C, IMDB, MSDN… quand les dinosaures se font une jeunesse), d’autres doivent se faire forcer la main (Propositions de refonte pour Wikipedia et Craigslist). Même s’il n’existe pas réellement de règle sur la fréquence idéale de mise à jour ni sur l’obligation de coller aux « tendances » graphiques, il y a toujours des irréductibles pour traîner des pieds. De façon surprenante, les dernières refontes majeures d’Amazon et Ebay datent d’il y a 4 ans, à moins d’un mois d’intervalle (Une nouvelle version pour eBay et Une nouvelle version pour Amazon). Ils se sont visiblement donnés le mot, car les deux ancêtres de l’internet se en train de déployer quasi simultanément une nouvelle version.

Commençons par Ebay qui semble avoir lancé son chantier légèrement en avance avec une mise en page à étages :

Cette nouvelle page d’accueil privilégie visiblement la sobriété, car elle suprime la couleur jaune historiquement utilisée dans le menu de navigation. Pour cette nouvelle version, nous avons donc droit à une hiérarchisation très formelle des unités d’information : la recherche, la navigation, la réassurance (Welcome, Shop safely) et la communauté (Popular). Une large place est encore réservée à la publicité et à l’auto-promotion (le gigantesque carrousel au centre de la page).

Concernant la page intérieure, un gros effort a été fait pour simplifier la compréhension des différentes versions d’un même produit (New, Refurbished, Used, Bundles…) et une présentation beaucoup plus proche de ce que l’on trouve sur des sites marchands traditionnels :

Avec cette refonte, Ebay souhaite donc développer la performance marchande de sa plateforme, au détriment peut-être de ses contenus ou de la communauté.

Pour Amazon la refonte est plus radicale avec un objectif d’interopérabilité : Amazon is testing a slick new site design, built with tablets in mind. Le haut de page est donc réduit au minimum avec un menu de navigation replié par défaut et un gigantesque moteur de recherche :

Visiblement cette refonte n’est que partielle, car elle ne concerne que le header. Vous constatez de plus que sur la version ci-dessus ce dernier est utilisé à des fins d’auto-promo, mais que dans sa version standard, le traitement graphique du header est d’une sobriété à toute épreuve :

Nous avons donc confirmation que le coeur de page ne change pas et que la refonte se concentre sur une réorchestration du header et principalement du menu de navigation. La raison de cette refonte est très simple : Le menu de navigation actuel fonctionne très bien sur un ordinateur, mais est très problématique sur une tablette où il n’est pas possible de survoler un item avec la souris.

Outre une plus grande sobriété pour donner plus d’importance aux produits, la motivation première d’Amazon semble donc être d’anticiper la montée en puissance des tablettes avec une conception orientée multi-écran. Pour le moment cette nouvelle version n’est pas encore déployée en Europe, et j’attends avec impatiente de pouvoir la tester sur différents terminaux mobiles.

MàJ (21/09/2011) : Visiblement l’approche d’Amazon fiat des émules car la BBC s’y met également : The BBC debuts new touchscreen-inspired homepage design.

Avec la généralisation des écrans plats, la résolution moyenne des moniteurs qui équipent les internautes est en constante hausse (cf. StatCounter Global Stats). En conséquence de quoi, les pages des sites web s’allongent de plus en plus. Mais qui dit « pages qui s’allongent » dit « menus de navigation qui s’éloignent« . Le (petit) monde de l’ergonomie web est donc en train de débattre sur les menus de navigation qui restent collés en haut de l’écran (Docking Navigation Bars) et même les pieds de pages statiques (Static Footer Bars).

On retrouve ainsi un très bel exemple de menu de navigation qui se positionne au-dessus du contenu lorsque vous parcourez la page chez GamePro :

De même, on trouve un exemple de pied de page statique chez Cnet :

Dans ces deux précédents exemples, la gène est minime, car ces bars affichés en permanence ne prennent pas trop de place. Par contre, on ne les remarque pas forcément (surtout le pied de page de Cnet).

On trouve également des exemples de pied de page statique sur des sites marchands comme Comet :

Une astuce très pratique, car cette barre permet de caser le comparateur et la liste des derniers produits visités, le tout sans prendre trop de place.

L’intérêt de telles techniques est discutable :

• Dans le cas d’un site de contenu, elle facilite surtout le zapping d’une page à l’autre (augmentant mécaniquement le nombre de bannières affichées) ;
• Dans le cas d’un site marchand, elle déplace dans une zone moins exposée au regard des fonctions à valeur ajoutée (comparateur et liste des derniers produits).

Je suis tout à fait d’accord avec les premières conclusions exposées dans l’article : les hauts et pieds de page statiques ne compensent en rien un système de navigation / repérage défaillant. Ceci étant dit, il est tout à fiat possible de proposer des améliorations aux exemples cités plus haut :

• Ne pas imposer ces barres affichées en permanence et donner la possibilité de les replier ;
• Utiliser un fond transparent pour ne pas trop réduire la surface d’affichage ;
• Ne pas utiliser toute la largeur de la page, mais seulement une partie (comme peut le faire Chrome avec sa status bar) ;
• Ne pas se reposer uniquement sur ces barres et doubler les fonctionnalités dans la page elle-même.

Plus que pour les sites de contenu, c’est avant pour les sites marchands que je vois un intérêt à cette technique. Il serait ainsi tout à fait envisageable de combiner les deux : le panier, compte-client et pourquoi pas la recherche dans la barre de haut de page, le comparateur, les derniers produits visités et même le rubricage dans le pied de page.

Je n’ai pas encore trouvé de site utilisant les deux, mais si vous avez des exemples, je suis preneur.

Ces derniers temps je parle de plus en plus des terminaux mobiles, et pour cause : ils prennent une place de plus en plus importante dans notre quotidien et surtout dans notre consommation de l’internet (services et contenus). Avec la multiplication des plateformes mobiles et même des formats de terminaux alternatifs, les concepteurs de sites et services en ligne s’arrachent les cheveux pour trouver des solutions à cette fragmentation.

Présentée à la communauté l’année dernière, la technique du Responsive Web Design semble apporter une réponse concrète à la prolifération des formats d’écran. Jusqu’à présent, lorsqu’un internaute visitait un site ayant plusieurs interfaces, il était redirigé vers la version du site qui correspondait le mieux à son mode d’affichage (ex : IMDB.com qui renvoie vers m.IMDB.com si vous le consultez avec un smartphone). Le principe du Responsive Web Design est de ne proposer qu’une seule URL avec une interface qui s’adapte en fonction de votre écran en exploitant différentes feuilles de styles CSS (et les media queries qui peuvent maintenant s’exprimer en largeur de page).

L’exemple ci-dessus vous permet de tester ce principe en redimensionnant la fenêtre de votre navigateur. Ce n’est donc pas qu’une question de largeur de page, mais une nouvelle façon de penser les interfaces web. L’approche de l’auteur (traduction française disponible ici : Le Web Design Réactif) est donc de prévoir à la fois une mise en page qui s’adapte (nombre et largeur des colonnes), mais également des images qui se redimensionnent et même des éléments qui sont repositionnés voir supprimés.

Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour « penser » une interface en plusieurs largeurs. Il existe heureusement un certain ombre d’article traitant de ce sujet :

• Responsive Web Design: What It Is and How To Use It
• Understanding the Elements of Responsive Web Design
• Les Media Queries CSS3
• The best responsive web design examples and resources

Avec la récente sortie de nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11…), l’utilisation de ce type de technique va devenir une réalité et évitera de devoir passer par du code javascript et des acrobaties pour assurer une t-rétro-compatibilité.

Encore une fois, c’est un sujet assez technique, mais qui concerne une approche radicalement novatrice dans la distribution de contenus et services en ligne. La plupart des réalisations déjà disponibles concernent des sites de designeurs (visibles sur MediaQueri.es), mais nous commençons à voir des sites de beaucoup plus grosse importance adopter cette technique comme la rubrique Election du Chicago Tribune :

Les exemples listés sur MediaQueri.es sont illustrés en 3 largeurs (smartphones, netbooks/tablettes et ordinateurs) mais peuvent potentiellement s’adapter à n’importe quelle interface (téléphones mobiles, TV connectées, consoles portables…). Je suis particulièrement enthousiaste quant à cette approche de la mise en page d’un site ou service en ligne. D’ailleurs une réécriture du gabarit de ce blog est en cours pour justement exploiter les medias queries. Des explications détaillées seront publiées quand ce nouveau thème sera en ligne.

Si je m’en tiens à la définition de Wikipedia : « Un site Web est un ensemble de pages Web hyperliées entre elles« . OK, mais qui a dit qu’un site web devait nécessairement être composé de plusieurs pages ? C’est sur cette réflexion que le blog Six Revision nous propose un article très intéressant : The Science Behind a Single Page Website.

Les arguments en faveur d’un site web à page unique sont les suivants :

• Tout le contenu est chargé en une seule fois ;
• Scroller est moins compliqué et risqué que de cliquer ;
• La maintenance est plus simple ;
• La densité d’information favorise un meilleur référencement.

Les arguments en défaveur des sites web à page unique sont les suivants :

• Le site est plus long à charger ;
• Le site est généralement truffé de javascript pour proposer une navigation locale (au sein de la page) ;
• Les utilisateurs peuvent être désorientés.

Une fois ces arguments énoncés, la visite d’un certain nombre de sites à page unique a finalement réussi à me convaincre de l’efficacité de cette technique : 30 Outstanding Single Page Website Designs, 88 Single Page Website Designs For Design Inspiration, 50 Examples of Modern Single Page Website Designs et aussi One Page Love.

Au final, si vous n’avez pas grand chose à raconter ou si vous savez limiter le contenu au strict minimum, cette solution s’avère particulièrement efficace. Prenons par exemple les sites dédiés à des applications mobiles qui peuvent se contenter d’une description, de quelques captures d’écran et d’un détail des fonctionnalités en bas de page comme Camera+ ou Goin’ Nutty :

De même, il existe un certain nombre d’applications en ligne à périmètre restreint qui ne nécessitent pas un site à plusieurs pages comme Silverback (ou dans une certaine mesure Basecamp), le contenu est réduit au strict minimum et est déroulé sur la hauteur de page :

Même chose pour Coda qui propose par contre un système d’onglets intérieurs pour réduire la hauteur de la page :

Beaucoup plus intéressant, certains sites marchands se content également d’une seule page comme ici pour ce modèle unique de noeud papillon chez Blixt & Dunder :

Cet exemple n’est pas le seul, car il est également possible d’en faire de même pour des produits dématérialisés comme chez Red+White.

Dernier exemple avec Grooveshark, un service d’écoute de musique en ligne :

Au final en cherchant un peu, vous pouvez vous rendre compte qu’un site avec une page unique bien conçue peut faire beaucoup mieux qu’un site avec plusieurs pages et du contenu éparpillé. Bien évidemment ceci ne concerne qu’une minorité de sites, mais cette solution me semble tout à fait viable à partir du moment où l’information apportée est pertinente et que les fondamentaux ergonomiques sont respectés (lisibilité, hiérarchisation de l’information…).

Je suis fan, pas vous ?

Après plusieurs années de surenchère graphique (coins arrondis, dégradés, reflets, typographies en image…) il semblerait que nous soyons rentré dans une phase de « retour aux fondamentaux » pour les sites web à forte audience. Illustration avec trois sites récemment rénovés qui ont opté pour une mise en page anguleuse (pour une isolation plus rigoureuse des unités d’information) et des couleurs bien tranchées (pour un meilleur contraste) : Castorama, Voyages SNCF et Crédit Agricole.

Dans les trois cas, nous retrouvons les mêmes codes graphiques : boîtes carrés et recours massif aux aplats de couleur. Je ne peux que me réjouir de cette tendance à la simplification visuelle car le repérage et la lisibilité n’en sont que bien meilleurs.

Ce qui m’étonne par contre c’est pourquoi maintenant ? Pourquoi maintenant alors que la bande passante est de plus en plus large (grâce à l’ADSL et aux tarifs très compétitifs des fournisseurs d’accès), alors que nous sommes passés par le pire (« Skip intro« )… Ces choix graphiques auraient dû être adoptés il y a bien longtemps.

Le pite dans cette histoire est que nous commençons seulement à voir le bout du tunnel avec l’arrivée de navigateur qui supportent HTML5 et CSS3, donc peuvent nativement afficher les raffinements graphiques qui nous ont donné tant de mal par le passé (coins arrondis, dégradés, ombres portées, transitions, effets typographiques…). Serions-nous rentré dans une époque du design raisonné ? Peut-être. En tout cas je croise les doigts pour que cette tendance perdure et que nous ne nous perdions plus dans la surenchère visuelle.

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 :

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 :

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 :

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 :

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! :

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.

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.

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é.

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 :

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 :

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 :

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.

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 :

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 :

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 :

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 :

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.

Les netbooks sont devenus en moins de deux ans un authentique phénomène : vendus à 11 millions d’exemplaires l’année dernière, il pourrait s’en écouler près de 35 millions d’unités en 2009 (Netbook Sales Expected To Take Off). D’après les estimations, les ventes de netbooks devraient se stabiliser d’ici à 2010 avec 18 % de parts de marché (Netbook Market Forecast & Business Strategy).

Avec un tel volume de vente, les netbooks vont avoir un impact non-négligeable sur les services en ligne. J’ai déjà eu l’occasion de m’exprimer sur les changements à prévoir sur les habitudes d’utilisation de l’internet (Les netbooks vont-ils amorcer la révolution du web 3.0 ?) et sur l’utilisabilité des systèmes d’exploitation (Intel et Jolicloud à la recherche de l’interface parfaite pour les netbooks). Je m’interroge aujourdh’ui sur l’impact que les netbooks peuvent avoir sur notre façon de concevoir un site web.

Ces petites machines ré-introduisent ainsi des contraintes que l’on croyait résolues, à commencer par la résolution de l’écran (sources = W3 Schools) :

Évolution des résolutions d’écran sur les 10 dernières années

En moins de 10 ans, les petites résolutions d’écran (800*600 px) avaient presque complètement disparues. Avec plus de 90% de part de marché, la résolution 1024*768 était devenu la référence incontestée. « Était » puisque l’on commence à voir apparaitre des résolutions exotiques dans les statistiques :

Apparition de résolutions « exotiques » dans les statistiques

Nous retrouvons ainsi en 13ème position la résolution caractéristique des netbooks (1024*600 px) juste au dessus de celle des iPhones (320*396 px). Puisqu’il existe des versions spécifiques aux iPhones, pourquoi pas pour les netbooks ?

Oui je sais, vous pourriez me dire que cela ne serait pas très rentable de développer une version spécifique pour « seulement » 168 pixels de différence, mais cette différence peut être énorme lorsque cela concerne un bouton d’action. Illustration avec le site de Voyages SNCF :

La page d’accueil de Voyages-SNCF avec les deux limites de visibilité

Comme vous pouvez le constater sur cette capture, la page d’accueil fonctionne parfaitement en résolution 1024*768 mais tout se complique avec le 1024*600 car les boutons d’action sont sous la limite de visibilité.

Rassurez-vous, la situation n’est pas très dramatique car nous savons maintenant que la limite de visibilité n’est plus réellement un problème (cf. les articles Unfolding the Fold, et ClickTale Scrolling Research Report V2.0 Blasting the Myth of the Fold), mais ceci concerne surtout les sites de contenu, qu’en est-il des sites marchands ?

Peut-être pourrions-nous envisager des formulaires où le bouton d’action serait doublonné (comme sur Amazon) pour palier à ce déficit de visibilité en hauteur :

OK, mais ce n’est pas tout car les netbooks induisent d’autres contraintes :

• La saisie qui est rendu plus difficile par des claviers plus petits (surtout au niveau de la touche « Shift » qui est indispensable pour saisir des chiffres) ;
• La manipulation qui est également très difficile avec les minuscules pavés tactiles et les boutons qui sont parfois bizarrement positionnés (par exemple sur les côtés pour certains modèles) ;
• La lisibilité avec des écrans brillants (dalle « glossy » qui capte tous les reflets)…

Bref, je suis persuadé que les spécificités des netbooks devraient être prises en compte dans notre façon de concevoir les sites web et plus précisément les fonctions marchandes. Je n’ai pas la prétention de trouver une solution pour toutes ces contraintes dans cet article, mais juste d’attirer votre attention sur le « phénomène ».

Avez-vous également constaté l’apparition des netbooks dans vos statistiques de fréquentation ?