Pour déterminer la qualité de l’expérience utilisateur d’un point de vue quantitatif, il faut tout d’abord récolter les bonnes données. Cela permet de prendre des décisions de design basées sur des données fiables : une étape importante de la recherche UX !
L’objectifs étant de pouvoir prendre des décisions pertinentes et à forte valeur ajoutée, nous n’allons pas nous concentrer sur l’outil de collecte : Ce sont les données dont on à besoin qui vont définir l’outil, et non l’inverse.
1. Quelles données faut-il récolter ?
Pour récolter ces données, il faut réaliser un plan de marquage : c’est un document où l’on liste toutes les données que l’on veut connaître, sans considération technique ( par exemple les clics sur les CTA, le détail des transactions réalisées ou encore l’utilisation des différents filtres). Ils peuvent être infinis et sont propres à chaque site web ou application.
Il doit être réalisé simplement, il faut réfléchir à toutes les données que l’on veut connaître à propos du comportement de l’internaute sur le site.
Il sera décomposé en fonction du parcours de l’internaute en 4 étapes :
Acquisition : Comment et où l’utilisateur arrive sur le site ?
Engagement : Comment l’utilisateur interagit avec le site ?
Conversion : Quels objectifs l’utilisateur a-t-il réalisé ?
Fidélisation : Est-ce que certains segments d’utilisateurs sont fidèles ?
A chaque demande de marquage : se demander « Pourquoi ? », « A quelle question la connaissance de cet indicateur va-t-elle permettre d’apporter une réponse ? » pour éviter de tomber dans un scénario où l’on cherche à tout tracker sans se soucier du temps d’analyse que cela nécessitera par la suite. Les besoins initiaux, théoriques et macro (au niveau de la structure du site et de l’entreprise), deviennent des marqueurs techniques, disposés sur le site et pourront être remontés dans l’outil déterminé.
Le plan de marquage devra répondre aux questions suivantes :
Quelle architecture de données veut-on obtenir ? Comment ces données seront exploitées ? C’est ce qui donnera de la profondeur et de la valeur aux reportings et aux analyses.
Quelles caractéristiques techniques le site a-t-il ? Cela déterminera la forme des rapports et leur communication dans l’entreprise, mais aussi la segmentation des contenus du site (sous-catégories, pages particulières) et la segmentation des visiteurs (est-ce sa 1ère visite ? Est-il membre ou non ? A-t-il déjà acheté sur le site ?).
L’architecture de la visibilité des indicateurs est cruciale. Par exemple, pour des organisations complexes avec plusieurs produits, sites et pays : Faut-il créer une vue regroupant tous les pays ? Faut-il diviser les différents types de produits par pays ?
A la fin de cette étape, nous devrions avoir une liste des données obtenues et la manière dont elles seront présentées sous le modèle du plan de marquage.
Big Data Analysis and Research – Concept with Mesh 2. Quels indicateurs faut-il suivre ?
Un indicateur de webanalyse est défini par son périmètre, appelé « scope », qui est caractérisé par :
L’occurrence du signal (volumétrie ou taux)
Visite: tout indicateur qui inscrit l’occurrence d’un signal au sein d’une visite (par exemple : achat d’un produit en venant du référencement naturel). Cela permet de dédupliquer les occurrences (actions effectuées 1 ou plusieurs fois par visite)
Visiteur: rattache l’occurrence d’un signal/visite à un visiteur. Le plus pertinent pour mesurer la satisfaction d’une cible à une offre/un service.
Attention aux « visiteurs uniques» : les outils identifient des machines (navigateurs) et non des personnes, un visiteur pourra compter comme plusieurs avec son mobile, sa tablette, différents navigateurs, son ordinateur familial ou professionnel. L’unification des outils en est encore à ses débuts et peu fiable, c’est un des challenges de la webanalyse a l’heure actuelle.
Au global, il faut plutôt se fier à l’évolution des tendances qu’attendre une comptabilité parfaite.
Marquer intelligemment, c’est aller chercher des réponses, ce sera un dialogue régulier entre les personnes qui travaillent quotidiennement sur le site et le webanalyste : la moindre information sur l’utilisateur pourra être cruciale pour optimiser son site web.
Un indicateur de web analyse est toujours constitué d’une ou plusieurs métriques et d’une dimension, nous allons définir ces notions cruciales :
Métrique : C’est la valeur que l’on veut connaître, un nombre directement lié à des volumétries d’occurrence : visites, interactions utilisateur, impressions de pages, temps passé, chiffre d’affaires, coût d’acquisition…
Dimension : C’est ce que l’on veut mesurer. Il en existe une infinité de différences, elles sont liées au métier, elles peuvent être : type d’audience (segments utilisateur), géolocalisation (pays, ville, région…), sources de trafic (référencement payant, gratuit, accès direct au site…), catégories de page, offre (type de produit), fonctionnalités (recherche, navigation…), techniques (débit, taille de l’écran…).
Ces 2 notions sont recoupables d’une infinité de manières, et permettent de segmenter les comportements de ses utilisateurs selon leur origine, comportement, habitudes et connaître les effets sur leur navigation. Toute l’analyse sera basée sur ces composantes.
Voici un exemple de plan de taggage pour l’outil Mixpanel :
Exemple de plan de taggage – source – Mixpanel
3. Comment choisir ses KPIs (Key Performance Indicators) ?
Une fois cette notion assimilée, il faut savoir que les indicateurs sont classés selon leur importance en 3 familles.
Les indicateurs sont appelés KPIs et leur importance varie : en effet, le chiffre d’affaires du site est un KPI très important, alors que le nombre de clics sur un menu est un KPI moins important pour le site. Les 3 degrés d’importance sont les suivants :
Les KPI stratégiques : Ils remontent à la direction générale et sont les indicateurs clés des résultats du site. Ils pourront être :
Des chiffres d’audience (nombre de visiteurs), d’engagement (temps moyen passé sur le site), de conversion (nombre d’achats) et de fidélisation (visiteurs réguliers).
Ils sont communs à l’ensemble de l’organisation et permettent d’identifier des alertes de performance au cours de l’exercice et d’acter en fin d’exercice les résultats de projets majeurs.
On fixe des objectifs pour chaque KPI stratégique en début d’exercice et les leviers pour les améliorer.
Le succès ou l’échec des projets d’optimisation reposent sur leur évolution.
Faire attention à l’évolution des taux : un site peut doubler son CA en ayant un taux de conversion plus faible, ce n’est pas forcément un échec.
Il faut dialoguer avec les décideurs pour les identifier en fonction de leur importance (objectifs « business » majeurs du site, problématisation de chaque catégorie de l’acquisition à la fidélisation, et identifier les clients les plus importants).
Les KPI opérationnels : Ils permettent de piloter la performance et d’entrer dans le détail.
Ils sont les jalons de la mesure de l’avancée et du succès des projets et actions avec les différentes équipes opérationnelles : acquisition (référencement gratuit, payant, affiliation…), offre (chef de produit), parcours (chef de projet) et contenus (animation commerciale).
Ce sont des indicateurs issus d’une réflexion spécifique propre au métier, construit et communiqués sur une base régulière (hebdomadaire et mensuelle).
Pour les définir, il faut répondre à des questions opérationnelles liées au fonctionnement du site et à sa proposition de valeur :
Acquisition : Quels sont les apports de trafic ? Par quels canaux celui-ci est-il amené ? Quelles sont les principales pages de destination ? Quels contenus permettent une meilleure conversion en ventes ?
Offre : Quels sont les comportements de recherche du produit ? Comment est divisée la consommation de contenu autour du produit ? Quelles sont les performances du panier?
Parcours : Quels sont les usages des visiteurs ? Quelle est la performance de chacune des fonctionnalités ? Comment sont consulté les contenus ?
Contenu : Quel est l’apport des contenus aux visiteurs ? Permettent-ils une fidélisation dans le temps ?
Tout élément du site doit améliorer la propension de l’internaute à réaliser l’objectif de conversion. Les KPI opérationnels doivent être directement liés aux KPI stratégiques, couvrir l’usage et la performance, et refléter au mieux les actions de l’équipe.
Les indicateurs de suivi : ils sont plutôt informatifs, des points de détails pour affiner l’analyse.
Ils permettent de mener des analyses sur des éléments précis du site, déterminer et orienter des recommandations d’optimisation de cet élément, ils vont mesurer :
Le parcours et les interactions d’un internaute sur un site web
L’impression de toutes les pages du site
Tous les indicateurs de suivi à la base des KPI
Leur définition est donc plus simple car il n’y a pas de réflexion sous-jacente, ils découlent naturellement de ce que l’on veut obtenir.
Conclusion
Au final, pour collecter les bonnes données pour améliorer son UX, il faut :
Des KPI définis : traduire des objectifs business en KPI de webanalyse
Une faisabilité technique : certaines demandes sont impossibles à faire remonter dans les outils de webanalyse ou sont coûteuses.
Une contextualisation : associer chaque KPI à un objectif chiffré et une période de comparaison.
Un guide technique : spécification des marqueurs utilisés, à destination de la direction technique qui devra suivre l’ensemble des évolutions futures du site et être pris en main par plusieurs acteurs de l’entreprise.
Une fois le plan de taggage réalisé, il va falloir prioriser les éléments à suivre, définir leur mise en place technique, choisir la solution la mieux adaptée aux besoins en enfin le mettre en place sur le site, le but étant bien souvent d’obtenir des dashboards, permettant de faciliter la prise de décision :
Source : Klipfolio
N’hésitez pas à consulter les autres articles de notre blog ou de nous contacter ! 🙂
Tests utilisateurs, heatmaps, webanalyse … Tous ces termes utilisés dans l’UX research sont intrinsèquement liés à des outils.
Les outils ne sont pas tous aussi pertinents selon vos processus, selon la taille de votre entreprise, et votre trafic.
Il faut donc bien les comparer et les tester pour choisir les plus pertinents pour votre organisation, en voici une sélection :
Les meilleurs outils UX Research : Tests utilisateur
Dans une démarche d’optimisation de la conversion, la mise en place d’entretiens utilisateurs est une étape qui peut se révéler importante pour identifier les forces et les faiblesses d’une interface web et pour :
Améliorer la satisfaction des utilisateurs
Augmenter les recommandations positives
Impacter positivement les ventes
Outil d’aide à la réalisation de tests utilisateurs
Cassette est un Logiciel de retranscription en direct, avec un système d’analyse en temps réel de la voix. Il vous fournira un transcript complet de vos entretiens utilisateurs, avec la possibilité de noter les évènements marquants (ou « highlights ») avec une interface très pratique et intuitive.
Lookback est une solution de tests utilisateur à distance. Il permet de réaliser des tests utilisateur en direct (modérés) et des tests automatisés (l’utilisateur répond à des questions sans modérateur) dans une interface très simple et intuitive. Lookback permet de paramétrer vos tests utilisateur en ligne, de regarder les vidéos des tests, et de réaliser vos annotations directement dans l’interface.
Pingpong est une solution permettant de réaliser tout le processus de tests utilisateur en ligne : du recrutement utilisateur au dédommagement, en passant par l’analyse.
Ferpection est une solution Française qui propose des services de tests utilisateur, focus group, sondages quantitatifs… L’interface de présentation des résultats des tests utilisateur est simple et intuitive.
Une heatmap est une cartographie des éléments d’une page web les plus visionnés (par eye tracking) ou cliqués (par click tracking) par les utilisateurs. Elle fournit une représentation graphique faisant figurer avec des couleurs chaudes les éléments les plus cliqués ou regardés, et avec des couleurs froides, les éléments les moins cliqués ou regardés.
Hotjar est le leader sur le marché des heatmaps. Basée aux Etats-unis, la solution propose des cartes de clic, de scroll, des sondages en ligne, le tracking de formulaire, le tout avec une interface agréable et simple d’utilisation.
Crazyegg est un acteur historique sur le marché des heatmaps. Il permet de paramétrer un grand nombre de heatmaps en simultané pour différents devices. Très simple d ‘utilisation et intuitif.
Reeport est une solution Française d’automatisation de rapports webanalytics. Il permet d’agréger de nombreuses sources de données pour créer des rapports sous différents formats : Powerpoint, rapport en ligne, ou encore par e-mail. Ses fonctionnalités avancées permettent de réaliser des analyses de données poussées, le tout avec une interface fluide.
Outil d’analyse incontesté et le plus répandu, Google Analytics est gratuit et permet de récolter les principales données d’usage d’un site web : audience, acquisition, comportement et conversion. Couplé avec Google Tag manager, il permet d’obtenir des informations précises sur le comportement de ses utilisateurs.
Adobe analytics, est la solution de webanalytics de la suite Adobe. Elle permet de faire remonter de données de trafic, audience et de comportement utilisateur.
Mixpanel est solution d’analyse de comportements utilisateur, avec un focus sur l’analyse des comportements et parcours utilisateur. Ses usages sont adaptés aux site web, mais aussi aux outils SaaS ou encore les médias. La vision est plus orientée « produit » que les autres outils d’analytics.
Un des meilleurs outils qui vous permet de regrouper tous vos tags sous un seul. Cela permet de simplifier la mise en place et la gestion des tags, que ce soit pour la mise en place d’outils, le tracking des comportements utilisateurs ou encore des tags de retargeting.
Les meilleurs outils UX Research : Sondage en ligne
Après l’avènement des CRM tels que SalesForce pour gérer la relation client, les entreprises se tournent de plus en plus vers des solutions d’enquête online pour créer des questionnaires de satisfaction. L’objectif est d’évaluer de manière régulière, voire en continu, comment les consommateurs perçoivent la qualité des produits ou des services proposés par une structure. Cela permet d’identifier les éléments de satisfaction et d’insatisfaction et de mettre en place des actions pour améliorer ses produits ou services.
Typeform est la référence pour réaliser des sondages utilisateur. On interface simple et épurée et son approche « mobile first », avec un usage très intuitif en fait un outil incontournable de l’UX research.
Survey Monkey est une des solutions de référence pour la création et la mise en ligne de sondage, que ce soit intégré sur le site web, ou bien envoyé par e-mail.
Google forms est un outil de sondage gratuit, simple et intuitif, mais avec un rendu visuel pas toujours optimal lorsqu’il est implémenté sur un site web.
Fullstory est la référence en matière de session replay, pour analyse les comportements de vos utilisateurs, avec la possibilité de les segmenter de manière précise.
Est-ce que vous vous êtes déjà demandé pourquoi certains designs nous plaisent, attirent l’attention, alors que d’autre non ?
L’étude de la cognition* est complexe, de nombreux facteurs entrent en jeu lorsqu’il s’agit de comprendre les réactions spontanées. Surtout pour l’étude site web ou applications, où il existe peu d’historique et d’études.
La neuroscience fait cependant son apparition sur le territoire du numérique, pour toujours mieux comprendre les utilisateurs et leurs comportements.
(* La cognition est l’ensemble des processus mentaux qui se rapportent à la fonction de connaissance et mettent en jeu la mémoire, le langage, le raisonnement, l’apprentissage, l’intelligence, la résolution de problème, la prise de décision, la perception ou l’attention. )
La psychologie et les neurosciences au service de l’UX
Alors que les méthodes de recherche UX traditionnelles comme l’observation, l’interview, ou encore le test utilisateur demandent à l’UX researcher et au participant une interprétation; des technologies modernes comme le eye tracking permettent d’aller plus loin, d’étudier des réactions et des préférences imperceptibles.
Dans le cas de produits avec un trafic significatif, des détails de design peuvent faire une grande différence, c’est pourquoi les géants du web comme Facebook ou Google utilisent des techniques basées sur les neurosciences pour comprendre comment les internautes utilisent leurs produits.
Débutons avec les principales techniques utilisant les neurosciences, permettant de concevoir une bonne expérience utilisateur :
Psychologie du design : Fast Thinking, Slow Thinking
Ce n’est pas un secret que la majeure partie de ce qui commande l’être humain est subconscient. Lorsqu’une personne voit un site web ou une app, après quelques millisecondes, des millions de neurones s’activent et le cerveau prend des centaines de décisions subconscientes.
Suis-je au bon endroit ? Devrais-je faire confiance à ce site?
Dans son étude « The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments » (lien vers l’étude), Javier Bargas-Avila, alors UX Researcher chez Youtube, détermina que les internautes ont des réactions à l’esthétique d’une page web durant les premiers 17 à 50 millisecondes après y avoir été exposés.
Pour mettre cela en perspective, un clignement d’oeil prend 300 à 400 millisecondes. Votre produit peut vivre son procès, son jugement et sa peine, en moins d’un clignement d’oeil.
Ces impressions ne sont pas définitives, mais elles impactent le comportement. Par exemple, si un site charge lentement et que l’utilisateur voit un élément « hors sujet », il risque de quitter immédiatement le site, sans lui laisser de chance.
Le prix Nobel Daniel Kahneman, avec son livre « Thinking, fast and slow » repense le système de réflexion et de prise de décision en deux systèmes pour illustrer la différence :
Système 1: rapide, automatique, fréquent, émotionnel, stéréotypé, subconscient.
Le système 1 est réactif, responsable des réactions simples, comme déterminer la distance entre 2 objets ou encore des décisions émotionnelles. C’est le cerveau « paresseux ».
System 2: lent, nécessitant un effort, logique, calculateur, conscient, peu fréquent.
Le système 2 est analytique et s’applique à des scénarios complexes, comme déterminer un comportement social ou comparer les caractéristiques de 2 produits.
Comme le cerveau humain cherche à limiter le nombre d’informations processées, beaucoup des décisions humaines tombent dans le système 1. Cela impacte fortement la prise de décision concernant un produit, un site web, une application…
La psychologie au service de l’UX Design
Les préférences du cerveau pour les décisions paresseuses rendent peut être la survie plus simples, mais les décisions d’UX plus complexes. Comment analyser une chose que votre utilisateur ne peut même pas percevoir ?
Quelques techniques de neuroscience on fait leur apparition récemment dans la recherche UX, aidant les UX à comprendre ce qui stimule le « fast thinking ».
L’attention et la perception peuvent être étudiés avec des caméras de eye tracking. Les réponses émotionnelles peuvent être déterminées avec des capteurs cutanés ou l’analyse faciale. La réponse électrique peut être mesurée avec l’encéphalographie.
Un électroencéphalogramme (EEG) est un test qui détecte l’activité électrique du cerveau.
Voici quelques leçons générales issues de l’étude de la psychologie humaine, utilisées pour concevoir des produits :
Psychologie et UX #1 : Rendre les éléments facilement identifiables
L’utilisateur qui ouvre votre site ou application veut savoir :
Est-ce qu’il contient ce que je recherche ?
Est-ce de bonne qualité ?
Puis-je leur faire confiance ?
Pour cela, il est primordial de présenter uniquement les informations nécessaires à l’utilisateur, et de ne pas surcharger ce qui lui est présenté : on parlera de charge cognitive. En effet, épurer un design est tout aussi important que de disposer intelligemment les informations pour chaque appareil (se référer à notre article Les bases de l’ergonomie mobile et tablette).
Les entreprises tech à la pointe de l’innovation comme Google ou Netflix vont proposer des interfaces, simples, épurées, pour que l’utilisateur puisse se concentrer sur ce qui est le plus important, et ainsi améliorer la complétion des tâches les plus importantes.
Il a été prouvé que les sites visuellement clairs ont de meilleures performances que les sites complexes : le cerveau paresseux comprendra plus rapidement quelle action il doit réaliser.
Google est réputé pour ses interfaces épurées
Google a optimisé son site pour attirer l’oeil vers son logo et encourager l’interaction avec la barre de recherche. En 2017, ils possèdent 80,5% des recherches mondiales, contre 65,5% en 2016.
Psychologie et UX #2 : Indiquer ce qui va se passer ensuite
Préparer l’utilisateur à ce qui va se passer suite à une interaction donnée, pourra améliorer la capacité de l’utilisateur à comprendre et à réagir à de nouvelles informations.
Par exemple, Yelp ajoute un écran lorsque l’utilisateur clique sur un lien sortant, cela met l’utilisateur dans un contexte de changement d’interface et de design :
Prévenir peut-être à double tranchant. Des informations que vous ne souhaitez pas communiquer peuvent toujours impacter la prise de décision.
Psychologie et UX #3 : Organiser les éléments
Les études de eye tracking permettent de suivre le regard d’un utilisateur lorsqu’ils interagissent avec un produit. Elles produisent une carte de chaleur (ou heatmap) qui montre la durée passée sur chaque partie d’une page donnée.
Communément, le cerveau scanne l’information en forme de « F ». La personne regarde le haut de la page, lit vers la droite, puis descend, en cherchant d’autre informations utiles.
Ne pas respecter le modèle en « F », par exemple mettre de l’information en haut à droite, la rendra plus complexe à trouver.
Selon une étude NNGroup (Norman Nielsen), basée sur 45,327 pages vues, les utilisateurs ne lisent que 20% du texte de la page.
Les utilisateurs ne lisent pas le texte, ils le scannent, les règles suivants sont donc à respecter pour fournir un contenu « scannable » à ses utilisateurs :
Mots clés en surbrillance
Titres clairs et explicites
Listes à points (bulletpoints)
Développer une idée par paragraphe
La pyramide inversée : commencer par la conclusion
La moitié des mots de l’écriture conventionnelle
Le contraste sera utilisé pour mettre en avant ou en retrait des informations spécifiques, bien souvent pour les actions principales (comme les call-to-action). On appelle cela l’effet Von Restorff, aussi connu comme l’effet d’isolation : lorsque plusieurs objets similaires sont présents, celui qui diffère du reste est le plus à même d’être retenu.
La plupart des sites web utilisent des couleurs fortes pour les actions principales et des couleurs plus sobres pour les éléments moins importants.
Psychologie et UX #4 : Le test de 5 secondes
Par chance, vous n’avez pas besoin de logiciels d’eye tracking dispendieux ou d’un électroencéphalogramme pour déterminer si un design fonctionne bien.
Les tests de 5 secondes sont de puissants outils pour déterminer si un design fonctionne bien et si il est rapidement compréhensible.
Lors d’un test de « 5 secondes », le participant voit un site ou un app pendant 5 secondes, puis répond à des questions à propos de sa compréhension de la page. Il ne peut pas y retourner, et doit donner ses impressions « à chaud » à propos du site web, de ses objectifs, et ce qu’ils feraient ensuite sur la page concernée.
Plus nous allons étudier la psychologie, le cerveau humain et la perception, plus les normes de design vont évoluer. Ce qui connecte tous ces apprentissages, c’est la donnée. La donnée utilisée à bon escient permet de prendre des décisions de design avec certitude et ainsi proposer une UX toujours meilleure.
Il est désormais commun d’appliquer les principes de l’expérience utilisateur (UX) à la conception d’interfaces digitales, au design, en y appliquant des méthodes de recherche UX en amont. En revanche, la création de contenu est souvent gérée par les équipes marketing, qui vont créer du contenu principalement dans le but de générer du trafic naturel (SEO), avec une stratégie bien structurée en amont.
C’est une bonne chose de créer des contenus pour générer du trafic, mais les leaders du web vont désormais plus loin, en incorporant les contenus dans la stratégie globale d’expérience utilisateur, comme Google, avec l’UX Writing :
Comment Google incorpore l’UX Writing dans la stratégie UX globale.
Vous souhaitez en savoir plus concernant l’UX writing ? Découvrez notre formation UX Writing.
1. Alors, qu’est-ce que l’UX Writing / UX Content ?
Google suit le principe suivant : « Concentres-toi sur l’utilisateur et le reste suivra ».
La stratégie de contenu est la conception et la rédaction de tous les messages d’un produit ou service digital. L’UX Content est une spécialité de cette discipline, elle aide l’utilisateur à réaliser ses objectifs grâce au langage.
Le langage aide les utilisateurs à aller là où ils veulent aller. En se concentrant sur les objectifs des utilisateurs, les stratégies de contenu aident à construire une relation de confiance et ainsi augmenter la fidélité client.
Les rédacteurs travaillent avec des UX Designers pour réfléchir à l’architecture d’une page, à sa hiérarchie, avec l’UX Content, ils vont devoir travailler avec des UX Researchers pour tester des hypothèses et récolter des informations concernant les utilisateurs.
L’UX Writing + La voix de la marque = Des contenus ciblés, pertinents, et créant de l’attachement à la marque.
2. Les 3 best practices de l’UX Content / UX Writing
Un texte « user-centric », c’est à dire respectant les principes de l’UX design, où la conception centrée utilisateur, doit respecter les best practices suivantes :
A. Clair
Souvent, les mots utilisés concernent le produit / service, mais pas l’utilisateur. Il est primordial de faire preuve d’empathie (et de réaliser des personas) pour comprendre les besoins / problèmes de ses utilisateurs et ainsi écrire ce qu’ils veulent obtenir, plutôt que ce que l’entreprise veut communiquer. Eviter tout jargon.
B. Concis
Concis ne signifie pas court. Concis signifie que chaque mot à l’écran à une utilité. Les visuels sur un site web doivent servi le message, et non l’inverse.
Les designers doivent donc collaborer avec les rédacteurs pour proposer la meilleure expérience aux utilisateurs.
C. Utile
Les textes doivent être utiles aux utilisateurs, par exemple, le Call to action (CTA) guide les utilisateurs vers leur prochaine étape, il doit donc être explicite et clairement indiquer ce qui attend l’utilisateur lorsqu’il aura cliqué dessus.
3. Les étapes pour réaliser son UX Content / UX Writing
1. Recherche
La recherche UX réalisée pour le design pourra aussi être utilisée pour l’UX content. Par exemple: les personas, les interview utilisateur, les parcours utilisateur…
La phase de recherche permettra de définir le ton de la rédaction.
Prenons l’exemple d’un service de musique en ligne : Quels seraient les mots ou termes pour décrire votre produit dans le Google Play Store ? Qu’est-ce qui fait se démarquer de la concurrence votre produit ? Quelles sont les fonctionnalités qui intéressent le plus les gens ?
Il faut également mettre en place les guidelines ou principes du produit / service. Par exemple : Simple d’accès / Novateur / Emphatique. Une fois déterminées, elles doivent se ressentir dans vos écrits.
Le ton
Pensez au ton de votre voix : ce sont ses variations en fonction du contexte. Chaque situation peut requérir un ton approprié. Texte d’introduction, message d’erreur, invitation à partager le produit, description, âge de la cible…
Le ton doit avoir un spectre bien défini. C’est dans celui -ci que vous allez piocher en fonction des situations. Il peut être informatif ou inspirant, direct ou humoristique. C’est en délimitant votre parcours utilisateur que vous serez en mesure de bien appliquer le bon ton au bon moment.
Pour vous aider posez-vous les questions suivantes :
Quel est l’objectif de l’utilisateur ?
Que pourrait-il ressentir à ce moment ?
Comment voudriez-vous qu’il se sentent ?
Une fois défini, vous pouvez l’appliquer à votre UX Content !
2. Ecriture
C’est l’élément central et le rôle principale de l’UX writer. L’important est de réussir à peser chaque mot, afin de donner une maximum de sens. Google fait référence à des forgerons des mots (wordsmith).
Voici un exemple de description d’un emploi pour UX writer :
« Vous savez écrire de façon innovante, étonnante et mémorable et efficace. Vous savez combiner l’inspiration créative et possédez un leadership créatif qui vous permet d’introduire de nouvelles idées et expériences au monde. »
3. Collaboration
L’UX writer doit être capable de collaborer efficacement avec les autres équipes, aussi bien marketing, développement, business et le service légal. C’est nécessaire étant donné que la création et la mise en place d’une stratégie éditoriale et de contenu sera sa principale mission. Il doit également être en mesure d’écrire les contenus marketing.
Bien qu’il soit plus effectif d’avoir un UX writer dans son équipe à plein temps, il peut parfois être compliqué pour l’entreprise d’avoir assez de mission à lui donner. Dans ce cas, avoir recours à un freelance peut s’avérer utile.
Il faut prendre en compte le fait que l’UX writer n’est pas :
Un écrivain technique, qui écrit pour la clarté et la précision, ni un content strategist, qui va planifier le contenu à grande échelle sans pour autant le rédiger, ni un architecte de l’information, qui va construire la structure de l’information, ni enfin un marketeur, qui va créer des campagnes ayant pour but d’attirer de nouveaux clients.
4. A/B Testing
Usage bien connu de l’UX Design avec le test de structure de page, de placement de CTA, etc. L’A/B test peut également s’appliquer à l’écriture et peut avoir un impact très puissant.
Conclusion
Voici une checklist qui va vous permettre de bien avoir en tête les éléments principaux de l’UX Content.
Il faut toujours penser :
User First: Se concentrer sur l’utilisateur
Clair: Ecrire sans jargon et avec du contexte
Concis: Ecrire dans un style compréhensif et scannable
Utile: Ecrire dans une façon qui projette l’utilisateur vers l’action suivante
Branding: Qui applique le ton correspondant à votre marque
Vous êtes passionnés par l’expérience utilisateur (UX) ? Vous souhaitez approfondir vos connaissances ? Avoir un socle plus solide ?
Les plus grands experts de l’UX ont écrit des ressources à très haute valeur ajoutée et accessibles à tous.
Après des heures de lecture et de prises de notes, l’agence conseil spécialiste UX Arquen a classé les 10 meilleurs livres de l’Expérience Utilisateur (UX), en Français et en Anglais :
Les meilleurs livres de l’Expérience Utilisateur :
Le design émotionnel, Aaron Walter, Eyrolles, 2011, 109 pages
En évoquant des exemples parlants (Mailchimp, Mint…), l’auteur arrive à nous faire percevoir l’importance de l’émotion dans la conception de sites et d’interfaces web, et surtout l’attachement à un produit / service que ces émotions peuvent susciter.
En intégrant l’humour, la sympathie, le sérieux ou encore les surprises dans la conception de son site web, on peut atteindre un attachement fort à un produit, qu’on aurait du mal à obtenir en respectant strictement les codes classiques de la conception. Livre intéressant et approche originale.
Ouvrage simple et rapide à lire, retraçant toutes les problématiques des devices mobiles modernes (différentes tailles d’écran, interactions tactiles, différentes positions lors de l’utilisation d’une tablette…) et l’importance de les anticiper pour réaliser la meilleure expérience utilisateur possible en multi-device. Pour l’essentiel, consultez notre article : UX Design responsive.
La webanalyse : des données à l’action, Antoine Denoix, Dunod, 2013, 224 pages
Ce livre reprend tous les basiques de la webanalyse, et surtout de l’importance d’un plan de taggage bien réalisé et bien pensé en amont, pour obtenir des données fiables, stratégiques, opérationnelles, et utiles à la prise de décision UX. C’est une très bonne introduction à la discipline, qui nécessite cependant de la pratique pour pouvoir être maîtrisée.
Souvent négligée par les ergonomes et UX designers, l’analyse de données statistiques permet de mieux comprendre les comportements de ses utilisateurs (Recherche UX) pour prendre des décisions de conception basées sur des faits, et sur les comportements réels de ses utilisateurs.
Ouvrage clé de l’UX Design, il reprend toutes les méthodes de recherche et de conception centrée utilisateur. L’ouvrage est dense, complet et bien illustré !
Les meilleurs livres de l’Expérience Utilisateur en Anglais :
Elements of user experience, Garrett Jesse James, New riders, 2010, 192 pages
C’est la bible de l’expérience utilisateur et de l’architecture de l’information, il clarifie l’importance de prendre en compte le business & la stratégie de l’entreprise avant de débuter la phase de conception web et d’UX design.
Il insiste sur la réfléxion stratégique, la structure et l’architecture de l’information comme clés de voûte d’une bonne expérience utilisateur (UX) digitale.
Don’t make me think, Krug Steve, New riders, 2013, 216 pages
Ouvrage très célèbre aussi, ‘Don’t make me think’ évoque les principes psychologiques clés de l’ergonomie web, et insiste sur la nécessité, et surtout sur le ROI de la réalisation des tests utilisateur lors d’une phase de conception. Avec un ton humoristique et simple, il permet d’assimiler les bases de l’UX.
Glossaire complet de l’UX, il tente de lier les différents domaines qui décryptent les comportements utilisateur (gaming, réalité virtuelle, Interface Homme-machine, UX Design…), et permet de prendre d’élargir ses perspectives vers d’autres contrées que le design et l’ergonomie web.
La phase de recherche en webdesign, Erika Hall, Eyrolles, 2015, 175 pages
C’est un bon livre introductif à la recherche UX, la 1ère partie est alléchante et contextualise bien le métier d’UX Research.
On pourra cependant lui reprocher qu’il manque d’exemple concrets, d’un bagage théorique plus solide (rien sur la psychologie cognitive, les règles de base de l’ergonomie…) et de profondeur (les méthodes de benchmark évoquées sont très succintes).
100 things every designer needs to know about people, Weinshenk Susan, New riders, 2011, 256 pages
Nous recommandons ce livre à tous les professionnels du web, ergonomes et spécialistes UX souhaitant obtenir les bases de la connaissance en comportement humain et en psychologie cognitive.
Il couvre une large variété de sujets basés de manière concise et basée sur de la recherche. Sa force est aussi sa limitation : il ne couvre aucun sujet en détail. C’est un bon livre introductif, qui ne se suffira cependant pas à lui seul si vous souhaitez aborder le sujet en profondeur.
Evil by design, Chris Nodder, Wiley, 2013, 320 pages.
Evil by design contient toutes les informations pour prendre l’avantage des défauts humains. Ce n’est pas une mauvaise chose, au contraire, cela vous permettra de mettre en avant les avantages de votre produit ou service de manière bien plus évidente. Le livre traite des caractéristiques intrinsèques de l’humain pour mieux le cibler et assouvir ses besoins.
Connaissez-vous la proposition de valeur de votre site web ?
Vous devez penser que c’est une question simple, bien sûr vous connaissez la proposition de valeur de votre entreprise.
La réponse à cette question est souvent ignorée par les UX designers et les spécialistes UX, souvent inventée « sur le tas ».
Comment est-ce possible que la proposition de valeur d’une entreprise ne soit pas clairement comprise par les employés, qui communiquent directement avec les utilisateurs ?
« Une forte proposition de valeur est la fondation d’un bon design »
La réponse, c’est qu’énormément d’entreprises oublient de définir clairement leur proposition de valeur et de la transmettre à tous leurs employés. C’est une grosse erreur.
Comme évoqué dans l’incontournable ouvrage Elements of user experience, la proposition de valeur et la stratégie sont à la base de tout design et de toute conception. Cet article va vous aider à trouver les outils et comprendre les tactiques à votre disposition.
En utilisant les outils présentés dans cet article, vous pourrez définir et transmettre pertinemment votre proposition de valeur. Pour cela, nous allons commencer simplement : Qu’est-ce que la proposition de valeur ?
Selon Wikipedia : « Une proposition de valeur est la promesse d’une valeur qui sera délivrée, communiquée et prise en compte. C’est aussi une croyance du client de combien la valeur (bénéfice) sera délivrée, vécues et acquérie »
Pour nous, cette définition ne colle pas. Nous proposerons plutôt celle-ci :
« Une proposition de valeur est un produit, service ou expérience qui créé les gains désirés ou soulage des douleurs existantes ».
Pour concevoir une proposition de valeur cohérente, vous devez comprendre les gains et douleurs existantes des utilisateurs qui vous souhaitez viser. A travers ce processus vous pourrez aussi découvrir des avantages inattendus.
Deux outils pour déterminer votre proposition de valeur
Chez Arquen, agence conseil spécialiste UX, nous définissons le design comme le processus guidant les tentatives de résoudre des problèmes humains complexes. La conception de la proposition de valeur est une sous-partie de cette discipline. Grâce à des chercheurs comme Alexander Osterwalder et Steve Blank, des outils très pertinents ont émergé pour accompagner les designers dans leurs recherches de la proposition de valeur ultime.
Désormais célèbre, ce canvas et ses variantes ( Lean Canvas) est utilisé par de nombreux décideurs dans le monde entier.
Il permet, dans un format simple, de décrire comment une entreprise délivre sa proposition de valeur à sa cible. Malgré qu’il soit souvent utilisé par la direction/stratégie, il devrait toujours faire partie du processus de design. Cet outil est très utile pour aider à discerner la valeur du design pour les objectifs business de l’entreprise. Concrètement, ce canvas peut être utilisé pour :
Designer des hypothèses
Conduire des tests
Communiquer avec la direction
Informer des priorités stratégiques
En utilisant ce canvas, les organisations peuvent mesurer leurs progrès en apprenant rapidement et en progressant sur leurs principales métriques. Cela supporte le désir de prise de décisions d’UX Design et d’ergonomie web basées sur la donnée.
Outil #2 : La recherche utilisateur
Pour comprendre les « pain points » et les objectifs de ses utilisateurs, il est recommandé de réaliser une phase de recherche UX, ou recherche utilisateur, avant d’entreprendre la conception de son site web et de se lancer dans l’UX Design.
La recherche UX permet de réellement créer de l’empathie pour ses utilisateurs pour créer les produits et services qui correspondront le mieux à leurs besoins. Cette phase en amont de la conception d’un site web va influencer directement votre stratégie, et ainsi votre proposition de valeur.
Toutes les réponses apportées par la recherche utilisateur seront des hypothèses à valider en conditions réelles, avec des vrais utilisateurs. C’est le principe du lean UX, qui part du postulat qu’un produit n’est pas viable tant que ce n’est pas prouvé avec des chiffres et des résultats probants.
Cette approche, souvent négligée, est pourtant centrale au sein des startups les plus célèbres (AirBnb, Spotify, Uber…). Mettre l’utilisateur au centre permet d’avoir des utilisateurs satisfaits, et ainsi s’assurer un meilleur chiffre d’affaires.
C’est pourquoi votre proposition de valeur doit être basées sur des données.
Que faire ensuite ?
Une forte proposition de valeur est la fondation d’un bon design.
En utilisant le business model canvas, et la recherche utilisateur, vous allez pouvoir définir une proposition de valeur forte, qui pourra driver votre entreprise et vos collaborateurs.
Généralement relayé comme un détail sans importance lors de la conception d’un site web, le footer contribue à l’UX plus qu’on ne pourrait le réaliser.
Un footer peut présenter de nombreux avantages, il n’est pas à relayer à la dernière minute d’une conception de site web, c’est, au contraire, le filet de sauvetage de l’UX.
Si un utilisateur scrolle tout le long de la page d’accueil et ne trouve pas ce qu’il est venu chercher, le footer devient une dernière sécurité. C’est la dernière chance de capturer un utilisateur avant qu’il ne quitte le site.
Le footer est-il important ?
Il est généralement conseillé de disposer le contenu le plus important d’une page au-dessus de la ligne de flottaison, c’est en effet l’endroit de la page que l’utilisateur verra le plus. Cependant, ce n’est pas nécessairement la zone au-dessus de la ligne de flottaison qui bénéficiera du plus d’engagement de la part de l’utilisateur.
Cette étude Chartbeat, basée sur 25 millions de sessions web, révèle que l’engagement (temps passé sur cette zone de la page) est plus important en dessous de la ligne de flottaison, puis décroit peu fortement jusqu’au bas de la page, si l’on ne prend pas en compte les utilisateurs qui quittent la page. Il y a donc une part non négligeable des utilisateurs qui voient le footer.
Comment concevoir un footer optimal, qui améliore l’expérience utilisateur (UX) ?
Nous avons déjà défini le footer comme un filet de sécurité de la navigation de votre site web, mais cela ne veut pas dire que vous devez mettre l’intégralité de la navigation de votre site web dans votre footer.
Au contraire, vous devez vous cantonner à 2 extrêmes : composants fondamentaux du site, dont tous les utilisateurs ont besoin, et informations de support, pertinentes uniquement pour des segments minoritaires d’utilisateurs.
Cela peut paraître singulier, mais cela sert 2 objectifs : un endroit pour conserver l’essentiel, mais pas nécessairement le plus populaire (page carrière, recrutement, conditions d’utilisation, politique de confidentialité), mais aussi un endroit pour (re)présenter les éléments clés.
Ce que vous ne voulez pas faire, c’est exactement ce que l’on peut voir sur le site de La Redoute : mettre tout le plan du site et tout le catalogue.
Source : www.laredoute.fr – screenshot réalisé le 27/04/2018.
Une fois le contenu clé et additionnel déterminés, il faut incorporer quelques éléments permettant d’augmenter la conversion.
Tout d’abord, les CTA (call to action) présentés dans le footer sont une excellente opportunité de mettre en avant des objectifs secondaires de votre site (suivre sur les réseaux sociaux, inscription à la newsletter…). Si vous demandez l’email de l’utilisateur, assurez-vous d’ajouter des éléments de réassurance, comme le détail de ce qu’ils vont recevoir, ou encore le nombre d’utilisateurs inscrits.
De plus, il est conventionnel de positionner les liens vers les réseaux sociaux dans le footer, si c’est ce qu’un utilisateur recherche, c’est généralement le 1er endroit de la page où il se rendra.
Organiser et optimiser
Maintenant que vous avez priorisé le contenu de votre footer, comment l’organiser ?
Une technique conventionnelle de design de footer est d’organiser le contenu en colonnes, cela aide à créer une hiérarchie entre les différents contenus et à optimiser l’espace.
De plus, le footer peut être un outil pertinent pour le SEO (ou référencement naturel). Alors que ce n’est certainement pas le lieu où faire un « fourre-tout » de mots-clés, c’est un lieu où rappeler les principaux mots-clés de votre site pour booster le SEO des pages principales. Logiquement, les contenus du footer vont se retrouver sur tout votre site web.
Conclusion
Optimiser votre footer pourra vous paraître insignifiant, cependant, chez Arquen, nous croyons en une expérience utilisateur complète et holistique. Nous pensons que chaque élément, ligne et détail a son importance, et que les meilleures expériences utilisateur sont celles où l’expérience a été pensée dans sa globalité.
Dans l’UX design, de nombreux designers ont tendance à oublier que les wireframes (aussi appelés maquettes, mockups ou encore prototypes) ont 2 objectifs : technique et interface (valider des idées, interactions et fonctionnalités). L’objet de réaliser des wireframes est rarement de faire des maquettes pixel-perfect, mais plutôt être agile et rapide pour valider des concepts et avancer dans un projet.
L’UX designer cherche à concevoir de nouvelles idées et fonctionnalités, mais c’est aussi le garant des spécifications techniques et du développement qui suivront cette phase de conception.
Dans un 1er temps, il faut bien faire attention à ne pas trop détailler (validation des principaux zonings, du concept de la page). Dans un second temps, il faut être capable d’aller vers un haut niveau de détail lorsqu’il s’agit de les livrer à un développeur pour éviter toute ambiguïté :
Que contient cette liste déroulante ?
Que se passe-t-il lorsque l’on réduit la taille du navigateur ?
Que se passe-t-il lorsque ce champ n’est pas complété correctement ?
Pour gagner du temps et de l’énergie, vous trouverez ci-dessous la « checklist » de tous les éléments indispensables pour réaliser des mockups fidèles et pertinents pour la suite de votre projet. Gardez à l’esprit que ces recommandations s’appliquent lorsque vous avez validé les grandes lignes de votre projet. Trop de détails sur une phase de prototypage serait une grossière erreur.
1 – Déterminez le périmètre du projet
Quel device ?
L’un des éléments les plus importants lors de la définition du périmètre du projet est la définition des appareils (ou « device ») : adaptive ou responsive ? Cross-platform ? Confirmez toujours avant de commencer un projet le périmètre de devices concernées, un ajout en cours pourrait être catastrophique pour le travail accompli et pour l’expérience utilisateur.
Voici notre liste de référence des différents appareils à adresser ou non :
Navigateurs desktop
Navigateurs mobiles
App native mobile : Android, iOS, Windows
Tablette
Smartwatch : Android wear, Watch OS (iOS), WebOS, Band (Microsoft)
Smart TV : Android TV, Tizen OS (Samsung), Firefox OS (Panasonic), WebOS (LG)
Console de jeu : Xbox One, Playstation 4, Wii U, Steam, Switch
Faites coïncider les fonctionnalités avec les usages
Faites une repasse sur chacune des fonctionnalités en place, et ce pour chacun des devices du périmètre. En effet, un module complexe de réservation en ligne n’aura pas lieu d’être sur un mobile, ou bien nécessitera d’être pensé de manière complètement différente que sur desktop. Ce sont des problématiques à adresser dès le début du projet. Ne pas hésiter à supprimer des fonctionnalités sur certains devices, cela pourra faire gagner un temps précieux à vos équipes.
Considérez les conséquences de l’orientation de l’écran
Pour le mobile et la tablette, les designs peuvent apparaître différemment en portrait ou en paysage :
Il est possible de « locker » l’utilisation d’une app dans une orientation (horizon ou vertical) particulière : est-ce nécessaire ? Des tests utilisateurs pourront souvent être la réponse à cette interrogation.
Si elle n’est pas travaillée en conséquence, la version « paysage » sera l’équivalent de la version « portrait » étirée. N’y a-t-il pas d’autres possibilités à mettre en place ?
Source: Smashing magazine
Conserver un design en portrait aurait pu ici être plus adapté et ne pas forcer les utilisateurs à passer de portrait à paysage au cours de l’utilisation de l’application.
Déterminez l’adaptabilité au mobile
Une interface peut s’adapter de manières différentes :
Fixe (ou « statique ») : le site ne change pas
Fluide (ou « liquide ») : se réduit ou s’étend selon le device
Adaptive : Des « breakpoints » font changer le site selon la taille de la fenêtre
Responsive : Combine une approche adaptive et fluide
L’outil Liquidapsive est un outil interactif permettant de visualiser comment chacune de ces méthodes affecte une interface selon la taille de la fenêtre.
Il est important de trouver un compromis avec les chefs de projet, développeurs, décideurs et graphistes pour déterminer en amont le niveau attendu.
Confirmer avec les développeurs et graphistes les breakpoints à déterminer. De plus, une conception responsive nécessite beaucoup de temps supplémentaire pour un UX Designer, le temps que nous constatons généralement est de +50% à +75%.
De plus, chaque changement a des conséquences multipliées par le nombre de résolutions.
Commencez en petit puis large
1024 x 768 pour le desktop et la tablette et 320 x 480 pour le mobile sont des résolutions généralement confortables pour créer des interfaces déclinables. Il est plus prudent de débuter avec des résolutions basses puis d’augmenter par la suite que l’inverse.
Le compte Google Analytics du site en cours de conception ou de redesign vous indiquera les résolutions les plus communes pour vos utilisateurs, et ce pour chaque type d’appareil. De plus, vous pourrez consulter les performances par résolution, qui peuvent parfois vous indiquer des problèmes de conception. Souvenez-vous qu’il vaut mieux être inclusif qu’exclusif.
Bien que 1920 × 1080 pixels ai le plus grand nombre d’utilisateurs, 1366 × 768 est la meilleure pour commencer même si il n’y a que 10.68% d’utilisateurs.
Aller directement sur la portion la plus grande peut avoir pour conséquence de vous couper d’une part de l’audience.
La résolution la plus répandue sera le bon choix, si elle est confirmée par une croissance au cours des dernières années et non un déclin.
En cas de forts écarts de résolution, prenez la plus faible.
Pensez à votre cible : même si 1366 x 768 est la résolution la plus courante, dans des certains univers (B2B), nous constaterons plutôt des résolutions de 1024 x 768.
Le CMS / langage de programmation
Pensez à validez le CMS (content management system) utilisé, il va impliquer des contraintes de design parfois fortes (Sharepoint et WordPress ne présentent pas du tout les mêmes caractéristiques ni fonctionnalités).
De plus, une application sur iOS et sur Android nécessitera des compétences différentes en termes de développement : avez-vous les moyens / ressources nécessaires ?
2- Définissez et préparez le livrable attendu
Le niveau de fidélité
Soyez clair quant au niveau de fidélité attendu pour vos wireframes / prototypes :
Faible fidélité :
Se concentre sur les interactions, le concept et l’interface de la maquette.
Les éléments d’UI et les contenus peuvent être représentés par des « placeholder », des lignes ou du « lorem ipsum », avec ou sans titres explicites.
Pas de couleurs : priorisation des éléments avec différentes échelles de gris.
Exemple de wireframe basse fidélité.
Haute fidélité :
Prend en compte l’esthétique comme le branding, le ton, les couleurs, le style de police et la charte graphique
Peut inclure des images réelles
Peut inclure des éléments stylisés (ombres…)
Peut être appelé « mockup »
Exemple de wireframe haute fidélité. Source : Pinterest.
Fidélité moyenne :
Varie entre le niveau de fidélité faible et élevé
Réalisé en niveau de gris
Peut contenir des images et textes
Il peut être intéressant de fournir un extrait de wireframe pour valider le niveau de détail attendu par votre équipe / client avant de se lancer dans la déclinaison du prototype.
Exemple de wireframe de fidélité moyenne. Source: Pinterest.
Systèmes de grilles et alignements
Lorsque qu’il est utilisé dans un outil de maquettage, un système de grille vous permet de gagner beaucoup de temps et de propreté dans le rendu final. De plus, cela vous aide à avoir une cohérence entre les différents templates et dans la hiérarchie de votre design. L’article “All About Grid Systems” explique pertinemment la théorie derrière les systèmes de grille.
Connaissez vos fonctionnalités d’alignement et d’espacement
Pour obtenir un design « pixel-perfect », utilisez les fonctionnalités d’alignement et d’espacement de votre outil de wireframing. Apprenez les raccourcis clavier les plus communs comme « centrer », « distribuer », « aligner horizontalement », « grouper » … Pour avoir un design soigné et propre.
Interactions avec l’utilisateur (feedbacks)
Pour chacune des actions possibles, il devrait toujours y avoir un « feedback » de l’interface qui informe l’utilisateur de ce qu’il s’est passé et de ce qu’il lui reste à faire.
Validation de formulaires
L’informer lorsqu’il y a une syntaxe invalide (numéro de téléphone, email, code postal…)
Messages intermédiaires
Confirmation, alerte, erreur, barre d’avancement…
Ecrivez des messages « user friendly »
Faites attention aux wordings utilisés, soyez toujours le plus clair possible :
Détaillez le problème spécifique
Mentionnez la prochaine action à réaliser
Soyez bref et concis
Evitez le jargon technique
Soyez dans le ton de votre marque, si elle en a un.
Quelques techniques d’optimisation de formulaires
La checkbox « se souvenir de moi » pour se logger
Le lien « mot de passe oublié ? »
Suggestions en direct (par exemple la ville, le code postal…)
Valider en direct chaque lettre entrée (minimise le taux d’échec)
Liste en dropdown qui filtre automatiquement les champs en cours de renseignement.
Une checklist pour la « force » du mot de passe : nécessité de majuscules ? De chiffres ? De caractères spéciaux ?
Cette checklist montre clairement les critères validés et ceux qui ne le sont pas.
Etats d’interaction
Faire une passe sur tous les éléments de l’interface proposant une interaction ou bien différents états :
Menus Dropdown : Proposer les éléments de la liste déroulée en annotation. Cela peut être un menu de navigation, des filtres, des tris, des champs à sélectionner (une date, une région) ou encore un menu contextuel.
Titres, noms et étiquettes : Cela compte pour tous les blocs de texte qui ne peuvent pas descendre à la ligne inférieure (par exemple, dans un tableau). Prévoir le nombre de caractères maximum.
Contenu dynamique. Vos développeurs auront besoin de compléter les contenus dans les cas suivants :
Pagination : forums, page de résultats de recherche, nouveaux articles.
Chargement des contenus et niveau de scroll
Textes courts ou étiquettes
Galeries : carrousels d’image, de vidéos…
Contenus : Dossiers ou catégorisation des éléments sur plusieurs niveaux d’arborescence
Posts et commentaires
Les états suivants sont souvent associés à des contenus dynamiques :
Première pages, pages du « milieu » et dernière page : Les contrôles peuvent apparaitre de manière différente selon la position de l’utilisateur.
Taille standard des contenus
Contenu vide ou non complété : Les espaces vides peuvent êtres gênants pour le rendu d’une page. Imaginer des messages ou images remplaçant les contenus vides.
Icônes avec des nombres. Parfois les icônes des valeurs (nombre de notifications ou d’emails reçus). Il faut penser aux états suivants :
L’état « 0 »
Valeurs à 2 ou 3 chiffres
Valeurs élevées : selon le design, des valeurs comme “100K” ou “2000+” doivent être imaginées
Champs des formulaires. Les formulaires pourront avoir plusieurs états :
Activé : état par défaut.
Désactivé : Champs non-utilisables dans certaines conditions.
Corrigé : possibilité de proposer un champ différent lorsqu’il est validé.
Erreur de validation : Certains designers placent des messages d’erreurs suite au champ concerné avec les raisons de l’erreur.
Tooltips (ou bulles d’aide). Pensez à ajouter des tooltips lorsque :
Vous proposez un nouveau modèle d’interaction à l’utilisateur.
Des actions peu fréquentes
Raccourcis de clavier
Contenus abréviés ou en « preview » : pour montrer un extrait à l’utilisateur sans qu’il ait à quitter la page qu’il est en train de consulter.
Informations de référence : Détails supplémentaires pour aider l’utilisateur dans sa tâche.
Uploads de fichiers. Lorsqu’un utilisateur charge un fichier via son navigateur, il faut anticiper plusieurs états :
Barre de progression de l’upload jusqu’à 100%
Annulation d’un upload en cours
Succès : Apparaît une fois que la barre de progression est complétée. Proposer le nom du fichier uploadé et un moyen de le supprimer.
Confirmation de la suppression
Gestes
Vos utilisateurs vont interagir avec votre interface de différentes manières, et tout particulièrement sur mobile / tablette avec des interactions digitales. Pour chaque action de l’utilisateur, prenez en compte les gestes ci-dessous et annotez les états correspondants :
Hover (passage de la souris) : Certains designers remplacent le Hover par une pression du doigt.
Glisser / déposer : Proposez un design alternatif.
Ajout de documents : Eventuellement le supprimer pour le mobile, ou bien proposer des interactions simples avec des applications comme Google drive.
Pages et zones supplémentaires
Des éléments sont souvent oubliés lors du design de nouvelles pages :
Page d’erreur 404
Cas lorsque le serveur ou internet est « down »
Log-in : inclure le CAPTCHA et éventuellement les log-in avec réseaux sociaux si nécessaire.
Nom d’utilisateur ou mot de passe oublié
Configuration et paramètres
Mentions légales
Utilisation des données personnelles / cookies
Email : La confirmation de la création du compte ou le changement de mot de passe.
Types d’utilisateurs
Certains éléments ne s’appliquent qu’à un type d’utilisateurs :
Nouveaux utilisateurs : création d’un compte
Invités : utilisateurs n’ayant pas encore de compte.
1ère visite : Eventuellement proposer un écran d’accueil différent et/ou des éléments de « onboarding »
Visiteurs récurrents
Utilisateurs loggés ou existants.
Admins et super-users
Textes
Il n’est pas courant de renseigner tous les textes dans des wireframes. Il est cependant important de renseigner les titres et les éléments d’action clés. Pour tous les autres contenus, vous pouvez utiliser du ‘Lorem Ipsum’, cela permet de :
Déterminer la taille des textes en avance
Montrer une page remplie avec du contenu
Même les titres peuvent être en Lorem Ipsum dans certains cas.
Les textes génériques décrivant le rendu final peuvent être utiles pour :
Connaître ce qui va apparaître sans avoir le temps de se pencher dessus.
Donner une indication au copywriter
Eviter les batailles politiques avec les équipes de branding et les décideurs
Centrer le débat sur les fonctionnalités et non sur les wordings.
Un contenu réaliste, qui reflète l’intention du contenu, peut nous aider pour :
Augmenter la fidélité et le réalisme d’un design
Montrer le ton et le type de langage à utiliser
Réaliser des tests d’usabilité
Le plugin Craft pour Sketch permet d’ajouter du contenu réaliste facilement.
Présentations
Montrer comment l’interaction fonctionne va réduire les incompréhensions et vous assurer de la faisabilité technique de celle-ci.
Prototypes interactifs : Pour que vos interactions soient les plus explicites possible, vous avez la possibilité d’utiliser des outils de prototypage comme Principle, Flinto et Axure. Certains nécessitent des connaissances de programmation comme Origami et Framer.
Placement des annotations
Le placement des annotations peut améliorer votre workflow et la qualité globale du rendu final.
Il y a différents moyens de placer des annotations :
Colonne à gauche ou à droite : Permet au lecteur de passer du design aux annotations rapidement.
Marques numérotées : Permet d’expliciter clairement l’élément. Certains outils de prototypage comme Axure vous permettent de placer des marqueurs directement sur votre prototype.
Page séparée : Laisse un vaste espace pour le design et les annotations.
Soyez concis et direct. Eviter toute redondance et informations superflues. L’information se doit d’être très claire.
Utilisez un vocabulaire simple compréhensible par tous, et des termes techniques uniquement si vous vous adressez exclusivement à un public de développeurs.
Pour les développeurs, préférez des annotations détaillées, avec le détail des valeurs attendues (taille des images en pixel, code # pour la couleur, toutes les interactions possibles…).
3. Justifier vos décisions
Un des challenges les plus communs pour les UX designers est de convaincre les autres personnes de leurs décisions de design. Vos décisions ne doivent pas être arbitraires, et vous devez pouvoir justifier chacune d’entre elles. N’hésitez pas à présenter de nouveaux vos travaux d’UX (ateliers, user flows…) en même temps que vos wireframes & spécifications plus abouties.
Site map. Pour chaque wireframe, montrez sa place dans le sitemap. Vous pouvez juste montrer les parents proches, ou bien utiliser un ID pour repositionner la page dans son contexte.
Personas et objectifs. Ajoutez une indication du persona et les principaux objectifs, tâches et comportements liés au wireframe présenté.
User flows. Mapping des différents parcours utilisateur.
Exemple d’un flow utilisateur. Source : Dribbble
Eléments d’UX Research. Pour justifier vos décisions de design, n’hésitez pas à inclure les éléments d’UX research qui justifient vos décisions (analytics, entretiens utilisateur, benchmark concurrentiel, sondages ou encore des focus group).
Questions de tests utilisateur. Listez vos questions potentielles pour réaliser des entretiens utilisateurs. Elles pourront expliquer votre état d’esprit et les éléments nécessitant une validation.
Versionning C’est inévitable, vous allez apporter de nombreuses modifications à vos wireframes. Gardez la trace des différentes versions sera utile pour les autres mais aussi pour vous. Pour cela, indiquez toujours la date et les informations concernant ce qui a changé.
Intégrer un sommaire. Lorsque vous avez de nombreuses pages, il est particulièrement important de faire un sommaire pour présenter des wireframes.
Ajoutez un pied de page. Le pied de page vous permet de toujours avoir les informations suivantes à portée :
Nom du document, type de livrable et numéro de version.
Numéro de page.
Etiquettes confidentielles : pour certaines entreprises, il est obligatoire de mentionner « privé » ou « confidentiel ».
Conclusions
Evidemment, tous ces éléments nécessitent un fort investissement de temps, et les budgets et/ou deadlines de certains projets ne vous permettront pas d’aller autant en profondeur.
Le but de cet article est de vous fournir l’intégralité des informations à ne pas oublier, à vous de faire en fonction des contraintes du projet concerné.
Ces termes, simples pour les professionnels qui les utilisent tous les jours, ne sont pas forcément clairs pour tout le monde !
Quelles sont les différences entre le design thinking, le lean startup et le mode agile ? Quels sont les objectifs de ces différentes méthodologies ? Peut-on les combiner ?
Avant de faire un tour d’horizon, définissons tout d’abord ces 3 notions :
Design thinking : C’est la somme de stratégies créatives utilisées par les designers pour identifier des solutions de design à des problématiques business. Il est pertinent en amont des projets, comme un générateurs d’idées collaboratives.
Lean UX : Il est utilisé pour transformer des idées en business models. Ces business models seront rapidement testés et confrontés au marché pour se rapprocher du célèbre «market / product fit»Le lean UX permet de concrétiser, d’explorer les différentes pistes d’idées et d’intégrer des feedbacks utilisateurs.
Agile : C’est une méthode de travail caractérisée par des livraisons fréquentes et incrémentales d’un produit, tout en s’adaptant selon les résultats constatés. C’est une méthode de développement rapide permettant d’affiner un produit en le confrontant à ses utilisateurs.
Ces définitions peut être confuses pour le novice, c’est pour cela que nous allons expliciter ces méthodes de manière plus pragmatique.
Voici tout d’abord un schéma synthétique représentant ces 3 méthodes regroupées et fonctionnant ensemble :
Source: Gartner
Même si chaque entreprise va utiliser ces méthodes de manière différente selon leurs processus, leurs équipes, mais aussi leurs besoins, ce schéma représente bien la boucle « idéale » de co-création d’un projet, en partant d’un besoin (ou d’un « pain point ») et en aboutissant sur un produit qui génère du chiffre d’affaires.
Allons maintenant plus dans le détail de chaque méthodologie et comment elle peut vous être utile.
1- Le Design Thinking
Le mot « design » est souvent utilisé pour décrire un objet, ou un produit fini. C’est pourtant plutôt un processus, un action, un verbe plutôt qu’un nom. Un protocole pour résoudre des problèmes et découvrir de nouvelles opportunités. Selon les industries, les techniques et outils diffèrent, mais le coeur du processus reste le même.
Le Design thinking permet de concrétiser ce processus de co-création : il regroupe des collaborateurs pour mutuellement s’inspirer, définir des problèmes, générer des solutions, prototyper, et tester.
1.1 – Définir le problème
L’étape de définition du problème est cruciale. Elle consiste à déterminer l’équipe qui fera partie du processus de design thinking et le problème qu’elle doit résoudre.
Il faudra toujours prévoir quelques ateliers de travail pour que les équipes s’immergent dans le projet, de trouver des consensus et des idées de solution pour résoudre le problème posé. Le problème pourra être de n’importe quelle nature, il doit juste pouvoir être résolu avec un produit digital (application, site web, SaaS…).
L’idée globale est de transformer les contraintes en opportunités.
La méthode des 3 « pourquoi ? » permet souvent d’aller en profondeur lorsque l’on émet des pistes de solution. Il est primordial d’être précis dans la solution imaginée, « designer une chaise », n’est pas une solution, « créer un moyen de suspendre une personne » l’est.
1.2 – Maquetter / Prototyper
Une fois les ateliers de définition du problème réalisés, il est important de concevoir (ou prototyper) les solutions imaginées.
Des ateliers de co-conception permettent de confronter ses idées à celles des autres et à obtenir un feedback instantané.
Le secret du succès de d’itérer pour abandonner les mauvaises solutions et se concentrer sur les bonnes solutions.
1.3 – Tester & créer
Ensuite, il est important d’obtenir rapidement un feedback pour itérer. Une fois le produit déterminé, prototypé, et testé, il faut passer à l’étape de développement pour apporter le produit sur le marché.
Il va être crucial de définir une feuille de route et de construire un véritable produit, c’est là où le Lean intervient.
2- Lean Startup / Lean UX
Le lean startup est une méthodologie née dans la Silicon Valley, qui a ses racines dans le système de production de Toyota (observe, oriente, décide, agis; qui est tout aussi fondamental dans le Agile).
Le but est de trouver quoi construire puis comment le construire efficacement.
Le lean startup est utilisé pour expérimenter rapidement la solution à un problème, des canaux de distribution, des canaux marketing, des modèles de revenus, des structures de coûts…
Le lean startup appliqué à un produit est le lean UX. Il nécessite de la part de l’UX une forte collaboration avec les équipes, contrairement à l’approche traditionnelle de l’UX Design. L’objectif principal est de se concentrer sur le feedback utilisateur pour prendre des décisions rapides.
Une fois le produit sur lequel votre équipe va travailler déterminé, il va falloir le tester, le développer et itérer pour aboutir à un vrai produit que l’on peut commercialiser sur un marché donné.
En partant d’un problème, l’équipe Lean UX va brainstormer pour générer des suppositions, des pistes de solution à ces problèmes.
Ce processus permet de générer des questions :
Qui sont vos utilisateurs ?
A quelles fins le produit est-il utilisé ?
Quand est-il utilisé ? Dans quelles situations ?
Quelle est la fonctionnalité la plus importante ?
Chaque réponse sera considérée comme une supposition, qui va amener à des idées d’améliorations, de fonctionnalités, de produits permettant de créer un Minimum Viable Product (MVP).
Une fois ces nouvelles idées validées comme pertinentes, il faut les tester.
La recherche utilisateur et le testing dans un environnement Lean UX sont basés sur les mêmes principes que dans un univers UX plus classique. Cependant, l’approche à tendance à être plus « quick and dirty », le but va être de valider un concept rapidement, avant de passer beaucoup de temps en développement & graphisme. Le focus va être sur la collecte de données et de retours utilisateurs plutôt que dans le déploiement de livrables fortement documentés et précis.
Les équipes d’UX et de développement vont travailler quotidiennement ensemble pour avancer sur les livraisons et tester, le processus est très collaboratif.
Cela vous permet d’affiner votre MVP pour qu’il se rapproche de plus en plus d’un produit à part entière.
3- Agile
Une fois que vous avez une idée précise du produit que vous apportez au marché et de votre business model, vous pouvez commencer à délivrer des fonctionnalités pour les proposer à des utilisateurs.
Un développement Agile se concentre sur les fonctionnalités à forte valeur ajoutée en premier. De plus, le fonctionnement agile est divisé en « sprint » (par exemple de 4 semaines) qui permettent de délivrer régulièrement des fonctionnalités et ainsi faire évoluer son produit avec ses clients et son marché.
Il repose sur un cycle de développement itératif, incrémental, adaptatif et doit respecter quatre valeurs fondamentales déclinées en douze principes desquels découlent une base de pratiques, soit communes, soit complémentaires.
« Focus on outcomes, not on inputs. »
Les méthodes agiles prônent 4 valeurs fondamentales :
Individus et interactions plutôt que processus et outils
Fonctionnalités opérationnelles plutôt que documentation exhaustive
Collaboration avec le client plutôt que contractualisation des relations
Acceptation du changement plutôt que conformité aux plans
Les 12 principes AGILE :
Satisfaire le client en priorité
Accueillir favorablement les demandes de changement
Livrer le plus souvent possible des versions opérationnelles de l’application
Assurer une coopération permanente entre le client et l’équipe projet
Construire des projets autour d’individus motivés
Privilégier la conversation en face à face
Mesurer l’avancement du projet en termes de fonctionnalités de l’application
Faire avancer le projet à un rythme soutenable et constant
Porter une attention continue à l’excellence technique et à la conception
Faire simple
Responsabiliser les équipes
Ajuster à intervalles réguliers son comportement et ses processus pour être plus efficace
Vous l’aurez compris, chaque entreprise devra adapter les principes AGILE à ses ressources et ses possibilités, avec pour objectif la flexibilité, la productivité, et le lien constant avec l’utilisateur.
4 – Conclusion
Pour simplifier, le Design Thinking nous aide à avoir de meilleures idées, le lean UX nous aide à transformer ces idées en business models et l’Agile nous aide à livrer le produit rapidement et de manière incrémentale, avec un feedback utilisateur constant.
En combinant les 3 approches, vous ne devriez pas seulement avoir de meilleures idées, mais aussi des produits viables, en lien direct avec les besoins des utilisateurs d’un marché donné, respectant les coûts et plannings, mais aussi donner à vos employés l’opportunité de réaliser un travail plus épanouissant.
Ces outils n’aident pas uniquement votre entreprise à créer de meilleurs produits, ils permettent à chacun de délivrer son potentiel pour créer plus d’impact dans son travail. Ces approches collaboratives peuvent s’expérimenter plus loin que pour un produit, mais sur tous les processus de l’entreprise.
N’hésitez pas à découvrir tous les articles de notre blog ou à nous contacter pour plus d’informations 🙂
Exemple de plan de taggage – source – Mixpanel
3. Comment choisir ses KPIs (Key Performance Indicators) ?
Une fois cette notion assimilée, il faut savoir que les indicateurs sont classés selon leur importance en 3 familles.
Les indicateurs sont appelés KPIs et leur importance varie : en effet, le chiffre d’affaires du site est un KPI très important, alors que le nombre de clics sur un menu est un KPI moins important pour le site. Les 3 degrés d’importance sont les suivants :
Les KPI stratégiques : Ils remontent à la direction générale et sont les indicateurs clés des résultats du site. Ils pourront être :
Source : Klipfolio
N’hésitez pas à consulter les autres articles de notre blog ou de nous contacter ! 🙂 
