Comment les terminaux mobiles favorisent la conception gigogne des contenus et services

Saviez-vous que le web avait fêté ses 25 ans en août dernier ? 25 années d’évolution qui ont été marquées par deux phénomènes : l’infobésité et la mobilité. Si nous avons trouvé quelques parades au problème d’infobésité (moteurs de recherche contextuels, outils de veille auto-apprenants, services en ligne proposant des synthèses de l’actualité…), j’estime que nous sommes encore en phase de transition en ce qui concerne la mobilité. Il n’est pas simple de remettre en cause deux décennies pendant lesquels les contenus et services en ligne ont été conçus pour des internautes utilisant des ordinateurs. Avec l’avènement des smartphones, les usages évoluent et forcent les éditeurs à revoir leur approche.

Il paraît qu’en 2020, il y aura plus de 6 milliards de terminaux mobiles. Un chiffre qui fait sourire tant il est énorme, et pourtant, il y a actuellement près de 3 milliards de smartphones en circulation dans le monde. Le taux de pénétration des smartphones en France avoisine les 65% (soit près des 2/3 des adultes), de quoi se poser des sacrées questions sur la meilleure façon de toucher les consommateurs. Ces dernières années, Apple a essayé de nous faire croire que cette meilleure façon était de proposer une application mobile, de préférence sur iPhone. Nous avons maintenant un minimum de recul sur la question et nous commençons même à y voir plus clair (Les applications mobiles sont des outils de fidélisation, pas de conquête et App-pocalypse Now).

Le but de cet article n’est pas de relancer le débat, mais plutôt de voir plus loin. En étant en permanence connectés, les internautes développent un appétit gargantuesque pour les contenus et services : ils en demandent toujours plus. Le problème est qu’ils ont une attention limitée. Du coup, les internautes consomment des unités de contenus de plus en plus petites pour ne pas s’étouffer. Twitter et Pinterest sont de très beaux exemples de services parfaitement en phase avec notre époque : diffuser des contenus ultra-courts et/ou visuels sur le web et les terminaux mobiles. Cette approche a d’ailleurs été théorisée : Why cards are the future of the web.

C’est très certainement l’assistant mobile Google Now qui illustre le mieux cette tendance au morcellement des contenus avec le principe d’infocards :

Le principe d'infocards de Google Now
Le principe d’infocards de Google Now

Lancé en 2013, le service Google Now a eu un impact non-négligeable sur la façon d’appréhender la distribution et la manipulation de l’information : pourquoi pour chercher à créer du trafic sur un site alors qu’il suffit de « pousser » les contenus et services aux utilisateurs par petits bouts ? Ce principe d’infocards s’est révélé tellement efficace qu’il a été intégré dans le systèmes de notification de la nouvelle version d’Android :

Les notifications avancées de Android 5.0
Les notifications avancées de Android 5.0

Idem chez Apple avec les active notifications :

Les notifications actives de iOS 8
Les notifications actives de iOS 8

Avec cette nouvelle approche, les contenus sont à échelle variable : ils prennent plus ou moins de place en fonction du terminal de consultation, mais restent viables et peuvent être facilement manipulés. Le principe de la géométrie fractale est ainsi appliqué aux contenus pour faciliter leur distribution dans et en dehors des applications (The end of apps as we know them).

Tout ceci peut vous sembler abstrait, mais je peux vous assurer qu’il s’agit d’une authentique révolution dans la façon de penser les contenus et services, car cette approche façon « poupée russe » a un énorme impact sur la distribution et le taux d’engagement. L’objectif de cette conception gigogne des contenus et services est de fluidifier la distribution sur différents types de terminaux (ordinateurs, tablettes, smartphones et même objets connectés comme les montres) et de stimuler les interactions rapides (en moins de 3 secondes une notification est lue et traitée).

Bien évidemment, vous vous doutez que cette conception gigogne nécessite un changement radical dans les méthodes et outils de conception : It’s time to adopt object oriented thinking. Les unités de contenus (titres d’article, vignettes de photos ou vidéos…), de même que les éléments d’interaction (messages, alertes, boutons d’action…) sont « pensés » selon une approche objet pour leur donner un maximum de flexibilité.

Pour le moment il est plus qu’hasardeux de théoriser sur les méthodes de conception gigogne et sur la fractalisation des contenus, mais je suis persuadé que derrière ces termes complexes se cache LA solution pour exploiter au mieux les smartphones et les nouveaux usages qui se développent autour. Entendons-nous bien : quand je dis « smartphones et nouveaux usages », je fais référence aux tout derniers modèles, ceux qui exploitent les dernières versions des OS de Google et Apple et proposent ces systèmes de notifications enrichies. Petit conseil : N’attendez pas que les habitudes s’installent chez les mobinautes, car si vous n’êtes pas en capacité de réagir rapidement à cette tendance, vos concurrents les plus habiles se feront une joie de vous prendre des parts de marché.

Conclusion : il est plus que temps de clore le débat « applications natives vs. sites mobiles » et de commencer à anticiper dès maintenant les nouveaux modèles de consommation / distribution des contenus, ainsi que d’exploitation des services en ligne en situation de mobilité.

HP réinvente l’ordinateur tactile et 3D

Saviez-vous que la souris que vous avez dans la main existe depuis plus de 40 ans ? Je trouve incroyable le fait que cet objet n’est quasiment pas évolué sur une aussi longue période, cela remet en cause toutes les théories sur les cycles de vie des produits (si l’on considère que la souris est un produit en elle-même). Certes, nous avons régulièrement vu de nouveaux concepts comme les pavés tactiles géants (10/GUI réinvente le pavé tactile pour remplacer la souris) ou les claviers avec des touches programmables (Optimus Tactus keyboard). Tous ces concepts ont malheureusement pris un gros coup de vieux avec la généralisation des tablettes.

Ceci étant dit, nous savons maintenant que les tablettes ne remplaceront jamais les ordinateurs et qu’elles sont plus utilisées comme des terminaux de consultation que comme des outils de productivité (sauf cas particulier : The future of Adobe creative applications on Microsoft devices). Bref, il n’y a guère que le Leap Motion pour proposer des modalités d’interaction novatrice au grand public (cf. V2 Software Now Available for Everyone).

C’est dans ce contexte que HP a surpris tout le monde en présentant Sprout, un ordinateur hybride qui intègre un écran et un pavé tactile, ainsi qu’un projecteur et un scanner 3D.

L'ordinateur hybride Sprout de HP
L’ordinateur hybride Sprout de HP

Ce combiné se présente sous la forme d’une « station de créativité » avec un écran 23″ monté sur un pied qui intègre un projecteur / scanner 3D et un gigantesque tapis capacitif. Il ne lui manque plus que l’imprimante 3D (en fait elle est vendue en option : HP dives into 3D printing with Multi Jet Fusion). Vendu 1.990$, cet ordinateur hybride ambitionne de révolutionner l’informatique grand public et de rendre obsolètes les claviers et souris : Hands on with Sprout, HP’s keyboard-and-mouse killer.

Force est de constater que ce concept intrigue et que l’on a immédiatement envie de jouer avec cette combinaison de projecteur / tapis tactile.

Le tapis tactile du Sprout en action
Le tapis tactile du Sprout en action

De même, l’idée d’intégrer un scanner 3D ouvre d’innombrables possibilités, surtout cet ordinateur hybride est couplé avec une imprimante 3D (par exemple dans une salle de classe).

Le scanner 3D du Sprout en action
Le scanner 3D du Sprout en action

Tout ceci est donc très prometteur, mais nécessite de se confronter à la réalité du marché : un taux d’équipement des foyers en tablettes qui plafonne et des ordinateurs low-cost à moins de 400€ qui deviennent la norme. Même si le Sprout est une indéniable réussite technologique (HP reveals Sprout: A ‘blended reality’ Windows 8 PC with 3D scanning and a projected second screen), cet ordinateur hybride va-t-il trouver sa place dans des entreprises ou des foyers où les premières solutions concrètes multi-écran voient le jour, à l’image de Continuity chez Apple (How to use Apple’s Continuity, iCloud Drive and AirDrop to share files with yourself) ou Nextbit pour Android (Nextbit Unveils A Dead-Simple Way To Sync, Store Data Across Multiple Mobile Apps, Devices).

Plus on avance dans le temps, et plus je me dis que la souris est réellement l’idée du siècle, un coup de maître qui peut même se décliner en 3D avec des produits comme le SpaceNavigator. Et vous ?

À la recherche de l’interface universelle pour les applications de réalité virtuelle

J’espère ne rien vous apprendre en disant que le petit monde de la réalité virtuelle est en pleine ébullition depuis le rachat de la société Oculus par Facebook (Tout le monde veut profiter du boom de la réalité virtuelle). Et les choses ne sont pas près de se calmer avec l’annonce d’une nouvelle version du casque (First Hands-on: Oculus Rift Crescent Bay is Incredible), d’une déclinaison low cost reposant sur l’utilisation de smartphones et du lancement prochain d’une place de marché d’applications (Oculus announces mobile SDK and platform for developers).

La dernière version du casque de réalité virtuelle d'Oculus
La dernière version du casque de réalité virtuelle d’Oculus

Le problème est que pour le moment l’essentiel des efforts est porté sur les casques et sur les applications, mais pas forcément sur les périphériques qui vont avec : Virtual reality check, why controllers haven’t caught up to the Oculus Rift. Il en résulte un gros retard accumulé par les fabricants d’accessoires. Je me souviens avoir connu une situation équivalente avec la frénésie autour de Second Life : il avait fallu attendre quelques années avant que des produits comme le Space Navigator se généralisent (ceci étant dit, j’attends toujours une compatibilité avec Minecarft). Pourtant les choses sont en train de changer dans le domaine des jeux avec l’arrivée sur le marché de manettes adaptées comme les Hydra de RazR ou les Stem de chez Sixense.

Les manettes de réalité virtuelle de chez sixense
Les manettes de réalité virtuelle de chez sixense

Comme toujours, ce sont les jeux qui tirent l’innovation. Ce n’est donc pas un hasard si les manettes et interfaces visuelles de jeux commencent à être à peu près au point. Mais ce n’est pas dans les jeux que la réalité virtuelle trouve ses applications les plus intéressantesWhat’s the Killer App for VR? Maybe Not Games, Oculus Developers Say. Nous commençons ainsi à voir apparaitre des interfaces de réalité virtuelle pour des services du quotidien comme Netflix qui vient de lancer son interface à 360° : Netflix made an awesome virtual reality interface for the Oculus Rift.

Le résultat est très impressionnant visuellement, mais pas pratique du tout à utiliser. De même, celles et ceux qui ont pu mettre la main sur un kit en carton pourront vous confirmer que l’interface proposée pour Youtube est également déroutante. Le problème est que nous n’avons pas l’habitude de voir flotter des informations autour de nous, et que nous avons encore moins l’habitude de sélectionner ou naviguer en utilisant le regard (ou à défaut la position de la tête). De plus, les claviers et souris font partie de notre quotidien, et même si l’utilisateur d’un ordinateur se sent perdu, il lui suffit de baisser les yeux pour surveiller / corriger la position de ses mains. Ce qui n’est pas possible avec un casque de réalité virtuelle, car le champ de vision est intégralement occupé.

Comme vous l’aurez deviné, la saisie de texte est extrêmement complexe, voire carrément impossible, sauf pour ceux qui maitrisent la saisie à l’aveugle. Pour bien faire, il faudrait pouvoir reproduire fidèlement vos doigts et leur mouvement, ce qui est possible avec un capteur gestuel comme le Leap Motion, mais ça ne résout pas le problème de la saisie avec les mains en l’air. Heureusement, certains se sont penchés sur ce problème, notamment le studio Lab Coat qui propose VR Typing Trainer une application d’entrainement : We should be learning to type in the Oculus Rift.

Un clavier virtuel affiché avec un casque Oculus
Un clavier virtuel affiché avec un casque Oculus

Comme vous pouvez le constater, le résultat n’à pas l’air très probant. Je dirais même plus que ça ne donne pas du tout envie. Faut-il pour autant abandonner la possibilité de saisir du texte dans un environnement virtuel ? Peut-être, car nous atteignons là les limites des casques immersifs : ils nous coupent de l’environnement extérieur et de nos repères (c’est le but). Idéalement il faudrait un casque avec un écran que l’on peut rendre transparent pour pouvoir rapidement se « raccrocher à la réalité ». Mais cela fera l’objet d’un autre article…

Faut-il abandonner les menus façon hamburger ?

Voilà presque 7 ans que l’iphone a été mis sur le marché. Sept années au cours desquelles les éditeurs se sont arraché les cheveux pour adapter leur site web aux contraintes des smartphones. Au fil des années les concepteurs se sont rapidement rendu compte qu’il n’y aurait jamais assez de pixels pour afficher un menu de navigation digne de ce nom et qu’il fallait donc s’en passer. Assez rapidement, un consensus a été trouvé autour d’un symbole abstrait en forme de hamburger. L’origine de ce symbole remonterait au PARC et désignerait une liste ou un empilement d’items (Who Designed the Hamburger Icon?).

Variation autour du thème du hamburger utilisé comme icon
Variation autour du thème du hamburger utilisé comme icône (Source : Nick Meloy)

Le problème est que ce pictogramme pose des problèmes d’interprétation. Autant le symbole de la loupe est universellement associé à une recherche (The Magnifying-Glass Icon in Search Design: Pros and Cons), autant ce symbole de hamburger n’évoque pas grand chose aux mobinautes : Don’t Make These Mobile Menu Mistakes. Du coup, nous avons eu droit ces derniers mois à une série d’articles déconseillant l’utilisation de ce symbole : Don’t Make These Mobile Menu MistakesThe Hamburger is Bad for YouWhy and How to avoid Hamburger MenusHamburgers & Basements: Why not to use left nav flyoutsThe Advantages of table views over left nav flyoutsAn update on the hamburger menuBasement Menus and Breaking the Rules of App Design

Les auteurs de ces articles sont unanimement tous d’accord pour dire que « la forme suit la fonction« , qu’il ne faut surtout pas « enfreindre le modèle mental des utilisateurs » et que comme le rappel Dieter Rams, « Good Design Makes A Product Understandable« . OK… soit… Je ne sais pas pour vous, mais la lecture de ces articles me laisse sur ma faim dans la mesure où ils ne donnent pas de solution alternative viable. Je sais bien que « Good Design Is Unobtrusive« , mais ça ne me dit pas comment résoudre le problème de place : le manque drastique de pixels nous force à trouver des compromis, pas des solutions idéales qui fonctionnent dans 100% des cas. Adopter le pictogramme du hamburger est d’autant plus tentant qu’il a été utilisé à de nombreuses reprises, notamment par des applications mobiles et desktop, cela créé donc un précédent :

Les différentes implémentations du pictogramme hamburger
Les différentes implémentations du pictogramme hamburger
(Source : Designing for Thumbs)

Heureusement certains apportent des données concrètes à ce débat, notamment l’équipe d’Exis Web avec une série d’articles : Do Users Understand Mobile Menu Icons?Mobile Menu AB Tested: Hamburger Not the Best Choice?Hamburger vs Menu: The Final AB Test. Plusieurs versions du bouton « Menu » ont ainsi été testées auprès de presque 240.000 personnes.

Comparaison des quatre versions du menu
Comparaison des quatre versions du bouton

Il ressort de cette étude que les deux premières versions fonctionnent le mieux, avec une préférence pour le libellé « MENU » encadré. Loin de moi l’idée de remettre en cause les résultats de cette étude… mais cette version ne règle pas forcément le problème de place. Parfois, vous n’avez pas d’autres choix que d’utiliser le pictogramme du hamburger parce que vous n’avez ni la place, ni le temps de trouver une meilleure solution (Mobile Navigation Menus and Great User Experience). Parfois, le choix n’est pas ici guidé par des règles ergonomiques, mais par le pragmatisme : il faut que ça rentre. Même s’il n’est pas parfait, ce pictogramme a été adopté par de nombreux sites, chacun en faisant sa propre interprétation : Le Parisien l’isole à gauche, Eurosport le met en italique, Le Figaro l’associe à son logo et 20Minutes la place à droite avec des puces.

Exemples d’implémentation du picto en forme de hamburger

Dans les exemples cités plus haut, ce n’est pas tant le picto qui pose problème, mais ses variations. Il serait bien moins risqué d’adopter une implémentation « standard » (ex : la responsive navbar de Boostrap). Ce n’est pas un hasard si les quatre exemples précédents sont issus du monde de l’édition : les portails d’information sont ceux qui ont le plus besoin de place, donc qui doivent impérativement masquer le menu de navigation. Deux sites s’illustrent dans cette catégorie : le Time Magazine (avec un picto qui change de couleur quand il est activé) et USA Today (avec l’intégration d’un moteur de recherche et d’une croix pour fermer le menu).

Deux exemples réussis
Deux exemples réussis d’implémentation du picto en forme de hamburger

Puisque nous parlons d’afficher / masquer le menu de navigation, il est également très important de s’assurer d’une bonne réactivité de l’interface. Pour cela il existe une astuce très pratique dans la dernière version de Chrome pour Android : 300ms tap delay, gone away.

Donc… le pictogramme en forme de Hamburger s’impose petit à petit comme la convention de conception pour désigner un menu dans les interfaces mobiles. Avec le temps, les mobinautes vont finir par s’y habituer et développer un nouveau modèle mental (associer le picto du hamburger à un menu de navigation). Là où la situation se complique, c’est que certains commencent à l’utiliser pour gagner de la place sur la version desktop de leur portail : Le Time Magazine, Fortune, Money ou encore L’Express.

Le portail Money où la navigation est cachée par défaut
Le portail Money où la navigation est cachée par défaut

Certes, cela donne plus de visibilité à ce picto et accélère (en théorie) l’apprentissage de ce à quoi il correspond, mais cela génère également un gros risque de désorientation : Killing Off the Global Navigation: One Trend to Avoid. Je suis donc très mitigé quant à cette pratique, et je rejoins l’avis de l’auteur de l’article précédent : cette solution doit impérativement être testée pour valider sa viabilité.
Comme le dit le proverbe : « Il faut savoir balayer devant sa porte« , je me suis penché sur l’exercice délicat qui consiste à adapter la mise en page de mes blogs aux smartphones. Mon approche a été de partir de la version mobile en se concentrant sur l’essentiel : le titre du blog et les derniers articles. J’ai ensuite rajouté des éléments d’interface permettant de basculer à un autre blog (la flèche qui pointe vers le bas à droite du titre), d’afficher la liste des derniers articles (la bordure et l’étiquette avec un chevron à gauche) et d’afficher les outils (le picto hamburger en haut à droite).

La mise en page de mes blogs sur un smartphone
La mise en page de mes blogs sur un smartphone

La justification de ces choix est la suivante :

  • Utiliser une flèche pour afficher la liste des blogs est une convention déjà utilisée dans les menus déroulants, cela permet également d’utiliser le titre du blog qui est déjà affiché ;
  • La bordure à gauche fonctionne comme un indice visuel sur l’existence d’un panneau que l’on peut déplier en « tirant » sur la languette (comme le fait le site du Time Magazine dans sa version mobile) ;
  • J’ai adopté le picto du hamburger pour signaler l’existence d’un menu déroulant et je l’ai positionné à droite du titre en bout de ligne, comme le fait le navigateur de façon native (à droite de la barre d’adresse).

Le résultat est, je pense, satisfaisant, même si je trouve le contraste encore trop faible.

Conclusion : le pictogramme du hamburger n’est pas la solution idéale, mais c’est un compromis intéressant pour les concepteurs qui manquent de place et de temps, à partir du moment où il est implémenté sans exantricité. Ceci étant dit, rien ne vous empêche de réfléchir à des alternatives et de tester l’impact pour valider les changements.

Votre page d’accueil est inutile, et maintenant ?

Cela fait plusieurs années que les éditeurs de contenu s’arrachent les cheveux pour essayer de repenser l’expérience de lecture ou la mise en page pour pouvoir augmenter à la fois leur inventaire publicitaire (le nombre de pixels qu’ils peuvent vendre aux annonceurs) et la fréquentation (le nombre de visiteurs et de pages vues). Le problème est que l’équilibre entre confort de lecture et monétisation est très délicat à trouver. Dernièrement, ces éditeurs ont été confrontés à un double défi :

Autant vous l’avouer directement : je n’ai pas la formule magique, car il y a tout simplement trop de facteurs à prendre en compte. La solution pour redonner de l’intérêt à la page d’accueil et faciliter la circulation dans les pages intérieurs est donc à chercher dans le compromis et dans les astuces ergonomiques.

Concernant les compromis, il semble y avoir un consensus pour limiter le nombre de liens en page d’accueil. Ceci libère mécaniquement de la place pour pouvoir afficher plus d’information sur les articles ou des photos plus grandes (les sites du Washington Post et du Boston Globe sont de beaux exemples de page d’accueil saturée). Le deuxième avantage de cette approche est qu’en diminuant le nobre d’articles en page d’accueil, on augmente la fréquence de rotation, donc les raisons pour un internaute de revenir et y découvrir des contenus frais. Le NY Times a opté pour la première solution avec une page d’accueil très sobre (une seule photo) et de larges extraits des articles :

La page d'accueil du NY Times
La page d’accueil du NY Times

À l’inverse, le portail Vox propose uniquement les titres des articles pour laisser les photos s’exprimer :

La page d'accueil de Vox
La page d’accueil de Vox

Même approche chez RTL où l’on choisit de concentrer l’attention sur l’article principal et de laisser les internautes descendre dans la page s’ils le souhaitent à la découverte d’autres contenus :

La page d'accueil de RTL
La page d’accueil de RTL

Le cas de RTL est particulier, car c’est une station de radio, et qu’ils ont choisi de privilégier les contenus à l’antenne. Cette forte baisse du trafic sur la page d’accueil est néanmoins préoccupante pour  les portails d’information, car c’est un carrefour d’audience très important et une zone d’orientation essentielle pour valoriser les différents contenus (et pas seulement les dernières actualités).

Du coup, d’autres éditeurs proposent des astuces comme Quartz ou le Time Magazine qui affichent la liste des derniers articles en colonne de gauche :

La page article du Time Magazine
La page article du Time Magazine

L’utilisation de la colonne de gauche semble être payante puisque cette mise en page a été déclinée sur les autres portails du groupe (Money, Fortune). Une solution particulièrement pratique pour optimiser l’affichage sur les tablettes et smartphones, surtout dans la mesure où ils parviennent à caser une bannière dans la colonne latérale :

La version mobile du Time Magazine (accueil, article, menu)
La version mobile du Time Magazine (accueil, article, menu)

Une autre technique consiste à utiliser la colonne de gauche pour afficher toutes les rubriques et illustrer ainsi la profondeur et/ou la richesse du site, comme le fait le LA Times :

La page article du LA Times
La page article du LA Times

Cette solution permet de gagner une précieuse place en haut de page (par exemple pour des bannières ou de la publicité native) et sert également à mettre en avant leur Visual Browsing, un mode de navigation principalement dédié aux tablettes :

La navigation visuelle du LA Times
La navigation visuelle du LA Times

Comme vous pouvez le constater, il n’y a pas de solution miracle, et chacun essaye de trouver le bon compromis. Pour le moment je constate des tentatives de simplification plutôt timides chez les portails de presse français, mais je me doute qu’ils vont devoir opter pour des solutions plus radicales s’ils veulent fidéliser leur lectorat et surtout mieux s’adapter aux nouveaux usages (notamment mobile).

LA grande question à vous poser est la suivante : votre site est-il lui aussi toucher par une baisse des visites sur la page d’accueil, au profit des pages intérieures. Si c’est le cas, je vous invite à étudier les refontes opérées par ces éditeurs de presse et à faire les transformations qui vous semblent les plus opportunes. Dans tous les cas de figure, il est impératif de surveiller de très près l’impact des médias sociaux sur les flux entrants (pages intérieures vs. page d’accueil) et surtout d’anticiper le basculement des consultations vers des terminaux mobiles. Souvenez-vous de l’analogie de la poule et de l’oeuf : n’attendez pas d’avoir de nombreux mobinautes pour adapter votre mise en page, anticipez plutôt ce changement de comportement pour en bénéficier et non le subir.

Les commentaires sont fermés

La revanche des interfaces textuelles

Dans la chronologie des interfaces homme-machine, il y a eu les interfaces à lignes de commande (Command-line interface), puis les interfaces textuelles (Text-based user interface) et enfin les interfaces graphiques (Graphical user interface) qui sont devenues la référence aussi bien pour les applications que pour les sites web. Pourtant, à une époque pas si lointaine, les sites web n’étaient composés que de textes et de tableaux. Entre-temps, il y a eu différentes modes graphiques, dont des choses très expérimentales en Flash, mais ces dernières années nous assistons un retour à la simplicité avec le flat design. Il n’y a plus qu’au cinéma que l’on fantasme sur des choses très spectaculaires (Des interfaces textuelles aux interfaces fictionnelles).

Aujourd’hui, avec l’avènement des smartphones, le pragmatisme l’emporte sur l’esthétisme et les sites à gros volume de contenus n’hésitent plus à adopter des thèmes graphiques minimalistes, à l’image de Quartz, du Time Magazine, de Techmeme ou encore de Slashdot. Le point commun de ces portails est de n’utiliser que du texte, à peine une petite image pour le logo.

La nouvelle charte graphique de Slashdot
La nouvelle charte graphique de Slashdot

Arriver à conserver une identité graphique en ne jouant que sur les typos et les couleurs est une réelle prouesse, pourtant il y a une réelle différence entre les sites du NY Times et du Guardian. C’est en quelque sorte un retour aux sources qui n’est pas sans déplaire aux adeptes de la simplicité comme Jason Fried de Basecamp : Why I’m Sick of Slick Design.

Du coup, on commence à théoriser ce que pourrait être un web textuel : Chromeless: The Content is the Interface. J’attire votre attention sur le fait que la réalisation d’une interface web textuelle est un exercice très périlleux. Il y a ainsi une grosse différence entre Craiglist (très austère) et Delicious (très sophistiqué) : le ressenti n’est pas du tout le même.

L'interface textuelle de Delicious
L’interface textuelle de Delicious

Comme précisé plus haut, les interfaces textuelles ne sont pas à considérées comme des lubies de designeurs ou des exercices de style. Elles correspondent à une vraie réalité de marché : l’avènement des smartphones et la pénalisation par Google des sites trop longs à charger poussent les éditeurs à adopter des chartes graphiques et mises en page toujours plus épurées pour diminuer les temps de chargement et simplifier la maintenance du code. Autant les vitrines, boutiques en ligne ou sites corporate ont un impératif d’image (quoi que cela ne soit pas antinomique), autant les sites de contenu peuvent aisément se passer des fioritures et raffinements graphiques.

Une refonte de mes blogs est d’ailleurs en cours pour mieux coller à ce nouveau contexte : même si les terminaux mobiles ne représentent que 15% des visites, l’important est de valoriser le contenu, pas l’emballage.

La future charte graphique de mes blogs
La future charte graphique de mes blogs

Si l’on se réfère au principe de l’architecture moderne « Form follows function« , le retour aux interfaces textuelles est plutôt une bonne chose : privilégier la lisibilité des contenus et optimiser l’affichage pour les terminaux mobiles.

De l’évolution des tableaux de bord des voitures

Les tableaux de bord des voitures sont un sujet de réflexion très intéressant. D’une part, car les tableaux de bord donnent de la personnalité aux voitures, d’autre part, car une mauvaise conception peut tuer des vies. Si je ne dis pas bêtises, la notion de simplexité (l’art de rendre simple, lisible, et compréhensible les choses complexes) sort des bureaux d’étude de Renault. Bref, c’est un parfait sujet d’étude, d’autant plus avec l’arrivée de l’affichage numérique.

Jusqu’à présent, les tableaux de bord de nos voitures étaient essentiellement analogiques, comme nous le prouve la très belle collection de Car UX.

Panorama des tableaux de bord de voitures
Panorama des tableaux de bord de voitures

Cependant les choses sont en train de changer, notamment chez certains constructeurs haut de gamme qui se servent de leur tableau de bord comme argument de vente pour démontrer la capacité d’innovation. C’est ainsi le cas d’Audi avec le tableau de bord entièrement numérique de la prochaine version de sa TT : The Audi TT’s New ‘Virtual Cockpit’ Looks Incredible.Ce virtual cockpit, présenté au salon CES de lLas Vegas propose trois interfaces : Driving mode, pour la conduite courante, Navigation mode, avec les instructions cartographiques, et Media mode, pour manipuler la radio et le lecteur multimédia.

L'interface graphique de la prochaine Audi TT
L’interface graphique de la prochaine Audi TT

Vous conviendrez que le résultat est très convainquant. Les concepteurs pourraient néanmoins aller plus loin et proposer quelque chose de beaucoup plus futuriste. C’est le cas chez GM et son Advanced Design Studio qui réfléchit à des interfaces en rupture avec ce que nous connaissons : GM Concept UI.

Le concept de tableau de bord numérique de GM
Le concept de tableau de bord numérique de GM

Le résultat est très spectaculaire et nettement plus futuriste. En version animée, ce tableau de bord baptisé Elmiraj est beaucoup plus impressionnant :

Mais la palme revient très certainement à Tesla Motors pour l’incroyable panneau tactile de sa Model S : Tesla’s Groundbreaking UX, An interview with User Interface Manager Brennan Boblett.

Le tableau de bord de la Model S de Tesla
Le tableau de bord de la Model S de Tesla

La zone d’affichage derrière le volant est plutôt restreinte, mais l’immense écran tactile de la console centrale est assurément une idée de génie. L’équipe de conception avait un cahier des charges assez précis et devait suivre un certain nombre de principes pour l’interface qui devait être intelligente, inspirante, sophistiquée et empowering (mot que je ne sais toujours pas traduire).

L'interface de la console centrale de la Model S de Tesla
L’interface de la console centrale de la Model S de Tesla

Le résultat est tout simplement bluffant : tous les aspects de la voiture peuvent être contrôlés à partir de cet écran tactile, et le rendu graphique est impressionnant. Ça doit être un vrai régal pour le passager !

Je me demande dans quelle mesure les industriels peuvent innover dans ce domaine. J’imagine qu’il doit y avoir des contraintes réglementaires en France ou en Europe (à confirmer). Dans tous les cas de figure, quand je constate l’anormale augmentation des prix des voitures de Mr tout-le-monde (citadines…), je me dis que nos constructeurs nationaux pourraient faire un petit effort. J’aime bien le système R-Link de Renault, mais vous ne trouvez pas que ça manque d’ambition ? Serait-ce vraiment trop demandé, surtout quand on connait la valeur réelle d’une voiture (7.500 € pour une Logan contre 20.000 € pour certains modèles de Clio).

MàJ (18/04/2014) : Dans un autre genre, il y a aussi ce rétroviseur intérieur qui permet d’afficher la vue d’une caméra placée sur le pare-choc arrière : Nissan Just Revolutionized The Rearview Mirror.

Le retour du chemin de fer pour les sites web narratifs

En des temps reculés, la plupart des sites web étaient informatifs (ils fournissaient de l’information à consulter), mais certains étaient contemplatifs. Les technologies d’animation comme Flash permettaient aux designers de créer des sites visuellement très riches dont l’unique but était de contenter l’oeil (très pratique quand on n’avait pas grand-chose à raconter). Avec la montée en puissance des terminaux mobiles, les technologies de RIA comme Flash ont été délaissées au profit de technologies standards offrant des possibilités similaires (HTML5 donne de la profondeur à la narration).

Je sais bien qu’il n’est pas très avisé de parler de « mode », mais je constate néanmoins qu’un certain nombre de sites proposent une expérience de lecture beaucoup plus contemplative. Ces sites sont en effet conçus pour être lus selon un schéma prédéterminé et non de façon libre comme les liens hypertextes le permettent. Dans le monde de l’édition, le chemin de fer désigne la temporalisation de la narration selon l’emplacement des différents éléments de la page. J’ai comme l’impression que cette notion de chemin de fer est mise en application, notamment sur le site de Slack qui se parcourt de haut en bas et de gauche à droite :

La cinématique de lecture du site de Slack
La cinématique de lecture du site de Slack

L’agencement des différents éléments de la page fait que l’on déroule la page ers le bas en découvrant les différentes unités d’information, puis on clique sur « Next » et on recommence sur la page suivante. Dans la mesure où les textes sont courts et les illustrations percutantes, le site se parcourt comme une brochure.

Idem chez iSketchNote où les transitions et cinématiques d’apparition des différents éléments à mesure que l’on parcourt la page vers le bas font que l’on reste scotché à son écran sans avoir envie de cliquer.

Le site de iSketchNote
Le site de iSketchNote

On trouve des techniques de mise en page similaires chez Mozilla ou Apple : plutôt que de répartir l’information sur différentes pages, les contenus sont empilés les uns au-dessus des autres et apparaissent ou s’animent lorsque l’on défile vers le bas.

Au final, cette approche de la conception est tout à fait intéressante pour dérouler des arguments et/ou raconter une belle histoire. C’est en quelque sorte le principe du storytelling appliqué à la mise en page et l’organisation de l’information. J’aime beaucoup, encore faut-il s’assurer d’une bonne compatibilité des techniques utilisées (Adobe et Google en désaccord sur les techniques de mise en page avancée).

Meilleures pratiques de conception pour vos sites web mobiles

« Mobile has won« , voilà en substance ce qu’Eric Schmidt, le président de Google, a déclaré sur Bloomberg TV en début d’année. Cette affirmation résume bien la situation dans laquelle nous nous trouvons : un quotidien où les terminaux mobiles sont omniprésents. À partir de ce constat, combien de temps allons-nous nous voiler la face et continuer à penser qu’une application iPhone sous-traitée à un prestataire est une stratégie mobile viable ? Il s’est vendu plus d’1 milliard de smartphones en 2013, optimiser votre site web pour les terminaux mobiles est une priorité parfaitement légitime. Le problème est que la conception optimisée pour smarpthones et autres terminaux mobiles est un exercice qui se complique d’année en année.

Il existe bien des « règles ergonomiques » (7 unbreakable laws of user interface design) et des conventions de conception (Pour bien démarrer dans la conception d’interfaces mobiles), mais elles s’appliquent avant tout aux applications mobiles, ces fameuses applications qui ne sont installées que par une infime partie de vos clients et prospects. Là nous parlons des 99% d’utilisateurs restants, ceux qui vont consulter votre site web sur un smarpthone.

Ces dernières années, la profession s’est enflammée pour le responsive design, cette technique de conception qui permet d’avoir une mise en page qui s’adapte à la largeur de l’écran. Nous savons aujourd’hui que le Responsive Web Design n’est pas une solution, c’est un compromis (même le cabinet Forrester le dit : Responsive Web design not a long-term solution to mobility). Il faut donc investir un minimum de temps dans la réflexion et la conception de la version mobile de votre site web. Heureusement pour vous, il existe une littérature assez détaillée sur le sujet : Ten best practices for designing mobile websitesThe top 10 mobile design mistakes, and how to avoid them et 10 Best Practices for Mobile Web Development.

Je vous propose une synthèse de ces articles :

  • Privilégier toujours la performance et la simplicité d’usage sur les aspects esthétiques. J’ai l’impression d’enfoncer une porte ouverte, mais il est toujours important de rappeler ce conseil et de le laisser en tête de liste (cf. Building Smartphone-Optimized Websites).
  • Ne privilégiez pas une application sur un site web. Les applications coûtent chers à développer / maintenir et elles sont compliquées à référencer. Sauf dans le cas très particulier où vous avez des millions de clients qui utilisent votre site toutes les semaines (SNCF, Ventes privées…), un site mobile est de loin la solution la plus rentable. Et surtout arrêtez de faire la promotion de vos applications sur votre site web, ce phagocytage peut se révéler très dangereux.

    Exemple de bandeau parasite pour forcer l'installation d'une application mobile
    Exemple de bandeau parasite pour forcer l’installation d’une application mobile
  • Utilisez une URL unique. Il est très tentant de partir sur deux sites avec deux URLs distinctes, car cela facilite grandement l’organisation des ressources et développements, mais une version en .mobi ou m.URL.com va affaiblir votre référencement. Comme écrit plus haut, le responsive design n’est pas une solution viable, mais il existe d’autres solutions comme la substitution d’éléments côté serveur (Améliorez la performance de vos interfaces mobiles avec RESS) ou l’utilisation de librairies prévues à cet effet comme Mobify.js.
  • Adoptez une approche d’amélioration progressive. Maintenant qu’il y a plus de smarpthones que d’ordinateur, la norme est de concevoir en premier lieu pour les terminaux mobiles, c’est la philosophie du mobile first. Dans ce cadre, les techniques de progressive enhancement sont à privilégier sur celles de graceful degradation. Comprenez par là que les choix par défaut doivent positionner le curseur sur les terminaux mobiles et non les ordinateurs, notamment en ce qui concerne la résolution de référence des images. Les techniques de développement modernes permettent de substituer une version d’image à une autre en fonction du type de terminal, il convient alors de charger par défaut une image de faible qualité et de la remplacer par une de meilleure qualité si c’est opportun, et non l’inverse.
  • Utilisez des tailles de police et des zones de détection plus larges. Le doigt n’est pas un périphérique de saisi très précis, il convient donc de ne pas proposer des menus ou boutons trop petits sous peine d’augmenter les erreurs de manipulation (cf. Recommandations de taille pour les éléments d’interfaces mobiles).

    La taille des items de navigation de ce menu sont trop petits pour un smartphone
    La taille des items de navigation de ce menu est trop petite pour un smartphone
  • Méfiez-vous des pictogrammes. Les pictos sont très pratiques, car ils ne prennent que très peu de place et, car ils n’ont pas besoin d’être traduits. Le problème est qu’ils peuvent être mal interprétés, voir pas du tout. Si le menu de type « hamburger » semble s’imposer comme un standard de conception de facto, bien que pas forcément bien assimilé par le grand public, certains pictos sont carrément impossibles à déchiffrer. N’hésitez pas à faire des recherches et à tester vos pictos pour vous assurer qu’ils ne sont pas un frein.

    Ces pictogrammes ne sont pas très intuitifs
    Ces pictogrammes ne sont pas très intuitifs
  • Vérifiez le point de coupure de vos pages. Tout comme sur les ordinateurs, la limite de visibilité est un critère très important à prendre en compte, surtout pour les boutons d’action principaux. Vérifiez donc que vos messages et boutons principaux sont visibles sans avoir besoin de scroller la page.

    Exemples de limite de visibilité d'une pafge web sur un smartphone
    Exemples de limite de visibilité d’une page web sur un smartphone

 

En plus de ces conseils, je vous invite fortement à consulter les bibliothèques de meilleures pratiques comme celle-ci en anglais : Mobile Web Best Practices, ou la liste des bonnes pratiques Web Mobile proposées par Opquast, un chantier collaboratif lancé l’année dernière : Une checklist Opquast Web Mobile ? Chiche !.

À la recherche de la page produit parfaite

Depuis plus de 15 ans que je fais ce métier, j’ai eu l’occasion d’être impliqué dans de nombreux projets de boutique de ligne. S’il y a bien un exercice de conception sur lequel tout le monde s’arrache les cheveux, c’est celui de concevoir la fiche produit parfaite. Nous sommes tous d’accord pour dire que la perfection n’existe pas et que les objectifs divergent si vous êtes distributeurs (efficacité avant tout) ou fabricants (séduction avant tout). Il n’empêche que l’on peut quand même se poser légitimement la question. D’ailleurs je ne suis pas le seul puisque d’autres se la sont posée aussi : Ecommerce product pages: where to place 30 elements and why et Optimisation d’une fiche produit e-commerce.

Toute la difficulté de la conception d’une bonne page produit est qu’il faut faire rentrer un maximum d’informations en un minimum de place :

  • Le nom du produit, sa référence, sa gamme, éventuellement son fabricant ;
  • Le visuel du produit, le zoom, les autres vues ou vidéos
  • La description courte du produit, l’appréciation des internautes ainsi que les outils de partage ;
  • Le prix, la décote en période de soldes, les variantes, la disponibilité, l’ajout au panier, les conditions de livraison et autres éléments de réassurance ;
  • La description longue, les produits associés et complémentaires, les packs…

Autant vous dire que c’est un authentique casse-tête et que chacun a son interprétation de la fiche produit idéale. L’exercice se complique à partir du moment où vous prenez également en compte la nature du produit (on ne vend pas de la même manière une fringue qu’un produit technologique).

Bref, c’est une quête impossible. Sauf que… il est possible de lister un certain nombre d’exemples qui se rapprochent de la perfection. Chacun ayant ses avantages / inconvénients. Aussi je vous propose de faire le tour des meilleures pratiques en matière de page produit pour de l’habillement. Vous constaterez que la totalité de mes exemples est étrangère, je dois bien vous avouer avoir un faible pour les boutiques en lignes US qui sont particulièrement bien structurées.

Commençons donc notre quête avec le roi Amazon :

La page produit d'Amazon
La page produit d’Amazon

Disons-le tout de suite : c’est très décevant. Malgré le fait que cette page produit exploite la dernière version des boutons d’ajout au panier, l’incitation et la séduction sont au plus bas. De plus, la colle centrale est bien plus chargée que les deux colonnes latérales. Assurément un exemple à ne pas suivre.

Pour remonter le niveau, je vous propose d’étudier le site de GAP :

La page produit de GAP
La page produit de GAP

Là nous avons une page produit beaucoup plus cohérente avec une très belle construction en trois colonnes. Par contre, la photo est un peu trop petite, de même que le bouton d’ajout au panier, rédhibitoire selon moi.

Montons le niveau encore d’un cran avec L.L.Bean :

La page produit de L.L. Bean
La page produit de L.L. Bean

Toujours la même mise en page en trois colonnes, une large place réservée au visuel et une très belle scénarisation de l’ajout au panier en 3 étapes. Les textes sont encore un peu trop petits et la proximité des produits complémentaires avec le bouton d’ajout au panier me dérange un peu.

Poursuivons avec American Eagle, un site que j’utilise souvent en exemple :

La page produit d'American Eagle
La page produit d’American Eagle

Ce site privilégie visiblement la simplicité avec une réduction au maximum des frictions. Du coup, il y a quand même beaucoup d’espace blanc et la description est vraiment minimaliste.

Dans la série minimaliste, je vous propose également John Lewis :

La page produit de John Lewis
La page produit de John Lewis

si vous êtes fan de grille de lecture ben carrée, vous êtes servi ! La lisibilité de cette page est parfaite, par contre elle manque un peu de relief dans la mesure où il n’y a quasiment pas de hiérarchisation de l’information.

Encore plus minimaliste, Le nouveau site de Mark & Spencer :

La page produit de Mark&Spencer
La page produit de Mark&Spencer

Si j’apprécie énormément la petite coche qui accompagne la sélection de la couleur et de la taille avant de mettre au panier, tout cet espace blanc me fait carrément angoisser ! Je ne sais pas pour vous, mais j’ai l’impression que l’on me cache des choses sur ce site…

Tant qu’à faire dans le minimalisme, je ne peux pas faire l’impasse sur The North Face :

La page produit de The North Face
La page produit de The North Face

Là nous avons un bel exemple de page produit 100% visuelle dans la mesure où la description et autres éléments textuels sont relayés en bas de page,  faisant ainsi de la place pour afficher une immense photo. Très bien, mais ça manque carrément de caractéristiques, d’autant plus que cette marque propose des vêtements censés être très « techniques ».

Peut-être la solution se trouve-t-elle dans un secteur connexe, à savoir la chaussure… du coup je vous propose une visite chez Zappos :

La page produit de Zappos
La page produit de Zappos

Là encore, on se contente de strict minimum avec une photo du produit posé sur un mannequin. Certes, les larges gouttières de chaque côté du visuel mettent en valeur le produit, mais le cadre de la photo attire immanquablement l’oeil vers le bas… et les produits associés. Vous devez certainement penser que je suis bien présomptueux de critiquer le site de Zappos, mais j’ai l’impression qu’il joue dans sa propre catégorie, un peu comme Amazon (cette fiche produit est difficilement répliquable, car elle ne fonctionne que pour eux).

Ces chaussures nous amènent vers le site de Crocs :

La page produit de Crocs
La page produit de Crocs

Là nous commençons sérieusement à nous rapprocher de la perfection avec une très belle utilisation de l’espace pour y faire rentrer les éléments essentiels tout en proposant une grille de lecture très rigoureuse afin de bien démarquer les différentes unités d’information.

Finalement le meilleur exemple que j’ai trouvé est celui d’Eddie Bauer :

La page produit de Eddie Bauer
La page produit de Eddie Bauer

Comme pour la boutique précédente, tous les éléments importants sont là, parfaitement agencés, en un minimum de place. Ils ont réussi l’exploit de tout faire rentrer dans un cadre de 1024*768. Certes, cette limitation n’est plus réellement d’actualité en 2014, mais je ne peux que reconnaitre l’excellent travail de hiérarchisation et de structuration de l’information de cette fiche produit. Tout est parfait : lisibilité, contraste, parcours de l’oeil…

Notre recherche de la page produit parfaite s’achève-t-elle sur cet exemple ? Oui, car je n’ai pas trouvé mieux. En revanche, cette page produit ne fonctionne pas sur les smartphones, car ceux-ci nécessitent une conception spécifique (Eight brilliant mobile product pages). La quête continue… si vous avez de bons exemples, n’hésitez pas à les partager dans les commentaires.