BlendWebMixconférencesconseilsmobileproduct designresponsive designtypographieux designwebdesign

BlendWebMix 2015 : l’expérience utilisateur à l’honneur (2)

L’édition 2015 était placée sous le signe du design web et de l’UX, voici la suite du compte-rendu de Marie.

Voici la suite de mon compte-rendu de BlendWebMix, dont l’édition 2015 était placée sous le signe du design web et de l’UX, pour mon grand bonheur.

NB : retrouvez la première partie ici.

BlendWebMix

« Le web et ses sales caractères », de Damien Senger

Outre l’UX, la programmation du Blend a fait la part belle au design web, ce qui est appréciable dans un paysage web souvent réduit à la seule technique. La conférence de Damien Senger, dédiée à la typographie web, a été éclairante.

Damien nous a rappelé que, depuis Gutenberg, la lettre a un poids, une matérialité. D’abord caractère mobile d’imprimerie, la lettre continue de peser lourd sur mobile. Or, ce poids a une incidence sur la performance et la qualité perçues de nos pages web.

Peut-être avez-vous déjà remarqué des pages web qui restaient blanches jusqu’à ce que le texte s’affiche enfin au bout de plusieurs secondes : cet effet s’appelle le « FOIT » (« Flash Of Invisible Text », flash de texte invisible).

Ou alors, vous aurez peut-être remarqué que le texte initialement chargé change subitement d’apparence, comme si une autre police s’était soudain appliqué : cet effet s’appelle quant à lui le « FOUT » (« Flash of Unstyled Text », flash de texte non stylé). C’est une approche plus qualitative que le FOIT car elle permet à l’utilisateur de commencer à lire immédiatement le contenu du site. Toutefois, elle est souvent jugée inesthétique.

Par ailleurs, les web designers sont responsables de la performance typographique des sites qu’ils conçoivent. Trop souvent, on considère cette responsabilité comme étant du seul fait des intégrateurs et autres développeurs front-end. Mais, en tant que web designers, nous en sommes les premiers responsables. C’est à nous que revient la tâche de trouver un fallback typographique adapté à chaque projet.

Cette performance typographique passe dans un premier temps par l’optimisation des fichiers font-face. Elle peut être réalisée simplement par les web designers eux-mêmes grâce au site Font Squirrel, sans connaissance technique particulière. L’outil de Font Squirrel met à disposition un large éventail de réglages, tels que les subsets, la hauteur d’x, ou encore les ligateurs OpenType. Il est important que ça soit les designers qui gardent la main sur les fichiers typo.

Ensuite, charge aux intégrateurs et aux développeurs de poursuivre cet effort de performance en mettant en cache les fichiers de polices et en jouant sur localStorage pour éviter de re-télécharger chaque fonte à chaque chargement de page. C’est ce qu’ont fait, de façon très aboutie, les développeurs du journal The Guardian.

Enfin, cette conférence a eu le mérite de relancer le débat à propos du faux gras et du faux italique. Certaines polices, particulièrement bien conçues, permettent en effet de s’affranchir du chargement de certaines variantes, ce qui a un impact très positif sur les performances.

Néanmoins, il n’est pas possible de généraliser : il faut tester sans arrêt le rendu typographique web avant de prendre une décision.

Notons au passage l’approche « FOFT » (« Flash of faux text »), synthétisée par Zack Leatherman, qui propose de ne charger que la variante régulière d’une police et de s’en remettre au faux gras et au faux italique, puis de charger les variantes grasses et italiques de la police dans un second temps.

Si le sujet vous intéresse, ne manquez pas les slides de la conférence de Damien !

Parc de la Tête d'Or, à Lyon

« Designing for a billion people », de Christophe Tauziet

C’est avec beaucoup de curiosité que je suis allée écouter la conférence de Christophe Tauziet, product designer chez Facebook.

Le product designer influence sur la stratégie produit, sur le business. Ce poste réunit design visuel (à quoi ressemble le bouton ?), design d’interaction (qu’est-ce qui se passe lorsque je clique sur le bouton ?) et product thinking (quel est le problème que le bouton cherche à résoudre ?).

Chez Facebook, toute démarche design commence par une phase de compréhension du problème. Cette phase de compréhension vise à déterminer s’il est rentable d’investir dans la résolution d’un problème préalablement identifié :

  • Est-ce vraiment un problème pour l’utilisateur ou bien est-ce un problème pour l’entreprise ?
  • S’agit-il d’un micro-problème ou bien s’attaque-t-on à un problème fondamental ?
  • Quel impact va-t-on avoir en essayant de réduire ce problème ?

Pendant cette phase, on va définir des objectifs, mais aussi gérer les cas particuliers. On ne pourra pas tenir compte de tous, mais en avoir conscience en amont du projet permet quand même de concevoir des solutions plus flexibles.

Il peut d’ailleurs être utile de découper le problème principal en micro-problèmes, et de les résoudre un à un au fil des mois plutôt que tous en une fois quitte à s’épuiser.

L’autre point important, c’est de comprendre son audience, et de savoir à qui on s’adresse. On s’adresse rarement à tous les utilisateurs. Une solution qui fonctionne auprès de milliards d’utilisateurs peut ne pas correspondre à un faible pourcentage d’entre eux. Or, chez Facebook, 1% d’utilisateurs équivaut à 16 millions de personnes. Il est donc impossible de ne pas s’en soucier.

Il faut non seulement émettre des hypothèses, mais également les tester auprès d’utilisateurs réels. L’A/B testing est une première indication sur ce qui fonctionne et ce qui ne fonctionne pas, mais ça ne remplace pas de véritables tests utilisateurs.

Enfin, il faut définir une vision tout en sachant faire abstraction et se détacher de son produit. Quand quelqu’un critique votre produit, ce n’est pas vous qu’on attaque, même si vous considérez ce produit comme votre « bébé ». Il faut éviter de tomber amoureux de son produit.

« Comment concevoir la navigation sur mobile ? », d’Amélie Boucher

Cette conférence a abordé un point-clé de la conception web actuelle : la navigation sur mobile. Forte de son expérience en matière de design UX, Amélie Boucher nous a donné des billes pour faciliter la navigation des utilisateurs mobiles.

Il se trouve que le contexte mobile est très sensible aux erreurs de conception et aux distractions en tous genres.

Quand la vitesse de chargement n’est pas au rendez-vous, que l’utilisateur se trompe de rubrique et qu’il doit recommencer, cela génère beaucoup d’attente et de frustration. Il devient alors craintif à l’idée de cliquer sur tel ou tel bouton, de peur de se tromper et de perdre du temps.

De plus, la navigation sur mobile est propice au papillonnage et aux ruptures. Le besoin est souvent pressant, par exemple lorsque je veux trouver mon chemin, ou trouver une information dont j’ai besoin immédiatement.

Sans oublier que le contexte de consultation mobile est souvent dégradé : ce que je vois peut être flou, mal éclairé, trop petit. Mon attention peut être perturbée par les éléments qui m’entourent, notamment dans les espaces publics.

Il est toutefois possible de faciliter la navigation sur mobile en commençant par choisir une architecture de l’information plate. Les écrans qui ne servent qu’à naviguer et qui ne contiennent aucune information utile à l’utilisateur sont donc à proscrire. Le travail de design UX va donc consister à réduire le nombre de niveaux dans l’arborescence afin de faciliter les usages-clés du site ou de l’appli.

Une fois ce travail effectué, on peut encore travailler sur l’interface pour donner l’impression qu’il y a encore moins d’étapes. Pour cela, il faut hiérarchiser le contenu avec soin. Vouloir tout mettre en gras au prétexte que tous les contenus seraient importants, c’est un peu comme si vous disiez que votre cible utilisateur est « tout le monde ». En essayant de contenter tout le monde, vous dévalorisez votre produit.

Par ailleurs, pour proposer une navigation mobile agréable et utile, il faut réfléchir à l’objectif principal de l’utilisateur. Comment pouvons-nous l’aider à atteindre cet objectif ? Souvent, nous sommes tellement enfermés dans nos bulles de concepteurs qu’on oublie la vraie vie des gens, leurs réflexes, leurs habitudes. On conçoit des interfaces pour un utilisateur idéal qui n’existe pas.

Une méthode efficace de navigation consiste à mettre en place une navigation transversale. Par exemple, cela peut permettre à l’utilisateur de passer d’une fiche produit à une autre en un clic. C’est ce que fait le site Le Bon Coin, qui ne force pas l’utilisateur à revenir sur la liste des résultats de recherche pour consulter une fiche produit supplémentaire.

Un mot au sujet des pictogrammes, notamment des fameux « burger menu » ou « meatballs menu » : ceux-ci peuvent avoir un effet sémantique s’ils sont conventionnels. Mais on peut aussi leur ajouter un libellé si besoin, bien que cela ait un coût en terme de place (l’écran mobile est limité).

Enfin, nous devons faire appel à l’attention sélective de l’utilisateur. C’est l’effet « cocktail party » : on arrive à poursuivre une conversation tout en étant un peu distrait par le brouhaha ambiant. Il faut donc aider l’utilisateur à inhiber les « distracteurs » qu’il rencontre en situation de mobilité, notamment le bruit.

Cela n’est possible qu’en identifiant avec soin le moment de l’interaction. Par exemple, au moment du chargement du site ou de l’appli, on affiche un menu visible ; mais dès que l’utilisateur commence à scroller, la taille de ce menu se réduit car il devient moins intéressant que le contenu en train d’être déroulé.

Pour en savoir plus, ne manquez pas les slides de cette conférence !

Rendez-vous l’année prochaine !

Mon premier BlendWebMix a été une réussite. Les conférences étaient de grande qualité, les sujets abordés pointus et originaux, et j’ai pu faire des rencontres particulièrement enrichissantes.

Certes, la dimension « business » et l’ambiance « start-up » de l’évènement peut faire un peu peur aux non-initiés (c’était mon cas) ; mais une fois sur place, la diversité des sujets proposés permet sans mal de s’en sortir en échappant au jargon franglais et aux (rares) discours marketing à papa.

Toutefois, l’intérêt du Blend, c’est justement ce mélange des genres un peu improbable entre designers, développeurs, entrepreneurs, investisseurs et chercheurs. La diversité des conférenciers et des participants crée une alchimie très originale.

Cela aide à sortir un peu de son pré carré et à s’ouvrir à des sujets qui ne nous sont pas forcément familiers.

Alors merci BlendWebMix, et à l’année prochaine !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *