Plantilla de flujo de pantalla
Miro
Sobre 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 principio a fin traza lo que los usuarios ven en cada pantalla y cómo impacta en 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 respecto al diseño de interacción.
Usa la plantilla de flujo de pantalla para encontrar nuevas oportunidades que hagan la experiencia del usuario sin fricciones y libre de frustración de principio a fin.
Si te interesa desarrollar más tu trabajo 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, puede interesarte la Plantilla de Flujo de 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, conectadas como un diagrama de flujo para trazar los puntos de decisión y movimientos del cliente de principio a fin.
Los wireframes por sí solos carecen de contexto sobre cómo podría ser un flujo de usuario interactivo, página por página. Los flujos de 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 el usuario ve tiene un gran impacto en cómo experimentan tu producto o servicio.
Cuándo usar los flujos de pantalla
Los wireframes ayudan a los equipos de UX y de producto a concebir el recorrido del cliente como un flujo completo en lugar de un conjunto de pantallas. El wireflow o flujo de pantalla se enfoca en las propias pantallas 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 extremo a extremo trazado, puedes considerar todos los potenciales casos de uso que se aplican a las necesidades del cliente.
Mejora las interacciones con los usuarios: conoce a tu cliente a través de cada oportunidad en el flujo, como registros, confirmaciones o ventanas emergentes.
Crea una mejor comunicación interdisciplinaria: reúne a diseñadores y desarrolladores, alentándolos a pensar en toda la experiencia en lugar de pantallas separadas.
Participa en la educación de las partes interesadas: si los clientes o equipos nunca han considerado lo que el cliente ve al moverse por tu producto o experiencia, seguir un flujo ayuda a construir empatía hacia los puntos problemáticos del cliente.
Crea tu propio flujo de pantalla
Hacer tu 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 que deben resolverse. Esta es tu base para establecer un punto de partida para tu flujo de pantalla.
2. Decide qué mostrarán tus pantallas clave
Piensa en tus puntos de inicio y final en el recorrido. ¿Necesitas una página de inicio? ¿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 añadirse. Miro es el creador de wireframes perfecto con una biblioteca de wireframes que tiene más de 15 componentes de IU que puedes añadir fácilmente a tu flujo de pantallas.
3. Conecta las pantallas
Añade y mueve flechas entre cada pantalla para avanzar al usuario a través de la tarea, usando la herramienta de líneas de conexión de Miro. También puedes incluir puntos de decisión y mostrar lo que sucede en cada instancia disponible para el usuario.
4. Comparte el flujo de tus pantallas con tu equipo o partes interesadas para recibir comentarios
Puedes usar la función de menciones de Miro para etiquetar a tu equipo o personas individuales para rondas rápidas de comentarios, críticas de diseño, o revisiones antes de sesiones de taller en vivo con clientes. También puedes compartir tu tablero de Miro con cualquier persona (¡incluso si no están registrados!) haciendo clic en el botón Invitar miembros.
Descubre más ejemplos de flujo de usuario para ayudarte a crear tu próxima gran idea.
Miro
El espacio de trabajo visual para la innovación
Miro permite a 80 millones de usuarios dar forma al futuro al proporcionar un lugar donde pueden crear juntos sin problemas, independientemente de la ubicación.
Categorías
Plantillas similares
Plantilla de wireframes de baja fidelidad
0Me gusta
47usos

Plantilla de wireframes de baja fidelidad
Cuando diseñas un sitio o construyes una aplicación, las primeras etapas deben ser GRANDES: visualizar el panorama completo y comunicar la gran idea. Los wireframes de baja fidelidad te permiten verlo y hacerlo. Estos bocetos (piensa en ellos como la versión digital de un dibujo en una servilleta) ayudan a tus equipos y partes interesadas a determinar rápidamente si un diseño satisface las necesidades de los usuarios. Nuestra plantilla te permite usar fácilmente wireframes durante reuniones o talleres, presentaciones y sesiones de crítica.
Plantilla de wireframes de aplicaciones
0Me gusta
33usos

Plantilla de wireframes de aplicaciones
¿Listo para comenzar a construir una aplicación? No solo imagines cómo funcionará y cómo los usuarios interactuarán con ella: deja que un wireframe te lo muestre. El wireframing es una técnica para crear un diseño básico de cada pantalla. Cuando realizas wireframing, idealmente al inicio del proceso, obtendrás una comprensión de lo que logrará cada pantalla y conseguirás la aprobación de las partes interesadas importantes, todo antes de añadir el diseño y el contenido, lo que te ahorrará tiempo y dinero. Y al pensar en las cosas en términos del recorrido del usuario, ofrecerás una experiencia más atractiva y exitosa.
Plantilla de Bocetos Online
0Me gusta
44usos

Plantilla de Bocetos Online
Antes de lanzarte de lleno con una idea prometedora, considérala desde un nivel general: para saber cómo funciona y si cumple bien tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te ofrece una poderosa herramienta de colaboración remota para las etapas iniciales de los prototipos, ya sea esbozando páginas web y aplicaciones móviles, diseñando logos o planificando eventos. Luego, puedes compartir fácilmente tu boceto con tu equipo y guardar cada etapa de tu boceto antes de cambiarlo y desarrollarlo.
Plantilla de wireframes para sitios web
0Me gusta
42usos

Plantilla de wireframes para sitios web
Wireframing es un método para diseñar un sitio web a nivel estructural. Un wireframe es un esquema 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 las 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.
Plantilla de wireframes de baja fidelidad
0Me gusta
47usos

Plantilla de wireframes de baja fidelidad
Cuando diseñas un sitio o construyes una aplicación, las primeras etapas deben ser GRANDES: visualizar el panorama completo y comunicar la gran idea. Los wireframes de baja fidelidad te permiten verlo y hacerlo. Estos bocetos (piensa en ellos como la versión digital de un dibujo en una servilleta) ayudan a tus equipos y partes interesadas a determinar rápidamente si un diseño satisface las necesidades de los usuarios. Nuestra plantilla te permite usar fácilmente wireframes durante reuniones o talleres, presentaciones y sesiones de crítica.
Plantilla de wireframes de aplicaciones
0Me gusta
33usos

Plantilla de wireframes de aplicaciones
¿Listo para comenzar a construir una aplicación? No solo imagines cómo funcionará y cómo los usuarios interactuarán con ella: deja que un wireframe te lo muestre. El wireframing es una técnica para crear un diseño básico de cada pantalla. Cuando realizas wireframing, idealmente al inicio del proceso, obtendrás una comprensión de lo que logrará cada pantalla y conseguirás la aprobación de las partes interesadas importantes, todo antes de añadir el diseño y el contenido, lo que te ahorrará tiempo y dinero. Y al pensar en las cosas en términos del recorrido del usuario, ofrecerás una experiencia más atractiva y exitosa.
Plantilla de Bocetos Online
0Me gusta
44usos

Plantilla de Bocetos Online
Antes de lanzarte de lleno con una idea prometedora, considérala desde un nivel general: para saber cómo funciona y si cumple bien tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te ofrece una poderosa herramienta de colaboración remota para las etapas iniciales de los prototipos, ya sea esbozando páginas web y aplicaciones móviles, diseñando logos o planificando eventos. Luego, puedes compartir fácilmente tu boceto con tu equipo y guardar cada etapa de tu boceto antes de cambiarlo y desarrollarlo.
Plantilla de wireframes para sitios web
0Me gusta
42usos

Plantilla de wireframes para sitios web
Wireframing es un método para diseñar un sitio web a nivel estructural. Un wireframe es un esquema 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 las 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.