Plantilla de flujo de pantalla
Validar componentes visuales de pantalla en un flujo de usuarios.
Acerca de la plantilla de flujo de pantalla
Los flujos de pantalla (también conocidos como "wireflows") son una combinación de wireframes y la creación de un diagrama de flujo. El flujo de extremo a extremo traza lo que los usuarios ven en cada pantalla y cómo afecta su proceso de toma de decisiones a través de tu producto o servicio. Con esa información en mano, puedes explicar mejor las decisiones que has tomado con respecto a tu diseño de interacción.
Usa la plantilla de flujo de pantalla para encontrar nuevas oportunidades de hacer que la experiencia del usuario sea fluida y libre de frustraciones de principio a fin.
Si estás interesado en desarrollar tu trabajo más allá y adentrarte en el ámbito del diseño UX, donde puedes mostrar el recorrido del usuario como un diagrama de flujo con textos y símbolos en lugar de pantallas, quizás te interese elPlantilla de flujo del usuario.
Sigue leyendo para aprender más sobre los flujos de pantalla.
¿Qué es un flujo de pantalla?
Un flujo de pantalla (o wireflow) reúne un diseño de pantallas múltiples, conectado como un diagrama de flujo para trazar los puntos de decisión y los movimientos de un cliente de principio a fin.
Las wireframes por sí solas carecen de contexto para mostrar cómo podría ser un flujo de usuario interactivo página por página. Los flujos UX por sí solos son más abstractos y no pueden mostrarte lo que realmente está viendo tu cliente.
Los wireflows, o flujos de pantalla, combinan las fortalezas de ambos métodos y te ayudan a argumentar cómo lo que ve el usuario tiene un alto impacto en cómo experimentan tu producto o servicio.
Cuándo usar flujos de pantalla
Los wireframes ayudan a los equipos de UX y de producto a pensar en el recorrido del cliente como un flujo completo en lugar de un conjunto de pantallas. El wireflow o flujo de pantalla se centra en las pantallas en sí mismas y en la interacción del cliente con tu servicio o producto.
Un diseñador puede trazar un flujo de pantalla cuando necesita...
Asegúrate de que no falten escenarios: Con un recorrido de principio a fin mapeado, puedes considerar todos los posibles casos de uso que se aplican a las necesidades del cliente.
Mejorar las interacciones con los usuarios:conoce a tu cliente a través de cada oportunidad en el flujo, como registros, confirmaciones o ventanas emergentes.
Crear mejor comunicación interfuncional:reunir a diseñadores y desarrolladores, animándolos a considerar toda la experiencia en lugar de pantallas separadas.
Participar en la educación de las partes interesadas:si los clientes o equipos nunca han considerado lo que el cliente ve al moverse a través de tu producto o experiencia, seguir un flujo ayuda a generar empatía por los puntos problemáticos del cliente.
Crea tu propio flujo de pantalla
Hacer tu propio flujo de pantalla es fácil. La plataforma de colaboración virtual de Miro proporciona el lienzo perfecto para crearlos y compartirlos. Comienza seleccionando la plantilla de flujo de pantalla, luego sigue los siguientes pasos para crear uno propio.
1. Define tu historia de usuario
Antes de comenzar a mapear una secuencia visual, describe las necesidades de tus usuarios y los puntos problemáticos a resolver. Esta es tu base para establecer un punto de partida para tu flujo de pantalla.
2. Decide qué mostrarán tus pantallas clave
Reflexiona sobre tus puntos de inicio y fin en el recorrido. ¿Necesitas una página de aterrizaje? ¿Pantalla de formulario de registro? ¿Página de confirmación? Identifica cambios o pasos adicionales en el proceso, como páginas que necesitan dividirse o pantallas que deben agregarse. Miro es el lugar perfecto...creador de esquemas de páginacon unBiblioteca de wireframesque cuenta con más de 15 componentes de IU que puedes agregar fácilmente a tu flujo de pantalla.
3. Conecta las pantallas
Agrega y mueve flechas entre cada pantalla para que el usuario avance en la tarea, usandola herramienta de línea de conexión de Miro También puedes incluir puntos de decisión y mostrar qué sucede en cada instancia disponible para el usuario.
4. Comparte tu flujo de pantalla con tu equipo o partes interesadas para recibir comentarios.
Puedes utilizarla función de @mención de Miropara etiquetar a tu equipo o personas individuales para rondas rápidas de comentarios, críticas de diseño o revisiones antes de las sesiones de taller en vivo con clientes. También puedes compartir tu tablero de Miro con cualquier persona (¡incluso si no están registrados todavía!) haciendo clic en elBotón "Invitar a miembros".
Descubre másejemplos de flujo de usuariospara ayudarte a construir tu próxima gran idea.
¿Qué es el flujo de pantalla en UX?
Un flujo de pantalla te ayuda a analizar las interacciones de tus usuarios, centrándose principalmente en las pantallas de tu producto. Combina lo mejor de la creación de wireframes y diagramas de flujo, lo que te ofrece una visión general más detallada del flujo de tus clientes y, por lo tanto, más datos para crear una mejor experiencia de usuario.
Comienza ahora mismo con esta plantilla.
Plantilla de wireframes de baja fidelidad
Ideal para:
Investigación de escritorio, Gestión de productos, Wireframes
Cuando estás diseñando un sitio o construyendo una aplicación, las primeras etapas deben ser GRANDES: viendo el panorama general y comunicando la gran idea. Los wireframes de baja fidelidad te permiten verlo y hacerlo. Estos bocetos preliminares (piense en ellos como la versión digital de un dibujo en una servilleta) ayudan a tus equipos y a las partes interesadas del proyecto a determinar rápidamente si una reunión de diseño satisface las necesidades de tus usuarios. Nuestra plantilla te permite usar fácilmente wireframes durante reuniones, talleres, presentaciones y sesiones de crítica.
Plantilla de bocetos online
Ideal para:
Diseño UX, Investigación de escritorio, Design Thinking
Antes de lanzarte de lleno con una idea prometedora, obsérvala desde un nivel alto para saber cómo funciona y qué tan bien cumple tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te ofrece una potente herramienta de colaboración remota para las etapas iniciales de los prototipos, ya sea que estés esbozando páginas web y aplicaciones móviles, diseñando logos o planificando eventos. Luego podrás compartir fácilmente tu boceto con tu equipo y guardar cada etapa de tu boceto antes de cambiarlo y desarrollarlo.
Plantilla de Wireframing de sitios web
Ideal para:
Wireframes, Experiencia de usuario
Wireframing es un método para diseñar un sitio web a nivel estructural. Un wireframe es un diseño estilizado de una página web que muestra los elementos de la interfaz en cada página. Usa esta plantilla de wireframe para iterar en páginas web de manera rápida y económica. Puedes compartir el wireframe con clientes o compañeros de equipo y colaborar con las partes interesadas. Los wireframes permiten a los equipos obtener la aceptación de las partes interesadas sin invertir demasiado tiempo o recursos. Ayudan a garantizar que la estructura y el flujo de tu sitio web satisfagan las necesidades y expectativas de los usuarios.