Conceptos básicos de prototipado

1

Diseño de Prototipos: Del Boceto a la Alta Fidelidad

2

Prototipos: Beneficios y Estrategias en el Desarrollo de Productos

3

Prototipos de Baja, Media y Alta Fidelidad: Ventajas y Desventajas

Ténicas para estructurar información

4

Patrones de Diseño en Interfaces de Usuario para Viajes Solitarios

5

Metodología OUX: Diseño Digital Orientado a Objetos

6

Diseño de Flujos de Tarea para Portales de Viajes

Prototipado de Baja Fidelidad

7

Prototipos rápidos para portales de viajes con herramientas colaborativas

Sistemas de Diseño

8

Ventajas del Sistema de Diseño Atomic Design

9

Identificación de Componentes en Sistemas de Diseño Digital

Prototipado de Mediana Fidelidad

10

Diseño de Interfaces con Figma: Jerarquía y Componentes Básicos

11

Diseño Web con Grid de 12 Columnas: Creación y Optimización

Librerías Compartidas de Componentes

12

Diseño de Interfaces con Figma: Creación de Componentes Maestros

13

Creación y Gestión de Componentes en Diseño UI

14

Componentes Detallados y Funcionales con Responsabilidad

15

Estilos y Componentes en Prototipos de Alta Fidelidad

16

Creación de Librerías Compartidas en Diseño de Interfaces

Prototipado de Alta Fidelidad

17

Creación de Prototipos de Alta Fidelidad con Componentes Compartidos

18

Creación de Prototipos Interactivos para Pruebas de Usabilidad

Entregables de Diseño

19

Guía de Estilo Dinámica para Diseñadores en Figma

20

Exportación de Diseños en Figma a Zeplin para Desarrollo Web

Cierre

21

Diseño Profesional de Prototipos: Del Problema a la Solución

Contenido Bonus

22

Prototipado Rápido y Eficaz con Lápiz y Papel

23

Prototipos con Origami Studio para iOS y Android

24

Creación de prototipos interactivos con Flinto

Mentoría expert

25

Diseño Estratégico: Innovación y Transformación Empresarial

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Diseño de Flujos de Tarea para Portales de Viajes

6/26
Recursos

¿Cómo traducir los requerimientos en soluciones visuales?

Lograr una solución tangible a partir de requerimientos de negocio es esencial en el diseño y desarrollo de aplicaciones. Este proceso comienza con una comprensión profunda de los requerimientos de los usuarios, generalmente proporcionados por el equipo de producto, y fundamentados por la investigación de diseño. De este modo, se crean flujos de trabajo claros que facilitan la navegación y tareas de los usuarios en una plataforma.

¿Qué es un flujo de tareas?

Un flujo de tareas es una serie organizada de pasos que un usuario realiza para completar una tarea específica. Para ilustrar: en un portal de viajes, un usuario debe seguir ciertos pasos como hacer clic para reservar un hotel o un vuelo. Estos flujos nos permiten diseñar interfaces donde las acciones del usuario sean predecibles y eficientes.

¿Cuáles son los componentes de un flujo de tareas?

Un flujo de tareas consta de lo que el usuario ve en pantalla y la acción específica que realiza. Por ejemplo, en el proceso de instalación de una aplicación, la interfaz podría mostrar un enlace en la página de descargas, y la acción requerida sería hacer clic en dicho enlace. Es clave asegurarse de que cada paso esté claro y ordenado.

¿Cómo se desarrollan los flujos de tareas en un portal de viajes?

En la práctica, los requerimientos se resumen en necesidades específicas que los usuarios quieren satisfacer, como encontrar ofertas destacadas o reservar paquetes de viaje. Estas necesidades se traducen en flujos de tarea para formar un prototipo eficiente y funcional.

¿Qué estrategias se utilizan para generar estos flujos?

  • Identificación de necesidades específicas: Basándonos en investigaciones previas, determinamos lo que las usuarias del portal necesitan, como ver ofertas, buscar destinos o invitar a amigos a sus viajes.
  • Crear subtareas necesarias: Por ejemplo, para encontrar vuelos con descuentos, los usuarios iniciarían buscando el vuelo, luego revisan detalles, reservan y finalmente pagan.
  • Utilizar patrones de diseño conocidos: Esto asegura que la experiencia del usuario sea cómoda y familiar, facilitando acciones como elegir fechas o opciones de pago.

¿Qué papel juega el diseñador en la creación de flujos de tarea?

El diseñador no solo se enfoca en la estética de las pantallas, sino también en definir funcionalidades que guíen al usuario a través de un flujo eficiente. Es vital coordinar con desarrolladores y equipos de producto para determinar hasta dónde se desarrollarán las funcionalidades, asegurando que el flujo de tarea sea claro y efectivo.

¿Cómo comunicar efectivamente estas decisiones a un equipo?

  • Especificación detallada de flujos: Incluir pasos específicos y funcionalidades necesarias.
  • Definición de un límite de desarrollo: Acuerdo con el equipo de hasta dónde se desarrollarán las funcionalidades.
  • Provisión de ejemplos y recursos: Facilitar plantillas y casos de estudio para una mejor comprensión de lo que se debe lograr.

A través de estos pasos, los diseñadores pueden desarrollar soluciones visuales que no solo cumplen con los requerimientos de negocio, sino que también mejoran la experiencia del usuario en cada interacción.

Aportes 69

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Disculpen lo largo.
![](

Los Flujos de Tareas son los pasos que un usuario ejecuta para completar una tarea particular. Por ejemplo: apartar un hotel.

Se suelen usar dos componentes, donde se especifica de manera ordenada:

  • Lo que el usuario ve (en pantalla)
  • Lo que el usuario hace (cómo interactúa)

    Ejemplo:

    \
    Hay que identificar todos los detalles involucrados en la interacción para que el usuario pueda completar su tarea.

Un flujo de tareas es solo los pasos específicos que un usuario debe hacer para completar una acción que él mismo desea.
Para crear un Flujo de tareas, debemos tener la información y la investigación necesarias para identificar las acciones que el usuario desea realizar en nuestro proyecto. Cuando identificamos estas acciones, podemos crear este flujo de tareas en dos partes.
La primera parte es la vista de nuestro proyecto, lo que el usuario ve, mientras que la segunda parte son las acciones que el usuario puede hacer en esa vista.
Debemos especificar cada paso del flujo y en cada paso podemos definir las acciones opcionales que pueden ayudar al usuario a realizar las acciones más rápido o de una manera mas comoda.

Ok. Aquí parte del ejercicio de esta clase:

muy importante saber los flujos de tareas para empezar a realizar los wireframes

Hola, Realice el ejercicio de las dos primeras.
Recibo feedback gracias.

desde mi perspectiva y basándome en mi experiencia creando apps, el flujo que el profe presenta de Uber, esta mal hecho o muy simplificado. Ya que solo toma en cuenta a usuarios que ya usaron la app. Es decir se está saltando el proceso de registro y el de agregar un método de pago y precisamente son estos procesos lo que mas deserción generan en los usuarios.

Es una mala práctica comenzar a hacer wireframes y prototipos sin realizar una adecuada estructura de pasos que el usuario debe realizar para completar una tarea, lo que se conoce como Flujo de Tareas.

Esto se complementa bastante con Arquitectura de la informaciónn así sabremos que la información no va ahí porque sí, si no que tiene una razón.

FigJam también es buena alternativa para realizar esto.

Increíble clase, me resulta muy conveniente porque actualmente desarrollo un portal de viajes.

No sé si entendí bien, pero aquí lo intenté 🙈

Uno de los flujos.

<https://www.figma.com/file/OnR4TicAZXcf7Ypdr4lcU8/FLUJO-DE-TAREAS?type=whiteboard&node-id=0%3A1&t=P4a6xWiLdDujVvJ4-1>
un buen ejercicio a continuación mi aporte ![]()![](<Buscar destinos de interés y guardarlos en mi diario de planeación Ingresar portal ver ofertas Buscar destinos de interés Digitar url sitio Filtrar ofertas sobresalientes Filtrar destinos Buscar ofertas Seleccionar destinos de interés Guardar destinos en diario Eliminar destino en diario Invitar amigos a ver mis viajes recientes y futuros, así como ver los viajes de mis amigos y también invitarlos a mis viajes como huéspedes y viajeros Ingresar portal Consultar viajes Invitar amigos como viajeros Invitar amigos como huéspedes Digitar url sitio Filtar viajes recientes Seleccionar Todos mis amigos Seleccionar Todos mis amigos Filtar viajes futuros Seleccionar amigos individualmente Seleccionar amigos individualmente Filtar viajes amigos Guardar selección Guardar selección Buscar viajes Enviar a invitación Enviar a invitación Encontrar restaurantes atractivos por tipo de comida y ver los reviews hechas por comensales Ingresar portal Consultar sitio Consultar Restaurantes Digitar url sitio Buscar ciudad filtar por tipo de comida filtrar por ubicación filtar por experiencia filtar por los más recomendados filtar por precio Buscar restaurantes guardar los más destacados >)![](https://static.platzi.com/media/user_upload/Flujotareas-e3057d6f-c1c5-4d2e-b4db-ed1aeea29641.jpg)
Hola compañer@s Comparto con ustedes aporte sobre el punto 3. 1. Invitar amigos a ver mis viajes recientes y futuros, así como ver los viajes de mis amigos y también invitarlos a mis viajes como huéspedes y viajeros. ![](https://static.platzi.com/media/user_upload/imagen-28a51af7-c5c9-41d4-9081-80d17b668542.jpg)

El modelo recomendado para construir un flujo de tareas es lo que el usuario ve y hace

Creo que no me quedó tan claro la parte de las acciones u opciones del flujo en mi ejemplo. Si tienen alguna observación lo agradecería 😃

Mi aporte 😄

![](![]()

Es cierto, mejor empezar con lo que queremos que el usuario vea o haga antes de ponerse a diseñar el prototipo

Realicé el flujo del punto 4 del brief.
Buscar hoteles y viviendas para rentas con las amenidades que me gustan como piscina, desayuno, Wi-Fi gratis, gimnasio, cuarto de juegos, etc

comparto mi ejercicio de la clase!

Aquí les dejo mi aporte directamente en Whimiscal https://whimsical.com/flujo-de-tareas-por-funcion-4gF1fLpFHS1jVtgiFMkRnJ

No aparece el ejemplo de Uber en los recursos.

Esto es lo que hice hasta ahora! Apreciaria una opinion

Les comparto mi ejercicio en whimsical es muy rapidoElegir restaurante

Mi aporte

Ya quiero aplicar lo de lo que el usuario ve y lo que el usuario hace.

Hola les comparto mi flujo de tareas

La herramienta que utiliza el profe se llama Lucidchart

figma ya tiene para hacer flujos, en figjam file , esta en beta yo la probe y es sencillo de usar y utiliza las mismo shortcut que su app nativa de inicial , con R ya comienzas hacer los cuadros y no debes tirar flechas solo poner + y se hace automaticamente, ahora en cuanto a colores solo tiene los comunes no puedes personalizar lo unico por ejemplo no puedes poner un azul fuerte y otro claro existe un azul solido. tambien el profesor uso la herramienta de dibujo de google , existe una extension directa de dicha herramienta para asi no estar entrando a drive…

Comparto uno de los flujos! Agradezco todas sus retroalimentaciones! (:

Hola… les comparto la numero 1 de la lista de este reto a ver si me ayudan con algo de feedback. Admito que me enreda un poco el orden o la dinámica entre lo que se ve y las acciones.

WACHA

Esto no es lo mismo que el User journey???

El reto lo hice con un proyecto propio

listo mi parte del ejercicio si tienen algun feedback bien recibido es!



uno de los flujos

Algunos Flujos de Tareas:

Omití la parte de login porque no estaba en la consigna y me parece algo implícito. Sin embargo puede modificarse.
.
Escríbanme si tienen una mejor idea para hacer el esquema.
.