Descarga la aplicación para disfrutar aún más
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.
Compartir