Décryptage de l’impact écologique des tendances UI et UX en 2023

En 2023 plus que jamais, il a été important pour les marques de réussir à se démarquer sur le web et notamment à travers leurs sites web.
Pour y arriver, chaque jour, des designers talentueux innovent et inventent de nouvelles interfaces au design toujours plus efficace. Marquer les esprits, capter l’attention, convertir, etc. Il existe plusieurs moyens de rendre les clients plus visibles et de mieux atteindre leurs objectifs.
Mais quelles sont les conséquences de ces nouvelles tendances UX/UI toujours plus ambitieuses ?

En se focalisant sur certaines des nouveautés qui ont marqué l’année 2023, nous allons étudier leur principe de fonctionnement et analyser leurs impacts potentiels en terme de performances et, par extension, environnemental.

Neubrutalism (Neobrutalisme)

C’est l’une des dernières tendances qui est venue prendre le contre pied de ce qui se faisait beaucoup il y a quelques mois. Rappelez-vous, jusqu’à la mi-2022, une majorité des interfaces était basée sur des ombres, des dégradés de couleurs et des contrastes faibles (toute la charte de Vercel ou Tailwind par exemple). Avec le Neubrutalism, c’est fini.

Cette approche vient poser des bases bien différentes. Grâce à un jeu de contraste élevé et de couleurs fortes, il arpente un style légèrement old school mais très moderne à la fois, notamment grâce à l’usage de polices nouvelles générations.

L’un des meilleurs exemples de rebranding basé sur cette tendance est la refonte du média américain The Verge. Il avait fait beaucoup parlé de lui à l’époque mais il est toujours debout, preuve d’une bonne acceptation par les utilisateurs. Une tendance qui s’annoncerait donc durable.

D’un point de vue énergétique, cette approche graphique est-elle tout aussi durable ? À premiére vue, c’est une tendance que l’on pourrait qualifiée de positive et c’est bien joué ! Grâce à ses aplats de couleurs et à l’absence de dégradés et d’ombres on optimise grandement l’utilisation des ressources. Un design en toute simplicité, peu gourmand mais qui fait de l’effet ! Il ne reste plus qu’à choisir une belle typo légère adaptée au web. Ça serait dommage de plomber les perfs avec ce petit détail !

Mais ce qui donne aussi du charme au Neubrutalism et qui améliore son efficacité, c’est l’ajout d’animations. Et c’est là que le risque d’avoir une solution initialement responsable vire à la crise écologique.
En effet, elles peuvent s’avérer très lourdes et consommatrices d’énergie si mal exécutées. Heureusement dans cette tendance on opte plus judicieusement pour des animations légères, délicates et on évite à tout prix les transformations d’images, l’usage de la 3D ou de jeux de dégradés.

En résumé, avec un style favorable à de bonnes expériences utilisateurs (contraste fort, peu d’éléments perturbateurs) et avec l’absence de processus lourds, le Neubrutalism a toute sa place aujourd’hui et demain pour un numérique responsable. 👍

90’s

Restons dans un style brut, inspiré cette fois des années 1990. Simple nostalgie ou véritable intérêt, on n’en remarque pas moins de plus en plus d’interfaces qui reprennent les codes de ces années anthologiques ! Elles prennent racines des jeux vidéos de ces années-là, des premiers sites web, des séries et films de l’époque qui avaient tendance à vouloir être toujours plus démonstratifs. Tout est très carré, pixellisé volontairement et rempli de couleurs criardes pour rappeler cet aspect rétro. Néanmoins, et contrairement au Neubrutalism dans lequel les typographies et icônes viennent nuancer l’aspect rétro, ici elles seront aussi tirées des années 90. Les fonds sont généralement des patterns de symboles ou d’icônes et rarement des aplats de couleur. Une approche qui demande à être utilisée de manière précautionneuse pour ne pas gêner la lisibilité.

Mais ce qui est sur, c’est que l’impact écologique semble être la dernière des préoccupations de ce type d’interfaces. On trouve beaucoup d’animations en “fausse 3D”, une série de sprites sous différents angles mis bout à bout pour donner un aspect saccadé. Ces animations peuvent être gérées avec des SVG, des GIFs ou d’autres technologies. Néanmoins, il n’est pas rare de voir des sites utiliser des vidéos à la place, plus simples à créer mais beaucoup (beaucoup) plus lourdes.

En résumé, en y mettant les moyens, et en prenant le temps, il est possible de coller à une UI 90’s sans créer quelque chose de trop lourd. Néanmoins le risque de plomber les performances n’est jamais très loin, tout comme celui de délaisser l’UX finale. 👎

Quelques exemples : https://www.letsbounce.gg/ avec une palette à fort contraste, couleurs criardes.

De nouvelles navigations grâce à WebGL

De façon transverse aux différentes tendances graphiques, les développeurs tentent de nouvelles manières de naviguer entre les pages ou au sein même d’un composant. Grâce au WebGL, les possibilité sont multiples et parfois vraiment impressionnantes : morphing d’images au changement de pages, utilisation de filtres graphiques sur les images ou interfaces, etc.

Halfway through the year. pic.twitter.com/olYc1tSve2

— Aristide Benoist (@AristideBenoist) July 1, 2023

Des expériences époustouflantes mais gourmandes en performances. Ces nouveautés demandent notamment que l’utilisateur active l’accélération GPU de son navigateur. Une option pas toujours activée par défaut, voir pour certains non disponible. Un autre inconvénient potentiel du WebGL est donc l’accessibilité numérique. De plus, il ne suffit pas d’activer cette option pour pouvoir exploiter tout le potentiel du WebGL, il faut également avoir une machine puissante qui tienne la route avec un GPU assez performant. En somme, les ressources de la machine de l’utilisateur sont souvent utilisées à pleine puissance !

Néanmoins, si les animations sont bien faites et optimisées, elles peuvent être fluides et légères. Ainsi, il ne sera pas nécessaire d’avoir une machine de guerre pour profiter pleinement de l’expérience utilisateur. C’est une question de dosage entre animations et performances.

Un autre avantage de la technologie WebGL est qu’elle peut être utilisée directement via son API native, sans nécessiter de librairies externes. Toutefois, des outils comme Three.js sont souvent employés pour simplifier son usage. WebGL reste aujourd’hui l’API graphique la plus utilisée sur le web. Cependant, depuis quelques mois, WebGPU commence à émerger comme une alternative prometteuse, grâce à des performances accrues et une meilleure exploitation des ressources matérielles modernes.

La différence se trouve en leur cœur : là où WebGL se base sur OpenGL, une surcouche permettant de communiquer avec les cartes graphiques, WebGPU vient s’interposer directement entre le navigateur web et les processeurs graphiques, éliminant ainsi les calculs intermédiaires pour une communication en temps réel, offrant ainsi des performances graphiques supérieures et une économie de ressources majeures.

En résumé, si les animations sont bien pensées et optimisées, elles peuvent être rapides et légères en exploitant pleinement l’API native WebGL sans avoir recours à des librairies externes. Par contre, le plus gros risque concerne l’accessibilité à cette technologie : ces nouveautés demandent à ce que l’utilisateur active l’accélération GPU sur son navigateur. Ce n’est déjà pas souvent le cas, mais il arrive aussi qu’il n’ait simplement pas de GPU assez performant. Une technologie à utiliser avec parcimonie et sans perdre de vue le risque de fracture numérique avec la généralisation de cette techno. 👍👎

Conclusion

En résumé, 2023 nous a offert de belles tendances en matière de design et d’expériences UX/UI. Elles apportent des innovations intéressantes et de réelles nouveautés pour les utilisateurs. Néanmoins, ces animations ont des répercussions sur les performances des sites web et, par extension, sur l’environnement. L’impact écologique de ces tendances n’est pas toujours au cœur de leurs priorités.

Elles ne présentent pas que des avantages et doivent donc être utilisées avec intelligence et cohérence pour s’inscrire toujours plus dans une démarche de construire un monde numérique toujours plus responsable. Il est crucial pour les designers et développeurs de tenir compte de ces limites pour garantir une expérience utilisateur agréable et optimale tout en faisant le maximum pour réduire l’impact environnemental de telles solutions web. L’écoconception commence par le design.