Les 6 points parcours utilisateur UX d’un site éco-conçu

Parcours utilisateur UX

1. Minimiser les interactions avec le serveur, trouver l’info 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 pour diminuer l’empreinte environnementale.

La méthode du Design Thinking 

Pour offrir une expérience utilisateur de qualité, 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é “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 : 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 : 

• Phases de divergence : ouvrir le champ des possibles et de 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 un 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 

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ée. Pour réaliser votre sitemap, une page correspond à une idée. Par exemple, si vous vendez des services, chaque page doit être dédié à un service etc…

Le sitemap est utile en SEO pour plusieurs raisons :

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 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 toutes vos pages stratégiques
• Faites un crawl complet de votre site et retenez les pages qui sont indexables
• Repérer quelles pages du sitemap sont absentes du crawl : ce sont les “orphelines des sitemaps”

Comprendre quelles pages Google accepte l’indexation :

C’est lorsque les robots de Google découvrent 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é “compatible” les robots indexent la page. Cela qui veut dire qu’elle apparaitra dans une liste de résultat. Certains sites web tels que des sites d’actualités sont susceptibles d’être plus crawlés 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éclarez tous ces sitemaps dans 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 parcours utilisateur UX plus simple. Cela réduit les dépenses énergétiques inutiles.

3. Supprimer les fonctionnalités non essentielles 

Construire un parcours utilisateur UX en allant à l’essentiel, en se concentrant uniquement sur ce qui transforme et intéresse les visiteurs. É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 lourd, comme WordPress, Joomla ou bien Drupal. Pour cela, avant de passer à l’étape de conception, il est crucial d’évaluer avec précisions les besoins afin d’éviter la multiplication de fonctionnalités inutiles. 

Mesurer avec Hotjar 

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 de voir :

Les zones les plus cliquées :

Par exemple, on remarque sur notre page contact que la zone la plus cliquée sont les coordonnées, 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.

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.

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 notre site :

Tester votre site avec Ecodesign.dev

Vous pouvez tester votre site web sur 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 reqêute 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 structure similaire à un arbre dans laquelle des objets, dont un objet principal dont dépendent les objets secondaires.

Voici quelques conseils pour améliorer votre score : 

• Optimisez les images en choisissant le bon format et réduisant la taille
• Évitez les vidéos et fonds vidéos
• Compresser 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 carroussels
• Limitez l’utilisation de widgets et plugins
• Utilisez des polices standards plutôt que des polices custom
• Préférez les pages statiques
• Supprimer les thèmes dont vous n’avez pas besoin

4. Minimiser les éléments non nécessaires pour améliorer le parcours utilisateur UX

Le DOM est une structure schématique qui correspond à la structure HTML de votre page qui elle est composée d’un certain nombre de balises. 

La taille du DOM affecte sur vos performances 

La taille du DOM a un impact 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 consomme 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’interaction 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 la taille des DOM 

Pour réduire la taille du DOM afin qu’il n’impacte pas négativement les performances de votre site web, vous devriez supprimer tous les éléments HTML qui vous sont inutiles ou pas nécessaires. Pour cela, nous pouvez utiliser le Plug In 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 verts, ce qui signifie que la taille du DOM est bien. Vous pouvez avoir du jaune, de l’orange et du rouge ce qui veut dire qu’il faut diminuer le nombre de d’éléments dans votre DOM. Pour cela, il faut analyser les différents éléments et réduire, supprimer ceux qui sont le moins utile.

5. Concevoir en mobile first si possible 

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. 

L’approche « mobile-first » dans le parcours utilisateur UX

Le « mobile-first » consiste à concevoir un service numérique pour une version mobile puis de l’adapter au format desktop. Cette approche permet de garantir le bon fonctionnement de notre service sur les appareils mobiles. Ils sont utilisés par plus de 55% des utilisateurs. Le but du « mobile-first » est 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 :

• Construire un site mobile en premier lieu qui peut part la suite être étendu sur le mode desktop.
• Investir dans des outils techniques spéciaux aux mobiles.
• Faire des tests d’ergonomie et d’AB testing directement sur mobiles.
• 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é afin d’être clair 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 le parcours utilisateur UX votre site rapide, léger et efficace, ce qui aura pour but de le rendre éco-conçu

Pour aller plus loin :

• Qu’est-ce que l’eco conception web ?
• Définition du cahier des charges pour un site internet éco-conçu
• Les 5 arguments pour réussir la refonte de site web