Copia de Clase 11 Prototipo Funcional y Metricas UX_

Vista previa del material en texto

PROTOTIPO FUNCIONAL
Y MÉTRICAS UX
 Clase 11. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MÁS RELEVANTE DE LA CLASE 10
Patrones de Navegación: Cada sistema operativo propone diferentes elementos para navegar por la app como botones, pestañas y paneles. Hacer uso de ellos hará que el usuario los reconozca a primera vista y, solo con estos componentes, ya sepa cómo ir de una sección a otra.
GLOSARIO:
Clase 10
Patrones de Interacción: El diseño de aplicaciones para móviles tiene que tener en cuenta la forma en que los usuarios sujetan los teléfonos. Asimismo, con cuáles dedos interactúan y cómo los usan, tiene incidencia en el diseño de la interfaz y condiciona la ubicación de los elementos interactivos en la pantalla.
Prácticas de Redacción: Redactar oraciones cortas. Dividir en párrafos cada cuatro oraciones. Limitar la extensión de los párrafos (Max: 75 palabras). Evitar párrafos en mayúsculas, ya que dificultan la lectura. Usar números para cifras. Ya que rompen la uniformidad de lectura. Utilizar elementos de lectura rápida como viñetas y listas numeradas
GLOSARIO:
Clase 10
Clase 11
Prototipo Funcional
y Métricas UX
PROTOTIPO FUNCIONAL
Y METRICAS UX
INCORPORANDO FUNCIONALIDAD
Clase 10
Patrones de Diseño
y Contenidos
PATRONES DE DISEÑO
INCORPORANDO PATRONES
Clase 12
Pruebas de Usabilidad
ENTREGA PROYECTO 3
CRONOGRAMA DEL CURSO
Crear prototipos funcionales.
Entender la importancia de obtener métricas en productos digitales. Definir las métricas con las que se medirá nuestro producto.
Entender las distintas métricas y herramientas para medir la experiencia de una app o sitio web.
OBJETIVOS DE LA CLASE
No va, es para guiar el uso del template.
Empatizar
Definir
Idear
Prototipar
Evaluar
Userflow basado en Flowchart
Analizar
Diseñar
Validar
DT
DCU
Arq de Información
MVP
WIREFRAME
A MANO 
CRAZY 8
INTERFAZ
CREATIVIDAD
FIDELIDAD
VISUAL
CONTENIDO
FUNCIONALIDAD
PATRONES DE DISEÑO
WIREFRAME DIGITAL
CONTENIDOS
PROTOTIPO FUNCIONAL
WIREFRAME
MAPA DE CONCEPTOS CLASE 11
INTERACCIÓN
¿ARRANCAMOS?
MÉTRICAS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Una métrica es una manera de medir o evaluar un fenómeno o cosa particular de manera cuantitativa. Permiten analizar a través de números el comportamiento de algún aspecto concreto y ver si mejora o empeora a lo largo del tiempo.
Las métricas Web también llamadas KPI, iniciales de las palabras en inglés Key Performance Indicators (Indicadores Claves de Desempeño).
MÉTRICA 
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Son indicadores que permiten establecer el éxito o fracaso de una estrategia o funcionalidad. Su evaluación y análisis implica observar el uso que las personas hacen del producto vivo; “Comprobar” esas hipótesis que en algún momento fueron ideas.
MÉTRICA 
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Las métricas en UX nos ayudan a definir dónde se encuentra nuestro producto en relación con su competencia o con las expectativas de sus usuarios y para enfocar nuestros esfuerzos donde pueden tener mayor impacto para mejorarlo (áreas en donde los usuarios lo encuentran confuso, ineficiente o frustrante).
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
¿POR QUÉ ES TAN IMPORTANTE MEDIR?
Nos dan percepción real de qué está pasando con nuestra app/sitio, nos da el “qué”
Muestra hechos difíciles de rebatir: Los resultados que se obtienen no son subjetivos.
Nos ayudan a saber si nuestra aplicación es exitosa.
Sirve de argumento; da cifras y porcentajes con los que presentar resultados a directivos o superiores será mucho más fácil y entendible.
Ayudan a tomar decisiones basadas en datos
¿POR QUÉ ES TAN IMPORTANTE MEDIR?
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
¿POR QUÉ ES TAN IMPORTANTE MEDIR?
Algo no me cierra… pero no sé qué es….
Los usuarios están teniendo problemas con…
LA USABILIDAD PUEDE SER MEDIDA EN:
Eficacia
Facilidad de uso.
Eficiencia
Rendimiento.
Satisfacción
Emociones.
TIPOS DE MÉTRICAS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
EFICACIA
Evalúa la facilidad de uso. Se mide el porcentaje de tareas exitosas realizadas por el usuario.
1: si la tarea se completó con éxito.
0: si no pudo ser completa correctamente.
U: usuario
Tarea: ¿que recorridos deberá realizar el usuario? Hacer foco en la funcionalidad principal.
Promedio: Valor de promediar cada uno de los resultados.
No va, es para guiar el uso del template.
EFICIENCIA
Evalúa el rendimiento de uso. Se mide el costo en la realización de (cantidad de pasos, tiempo utilizado, páginas visitadas, etc.).
U1-Tarea 1: colocar la cantidad de pasos que llevó realizar esa tarea.
Tarea: ¿que recorridos deberá realizar el usuario? Hacer foco en la funcionalidad principal.
NOTA: aca se muestra solo un ejemplo con “cantidad de pasos para llegar al objetivo” pero se puede hacer tambien con: Tiempo utilizado (pruebas de usabilidad), Número de Páginas visitadas, Número de Clicks realizados.
No va, es para guiar el uso del template.
EFICIENCIA
Evalúa las emociones involucradas en el uso. Se mide el disfrute (o frustración) del usuario en la realización de la tarea. La métrica que se evalúa por lo general es el resultado de:
Encuesta de satisfacción
U1-Tarea 1: colocar el valor a partir de la encuesta.
Valoración:
Muy Dificil (5)
Dificil (4)
Indistinto (3)
Sencillo (2)
Muy Sencillo (1)
No va, es para guiar el uso del template.
El NPS es un índice que mide la disposición de los clientes hacia tu empresa, clasificándolos en tres grupos: Promotores, Pasivos y Detractores. Los Promotores son clientes cuyas experiencias contigo han sido por demás positivas y están predispuestos a recomendarte.
NPS
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
NPS
En una escala del 0 al 10 ¿Qué tan probable es que recomiende
nuestra empresa, producto o servicio a un amigo o colega?
 donde 0 es «Muy improbable» y 10 es «Definitivamente lo recomendaría»
Promotores: 9 a 10
Pasivos: 7 u 8
Retractores: 6 o menos
% Promotores: #Promotores/100 % Retractores: #Retractores/100
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Busca establecer un puntaje en función de la facilidad para realizar una tarea. Inmediatamente después que el usuario efectúa una tarea, se debe preguntar al usuario:
CUSTOMER EFFORT SCORE (CES)
¿Qué tan sencillo fue realizar LA TAREA hoy?
-Muy sencillo (1). -Sencillo (2). -Indistinto (3). -Difícil (4). -Muy difícil (5).
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Esta métrica permite obtener el porcentaje de abandono en el uso del producto, a través el número de usuarios que han dejado de utilizar una funcionalidad o producto en un largo período de tiempo.
CHURN RATE
(TASA DE CANCELACIÓN)
Churn =
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
HERRAMIENTAS
Usar para slides de sólo texto. Si no alcanza,no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
MÉTRICAS PARA APLICACIONES MÓVILES
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Cantidad de descargas de la aplicación.
Número de usuarios activos.
Ingreso promedio por usuario (ARPU).
Valoración y comentarios de usuarios mes a mes, en iTunes o Playstore.
App Attribution: realizar un seguimiento de las fuentes que llevan a los usuarios a la aplicación.
Crash: con qué frecuencia la aplicación se cierra bruscamente mientras un usuario está usándola.
Velocidad de la aplicación.
MÉTRICAS PARA APLICACIONES MÓVILES
HERRAMIENTAS
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
MODELOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
MODELO SMART
El modelo SMART, creado por George T. Dorian, se basa en un modelo que ayuda a la definición de métricas, basadas en objetivos inteligentes, posibles y eficaces.
¿QUÉ ES EL MODELO SMART? 
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Este modelo responde al acrónimo (SMART): 
ESpecíficos (Specific)
Medibles (Measurable)
Alcanzables (Achievable)
Relevantes (Relevant)
Temporales (Timely), en el sentido de que sea posible hacer un seguimiento de su evolución en el tiempo.
MODELO SMART
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
MODELO HEART
El modelo HEART es una técnica creada por Google que se puede aplicar para reutilizar las métricas simples en insights cuantitativos y medibles que son útiles para la mejora de la experiencia de usuario de un producto completo o solo de una característica específica.
¿QUÉ ES EL MODELO HEART? 
Happiness (Felicidad): Se miden las actitudes de los usuarios (NPS, Satisfacción, Customer Effort Score)
Engagement (Compromiso): Se basa en la medición del nivel de participación del usuario. (Número de visitas en una cantidad de tiempo de un usuario, tiempo de sesión por usuario)
Adoption (Adopción): Busca medir si el producto es usado por nuevos usuarios ( cuánto usuarios nuevos se registran en un periodo de tiempo, el porcentaje de compras realizadas por nuevos usuarios, cuanta gente se ha bajado la nueva versión, etc)
¿EN QUÉ CONSISTE? 
Retention (Retención): Es la tasa con la que los usuarios regresan a utilizar un producto. (Número de usuarios activos en un periodo de tiempo que siguen utilizando el producto en un periodo de tiempo posterior, la tasa del fracaso en la retención “churn”)
Task success (Tasa de éxito): Se basa en establecer “goals” en nuestro producto y medirlos (Efectividad, eficiencia)
¿EN QUÉ CONSISTE? 
1
2
3
¿CÓMO APLICAR HEART?
Definir Objetivos para cada letra de H.E.A.R.T
Establecer las Señales
Definir las Métricas y herramientas que se van a usar para medir
Usar para slides de texto con gráfico de etapas/pasos.
Definir para cada “letra” del modelo, qué es lo que se busca.
 
Ejemplo: 
Para Happiness (Felicidad): Que Los usuarios encuentren la app divertida y fácil de usar.
1
DEFINIENDO OBJETIVOS
Modelo Heart
Las señales son los “indicadores” que reflejan las actitudes o sentimientos de los usuarios hacia un sistema por medio de acciones, y que son sensibles a los cambios en el diseño
 
Ejemplo: 
Para Happiness (Felicidad): Que los usuarios respondan encuestas, dejan feedback, participen de sorteos
2
ESTABLECER SEÑALES
Modelo Heart
Se trata establecer la métrica concreta y definir con qué herramienta se va a medir (encuestas, Analytics, hotjar, prueba de usabilidad, etc)
 
Ejemplo: 
Para Happiness (Felicidad): 
NPS (Net Promoter Score)
Encuestas de satisfacción
5 Estrellas
3
DEFINIR MÉTRICAS
Modelo Heart
¿CUÁNDO APLICAR H.EA.R.T.?
Antes de lanzar el producto (app, web)
Cada vez que se vaya a lanzar una nueva funcionalidad
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
EN RESUMEN ….
		GOALS 
(Objetivos)	SIGNALS 
(Señales)	MÉTRICS
Métricas
	Happiness 
(Felicidad)	Los usuarios encuentren la app divertida y fácil de usar	Responden encuestas, dejan feedback, votan y participan	NPS (Encuesta)
Satisfacción( Encuesta)
	Engagement (Compromiso)	Los usuarios disfrutan el contenido de la app y lo utilizan constantemente	Pasan más tiempo en la app	Promedio de sesiones (Analytics)
Número de conversiones 
	Adoption 
(Adopción)	Nuevos usuarios ven valor en el uso del producto o nueva funcionalidad	Descargan, y utilizan la app, o la nueva funcionalidad	Número de descargas 
Número de registros
Usuarios x nueva funcionalidad
	Retention (Retención)	Los usuarios utilizan la aplicación constantemente 	Permanecen activos en la app, renuevan suscripción	Chrun
Renovación suscripciones
	Task Success 
(Tasa de éxito)	Los usuarios completan las tareas rápido y fácilmente	Completan las tareas eficientemente 	Efectividad 
Eficiencia
MAPAS DE CALOR
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Un mapa de calor no es más que un gráfico que resalta mediante distintos colores las zonas de la web en las que más tiempo pasa el mouse o puntero de nuestro visitante. 
Para sacar dichas conclusiones básicamente sigue el puntero del visitante y también analiza el número de clics que realiza en los diferentes espacios de la página.
MAPAS DE CALOR
Este concepto de mapa de calor proviene de algo que ya se viene utilizando habitualmente en el marketing, el eye tracking, que se dedica a descubrir dónde miramos cuando nos ponen delante un texto o imagen.
Mapa de calor
Usar para slides de texto con imagen.
PROBLEMA
Se necesita una muestra amplia para poder presentar unos resultados coherentes y útiles. 
Es decir, para que podamos fiarnos de los resultados, tendremos que tenerlos rastreando nuestras visitas durante un espacio de tiempo amplio para que consiga reconocer el comportamiento de una gran cantidad de usuarios.
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
Este tipo de mapa recoge los movimientos que un usuario realiza con el ratón dentro de un sitio web.
Aunque este tipo de mapas, no recoge los clics que el usuario realiza puede ser algo más inexacto, nos da información acerca de por dónde pasa el usuario el ratón en nuestra web.
Mapa de movimientos del cursor
Usar para slides de texto con imagen.
Este otro mapa nos indica donde los usuarios han hecho click. Este tipo de mapas, nos ofrecen información más certera porque nos indica que el usuario ha realizado una acción más concreta en nuestro sitio. 
Además podremos saber qué parte de nuestra web es más propensa a recibir clics por parte de los usuarios.
Mapa de clics
Usar para slides de texto con imagen.
Este sería el último tipo de mapa de calor que nos muestra hasta dónde hacen scroll los usuarios, donde dejan de hacerlo e incluso en qué zonas se presta más atención. 
Ideal para conocer cuánto scroll están dispuestos a hacer nuestros usuarios.
Mapa de scroll
Usar para slides de texto con imagen.
Cambio de imagen --> cambio de mapa de calor
Usar para slides de imagen completa.
HERRAMIENTAS
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¡PARA PENSAR!
Si quiero medir si logro la tarea o no en mi app, necesito observar las métricas de…..
COMPLETÁ LO QUE FALTA
CONTESTA LA ENCUESTA DE ZOOM
COMPLETA LO QUE FALTA
Duración estimada: 3 minutos
Espacio:Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break. 
Pregunta: Si quiere medir el rendimiento de uso de mi app, necesito observar las métricas de…..
Opciones:
Satifacción
Eficiencia
Eficacia
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
PROTOTIPO FUNCIONAL
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
¿RECUERDAN QUE HABLAMOS
DE FIDELIDAD?
La fidelidad visual refiere al estilo gráfico del prototipo. Cuanto más parecido al producto final sea nuestro mockup es más alta es su fidelidad visual.
VISUAL
La fidelidad de contenido refiere a la palabra escrita. La fidelidad del contenido será alta cuando el texto que contenga el prototipo sea el real.
CONTENIDO
La fidelidad de funcionalidad refiere al nivel de interacción que puede o no tener el prototipo es decir, si es un prototipo estático creado con pantallas que no se vinculan entre sí, o bien si es un prototipo interactivo donde las pantallas que lo componen están vinculados entre sí.
FUNCIONALIDAD
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
BUENO… VAMOS A ENFOCARNOS EN LA FIDELIDAD DE FUNCIONALIDAD
DEL PROTOTIPO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿QUÉ ES?
Un prototipo es un primer modelo que sirve como representación o simulación del producto final y que nos permite verificar el diseño y confirmar que cuenta con las características específicas planteadas.
PROTOTIPO FUNCIONAL
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿PARA QUÉ NOS SIRVE?
Poder incluir las modificaciones necesarias en la fase de desarrollo. Esto nos permite aportar nuevas y mejores funcionalidades, lograr diseños inmejorables, detectar los cambios necesarios para que el producto tenga una mejor aceptación en el mercado e incluso hacer descartes cuando el proyecto no es viable.pido
1
APRENDER RÁPIDO
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
Verifiquen y determinen cómo va a reaccionar el producto ante diferentes situaciones como el movimiento, los cambios de temperatura, la luz, el uso y el tiempo.
2
REALIZAR PRUEBAS
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
Los prototipos se analizan y se evalúan para detectar errores y posibles mejoras, confirmar que cuenta con las características deseadas y asegurar que se puede adaptar al proceso productivo. Esto permite ahorrar grandes costes y evita detectar algún fallo cuando ya se está fabricando en serie.
3
TESTEAR
Usar para slides de texto con iconos. Sacar íconos de https://www.flaticon.com/
ÉSTAS PRUEBAS Y TESTEOS LOS REALIZAREMOS EN LA CLASE 13. ES IMPORTANTE QUE EL PROTOTIPO FUNCIONAL ESTÉ LISTO PARA ESE DIA.
DISPARADOR - ACCIÓN - DESTINO
Tanto en Figma como Adobe XD podemos hacer conexiones entre frames para crear flujos, o rutas, a través de nuestro diseño interactivo (sea app o web). Para comprender cómo hacerlo debemos entender a qué nos referimos con “Disparador” - “Acción” y “Destino”. Vamos a ver cada uno de ellos.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Es donde tendrá lugar la interacción del usuario. Un “disparador” o “punto de acceso” puede ser el frame en sí o un objeto dentro del frame (botón, icono o encabezado). 
Disparador
La flecha azul que que conecta el punto de acceso al destino representa la acción. Determinamos tanto la interacción como la animación a través de la conexión.
Acción
Es el siguiente paso en nuestro prototipo, donde termina esta conexión o acción específica. El destino debe ser siempre un frame y no un objeto dentro del marco.
Destino
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
VEAMOS SU ANATOMIA
Disparador
Acción
Destino
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
OPCIONES EN ADOBE XD Y FIGMA
TANTO EL “DISPARADOR” COMO LA “ACCIÓN” TIENEN UNA SERIE DE ÍTEM QUE LO INICIAN O CONEXIÓN ENTRE LOS FRAMES RESPECTIVAMENTE.
Disparador
Acción
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿PUEDO VISUALIZAR MI PROTOTIPO
EN MI CELULAR?
En Figma podes elegir el tipo de dispositivo donde quieres que se visualice.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
En Adobe XD se te abrira una ventana aparte.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
TE RECOMIENDO QUE BAJES
ÉSTAS APP PARA TU CELULAR
Para ver el prototipo en tiempo real. Adobe XD.
Adobe XD
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Para ver el prototipo en tiempo real. FIGMA.
Figma Mirror
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿YA TENGO QUE PENSAR TODAS LAS INTERACCIONES ENTRE FRAMES Y ELEMENTOS?
NO… VAMOS A EMPEZAR CON LO SIMPLE. LO NECESARIO PARA PODER HACER LAS PRUEBAS DE USABILIDAD.
VAMOS A RELACIONAR ELEMENTOS DE UN FRAME 1 CON UN FRAME 2 O UN FRAME 1 CON UN FRAME 2 .
INCORPORANDO FUNCIONALIDAD
AL PROTOTIPO
Paso a paso
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Incorporar Funcionalidadal prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Definir el “Disparador”
Mayormente usamos el activador “Al hacer clic / Al Tocar”. A medida que vayamos complejizando el prototipo podemos usar las otras opciones.
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Definir la “Acción”
Mayormente usaremos la acción “Navegar a”. A medida que vayamos complejizando el prototipo podemos usar las otras opciones.
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Definir la “Destino”
Recorda que siempre el destino es un “FRAME”. Para poder trabajar correctamente te recomiendo que los frames tienen bien identificado el nombre. 
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Relacionando FRAMES
También podemos usar directamente el círculo celeste para relacionar elementos de frame 1 con un frame 2 o un frame 1 con un frame 2.
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguirel recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Identificar dónde comienza el prototipo funcional
Recordá siempre identificar el ícono de “casa” o “play” para saber donde empieza el prototipo. 
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
Visualizar el Prototipo
Tocando el botón”play” superior podemos ver como funciona el prototipo que acabamos de hacer. Esto mismo lo podemos probar con las app de adobe xd y figma mirror en nuestro celulares. Tocando la letra “R” el prototipo vuelve a comenzar.
Incorporar Funcionalidad al prototipo: Paso a Paso
Duración estimada: 60 minutos 
Herramientas: Adobe XD y Figma
Documento: Wireframes para app y web disponible en ambos programas.
Consigna: El docente realizará el Prototipo funcional. deberá quedar en claro qué la relación de Prototipo funcional se puede dar de frame a frame o de elemento de un frame a frame. Seguir el recorrido de la funcionalidad principal relacionado los frame. Se debe clarificar la estructura Disparador, Acción y Destino. Por ejemplo: Al tocar (disparador) Navegar a (Acción) Frame 2 (Destino). 
NOTAS:
1. Mostrar el apartado de Interacción del programa. 
2. Comprender la estructura Disparador----Acción-----Destino
¿Cómo llevar adelante la actividad?
Los pasos a seguir en el armado son: 
Paso 1: Definir el disparador y hablar de las posibles opciones.
Paso 2: Definir la acción y hablar de las posibles opciones.
Paso 3: Definir el destino y hablar de que siempre se relaciona un frame con frame o elementos de un frame con un frame. 
Paso 4: Mostrar cómo relacionar frame usando las flechas directamente.
Paso 5: Hablar acerca de definir dónde comienza el prototipo con el icono de la casa.
Paso 6: Mostrar cómo se visualiza el prototipo tocando “play”. En ambos casos se debe mostrar la app Figma Mirror o Adobe XD en el celular.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos 
2. Concepto Prototipo Funcional básico (Interacción y Acción) - (HOY ESTAMOS ACA)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
VAYAMOS AL PROGRAMA DE PROTOTIPADO Y VEAMOS COMO FUNCIONA TODO LO QUE VIMOS
LLEGÓ EL MOMENTO.. VAMOS A INCORPORAR PATRONES A NUESTRO WIREFRAME DIGITAL
PROTOTIPO FUNCIONAL
A partir de todos los wireframes diseñados, comenzar a construir un Prototipo funcional qué responda al caso de uso y userflow planteado. Tener presente las tres instancias
 (Disparador - Acción - Destino)
Comenzar a incorporar los textos reales.
	PROTOTIPO FUNCIONAL		
	Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “PrototipoFuncional+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el link directo en la entrega.
Sugerencia: activar comentarios en el archivo.		
	>> Consigna: A partir de todos los wireframes diseñados, comenzar a construir un Prototipo funcional qué responda al caso de uso y userflow planteado. Tener presente las tres instancias (Disparador - Acción - Destino).
Aspectos a tener en cuenta:
- En esta primera instancia se desarrollarán las pantallas principales con sus lógicas en la navegación, para así lograr la navegabilidad en las pantallas.
- Lograr cierta navegabilidad, un “camino feliz” qué atienda a las necesidades qué se plantearon durante la etapa de confección de Userflow.		
			
	PROTOTIPO FUNCIONAL		
	Fidelidad del Prototipo:
Media de Contenido:
Comenzar a incorporar textos reales a los párrafos de texto, cards, entre otros. 
Media Visual:
Con la incorporación de los patrones de diseño el Prototipo aumenta su fidelidad visual.
Baja/Media de Funcionalidad:
Se incorpora el concepto de la estructura disparador-acción-destino dotando a Prototipo de mayor funcionalidad.
		
			
¡IMPORTANTE!
Los desafíos tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas al día. 
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
TE INVITAMOS A QUE MIRES LOS SIGUIENTES CODERTIPS DE LA CLASE 11
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Qué es y cómo usar Figma | Luana Marques | ENLACE ACA |
VIDEOS Y PODCAST
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
Crear prototipos funcionales
Entender la importancia de obtener métricas en productos digitales. Definir las métricas con las que se medirá nuestro producto
Entender las distintas métricas y herramientas paramedir la experiencia de una app o sitio web
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINÁ Y VALORÁ ESTA CLASE
Obligatoria siempre.