SimpleWeb.fr

En ce moment il ne se passe pas une journée sans que j’entende parler de l’iPad. Et ça ne risque pas de s’arrêter car de nombreuses machines concurrentes sont en préparation chez Dell, HP, BlackBerry… J’ai déjà eu l’occasion de m’exprimer sur les nombreuses possibilités de ces machines (cf. Quels modèles d’interaction pour les touchbooks ?), mais aujourd’hui je m’interroge sur la pertinence de les assimiler à des ordinateurs.

En effêt, même si les touchbooks embarquent des composants électroniques et sont propulsés par des systèmes d’exploitation dérivés de l’informatique traditionnelle, le contexte d’usage de ces terminaux diverge complètement des usages que l’on peut faire avec un ordinateur. Comprenez par là que vous ne faite pas du tout la même chose assis à une chaise devant votre ordinateur (avec un grand écran, un clavier et une souris) qu’affalé dans votre canapé avec votre touchbook (et vos gros doigts).

Ainsi, Apple communique déjà sur les grands sites web proposant une version adaptée aux contraintes de son touchbook (pas de Flash, largeur d’écran limitée, manque de précision du clic…) avec les iPad ready websites. Autre exemple, YouTube qui propose une interface simplifiée à destination des terminaux nomades : YouTube Leanback offers effortless viewing.

L'interface épurée de YouTube Leanback

Si vous allez sur www.youtube.com/leanback, vous pourrez ainsi profiter d’une version épurée et en plein écran que l’on peut consommer en position détente (”Lean back” = “Allongé“) avec une manipulation au clavier :

Plus récemment nous avons également l’exemple fracassant de Flipboard, une startup qui propose une application de visualisation de vos flux d’activité Facebook / Twitter/ … dans un format beaucoup plus avantageux (de type magazine papier) : Flipboard, New “Social” iPad Magazine will be Powered by Semantic Data.

Twitter comme un magazine sur votre iPad avec Flipboard

Là encore l’idée est de proposer une expérience utilisateur plus immersive et surtout bien plus agréable à manipuler avec une interface tactile :

Dernier exemple avec Cooliris, qui proposait déjà un plug-in de visualisation des images (cf. Le web dans un écrin avec Cooliris) qui vient tout juste de sortir Discover, une application permettant de parcourir Wikipedia dans un format “magazine” : Discover by Cooliris: Wikipedia Never Looked This Good.

Wikipedia comme un magazine sur votre iPad avec Cooliris

Là encore l’idée est de proposer une expérience plus riche et surtout bien mieux mis en scène que des “simples” pages de wiki :

Notez que je ne critique pas Wikipedia (qui vient tout juste de refondre son site) ni la mise en page des articles qui remplissent parfaitement bien leur rôle informatif. Mais force est de constater que l’on peut faire ds choses étonnantes et tout à fait intéressantes en jouant uniquement sur la mise en page.

À la question “Faut-il ré-inventer le web pour les touchbooks“, je répondrais qu’il n’est pas tant question de ré-inventer le web mais plutôt de repenser les interfaces de consultation. Ainsi les sites web de Twitter et Wikipedia sont et restent optimisés pour un ordinateur, mais l’éditeur fournit un navigateur adapté au terminal afin de maximiser l’expérience utilisateur.

Je ne peux que constater l’efficacité du résultat et me réjouir de l’intérêt porté au confort et à l’expérience d’utilisation. De plus, les éditeurs tiennent peut-être là le moyen de rentabiliser leur matière première : Le site web est gratuit (financé par la publicité) et accessible avec n’importe quel terminal, mais la version adapté aux spécificités d’un smartphone ou touchbook est payante (ou financée autrement avec du contenu additionnel).

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.

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.

Le nouveau site de Castorama

Le nouveau site de Voyages SNCF

Le nouveau site du 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.

Il n’a pas fallu très longtemps au Dr Jakob Nielsen et son équipe pour publier une première étude sur l’utilisabiltié de l’iPad : iPad Usability: First Findings From User Testing. Chose rare : L’analyse est complète et elle est gratuite. Ce sont donc deux raisons pour vous précipitiez dessus.

Plusieurs choses sont à retenir de cette étude :

• Les utilisateurs préfèrent les applications aux sites web (même si l’application est payante ?) ;
• Malgré le très bel écran de la machine, les textes sont généralement suffisamment grands pour être lus mais trop petits pour être touchés avec précision (notamment les liens) ;
• Comme tous les éléments de l’interface sont potentiellement  interactifs, les utilisateurs ne savent pas où cliquer ;
• Les conventions d’interface utilisées avec succès sur l’iPhone ne fonctionnent plus réellement sur l’iPad car la surface d’affichage est plus grande (donc les éléments plus éloignés les uns des autres).

En règle générale, c’est la navigation qui semble avoir posée le plus de problèmes aux utilisateurs car aucune des applications testées ne se comportent de la même façon. L’exemple donné est celui d’un clic sur une photo qui peut provoqué 5 réactions différentes (rien, zoom, redirection, affichage d’autres photos, affichage d’options). Je pense que l’absence de survol de la souris empêche les utilisateurs d’anticiper l’action à venir.

Il existe également de nombreuses disparités dans la façon de scroller un texte (de haut en bas, de droite à gauche, à l’intérieur d’un cadre…) ou même de s’orienter dans un site. Illustration avec l’application d’USA Today où il faut cliquer sur le logo pour accéder aux rubriques :

L'application iPad d'USA Today

Beaucoup d’exemples dans cette étude tourne autour des applications de news (normale car elle sont les plus riches en contenus) et certaines fonctionnalités “standards” que l’on trouve sur un site web font cruellement défaut : Le bouton “Back“, la recherche et le retour à la page d’accueil en un clic. Pour plus d’infos là-dessus, je vous recommande les deux articles de Benoît Drouillat : Premiers regards sur les applications iPad de plusieurs journaux en ligne et Les premières applications iPad des médias français.

Rassurez-vous, le bilan semble bien sombre mais les utilisateurs ont tout de même montré beaucoup d’enthousiasme et d’émerveillement devant cette machine qui fascine autant qu’elle déroute. Les conclusions de l’étude convergent vers le besoin de définir des conventions d’affichage et d’interaction (l’équivalent des iPhone Human Interface Guidelines).

L’étude pointe également du doigt les usages pour lesquels l’iPad se révèle (ou se révèlera) particulièrement à l’aise : Le butinage de contenus sans but précis et les environnements immersifs.

Pour avoir testé l’iPad pendant quelques minutes, mes premières impressions ont également été très bonnes mais le système d’exploitation fait rapidement apparaitre les lacunes de la machine : Aucune possibilité de gérer plusieurs comptes utilisateurs (dommage pour une machine familiale), pas de système de fichiers (donc impossible d’éditer un document en local), pas de mode “édition” dans les Google Apps…

Les touchbooks sont assurément une révolution dans notre façon d’appréhender l’outil informatique et de consommer des contenus et services en ligne, et l’iPad en est le plus digne représentant. Pour le moment les usages et pratiques sont en train de se mettre en place (l’iPad n’est ni un ordinateur ni un smartphone) mais tout ceci est très encourageant et surtout stimulant (tant de choses à ré-inventer !).

Il en va de même pour les ebooks dont les interfaces sont encore perfectibles (cf. Kindle 2 Usability Review), et les choses ne risques pas de s’arranger avec l’ouverture du reader d’Amazon aux applications tiers…

Le site Webcredible nous propose ce mois-ci un très bon article résumant 10 comportements-types constatés lors de sessions de test : 10 unexpected online user behaviours to look out for. Ces comportements sont bien connus mais c’est toujours une bonne chose de les résumer pour ne pas les oublier dans vos travaux quotidiens de conception :

• Aveuglement dû aux bannières. Depuis plus de 10 ans que le web existe et que les utilisateurs se font matraquer les yeux de bannières qui bougent et qui flashent, ces derniers ont développés un mécanisme inconscient de protection contre ces agressions visuelles. Surnommé ”banner blindness“, ce phénomène se traduit ainsi : La partie inconsciente du cerveau des utilisateurs leur masque les éléments assimilés à de la pollution visuelle (tout ce qui bouge en haut de page) pour diminuer la charge cognitive. Conséquence : Les éléments de la page avec un traitement graphique trop lourd (animation, beaucoup de couleur dans un petit espace…) sont tout simplement ignorés, et les utilisateurs n’en ont pas forcément conscience.
• Vision tunnel.  Plus vous demandez à un utilisateur d’effectuer une tâche complexe et plus il va concentrer son attention et réduire son champ de vision. Conséquence : Les éléments en périphérie de page ne sont pas vus.
• Esquive de la page d’accueil. Après quelques années de pratique, les utilisateurs savent qu’ils ne trouveront pas ce qu’ils cherchent sur la page d’accueil car le contenu utile ou les fonctionnalités sont dans les pages intérieures. Conséquence : Ils cherchent à quitter au plus vite cette page d’accueil pour explorer les pages intérieures.
• Manque de patiente. Personne n’aime être assis devant un écran et être dans une situation d’échec. Conséquence : Si les utilisateurs de votre site ne trouvent pas rapidement ce qu’ils cherchent, ils vont avoir tendance à le chercher ailleurs sans persévérer.
• Recours excessif au défilement (ou au clic). Contrairement à ce que vous pouvez penser, cliquer ou scroller n’est pas un problème pour els utilisateurs, pire : Ils en abusent. J’ai déjà à de nombreuses reprises pu observer des utilisateurs en panique qui se mettent à faire défiler la page dans tous les sens ou à cliquer n’importe où dans l’espoir de se sortir d’une situation de détresse. Conséquence : S’ils ne trouvent pas ce qu’ils cherchent, les utilisateurs s’énervent et passent en mode “panique”.
• Survol des contenus avec déficit d’attention. En arrivant sur une page qu’ils ne connaissent pas, les utilisateurs commencent par la parcourir de façon chaotique sans réellement s’attarder sur un élément précis. Conséquence : Ils survolent la page et interprètent les bribes d’informations que leurs yeux ont réussis à accrocher.
• La force de l’habitude. Internet est encore un média jeune et intimidant pour bon nombre d’utilisateurs qui progressent à tâtons. Une fois qu’ils se sentent à l’aise dans une tâche (consulter son compte en banque, publier des photos…) ils n’apprécient pas du tout devoir recommencer. Conséquence : Les changements trop importants sur un site peuvent générer beaucoup de frustrations.

Voilà l’essentiel des comportements-types que l’on peut retrouver sur la majorité des internautes. Une fois que vous les avez en tête, il suffit de les intégrer comme des contraintes dans vos travaux de conception :

• Pas trop de trucs qui bougent à l’écran (vous ne pouvez attirer l’attention qu’une seule fois) ;
• Rapprocher visuellement ou géographiquement les éléments qui ont un rapport entre eux ;
• Evitez une trop forte densité de l’information en injectant du blanc et des zones de respiration (quitte à allonger vos pages en hauteur) ;
• Optimiser votre système de navigation (en testant différents cas d’usage de flux de navigation) ;
• Procéder petites évolutions régulières plutôt que par versions majeures (un site web n’est pas une application informatique).

Si vous avez relevé d’autres comportements-types ou avez d’autres conseils génériques, n’hésitez pas à les déposer en commentaire.

Suite à la publication d’un tutoriel il y a quelques années (Des tableaux plus simples, oui je sais il y a un problème d’encodage) je me rend compte qu’il y a bien longtemps que je n’ai pas abordé le sujet des tableaux. C’est bien dommage car il ne se passe pas un jour sans que je croise un tableau de données en ligne.

Même si aujourd’hui la conception de tableaux de données ne pose plus trop de problème, la complexité de certains tableaux pousse les concepteurs à utiliser des astuces pour gagner de la place et faire rentrer dedans toujours plus de données et de fonctionnalités. Je vous propose donc de découvrir ces trois articles qui listent des cas très intéressants : Ultimate guide to table UI patterns, Ultimate guide to table UI patterns (même titre) et 15 Tips for Designing Terrific Tables. Je vous propose donc ma sélection d’exemples.

Chez BlinkCampaign nous avons une alternance des couleurs des rangées et des données affichées sur deux lignes :

Le tableau à double rangée de données de BlinkCampaign

Chez PulseApp nous avons des sections en guise de séparateurs :

Les sections du tableau de PulseApp

Chez BuildItWith.me nous avons des filtres dignes d’une application Apple :

Les options de filtre chez buildItWith.me

Chez Dropbox nous avons un menu déroulant d’actions contextuelles :

Le menu déroulant d'actions contextuelles de Dropbox

Enfin chez Mint nous avons de l’édition en ligne des lignes avec la possibilité de dérouler un panneau pour les données complémentaires :

L'édition en ligne étendue de Mint

Tout ceci est très inspiré et nous prouve qu’il est possible de construire des interfaces applicatives très performantes à partir de “simples” tableaux.

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.