Catégorie : UX Design, UI & Webdesign

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

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é

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

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é

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.

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;

• 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.

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

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.

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.

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 »

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.

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 :

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 !

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

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

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.

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 ?

Qu’est ce que l’UX design ?

Que signifie vraiment ce terme, quelles sont les méthodes à suivre pour faire vraiment de l’UX Design et pas seulement utiliser ce terme pour faire « comme les autres » ? On vous aide à y voir plus clair ! 

UX = User eXperience UX design = design de l’expérience utilisateur. Jusqu’ici, rien de compliqué ! L’expérience utilisateur c’est le ressenti de l’utilisateur face à une interaction avec un produit, un service, une interface. L’UX design c’est le fait de procurer une BONNE expérience à l’utilisateur. 

On explique : faire de l’UX Design est avant tout un état d’esprit où l’utilisateur est placé au centre de la démarche de conception. Donc avant de parler technique, webdesign ou même wireframe : on définit la cible utilisateur et on répond à ses besoins ! L’UX design est loin de se résumer à définir la taille d’un bouton ou de sa couleur. Cela regroupe un ensemble de méthodologies qui s’adapte à chaque projet, et qui implique toute l’équipe UX : un vrai travail collaboratif ! 

D’où vient le terme UX

Nombreux sont ceux qui semblent vouloir le titre de « first UX Designer » depuis quelques années, mais l’expérience utilisateur date en réalité des années 90. C’est le professeur de sciences cognitives Donald Norman qui a été l’un des premiers à en parler dans « The Design Of Everyday Things » en introduisant le concept de design centré sur l’utilisateur.

L’UX Design, c’est donc penser en premier à l’utilisation du site web, à la façon dont l’utilisateur et non pas le consommateur va naviguer, avant de penser au développement du site. C’est anticiper ses réactions pour lui fournir l’information qu’il cherche directement.

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.

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.

Le processus d’un projet UX

Vous l’aurez compris, l’UX Design est un processus qui nécessite une prise de recul pour se mettre à la place de l’utilisateur. On vous propose une petite liste d’étapes et de méthodologies à mettre en place pour bien penser votre projet d’UX Design :

• Définir la cible utilisateur : cerner les attentes et les besoins de l’utilisateur, et vos objectifs business
• Définir les besoins de mes utilisateurs : maintenant que je connais ma cible, de quoi ont-ils besoin ?
• Imaginer les solutions pour répondre aux besoins : que va-t-on pouvoir mettre en place pour répondre aux besoins ?
• Construire la future interface : définir l’arborescence, en se représentant le produit final via des wireframes, storyboards ou prototypes
• Évaluer et tester : il faut toujours tester, et ce à n’importe quelle étape !

L’UX Design est un processus itératif : il faut optimiser en continu son produit/service/interface. Le but est d’arriver à la solution qui se rapproche le plus des besoins de l’utilisateur pour concevoir le bon site, et faciliter l’expérience utilisateur. 

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é.