Plantilla de flujo de pantalla
Valida los componentes visuales de pantalla en un flujo de usuarios.
Acerca de la Plantilla de Screen Flow
Los screen flows (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 muestra qué ven los usuarios en cada pantalla y cómo esto impacta su proceso de toma de decisiones a través de tu producto o servicio. Con esta información, puedes explicar mejor las decisiones que has tomado respecto al diseño de interacción.
Usa la Plantilla de Screen Flow para encontrar nuevas oportunidades que hagan la experiencia del usuario sin fricciones y libre de frustración de principio a fin.
Si estás interesado en desarrollar más tu trabajo y adentrarte en el campo del diseño UX, donde puedes mostrar el viaje del usuario como un diagrama de flujo con textos y símbolos en lugar de pantallas, podrías estar interesado en la Plantilla de User Flow.
Sigue leyendo para aprender más sobre los flujos de pantalla.
¿Qué es un flujo de pantalla?
Un flujo de pantalla (o "wireflow") combina un diseño de múltiples pantallas, conectadas como un diagrama de flujo, para mapear los puntos de decisión y movimientos de un cliente desde el inicio hasta el final.
Las plantillas por sí solas carecen de contexto sobre cómo podría lucir 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 qué está viendo realmente tu cliente.
Los flujos de pantalla, o "wireflows", combinan las fortalezas de ambos métodos y te ayudan a justificar cómo lo que ve el usuario tiene un impacto significativo en cómo experimentan tu producto o servicio.
Cuándo usar flujos de pantalla
Las plantillas ayudan a los equipos de UX y producto a pensar en el recorrido del cliente como un flujo completo en lugar de un conjunto de pantallas. El flujo de pantalla o "wireflow" se centra en las pantallas mismas y en la interacción del usuario con tu servicio o producto.
Un diseñador puede mapear un flujo de pantallas cuando necesite…
Asegurarse de que no haya escenarios faltantes: 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 del usuario: conocer a tu cliente a través de cada oportunidad en el flujo, como registros, confirmaciones o ventanas emergentes.
Crear una mejor comunicación interfuncional: unir 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 usuario ve al moverse por tu producto o experiencia, seguir un flujo ayuda a generar empatía por los puntos problemáticos del cliente.
Crea tu propio flujo de pantallas
Crear tu flujo de pantallas 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 pantallas y sigue los siguientes pasos para crear uno propio.
1. Define la historia de tu usuario
Antes de comenzar a mapear una secuencia visual, describe las necesidades de tu usuario y los puntos problemáticos a resolver. Esta es tu base para establecer un punto de inicio para tu flujo de pantallas.
2. Decide qué mostrarán tus pantallas clave
Piénsalo bien en tus puntos de inicio y fin en el recorrido. ¿Necesitas una página de inicio? ¿Pantalla de registro? ¿Página de confirmación? Identifica cambios o pasos adicionales en el proceso, como páginas que necesiten dividirse o pantallas que deban añadirse. Miro es el perfecto creador de wireframes, con una biblioteca de wireframes que tiene más de 15 componentes de UI que puedes agregar fácilmente a tu flujo de pantallas.
3. Conecta las pantallas
Agrega y mueve flechas entre cada pantalla para mover al usuario adelante en 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 ocurre en cada instancia disponible para el usuario.
4. Comparte tu flujo de 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 y obtener opiniones rápidas, 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á registrada!) haciendo clic en el botón Invitar miembros.
Descubre más ejemplos de flujos de usuario para ayudarte a construir tu próximo gran proyecto.
FAQ sobre la plantilla de flujo de pantalla
¿Qué es el flujo de pantalla en UX?
Un flujo de pantalla te ayuda a analizar las interacciones de tu usuario, centrándote principalmente en las pantallas de tu producto. Combina lo mejor de los wireframes y los diagramas de flujo, dándote una visión más detallada del flujo de tus clientes y, por lo tanto, más datos para construir una mejor experiencia de usuario.
¿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 diseñes un sitio o desarrolles una aplicación, las etapas iniciales deben ser ENORMES: visualizar el panorama general y comunicar la gran idea. Los wireframes de baja fidelidad te permiten visualizarlo y hacerlo. Estos bocetos preliminares (piensa en ellos como la versión digital de un boceto en una servilleta) ayudan a tus equipos y partes interesadas del proyecto a determinar rápidamente si un diseño cumple con las necesidades de tus usuarios. Nuestra plantilla te permite usar wireframes fácilmente durante reuniones o talleres, presentaciones y sesiones de crítica.
Plantilla de wireframes de aplicaciones
Ideal para:
Diseño UX, Wireframes
¿Listo para empezar a construir una aplicación? No solo imagines cómo funcionará y cómo interactuarán los usuarios con él: deja que un marco alámbrico te lo muestre. El wireframing es una técnica para crear un diseño básico de cada pantalla. Cuando haces un wireframe, idealmente al inicio del proceso, obtendrás una comprensión de qué 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 cual te ahorrará tiempo y dinero. Y al pensar en las cosas en términos del viaje de un usuario, ofrecerás una experiencia más atractiva y exitosa.
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 alto nivel para saber cómo funciona y qué tan bien cumple con tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te proporciona una herramienta poderosa para la colaboración remota en las etapas iniciales de la creación de prototipos, ya sea que estés 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 modificarlo y desarrollarlo.
Plantilla de wireframes para sitios web
Ideal para:
Wireframes, Experiencia de usuario
El 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 wireframes para iterar en páginas web de forma 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 asegurar que la estructura y el flujo de tu sitio web satisfagan las necesidades y expectativas de los usuarios.