Diagramas de flujo de usuario y wireframes web, con descargas SVG gratis
Flujos de usuario y wireframes
Ejemplos de diagramas de flujo de usuario + kit de wireframes web (SVG gratis) | We.Inc
Qué es un flujo de usuario, ocho flujos listos para registro, pago, reservas y más, y wireframes sencillos para una página de inicio, de precios y de contacto. Descarga cada uno como SVG que puedes abrir en Figma.
Un flujo de usuario es el camino que sigue una persona por tu web para completar una tarea, dibujado como pantallas, acciones y decisiones unidas por flechas. Un wireframe es un boceto simple del layout de una pantalla. Primero traza el flujo y después haz el wireframe de cada pantalla. Abajo tienes ocho flujos habituales y tres wireframes para descargar en SVG.
Formas usadas en los flujos
Forma
Significa
Píldora redondeada (azul)
Dónde empieza el flujo
Caja cuadrada
Una página o pantalla
Caja gris
Algo que hace la persona, como rellenar un formulario
Rombo
Una decisión o una comprobación que puede fallar
Píldora redondeada (verde)
Se alcanza el objetivo
Cada flujo se centra en un objetivo y en los mínimos pasos para alcanzarlo, con el fallo más habitual dibujado como un bucle discontinuo. Úsalos como punto de partida para tu propia web y luego haz el wireframe de las pantallas por las que pasan.
Escribe el objetivo en una línea, por ejemplo: un visitante nuevo reserva su primera cita.
Enumera todas las pantallas y acciones desde el punto de entrada hasta el objetivo. No te saltes las aburridas, como confirmar un email.
Marca cada punto donde algo puede salir mal, como una tarjeta rechazada o un hueco que ya está ocupado, y decide adónde va la persona después.
Cuenta los pasos y elimina los que no ayuden a la persona a llegar al objetivo.
Haz el wireframe de cada pantalla del flujo, decidiendo qué va dónde antes de elegir colores o fuentes.
Empieza desde donde la gente llega de verdad. Muchos visitantes entran en una página de producto o del blog desde un buscador, no en tu página de inicio.
Mantén los wireframes en gris a propósito. El color y las imágenes reales invitan a opinar sobre el estilo cuando lo que quieres es opinión sobre la estructura.
Cada rombo de decisión necesita un camino de vuelta. Un pago fallido que acaba en un callejón sin salida pierde la venta.
Prueba un flujo con cinco personas antes de construirlo. Observar dónde dudan revela la mayoría de los problemas.
Preguntas frecuentes
¿Qué diferencia hay entre un flujo de usuario y un user journey?
Un flujo de usuario traza las pantallas y los pasos de una tarea en tu web. Un user journey es más amplio: cubre lo que alguien piensa, siente y hace antes, durante y después de usar tu producto, a menudo en varios canales. Los flujos sirven para diseñar pantallas; los journeys, para entender a las personas.
¿Cómo abro estos SVG en Figma?
Descarga el archivo y arrástralo a un lienzo de Figma, o ábrelo en un navegador, cópialo y pégalo. Figma convierte las formas y el texto en capas editables que puedes reestilizar y ampliar.
¿Cuánto detalle debe tener un wireframe?
El suficiente para mostrar qué hay en la pantalla y en qué orden: navegación, encabezados, imágenes, formularios y botones. Deja fuera los textos exactos, los colores y las fuentes. Si la gente empieza a discutir el tono de azul, tiene demasiado detalle.
¿Necesito un software especial para los flujos de usuario?
No. Papel y bolígrafo bastan para una primera versión. Las herramientas de diagramas ayudan cuando quieres compartir, editar o guardar los flujos junto a los diseños, y los archivos SVG simples como estos funcionan en la mayoría.
Por qué trazar el flujo antes que las páginas
Las páginas diseñadas una a una suelen funcionar por separado y fallar en conjunto. La página de precios queda genial pero no tiene un siguiente paso claro; el formulario de registro pide cosas que el pago vuelve a pedir. Dibujar primero el flujo muestra cada traspaso entre pantallas, que es donde abandona la mayoría de la gente.
Un flujo también hace visible el coste de cada paso extra. Cuando una reserva ocupa nueve cajas en papel, queda claro cuáles se pueden fusionar.
Del wireframe a la página real
Una vez acordado el orden del contenido, el wireframe se convierte en el brief del diseño real. Cada bloque gris pasa a ser una sección con su encabezado y su texto, y las etiquetas de las esquinas se convierten en los nombres de sección que usas con tu equipo o con tu creador de sitios web.
Registro
Un visitante crea una cuenta y llega a su primera pantalla útil.
El visitante llega a la página de inicio
Hace clic en Empezar gratis
Formulario de registro: email y contraseña
¿Email ya registrado?
Sí: iniciar sesión
Enlace de confirmación del email
Pantalla de bienvenida con la primera tarea
Pago
Un comprador paga lo que tiene en el carrito.
Carrito
Pago: contacto y envío
Elegir opción de entrega
Datos de pago
¿Pago aprobado?
No: reintentar
Confirmación del pedido y email
Reserva
Un cliente nuevo reserva su primera cita.
Página del servicio
Elegir servicio y profesional
Calendario de huecos libres
¿Sigue libre el hueco?
No: elegir otro
Formulario de datos de contacto
Reserva confirmada y añadida al calendario
Restablecer contraseña
Un miembro que olvidó su contraseña vuelve a entrar.
Página de inicio de sesión
Hace clic en He olvidado mi contraseña
Escribir el email
Abre el enlace de restablecimiento del email
¿Enlace todavía válido?
No: reenviar
Crear contraseña nueva
Sesión iniciada
Consulta de contacto
Un posible cliente envía una pregunta y sabe cuándo esperar respuesta.
Cualquier página
Página de contacto
Rellenar nombre, email y mensaje
¿Campos válidos?
No: mostrar errores
Mensaje de agradecimiento con plazo de respuesta
Suscripción a la newsletter
Un lector se suscribe y lo confirma.
Artículo del blog
Caja de suscripción al final del artículo
Página de revisa tu bandeja de entrada
Hace clic en el enlace de confirmación
Email de bienvenida y página de archivo
De la búsqueda al producto
Un comprador encuentra un producto desde el buscador.
Cualquier página
Escribe en el buscador
Página de resultados con filtros
¿Se ha encontrado algo?
No: sugerencias
Página del producto
Añadido al carrito
Solicitud de presupuesto
Un cliente local pide precio para un trabajo.
Página de la zona de servicio
Botón de pedir presupuesto
Formulario corto: tipo de trabajo, código postal, fotos
¿Dentro de la zona de servicio?
No: sugerir un colaborador
Confirmación con hora de llamada
Página de inicio
Explica qué haces, demuéstralo y señala un único siguiente paso.
Navegación
Hero: titular, frase, botón principal
Logos o pruebas
Tres beneficios
Cómo funciona
Testimonios
Llamada a la acción final
Pie de página
Página de precios
Permite comparar planes y elegir uno sin tener que contactarte.
Navegación
Encabezado e interruptor mensual o anual
Tarjetas de planes
Tabla comparativa de funciones
Preguntas frecuentes sobre precios
Pie de página
Página de contacto
Facilita que te contacten y deja claro cuándo responderás.
Navegación
Encabezado y plazo de respuesta
Formulario de contacto
Mapa o foto
Dirección, teléfono, horario
Pie de página
Ocho ejemplos de flujos de usuario
Cada flujo se centra en un objetivo. La línea naranja discontinua es la forma más habitual en que falla un paso y adónde va la persona después.
Kit de wireframes
Tres wireframes de poco detalle para las páginas que necesita la mayoría de sitios. Las etiquetas de cada bloque nombran la sección.