Le prototypage rapide enfin viabilisé grâce aux frameworks CSS

J’ai eu une discussion très intéressante ce matin avec Joël Berne, qui enseigne le web design, au sujet de la tendance générale à l’uniformisation graphique des interfaces web. Nous sommes tombés d’accord sur le fait qu’avec l’avènement du responsive design, et la mode du flat / material design, les sites web finissaient tous par se ressembler. Force est de constater que les contraintes des terminaux mobiles forcent les designeurs à alléger les chartes graphiques (cf. La revanche des interfaces textuelles).

Je serais bien incapable de prédire la longévité de cette « mode » du minimalisme, mais le fait est que nous devons nous y conformer à minima pour les 2 ou 3 prochaines années. Pour vous en convaincre, il vous suffit de parcourir les différents sites d’information qui ont tous adopté une mise en page minimaliste (avec le menu hamburger de rigueur) pour favoriser la lecture sur les smartphones. Je précise au passage que ce mouvement de simplification / uniformisation est fortement facilité par l’adoption croissante des frameworks CSS comme Bootstrap ou Foundation qui permettent d’accélérer de façon spectaculaire les développements front office (cf. The 5 Most Popular Frontend Frameworks of 2014 Compared).

La page d'accueil minimaliste des Echos
La page d’accueil minimaliste des Échos

À partir du moment où les mises en page et les traitements graphiques sont simplifiés à l’extrême et que le code HTML / CSS est standardisé, nous pouvons relancer légitimement le débat sur les techniques de prototypage rapide (cf. À la recherche de l’outil de conception idéal). Cette réflexion m’a été inspirée par un article publié sur UIE qui revient sur l’utopie du « Designing in the Browser« . Popularisée il y a quelques années par Andy Clarke, cette approche consiste à faire du prototypage rapide directement dans un éditeur HTML / CSS (Walls Come Tumbling Down). Certes, cette idée n’est pas neuve, mais différents signaux faibles me font dire que cette utopie devient petit à petit une réalité viable.

En s’appuyant sur les fameux frameworks front office et sur une nouvelle génération d’outils de prototypage, nous disposons maintenant d’interfaces graphiques très simples à utiliser permettant de concevoir des prototypes HTML en quelques clics et de générer du code de grande qualité. J’ai ainsi découvert récemment Pingendo, un éditeur visuel gratuit qui permet de créer des interfaces web en s’appuyant sur le framework Boostrap.

Interface de Pingendo

 

Interface de Pingendo

Comme vous pouvez le constater, cet outil est très simple à prendre en main et permet de concevoir ou d’adapter des gabarits HTML à l’aide de composants d’interface que l’on glisse et que l’on repositionne. Cerise sur le gâteau : dans la mesure ou l’outil s’appuie sur Bootstrap, il suffit de récupérer des templates pour gagner encore plus de temps. Certes, cet outil n’est pas très sophistiqué, il ne gère pas encore les arborescences et l’héritage des templates, mais permet de réaliser ou d’adapter des maquettes en un temps record. Il existe d’autres éditeurs comme Jetstrap ou Bootply (cf. Top 15+ Bootstrap Visual Editors For Web Designers), mais ils sont payants.

Est-il bien raisonnable de faire de la conception dans un éditeur HTML ? Si vous devez concevoir une application en ligne ou un portail d’envergure, très clairement, non. En revanche, si vous disposez d’un temps limité pour concevoir un « petit » site ou boutique en ligne, alors cet outil se révèle redoutablement efficace.

Exemple de boutique en ligne dans Pingendo

 

Exemple de boutique en ligne dans Pingendo

Ne vous méprenez par sur mon propos : je ne suis pas en train de vous dire que les méthodologies de conception sont intégralement à revoir, mais de vous expliquer que le contexte actuel nous pousse vers ce type de raccourcis. Ça tombe bien, l’outil et les templates sont gratuits !

Si vous avez un retour d’expérience à partager sur le prototypage rapide à partir de Bootstrap ou foundation, je suis preneur…

 

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éressantes : What’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 Mistakes, The Hamburger is Bad for You, Why and How to avoid Hamburger Menus, Hamburgers & Basements: Why not to use left nav flyouts, The Advantages of table views over left nav flyouts, An update on the hamburger menu, Basement 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 :

  • La montée en puissance des terminaux mobiles, où il y a encore moins de place pour insérer des bannières publicitaires (cf. 100 millions de visites et plus de 750 millions de pages vues sur mobile et tablette pour l’equipe.fr) ;
  • L’augmentation considérable du trafic en provenance des médias sociaux, généralement vers les pages intérieures (cf. The home page is dead).

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 websites, The 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 !.

 

Nous aimerions prendre un moment de votre temps pour consulter nos généreux sponsors, sans eux, garder ce site en ligne n’aurait pas été possible. Lire la suite

Music (1)
Disco FM More about music and disco FM.
More about music and disco FM.
Food (3)
fishandchipsbangkok reviews More about the reviews that Fish and Chips in Bangkok.
More about the reviews that Fish and Chips in Bangkok.
Recipes for a fun night, like playing in an online casino without spending anything Anyone who enjoys baking knows that morning is the best time to do this. Not only because then you are more alert and it is easier to stick to the recipes. True bakers traditionally bake early in the morning in order to provide customers with fresh bread on time.
Anyone who enjoys baking knows that morning is the best time to do this. Not only because then you are more alert and it is easier to stick to the recipes. True bakers traditionally bake early in the morning in order to provide customers with fresh bread on time.
veggie voedsel More info about vegetarian food
More info about vegetarian food
Nature (1)
Mountain Biking The Brecon Beacons presents a special online casino tournament The competition is set up by LL Casino, an online casino that is currently trying to promote Nederlandse gokkasten as they are the latest addition to the casino’s game offer.
The competition is set up by LL Casino, an online casino that is currently trying to promote Nederlandse gokkasten as they are the latest addition to the casino’s game offer.
Digital marketing (1)
know your company’s strengths What are the best social media marketing websites.
What are the best social media marketing websites.
Online Casinos (3)
Betfair Casino Review UK Betfair is one of the most reputable sites, popular for its sportsbook and casino platforms.
Betfair is one of the most reputable sites, popular for its sportsbook and casino platforms.
Cashmio games and slot machines Cashmio games and slot machines information.
Cashmio games and slot machines information.
Great casino bonuses available at sportium casino sportium-casino.es/bonos-de-casino
sportium-casino.es/bonos-de-casino
Blog (1)
Telefoonstuktips Online casino movie info
Online casino movie info
Animals (1)
About us Dogstar Dogstar information
Dogstar information
Education (1)
Student test Find our more about all the tests that are available.
Find our more about all the tests that are available.
Hotel (1)
hotel rooms and layout hotel rooms and layout
hotel rooms and layout

Nous aimerions prendre un moment de votre temps pour consulter nos généreux sponsors, sans eux, garder ce site en ligne n'aurait pas été possible. Lire la suite

Music (1)
Disco FM More about music and disco FM.
More about music and disco FM.
Food (3)
fishandchipsbangkok reviews More about the reviews that Fish and Chips in Bangkok.
More about the reviews that Fish and Chips in Bangkok.
Recipes for a fun night, like playing in an online casino without spending anything Anyone who enjoys baking knows that morning is the best time to do this. Not only because then you are more alert and it is easier to stick to the recipes. True bakers traditionally bake early in the morning in order to provide customers with fresh bread on time.
Anyone who enjoys baking knows that morning is the best time to do this. Not only because then you are more alert and it is easier to stick to the recipes. True bakers traditionally bake early in the morning in order to provide customers with fresh bread on time.
veggie voedsel More info about vegetarian food
More info about vegetarian food
Nature (1)
Mountain Biking The Brecon Beacons presents a special online casino tournament The competition is set up by LL Casino, an online casino that is currently trying to promote Nederlandse gokkasten as they are the latest addition to the casino’s game offer.
The competition is set up by LL Casino, an online casino that is currently trying to promote Nederlandse gokkasten as they are the latest addition to the casino’s game offer.
Digital marketing (1)
know your company’s strengths What are the best social media marketing websites.
What are the best social media marketing websites.
Online Casinos (3)
Betfair Casino Review UK Betfair is one of the most reputable sites, popular for its sportsbook and casino platforms.
Betfair is one of the most reputable sites, popular for its sportsbook and casino platforms.
Cashmio games and slot machines Cashmio games and slot machines information.
Cashmio games and slot machines information.
Great casino bonuses available at sportium casino sportium-casino.es/bonos-de-casino
sportium-casino.es/bonos-de-casino
Blog (1)
Telefoonstuktips Online casino movie info
Online casino movie info
Animals (1)
About us Dogstar Dogstar information
Dogstar information
Education (1)
Student test Find our more about all the tests that are available.
Find our more about all the tests that are available.
Hotel (1)
hotel rooms and layout hotel rooms and layout
hotel rooms and layout