Diagrammes user flow et wireframes de site, en SVG gratuits
User flows et wireframes
Exemples de diagrammes user flow + kit de wireframes de site (SVG gratuit) | We.Inc
Ce qu'est un user flow, huit parcours prêts à l'emploi pour l'inscription, le paiement, la réservation et plus, et des wireframes simples pour une page d'accueil, de tarifs et de contact. Téléchargez chacun en SVG à ouvrir dans Figma.
Un user flow est le chemin qu'une personne suit sur votre site pour accomplir une tâche, dessiné sous forme d'écrans, d'actions et de décisions reliés par des flèches. Un wireframe est une esquisse simple de la mise en page d'un écran. Cartographiez d'abord le parcours, puis faites le wireframe de chaque écran qui le compose. Vous trouverez ci-dessous huit parcours courants et trois wireframes à télécharger en SVG.
Formes utilisées dans les parcours
Forme
Signification
Pilule arrondie (bleue)
Point de départ du parcours
Boîte carrée
Une page ou un écran
Boîte grise
Une action de la personne, comme remplir un formulaire
Losange
Une décision ou une vérification qui peut échouer
Pilule arrondie (verte)
L'objectif est atteint
Chaque parcours se limite à un objectif et au plus petit nombre d'étapes pour l'atteindre, avec l'échec le plus fréquent dessiné en boucle pointillée. Servez-vous-en comme point de départ pour votre propre site, puis faites le wireframe des écrans qu'ils traversent.
Écrivez l'objectif en une ligne, par exemple : un nouveau visiteur réserve un premier rendez-vous.
Listez chaque écran et chaque action du point d'entrée jusqu'à l'objectif. N'oubliez pas les étapes ennuyeuses comme la confirmation d'un e-mail.
Marquez chaque endroit où quelque chose peut mal tourner, comme une carte refusée ou un créneau déjà pris, et décidez où la personne va ensuite.
Comptez les étapes et supprimez celles qui n'aident pas la personne à atteindre l'objectif.
Faites le wireframe de chaque écran du parcours, en décidant de l'emplacement de chaque élément avant de choisir couleurs ou polices.
Partez de l'endroit où les gens arrivent vraiment. Beaucoup de visiteurs atterrissent sur une page produit ou un article de blog depuis la recherche, pas sur votre page d'accueil.
Gardez volontairement les wireframes en gris. La couleur et les vraies images suscitent des retours sur le style alors que vous voulez des retours sur la structure.
Chaque losange de décision a besoin d'un chemin de retour. Un paiement échoué qui mène à une impasse fait perdre la vente.
Testez un parcours avec cinq personnes avant de le construire. Observer où elles hésitent révèle la plupart des problèmes.
Questions fréquentes
Quelle différence entre un user flow et un parcours utilisateur ?
Un user flow cartographie les écrans et les étapes d'une tâche sur votre site. Un parcours utilisateur est plus large : il couvre ce que la personne pense, ressent et fait avant, pendant et après l'utilisation de votre produit, souvent sur plusieurs canaux. Les flows servent à concevoir des écrans ; les parcours servent à comprendre les gens.
Comment ouvrir ces SVG dans Figma ?
Téléchargez le fichier et glissez-le sur un canevas Figma, ou ouvrez-le dans un navigateur, copiez et collez. Figma transforme les formes et le texte en calques modifiables que vous pouvez restyler et compléter.
Quel niveau de détail pour un wireframe ?
Assez pour montrer ce qui figure à l'écran et dans quel ordre : navigation, titres, images, formulaires et boutons. Laissez de côté le texte exact, les couleurs et les polices. Si les gens commencent à discuter de la nuance de bleu, c'est trop détaillé.
Faut-il un logiciel spécial pour les user flows ?
Non. Un papier et un stylo suffisent pour un premier jet. Les outils de diagrammes aident quand vous voulez partager, modifier ou conserver les parcours à côté des maquettes, et de simples fichiers SVG comme ceux-ci fonctionnent dans la plupart d'entre eux.
Pourquoi cartographier le parcours avant les pages
Les pages conçues une par une ont tendance à fonctionner seules et à échouer ensemble. La page de tarifs est superbe mais n'a pas d'étape suivante claire ; le formulaire d'inscription demande des informations que le paiement redemande. Dessiner d'abord le parcours montre chaque passage d'un écran à l'autre, c'est là que la plupart des gens abandonnent.
Un parcours rend aussi visible le coût de chaque étape supplémentaire. Quand une réservation prend neuf cases sur papier, on voit tout de suite lesquelles peuvent fusionner.
Du wireframe à la vraie page
Une fois l'ordre du contenu validé, le wireframe devient le brief du vrai design. Chaque bloc gris devient une section avec son titre et son texte, et les libellés dans les coins deviennent les noms de sections que vous utilisez avec votre équipe ou votre créateur de sites.
Inscription
Un visiteur crée un compte et arrive sur son premier écran utile.
Le visiteur arrive sur la page d'accueil
Clique sur Commencer gratuitement
Formulaire d'inscription : e-mail et mot de passe
E-mail déjà utilisé ?
Oui : se connecter
Lien de confirmation de l'e-mail
Écran de bienvenue avec une première tâche
Paiement
Un client paie le contenu de son panier.
Panier
Commande : coordonnées et livraison
Choix du mode de livraison
Informations de paiement
Paiement accepté ?
Non : réessayer
Confirmation de commande et e-mail
Réservation
Un nouveau client réserve un premier rendez-vous.
Page du service
Choix d'un service et d'un intervenant
Calendrier des créneaux libres
Créneau toujours libre ?
Non : choisir à nouveau
Formulaire de coordonnées
Réservation confirmée, ajoutée à l'agenda
Réinitialisation du mot de passe
Un membre qui a oublié son mot de passe retrouve l'accès.
Page de connexion
Clique sur Mot de passe oublié
Saisit son e-mail
Ouvre le lien de réinitialisation reçu par e-mail
Lien encore valide ?
Non : renvoyer
Définit un nouveau mot de passe
Connecté
Demande de contact
Un prospect envoie une question et sait quand attendre une réponse.
N'importe quelle page
Page de contact
Remplit nom, e-mail, message
Champs valides ?
Non : afficher les erreurs
Message de remerciement avec délai de réponse
Inscription à la newsletter
Un lecteur s'abonne et confirme.
Article de blog
Encart d'inscription en fin d'article
Page Consultez votre boîte de réception
Clique sur le lien de confirmation
E-mail de bienvenue et page d'archives
De la recherche au produit
Un client trouve un produit grâce au champ de recherche.
N'importe quelle page
Tape dans la recherche
Page de résultats avec filtres
Résultats trouvés ?
Non : suggestions
Page produit
Ajouté au panier
Demande de devis
Un client local demande un prix pour un chantier.
Page de la zone d'intervention
Bouton Demander un devis
Formulaire court : type de travaux, code postal, photos
Dans la zone d'intervention ?
Non : proposer un partenaire
Confirmation avec horaire de rappel
Page d'accueil
Dire ce que vous faites, le prouver et indiquer une seule étape suivante.
Navigation
Hero : titre, accroche, bouton principal
Logos ou preuves
Trois avantages
Comment ça marche
Témoignages
Appel à l'action final
Pied de page
Page de tarifs
Permettre de comparer les formules et d'en choisir une sans vous contacter.
Navigation
Titre et bascule mensuel ou annuel
Cartes des formules
Tableau comparatif des fonctionnalités
FAQ sur les tarifs
Pied de page
Page de contact
Faciliter la prise de contact et indiquer clairement quand vous répondrez.
Navigation
Titre et délai de réponse
Formulaire de contact
Carte ou photo
Adresse, téléphone, horaires
Pied de page
Huit exemples de user flows
Chaque parcours se limite à un objectif. La ligne orange pointillée représente la façon la plus fréquente dont une étape échoue et où la personne va ensuite.
Kit de wireframes
Trois wireframes peu détaillés pour les pages dont la plupart des sites ont besoin. Les libellés de chaque bloc nomment la section.