Alice Rawsthorn, «Chapitre 5. Retour vers le futur »

Alice Rawsthorn, "Chapter 5. Back to the future", in Alice Rawsthorn Design as an Attitude, Genève, JRP|Editions et Dijon, les Presses du réel, 2020, p. 57-65.

Tout devrait venir de quelque part et aller quelque part. La chose la plus importante est l'évidence. Le problème est le sur-design1.
Loren Brichter

 Si vous vous connectez à l'un des sites Web les plus importants et les plus fréquentés, comme celui du New York Times ou du Guardian, vous remarquerez peut-être trois lignes horizontales de même longueur formant un petit carré en haut de l'écran. C'est ce qu'on appelle « l'icône du hamburger », même s'il est plutôt exagéré d’interpréter les lignes supérieure et inférieure comme les deux moitiés d'un petit pain et celle du milieu comme la viande, le fromage et tout ce qui se trouve entre les deux. Curieusement nommées ou non, ces trois lignes sont apparues sur de plus en plus de sites web ces dernières années, principalement pour identifier un menu qui apparaît sur le côté de l'écran afin de révéler une liste de contenus.

Comme tous les symboles d'exploitation sur les écrans de nos ordinateurs portables, tablettes, téléphones et autres appareils numériques, le hamburger a assumé sa fonction actuelle parce que quelque chose devait le faire. Dans son cas, une fois que les smartphones sont devenus suffisamment puissants pour être utilisés comme navigateurs Internet, les concepteurs de sites Web ont dû trouver des moyens de supprimer les données de leurs pages pour les rendre plus faciles à lire sur des écrans plus petits. Remplacer les longs menus par des menus cachés qui s'affichent lorsque vous cliquez sur une icône était une solution intelligente. Le « panneau de navigation latéral », comme on l'appelle à juste titre, a été conçu en 2008 par le concepteur de logiciels américain Loren Brichter, qui a choisi de l'identifier en faisant revivre le hamburger, car celui-ci appartenait à l’origine à une interface utilisateur numérique pionnière des années 19802.

Un choix intelligent. Oubliez la correspondance sommaire avec un hamburger réel : renvoyant à un sommaire de livre, ces trois lignes ressemblent beaucoup plus à des intitulés de chapitres dont l’abstraction aurait été poussée à l’extrême. L'allusion est pertinente, car un sommaire imprimé remplit à peu près la même fonction qu'un menu de site Web. Le hamburger est également attrayant d’un point de vue visuel, notamment parce qu'il est indiscutablement numérique et, de ce fait, étonnamment singulier au milieu de l'esthétique timide et souvent nostalgique des interfaces utilisateurs.

Non pas que la conception d'interfaces utilisateurs numériques soit un échec : à bien des égards, c'est un triomphe. Permettre à des milliards de personnes de faire fonctionner un objet aussi complexe que le cerveau d'un ordinateur est un défi de conception herculéen, qui est devenu de plus en plus difficile à mesure que les appareils numériques ont diminué en taille tout en augmentant en puissance. L'aspect le plus important d'une interface, ou de tout autre projet de design, est qu'elle doit remplir sa fonction efficacement, mais l'expérience liée à son utilisation compte également. Bon nombre des aspects les plus agréables de l'utilisation des appareils numériques impliquent le toucher et le mouvement, comme la manœuvre « Pull-to-refresh » avec laquelle nous mettons à jour nos boîtes aux lettres électroniques et nos flux Instagram en tirant sur le haut de l'écran. (« Pull-to-refresh » est une autre innovation de Brichter.) Mais la dimension visuelle des interfaces utilisateurs a été moins séduisante, même si les symboles d'exploitation numérique, comme l'icône du hamburger et les applications de messagerie sur les écrans tactiles, figurent parmi les images les plus omniprésentes de notre époque et nos outils les plus utiles. Pourquoi l'esthétique d'un objet aussi omniprésent, dont le design est par ailleurs très sophistiqué, est-elle si souvent décevante ?

Lorsque les premiers ordinateurs sont apparus dans les années 1950, ils étaient exploités par des techniciens spécialement formés qui tapaient des instructions, sur des claviers de type machine à écrire, sous forme de code de programmation. Ces machines étaient si grosses, généraient tant de chaleur et de bruit, que la plupart d'entre elles étaient placées dans des pièces spécialement conçues à cet effet. Elles étaient également si chères que seules les organisations très fortunées pouvaient se les offrir. Ce n'est qu'à la fin des années 1970 que des passionnés — comme les cofondateurs d'Apple, Steve Jobs et Steve Wozniak, aux États-Unis, ou Clive Sinclair au Royaume-Uni — ont mis au point des kits informatiques suffisamment petits et bon marché pour être achetés par des particuliers. Les designers et les programmeurs des nouveaux ordinateurs personnels ont alors dû trouver des moyens de permettre aux personnes peu familiarisées avec le codage (la grande majorité de leurs clients potentiels) de les utiliser. Une grande partie des premières recherches sur le design d'interfaces numériques — notamment les travaux de Muriel Cooper et de Ron MacNeil menés au sein du Visible Language Workshop du Massachusetts Institute of Technology depuis sa création, en 1974, jusqu'à la mort de Cooper, en 1994 — ont poursuivi cet objectif, tout en cherchant à conférer à l'imagerie numérique la clarté et la sensibilité des meilleurs design, quel que soit le support.

Dans son livre Designing Interactions, publié en 2007, le designer de technologies3 Bill Moggridge décrit comment les premières interfaces utilisateurs numériques ont été développées par des informaticiens et des designers ingénieurs dans des laboratoires de recherche, comme le Xerox Palo Alto Research Center (en abrégé Xerox PARC), dans le nord de la Californie. Leur travail était guidé par l'hypothèse communément partagée que plus les commandes d'un ordinateur sembleraient proches des choses familières et similaires à leurs fonctions, plus il serait facile de les utiliser. À cette fin, ils ont calqué la première interface utilisateur numérique, qui a été introduite en 1981 avec l'ordinateur Xerox Solo « Star », sur le flux de la paperasse dans un bureau — le stockage des documents dans des fichiers, des dossiers et des armoires, et la mise au rebut des déchets dans des poubelles — en créant des répliques imagées de ces objets pour représenter les commandes correspondantes4. L'interface du Star comportait plusieurs symboles d'exploitation créés par Norm Cox, un ingénieur concepteur de Xerox PARC, dont un rectangle vide représentant un document en papier A4 et l'icône du hamburger.

Microsoft, Apple et d'autres sociétés ont également adopté le modèle de bureau, tout en concevant leurs propres symboles d'exploitation à ajouter à ceux de Xerox. Un concepteur d'Apple, Bill Atkinson, a raconté à Moggridge que lors du développement de l'ordinateur de bureau Lisa, au début des années 1980, ils ont décidé d'avertir les utilisateurs lorsque la poubelle devait être vidée. Atkinson a suggéré que des mouches bourdonnent autour du couvercle, comme elles le feraient dans la vie réelle, mais cela fut rejeté par ses collègues. Craignant que les insectes bourdonnants ne soient trop dérangeants, ils ont insisté pour utiliser des feuilles de papier blanc froissées à la place5. Le Lisa s'est mal vendu, mais le contenu cliniquement immaculé de la poubelle lui a survécu.

D'un point de vue graphique, ces premiers symboles d'interface utilisateur étaient assez grossiers, notamment parce que les pixels, à partir desquels les images numériques étaient construites, étaient très grands à l’époque. Mais la qualité de l'imagerie de l'interface utilisateur s'est améliorée au fur et à mesure que l'infographie se raffinait, avec des pixels de plus en plus petits et des détails de plus en plus subtils. Au cours de la dernière décennie, nous nous sommes habitués à voir des symboles de fonctions de plus en plus complexes sur les écrans de nos ordinateurs, smartphones et tablettes, souvent agrémentés d'effets décoratifs, tels que des ombres portées et des surfaces faussement texturées ou polies.

En théorie, ces progrès auraient dû permettre aux designers de créer une nouvelle esthétique singulière, l'équivalent, au début du XXIe siècle, des commandes des produits électroniques Braun qui, dans années 1950 et 1960, furent si adroitement conçues. Louer la beauté glaciale des radios et des tourne-disques Braun est devenu un cliché de design, ils demeurent cependant des modèles de l'efficacité et de l'élégance que Muriel Cooper recherchait pour le graphisme numérique. Les concepteurs de Braun y sont parvenus en minimisant le nombre de boutons, d'interrupteurs et de cadrans, en les plaçant dans des séquences ordonnées et en guidant l'utilisateur à l'aide d'indications visuelles telles que le code couleur. Les interrupteurs « Off » étaient toujours rouges, et les interrupteurs « On » verts. Ils ont même modifié la forme du dessus des boutons pour indiquer s'ils devaient être enfoncés fermement ou pressés en des points particuliers : concave pour le premier cas, convexe pour le second. Cette formule permettait d'utiliser les produits sans effort, tout en créant une esthétique innovante et distinctive qui définit encore cette époque.

Au lieu de s'efforcer de produire quelque chose d'aussi convaincant, le design d'interfaces utilisateurs numériques s'est imprégné de nostalgie. Pendant une grande partie de la dernière décennie, il a été dominé par des images hyperréalistes ou skeuomorphiques6 du type d'objets analogiques que les concepteurs de Xerox PARC utilisaient comme invites il y a plus de 30 ans. Prenez l'enveloppe en papier avec un sceau de cire rouge antique qui identifiait l'application de messagerie d'un téléphone Android Samsung. (La seule touche numérique était le @ d’une adresse e-mail estampillée dans la cire.) En 2012, Apple a dévoilé le logiciel d'exploitation iOS 6 pour iPhones et iPads, dont les symboles graphiques comprenaient un combiné téléphonique traditionnel pour l'application téléphone, une enveloppe pour le courrier électronique, du papier ligné pour les notes et une horloge dont la ressemblance avec l'horloge officielle des chemins de fer suisses a provoqué un litige juridique. (Apple a reconnu sa défaite et a finalement conclu un accord pour en acquérir les droits d'utilisation7.) La bibliothèque en bois de mauvais goût, qui identifiait la librairie numérique, était encore plus ringarde.

Pourquoi une entreprise investirait-elle autant d'argent et d'énergie créative dans le développement de livres numériques pour les présenter comme étant pratiquement identiques aux livres imprimés ? Pourquoi ne pas les illustrer d'une manière qui mette en évidence leurs avantages : par exemple, offrir un plus grand choix de titres accessibles instantanément et sans mettre en péril l'environnement en gaspillant du papier, de l'encre et le combustible fossile nécessaire pour expédier les livres traditionnels des imprimeurs aux entrepôts et aux librairies ? Les symboles analogiques qui avaient semblé rassurants aux ingénus8 de la technologie aux premiers jours des interfaces numériques étaient devenus condescendants. Ils risquaient également de déconcerter les jeunes utilisateurs, qui n'ont peut-être jamais possédé de téléphone fixe ou d'autres objets physiques rendus superflus par les utilisations qu'ils symbolisaient.

Quelques semaines avant les débuts d'iOS 6, Microsoft a présenté le système d'exploitation Windows 8 avec une esthétique très différente. Plus simple dans son style et dépourvu de déferlantes décoratives, il était dominé par des blocs de couleurs franches et une typographie épurée. Le « flat design9 », comme on l'a baptisé, a également été adopté par Google, Twitter, Facebook, Dropbox, Samsung et, finalement, Apple. Le style des systèmes d'exploitation ultérieurs d'Apple a été plus épuré et moins difficile que celui d'iOS 6, mais il est toujours truffé de références analogiques. Prenez le logiciel iOS 11, qui a été présenté à l'automne 2017 après avoir été annoncé avec l'esbroufe habituelle d'Apple comme : « Un pas de géant pour l'iPhone. Un bond monumental pour l'iPad ». Malgré l'hyperbole, l'horloge, l'appareil photo, l'enveloppe et les symboles de papier ligné ont tous survécu. Heureusement, la bibliothèque a disparu depuis longtemps, mais pour être remplacée par un bon vieux livre imprimé. La seule lueur d'espoir était la réapparition de mon élément skeuomorphe préféré dans les premières interfaces d'Apple, le clavier de la calculatrice inspiré de la calculatrice de poche ET44 de Braun éditée en 1977. Il a été supplanté par un morne morceau de « flat design » dans plusieurs versions d'iOS, mais est revenu dans iOS 11, bien que dans une version légèrement plus terne. Apple s'est débarrassé de ses excès skeuomorphiques, mais n'a pas totalement adopté le « flat design », ni réussi à développer une nouvelle esthétique convaincante.

Malheureusement, les interfaces d'Apple ne sont pas les seuls exemples ternes du « flat design » qui, même s’il insuffle un esprit plus radical, épuré et relevé que le style skeuo, peut être aussi austère que son nom le suggère. L’« esthétique plate » n'est pas non plus exempte de nostalgie : influencée par le modernisme européen d'après-guerre, elle incarne le style suisse de typographie défendu par Max Bill et Adrian Frutiger.

Quel que soit le contexte, il est extrêmement difficile de développer une esthétique définitive de design, comme Braun a pu le faire autrefois ; mais c’est encore plus difficile pour un objet aussi complexe qu'une interface numérique aux fonctions multiples. Alors que les concepteurs de Braun pouvaient se fonder sur le principe issu du design industriel moderniste selon lequel « la forme suit toujours la fonction » pour fournir des indices physiques sur la manière d'utiliser leurs produits, les concepteurs d'appareils numériques ne peuvent pas le faire. Comment pourriez-vous deviner ce qu'il faut faire avec un smartphone ou une tablette minuscule et impénétrable en les regardant ? C'est impossible. Un autre obstacle tient à la nécessité de concevoir des systèmes d'exploitation qui, à l'instar des panneaux de signalisation, doivent être facilement compréhensibles par des personnes ayant des niveaux de connaissances et d'expérience technologiques radicalement différents, et ce sans irriter les experts ni dérouter les ingénus10.

Pourtant, les designers d'interfaces utilisateurs disposent également d'avantages significatifs. Leur domaine est relativement nouveau, ce qui est souvent propice à une approche audacieuse et expérimentale du design. Il combine également de grandes marques disposant d'immenses ressources en matière de recherche —comme Apple, Google et Microsoft — avec d'innombrables opportunités offertes aux designers attitudinaux, entreprenants et volontaires tels que Brichter de fonctionner de manière indépendante, à l'abri des politiques d'entreprise et de la pression des compromis. L'aspect visuel de la conception d'interfaces utilisateur n'est pas non plus encombré de contraintes formelles. Il n'y a pas de pression législative pour utiliser des symboles d'exploitation spécifiques, ni d'accord sectoriel obligeant les entreprises à le faire. En théorie, les designers d'interfaces utilisateurs ont été libres d'inventer leur propre esthétique, et ont eu l’inestimable avantage de bénéficier de progrès technologiques considérables pour les aider.

Saisiront-ils davantage ces opportunités à l'avenir ? Il n'y a aucune raison de ne pas le faire, d'autant plus que le design d'interfaces a déjà accompli beaucoup de choses sur le plan fonctionnel et haptique. Si les interfaces numériques s’imposaient tout autant d'un point de vue visuel, nous en profiterions tous. Que préféreriez-vous voir sur votre écran ? Un hamburger d'une éloquence inattendue, dont le clin d'œil s’adresse aux seuls pionniers de l'informatique un brin nostalgiques, ou une bibliothèque dont l'aspect physique ou numérique est tout aussi peu attrayant ?


  1. Jessica E. Lessin, "High Priest of App Design, at Home in Philly", The Wall Street Journal, March 17, 2013. https://www.wsj.com/articles/SB10001424127887324392804578358730990873670.
    [Nous traduisons « over design » par « sur-design ». Sur-conception aurait éludé le fait que c’est bien du design, du trop « designé », si le terme existait en français, dont il s’agit.] 

  2. L'icône originale du hamburger a été conçue par Norm Cox, designer et ingénieur d'études au centre de recherche et développement Xerox PARC de Palo Alto, en Californie du Nord, pour l'ordinateur de 1981, le Xerox 8010, ou « Star ». Loren Brichter l'a fait revivre comme symbole pour identifier les listes sur Tweetie, une application qu'il a conçue alors qu'il travaillait pour Apple en 2008. Tweetie a été conçue pour permettre aux utilisateurs d'iPad d'utiliser Twitter. “A Brief history of the Hamburger Icon — Placeit Blog”: https://blog.placeit.net/history-of-the-hamburger-icon

  3. [« Tech designer », dans le texte d’origine.] 

  4. Bill Moggridge, Designing Interactions, The MIT Press, Cambridge, Massachusetts 2007, p. 53-54. 

  5. Bill Moggridge, Designing Interactions, p. 101. 

  6. [Ce terme renvoie à un élément de design dont la forme reproduit un objet existant, une texture, etc. dans le seul but de faciliter l’utilisation de telle ou telle fonction : une boussole pour naviguer sur Internet, un dossier avec onglet pour désigner un fichier, par exemple.] 

  7. L'horloge des chemins de fer suisses a été conçue en 1944 par Hans Hilfiker, ingénieur et employé des SBB, le réseau ferroviaire suisse. Le design a été déposé et l'horloge est installée dans les gares de toute la Suisse. Les SBB ont poursuivi Apple pour violation du droit d'auteur en 2012, affirmant que le symbole de l'interface utilisateur de l'horloge d'iOS 6 était basé sur l'horloge des chemins de fer suisses. Apple a ensuite conclu un accord avec SBB pour acquérir les droits de licence sur le design. "Apple gets OK to use Swiss railway clock design", http://www.reuters.com/article/us-appel-iphone-swissclock-idUSBRE89BoSV20121012

  8. [En français dans le texte, sous la forme « ingénues ».] 

  9. [Littéralement : « le design plat », c’est-à-dire sans ajout d’ordre esthétique. Nous conservons le terme de « flat design » qui est passé, tel quel, en français.] 

  10. [En français dans le texte.]