Photo d'un homme face à un ordinateur avec le texte "L'audit UX, critères ergonomique de Bastien et Scapin" - Lemon Interactive

8 critères ergonomiques essentiels pour un site web

Il ne suffit pas de produire du contenu de qualité et bien optimisé pour attirer du trafic et convertir. L’ergonomie du site est également primordiale pour assurer une navigation suffisamment agréable pour inciter l’internaute à rester sur le site, voire à passer à l’action. C’est sur ce postulat que les chercheurs Bastien & Scapin ont établi une liste de 8 critères ergonomiques essentiels pour l’ux d’un site web.

Mais qui sont Bastien et Scapin ?

Christian Bastien et Dominique Scapin sont deux chercheurs en ergonomie cognitive et psychologie ergonomique. Leurs différentes études leur ont permis de se rendre compte que l’expérience utilisateur était vraiment différente selon les interfaces, et ont cherché à énumérer tous les éléments qui pourraient améliorer l’UX d’un site.

Ils ont alors établi des critères ergonomiques objectifs pour évaluer l’utilisabilité d’une interface web ou mobile, avant, pendant et après la conception, pour faire en sorte qu’il y ait un standard sur toutes les interfaces, et qu’on puisse faire des audits objectifs.

Les 8 critères ergonomiques d’un site web selon Bastien et Scapin

Les chercheurs Bastien et Scapin ont mis en place une liste d’éléments à prendre en compte pour améliorer l’ergonomie d’une interface, qu’ils regroupent en 8 critères, chacun composé de plusieurs sous-critères.

Critère n° 1 : le guidage

Illustration vectorielle du critère ergonomique du guidage, avec 2 personnages entourés de dessins de pages web

Le guidage correspond à l’ensemble des moyens pour conseiller, informer et conduire l’utilisateur lors de ses interactions. Cela lui permet de toujours savoir où il se situe dans le site, mais aussi au niveau de son parcours utilisateur.

On retrouve dans le guidage de nombreux sous-critères, dont :

  • L’incitation : ce sous-critère vise à permettre aux internautes de passer à l’action sans entrave. Il faut alors faire attention à ce que les placeholders soient adéquats (que l’on retrouve bien le format Jour/Mois/Année pour un placeholder « date de naissance », par exemple), ou encore être vigilant à proposer une taille du champ adaptée à la demande d’information ;

  • Le groupement et la distinction entre items : cela correspond à l’organisation des items les uns par rapport aux autres, en fonction du format et de la topologie. Par exemple, deux éléments ayant un rapport entre eux doivent être placés à proximité l’un de l’autre, et plus éloignés des éléments sans rapport. La surbrillance en violet des liens déjà passés sont un autre exemple de distinction entre items ;

  • Le feed-back immédiat : ce sous-critère correspond, par exemple, au message de confirmation que l’on reçoit immédiatement après avoir passé une commande en ligne ;

  • La visibilité : on parle ici du ratio d’accessibilité avec les typographies, les couleurs, la taille des zones de texte, la justification des textes…

Critère n° 2 : la charge de travail

La charge de travail correspond à toutes les étapes par lesquelles doit passer un internaute pour avoir la réponse à sa question, ou pour atteindre la page recherchée. Celle-ci doit être la plus légère possible. Parmi les sous-critères de la charge de travail, on retient principalement la brièveté, qui permet de naviguer au plus vite sur une interface, en évitant un chargement lourd et chronophage. Parmi les éléments de brièveté à mettre en place, on peut retenir :

  • Le dévoilement progressif, qui permet d’alléger l’interface en ne dévoilant les blocs qu’au fur et à mesure que l’internaute scrolle, sans les précharger dès l’ouverture de la page ;

  • L’affichage du clavier adéquat, comme le clavier numérique pour rentrer un numéro de téléphone ;

  • La réduction de la taille des liens…

Critère n° 3 : le contrôle explicite

Le contrôle explicite consiste à faire en sorte que l’utilisateur ait le total contrôle sur l’interface, et que le système exécute uniquement les opérations demandées.

Cela peut se traduire par l’intégration d’un retour arrière, par le choix les labels en fonction de l’état d’avancement d’une action, par la demande de validation après chaque entrée de données…

Le sous-critère du contrôle utilisateur est ici essentiel, et permet, entre autres, d’autoriser les interruptions. Prenons l’exemple de Gmail. Quand on supprime un mail par inadvertance, on a quelques secondes pour revenir en arrière et interrompre l’action en cours. Cela fait partie du contrôle utilisateur.

Critère n° 4 : l’adaptabilité

Illustration vectorielle de deux personnages tenant des panneaux interactifs à mettre sur un canva vierge d'un site web

L’adaptabilité est la capacité d’une interface à s’adapter selon le contexte, les besoins et les préférences des utilisateurs. On compte alors plusieurs sous-critères :

  • La flexibilité : faire en sorte, par exemple, que les raccourcis claviers puissent être modifiés, de pouvoir remanier certaines actions selon les préférences, de désactiver certaines fonctionnalités, ou encore de permettre la personnalisation de l’interface comme le fil d’ariane (couleur, police…) ;

  • L’expérience utilisateur : cela concerne les moyens mis en œuvre pour respecter le niveau d’expérience de l’utilisateur. On peut alors proposer les fonctionnalités de base pour les novices, et ajouter des fonctionnalités plus pointues pour les experts.

Critère n° 5 : l’homogénéité, la cohérence

La cohérence globale de l’interface homme-machine a pour objectif de respecter une logique d’utilisation constante. Par exemple, on peut établir un color system. Ainsi, si vous avez 4 couleurs dans votre charte graphique, vous n’en utilisez qu’une, voire 2 maximum, pour les éléments cliquables, afin que l’utilisateur soit guidé et se repère facilement sur l’interface.

La cohérence passe aussi par l’attention portée au type system. Par exemple, les H1, H2 et autres éléments structurels d’un contenu doivent être dans des tailles bien définies, afin d’offrir une cohérence et que l’internaute se retrouve dans sa navigation grâce à des critères ergonomiques précis.

Critère n° 6 : la gestion des erreurs

Illustration vectorielle d'un personnage avec une croix en main, démontrant une erreur sur un site web

La gestion des erreurs consiste à faire en sorte qu’il y ait différents moyens pour protéger l’utilisateur des erreurs, et qu’il puisse les corriger. Cela peut prendre différentes formes :

  • Mettre le champ en rouge quand il y a une erreur (pseudo déjà utilisé…) ;

  • Préciser les éléments attendus dans la création d’un mot de passe (une majuscule, un chiffre…) ;

  • Afficher les éléments manquants ;

  • Informer d’un format inadéquat ou d’une syntaxe incorrecte…

Critère n° 7 : la signifiance des codes

On parle de code signifiant lorsqu’il y a une relation sémantique forte entre les codes et les items auxquels ils se réfèrent. Avoir un code signifiant est donc essentiel pour que le rappel et la reconnaissance soient meilleurs. Il faut alors faire attention à utiliser les bonnes conventions.

Par exemple : le rouge est synonyme de bonheur en Chine, mais en Europe, c’est plutôt le symbole de l’interdit. Il n’est donc pas judicieux de faire toute une interface en rouge.

Il faut être vigilant à ce que l’interface corresponde à la cible, ainsi qu’à leurs vices et coutumes.

Critère n° 8 : la compatibilité

Illustration vectorielle de pages web en responsive design, adaptées à chaque appareil

La compatibilité consiste à adapter l’interface aux caractéristiques de l’utilisateur. Si, par exemple, on s’adresse à des personnes qui bougent beaucoup, on pense avant tout au responsive. Si on s’adresse à des personnes âgées, on choisit une interface sobre, aérée, claire et parfaitement guidée.

Le langage de l’utilisateur est aussi à prendre en compte. Si on s’adresse à des personnes expertes dans le domaine, on peut utiliser des termes techniques, mais si on s’adresse à des novices, il faut adapter le contenu.

L’expérience utilisateur ne se résume pas à un contenu de qualité, et l’ergonomie du site est d’une importance majeure. Lemon Interactive vous accompagne dans la création de votre site, afin de répondre à tous les critères ergonomiques de Bastien et Scapin, et d’offrir une expérience utilisateur optimale à vos internautes.

Méthodes et outils pour mesurer l’UX d’un site

Nous sommes tous internautes, et nous savons tous à quel point il est agréable de naviguer sur un site ergonomique et instinctif. En toute logique, un créateur de site internet doit donc accorder une importance majeure à l’expérience utilisateur (UX) pour s’assurer de bons résultats, que ce soit en termes de visibilité, ou de conversion. Découvrons alors quels sont les méthodes et outils qu’utilise notre agence UX design à Lille pour mesurer l’expérience utilisateur d’un site.

Redéfinir l’UX pour mieux le comprendre

Avant d’entrer dans le vif du sujet, arrêtons-nous sur la définition de l’UX. L’expérience utilisateur, ou UX design, s’appuie sur les ressentis des internautes lorsqu’ils visitent un site internet ou n’importe quel support digital. Pour que l’UX soit optimale, il est alors impératif de répondre à leurs attentes et besoins, en proposant un parcours instinctif et agréable, parfaitement optimisé et ergonomique.

Travailler l’UX permet donc d’améliorer la fluidité de la navigation sur les différentes pages, en analysant le point de vue émotionnel de l’internaute.

Pourquoi faut-il mesurer l’UX d’un site ?

L’ergonomie et l’expérience vécue par l’utilisateur sont cruciales pour l’engagement et la fidélité. En effet, 88 % des internautes ne reviennent pas sur un site après une mauvaise expérience. Cela va même plus loin, puisque 68 % des utilisateurs déclarent quitter immédiatement un site, sans même lire le contenu, si l’expérience est désagréable.

Il faut donc, dès que possible, mesurer les performances UX d’un site, pour pouvoir intégrer et/ou améliorer les pratiques UX et ergonomiques.

Ces mesures mettent en évidence les différents KPI UX, ou indicateurs clé de performance, et permettent de mieux comprendre les utilisateurs, ainsi que les failles et points de friction du site internet. Corrélés avec des performances business, ces indicateurs sont un guide pour imaginer des interfaces plus ergonomiques, que l’on va tester et retester directement auprès des internautes, jusqu’à trouver la stratégie digitale qui fonctionne, et qui permet d’offrir une expérience utilisateur optimale.

Les outils de mesure de l’UX

Différents outils permettent d’analyser le comportement des internautes. Ceux-ci dépendent essentiellement du type d’informations que l’on souhaite recueillir.

Les informations quantitatives

Les informations quantitatives sont toutes les données en masse que l’on peut récupérer, et qui offrent des indications globales sur l’expérience utilisateur. On retrouve ici deux outils très performants pour recueillir des données quantitatives sur l’UX d’un site :

  • Le NPS (Net Promotor Score) mesure la satisfaction client en proposant un score de 0 à 10 pour évaluer l’UX des sites. Cela peut prendre la forme d’un questionnaire, d’une enquête, ou encore d’un sondage, qu’on envoie à un maximum d’utilisateurs, en ciblant plus ou moins les envois.
  • Google Analytics recense de nombreuses statistiques : taux de conversion, taux de rebond, temps passé sur une page, taux d’échec ou d’erreur sur un formulaire, taux d’abandon…

Les données qualitatives

Les informations qualitatives représentent une source de données bien plus précise, qui permet de cibler très minutieusement les personnes interrogées, mais aussi les éléments à évaluer. Plusieurs outils de mesure de l’UX permettent de recueillir des données qualitatives :

  • Les Cartes de chaleur ou Heat Map analysent le comportement des internautes sur un site en créant des zones de chaleur où apparaissent les zones de clic et les zones de scroll, par exemple. Cela permet de se rendre compte de la fluidité du site, quel bouton n’est pas utilisé, et si l’utilisateur comprend bien la logique de la page en cliquant au bon endroit;
Exemple de Heat Map pour l’accueil de Wikipédia
  • Les sessions utilisateur (avec enregistrement vidéo) permet d’avoir une visualisation précise de la manière dont l’utilisateur se comporte dans une session, et comment il navigue entre les pages du site. C’est un test utilisateur où on va demander l’avis de l’internaute, en lui imposant un parcours de test précis.

Quantitatif et qualitatif : des données indissociables

Il est incontournable de mixer le quantitatif et le qualitatif pour avoir une idée précise de ce qui fonctionne, et ce qui ne fonctionne pas.

Par exemple, si les données quantitatives montrent un taux d’abandon élevé à l’étape « choix du mode de livraison », on peut penser à un problème technique. Si, après vérification, on se rend compte que le problème n’est pas technique, l’étude qualitative va pouvoir montrer, avec la carte de chaleur, où les gens cliquent, pourquoi ils abandonnent. Cela peut être, par exemple, une difficulté dans le choix du point relais.

« Ainsi, le quantitatif pointe le doigt sur un problème, et le qualitatif amène une réponse potentielle plus précise. »

Certains outils de mesure font à la fois le quantitatif et le qualitatif, comme les grilles d’évaluation de site internet, ou les questionnaires SUS (System Usability Scale) qui offrent le point de vue subjectif d’un utilisateur sur le site internet.

Les critères de mesure de l’UX

Face à la quantité astronomique de données mesurables, il est important de savoir cibler les critères de mesure utiles pour améliorer l’UX d’un site. Certaines données sont donc indispensables pour comprendre les comportements utilisateurs :

  • L’utilisabilité du site : taux de réussite, facilité à comprendre l’architecture du site, temps dédié à une tâche, repères visuels facilement repérables… ;

  • L’engagement : temps total passé sur le site, nombre d’interactions, partage sur les réseaux sociaux, satisfaction… ;

  • La conversion : taux de confiance, taux de conversion, recommandation, probabilité d’action…

Tous ces critères peuvent s’évaluer à partir de données recueillies directement auprès des utilisateurs.

Que faire des informations recueillies ?

L’objectif du recueil de données est de pouvoir les analyser, et les transformer en chiffres. Ceux-ci sont d’une grande aide pour déterminer les pistes d’amélioration du site qui offriront une meilleure expérience client et une navigation plus intuitive.

À chaque optimisation, il est important de procéder à un nouveau test utilisateur, afin de comparer les nouvelles données aux précédentes, et ainsi noter l’effectivité de la stratégie adoptée, et les points qui sont encore à améliorer.

L’UX d’un site fait partie des stratégies de référencement naturel qu’il est essentiel de prendre en compte pour améliorer la visibilité et le trafic d’un site. Lemon Interactive maîtrise les outils de mesure de l’UX et vous propose une stratégie UX design qui boostera votre activité en ligne et augmentera la fidélisation client.

Le prototype interactif : l’étape obligatoire de toute interface UX

Lors de la création d’un site ou d’une application, l’expérience utilisateur (UX) doit être au cœur de la stratégie, afin d’inciter l’internaute à parcourir les différentes pages et de le convertir en client. L’élaboration d’un prototype interactif est alors une étape indispensable pour visualiser au mieux le projet et anticiper les interactions des visiteurs.

Qu’est-ce qu’un prototype interactif ?

Étape indispensable à l’UX designer, le prototype prend la forme d’une maquette interactive cliquable, dans laquelle il est possible de cliquer sur différentes parties, comme le header ou sur un CTA (Appel à l’Action). Bien plus qu’une simple mise en page d’images et de blocs de texte, la maquette interactive offre un aperçu très concret de la navigation d’un site ou d’une application, au travers de liens cliquables.

Il est alors possible de réaliser des prototypes interactifs plus ou moins perfectionnés, allant du simple croquis, à un mockup très élaboré.

Un prototype interactif en 5 étapes

Exemple de zoning

Selon les besoins et les exigences du client, il est possible d’élaborer plusieurs types de prototypes, plus ou moins personnalisés :

  • Le zoning : version la plus schématique d’une interface, le zoning organise une page à l’aide de différents blocs de contenu, pour une visualisation très basique;
  • Le wireframe : faisant suite au zoning, le wireframe consiste à remplacer les blocs par les vrais contenus, afin d’avoir une idée précise de la structuration et de la logique des pages;
  • Le mockup : cette étape suivante consiste à transformer le wireframe en page HTML, afin d’obtenir une interface dynamique, permettant de naviguer entre les pages, et de cliquer sur les différents liens;
  • La maquette : version colorée du mockup, la maquette permet d’avoir une visualisation aussi bien sur le contenu (le fond) que sur le design (la forme);
  • Le prototype : avec un objectif surtout fonctionnel, le prototype interactif permet de tester toutes les fonctionnalités des sites ou applications. C’est la version la plus aboutie du site, avant concrétisation du projet.

Les objectifs d’avoir une interface concrète

Le prototype interactif, qu’on appelle aussi maquette interactive, ou maquette cliquable, a pour objectif de faciliter la visualisation d’un futur site internet, d’une application, ou même d’un logiciel. En proposant une maquette sans ligne de code et avec un design travaillé, l’expérience utilisateur peut ainsi être pleinement évaluée par des testeurs en interne ou en externe, pour déterminer si la stratégie UX fonctionne ou non.

Le but est alors de proposer une expérience immersive au plus près du résultat final, afin de cibler les modifications à apporter et répondre au mieux aux attentes du client et c’est la toute la spécificité du métier d’UX designer.

Les enjeux d’un prototype qualitatif

Si l’étape de création d’un prototype peut sembler être une perte de temps, elle est au contraire indispensable pour faciliter la tâche des professionnels et du client, et s’assurer de la réussite du projet. En effet, les enjeux des prototypes interactifs concernent plusieurs parties :

  • Le client, qui peut vivre une immersion complète et avoir une idée très précise du rendu final de son projet avant la validation et la mise en production. En effet, une image ou une expérience sont bien souvent plus claires que des explications orales ou écrites.
  • Le développeur, qui peut rapidement évaluer l’esthétique de l’interface, mais aussi la qualité de navigation. Par ailleurs, une fois le projet validé et les choix techniques et fonctionnels fixés, le prototype l’aidera à mieux comprendre les attentes du client, et donc de gagner du temps dans le développement technique.

Les outils pour créer une maquette interactive

La création d’un prototype interactif peut se faire à partir de plusieurs outils ou plateformes en ligne. Le choix doit alors se faire selon l’ampleur du projet, les fonctionnalités attendues, mais aussi le budget.

Parmi les outils de prototypage, on peut alors se tourner vers des éditeurs offrant une prise en main plutôt simple, et avec de nombreuses fonctionnalités optionnelles, comme c’est le cas de Figma. Mais les professionnels experts en animation de maquette peuvent aussi faire le choix d’un outil plus puissant, comme le logiciel Procreate. Cette version, très semblable à After Effects, offre alors de meilleures performances, mais la prise en main est beaucoup plus technique.

Parmi les différentes fonctionnalités que l’on peut attendre d’un outil de prototypage, l’animation de la page est particulièrement intéressante pour créer un menu déroulant, pour insérer des éléments fixes ou mobiles sur une page, ou encore pour personnaliser le survol d’un bouton.

Pour résumer, la maquette interactive est un prototype très poussé, où on va pouvoir rendre l’utilisation du site beaucoup plus immersive. Essentiel à la stratégie UX d’un site, le prototype interactif est donc une étape primordiale, surtout pour les projets à gros budgets. Lemon Interactive peut vous accompagner dans ce projet, en proposant une maquette interactive de votre futur site.

L’importance d’un builder dans la création d’un site web

Le builder, “page builder” de son nom entier, a révolutionné la création de sites web. Il est aujourd’hui accessible à tout le monde, même aux plus novices. Avec sa simplicité d’utilisation et ses nombreux avantages, le builder occupe une place importante en matiere UX dans le quotidien des professionnels du web et des particuliers. On vous explique ici en quoi il consiste.

Le builder : un constructeur de page “prêt à l’emploi”

Un builder est avant tout une interface intégrée qui facilite l’élaboration d’un site web. C’est un outil d’aide à la création de pages, orienté User Interface (Interface Utilisateur ou UI). L’idée est de proposer une mise en page agréable et bien agencée.

Généralement, les builders offrent un design épuré et facile à travailler. Ils comportent des sections qu’il est possible d’assembler les unes aux autres et de diviser en colonnes. On peut ensuite y ajouter différents modules (zone de texte, image, article de blog, etc.). Chaque élément peut utiliser le glisser/déposer d’un endroit à un autre : le “Drag&Drop” entre en scène ! Son côté intuitif et sa simplicité d’utilisation séduisent de nombreux utilisateurs.

En somme, un builder est un modèle prêt à l’emploi. On peut le comparer aux différents types de CV que l’on retrouve sur Word. Il est ergonomique et personnalisable à souhait. Il est donc possible de le modifier, de le façonner à son image, en accord avec l’ADN que l’on souhaite véhiculer. Quel que soit le thème choisi, il existe plusieurs modèles de mise en page.

Elementor, l’atout majeur de WordPress

Pourquoi ne pas créer une mise en page, rapidement et facilement, à l’aide d’une interface intuitive ? C’est justement ce que propose Elementor. Ce builder, intégré au CMS WordPress, permet de créer des mises en page personnalisées sans aucune compétence en codage. La version gratuite, qui n’a pas beaucoup à envier à la version payante, offre de nombreuses fonctionnalités (comme l’intégration d’une vidéo en jouant sur la taille de l’aperçu, l’ajout d’une fonctionnalité grâce au shortcode, l’apport de visuels, de carrousels ou encore de liens).

Plugin phare de WordPress, Elementor a pour but d’être accessible à tous. Grâce à cet outil clés en main, il n’est pas nécessaire d’être un développeur/intégrateur pour créer un site web. Lorsqu’on ne passe pas par un builder, on a alors du texte brut (langage HTML), sans mise en page (c’est le cas pour les éditeurs de base comme Gutenberg et TinyMCE). Sur Elementor, il existe des fonctionnalités HTML qu’il est possible de personnaliser, grâce à l’ajout de CSS pour obtenir le design souhaité. Cela nécessite quelques manipulations dans le code.

« Lorsqu’on ne passe pas par un builder, on a alors du texte brut, sans mise en page »

D’ailleurs, il arrive que l’ajout simultané de 2 builders sur WordPress provoque des conflits. Lorsqu’il existe des similitudes entre les deux modèles, des incohérences et des bugs peuvent survenir. Ce cumul de builders entraîne généralement une perte de performance due à leur poids.

Aujourd’hui, rares sont les sites qui n’utilisent pas de builder. Les options et les fonctionnalités évoluent sans cesse et proposent de nouvelles façons de personnaliser leur mise en page. Complet et intuitif, le builder est un outil qui facilite la vie et dont on n’a plus envie de se passer.

4 bonnes raisons d’utiliser un builder

1.     Un outil qui facilite

Pour le développeur, le builder va faciliter la création des pages internet d’un site et leurs intégrations. Il permet d’obtenir des pages au design épuré et simplifié. Sans cet outil, créer une page classique sur WordPress aura un rendu très simple avec du texte mais sans mise en page particulière. Cela manquera de structure et nécessitera l’intervention d’un intégrateur pour créer cette mise en page. Facilitant la création de pages web, cet outil permet inévitablement de gagner du temps.

2.     Un gain de temps considérable    

Sans avoir à saisir du codage à la main, l’utilisation d’un builder permet un gain de temps conséquent. Déjà intégré au site web, cet outil permet au développeur de travailler directement sur cette base de construction. Ainsi, la mise en page est réalisée plus rapidement facilitant grandement le travail des développeurs. Malgré la diversité et les performances des options que propose cet outil, il est nécessaire de compléter l’intégration avec un développement spécifique, ceci pouvant être réalisé par une agence de développement web.

3.     Un site totalement personnalisable

Autre avantage que présente cet outil : un nombre de fonctionnalités conséquent. L’utilisation d’un builder permet de construire des pages web en prenant des éléments et en les modélisant à souhait. De nombreuses options existent permettant la création de pages selon vos envies. Cela offre une multitude de possibilités de mises en page pour un même site internet. Il est possible d’utiliser un autre builder en complément qui offrira d’autres options complémentaires. Néanmoins, cela peut créer des bugs et des confusions. Il est préférable de compléter l’outil manuellement.

4.     L’importance du builder pour l’UI

Si votre site web présente une interface agréable, lisible, claire et attrayante, cela va sans dire que les internautes y passeront plus de temps. Cet outil permet d’améliorer l’interface utilisateur grâce aux diverses fonctionnalités qu’il propose dans la mise en page d’un site. Il détient donc un rôle primordial dans la finalité de la présentation d’une page web.

Le builder, c’est finalement cet outil a tout faire. Celui qui aide à la fois dans la création en back-office, en facilitant la réalisation et en l’optimisant, ainsi qu’en front, en donnant un site plus beau, plus clair et créé comme il l’a été imaginé au préalable. Le builder est un constructeur et, indéniablement, le plus efficace et sympathique connu.

La Charte Graphique : l’identité d’une Interface Utilisateur (UI)

Que vous soyez une petite entreprise ou un grand groupe, il est obligatoire de définir votre charte graphique. Elle est indispensable à chaque organisation et permet à chacune de se différencier et d’être reconnaissable. La charte graphique, c’est un peu comme un style vestimentaire :  on doit pouvoir le définir et le reconnaître en un clin d’œil. Une entreprise affirme son identité visuelle grâce à sa charte graphique. Développons ensemble cet outil essentiel de l’UI designer.

Qu’est-ce qu’une charte graphique ?

Définissons dans un premier temps ce qu’est une charte graphique. Elle peut être définie comme étant l’identité visuelle d’une marque. Elle caractérise sa personnalité tout en étant cohérente avec le public qu’elle vise. Pour se faire, le choix des éléments qui la compose doit se faire par étape :

  • Définir sa personnalité : quelle image l’entreprise souhaite-t-elle refléter, quel style désire-t-elle adopter ? Plutôt classique ou tendance, traditionnel ou excentrique… Quels sont les adjectifs qui la définissent ?
  • Déterminer son public-cible : connaître sa cible est essentiel. Qui est-elle ? Quels sont ses besoins et ses attentes ?
  • Se fixer des objectifs : Qu’est-ce que l’entreprise souhaite transmettre à travers sa marque ? Quel message renvoie-t-elle ? Quelle est sa promesse ?

Une fois ces éléments déterminés, la réalisation de la charte graphique se fait naturellement. Il est bien entendu nécessaire de connaître les « codes » graphiques propre à chaque domaine. Une entreprise de BTP n’utilisera pas les mêmes graphismes ni les mêmes couleurs qu’une startup high-tech.

« Il est nécessaire de connaître les « codes » graphiques propres à chaque domaine »

Que contient une charte graphique ?

Divers éléments composent la charte graphique. Tous réunis, ils constituent l’identité visuelle finale de la marque :

Le logo et son utilisation

Emblème de la marque, il doit être décrit explicitement. Définir son logo, comment et où l’insérer sur les différents supports de communication sont des éléments à indiquer en priorité.

La palette de couleurs, pour être reconnu immédiatement

Les couleurs sont ce que l’on voit en priorité sur un site web. Chaque couleur, qu’elle fasse partie des principales ou secondaires, doit être définie. Généralement, la palette de couleurs se compose de 4 coloris. Pour chaque partie du contenu, des couleurs doivent être suggérées : des titres aux paragraphes en passant par les petits éléments comme les liens ou les CTA. La hiérarchie entre les couleurs doit être respectée : en fonction du code couleur, le designer UI pourra mettre en avant les informations importantes en utilisant une police foncée qu’il contrastera avec les textes des paragraphes plus clairs.

La typographie

Le choix de la typographie et de la police est essentiel dans la stratégie marketing. Tout comme les couleurs, jouer sur les contrastes de police de caractère est à travailler en fonction du style désiré. 

Les visuels

Ils comprennent autant des illustrations que des contenus vidéos. La charte graphique indique quel style est souhaité : photos, illustrations, vidéos…

Le ton employé, adapté à son public

Le ton à employer doit être annoncé. Il dépendra autant de l’entreprise que de sa cible.

Chacun de ces éléments composant la charte graphique doit être défini avec précision, afin que le professionnel en charge ait tous les éléments nécessaires pour sa mise en pratique.

Quels sont les objectifs d’une charte graphique ?

Les objectifs sont multiples. La charte graphique représente l’identité visuelle d’une marque. Elle doit toujours être utilisée de la même manière, le but étant de rester cohérent. Cette cohérence permet aux utilisateurs de reconnaître une marque en un coup d’œil. La charte graphique doit être à l’image de la marque et respecter les codes que son domaine lui suggère.

Par ailleurs, le rôle des couleurs dans une charte est lui aussi à prendre en compte. Chaque couleur a une signification et chacun des domaines possède plus ou moins sa propre couleur. Les contrastes de couleurs permettent à l’utilisateur de reconnaître les informations importantes en priorité. Cela facilite la navigation, permet une meilleure lisibilité et favorise une bonne compréhension.

Toujours dans un souci de cohérence, le choix des couleurs peut également se faire en fonction des tendances. C’est le cas par exemple de l’enseigne d’un fast-food éminemment célèbre, passée du rouge au vert. Le vert représentant l’aspect bio, plus tendance que la couleur rouge se retrouvant d’autant plus présente chez les concurrents.

La conception d’une charte graphique se fait à partir de l’identité de votre entreprise. Ce qu’elle représente, ce qu’elle souhaite transmettre et à qui. Il y a des codes à respecter, cependant, libre à chacun de décider de suivre la tendance ou de prendre l’initiative de se démarquer en utilisant une identité visuelle atypique. Et vous, qu’allez-vous tenter ? Confiez votre charte graphique à l’un de nos professionnels UX et bénéficiez de notre expertise pour sa mise en pratique !

Le storyboard UX : optimiser l’expérience en dessinant l’utilisateur

Les manières d’inventer un design, de concevoir une expérience, sont multiples et diffèrent beaucoup selon les manières de travailler de l’UX designer. Dans notre agence UX, nous priorisons la diversification des méthodes pour arriver au meilleur résultat. Ciblage par persona, observations par focus group, mais aussi compréhension des utilisateurs par storyboard. Comment utiliser cet outil du cinéma dans un contexte UX ?

Comprendre les différentes expériences possibles avec un produit

Comme dans tout art visuel, avant de se lancer directement dans la création UX, il y a un travail de “mise en scène”. Il s’agit d’imaginer ce qu’on va faire avant de se lancer à corps perdu dans la conception pure. Le storyboard sert normalement à créer cela : à travers des cases numérotées, on dessine et écrit ce qu’on veut réaliser avant de le faire.

Cependant en UX, l’usage est un peu différent. Il n’est pas question de penser à ce que l’expert UX va réaliser, mais plutôt les possibilités d’interactions entre l’utilisateur et le produit ou système. Le principe est de raconter l’histoire d’un utilisateur comme un personnage : comment tomberait-il sur tel site ? Pourquoi cliquerait-il sur tel produit ? Quel usage aurait-il de tel service ? Le storyboard synthétise en dessins les besoins de l’utilisateur et quelle serait la solution à son problème.

Concevoir son storyboard par étape

Image d'un crayon posé sur un papier

Pour faire un storyboard UX, il est important de le penser exactement comme on présenterait une histoire classique. Il y a d’abord une situation de départ, par exemple : “un utilisateur cherche un produit nettoyant pour sa moto”. Puis une situation de résolution comme : “l’utilisateur achète son nettoyant sur Scooteo”. Entre les deux, il faut comprendre quelle solution apporte ce qu’on promeut et quelle a été l’expérience donnée à l’utilisateur pour qu’il finisse par adhérer, utiliser ou acheter le produit ou service.

De même, il faut aussi éviter de se lancer dans l’illustration de l’intégralité d’une bande dessinée. On privilégiera du storyboarding court, 6 cases idéalement, et surtout la réalisation de plusieurs d’entre eux, avec divers cas d’utilisateurs. Il est nécessaire de montrer diverses expériences utilisateur, avec éventuellement plusieurs cibles selon le produit.

Avoir une idée de l’utilisation, pas du design

Il ne faut pas dévier de l’intérêt principal du storyboard en UX : représenter des scénarios d’usage sous forme de courts récits illustrés. Il n’est donc absolument pas question de montrer des éléments de design (images, applications, vidéo…), de faire un wireframe et encore moins une maquette. Le storyboard est un outil qui raconte une expérience utilisateur, il n’a pas de valeur visuelle.

De plus, le point à souligner est qu’on parle bel et bien de dessin en storyboard. Il faut sortir son papier et son crayon et ne pas hésiter à y aller ! Mal dessiner n’est pas un défaut dans un contexte où le design ne compte pas. Seule la bonne explication de l’expérience compte, peu importe le temps que cela peut prendre.

Il faut sortir son papier et son crayon et ne pas hésiter à y aller !

Partager en équipe toutes les séquences du projet UX

Image d'un meeting de personnes autour d'un storyboard

Le storyboard rentre aussi dans une logique inspirée du Design Sprint : il peut être, voire doit être, travaillé et présenté en commun. L’intérêt étant que chaque acteur du projet puisse avoir conscience de comment est utilisé le produit ou service, quel est son objectif avec lui, ses motivations et interactions. En résumé, quel est le ou les problème(s) qu’il peut rencontrer pour arriver à ses fins.

La création de storyboards correctement travaillés est un outil parfait d’UX research : il donne à l’équipe les clés pour comprendre la cible, l’utilisateur. Étant en plus de cela visuel, il peut rappeler au fil du projet quel est le ou les problème(s) sans avoir à les lire. Ils sont directement sous les yeux, et en dessins, de celui qui regarde.

Pour entièrement assimiler l’importance de l’utilisateur dans un processus UX, le storyboard est l’exemple idéal. En mettant en scène les utilisateurs avec des dessins, on prend pour objectif de mieux comprendre leur expérience. En faisant plusieurs storyboards, courts et clairs, on aide à la compréhension du projet. A la fois pour toute l’équipe impliquée à l’agence et pour le client. Dessiner c’est raconter et surtout, un moyen efficace de traduire l’expérience de chacun d’entre nous avec un produit.

Importance de l'UX et de ses wireframes

L’importance de l’UX pour un site web ambitieux

Revenir aux essentiels. Chez Lemon, on vous propose de l’UX, ou Expérience Utilisateur, depuis nos débuts. Il serait temps pour nous de faire une petite mise à jour, en revenant aux questions élémentaires. Pourquoi devriez-vous faire de l’UX sur votre site ? Qu’est-ce qui le rend complémentaire avec l’UI ? En quoi la réussite d’un site peut être liée à l’optimisation de l’expérience utilisateur ? Que faisons-nous pour vous chez Lemon ?

Comprendre l’UX pour mieux l’accepter

Il est impératif de penser l’UX comme le travail de la compréhension de l’utilisateur, avant d’être celui d’un expert qui se vanterait de tout savoir sur le domaine. En réalité, le professionnel travaillant en UX fait avant tout preuve d’une forme d’analyse, de recherches sur l’utilisateur. En recueillant, sous diverses formes, les informations des utilisateurs, cela donne une idée des besoins et de la manière dont ils utilisent un site. Lui permettant ensuite d’imaginer comment améliorer son utilisation.

Ce premier travail s’effectue dès le début d’une relation client : via un audit ergonomique, pour les sites existant, puis l’approfondissement de ce travail par de la recherche utilisateur. On détermine ce dont il a besoin, ce qui l’irrite, ce qu’il veut voir…

Le tout grâce à des interviews, du shadowing ou observation/immersion discrète auprès des utilisateurs d’un site, des focus group et d’autres techniques de recherches.

Imaginer et inventer sans penser design

Nécessairement, le travail de l’UX passe par une forme de créativité. Cependant, celle-ci ne doit pas, comme vu précédemment, être en premier lieu celle d’un esprit cherchant à faire du beau. Évidemment le sujet finit par arriver, mais il passe après des critères touchant de plus près l’expérience d’un site. L’ergonomie, la taille et la quantité de “call to action”, l’adaptabilité sur tous les écrans…

Avant toute modification visuelle, on pense donc l’expérience en faisant des storyboards, des expériences maps, des wireframes… Dans cette idée de modification du site, non pas pour le plaisir des yeux mais celui du cerveau. En dernier viendra le temps du maquettage graphique où le professionnel pourra, s’il en voit le besoin pour le site, faire des propositions de design reliées à une nécessité UX.

En UX, on modifie un site : « non pas pour le plaisir des yeux mais celui du cerveau »

Ne jamais s’arrêter de faire mieux

Dans l’intérêt de l’UX d’un site, il important d’évoquer qu’on ne peut pas avoir toutes les solutions du premier coup. C’est tout l’objectif de tester les changements avancés, suivre leurs performances à long terme, et améliorer l’expérience proposée si elle ne convient pas.

Grâce à des tests utilisateurs, des questionnaires, voire à la mise en place d’A/B testing (Test de deux versions d’une même interface auprès d’utilisateurs pour déterminer la plus efficace), on cherche finalement à savoir si les modifications faites sont bel et bien performantes, est-ce qu’elles vont pleinement dans le sens d’une amélioration de l’expérience utilisateur.

De l’importance de l’UX dans le succès d’un site

Il reste à comprendre pourquoi faire de l’UX sur un site est vraiment nécessaire. Qu’est-ce que cela change ? Avoir la bonne information et un beau site n’est-il pas suffisant ? Justement, le travail de l’UX c’est de fluidifier ces deux aspects. Trouver aisément l’information voulue grâce à un travail sur les besoins de l’utilisateur et sur l’ergonomie du site. On a ici comme exemple la règle des trois clics : tout doit être accessible en moins de trois clics maximum. Dépasser cela, personne ne se donne le temps de rester.

D’autant que l’UX sert aussi à adapter son site aux différents formats aujourd’hui disponibles. Et c’est plus que nécessaire : 1 français sur 2 effectue des achats e-commerce sur mobile. Il ne faut plus négliger l’importance de l’expérience d’un site sur mobile ou tablette, l’ordinateur ne suffit plus.

Avoir une UX de qualité, c’est aussi et surtout booster son ROI (= Retour sur investissement) : inévitablement, c’est un travail qui se joue sur le parcours utilisateur. L’objectif va être d’être le plus clair possible, pour que le visiteur puisse acheter sans être stoppé par des interfaces inadaptées. Google prend d’ailleurs cela en compte dans son évaluation des sites !

Parce que l’ami de l’UX, c’est également le SEO (= référencement naturel) : en améliorant l’expérience de l’utilisateur sur un site, ils restent plus longtemps dessus et visitent plus longuement. Leur curiosité satisfait l’algorithme de Google, qui le classe alors comme site de qualité et le place en meilleure position dans les recherches.

Chez Lemon, nous avons compris l’importance particulière qu’il fallait accorder à l’UX dans nos réalisations. Nous avons assimilé, au fil des années, que l’expérience utilisateur prenait une place prépondérante dans la navigation sur le web. Son utilisation e-commerce elle aussi, ne cessait de croître. A travers les multiples possibilités d’invention et de révolution de l’expérience, Lemon travaille au quotidien pour apporter à chaque client et chaque réalisation, le renouveau espéré.

Image d'illustration de l'article sur l'audit UX montrant 2 personnes discutant devant des ordinateurs

L’audit UX : S’analyser pour améliorer son interface

Dans toutes les stratégies d’entreprises, il y a un passage obligé. Il peut intimider tant il s’est répandu dans de nombreux domaines aujourd’hui : l’audit. L’expérience utilisateur ou UX n’échappe pas à la règle. Lorsqu’on souhaite revoir son site pour optimiser son utilisation, il faut avant tout comprendre ce qui va ou non dessus. L’audit se fait justement dans cet objectif !

L’audit, lorsqu’il est UX… Ça change quoi ?

Le but de l’audit UX est avant tout d’analyser votre existant sur le web. Dans la majorité des cas, cet existant concernera des sites web (CMS ou non).

Ceux-ci doivent, et c’est un point essentiel aujourd’hui, être “responsive design”. C’est-à-dire déclinable automatiquement sur les supports digitaux d’aujourd’hui : mobile, tablette et toutes les autres tailles d’écran possible.

L’analyse réalisée doit concerner tous les aspects nécessaires à l’optimisation de l’expérience utilisateur. Expérience ergonomique, graphismes, parcours client, contenu éditorial, service marketing… Rien ne doit être laissé au hasard, tous les aspects d’un site ont une influence sur le visiteur et sa manière de l’utiliser.

A ce titre, auditer vous donnera les clés de ce qui pourrait être amélioré. Que cela soit en termes de navigation, de cohérence globale ou de guidage sur le site.

Réaliser un audit peut permettre non seulement de mettre la lumière sur les améliorations éventuelles d’une interface, mais surtout de baisser les taux d’abandon et de rebond une fois le dispositif en application. Ceux-ci amenant à une perte sèche, alors qu’ils peuvent être en partie résolus grâce à un audit UX complet.

Les différents niveaux de l’audit UX

Premier niveau : l’état des lieux

Pour réaliser nos prestations d’audit chez Lemon Interactive, nous avons mis en place un système d’échelles en 3 formules, représentatives des investissements techniques possibles dans un audit UX :

  1. Il s’agit de faire une analyse de surface du site internet autour de cinq grandes thématiques qui sont :
  • La Performance : la rapidité du site
  • Le « Responsive » : l’adaptation de l’interface à tous les écrans
  • L’Accessibilité : la technique, les contrastes, les typographies du site
  • L’Ergonomie : le menu, l’expérience globale du site
  • Catégorie spécifique : selon le secteur du site (vitrine, e-commerce, retails, blog)

A cette étape, notre équipe à l’agence attribue un UX Score de l’état global du site internet. Ils réalisent une analyse rapide qui permet de sortir une courte synthèse et quelques recommandations. Il est cependant possible de faire un audit plus détaillé, pour un produit encore plus avancé.


Deuxième niveau : l’analyse experte

Pour avoir une bonne évaluation d’une interface, il faut se baser sur des critères heuristiques ou ergonomiques. Dans ce domaine, il y a les noms de deux chercheurs en psychologie ergonomique qui sont au fondement de cet aspect essentiel de l’UX : Bastien & Scapin

En 1993 parurent leurs critères ergonomiques, ils se gardent comme référence encore aujourd’hui et continuent de servir de pilier dans l’audit des sites internet.

2. On commence toujours par attribuer un UX score et un rapide tour d’horizon de l’interface. Puis, nous réalisons une analyse basée sur les critères heuristiques de Bastien & Scapin pour vraiment entrer dans le cœur de l’analyse ergonomique UX. Ces critères sont les suivants :

  • Guidage : Regroupe tout ce qui aide à orienter l’utilisateur sur l’interface du site lors de ses interactions
  • Charge de travail : Correspondant à l’ensemble des éléments de l’interface qui permettent d’augmenter l’efficacité des dialogues sur le site
  • Contrôle explicite : Cela concerne la prise en compte des actions de l’expérience utilisateur sur le site
  • Adaptabilité : Exprime la nécessité d’adapter automatiquement le site aux préférences et aux contextes d’utilisation des utilisateurs
  • Gestion des erreurs : Englobe les moyens de corriger, d’éviter ou de réduire les erreurs
  • Homogénéité et cohérence : Regroupe la cohérence globale des éléments du site, l’adéquation entre l’information et le visuel
  • Signifiance des codes et dénominations : Correspond à l’adéquation entre ce qui est affiché ou entré et son référent
  • Compatibilité : L’interface doit être adaptée à toutes les technologies utilisées par les utilisateurs ainsi qu’aux caractéristiques de ceux-ci (âge, déficient visuel, attentes…)

L’analyse détaillée et précise de chaque remarque ergonomique, classée selon ces critères, permet de donner un audit rigoureux avec un développement de chaque point très précis. Nous pouvons alors donner un ensemble de recommandations complètes qui pourront être appliquées par la suite. En revanche, dans cette situation, nous restons sur une analyse réalisée par nos professionnels. Pour enrichir cet audit, il faut ajouter le point de vue des utilisateurs.


Troisième niveau : l’analyse experte + des tests utilisateurs

Le dernier palier ajoute un aspect à l’audit qui est crucial si l’on veut comprendre au mieux les améliorations nécessaires sur un site : les utilisateurs.

3. Le principe, lorsqu’on souhaite ajouter l’utilisateur dans la boucle, c’est de le faire sous la forme de tests. En passant environ une heure par utilisateur, on lui définit un parcours d’usage avec des tâches à réaliser sur l’interface.

Durant le test, on note les problèmes rencontrés, les parcours privilégiés, les réactions… Toutes les remarques qui peuvent être utiles au site. Pour garder une trace du test, il suffit d’enregistrer l’écran du participant et ses réactions.

Ces tests représentent une part importante de l’audit UX : en ayant des retours d’expériences directs, par les utilisateurs eux-mêmes, on peut prendre du recul sur notre vision de propriétaire du site ou d’expert UX. Il est nécessaire de les réaliser avec un protocole strict, différent selon le site et son audience.

Avec l’UX Score, l’état des lieux, l’analyse Bastien & Scapin et les tests utilisateurs, cela donne toutes les clés en main pour un audit bien approfondi qui permettra ensuite une conception/refonte de site réussie.

L’outil derrière l’analyse

Pour que le travail d’audit de notre équipe soit optimal et facilité, il est nécessaire d’utiliser des outils qui vont en ce sens. Dans notre cas, nous privilégions l’usage d’un outil particulièrement complet et facile d’utilisation : Capian.

Cet outil payant permet, avec un plug-in sur navigateur relié à Capian, de capturer les problèmes sur le site analysé et de les ranger selon des critères prédéfinis (ceux de Bastien & Scapin par exemple, même s’il en existe bien d’autres). Chaque capture peut être annotée sur Capian. On peut y ajouter une description et les recommandations à appliquer pour régler le problème remonté.

Toutes les captures prises grâce à Capian peuvent être organisées selon chaque projet et sont modifiables librement par toute personne qui en a l’autorisation. Nous donnons donc à chaque client un accès libre à tous les problèmes et recommandations préconisées pour son site.

L’audit est une part importante à prendre en compte dès le départ d’un projet UX. A travers diverses méthodes et degrés d’analyse, on peut avoir une idée claire sur ce qui doit être amélioré.

Chez Lemon, nous vous proposons ces différents stades d’audit et un accompagnement complet avec notre team UX. Besoin d’une agence web pour votre l’UX de votre site internet ? N’hésitez pas à nous contacter !

Ce que le « 6 to one » vous apporte en tant qu’atelier

  C’est un atelier où il va falloir prendre une feuille, la couper en 6 parties et dessiner dans chaque partie une version mobile de la maquette du site avec quelques minutes pour chaque maquette. Donc, ça va très vite. Le but étant de pouvoir voir ses idées et les présenter.  On va ensuite recommencer l’étape mais là en ne prenant qu’une seule idée ou en  peaufinant l’idée initiale. Il faut vraiment aller très vite en production d’idées pour pouvoir trouver des solutions. C’est ce qui va par la suite permettre de générer le design studio.     Elise de l’équipe UX.

Cet atelier mené par nos UX fera donc appelle à votre capacité créatrice et permettra d’avancer ensemble en présentant des idées en Co-création et d’évoluer par la suite vers la meilleur idée pour aller au bout de chacun de vos objectifs. Vous devenez un acteur majeur et nous avançons ensembles ce qui vous permettra de comprendre ce qui sera fait à chaque étape mais c’est aussi ce qui fera en sorte que nous puissions mieux vous comprendre, vous.

Les objectifs

Vous l’aurez entre autre compris, les objectifs d’un atelier 6 to one sont donc de Générer, développer, affiner et choisir des idées.

Le déroulé

Les participants reçoivent le brief et un premier gabarit (le Six Up) pour réaliser 6 propositions d’interface. Chaque participant présente ensuite ses propositions.

Les participants reçoivent ensuite un second gabarit (le One Up) où ils devront cette fois-ci combiner les solutions les plus intéressantes réalisées lors de l’étape précédente et converger vers une solution unique.

Le temps est le même durant tout le déroulé mais plus le gabarit est grand et plus il demande un niveau de détail élevé.

Alors, serez-vous le prochain à développer de nouvelles idées pour atteindre au mieux vos objectifs durant un de nos ateliers 6toOne ?

Découvrez le design studio dans un prochain article !