Parcours utilisateur UX : Les 6 points essentiels pour un site éco-conçu

Le parcours utilisateur UX décrit le chemin emprunté par l’utilisateur lorsqu’il interagit avec votre site web, allant de son arrivée sur la page d’accueil jusqu’à l’accomplissement de son objectif. Ce parcours peut être influencé par divers facteurs tels que la conception du site, la disposition des éléments de navigation, la qualité du contenu, la vitesse de chargement, l’ergonomie, et bien d’autres encore. Les concepteurs de sites web s’efforcent d’optimiser ce parcours utilisateur afin de faciliter l’expérience de l’utilisateur, accroître son engagement et maximiser les conversions. Mais quelles sont les techniques d’optimisation pour réussir à créer un parcours utilisateur efficace, par exemple pour un site éco-conçu ? Découvrez, avec Ethiko, les astuces essentielles pour y parvenir, et n’hésitez pas à contacter notre agence web spécialiste en éco-conception web à Bordeaux pour un accompagnement approfondi.

1. Un parcours utilisateurs optimisé, intuitif et efficace

Minimiser les interactions avec le serveur et trouver une information le plus vite possible

Minimiser les interactions consiste à permettre à l’utilisateur de trouver rapidement l’information qu’il recherche. Si le visiteur passe beaucoup de temps sur un site pour arriver à atteindre son objectif, alors son empreinte environnementale sera très élevée. Le but étant de raccourcir au maximum le parcours utilisateur UX, dans l’exemple d’un site éco-conçu, afin de diminuer l’empreinte environnementale.

Se mettre à la place de l’utilisateur avec la méthode du Design Thinking

Pour offrir une expérience utilisateur de qualité sur un site web, il faut savoir se mettre à la place de votre utilisateur et le mettre au centre de la conception du projet. Pour cela, il existe une démarche appelée “Design Thiking”. C’est une méthode d’intelligence collective basée sur l’humain qui va permettre d’appréhender et de résoudre des problèmes complexes. Cette méthode permet de renforcer la cohésion d’équipe. Le plus important est d’avoir une vision empathique afin de lister des exemples de parcours utilisateurs. Cela pourra alors servir à structurer votre site web, ainsi que vos contenus.

Les 3 principes fondamentaux du Design Thinking:

• La collaboration : pour innover et trouver de nouvelles idées, il faut co-créer.
• L’itération : La mise en œuvre d’un projet d’innovation suit une approche non linéaire basée sur des itérations. Les idées sont élaborées, testées, abandonnées ou améliorées, dans le but d’atteindre la meilleure solution possible. Pour trouver des solutions et s’améliorer, il faut s’autoriser à faire des erreurs.
• L’empathie : pour trouver des solutions adaptées et pertinentes, il faut mettre l’utilisateur au centre et utiliser sa sensibilité et sa logique.

Le process design thinking: 

Le process du Design Thinking peut se diviser en 2 phases :

• Phases de divergence : ouvrir le champ des possibles et générer un maximum d’idées sans se brider.  
• Phases de convergence : se mettre d’accord en équipe sur les défis à relever, les idées pertinentes à garder et le choix d’une solution.

L’alternance de ces deux phases crée un processus qu’on appelle un process en double diamant. 

Les 5 phases du process du double diamant: 

• Immersion : c’est la phase d’observation. On cherche à comprendre ses utilisateurs pour identifier leurs usages, leurs besoins, leurs motivations, leurs attentes et aussi leurs freins.

Exemple : Se poser des questions, comme si j’étais l’utilisateur, est-ce que j’arrive assez rapidement à l’information ? Combien de temps, je passe sur un site ? Qu’est-ce que je regarde en premier ? Qu’est-ce que j’attends du service proposé ? Est-ce que j’achète du premier coup ?…

• Définir la problématique : c’est la phase de convergence. Elle permet à l’équipe de conception de se mettre d’accord sur la problématique, le challenge qui va guider le process design.

Exemple : votre problématique dépend d’un objectif. Il existe plusieurs objectifs comme créer un bouton pour réserver une prestation, créer un formulaire pour récolter des données client dans un CRM, vendre un produit ou un service…

• Idéation : ceci correspond à la phase de divergence qui ouvre le champ des possibles. Le but est de générer un maximum d’idées pour répondre à la problématique en laissant libre cours à son imagination.

Exemple : faire un brainstorming de toutes les idées d’actions à mettre en place, créer un formulaire, créer une boutique en ligne, créer un blog, créer une page de réservation, créer une page de paiement…

• Prototyper : correspond à la phase convergente. Elle permet à l’équipe de fixer la solution finale et d’y donner vie en la prototypant.

• Tester : Les participants sont évalués par différentes méthodes comme des quizz ou des mises en situation.

Pourquoi utiliser la méthode du Design Thinking ?

Le design thinking permet de travailler en “test and learn”. En effet, on teste constamment tout au long du projet, ce qui permet de se rendre compte plus rapidement si l’on est dans la bonne direction ou non.

2. Optimiser le SEO et la structure du sitemap lors du parcours utilisateur UX

Définition et utilité en SEO du sitemap

Un sitemap est un fichier qui liste les URL du site que vous voulez faire crawler et indexer. Le format sitemaps.org doit être déclaré aux moteurs de recherche. Il aide à faire des analyses SEO plus avancées. C’est un protocole qui est proposé par les grands moteurs de recherche. Il permet aux webmasters de lister les URL qui vont être explorées dans l’optique d’être indexées. Pour réaliser votre sitemap, une page correspond à une idée. Par exemple, si vous vendez des services, chaque page doit être dédiée à un service, etc.

Le sitemap est utile en SEO pour plusieurs raisons, que notre agence web Ethiko détaille pour vous ci-dessous. 

Accélérer le crawl et l’indexation des nouvelles URL mises en ligne :

Votre sitemap va aider les robots de Google à trouver les pages de votre site internet et à les indexer plus rapidement.

Repérer les pages orphelines :

Une page orpheline est une page web qui n’a pas de liens pointant vers elle depuis d’autres pages du site. 

Voici comment trouver les pages orphelines dans les sitemaps :

• Votre sitemap doit contenir la liste de toutes vos pages stratégiques
• Faites un crawl complet de votre site et retenez les pages qui sont indexables
• Repérez quelles pages du sitemap sont absentes du crawl : ce sont les “orphelines des sitemaps”.

Vérifier l’indexation de ses pages web sur Google

L’indexation désigne l’activité des robots de Google découvrant une page qui est “prête” à être présentée dans des résultats de recherche. Une fois que Google l’a découverte et l’a jugée “compatible”, les robots indexent la page. Cela veut dire qu’elle apparaîtra dans les pages de résultats du moteur de recherche. Certains sites web, tels que des sites d’actualités, sont susceptibles d’être plus “crawlés”, c’est-à-dire scannés par les algorithmes de Google, que les autres. En effet, cela est dû au fait qu’ils sont mis à jour quotidiennement.

Analyser les performances SEO selon les différents types de pages:

• Avoir un sitemap pour chaque type de pages : fiches produits, catégories, articles de blog, etc.
• Déclarer tous ces sitemaps dans la Search Console.
• Observer l’état de l’indexation pour tous les types de pages que vous avez. Vous pouvez filtrer le rapport “Couverture” de chaque sitemap
• Avec l’API (interface de programmation) de Google Analytics, pour chacune des URL de vos sitemap, étudier les performances sur une période définie (nombre de sessions générées en organique, nombre de vues de la page, valeur de la page, etc.).

Accélérer la désindexation de certaines URL:

• Vérifiez que les URL concernées sont non indexables
• Faites un fichier spécial désindexation qui liste toutes vos pages à faire désindexer. 
• Soumettez-le sur Google Search Console : cela va inciter Google à venir les crawler afin de constater qu’elles ne doivent plus être indexées
• Faites un suivi du nombre d’URL désindexés de ce sitemap

Google gère les fichiers sitemaps à condition qu’ils reconnaissent l’URL de votre fichier, d’où l’importance du nom du fichier. De plus, un titre évocateur dans une recherche Google permet à l’utilisateur d’être certain de tomber sur l’article qu’il souhaite consulter. 

La mise en place d’un sitemap permet de faciliter l’indexation des pages et des contenus d’un site sur Google. Un sitemap qui n’est pas mis à jour peut contenir des urls qui n’ont plus leur place. L’optimisation du sitemap va prévenir les pages sans intérêt. Cela va éviter à l’utilisateur une visite inutile et permet un UX du parcours utilisateur plus simple et efficace. 

Cela permet aussi de diminuer le taux de rebond, d’améliorer le taux de conversion, par exemple pour un site e-commerce, et réduit les dépenses énergétiques inutiles.

3. Supprimer les fonctionnalités non essentielles pour un parcours utilisateur de site web optimal

Améliorer à la fois les dépenses énergétiques et le parcours utilisateur UX : exemple d’un site éco-conçu

Éliminer les fonctionnalités non essentielles est un enjeu important de l’éco-conception, car souvent, les CMS que l’on utilise pour la création de site web sont assez lourds, comme WordPress, Joomla ou bien Drupal. Pour cela, avant de passer à l’étape de conception, il est crucial d’évaluer avec précision les besoins, afin d’éviter la multiplication de fonctionnalités inutiles. Construire des expériences utilisateurs en allant à l’essentiel, en se concentrant uniquement sur ce qui transforme et intéresse les visiteurs.

Mesurer avec Hotjar les zones les plus cliquées

Hotjar est un outil d’analyse sur les comportements des visiteurs d’un site web dans le but de détecter les points de friction. En effet, il génère des heatmaps (cartes de chaleur) sur une page de votre site web qui permettent d’identifier et d’analyser divers éléments de vos pages web.

Par exemple, on remarque sur notre page contact que la zone la plus cliquée sont les coordonnées et les boutons contact, alors que les zones les moins cliquées sont le petit texte de présentation. Cela nous donne l’importance de nos informations. Si un bouton n’était pas cliqué alors, il aurait fallu le voir ou l’enlever pour alléger la page.

Identifier les zones où il y a le plus de mouvement

Les internautes utilisent leur curseur de souris comme aide à la lecture, comme un enfant le ferait avec son doigt quand il apprend à lire. Ce mouvement va donc nous montrer les zones les plus regardées et les plus lues de notre page. Par exemple, sur notre page contact, on remarque que les zones les plus lues sont les coordonnées, alors que la zone la moins lue est le texte de présentation du début. Cette analyse nous permet d’optimiser notre texte et notre page, afin de l’alléger.

Trouver les zones les plus scrollées

Par exemple, sur notre page contact, on voit bien que la zone en rouge est la zone où il y a 100% des utilisateurs qui scrollent, en orange 90%, en jaune, il y en a 80%, en vert clair 75%, en vert plus foncé 65% et ensuite le reste a moins de 50%. Grâce à cette analyse, on va pouvoir optimiser la répartition de nos informations, il faut privilégier les informations importantes en haut de la page. Cela va aussi nous aider à enlever les fonctionnalités qui ne sont pas regardées pour alléger la page.

Mesurer avec Google Analytics 

La collecte de cookies par votre navigateur permet aux outils d’analyse comme Google Analytics de mieux identifier les internautes et leurs intérêts, afin de leur proposer des contenus toujours plus cohérents et personnalisés.

Avec Google analytics, on peut analyser les données sur le comportement des utilisateurs, ce qui nous permet de comprendre :

• le temps qu’un utilisateur a passé sur votre site web ;
• les premières et dernières pages vues ;
• la « source » la plus commune par laquelle ils arrivent sur votre site web.

En plus de cela, il est possible de voir le parcours complet de votre utilisateur, ce qui va nous permettre d’identifier les pages inutiles et donc de les éliminer pour avoir un site qui va à l’essentiel. Voici un exemple de parcours utilisateur UX sur le site de notre agence web :

Testez votre site avec Ecodesign.dev

Un outil numérique qui calcule les performances environnementales de votre site internet

Vous pouvez tester votre site web sur notre outil ecodesign.dev. Vous obtiendrez un détail de votre score de performance environnementale comme présenté ci-dessous.

Ce score est basé sur 3 éléments :

• Le nombre de requêtes : pour un score optimal, il faut 40 requêtes serveur par page.
• La taille de la page en Mo : il faut que votre page fasse 1,024 MO pour avoir un poids de page optimal.
• La taille de la DOM : Le “Document Object Model”, appelé DOM, est une représentation hiérarchique d’un document HTML ou XML. Le DOM est composé d’objets, avec un objet principal à partir duquel dépendent les objets secondaires. La taille du DOM se réfère donc au nombre d’objets présents dans cette structure d’arbre.

Quelques conseils d’optimisation web pour améliorer votre score

Le score écologique de votre site internet peut être amélioré par les actions suivantes :

• optimisez les images en choisissant le bon format et réduisant la taille ;
• évitez les vidéos et fonds vidéos ;
• compressez les fichiers (HTML, CSS, JS, SVG) ;
• limitez le contenu et les fonctionnalités à l’essentiel ;
• évitez les mécanismes comme le «  scroll  » infini et les carrousels web ;
• limitez l’utilisation de widgets et plugins ;
• utilisez des polices standards plutôt que des polices custom ;
• préférez les pages statiques ;
• supprimez les thèmes dont vous n’avez pas besoin.

4. Minimiser les éléments non nécessaires pour améliorer l’user experience

Définition du Document Object Model (DOM)

Le Document Object Model (DOM) est une représentation de la structure d’un document HTML, XML ou XHTML. Il s’agit d’une interface de programmation qui permet d’accéder et de manipuler les éléments d’une page web de manière dynamique.

Le DOM représente chaque élément de la page web (comme les balises HTML) en tant qu’objet dans une structure en arbre (ou arborescence), où chaque nœud de l’arbre représente un élément du document. 

Cela permet aux développeurs d’accéder, de modifier et de manipuler les éléments, les attributs et le contenu d’une page web à l’aide de langages de programmation tels que JavaScript.

La taille du DOM affecte vos performances

La taille du DOM a un impact sur les performances d’une page web. En effet, un DOM trop grand va alors ralentir la vitesse de votre site web.

Il y aura alors un impact sur :

• L’efficacité du réseau et les performances de chargement : Si la taille du DOM est trop grande, il y a un risque que certains éléments HTML ne soient pas visibles au premier chargement de la page de l’utilisateur, mais consomment quand même des données inutilement. Cela va donc provoquer un ralentissement du chargement du site et va augmenter la consommation des données pour rien. 

• Les performances au niveau de l’exécution : Plus la taille du DOM est élevée, plus la navigation va avoir besoin de recalculer en permanence les styles de balises HTML lors d’interactions entre l’utilisateur et le script.

• Les performances au niveau de la mémoire: Plus le DOM est grand, plus le navigateur va avoir besoin de mémoire pour traiter les informations.

Réduire techniquement le poids des données des DOM

Pour réduire la taille du DOM, afin qu’il n’impacte pas négativement les performances de votre site web, vous devrez supprimer tous les éléments avec du code HTML qui vous sont inutiles ou pas nécessaires. Pour cela, vous pouvez utiliser le Plugin Dom Size Analyzer, bientôt disponible sur ecodeisgn.dev, qui va vous permettre de voir l’état des éléments de votre DOM de chaque page.

Par exemple, sur notre page contact, on remarque que tous nos éléments sont en vert, ce qui signifie que la taille du DOM est optimale. Vous pouvez avoir du jaune, de l’orange et du rouge, ce qui veut dire qu’il faut diminuer le nombre d’éléments dans votre DOM. Pour cela, il faut analyser les différents éléments, afin de les réduire et de supprimer ceux qui sont le moins utiles.

5. Concevoir en mobile first si possible 

L’approche « mobile-first » dans le parcours ux

Le « mobile-first » consiste à concevoir un service numérique pour une version mobile, puis de l’adapter au format “desktop” ; ou “bureau”, c’est-à-dire pour des ordinateurs. Cette adaptation doit s’accompagner d’une conception en responsive design, pour pouvoir s’afficher correctement sur tout type de support. L’approche mobile first permet de garantir le bon fonctionnement de notre service sur les appareils mobiles et d’améliorer le parcours utilisateur des mobinautes.

La conception mobile first joue sur la cohérence, la navigation et la hiérarchisation du contenu. Cela permet une bonne expérience utilisateur. Grâce au chargement uniquement de contenu essentiel, ça diminue l’empreinte carbone et ça aura donc un impact positif sur l’environnement. Les smartphones sont utilisés par plus de 55 % des utilisateurs. Le but du « mobile-first » est, entre autres, de créer un service numérique plus sobre.

Un chargement adaptatif

C’est une approche qui permet de sélectionner les ressources, y compris le code JavaScript et CSS, les plus adaptées au contexte d’utilisation, d’un point de vue du serveur. On retrouve la taille de l’écran, de la fenêtre, la densité de pixels, la qualité du réseau ou encore la quantité de mémoire vive. 

On garantit alors de ne pas consommer la bande passante de façon inutile, ni de trop solliciter le processeur et la mémoire du terminal pour des traitements non essentiels.

Les étapes de la mise en œuvre sur smartphone

• Dans un premier temps, construire un site mobile qui peut par la suite être étendu sur le mode desktop.
• Investir dans des outils techniques spécifiques aux téléphones portables.
• Faire des tests d’ergonomie et d’AB testing directement sur smartphone.
• Analyser les parcours clients en mode mobile 
• Inclure des personas mobiles depuis une connexion via les données mobiles, sur des petits écrans, en marchant, en étant dans les transports…

6. Adapter les textes au web pour améliorer l’expérience utilisateur

Il existe des règles d’écriture propres à Internet, il est donc nécessaire d’adapter son texte au web. Il est important de noter que sur Internet, on scanne la page de haut en bas à la recherche d’informations déterminantes qui vont permettre une lecture linéaire et en profondeur de votre article. Voici quelques conseils pour bien adapter votre texte au web : 

• Travailler son accroche : elle doit être percutante, concise tout en résumant les éléments principaux de l’article.
•  Inclure les mots-clés : l’accroche doit contenir des mots-clés pour permettre à vos utilisateurs de retrouver votre article selon leur requête.
• Retranscrire les messages importants : il faut toujours aller à l’essentiel, votre rédaction web doit être bien structurée, afin d’être claire et lisible. 
• Réduire le document : il n’y a pas la place pour le contenu superflu. Sa longueur est limitée. Il est conseillé d’écrire des articles entre 2200 et 2500 mots.
• S’appliquer sur la mise en page : utilisation de liste à puces, photos, graphiques, citations et sous-titres. La mise en page est aussi importante que la qualité du contenu.
• Hiérarchiser les titres : les titres et les intertitres doivent résumer correctement votre contenu avec l’insertion des balises H1 à H6. 
• Ajouter des hyperliens : favorise la navigation sur votre texte ou l’accès à des sources d’informations supplémentaires comme d’autres articles de votre site.  
• Mettre le document sur une page : votre contenu doit tenir sur une seule page afin de ne pas perdre vos visiteurs. Il vaut mieux écrire plusieurs petits articles qu’un gros article.

Tous ces points sont essentiels pour rendre l’UX site web rapide, léger et efficace, ce qui aura aussi pour but de le rendre éco-conçu.

Vous discernez à présent le rôle majeur du parcours utilisateur UX sur votre site web ; à la fois pour améliorer l’expérience utilisateur et aider à diminuer son empreinte carbone. Il est important, dans cette optique, de dresser une cartographie des scénarios et schémas de parcours utilisateurs. Leur optimisation permettra, en outre, d’afficher de meilleures performances et résultats (trafic, taux de conversion, etc.) auprès de ses visiteurs ou clients, dans le cas des e-commerces. 

Vous souhaitez un accompagnement personnalisé, pour bénéficier d’un parcours utilisateur optimisé et efficace ? Contactez dès à présent notre agence web Ethiko.

Pour aller plus loin :

• Les 6 étapes pour créer un persona pertinent
• Les 13 étapes pour mettre en place un site éco-conçu
• Les 5 arguments pour réussir la refonte de site web