Meryem Ghatrif
Meryem Ghatrif

Sommaire

[email protected]

Pensées · Fleurs & UX

Les fleurs faisaient de l’UX avant nous

L’expérience utilisateur est plus ancienne que les écrans. Une porte, un cockpit, une cuisine en Provence, les fleurs qui y étaient arrivées avant nous, et cinq questions à poser à votre site.

8 min de lecture

Devant la porte vitrée d’une agence bancaire, à Casablanca ou à Lyon, vous voyez une poignée et vous tirez. Rien. Vous poussez, avec un léger embarras, et vous vérifiez d’un regard que personne n’a rien vu.

Ce n’était pas vous. Les designers appellent cette porte une « porte de Norman », d’après Don Norman, auteur de The Design of Everyday Things. Le signe qui ne trompe pas, c’est l’écriteau « POUSSEZ » scotché sur la vitre : une porte qui a besoin d’un mode d’emploi a déjà un problème.

Une porte a parfois besoin d’un écriteau. Une fleur, jamais.

Une fleur porte ses signaux sur ses pétales, et ses visiteurs les lisent d’un coup d’œil : où se poser, quel chemin suivre, si la visite en vaut la peine. Tout son avenir en dépend : les visiteurs qui trouvent leur chemin emportent le pollen qui transforme les fleurs en graines.

Voilà de l’expérience utilisateur avant la lettre. Norman a forgé l’expression « user experience » chez Apple, en 1993, mais dès 1955, le designer industriel Henry Dreyfuss l’écrivait sans détour : « Quand le point de contact entre le produit et les gens devient un point de friction, le designer industriel a échoué. »

Une porte déroutante vous coûte une seconde et un peu de rouge aux joues. Un site déroutant coûte davantage : une réservation qui n’aura jamais lieu, un formulaire abandonné en route, un client qui part sans bruit chez le concurrent. L’expérience utilisateur, ou UX, c’est l’art de ce moment précis, quand une personne rencontre un objet et doit comprendre quoi en faire.

Un chemin tracé sur le pétale

Norman nous donne deux mots utiles. Une affordance, c’est ce qu’un objet permet de faire ; un signifiant, c’est ce qui vous l’indique : une plaque plate dit « poussez », une poignée dit « tirez ». Pour l’Interaction Design Foundation, les affordances sont les interactions possibles, et les signifiants, les propriétés du design qui les annoncent. Une porte de Norman a la bonne affordance et le mauvais signifiant.

Maintenant, agenouillez-vous près d’une pensée sauvage, la fleur de ce site, et regardez de plus près. De fines lignes sombres parcourent ses pétales inférieurs et convergent toutes vers le centre : les botanistes les appellent des guides à nectar. Elles mènent à l’ouverture derrière laquelle attend le nectar, dans un éperon à la base du pétale du bas, et ce large pétale sert aussi de piste d’atterrissage. Affordance et signifiant, réunis dans une seule fleur.

Certains guides ne sont même pas faits pour nos yeux. Les abeilles voient l’ultraviolet, qui nous est invisible, et les motifs ultraviolets sont très répandus chez les fleurs. Les pétales de la rudbeckie hérissée nous paraissent uniformément jaunes ; dans l’ultraviolet, leur moitié intérieure s’assombrit et dessine une cible autour du cœur.

En 2014, des chercheurs ont vaporisé de l’écran solaire sur ces fleurs pour masquer le motif. Les visites d’insectes se sont effondrées : 5, contre 57 pour les fleurs vaporisées d’eau.

Votre site fonctionne de la même façon. Le bouton qui permet de prendre rendez-vous doit ressembler à un bouton, et le chemin vers l’essentiel doit être aussi lisible que les lignes d’un pétale. Cachez le guide, et les visiteurs s’en vont.

Deux leviers qui se ressemblaient

En 1943, un jeune psychologue américain, Alphonse Chapanis, est chargé de comprendre pourquoi tant de pilotes rentrent le train d’atterrissage au lieu des volets, une fois posés. Les rapports d’accident ont une réponse toute prête, une expression de plus en plus fréquente pendant la guerre : l’erreur de pilotage.

Chapanis, lui, regarde de plus près les cockpits. Dans les avions concernés, les commandes du train et des volets sont côte à côte, sous la forme d’interrupteurs identiques ou de leviers presque identiques. Dans un avion de transport, où les deux commandes sont éloignées et s’actionnent différemment, les copilotes ne commettent jamais cette erreur. Ces prétendues erreurs de pilotage, comprend-il, sont des erreurs de conception, inscrites dans le cockpit.

La solution, en pleine guerre, est d’une modestie presque comique : une petite roue en caoutchouc au bout de la commande du train, une petite pièce en forme de coin au bout de celle des volets. Les pilotes les distinguent désormais au toucher, et sur les avions modifiés, les roues restent sorties. Après la guerre, ces commandes codées par la forme sont normalisées dans le monde entier.

Quand des personnes répètent la même erreur, regardez le design avant de les blâmer. Et quand deux actions ont des conséquences très différentes, comme « Enregistrer » et « Supprimer », ne les laissez pas se ressembler comme deux gouttes d’eau.

La fleur qui retourne sa pancarte

Vous appuyez sur le bouton d’appel de l’ascenseur. Il s’allume, et vous arrêtez d’appuyer. S’il ne s’allume pas, vous appuyez encore, plus fort, comme si l’ascenseur pouvait sentir votre impatience.

Ce petit voyant, c’est un feedback, une rétroaction : une réponse qui dit « bien reçu ». Norman en fait l’un de ses principes fondamentaux : répondre tout de suite, pour que chacun sache ce qui s’est passé et quoi faire ensuite.

Le marronnier d’Inde en a une version pour les abeilles. Chaque fleur blanche porte une tache jaune, son guide à nectar. Une fois la fleur pollinisée, la tache vire au rouge, et la production de nectar et de parfum chute fortement ou s’arrête. Les insectes trouvent les taches rouges peu attirantes, ce qui épargne sans doute aux abeilles des visites inutiles.

Les fleurs déjà pollinisées restent pourtant sur l’arbre. Selon les botanistes, l’arbre entier resterait ainsi grand et lumineux, visible de loin, tandis que chaque tache indique à l’abeille, de près, s’il vaut la peine de se poser.

C’est un joli modèle pour une vitrine ou un site : garder l’étalage plein, et signaler clairement ce qui n’est plus disponible. Une taille épuisée qui reste visible, grisée, épargne un clic et une déception. Un formulaire qui affiche « Message envoyé » évite qu’on l’envoie deux fois.

Conçu pour une main, utile à toutes

Sam Farber venait de prendre sa retraite de l’entreprise d’ustensiles de cuisine qu’il avait fondée. Avec sa femme Betsey, architecte, il était parti en Provence pour se consacrer à l’art et à la cuisine. Un jour, dans leur cuisine provençale, il la voit peiner avec un vieil économe : Betsey souffre d’arthrite aux mains. Le musée Cooper Hewitt résume ainsi la question qui a suivi : « Pourquoi ces objets n’avaient-ils pas évolué pour s’adapter à leurs utilisateurs, plutôt que l’inverse ? »

En 1989, Farber fonde OXO et travaille avec l’agence new-yorkaise Smart Design. Les premiers ustensiles Good Grips, lancés en 1990, ont de larges manches ovales, des prises souples et antidérapantes, et des formes pensées pour que l’outil fasse le travail à la place de la main. Ils sont conçus pour des utilisateurs de tous âges et de toutes capacités, à commencer par des mains comme celles de Betsey.

Les villes connaissent ce phénomène. Un soir du début des années 1970, à Berkeley, en Californie, Michael Pachovas et quelques amis, militants pour les droits des personnes handicapées, coulent du ciment en forme de rampe grossière au bord d’un trottoir, puis repartent dans la nuit. En 1972, la ville aménage son premier trottoir abaissé officiel.

Pensés pour les fauteuils roulants, les trottoirs abaissés se sont révélés utiles aux parents avec poussette, à ceux qui poussent de lourds chariots, aux voyageurs et à leurs valises. En 2017, Angela Glover Blackwell a appelé cela le « curb-cut effect », l’effet du trottoir abaissé. Microsoft, dans ses principes de design inclusif, le résume ainsi : résoudre pour une personne, en faire profiter beaucoup.

Les pétales le savent aussi : la plupart des fleurs portent de minuscules cellules coniques qui offrent une prise aux insectes. Quand des chercheurs de l’université de Cambridge ont présenté à des bourdons des fleurs posées à plat, ceux-ci n’ont pas fait de différence ; quand les fleurs étaient à la verticale, difficiles à tenir, ils ont appris à choisir celles qui accrochent. Ce qui est un confort les jours faciles devient une nécessité les jours difficiles : c’est tout l’argument de l’accessibilité.

Regarder de plus près

Repensez à ces histoires : une roue au bout d’un levier, un économe façonné pour les mains de Betsey Farber, une rampe coulée dans un trottoir de Berkeley, un pétale qui offre aux abeilles un endroit où se poser. Chacune est le portrait de la personne, ou du visiteur, pour qui elle a été pensée.

Et la porte du début ? C’était un portrait, elle aussi : celui de quelqu’un qui n’a jamais regardé les gens s’en approcher.

Regardez maintenant votre site, votre boutique ou votre service de la même façon. Quel portrait un inconnu y verrait-il : celui de vos clients, ou celui de votre organigramme ?

Mon jardin est mon refuge et mon laboratoire. Vue de loin, mon amaryllis n’est qu’une grande fleur rouge et blanche. De plus près, de fines lignes rouges parcourent chaque pétale et mènent toutes à son cœur pâle, comme les lignes d’une pensée. La nature devient infinie dès qu’on la regarde de près. C’est pour cela que ce site a une loupe, et que je crois que le bon design commence par l’attention, bien avant qu’on allume un écran.

Gros plan d’une amaryllis rouge et blanche : sur chaque pétale, de fines lignes rouges mènent au cœur pâle, d’où partent des étamines blanches et courbes, aux pointes jaunes.
Mon amaryllis, de près.

Cinq questions à emporter dehors

  1. Que dit votre design avant qu’on le lise ? Regardez votre page d’accueil, votre vitrine ou votre formulaire avec les yeux d’un nouveau venu. Les formes et les couleurs mènent-elles à la seule chose qui compte vraiment ?
  2. Où refait-on toujours la même erreur ? Posez la question à la personne qui répond au téléphone ou aux e-mails. Puis corrigez le design, pas les gens.
  3. Comment répond-il ? Après un paiement, un message ou une réservation, y a-t-il un signe clair que tout a fonctionné ?
  4. Qui peine en premier ? Quelqu’un sur un petit téléphone en plein soleil, quelqu’un aux yeux fatigués ou aux mains douloureuses, quelqu’un qui vous lit dans sa deuxième langue. Concevez pour ces personnes, et tout le monde y gagne.
  5. De qui est-ce le portrait ? Décrivez en une phrase la personne pour qui votre design a été conçu. Si vous n’y arrivez pas, commencez par là.

Prenez ensuite une loupe, ou simplement votre attention, et regardez une fleur de près, une pensée par exemple. Elle répond à ces questions depuis très longtemps.

Sources

Toutes les sources sont en anglais, sauf mention contraire ; les citations en sont traduites.