À propos du modèle de flux écran
Les flux d'écran (également appelés « wireflows ») sont une combinaison de wireframes et la création d'un diagramme de flux. Le flux de bout en bout cartographie ce que les utilisateurs voient sur chaque écran et comment cela impacte leur prise de décision à travers votre produit ou service. Avec ces informations en main, vous pouvez mieux expliquer les décisions que vous avez prises concernant votre conception d'interaction.
Utilisez le modèle de flux d'écran pour identifier de nouvelles opportunités visant à rendre l'expérience utilisateur sans friction et sans frustration, du début à la fin.
Si vous souhaitez approfondir votre travail et entrer dans le domaine de la conception UX, où vous pouvez présenter le parcours utilisateur sous forme de diagramme de flux avec des textes et des symboles plutôt qu'avec des écrans, vous pourriez être intéressé par le modèle de flux utilisateur.
Continuez à lire pour en savoir plus sur les flux d'écran.
Qu'est-ce qu'un flux d'écran ?
Un flux d'écran (ou wireflow) réunit une disposition multi-écrans, connectée comme un diagramme de flux pour cartographier les points de décision et les mouvements d'un client du début à la fin.
Les wireframes seuls manquent de contexte pour montrer à quoi pourrait ressembler un flux utilisateur interactif, page par page. Les flux UX seuls sont plus abstraits et ne peuvent pas montrer ce que votre client regarde réellement.
Les wireflows, ou flux d'écran, combinent les atouts des deux méthodes et vous aident à démontrer comment ce que l'utilisateur voit a un impact majeur sur la manière dont il perçoit votre produit ou service.
Quand utiliser les flux d'écran
Les wireframes aident les équipes UX et produit à envisager le parcours client comme un flux complet plutôt qu'un ensemble d'écrans. Le wireflow ou flux d'écran se concentre sur les écrans eux-mêmes et sur l'interaction du client avec votre service ou produit.
Un designer peut définir un flux d'écran lorsque cela est nécessaire pour...
S’assurer qu’aucun scénario ne manque : avec un parcours de bout en bout cartographié, vous pouvez prendre en considération tous les cas d’utilisation potentiels qui répondent aux besoins du client.
Améliorer les interactions utilisateur : apprenez à connaître votre client à travers chaque opportunité du flux, comme les inscriptions, les confirmations ou les pop-ups.
Favoriser une meilleure communication interfonctionnelle : rassemblez les designers et les développeurs, en les encourageant à réfléchir à l’ensemble de l’expérience plutôt qu’à des écrans séparés.
S’engager dans la formation des parties prenantes : si les clients ou les équipes n’ont jamais envisagé ce que voit l’utilisateur lorsqu’il navigue à travers votre produit ou expérience, suivre un flux contribue à développer l’empathie pour les points de douleur des clients.
Créer votre propre flux d’écrans
Créer votre flux d'écran est facile. La plateforme de collaboration virtuelle de Miro offre le canevas idéal pour les créer et les partager. Commencez par sélectionner le modèle de flux d'écran, puis suivez les étapes suivantes pour en créer un vous-même.
1. Définissez votre user story
Avant de commencer à cartographier une séquence visuelle, décrivez les besoins et les points sensibles de votre utilisateur à résoudre. Cela constitue votre base pour établir un point de départ pour votre flux d'écran.
2. Décidez des contenus clés de vos écrans
Réfléchissez à votre point de départ et à votre point d'arrivée dans le parcours. Avez-vous besoin d'une page d'accueil? D'un écran de formulaire d'inscription? D'une page de confirmation? Identifiez les modifications ou les étapes supplémentaires du processus, comme les pages qui doivent être divisées ou les écrans qui doivent être ajoutés. Miro est le parfait outil de création de wireframes avec une bibliothèque de wireframes comprenant plus de 15 composants d'interface utilisateur que vous pouvez facilement ajouter à votre flux d'écrans.
3. Connectez les écrans
Ajoutez et déplacez des flèches entre chaque écran pour faire avancer l'utilisateur dans la tâche, en utilisant l'outil Ligne de connexion de Miro. Vous pouvez également inclure des points de décision et montrer ce qui se passe dans chaque instance disponible pour l'utilisateur.
4. Partagez votre flux d'écrans avec votre équipe ou les parties prenantes pour avis
Vous pouvez utiliser la fonctionnalité de Mention de Miro pour étiqueter votre équipe ou des personnes individuelles pour des retours rapides, critiques de design ou évaluations avant des sessions ateliers en direct avec des clients. Vous pouvez également partager votre Tableau Miro avec n’importe qui (même s’ils ne sont pas déjà inscrits !) en cliquant sur le bouton Inviter des membres.
Découvrez plus d’exemples de flux utilisateur pour vous aider à construire votre prochaine grande réalisation.
FAQ concernant le Modèle de Flux d'Écran
Qu’est-ce que le flux d’écran en UX ?
Un flux d'écrans vous aide à analyser les interactions de vos utilisateurs, en se concentrant principalement sur les écrans de votre produit. Il combine le meilleur des wireframes et des diagrammes de flux, vous offrant une vue d'ensemble plus détaillée du parcours client et, par conséquent, plus de données pour construire une meilleure expérience utilisateur.
Miro
The Visual Workspace for Innovation
Miro donne les moyens à 80M de personnes de forger l’avenir en proposant un espace de création collaboratif, accessible partout.
Catégories
Modèles similaires
Modèle de wireframe basse fidélité
Modèle de wireframe basse fidélité
Lorsque vous concevez un site ou développez une application, les premières étapes doivent être GRANDES — voir la vue d'ensemble et communiquer la grande idée. Les maquettes filaires basse fidélité vous permettent de le voir et de le faire. Ces brouillons (considérez-les comme la version numérique d'un croquis sur une serviette) aident vos équipes et les parties prenantes du projet à déterminer rapidement si une réunion de conception répond aux besoins de vos utilisateurs. Notre modèle vous permet d'utiliser facilement des maquettes lors de réunions ou d'ateliers, de présentations et de séances de critique.
Modèle de Wireframe d'application
Modèle de Wireframe d'application
Prêt à commencer à créer une application ? Ne vous contentez pas d'imaginer comment elle fonctionnera et comment les utilisateurs interagiront avec elle : laissez un wireframe vous le montrer. La création de wireframes est une technique pour concevoir une mise en page basique de chaque écran. Idéalement, en réalisant un wireframe dès le début du processus, vous comprendrez ce que chaque écran accomplira et obtiendrez l'adhésion des parties prenantes importantes, le tout avant d'ajouter le design et le contenu, ce qui vous fera gagner du temps et de l'argent. En pensant en termes de parcours utilisateur, vous offrirez une expérience plus engageante et réussie.
Modèle de croquis en ligne
Modèle de croquis en ligne
Avant de vous lancer à fond dans une idée prometteuse, prenez du recul pour comprendre comment elle fonctionne et dans quelle mesure elle répond à vos objectifs. C'est ce que permettent les esquisses. Ce modèle vous offre un puissant outil de collaboration à distance pour les premières étapes du prototypage, que vous croquiez des pages web et des applications mobiles, que vous conceviez des logos ou que vous planifiiez des événements. Vous pouvez ensuite facilement partager votre esquisse avec votre équipe et enregistrer chaque étape avant de la modifier et de la développer.
Modèle de Wireframe de Site Web
Modèle de Wireframe de Site Web
Le wireframing est une méthode pour concevoir un site web au niveau structurel. Un wireframe est une disposition stylisée d'une page web montrant les éléments d'interface sur chaque page. Utilisez ce modèle de Wireframe pour itérer rapidement et à moindre coût sur les pages web. Vous pouvez partager le wireframe avec les clients ou les membres de l’équipe et collaborer avec les parties prenantes. Les wireframes permettent aux équipes d’obtenir l’adhésion des parties prenantes sans investir trop de temps ni de ressources. Ils aident à s'assurer que la structure et le flux de votre site répondront aux besoins et attentes des utilisateurs.
Modèle de wireframe basse fidélité
Modèle de wireframe basse fidélité
Lorsque vous concevez un site ou développez une application, les premières étapes doivent être GRANDES — voir la vue d'ensemble et communiquer la grande idée. Les maquettes filaires basse fidélité vous permettent de le voir et de le faire. Ces brouillons (considérez-les comme la version numérique d'un croquis sur une serviette) aident vos équipes et les parties prenantes du projet à déterminer rapidement si une réunion de conception répond aux besoins de vos utilisateurs. Notre modèle vous permet d'utiliser facilement des maquettes lors de réunions ou d'ateliers, de présentations et de séances de critique.
Modèle de Wireframe d'application
Modèle de Wireframe d'application
Prêt à commencer à créer une application ? Ne vous contentez pas d'imaginer comment elle fonctionnera et comment les utilisateurs interagiront avec elle : laissez un wireframe vous le montrer. La création de wireframes est une technique pour concevoir une mise en page basique de chaque écran. Idéalement, en réalisant un wireframe dès le début du processus, vous comprendrez ce que chaque écran accomplira et obtiendrez l'adhésion des parties prenantes importantes, le tout avant d'ajouter le design et le contenu, ce qui vous fera gagner du temps et de l'argent. En pensant en termes de parcours utilisateur, vous offrirez une expérience plus engageante et réussie.
Modèle de croquis en ligne
Modèle de croquis en ligne
Avant de vous lancer à fond dans une idée prometteuse, prenez du recul pour comprendre comment elle fonctionne et dans quelle mesure elle répond à vos objectifs. C'est ce que permettent les esquisses. Ce modèle vous offre un puissant outil de collaboration à distance pour les premières étapes du prototypage, que vous croquiez des pages web et des applications mobiles, que vous conceviez des logos ou que vous planifiiez des événements. Vous pouvez ensuite facilement partager votre esquisse avec votre équipe et enregistrer chaque étape avant de la modifier et de la développer.
Modèle de Wireframe de Site Web
Modèle de Wireframe de Site Web
Le wireframing est une méthode pour concevoir un site web au niveau structurel. Un wireframe est une disposition stylisée d'une page web montrant les éléments d'interface sur chaque page. Utilisez ce modèle de Wireframe pour itérer rapidement et à moindre coût sur les pages web. Vous pouvez partager le wireframe avec les clients ou les membres de l’équipe et collaborer avec les parties prenantes. Les wireframes permettent aux équipes d’obtenir l’adhésion des parties prenantes sans investir trop de temps ni de ressources. Ils aident à s'assurer que la structure et le flux de votre site répondront aux besoins et attentes des utilisateurs.