Quelles sont les bonnes pratiques UX/UI pour concevoir un site Low-Tech ?

La simplification de l’UX est un point important dans la conception d’un site Low-Tech. Cela permet de limiter le nombre de clics, de fluidifier la navigation et ainsi raccourcir les parcours utilisateurs. Les codes graphiques du design d’interface doivent également être simples et propres, afin de rendre le site le plus minimaliste possible.
low tech-post-1.png

À l'heure où les effets du changement climatique, la transformation des océans et la perte de biodiversité se font de plus en plus sentir, de nombreuses questions se posent quant à l'empreinte environnementale des technologies numériques.

À défaut de réduire notre consommation d’énergie générale, la digitalisation massive de nos vies et des processus de production n’ont fait qu'accélérer la production de gaz à effet de serre. 

Ainsi entre en jeu la Low-Tech, cette tendance qui se caractérise par la mise en œuvre de technologies simples, rapides, peu onéreuses, accessibles à tous et faisant appel à des moyens courants et locaux. Elle permet de promouvoir des techniques et des technologies ouvertes, accessibles et durables, intégrant la protection de l’environnement dès la phase de conception.


À quoi ressemble un site Low-Tech ?

L’éco-conception touche à l’UX, ainsi qu’aux templates, typographies, couleurs, background, images …

La simplification de l’UX est un point important dans la conception d’un site Low-Tech. Cela permet de limiter le nombre de clics, de fluidifier la navigation et ainsi raccourcir les parcours utilisateurs. Les codes graphiques du design d’interface doivent également être simples et propres, afin de rendre le site le plus minimaliste possible. On peut reconnaître un site Low Tech de très loin et ce qui pouvait être considéré comme un site basique il y a quelques temps est désormais un site avec une approche UX-UI très identifiable et vertueuse.
 

Quelles sont les bonnes pratiques à considérer ?

Dans la conception d’un site Low-Tech, il y a plusieurs points à prendre en compte, tels que :

  • Le nombre de pages : publier le moins de pages possible, les réduire ou encore favoriser les one-page.
  • Les typographies : utiliser les typographies issues de bibliothèques web et Police System. Le meilleur format est le format WOFF et WOFF2.
  • Les couleurs : 3 couleurs maximum sont préconnisées, des couleurs et non gourmandes (meilleure méthode : la bichromie), avec un fond noir à 100%, pas de texture et utiliser les couleurs RVB les moins consommatrices.

Mais nous devons également apporter un point d’attention à plusieurs autres composantes importantes telles que : 

  • Le choix des fonctionnalités : éliminer les fonctionnalités non essentielles. À savoir, 70% des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et 45% ne sont jamais utilisées.
  • La conception mobile first : celui-ci oblige, à cause de la taille de l’écran, à aller à l’essentiel et à simplifier l’UX et le nombre de fonctionnalités.
  • La préférence au site statique : limiter les animations de l’interface, les GIFs animés, les carrousels en Autoplay, car elles consomment beaucoup d’énergie.
  • La préconisation de Lazy Loading : affichage progressif des informations. Éviter les Chatbot, les Widgets et les Plugins (fil d’actualités, réseaux sociaux, Google Maps, carte interactive, vidéos incrustées, …)

L'Éco-conception touche tous les aspects du site, de sa globalité aux micro-détails :

  • Recherche : préférer la saisie assistée à l’auto-complétion.
  • Liste déroulante : vérifier la pertinence des choix disponibles.
  • Formulaire : employer uniquement si nécessaire et en limitant les champs  (uniquement les requis).
  • Pagination : éviter le défilement infini et préconiser plutôt la pagination ou un bouton “Voir plus”. 
  • Alerte : ne pas en solliciter en continu (ex : mails de confirmation inutiles).
  • Wording : afin de diminuer son impact, rédigez clairement et de manière concise votre texte, et  privilégiez les listes à puces plutôt que les blocs de texte, pour une lecture plus rapide. Privilégier des mots qui présentent de manière plus fidèle l’impact du numérique (ex : utiliser le mot “télécharger” plutôt que “Lire une vidéo”).

 

Traitement des contenus et référencement naturel

Si le site est correctement optimisé pour les moteurs de recherche, l’utilisateur trouvera plus facilement ce qu’il recherche et évitera les parcours inutiles. Un site éco-conçu aura donc de meilleures chances d’arriver en haut des résultats de recherche. 

La légèreté des contenus (image et texte) au niveau de la quantité et de la qualité est également un point crucial pour le référencement et une expérience utilisateur agréable et fluide.

Mais comment adapter les images et le contenu de mon site ?

Dans une démarche minimaliste, le contenu (texte et images) est un point important à prendre en compte lors de la conception. En plus de sélectionner les visuels qui seront utilisés, il faut traiter le poids des fichiers et respecter quelques bonnes pratiques. 

 

Les images

Il est important de privilégier des dimensions adaptées, tramage, monochromie et qualité réduite qui permettent un poids plus léger

  • Créer des visuels légers.
  • Limiter le nombre d’images et de vidéos sur la page.
  • Insérer un bloc image plus petit (Conteners).
  • Usecase pages d’équipe : penser aux photos de groupes plutôt qu’individuelles. 
  • Idées intéressantes : Proposer une option de configuration avec ou sans image. Ou bien, afficher l’image au clic.

 

L’optimisation du poids des fichiers

Pour diminuer l’impact écologique, il est important d’optimiser le poids des fichiers :

  • Vectoriel : préférer le vectoriel à l’image, ainsi que le Glyphe.

  • Vidéos : ne pas utiliser de lecture automatique de vidéos, se limiter à une 1’30 de temps et bannir les background vidéo.

Afin de conserver des poids de page minimes, nous pouvons choisir de ne les afficher sur l’index des articles que lorsque l’utilisateur le souhaite, ou bien, de ne pas les afficher sur ce même index lorsque les articles sont anciens (antérieurs à 4 mois).

 

La compression

Pensez à compresser les contenus en fonction de leurs utilités, dans les options proposées par défaut et favoriser les options les moins énergivores.

  • Images : téléchargement de l’image dans sa taille la moins grande (par défaut).
  • Média : médias non téléchargés / visualisés automatiquement (éviter les vidéos auto-play).
  • Documents à télécharger : optimiser et compresser les documents (pdf) et fournir un résumé si le document est très long.

La compression d’image ainsi que le bon format d’export, permet de réduire le temps de chargement et l’empreinte sur les serveurs d’hébergement.

  • Compresser l’image : simplifier le code de la photo de façon imperceptible pour l’œil humain. 
  • Bons formats d’exports : photo (jpg ou webp), image (svg), icône (glyphs, style css).
  • Pictogrammes : icônes coupées avec des bords effacés.

 

Le Responsive Image

N’oubliez pas de fournir une sélection de formats et de tailles d’images au navigateur afin que celui-ci puisse choisir lui-même laquelle charger en fonction du terminal utilisé ou de la vitesse de connexion.

Ainsi, pour créer un site web low-tech efficace, il est essentiel d'utiliser des polices lisibles et des couleurs contrastées pour améliorer la lisibilité. Cela aidera les utilisateurs à naviguer facilement sur le site et à comprendre rapidement le contenu. Ensuite, il est important d'utiliser des icônes et des images simples pour aider à la navigation. Les utilisateurs doivent pouvoir comprendre rapidement où ils se trouvent sur le site et comment accéder à d'autres pages. De plus, pour collecter les informations de l'utilisateur, il est important d'utiliser des formulaires courts et simples. Les utilisateurs doivent pouvoir remplir facilement les formulaires sans être submergés par trop d'informations. 

Enfin, il est important d'utiliser des boutons clairs et des appels à l'action pour diriger l'utilisateur vers les prochaines étapes. Les utilisateurs doivent savoir exactement quoi faire pour continuer à naviguer sur le site. Il est aussi important de tester le site avec des utilisateurs pour obtenir des commentaires et des idées d'amélioration.

Pour en savoir plus sur le Low-Tech, Green code et l’éco-conception, ou bien comment adapter les images et le contenu de son site web ou encore comment préparer son hébergement pour consommer moins et être plus Éco-Friendly, contactez-nous.

Cela pourrait vous intéresser

Actualités - Ylly

Découvrez tous nos articles autour de la communication digitale, des tendances, des nouveautés, de l'agence et des acteurs de la tech.

Sur ce blog, nous allons parler de SEO/SEA, Analytics, Développement sur mesure, Partenariats et Collaborations, nos Récompenses et tout pleins de sujets liés à l'entreprise !

30 Jun 2022 par Titouan LE MAGUER

Contactez-nous !

Vous souhaitez avoir plus d'informations ou vous adresser à des experts ?

Vous avez un projet qui mêle expérience utilisateur, problématiques technologiques, SEO et enjeux business ? 

N'hesitez pas à nous en dire plus.

Les données personnelles collectées sont destinées à Ylly et utilisées pour traiter votre demande et, lorsque vous ne vous y êtes pas opposé, vous communiquer nos offres commerciales. L’accès aux données est strictement limité par Ylly aux collaborateurs en charge du traitement de votre demande. Conformément au Règlement européen n°2016/679/UE du 27 avril 2016 sur la protection des données personnelles et à la loi « informatique et libertés » du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès, de rectification, d’effacement, de portabilité et de limitation du traitement des donnés vous concernant ainsi que du droit de communiquer des directives sur le sort de vos données après votre mort. Vous avez également la possibilité de vous opposer au traitement des données vous concernant. Vous pouvez exercer vos droits en contactant le DPO à l’adresse suivante: dpo@ylly.fr ou à notre adresse postale. Pour plus d’informations, veuillez consulter notre politique de confidentialité.