UX

Une maquette doit être créée en prenant en considération des critères ergonomiques, elle se doit d’être :

• Utile : chaque composant de l’interface doit être considéré comme utile

• Utilisable

• Navigable

• Accessible : autant d’un point de vue ergonomique, en prenant en considération les particularités de chacun (handicap y compris), que d’un point de vue pratico-pratique (information trouvable, barre de recherche visible…)

• Compréhensible : l’interface doit être facile à comprendre, mais également le produit ou le service vendu. Le visiteur doit comprendre le plus rapidement possible le site et ce qu’il vend.

• Efficacité : en lien avec la vitesse que mettent les utilisateurs à effectuer des tâches particulières

• Mémorabilité : plus une interface est bien conçue, logique et ergonomique, plus l’utilisateur se souviendra de sa structure et des fonctionnalités qu’elle propose

• Simple / pratique : facile à utiliser

• Crédible : l’utilisateur doit trouver l’information, le produit ou le service crédibles.

• Désirable : le produit ou le service donnent-ils envie d’être achetés, utilisés ?

L’importance de chaque point évoqué ci-dessus est à définir en fonction du projet concerné. La priorisation de ces différents aspects se fait en fonction des attentes du public cible. Les arguments mis en exergue peuvent également différer en fonction des différents segments de votre audience afin d’en améliorer le CRO.

Il faut garder en tête que les internautes ont très peu de temps à accorder à la lecture d’une information. La durée d’attention de plus en plus courte implique un travail d’optimisation des arguments et des informations présentent sur une page afin d’en garantir l’efficacité.

Travail axé autour de la compréhension des besoins des utilisateurs. Le visiteur doit ainsi trouver ce qu’il cherche rapidement. Il faut se concentrer sur l’usage qui va être fait du site ou de l’application.

Qu’est-ce que l’utilisateur cherche ?

Le but du produit ou du service est-il clair ?

• Quel est le niveau de connaissance du produit ou du service ?

• Qu’est-ce qu’il attend ?

• Qu’est-ce qui l’intéresse le plus ?

• Y a-t-il différents types d’utilisateurs ?

• Quel est le niveau de connaissance digital des utilisateurs ?

• Quels sont les freins à l’achat

Connaître le besoin de l’utilisateur implique d’avoir réalisé au préalable une étude approfondie dans laquelle les personas auront été étudiés, le produit ou le service analysé.

Dans le cas où la création d’un questionnaire à destination du public cible s’avère essentielle, il faudra veiller à ne pas orienter les réponses, ne pas poser de questions fermées oui/non et rester détaché et objectif lors de l’analyse des réponses.

À noter :

Le processus de recherche n’est pas linéaire, il faut continuer à se questionner tout au long du processus de création et ne pas hésiter à remettre en question des choix antérieurs même s’ils impliquent des heures de travail supplémentaires.

Le budget alloué à la phase de recherche peut s’avérer sous-estimé voir inexistant

Analyse parcours utilisateur

Analyse à l’aide d’outils internes ou externes différents éléments :

• Appareils utilisés (tablette, ordinateur, smartphone)

• Pages les plus visités

• D’où proviennent vos utilisateurs

• …

Interview

En fonction de la complexité du projet ou de l’état de connaissance de votre cible et de ses attentes, il peut être utile de réaliser un questionnaire afin de mieux comprendre votre cible.

Il faudra porter une attention particulière à la tournure et à l’ordre des questions posées afin de ne pas orienter les réponses.

Définition des problématiques auxquelles l’interface doit répondre.

Définition des personas et de leurs attentes.

…

• Sitemap : Le sitemap fait pleinement partie de la phase de travail UX

• Wireframe : Le wireframe est quant à lui à la jonction entre UX et UI. Nous retrouvons dans le wireframe l’ensemble des éléments présents sur les différentes pages web. Ce squelette, vierge de l'aspect visuel attrayant (pas de couleur, pas de visuels…), permet de réfléchir sur la bonne organisation des éléments et la mise en valeur des sections principales.

• Prototype : maquette interactive, très proche du produit final (d’un point de vue fonctionnel et esthétique). Ils servent à tester l’expérience utilisateur.

Les trois phases de maquettage seront plus ou moins poussées en fonction de la complexité du projet et du budget du client. En cas de très petit budget et de site vitrine très simple, il est possible de passer directement à la phase prototype voire même à l’intégration dans un cms.

Test auprès du public cible.

De nombreuses méthodes existent, elles dépendent du degré de complexité du projet et des process mis en place dans les entreprises.

L’optimisation de la vitesse de chargement contribue grandement à une bonne expérience utilisateur. Rien n’est plus désagréable sur le web qu’attendre qu’une page s’affiche. Nombreux sont les utilisateurs qui n'attendent pas qu’une page se charge.

Quelques éléments à optimiser :

• Poids des images (300 ko maximum pour les images les plus grandes)

• Limiter l'installation de plugins

• Limiter les images de grandes tailles

• Limiter les vidéos

• Simplification du CMS

• ...

• Ne jamais négliger l’importance des habitudes utilisateur en termes d’UI et UX

• Exemple :

  • Menu en haut

  • Logo cliquable

  • Menu burger

  • Bouton contact sur la droite

  • Rappel d’informations dans le footer

  • …

• Attention : porter attention aux habitudes web ne veut pas dire qu’il faut impérativement les respecter, tout dépend du sujet, de la cible et de l’expérience utilisateur souhaitée.

• Témoignages client

• Avis client

• Concours gagnés, certifications…

• Références (“ils nous font confiance”...)

Organiser, catégoriser, étiqueter et hiérarchiser

Une bonne structuration et une bonne hiérarchisation des contenus permettent à l'œil du visiteur de comprendre en quelques secondes le produit ou le service proposé et de trouver immédiatement l’information qu’il recherche. La lecture est fluide et la compréhension rapide. l’arborescence du site doit être travaillée et validée dès la création du site.

• Organisation des thèmes ou des types de contenus

• Structuration des menus

• Structuration du footer

Pour visualiser la structure que l’on souhaite donner à une interface, nous utilisons un système de représentation nommé Sitemap.

La page d’accueil est la page la plus importante d’un site, elle doit être travaillée dans le détail.

Voir chapitre ci-après.

Une fois la structuration effectuée, le travail vise à hiérarchiser les contenus pour créer différents degrés de visibilité. Il faut identifier les contenus les plus importants afin de les mettre en valeur. Cette hiérarchisation s’effectue à l’aide d’une bonne utilisation des :

• Couleurs (voir chapitre UI)

• Contrastes

• Tailles des éléments

• Emplacements

• …

L’objectif est d’offrir un parcours visuel à l'œil, l’information principale doit être regardée en 1er, la seconde à la suite, etc. Il faut veiller à ne pas mettre tous les éléments au même niveau d’importance.

Attention, mettre en valeur un élément ne veut pas forcément dire l’afficher en très gros, un petit texte sur fond rouge apposé sur une page en noir et blanc sera bien plus visible qu’un gros titre.

• Dans le cas où elle est utile, une barre de recherche visible qui donne des résultats efficaces améliore l’UX d’un site.

• Menu

• Header : titre, sous-titre, CTA, réassurance, visuel(s)

• Zones d’informations

• Zones de réassurances

• Formulaire

• CTA

• FAQ

• …

• Footer

L'élément de texte mis en avant en haut de la page d’accueil d’un site a plusieurs vocations, il doit informer le client sur la nature du produit ou service proposé (qu’est-ce que c’est ? Qu’est-ce que j'obtiens avec ce produit ou service ? Qu’est ce que je peux faire avec?).

Si l’information principale à donner (d’un point de vue commercial ou informatif) correspond aux éléments seo principaux identifiés, cet élément de texte sera alors le H1 du site.

Le placement du CTA est primordial, il doit être visible et clairement identifié.

• Sers à convertir le visiteur en éventuel prospect.

• Sers également à guider le visiteur sur le site internet.

• Dans le cas d’une utilisation de plusieurs CTA, on met en valeur le bouton le plus important.

• Le libellé du CTA doit être réalisé avec soin. La personnalisation du libellé offre de meilleurs résultats.

• La mise en valeur du CTA est importante, veiller à utiliser des couleurs qui tranchent avec le reste du site (tout en restant dans la charte)

Les objectifs d’un CTA peuvent être très variés :

• Acheter un article

• Prise de contact

• Prise de rendez-vous

• Achat

• Inscription à une newsletter

• Inscription

• Télécharger un livre blanc

• Grilles / marges au départ quitte à prendre des libertés plus tard

• + doc

• Utilisation de blanc tournant autant que possible

• Ne pas surcharger les pages d’animations

• Ne pas mettre trop d’informations sur une page

• Utiliser des listes à puces pour améliorer la lecture de vos contenus

• Porter une attention toute particulière à la rédaction de vos titres et à la structure des contenus de vos pages

• Utilisez les images pour illustrer vos contenus (une image vaut mille mots)

• Informer votre testé qu’il va être devant un écran pendant 5 secondes

• Afficher l’écran 5 secondes puis le remplacer par un écran noir

• Demander au testeur de répondre à ces 3 questions :

  • Impression laissée par la page et son esthétique

  • Lister et dessiner les éléments retenus

  • Indiquer les objectifs qui semblent visés par la page

Terme utilisé pour décrire la facilité d’un utilisateur à scanner une page web pour en comprendre les notions les plus importantes en un simple coup d’œil.

Un site est jugé bon de ce point de vue lorsque l’utilisateur parvient à cerner en quelques secondes si le site répond à leur besoin. Le public ciblé doit trouver ce qu’il recherche très rapidement.

• Retravailler titre et sous-titre

• Diviser les grands paragraphes en plus petits paragraphes et les associer à un titre ou un picto.

• Espacer les paragraphes

• Mettre les mots importants en gras ou en couleur

• utiliser des listes à puces