Modèle de flux d'écran
Miro
À propos du modèle de flux d'écran
Les flux d'écran (également connus sous le nom de « wireflows ») sont une combinaison de wireframes et de 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 influence leur processus de 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 fluide et sans frustration du début à la fin.
Si vous êtes intéressé(e) à développer davantage votre travail et à vous plonger dans le domaine du design UX, où vous pouvez présenter le parcours utilisateur sous la forme d'un diagramme de flux avec des textes et des symboles plutôt que des écrans, vous pourriez être intéressé(e) 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) rassemble une disposition multi-écran, 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, à eux seuls, manquent de contexte pour montrer à quoi pourrait ressembler un flux utilisateur interactif, page par page. Les flux UX, à eux seuls, sont plus abstraits et ne peuvent pas montrer ce que votre client voit réellement.
Les wireflows, ou flux d'écran, combinent les forces des deux méthodes et vous aident à démontrer comment ce que l'utilisateur voit a un impact significatif sur la manière dont il ressent votre produit ou service.
Quand utiliser les flux d'écran
Les wireframes aident les équipes UX et produit à conceptualiser un parcours client comme un flux complet plutôt qu'un ensemble d'écrans. Le flux d'écran ou flux de maquettes se concentre sur les écrans eux-mêmes et l'interaction du client avec votre service ou produit.
Un designer peut modéliser un flux d'écran quand il a besoin de …
Assurez-vous qu'il ne manque aucun scénario : avec un parcours de bout en bout cartographié, vous pouvez envisager tous les cas d’utilisation potentiels qui correspondent aux besoins du client.
Améliorer les interactions utilisateur : apprenez à connaître votre client à travers chaque opportunité dans le flux, comme les inscriptions, les confirmations, ou les popups.
Créer une meilleure communication interfonctionnelle : rassemblez les designers et les développeurs, en les encourageant à penser à l'ensemble de l'expérience plutôt qu'à des écrans séparés.
Impliquer les parties prenantes dans une formation : si les clients ou les équipes n’ont jamais réfléchi à ce que voit le client lorsqu'il navigue dans votre produit ou expérience, suivre un flux aide à développer de l’empathie pour les points de douleur des clients.
Créez votre propre flux d'écran
Créer votre flux d'écran est facile. La plateforme de collaboration virtuelle de Miro offre le canevas parfait pour les créer et les partager. Commencez par sélectionner le modèle de flux d'écran, puis suivez les étapes ci-dessous pour en créer un vous-même.
1. Définir votre user story
Avant de commencer à cartographier une séquence visuelle, décrivez les besoins et les points de douleur de vos utilisateurs à résoudre. Ceci est votre base pour établir un point de départ pour votre flux d'écran.
2. Décidez de ce que vos écrans clés afficheront
Réfléchissez à vos points de départ et d'arrivée dans le parcours. Avez-vous besoin d'une page de destination ? Écran de formulaire d'inscription ? Page de confirmation ? Identifiez les changements ou les étapes supplémentaires au processus, comme des pages à diviser ou des écrans à ajouter. Miro est le créateur de wireframes parfait avec une bibliothèque de wireframes qui contient plus de 15 composants d'interface que vous pouvez facilement ajouter à votre flux d'écran.
3. Connecter les écrans
Ajoutez et déplacez des flèches entre chaque écran pour faire progresser l'utilisateur dans la tâche, en utilisant l'outil de 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'écran avec votre équipe ou les parties prenantes pour obtenir des retours
Vous pouvez utiliser la fonctionnalité Mention de Miro pour étiqueter votre équipe ou des personnes individuelles pour des tours de retours rapides, des critiques de design ou des révisions avant des sessions de travail en direct avec des clients. Vous pouvez également partager votre tableau Miro avec n'importe qui (même s'ils ne sont pas encore inscrits !) en cliquant sur le bouton Inviter des membres.
Découvrez d'autres exemples de flux utilisateur pour vous aider à créer votre prochaine innovation majeure.
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 Wireframes basse fidélité
0likes
56utilisations

Modèle de Wireframes 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 wireframes basse fidélité vous permettent de les visualiser et de les réaliser. Ces mises en page sommaires (pensez à 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 les wireframes lors de réunions ou d'ateliers, de présentations et de séances de critiques.
Modèle de Wireframe d'application
0likes
41utilisations

Modèle de Wireframe d'application
Prêt à commencer la création d'une application ? Ne vous contentez pas d'imaginer son fonctionnement et l'interaction des utilisateurs avec elle : laissez un wireframe vous le montrer. Le wireframing est une technique de création d'un schéma de base pour chaque écran. En réalisant un wireframe idéalement dès le début du processus, vous comprendrez ce que chaque écran doit accomplir 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. De plus, en pensant en termes de parcours utilisateur, vous offrirez une expérience plus captivante et réussie.
Modèle de croquis en ligne
0likes
50utilisations

Modèle de croquis en ligne
Avant de vous lancer à fond dans une idée prometteuse, examinez-la dans son ensemble pour comprendre son fonctionnement et sa capacité à atteindre vos objectifs. C'est précisément ce que font les croquis. Ce modèle vous offre un puissant outil de collaboration à distance pour les premières étapes de la création de prototypes, que ce soit pour esquisser des pages web et des applications mobiles, concevoir des logos ou planifier des événements. Vous pouvez ensuite facilement partager votre croquis avec votre équipe, et sauvegarder chaque étape de votre esquisse avant de la modifier et la développer.
Modèle de wireframe de site web
0likes
54utilisations

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 mise en page stylisée d'une page web qui présente les éléments de l’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 ou de ressources. Ils aident à s'assurer que la structure et le flux de votre site web répondront aux besoins et attentes des utilisateurs.
Modèle de Wireframes basse fidélité
0likes
56utilisations

Modèle de Wireframes 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 wireframes basse fidélité vous permettent de les visualiser et de les réaliser. Ces mises en page sommaires (pensez à 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 les wireframes lors de réunions ou d'ateliers, de présentations et de séances de critiques.
Modèle de Wireframe d'application
0likes
41utilisations

Modèle de Wireframe d'application
Prêt à commencer la création d'une application ? Ne vous contentez pas d'imaginer son fonctionnement et l'interaction des utilisateurs avec elle : laissez un wireframe vous le montrer. Le wireframing est une technique de création d'un schéma de base pour chaque écran. En réalisant un wireframe idéalement dès le début du processus, vous comprendrez ce que chaque écran doit accomplir 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. De plus, en pensant en termes de parcours utilisateur, vous offrirez une expérience plus captivante et réussie.
Modèle de croquis en ligne
0likes
50utilisations

Modèle de croquis en ligne
Avant de vous lancer à fond dans une idée prometteuse, examinez-la dans son ensemble pour comprendre son fonctionnement et sa capacité à atteindre vos objectifs. C'est précisément ce que font les croquis. Ce modèle vous offre un puissant outil de collaboration à distance pour les premières étapes de la création de prototypes, que ce soit pour esquisser des pages web et des applications mobiles, concevoir des logos ou planifier des événements. Vous pouvez ensuite facilement partager votre croquis avec votre équipe, et sauvegarder chaque étape de votre esquisse avant de la modifier et la développer.
Modèle de wireframe de site web
0likes
54utilisations

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 mise en page stylisée d'une page web qui présente les éléments de l’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 ou de ressources. Ils aident à s'assurer que la structure et le flux de votre site web répondront aux besoins et attentes des utilisateurs.