Comment créer des flux d'utilisateurs pour le commerce électronique

Imaginez que vous construisez un nouveau site Web pour votre boutique en ligne. Vous entrez dans un constructeur de pages comme WordPress et commencez à ajouter des sections aux pages, en décidant que la barre de navigation doit être centrée ou que votre clip À propos doit venir en premier.

Ou peut-être avez-vous déjà un site Web et avez-vous décidé qu'il pourrait être plus beau, alors vous commencez à déplacer des images, du texte et des CTA.

Quoi qu'il en soit, des erreurs ont déjà été commises : dans les deux cas, il n'y a pas de stratégie ou de flux d'utilisateurs. Le design est choisi avec désinvolture, éclaboussé comme une authentique peinture de Jackson Pollock.

Et fan de Pollock ou non, ses peintures n'ont jamais eu à naviguer d'une étape de l'entonnoir à l'autre.

Dans la nouvelle ère des achats en ligne, avoir un site Web de commerce électronique est essentiel - une application, potentiellement bénéfique.

Mais avoir un beau site Web ne suffit pas, de la même manière qu'attirer des charges de trafic est un gaspillage à moins qu'il ne se convertisse (c'est-à-dire qu'il achète vos produits). Vous avez besoin d'un site Web conçu pour guider vos prospects sur le chemin de la conversion.

Un site Web bien conçu ne commence pas par le choix de votre police et de votre animation préférées. Cela commence par la cartographie de vos flux d'utilisateurs.

Qu'est-ce qu'un diagramme de flux utilisateur ?

Les diagrammes de flux d'utilisateurs - également appelés diagrammes de flux d'utilisateurs, diagrammes de flux de tâches et diagrammes de flux d'interface utilisateur - présentent le chemin qu'un utilisateur emprunte sur votre site Web ou votre application pour accomplir un objectif ou une tâche. En illustrant les étapes suivies par un utilisateur pour passer d'une page à l'autre jusqu'à ce qu'il termine sa tâche (comme l'achat d'un produit), vous comprenez comment encourager l'achèvement de la tâche.

Exemple de diagramme de flux utilisateur de UX Collective.

Le rôle des flux d'utilisateurs dans la conception UX

La conception de l'expérience utilisateur (conception UX) consiste à créer des conceptions centrées sur l'utilisateur. En plaçant vos utilisateurs, alias clients potentiels, au centre de vos choix de conception, vous améliorez leur expérience et augmentez leurs chances d'accéder à la fin de la vente.

Les flux d'utilisateurs révèlent comment les utilisateurs interagissent avec la conception de votre produit, en tenant compte des actions de l'utilisateur et des fonctionnalités du produit requises pour créer une conversion.

Créez un diagramme de flux d'utilisateurs avant de commencer le processus de conception pour informer les besoins de votre site Web. Les stratèges, les concepteurs et les développeurs Web utilisent les flux UX pour repérer les lacunes du produit et comprendre la portée d'un projet, y compris le nombre de pages, les composants pour chacun et l'architecture de l'information de tout cela.

Vous pouvez également créer des flux d'utilisateurs après le développement du site Web pour repérer les domaines à simplifier et à améliorer.

Exemple de diagramme de flux utilisateur de Creately.

Flux d'utilisateurs de haut niveau ou détaillés

Les flux d'utilisateurs de haut niveau sont rapides et brefs, créés pour fournir un aperçu rapide d'une idée ou d'un processus.

Les flux d'utilisateurs détaillés, ou flux de tâches, sont plus utiles, détaillant toutes les étapes et les décisions impliquées dans l'exécution d'une tâche. Vous souhaitez créer des diagrammes de flux détaillés pour éclairer la conception et le contenu de votre site Web de commerce électronique.

Certains différencient les flux d'utilisateurs des flux de tâches en ce que les flux d'utilisateurs soulignent qu'une tâche peut être accomplie différemment par les utilisateurs en fonction de la personnalité et du point d'entrée.

Flux d'utilisateurs vs parcours d'utilisateurs

Les flux d'utilisateurs sont différents des cartes de parcours utilisateur qui décrivent l'expérience de bout en bout d'un utilisateur avec un produit. Là où les flux sont purement basés sur l'action, les parcours des utilisateurs prennent en compte des facteurs tels que les émotions des utilisateurs.

Les cartes de parcours utilisateur et les cartes de parcours client sont parfois utilisées de manière interchangeable, mais cela ne fonctionne que lorsque l'utilisateur et le client sont la même personne, ce qui n'est pas toujours le cas. Par exemple, un employeur (le client) pourrait acheter un outil en ligne que ses employés (les utilisateurs) utiliseraient.

Comment créer des diagrammes de flux utilisateur

1. Décidez de l'objectif du diagramme

Le contenu de votre diagramme de flux utilisateur dépendra de votre objectif et de la tâche que vous suivez. Limitez le nombre d'objectifs ou de tâches par diagramme ; en tracer un seul à la fois est préférable. En regarder plus d'un peut compliquer et encombrer le diagramme, le rendant moins efficace.

Donnez au flux utilisateur un titre clair basé sur son objectif pour référence future.

2. Comprendre votre utilisateur type

Une compréhension de vos utilisateurs aidera à informer la navigation du flux de tâches qui fonctionne le mieux et le contenu à inclure sur chaque page.

Effectuez des recherches sur les utilisateurs pour recueillir :

• Buts
• Motivations
• Fonctionnalités souhaitées
• Niveau d'expérience/connaissance
• Barrières

Ces facteurs peuvent changer pour différents segments d'audience et étapes du parcours d'achat, mais vous les utiliserez pour déterminer ce qui se passe sur chaque page Web, comment concevoir chaque page et où créer un lien.

Les objectifs de l'utilisateur et de l'entreprise doivent s'aligner afin que vous puissiez concevoir des flux de site Web de commerce électronique qui répondent aux deux.

L'étude des flux de vos concurrents peut également fournir des informations.

3. Créer une clé de flux de tâches

Il n'y a pas de règles strictes pour ce à quoi votre diagramme de flux de tâches devrait ressembler tant que vous êtes cohérent et que vous fournissez une clé pour les couleurs et les formes utilisées afin que les autres puissent le comprendre.

Les symboles de flux utilisateur courants incluent :

D'autres formes parfois utilisées comprennent des triangles, des parallélogrammes inclinés et des formes en pointillés (au lieu de contours pleins). Vous pouvez être aussi précis que vous le souhaitez, en changeant de forme pour des éléments supplémentaires tels que des tâches système, des éléments d'entrée ou des sélections/clics.

Toutes les couleurs utilisées doivent contribuer à la signification et à la lisibilité de votre organigramme utilisateur. Considérez comment la couleur peut aider à regrouper des éléments, à identifier des éléments et à révéler des motifs.

Autres types d'organigrammes utilisateur

Étant donné que les diagrammes de flux d'utilisateurs sont uniques à votre site Web, tous ne suivent pas la pratique courante consistant à utiliser des formes et des couleurs.

Un autre style de flux d'utilisateurs est calqué sur les diagrammes d'état utilisés en informatique. Les diagrammes d'état varient en apparence, mais vous pouvez les écrire sous la forme d'une série de fractions avec des flèches guidant le flux de processus de commerce électronique. Les fractions incluent ce que l'utilisateur voit au-dessus de la ligne de fraction et ce que l'utilisateur fait en dessous, comme ceci :

Il existe également des flux d'utilisateurs modélisés d'après les plans de site. En plus des actions entreprises, ils présentent chaque page Web impliquée dans le flux d'utilisateurs avec une liste de toutes les sections et sous-sections de ces pages. Ensuite, des flèches ou des lignes indiquent les sections de page et les CTA qui conduisent les utilisateurs à l'étape suivante du flux.

Exemple de flux d'utilisateurs de Salinthip Kaewkerd sur Behance.

4. Décrivez votre diagramme de flux utilisateur

Une fois votre format décidé, vous pouvez commencer à cartographier vos flux de tâches. Commencez par le point d'entrée choisi pour votre diagramme particulier et répertoriez toutes les étapes entre le point d'entrée et l'achèvement de la tâche.

Les points d'entrée peuvent être n'importe quelle source qui mène un utilisateur à votre site Web, y compris les publicités, les médias sociaux, les résultats de recherche organiques, les liens externes, les campagnes par e-mail et plus encore. Les applications ont généralement moins de points d'entrée que les sites Web.

Les étapes qui suivent (le cœur du diagramme de flux de l'interface utilisateur) dépendent de la tâche que vous avez choisi de mapper. Ils peuvent inclure des éléments tels que les formulaires de connexion et d'inscription, la navigation dans les produits, les processus de paiement ou l'intégration. Tenez compte de la manière dont l'utilisateur accède à chaque page, de toutes les actions qu'il peut entreprendre et de l'endroit où il se rend à partir de cette page pour progresser vers son objectif.

La dernière étape de votre flux utilisateur ne doit pas être l'action de l'utilisateur qui termine la tâche, mais la fonctionnalité qui confirme l'achèvement pour l'utilisateur.

Si vous mettez à niveau un site Web de commerce électronique actuel, vous pouvez utiliser les rapports sur les flux de comportement de Google Analytics pour savoir d'où viennent vos utilisateurs, comment ils naviguent sur votre site Web et où ils en sortent.

Lorsque vous mappez votre flux d'utilisateurs, vous remarquerez qu'il existe plusieurs chemins qu'un utilisateur peut emprunter pour effectuer une tâche. Des branches ou des nœuds se détacheront à ces points pour continuer à cartographier les voies principales.

Lors de la création de diagrammes de flux, vous pouvez augmenter la lisibilité en limitant le nombre de directions dans lesquelles ils se déplacent. Si vous vous retrouvez avec des flèches pointant dans tous les sens, votre diagramme commence à ressembler davantage à un labyrinthe. De nombreux outils de flux d'utilisateurs sont disponibles pour créer des diagrammes fonctionnels.

5. Réduisez vos flux

Une fois que vous avez créé votre diagramme de flux d'utilisateurs, il est temps de sortir vos cisailles. Cette étape implique trois modifications importantes :

1. Suppression des informations non essentielles à la visualisation du flux
2. Déplacer des détails en dehors de la navigation utilisateur pure vers une carte de trajet
3. Identifier les étapes redondantes ou inutiles

Cette dernière étape est moins destinée à visualiser le flux de navigation et plus pour l'utilisateur dont vous améliorez l'expérience. Plus un utilisateur doit prendre de décisions et d'actions pour accomplir une tâche, moins il est susceptible de le faire. Simplifiez au maximum votre parcours utilisateur pour augmenter les chances de conversion.

6. Étiqueter avec intention

Étiquetez tous les éléments de votre diagramme de flux utilisateur avec clarté. Il doit être clair à quoi chaque forme, page, section ou action fait référence. Évitez d'utiliser des raccourcis s'ils nuisent au sens. Lorsque vous avez terminé, demandez à quelques collègues de revoir vos flux d'utilisateurs pour voir s'ils peuvent les interpréter.

Optimisez vos flux d'utilisateurs grâce aux données

Lors de la création d'un nouveau site Web ou du test de nouvelles conceptions ou de nouveaux contenus, envisagez d'examiner les flux d'utilisateurs réels et de les comparer à vos attentes telles qu'elles sont décrites dans votre diagramme de flux. En cas de divergences, vous pouvez les utiliser pour corriger votre organigramme ou modifier l'interface utilisateur elle-même afin de guider les utilisateurs comme vous l'aviez prévu. Plusieurs méthodes de recherche UX testent les flux d'utilisateurs, y compris les tests d'utilisabilité, l'analyse des tâches et les tests d'arborescence.

Vous pouvez également utiliser les données de Google Analytics ou de la recherche pour voir où vous pouvez optimiser votre flux d'utilisateurs pour augmenter les ventes. Lors de la création de sites Web de commerce électronique, les flux d'utilisateurs sont liés à l'entonnoir de vente du commerce électronique. Il est naturel pour les utilisateurs de descendre plus loin dans l'entonnoir (d'où la forme de l'entonnoir), mais des points de chute drastiques indiquent des domaines à améliorer.

Et souvent, les améliorations signifient optimiser votre flux d'utilisateurs, que ce soit en rendant la navigation plus naturelle, en modifiant le design ou en ajoutant une copie directionnelle.

Les baisses de flux peuvent également résulter de choix commerciaux : une augmentation des taux de rebond après que les acheteurs potentiels ont vu le coût de l'expédition indique que des tarifs d'expédition élevés sont probablement le problème.

Analysez les étapes entourant les taux de rebond et formulez des hypothèses sur le problème (et la solution). A/B testez vos solutions jusqu'à ce que les abandons diminuent et que davantage d'utilisateurs passent à l'étape suivante.

Différencier le flux de votre site Web de commerce électronique

Les organigrammes de commerce électronique ont tendance à suivre un schéma similaire : découvrez une page en externe, entrez dans la page, regardez les produits, ajoutez des produits au panier, passez à la caisse, recevez une confirmation.

Bien que ce soient toutes des étapes impliquées dans le commerce électronique par nature, il convient de prendre en compte votre proposition de valeur unique et votre public lors de la conception des flux d'utilisateurs.

Pouvez-vous offrir plus? Vos utilisateurs peuvent-ils bénéficier de fonctionnalités supplémentaires ?

Certaines boutiques de commerce électronique mélangent les parcours des utilisateurs et les flux de tâches en incluant des quiz de personnalisation ou des fonctionnalités d'essai. L'artiste virtuel de Sephora, par exemple, permet aux utilisateurs de simuler à quoi ressemblerait le maquillage avant d'acheter à domicile.

Un autre endroit pour se différencier dans le commerce électronique qui est souvent oublié lors de la conception des flux d'utilisateurs est le post-achat. La confirmation d'un achat client n'est jamais la fin du parcours client. Maintenant, ils doivent suivre leur colis, attendre avec impatience son arrivée, le déballer avec enthousiasme et éventuellement le retourner. Cela vaut la peine de réfléchir à la façon dont vous pourriez améliorer l'expérience utilisateur avec l'expédition, les pages de remerciement et la vente incitative.

Lorsque vous créez des flux pour des sites Web et des applications de commerce électronique, gardez à l'esprit toutes les étapes de l'entonnoir de commerce électronique :

• Considération
• Évaluation
• Acheter
• Après l'achat

Stimulez les ventes avec des flux UX efficaces

L'expérience utilisateur est plus qu'un joli design que les utilisateurs aiment regarder. Il s'agit de concevoir une architecture d'information et un contenu qui guident les prospects tout au long du parcours de commerce électronique vers la conversion.

Il s'agit de créer un site Web ou une application sur laquelle un utilisateur peut naviguer facilement, passer d'une étape à l'autre, trouver le produit qu'il recherche et cliquer sur le bon CTA le moment venu.

Bourrer trop de marches entre leur point d'entrée et le point de vente revient à leur demander de faire plus de travail ; trop peu de pas peuvent ne pas suffire à calmer leurs hésitations, ce qui revient à leur demander de prendre un plus grand risque. Personne n'aime le travail ou le risque lors de l'achat en ligne.

Cartographier un flux d'utilisateurs efficace pour chacune des tâches de votre site Web est un moyen efficace de repérer les points de friction des consommateurs, afin que vous puissiez concevoir un produit numérique qui offre une meilleure expérience utilisateur et, par conséquent, stimule les ventes.