Modèle de flux d'écran
Valider les composants visuels d'écran dans un flux utilisateur.
À 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 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 affecte leur processus de prise de décision à travers votre produit ou service. Avec cette information 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 saisir de nouvelles opportunités d'offrir une expérience utilisateur sans friction et sans frustration du début à la fin.
Si vous êtes intéressé par le développement de votre travail et que vous souhaitez entrer dans le domaine du design UX, où vous pouvez présenter le parcours utilisateur sous forme de diagramme de flux avec des textes et des symboles plutôt que des écrans, vous pourriez être intéressé par leModè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 mise en page multi-écrans, relié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 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 important sur son expérience de votre produit ou service.
Quand utiliser les flux d'écran
Les wireframes aident les équipes UX et produit à considérer le parcours client comme un flux complet plutôt que comme 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 concepteur peut modéliser un flux d'écran lorsqu'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 répondent aux besoins du client.
Améliorez les interactions utilisateur :apprenez à connaître votre client à travers chaque opportunité du flux, telles que les inscriptions, les confirmations ou les pop-ups.
Créer une meilleure communication interfonctionnelle :rassembler les designers et les développeurs, en les encourageant à réfléchir à l'expérience globale plutôt qu'à des écrans séparés.
Participer à l'éducation des parties prenantes :si les clients ou les équipes n'ont jamais considéré ce que le client voit lorsqu'il parcourt votre produit ou expérience, suivre un flux aide à développer l'empathie pour les points de douleur du client.
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 suivantes pour en réaliser un vous-même.
1. Définir votre user story
Avant de commencer à cartographier une séquence visuelle, décrivez les besoins de vos utilisateurs et les points de douleur à résoudre. Cela constitue votre fondation pour établir un point de départ pour votre flux d'écran.
2. Décidez ce que vos écrans principaux afficheront
Réfléchissez à vos points de départ et 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 changements ou les étapes supplémentaires à ajouter au processus, comme les pages à diviser ou les écrans à ajouter. Miro est le parfait...créateur de wireframesavec unbibliothèque de wireframesqui comprend plus de 15 composants d'interface utilisateur 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 avancer l'utilisateur dans la tâche, en utilisantoutil 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 d'information
Vous pouvez utiliserfonctionnalité de mention de Miropour taguer votre équipe ou des personnes individuelles pour des sessions rapides de feedback, des critiques de design ou des revues avant des ateliers en direct avec les 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 boutonbouton Inviter des membres.
Découvrir plusexemples de flux utilisateurpour vous aider à créer votre prochaine innovation majeure.
Qu'est-ce que le flux d'écran dans l'expérience utilisateur ?
Un flux d'écrans vous aide à analyser les interactions de vos utilisateurs, en vous concentrant principalement sur les écrans de votre produit. Il combine le meilleur de la création de wireframe et des diagrammes de flux, vous offrant une vue d'ensemble plus détaillée du flux de vos clients et, par conséquent, davantage de données pour créer une meilleure expérience utilisateur.
Commencer avec ce modèle maintenant.
Modèle de wireframes basse fidélité
Idéal pour:
Recherche documentaire, Gestion de produit, Wireframes
Lorsque vous concevez un site ou développez une application, les premières étapes doivent être GRANDES — avoir une vision d’ensemble et communiquer l'idée maîtresse. Les wireframes basse fidélité vous permettent de voir et de faire. Ces maquettes (pensez-y 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 des réunions ou ateliers, des présentations et des sessions de critique.
Modèle de Wireframe d’application
Idéal pour:
Conception UX, Wireframes
Prêt à commencer à créer une application ? Ne vous contentez pas d'imaginer son fonctionnement et comment les utilisateurs interagiront avec lui—laissez un wireframe vous le montrer. Le wireframing est une technique pour créer un agencement de base de chaque écran. Lorsque vous créez un wireframe, idéalement tôt dans le processus, vous comprendrez ce que chaque écran va réaliser et obtiendrez l'adhésion des parties prenantes importantes—tout cela avant d'ajouter le design et le contenu, ce qui vous fera gagner du temps et de l'argent. Et en réfléchissant aux choses en termes de parcours utilisateur, vous offrirez une expérience plus convaincante et réussie.
Modèle de croquis en ligne
Idéal pour:
Conception UX, Recherche de bureau, Design thinking
Avant de foncer tête baissée avec une idée prometteuse, examinez-la de manière globale — pour savoir comment elle fonctionne et dans quelle mesure elle atteint vos objectifs. C'est ce que font les esquisses. Ce modèle vous offre un puissant outil de collaboration à distance pour les étapes initiales des prototypes, que vous esquissiez des pages Web et des applications mobiles, conceviez des logos ou planifiiez des évènements. Ensuite, vous pouvez facilement partager votre croquis avec votre équipe et enregistrer chaque étape de votre croquis avant de le modifier et de le développer.
Modèle de wireframe de site Web
Idéal pour:
Wireframes, Expérience utilisateur
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 présentant les éléments d'interface de chaque page. Utilisez ce modèle de Wireframe pour itérer sur les pages Web rapidement et à moindre coût. 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 web répondront aux besoins et attentes des utilisateurs.