taller ux: prototipado rápido
DESCRIPTION
Un prototipo es una aproximación a una experiencia que te permite simular cómo se usaría el producto en cuestión. Los prototipos sirven para exteriorizar ideas, hacer en lugar de analizar, aprender antes de escalar y permitirse fracasar.TRANSCRIPT
![Page 2: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/2.jpg)
IxDA es una asociación creada para difundir la disciplina del Diseño de Interacción, que conforma (junto a usabilidad,
arquitectura de la información y accesibilidad, entre otras) el ecosistema del Diseño de Experiencias del Usuario.
![Page 3: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/3.jpg)
Queremos mejorar la educación y divulgación de UX en español. Queremos llegar a un nuevo estándar profesional.
Y queremos construirlo colaborativamente.
![Page 4: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/4.jpg)
¿Qué se espera de este taller?
Técnicas y conceptos básicos y fundamentales de UX
Ideas principales para poder arrancar su aprendizaje en el área
![Page 5: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/5.jpg)
0. Introducción
1. Prototipado rápido
2. Heurísticas
3. Evaluaciones de Usabilidad
4. Diseño Visual
5. Accesibilidad
6. Needfinding
7. Arquitectura de la Información
![Page 6: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/6.jpg)
Agenda:
1. El proceso iterativo de validación de ideas
2. La hipótesis
3. Prototipado
4. Un poco de contexto: Por qué, para qué y cuándo
se usan los prototipos
5. Validación
6. Conclusiones¡Práctica de conceptos!
![Page 7: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/7.jpg)
Uno simplemente no puede crear
un prototipo de la nada
![Page 8: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/8.jpg)
El proceso iterativo de validación de ideas.
Necesitás
![Page 9: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/9.jpg)
Proceso iterativo
1. Hipótesis
2. Personas
3. Producto Mínimo Viable
4. Validación
![Page 10: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/10.jpg)
1. Hipótesis¿Cómo las definimos?
● Declararamos suposiciones.
● Definimos el problema.
● Definimos la hipótesis.
![Page 11: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/11.jpg)
Creemos que
creando un módulo para compartir notas en redes sociales en el blog de UX
para desarrolladores y diseñadores de experiencias
conseguiremos una difusión exitosa de los contenidos y un
aporte significativo a la comunidad tecnológica
Sabremos que es verdad cuando veamos que
se incrementan las visitas y comentarios (y su calidad) en el blog y, estos provenienen de
redes sociales.
![Page 12: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/12.jpg)
2. Personas
Son nuestra mejor predicción de quién está usando (o usará)
nuestro producto y porqué.
![Page 13: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/13.jpg)
Método para definir personas
Boceto y nombre Conductas.Información demográfica.
Puntos de fricción y necesidades
Soluciones potenciales
1
3 4
2
![Page 14: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/14.jpg)
¿Qué es un prototipo?
![Page 15: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/15.jpg)
Rosenfeld Media . MF211: Figure 615
![Page 16: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/16.jpg)
Un prototipo es una aproximación a una experiencia que te permite simular como se usaría el producto en cuestión.
![Page 17: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/17.jpg)
¿Cómo empezar?
● ¿Quién interactuará con el proyecto?
● ¿Qué es lo que esperás aprender?
● ¿Cuánto tiempo tenés para crearlo?
Contestando las siguientes preguntas:
![Page 18: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/18.jpg)
Los prototipos sirven para:
● Exteriorizar ideas.
● Hacer en lugar de analizar.
● Aprender antes de escalar.
● Permitirse fracasar.
![Page 19: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/19.jpg)
Clases de prototipos:
a. Prototipos de baja fidelidad.
b. Wireframes clickeables.
c. Bocetos de mediana/alta calidad.
d. Prototipos codeados.
![Page 20: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/20.jpg)
a. Prototipos de baja fidelidad:Papel, elementos de oficina.
![Page 21: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/21.jpg)
![Page 22: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/22.jpg)
a. Prototipos de baja fidelidad:Pros
● Se pueden crear en una hora o menos
● Se puede reubicar el contenido fácilmente.
● Es barato.
● Es divertido.
![Page 23: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/23.jpg)
a. Prototipos de baja fidelidad:Contras
● La iteración rápida puede consumir mucho tiempo.
● La simulación puede ser muy artificial.
● Se puede reubicar el contenido fácilmente.
● El feedback es muy limitado.
![Page 24: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/24.jpg)
b. Wireframes clickeablesPowerpoint/Keynote/Invision
![Page 26: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/26.jpg)
b. Wireframes clickeablesPros
● Provee una idea del flujo de trabajo del producto.
● Revela posibles obstáculos.
● Permite aislar elementos esenciales del producto.
● Se puede aprender con recursos existentes.
![Page 27: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/27.jpg)
b. Wireframes clickeablesContras
● Los usuarios notan que es algo inacabado.
● Se pone atención extra en el copy.
![Page 28: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/28.jpg)
c. Bocetos media/alta calidadAxure/Fireworks
![Page 29: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/29.jpg)
Rosenfeld Media . PT051: Figure 9.1
![Page 30: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/30.jpg)
c.Bocetos media/alta calidadPros
● Bocetos de alta calidad y realismo.
● Se pueden testear elementos visuales y marcas.
● Se pueden observar el flujo de trabajo e
interacciones con la interfase.
![Page 31: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/31.jpg)
c. Bocetos media/alta calidadContras
● Los usuarios no pueden interactuar con datos reales.
● Consumen mucho tiempo de preparación y mantenimiento.
![Page 32: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/32.jpg)
d.Prototipos codeadosPros
● Reutilización del código en producción.
● Es la simulación más realista que existe.
● Se puede generar con elementos existentes.
![Page 33: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/33.jpg)
d. Prototipos codeadosContras
● Se puede estancar el avance por los detalles finos.
● Crear la experiencia deseada lleva mucho tiempo.
● Actualizar e iterar puede consumir mucho tiempo.
![Page 34: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/34.jpg)
3. Proyecto Mínimo Viable
● Crearlo nos ayuda a testear nuestras suposiciones.
● Se usa para correr experimentos y validar las hipótesis o saber en qué dirección seguir explorando.
![Page 35: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/35.jpg)
3. Proyecto mínimo viable¿Cómo definirlo?
● ¿Hay una necesidad para lo que estoy construyendo?
● ¿Hay valor en la solución que estoy ofreciendo?
● ¿Mi solución es usable?
Contestando las siguientes preguntas:
![Page 36: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/36.jpg)
4. Validación Feedback e investigación
● Decidir que se quiere aprender.
● Definir con quién se debería hablar para aprender.
● Crear una guía de entrevistas.
● Comenzar conversando.
● Mostrarle al cliente el PMV.
● Recolectar notas.
![Page 37: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/37.jpg)
Seguir aprendiendolinks y libros de interés
1. Lean UX - Applying Lean Principles to Improve User Experience.
2. Google Ventures
3. Participar de IxDA Mendoza!
4. Templates gratuitos y popapp.in
5. Plantillas en google docs
![Page 38: Taller UX: Prototipado rápido](https://reader034.vdocuments.net/reader034/viewer/2022042508/5595ae7a1a28abf23d8b4587/html5/thumbnails/38.jpg)
¡GRACIAS!