Clase 8 Prototipado (Wiframe a Mano) _ Creatividad_

Vista previa del material en texto

PROTOTIPO (WIFRAME A MANO)
& CREATIVIDAD
 Clase 08. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MAS RELEVANTE DE LA CLASE 7
Taskflow (Diagrama de tareas): Se enfoca en las tareas que tiene que realizar el usuario en cada paso para llegar a un objetivo.
FlowChart (Diagrama de flujo): Cada paso en la secuencia se anota dentro de una forma de diagrama. Los pasos están vinculados mediante líneas de conexión y flechas direccionales.
GLOSARIO:
Clase 7
Userflow (Diagrama de usuario basado en el diagrama de flujo): es una manera de representar gráficamente un proceso a través de una serie de pasos bien estructurados y relacionados que permiten comprender un todo. Suelen utilizarse una serie de figuras geométricas que representan cada paso del proceso.
Clase 8
Prototipado
Clase 7
Userflow
USERFLOW
ARMANDO EL USERFLOW
ENTREGA PROYECTO 2
LAS 8 IDEAS
Clase 9
Prototipado (Wireframes Digital) & Interfaz
GENERANDO WIREFRAMES DIGITAL EN ADOBE XD 
O FIGMA
ELEGIR EL TIPO DE APP
WIREFRAMES DIGITALES
CRONOGRAMA DEL CURSO
Armar un wireframe a mano del proyecto. En web comenzar desde mobile (Mobile First).
Introducirnos en el concepto de prototipado dentro del proceso de diseño centrado en el usuario (diseño).
Fortalecer las capacidades en ideación y creatividad.
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
Design Thinking
Diseño Centrado en el Usuario
Arq de Información
MVP
WIREFRAME A MANO 
CRAZY 8
INTERFAZ
CREATIVIDAD
FIDELIDAD
VISUAL
CONTENIDO
FUNCIONALIDAD
MAPA DE CONCEPTOS CLASE 8
¿ARRANCAMOS?
Luego de tener un análisis del producto con el usuario, relevamiento y recopilación de información, vamos a plasmar todas las ideas y conceptos en estructuras y elementos que van a componer la interfaz. Vamos a comenzar a prototipar nuestro producto digital.
ETAPAS DE DISEÑO UX A UI
(POST ANÁLISIS)
¿POR QUÉ PROTOTIPAR?
Los prototipos nos permiten explorar nuestras ideas antes de invertir tiempo y dinero en el desarrollo.
1
EXPLORAR IDEAS
Lejos de ser una pérdida de tiempo, trabajar con prototipos nos permiten crear múltiples soluciones para poder "fallar rápido y barato". Un prototipo no necesita estar completo ni ser bonito, sino ser eficiente, rápido, barato y fácil de construir.
2
FALLAR BARATO Y RÁPIDO
Cuando hablamos de un prototipo nos referimos al primer dispositivo que se desarrolla de algo y que sirve como modelo o muestra para su posterior fabricación. En síntesis, un prototipo es una versión preliminar de un diseño, que puede ser un producto físico o digital.
3
PRIMERA APROXIMACIÓN AL PRODUCTO 
WIREFRAMES 
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 wireframe es un boceto donde se representa visualmente, de una forma muy sencilla y esquemática, la estructura de una Interfaz. El objetivo de estos es definir el contenido y la posición de los bloques de información. Esto incluye menús de navegación, bloques de contenido y otros elementos.
Además, te permite entender cómo interactuarán estos elementos entre sí.
WIREFRAMES
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.
EVOLUCIÓN DEL PROTOTIPO
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.
SKETCH
WIREFRAME
MOCKUP O PROTOTIPO FUNCIONAL
DEVELOP
Wireframe a mano
ó Sketch
Wireframe digital
Prototipo Funcional
ó Mockup
Develop
Baja
Alta Fidelidad
FIDELIDAD VISUAL
FIDELIDAD DE FUNCIONALIDAD
FIDELIDAD DEL CONTENIDO
Estático
Interactivo
Texto Simulado
Texto Real
RAPIDO
LENTO
BARATO
CARO
Wireframe a mano
ó Sketch
Wireframe digital
Prototipo Funcional
ó Mockup
Develop
Baja
Alta Fidelidad
FIDELIDAD VISUAL
FIDELIDAD DE FUNCIONALIDAD
FIDELIDAD DEL CONTENIDO
Estático
Interactivo
Texto Simulado
Texto Real
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.
El prototipo de tipo sketch es el más rudimentario de todos, de hecho es la primera aproximación a la idea del producto, nos permite comenzar a materializar la idea que tenemos en nuestras cabezas sobre una solución de diseño.
Sketch ó Wireframe a mano
/ baja fidelidad
Usar para slides de texto con imagen.
Párrafo de Texto
Imágenes
Botones
Elementos especiales (ej: buscador, pestañas, slider de fotos)
iconos (genéricos)
títulos
listado de elementos
No debe haber demasiado detalle en el uso de las formas
Al ser representaciones tan simples, te permiten crear múltiples versiones de un mismo proyecto de una forma rápida, así como aplicar cambios o nuevas ideas.
Lo importante es tener clara la estructura antes de empezar con el desarrollo.
Beneficios
Usar para slides de texto con imagen.
El wireframe digital posee mayor nivel de detalle, pero siguen siendo representaciones esquemáticas de los elementos que formarán parte de la interfaz del usuario.
Wireframes digital o
fidelidad Baja / Media
Usar para slides de texto con imagen.
Es el entregable final, la interfaz de usuario donde se aplica el diseño visual al diseño de interacción.
Mockup o Wireframes en
Alta Fidelidad
Usar para slides de texto con imagen.
Corresponde a la codificación de cada una de las pantallas, basada en el sistema operativo en el cual se decida trabajar.
Develop
Usar para slides de texto con imagen.
¿ENTONCES SIEMPRE TENGO QUE HACER TODOS ESTOS PROTOTIPOS?
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.
Noooooooooooooooo!!!! solo aquellos que nos permitan llegar lo más rápido posible a nuestro objetivo y con el menor costo posible.
Si estamos diseñando un proyecto de 0, es muy probable que pasemos por todos estos estadíos de madurez del prototipo, conforme nuestro proyecto va avanzando, por lo contrario, si estamos diseñando una nueva característica de nuestro producto posiblemente hagamos directamente el mockup ya que como contamos con mucho material previo, posiblemente de esta forma logremos llegar más rápido.
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.
RESPONSIVE DESIGN 
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.
Son todas esas técnicas o patrones que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de dispositivos posibles.
RESPONSIVE DESIGN
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.
Resoluciones de pantalla en teléfonos Android
¿Qué hay que tener en cuenta?
ADAPTACIÓN, NO TRASLADO LITERAL
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.Distancia de lectura entre usuario - dispositivo
Affordance. Elemento de interacción (mouse) o dedo
Tamaño de la pantalla
VAMOS CON UN EJEMPLO
NYT en épocas donde no era responsive
The Boston Globe aplicando Responsive Design
¿Y SI LO VEMOS AL REVÉS?
The Boston Globe aplicando Responsive Design
CONCEPTOS PRINCIPALES
Es el área que está disponible en la pantalla del navegador.
No confundir con el tamaño total de la pantalla del dispositivo.
Viewport
Usar para slides de texto con imagen.
Son una característica de CSS3. 
Permiten obtener datos sobre el navegador del visitante y usar estilos de manera condicional según dichos datos.
Media Queries
Usar para slides de texto con imagen.
Significa abandonar los pixels y dar lugar a los porcentajes y ems que son unidades de medida relativa. Transformar el layout de pixels a una unidad de medida relativa.
Utilizando grillas flexibles el diseño modifica su ancho en relación a la pantalla en la cual se está mostrando.
Grillas
Usar para slides de texto con imagen.
Cargar imágenes grandes y modificar sus atributos HTML
Acortar imágenes con CSS
Múltiples versiones de la imagen en el servidor
Ocultar imágenes
Imágenes flexibles
Usar para slides de texto con imagen.
No creamos breakpoints orientados a dispositivos porque es imposible generar tantos saltos como tipos de pantallas y sus resoluciones existen.
Partiendo de la ventana con dimensiones reducidas (mobile first) vas estirando la anchura hasta que comienzas a apreciar que tu diseño está viéndose peor. Ahí hay un breakpoint.
Breakpoints
Usar para slides de texto con imagen.
Diseñar por porcentajes, no por pixeles.
Diseñar para pantallas, no para dispositivos. 
Diseñar para tocar, no para clicks.
Diseñar para pantallas pequeñas primero.
CONCLUSIÓ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.
MOBILE FIRST 
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.
Implica plantear el proceso de diseño teniendo en cuenta el 
teléfono en primer lugar. 
La ventaja de esta forma de trabajo es que obliga a pensar en el teléfono como punto de partida, concentrándose en lo esencial de un producto y a hacer foco sólo en lo que tiene sentido para este dispositivo.
MOBILE FIRST
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.
Una vez que la aplicación está diseñada, podemos preguntarnos cuál es la mejor forma de llevar lo hecho para el teléfono, extendiendo y escalando el contenido y repensando la diagramación. 
Todos los dispositivos tienen usos diferentes, hay que tener en cuenta las características particulares de cada uno de ellos.
MOBILE FIRST
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.
Proceso de diseño Mobile First
Proceso de diseño Mobile First
Tienes una concepción global de todo el contenido
desde el comienzo. 
Debes crear una jerarquía del contenido según la importancia
y ubicación de cada resolución.
1
VENTAJAS
Mejora el rendimiento en las resoluciones inferiores. 
Antes teníamos todas las clases CSS que se aplicaban a la versión por defecto (que era la de escritorio) y mediante media queries íbamos sobreescribiendo las reglas de escritorio para los dispositivos móviles. Esto daba lugar a que en el teléfono se aplicarán las reglas establecidas para el diseño de escritorio y después sobre escribíamos las indicadas para una resolución menor.
2
VENTAJAS
Estás diseñando para el futuro. 
Olvidémonos de las resoluciones estándar del iPhone y del iPad. 
Diseñar según el contenido y establecer saltos y media queries que sean necesarios para una correcta experiencia de usuario con esos contenidos.
3
VENTAJAS
Resulta más sencillo tener pocos elementos e ir agregando más cosas a medida que van creciendo, que empezar por el diseño para pantallas grandes y luego ir quitando cosas cuando no entran.
AHORA... A TRABAJAR!
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.
¡PARA PENSAR!
¿Si voy a realizar un prototipo de website debo empezar a bocetarlo para que tipo de dispositivo?
MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
MULTIPLE CHOICE
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 voy a realizar un prototipo de website debo empezar a bocetarlo para que tipo de dispositivo?
Opciones:
DESKTOP
MOBILE
WATCH
GRAN TAMAÑO
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
WIREFRAME A MANO
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.
MANOS A LA APP! JAJAJ 
VAMOS A EMPEZAR A GENERAR NUESTROS WIREFRAMES A MANO ó SKETCH
¿COMO?
RESEARCH GENERATIVO
Focus groups
Entrevistas individuales
Entrevistas en contexto
Encuestas
Desktop research
Mapa de Empatia
G
RESEARCH EVALUATIVO
Pruebas de usabilidad
Encuestas interactivas
Mapas de calor
Recording sessions
Card sorting
Análisis de métricas
Observaciones en campo
E
IDEACIÓN
Brainstorming
Workshops
Sesiones de ideación
Benchmarking
Arquitectura de Información
Diagrama de Usuarios
I
Fuente: Google design sprint 
MAPEAR
BOCETAR
DECIDIR
PROTOTIPAR
TESTEAR
RESEARCH GENERATIVO
G
RESEARCH EVALUATIVO
E
IDEACIÓN
I
EL LUGAR EN EL PROCESO DE DISEÑO
PARA ESO VAMOS A EJERCITAR NUESTRA CREATIVIDAD
Usar para slides de sólo texto con citas.
RECORDA
Adopta una mentalidad abierta en tus sesiones de ideas.
Todas las ideas son válidas en esta instancia.
1
POSTERGAR JUICIOS DE VALOR
Incluso una idea descabellada, que podría no implementarse jamás, puede llevarte a la próxima innovación radical.
2
FOMENTAR LAS IDEAS ABSURDAS, EXTREMAS Y RADICALES
Una buena práctica es continuar una conversación diciendo: “para aprovechar esto que acabas de decir…”
3
CONSTRUIR SOBRE LAS IDEAS DE LOS DEMÁS INTEGRANTES
Escuchá cada idea de cada persona antes de anotarla: casi siempre, las ideas de los demás inspirarán las mejores ideas del resto del grupo.
4
UNA CONVERSACIÓN A LA VEZ
Dibujá o escribí tus ideas en post-it o en hojas de papel
5
SER VISUAL PARA EXPLICAR
Intentá tener entre 40 y 50 ideas como mínimo en cada sesión de brainstorming
6
PRIORIZAR CANTIDAD SOBRE CALIDAD
BUSCAMOS LLEVAR ADELANTE UN PENSAMIENTO CREATIVO DE DIVERGENCIA Y CONVERGENCIA 
PARA PODER LLEVAR ADELANTE ESTE PENSAMIENTO CREATIVO NOS VAMOS AYUDAR CON LA ACTIVIDAD “8 IDEAS O CRAZY 8S” 
“Crazy 8's es un método básico de Design Sprint. Es un ejercicio de dibujo rápido que desafía a las personas a esbozar ocho ideas distintas en ocho minutos. El objetivo es ir más allá de su primera idea, con frecuencia la menos innovadora, y generar una amplia variedad de soluciones para su desafío ". - Recogido por Google
CRAZY 8S
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.
PRIMERO PASAREMOS POR UNA ETAPA DIVERGENTE BUSCANDO ABRIR LA MENTE Y BOCETAR LA MAYOR CANTIDAD DE INTERFACES PARA NUESTRO PRODUCTO DIGITAL
LUEGO PASAREMOS POR UNA ETAPA CONVERGENTE, Y VOTAREMOS COLABORATIVAMENTE LAS MEJORES SOLUCIONES DE CADA UNO DE USTEDES.
¿CÓMO LA LLEVAREMOS ADELANTE?
Tienes que tener un problema. El problema es la razóndetrás de su desafío.
REQUISITO
Interpretar una idea y generar una solución a su desafío.
META
8 ideas distintas en forma de texto, imágenes o ilustraciones.
ENTREGABLE
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.
PASO A PASO
SETUP
1
2
REGLAS
3
4
IDEAS
CIERRE
Tendrás que tener a mano un papel de impresora y doblarlo en 8 y preparar nuestros lápices.
1
SETUP
Definir el tiempo y poner un timer en el celular.
En su versión original el tiempo es de 1 minuto.
PARA NUESTRA ACTIVIDAD USAREMOS 2 MINUTOS, ¿POR QUE? ESTAMOS ENTRENANDO Y NOS VA VENIR BIEN ESE TIEMPO EXTRA.
2
REGLAS
Dibujar una posible solución en uno de los segmentos.
Cuando suene el timer pasamos a otro segmento y pensamos otra idea!
3
IDEAS
Le sacamos una foto a cada uno de los segmentos y los subimos en este archivo. Usamos la técnica de Dot Voting para votar.
4
CIERRE
 LAS 8 IDEAS 
8 bocetos en pocos minutos
TIEMPO: 30 MIN
(16 minutos aprox para la generación de los 8 bocetos y 14 minutos aprox para hacer la votación de los estudiantes)
Las 8 ideas
Tiempo estimado: 30 minutos máx (16 minutos aprox para la generación de los 8 bocetos y 14 minutos aprox para hacer la votación de los estudiantes)
Espacio: Zoom general para la primera parte (generación de los 8 bocetos) y Breakout Rooms para la segunda parte (votación de los estudiantes)
Documento Compartido Guía: Se encuentra en la carpeta de la clase.
PARTE 1: Generación de los 8 bocetos
1. SETUP: tener un papel A4 a mano y doblarlos para qué queden 8 partes iguales.
2. REGLAS: 2 minutos para cada dibujo, el objetivo es qué hagan un boceto rápido de la pantalla inicial o principal de la app.
3. IDEAS: cronometrar los dos primeros minutos, dar una pequeña pausa y continuar con el segundo. Esto se dará hasta completar los 8 bocetos. Se puede acompañar con música.
EN EL MEDIO DE LA PARTE 1 Y 2: solicitar a los alumnos qué saque fotos a sus bocetos y suba al documento compartido “DOCUMENTO: Las 8 Ideas” las imágenes. también deberán colocar al costado de tu slide tu POV o declaración significativa.
PARTE 2: Votación de los estudiantes
4. Cierre: primero los estudiantes se sacaran fotos a sus bocetos y los subirán al "archivo compartido guía". Los tutores guiarán la instancia de votación en las comisiones. Usaremos el dotvoting para votar. 
Dotvoting: Cada estudiante tendrá el doble de dot como estudiantes hayan en la comisión. Cada estudiante podrá colocar hasta 2 dot por proyecto de sus compañeros (respetar esta consigna). ¿como elegir cual? Bueno. La mejor solución al problema identificado. 
NOTA: los tutores deben duplicar la ppt por cada comisión y duplicar los slide por la cantidad de alumnos que tenga.
8 BOCETOS EN POCO TIEMPO
PARTE 1: GENERACIÓN DE LOS 8 BOCETOS
1. SETUP: tener un papel A4 a mano y doblarlos para que queden 8 partes iguales.
2. REGLAS: 2 minutos para cada dibujo, el objetivo es que hagan un boceto rápido de la pantalla inicial o principal de la app.
3. IDEAS: cronometrar los dos primeros minutos, dar una pequeña pausa y continuar con el segundo. Esto se dará hasta completar los 8 bocetos. Se puede acompañar con música.
NOTA: usaremos los breakoutsrooms. El tutor guía la actividad.
Las 8 ideas
Tiempo estimado: 30 minutos máx (16 minutos aprox para la generación de los 8 bocetos y 14 minutos aprox para hacer la votación de los estudiantes)
Espacio: Zoom general para la primera parte (generación de los 8 bocetos) y Breakout Rooms para la segunda parte (votación de los estudiantes)
Documento Compartido Guía: Se encuentra en la carpeta de la clase.
PARTE 1: Generación de los 8 bocetos
1. SETUP: tener un papel A4 a mano y doblarlos para qué queden 8 partes iguales.
2. REGLAS: 2 minutos para cada dibujo, el objetivo es qué hagan un boceto rápido de la pantalla inicial o principal de la app.
3. IDEAS: cronometrar los dos primeros minutos, dar una pequeña pausa y continuar con el segundo. Esto se dará hasta completar los 8 bocetos. Se puede acompañar con música.
EN EL MEDIO DE LA PARTE 1 Y 2: solicitar a los alumnos qué saque fotos a sus bocetos y suba al documento compartido “DOCUMENTO: Las 8 Ideas” las imágenes. también deberán colocar al costado de tu slide tu POV o declaración significativa.
PARTE 2: Votación de los estudiantes
4. Cierre: primero los estudiantes se sacaran fotos a sus bocetos y los subirán al "archivo compartido guía". Los tutores guiarán la instancia de votación en las comisiones. Usaremos el dotvoting para votar. 
Dotvoting: Cada estudiante tendrá el doble de dot como estudiantes hayan en la comisión. Cada estudiante podrá colocar hasta 2 dot por proyecto de sus compañeros (respetar esta consigna). ¿como elegir cual? Bueno. La mejor solución al problema identificado. 
NOTA: los tutores deben duplicar la ppt por cada comisión y duplicar los slide por la cantidad de alumnos que tenga.
8 BOCETOS EN POCO TIEMPO
PARTE 2: VOTACIÓN DE LOS ESTUDIANTES
4. Cierre: primero los estudiantes sacarán fotos a sus bocetos y los subirán al "archivo compartido guía". Los tutores guiarán la instancia de votación en las comisiones. Usaremos el dotvoting para votar. Dotvoting: Cada estudiante tendrá el doble de dot como estudiantes hayan en la comisión. Cada estudiante podrá colocar hasta 2 dot por proyecto de sus compañeros (respetar esta consigna). ¿como elegir cual? Bueno. La mejor solución al problema identificado.
NOTA: los tutores deben duplicar la ppt por cada comisión y duplicar los slide por la cantidad de alumnos qué tenga.
Las 8 ideas
Tiempo estimado: 30 minutos máx (16 minutos aprox para la generación de los 8 bocetos y 14 minutos aprox para hacer la votación de los estudiantes)
Espacio: Zoom general para la primera parte (generación de los 8 bocetos) y Breakout Rooms para la segunda parte (votación de los estudiantes)
Documento Compartido Guía: Se encuentra en la carpeta de la clase.
PARTE 1: Generación de los 8 bocetos
1. SETUP: tener un papel A4 a mano y doblarlos para qué queden 8 partes iguales.
2. REGLAS: 2 minutos para cada dibujo, el objetivo es qué hagan un boceto rápido de la pantalla inicial o principal de la app.
3. IDEAS: cronometrar los dos primeros minutos, dar una pequeña pausa y continuar con el segundo. Esto se dará hasta completar los 8 bocetos. Se puede acompañar con música.
EN EL MEDIO DE LA PARTE 1 Y 2: solicitar a los alumnos qué saque fotos a sus bocetos y suba al documento compartido “DOCUMENTO: Las 8 Ideas” las imágenes. también deberán colocar al costado de tu slide tu POV o declaración significativa.
PARTE 2: Votación de los estudiantes
4. Cierre: primero los estudiantes se sacaran fotos a sus bocetos y los subirán al "archivo compartido guía". Los tutores guiarán la instancia de votación en las comisiones. Usaremos el dotvoting para votar. 
Dotvoting: Cada estudiante tendrá el doble de dot como estudiantes hayan en la comisión. Cada estudiante podrá colocar hasta 2 dot por proyecto de sus compañeros (respetar esta consigna). ¿como elegir cual? Bueno. La mejor solución al problema identificado. 
NOTA: los tutores deben duplicar la ppt por cada comisión y duplicar los slide por la cantidad de alumnos que tenga.
RECUERDEN HACER ESTA
ACTIVIDAD A CONCIENCIA
Buscamos fomentar el trabajo colaborativo, muy solicitado en este tipo de trabajos, donde las miradas de todos son las que hacen la diferencia en el resultado final. 
No se está haciendo un juicio de valor, es importante la mirada de sus compañeros en relación a sus bocetos.
Las 8 ideas
Tiempo estimado: 30 minutos máx (16 minutos aprox para la generación de los 8 bocetos y 14 minutos aprox para hacer la votación de los estudiantes)
Espacio: Zoom general para la primera parte (generación de los 8 bocetos) y Breakout Rooms para la segunda parte (votación de los estudiantes)
Documento Compartido Guía: Se encuentra en la carpeta de la clase.
PARTE 1: Generación de los 8 bocetos1. SETUP: tener un papel A4 a mano y doblarlos para qué queden 8 partes iguales.
2. REGLAS: 2 minutos para cada dibujo, el objetivo es qué hagan un boceto rápido de la pantalla inicial o principal de la app.
3. IDEAS: cronometrar los dos primeros minutos, dar una pequeña pausa y continuar con el segundo. Esto se dará hasta completar los 8 bocetos. Se puede acompañar con música.
EN EL MEDIO DE LA PARTE 1 Y 2: solicitar a los alumnos qué saque fotos a sus bocetos y suba al documento compartido “DOCUMENTO: Las 8 Ideas” las imágenes. también deberán colocar al costado de tu slide tu POV o declaración significativa.
PARTE 2: Votación de los estudiantes
4. Cierre: primero los estudiantes se sacaran fotos a sus bocetos y los subirán al "archivo compartido guía". Los tutores guiarán la instancia de votación en las comisiones. Usaremos el dotvoting para votar. 
Dotvoting: Cada estudiante tendrá el doble de dot como estudiantes hayan en la comisión. Cada estudiante podrá colocar hasta 2 dot por proyecto de sus compañeros (respetar esta consigna). ¿como elegir cual? Bueno. La mejor solución al problema identificado. 
NOTA: los tutores deben duplicar la ppt por cada comisión y duplicar los slide por la cantidad de alumnos que tenga.
ACUERDOS
Presencia
Escucha Activa
Apertura al aprendizaje
Todas las voces
ACUERDOS
Presencia
Participar y “estar” en la clase, que tu alrededor no te distraiga.
Escucha Activa
No es lo mismo escuchar que “escuchar”, escuchar más allá de lo que la persona está expresando directamente.
Apertura al aprendizaje
Siempre, pero siempre puedes seguir aprendiendo. Compartir el conocimiento es válido, la construcción colaborativa es la propuesta.
Todas las voces
Escuchar a todos, todos podemos reflexionar. Dejar el espacio para que todos podamos participar.
SEGUNDA ENTREGA DEL PROYECTO FINAL 
¿CUÁNDO?
	SEGUNDA ENTREGA	Userflow (con la Definición de MVP y POV o declaración significativa.
Arquitectura de la Información (con resultados del cardsoring)	Clase 8
			
			
¡IMPORTANTE!
Las entregas del proyecto final 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.
	ENTREGA	REQUISITO	FECHA
	1° entrega	Idea para el prototipo + Arquetipo de Persona	Clase 4
	2° entrega	Userflow + Arquitectura de la Información (Cardsorting)+MVP y POV	Clase 8
	3° entrega	Wireframes/Prototipo en baja + Evolución del prototipo (Sketch+Patrones+WB)	Clase 12
	4° entrega	Wireframe/Prototipado en media fidelidad	Clase 16
	5° entrega	Prototipo en media/alta fidelidad 
+ UI KIT +Moodboard	Clase 19
	Proyecto Final 	Unificación de todas las entregas anteriores	Clase 24
	SEGUNDA ENTREGA DEL PROYECTO FINAL		
	Clase 4	Formato: Archivo en tipo .ppt o .doc o .pdf con el desarrollo de la actividad. Generar un archivo con el nombre “ProyectoFinal+Entrega2+Apellido”. Se puede entregar un google slide también.
Sugerencia: habilitar la opción de comentarios.
Objetivos Generales:
Integrar todos los desafíos entregables del proyecto. 
Chequear y revisar el proyecto.
Generar, en forma de presentación, el detalle de los desafíos anteriores.
Objetivos Específicos:
Crear el Userflow del producto que elegiste desde el inicio hasta la representación principal o main feature. Presentar el MVP y el enunciado del POV.
Realizar la actividad de cardsorting y confeccionar la arquitectura de información de la app a realizar. Presentar los resultados del cardsorting.
Se debe entregar:
Resultados del Cardsorting (matriz de similitud o dendrograma AAM)
Arquitectura de Información (whimsical)
Userflow (whimsical. En caso de tener dos arquetipos se pueden marcar el recorrido de cada uno).
POV o Declaración significativa (seguir la estructura propuesta en clase).
MVP del proyecto.
	
	USERFLOW			ARQUITECTURA DE INFORMACIÓN			
	Aspectos a considerar:
Uso correcto de los modelos de cajas:
Decisión: dos caminos posibles
Interacción: simboliza la interacción del usuario con la app. Puede ser que el usuario deba introducir datos, seleccionar, filtrar elementos, etc.
Proceso: instancias del trayecto del usuario. Desde la acción o paso inicial hasta la acción principal que el usuario puede recorrer para obtener la solución que ofrece tu producto o servicio.
Error: Relacionado íntegramente con la caja “decisión” la misma muestra la posible falla o error. 
Inicio / Cierre: el inicio o el final en un diagrama de flujo.
Marcar el comienzo del recorrido. Usar la palabra “INICIO”
Marcar, en los recorridos, que arquetipo de usuario deberá llevar adelante esa tarea (esto se puede reforzar dejando todo el userflow en gris y solo marcando el que corresponde a cada uno de los usuarios).
Usar las herramientas Whimsical o Draw.io.
El gráfico debe ser claro y ordenado. Las flechas deben mantenerse recta			A partir de la actividad de card sorting definir cómo se van a organizar los contenidos. Las categorías, en principio, formarán parte de los accesos rápidos de la barra de navegación de la app).
Aspectos a considerar:
El uso correcto de por lo menos 3 jerarquías de información.
Categorías / Secciones
Subcategorías / Subsecciones
Detalle de subcategoría / subsecciones
El gráfico debe ser claro y ordenado.
El uso de las flechas marcan la jerarquía de los contenidos.
Tener en cuenta agrupar, jerarquizar y rotular cada una de las categorías definidas.
Conclusiones obtenidas a partir de la Actividad de Card Sorting. Elegir y justificar el tipo de card sorting se hizo y por que (abierto, cerrado, hibrido). 			
Se debe incorporar a la Arquitectura de Información los resultados del cardsorting. Adicional se le solicita enunciar el POV o Declaración significativa del proyecto y detallar el MVP.
TENER EN CUENTA
Para armar el userflow, pensá muy bien cada acción que el usuario debe hacer, hasta llegar a la solución principal que ofreces en tu producto!
¿UN TIP?
EJEMPLO DE PRESENTACIÓN
Objetivo: Generar, en forma de presentación, el detalle de los desafíos anteriores. No deberás colocar toda la información, sino lo más relevante o aquello que fue solicitado modificar por el tutor.
CARDSORTING
ARQUITECTURA DE INFORMACIÓN
POV Y MVP
USERFLOW
Y AHORA, ¿DUDAS SOBRE LA ENTREGA?
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.
¿QUERÉS SABER MAS? TE DEJAMOS BIBLIOGRAFÍA AMPLIADA DE LA CLASE 7
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.
DesignPedia - 80 Herramientas para construir tus ideas [ENLACE]
LIBROS
Los libros los encontrarás en nuestro repositorio.
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:
Armar un wireframe a mano del proyecto. En web comenzar desde mobile (Mobile First).
Introducirnos en el concepto de prototipado dentro del proceso de diseño centrado en el usuario (diseño).
Fortalecer las capacidades en ideación y creatividad.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINÁ Y VALORÁ ESTA CLASE
Obligatoria siempre.