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.

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.

Votre visite guidée en quelques clics

Je ne le répéterais jamais assez : les premières secondes d’utilisation d’un site web ou service en ligne sont primordiales : soit l’utilisateur trouve ce qu’il cherche tout de suite, soit il passe à autre chose. Dans le cas d’ un site de contenus, vous pouvez facilement lui simplifier la tâche en optimisant le système de navigation. Dans le cas d’un service ou d’une application en ligne, c’est plus compliqué, car il peut y avoir un certain nombre de choses à assimiler sur l’interface avant de pouvoir l’exploiter. C’est dans ce second cas de figure que les visites guidées (“demo tour” en anglais) se révèlent particulièrement efficaces.

si personne ne peut contester l’utilité des visites guidées sur un site web (cf. Une visite guidée intégrée à votre page d’accueil), le problème vient du coût de réalisation et de la compatibilité des technologies utilisées. Jusqu’à présent, créer une visite guidée de qualité représentait un budget non-négligeable, et nécessitait l’emploi de technologies pas forcément adaptées à tous les terminaux (Flash, vidéo…). Heureusement les technologies évoluent vite et l’on trouve maintenant des choses beaucoup moins coûteuses et surtout beaucoup moins lourdes : Walk Users Through Your Website With Bootstrap Tour.

Bootstrap Tour est un plugin pour le framework javascript Bootstrap qui vous permet de réaliser des demo tours. En français dans le texte, Bootstrap Tour est donc une brique logicielle qui sert à créer une visite guidée sur votre site à partir d’info-bulles, sans utiliser de technologies “lourdes”, uniquement du javascript. L’intérêt est de s’appuyer sur une technologie standard, qui peut être très facilement modifiée, et qui fonctionne parfaitement sur les terminaux mobiles.

Concrètement la visite guidée se lance dès l’ouverture de la page et vous permet d’afficher des info-bulles aux endroits stratégiques, et même d’assombrir certaines parties de l’écran pour concentrer l’attention :

Une visite guidée pour votre site web en javascript
Une visite guidée pour votre site web en javascript

Le bénéfice pour l’utilisateur est immédiat : on lui présente les principales fonctionnalités directement à l’écran en quelques secondes. Cerise sur le gâteau : comme c’est du javascript, il est tout à fait possible de combiner une visite guidée avec un assistant de création de compte. Pour ceux qui n’en ont pas l’utilité, la visite guidée peut être arrêtée à tout moment en un simple clic.

Précisons qu’il existe d’autres librairies javascript pour réaliser ce genre de visite guidée, notamment jQuery Joyride, Hopscotch, TourBus, Chardin.js, Intro.js… Pour celles et ceux qui sont allergiques au code, vous pouvez également utiliser des services comme Tour My App ou Tutorialize, mais ils sont payants.

N’hésitez pas à partager votre retour d’expérience sur ces solutions ou indiquer d’autres solutions dans les commentaires.

À la recherche de l’outil de conception idéal

Le processus de conception d’une interface web est plutôt complexe, je pense ne rien vous apprendre en écrivant cela. La complexité vient du fait que différentes compétences sont sollicitées : design, développement, ergonomie fonctionnel… Pour faciliter ce travail d’équipe, il existe des outils de conception, autrement appelés outils de prototypage ou de wireframe. Avec le temps, ces outils se sont naturellement rangés dans des segments (Wireframes : 4 styles pour 4 types d’outils) et l’ont assistait même à une domination d’outils de plus en plus simples et intuitifs (Des applications de prototypage toujours plus sophistiquées et toujours plus simples).

Nous sommes maintenant en 2014, et le consensus s’est établi autour de trois outils :

  • Balsamiq, la référence en matière de rapidité de prise en main, mais avec un format que l’on ne peut pas exporter ;
  • Axure, la référence en matière de rigueur et de sophistication, mais avec une longue courbe d’apprentissage et format de sortie que l’on ne peut pas non plus exploiter ;
  • Photoshop, l’outil de création numérique d’Adobe, qui est assez lourd à manier et exige une formation pour acquérir sa “logique”.

Comme vous pouvez le constater, aucun de ces trois outils n’apporte une complète satisfaction, car tout est question de compromis : certains vont privilégier l’intuitivité, d’autre la rigueur, et d’autres vont avancer l’argument du pragmatisme et directement faire du prototypage dans Photoshop. Autant le dire tout de suite : j’ai un gros GROS problème avec Photoshop, car jusqu’à preuve du contraire, il s’agit d’une application de retouche d’image. Donc en aucun cas on ne peut faire du prototypage avec. Dans l’absolu, on ne devrait même pas l’utiliser pour faire des maquettes graphiques web, d’autant plus qu’il y a un logiciel qui a été conçu pour faire ça : Fireworks.

S’il faut bien reconnaître que Photoshop est aujourd’hui l’application de référence, je n’ai jamais bien compris pourquoi Adobe n’en a pas profité pour faire évoluer Fireworks et le repositionner comme l’outil de prototypage parfait : simple à prendre en main, tout en offrant un certain niveau de sophistication, et qui génère des livrables directement exploitables dans les étapes suivantes de création (fichiers images, squelettes HTML et CSS…). Aux dernières nouvelles, Adobe faisait savoir à la communauté qu’ils avaient arrêté le périmètre fonctionnel de Fireworks, comprenez par là qu’ils ne le feront plus évoluer : The Present And Future Of Adobe Fireworks.

Avec la mise en pré-retraite de Fireworks et l’évolution bien trop lente de Balsamiq et Axure, il reste donc une place à prendre. C’est dans ce créneau que l’éditeur Bohemian Coding est petit à petit en train de s’imposer avec Sketch, la nouvelle coqueluche des designers. Initialement, Sketch est une application de création graphique vectorielle, mais la communauté se l’ai rapidement approprié en tant qu’outil de conception : Discovering SketchIt’s Time to Dump Photoshop and Embrace Sketch et Khoi Vinh on using Sketch instead of Photoshop.

Sketch

Ce qui plaît avant tout dans sketch, c’est la rapidité de prise en main avec une interface plus simple que Photoshop ou Illustrator (bien que tout soit relatif), et un parfait dosage entre sophistication et rapidité d’exécution. En un mot comme en cent : Sketch permet de travailler vite et bien. D’autant plus que l’application bénéficie maintenant d’une communauté très dévouée et qu’il est possible de trouver quantité de templates et astuces : Sketch Tips & Tricks Blog.

Sketch-UI

Sketch est-il donc l’application idéale ? Non, car elle repose sur un format propriétaire : les créations ne peuvent pas être exportées en HTML. Retour à la case départ.

Heureusement d’autres éditeurs se sont lancé dans la brèche, notamment Tribaloid avec son projet UnderDog, également appelé EvolveUI, qui est censé réconcilier les pratiques de prototypage rapide, conception des interactions et d’interfaces. Pour le moment, le projet n’en est qu’au tout début avec un prototype tournant sous Chrome.

UnderDog

Autre projet très intéressant : Macaw, une application de conception assez proche de Sketch, mais capable d’exporter du très code HTML / CSS de très bonne facture. La philosophie de Macaw est de réconcilier les métiers de designer et de développeur.

Macaw

Cerise sur le gâteau : Macaw se révèle particulièrement efficace pour gérer les maquettes en responsive design avec un modèle reposant sur les breakpoints.

Comme vous pouvez le constater, ça fonctionne plutôt bien. Mais le problème est que cet outil s’adresse avant tout à ceux qui savent ce qu’ils veulent. Pour celles et ceux qui sont encore en phase de recherche et d’expérimentation, donc pour faire du prototypage rapide, ça ne fonctionne plus. Idéalement, il faudrait pouvoir “débrayer” toutes les fonctions avancées de Macaw pour ne conserver que le strict minimum et pouvoir rapidement concevoir une interface, en 5 minutes, comme le permettait le très regretté Proto d’Adobe.

Re-retour à la case départ. Il semblerait qu’au final, le seul moyen de trouver l’application parfaite serait d’en utiliser deux : une pour le prototypage rapide (façon Balsamiq ou Proto) et une autre pour la création de l’interface (façon Sketch ou Fireworks). Plus j’y réfléchis, et plus je me dis qu’Adobe a encore toutes les cartes en main pour s’imposer sur ce créneau. Ça tombe bien, la rumeur court qu’ils nous prépareraient quelque chose :

Adobe-new-soft

À suivre…

Les interfaces révolutionnaires du CES 2014

Tous les ans se déroule à Las Vegas la grande messe annuelle des gadgets, le Consumer Electronic Show, l’occasion pour les constructeurs et startups de dévoiler leurs dernières créations. Il y a six mois j’écrivais que la révolution des interfaces était en cours. Visiblement les choses s’accélèrent, car certains produits présentés à Las Vegas me semblent incroyablement disruptifs. Je vous propose donc un petit tour d’horizon des annonces les plus marquantes.

L’édition 2014 du CES a été l’occasion pour Sony de briller à nouveau et de présenter son concept de Life Space UI, à savoir l’utilisation des espaces de vie du foyer comme interfaces : Sony unveils its wild idea for the future of interfaces. L’idée est de se servir des murs, tables et autres objets du quotidien comme écrans ou interfaces. Le Ultra Short Throw Projector se place ainsi au pied de n’importe quel mur et peut projeter une image en 4K. Ce projecteur ajuste l’image (contraste…) à la luminosité de la pièce et surtout à la nature du mur.

ShortThrowProjector

Ils ont surtout présenté un autre projecteur équipé d’un capteur de profondeur qui se fixe au plafond et permet de projeter des interfaces gestuellesUp close with Sony’s futuristic Life Space UX projector.

LifeSpaceUI

Ceci n’est pas sans rappeler le très beau projet Keecker lancé par un ancien de Google France : Keecker, A real-life R2D2 for home entertainment and more. L’idée est d’avoir un robot multifonction qui vous suive de pièce en pièce pour projeter une vidéo, un jeu, diffuser de la musique ou des photos.

keecker

Il ne me semble pas que le produit existe, pour le moment c’est juste un concept, mais je trouve très intéressante l’idée de pouvoir moduler l’utilisation que l’on peut en faire, le tout grâce à son smarpthone.

Dans un autre registre, les Suédois de Tobii ont présenté une nouvelle version de leur technologie d’oculométrie “légère” : Tobii’s new EyeX Kit lets developers build eye-tracking into games.

tobii-eyex

Pour moins de 200$, vous pourrez ainsi ajouter un capteur à votre ordinateur pour ouvrir de nombreuses possibilités liées au eye-tracking.

Terminons enfin par Oculus, le constructeur du casque de réalité virtuelle qui fait beaucoup parler de lui en ce moment : How Oculus Plans To Be Riding High When The Virtual Reality Wave Breaks. Pour mémoire, Oculus est une startup qui ambitionne de faire sortir la réalité virtuelle de l’ombre et de sortir un casque pour le grand public. Comme c’est souvent le cas, ils misent énormément sur les jeux pour viabiliser leur technologie et se sont adjoint les services de John Carmack, le créateur de Doom et Wolfenstein 3D, pour finaliser le produit et faire évoluer l’offre : Oculus Primed, Meet the Geniuses Who Finally Mastered Virtual Reality.

Oculus-Rift

Ils ont présenté à Las Vegas une nouvelle version de leur casque de réalité virtuelle où les écrans LED sont remplacés par des écrans OLED pour plus de réalisme : Oculus reveals Crystal Cove prototype virtual reality headset with intriguing OLED display. Au-delà de la performance de l’affichage, cette nouvelle version du casque essaye surtout de corriger les problèmes d’autonomie et cette sensation de nausée que l’on ressent après un usage intensif : Oculus unveils new Rift prototype with positional tracking and mysterious OLED display.

crystal_cove

Autant vous dire que les geeks de tous les pays rentrent en transe dès qu’il est question de ce casque révolutionnaire, d’autant plus que le constructeur parle de devenir éditeur de jeux et applications.

Comme vous l’aurez compris, 2014 va être une année grandiose pour les interfaces. Après deux décennies d’immobilisme, le marché serait-il enfin prêt à faire des infidélités aux traditionnels écrans, claviers et souris ? Je l’espère…

Les transitions sont un élément essentiel des interfaces

Très présentes dans les interfaces de jeux vidéo, les transitions se font beaucoup plus discrètes dans les interfaces web. Si je fais abstraction des interfaces en Flash du début de siècle (RIP), les transitions n’étaient tout simplement pas présentes, car il n’était techniquement pas possible d’en faire avec les technologies natives (HTML). Puis est apparu l’iPhone et la communauté a découvert l’intérêt de peaufiner l’expérience utilisateur et de faire de l’interface un élément de différenciation. Le problème des smartphones est qu’ils sont généralement utilisés dans un contexte où l’attention est bien inférieure à celle que l’on a lorsque l’on est devant un écran (avec les bruits de la rue…). D’autant plus que l’écran est beaucoup plus petit, d’où l’intérêt des transitions pour faire comprendre à l’utilisateur ce qui est en train de se passer (basculement d’un écran à un autre, changement d’état de l’application…).

Du coup, cela a donné des idées aux designers web qui commencent à découvrir certaines des nouvelles propriétés de HTML5 (plus précisément des CSS3) pour rajouter des transitions natives à leurs interfaces : De l’intérêt des transitions pour concentrer l’attention. Partant du principe que les transitions sont systématiquement utilisées dans les interfaces des logiciels et jeux vidéo, on se demande pourquoi cela ne pourrait pas se faire pour les interfaces web. Les transitions pourraient ainsi être considérées comme des éléments indissociables de la couche de présentation : tout comme vous devez choisir une police de caractère ou des couleurs, vous devez choisir des transitions.

C’est en prolongement de cette réflexion que je vous propose ce très bon article du Smashing Magazine : Smart Transitions In User Experience Design. L’auteur y explique que les animations sont un élément essentiel des interfaces que si l’utilisateur n’est pas très concentré (ce qui arrive avec les terminaux mobiles), il puisse perdre le contexte de la tâche qu’ils sont en train d’effectuer et ne plus comprendre les informations ou modalités d’interaction que l’interface leur propose. L’illustration ci-dessous est parfaitement explicite quant à l’intérêt d’un effet de transition dans le cas d’une ancre dans une barre de navigation :

ScrollingAnimated

Plusieurs exemples de transitions sont détaillés dans cet article, comme l’apparition d’un panneau contextuel, très bien mis en scène ici :

Stateful-toggle

Idem pour ces champs complémentaires dans le cas d’un formulaire de dépôt d’un commentaire :

ExpandingComments

Je n’ai pas grand-chose à ajouter par rapport aux arguments ou aux exemples de l’article. Par contre, je peux vous recommander vivement le site Meaningful Transitions qui répertorie 6 grandes catégories de transitions et autant d’études de cas.

Meaningful_Transitions-2

Moralité : maintenant que de nombreux effets d’animation peuvent être réalisés de façon native, ne concevez plus d’interface sans transition.