Prototipado Rápido
ANALIA BASUALDO
@anagraphics - analiabasualdo@gmail.com
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.
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.
¿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
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
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!
Uno simplemente no puede crear
un prototipo de la nada
El proceso iterativo de
validación de ideas.
Necesitás
Proceso iterativo
1. Hipótesis
2. Personas
3. Producto Mínimo Viable
4. Validación
1. Hipótesis
¿Cómo las definimos?
● Declararamos suposiciones.
● Definimos el problema.
● Definimos la hipótesis.
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.
2. Personas
Son nuestra mejor predicción
de quién está usando (o usará)
nuestro producto y porqué.
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
¿Qué es un prototipo?
Rosenfeld Media . MF211: Figure
Un prototipo es una
aproximación a una experiencia
que te permite simular como se
usaría el producto en cuestión.
¿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:
Los prototipos sirven para:
● Exteriorizar ideas.
● Hacer en lugar de analizar.
● Aprender antes de escalar.
● Permitirse fracasar.
Clases de prototipos:
a. Prototipos de baja fidelidad.
b. Wireframes clickeables.
c. Bocetos de mediana/alta calidad.
d. Prototipos codeados.
a. Prototipos de baja fidelidad:
Papel, elementos de oficina.
01. Prototipado rápido: teoría
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.
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.
b. Wireframes clickeables
Powerpoint/Keynote/Invision
01. Prototipado rápido: teoría
b. Wireframes clickeables
Pros
● 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.
b. Wireframes clickeables
Contras
● Los usuarios notan que es algo inacabado.
● Se pone atención extra en el copy.
c. Bocetos media/alta calidad
Axure/Fireworks
Rosenfeld Media . PT051: Figure 9.1
c.Bocetos media/alta calidad
Pros
● 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.
c. Bocetos media/alta calidad
Contras
● Los usuarios no pueden interactuar con datos
reales.
● Consumen mucho tiempo de preparación y
mantenimiento.
d.Prototipos codeados
Pros
● Reutilización del código en producción.
● Es la simulación más realista que existe.
● Se puede generar con elementos existentes.
d. Prototipos codeados
Contras
● Se puede estancar el avance por los detalles finos.
● Crear la experiencia deseada lleva mucho tiempo.
● Actualizar e iterar puede consumir mucho tiempo.
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.
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:
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.
Seguir aprendiendo
links 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
¡GRACIAS!

Más contenido relacionado

PDF
Prototipos En El Proceso De DiseñO De InteraccióN Ix Da Ba 5 Nov 2009 San...
PDF
Prototipado rápido para web y mobile
PPTX
Taller Prototipos EngineUp Peru
PPSX
Prototipado: Cómo representar la interacción
PDF
01. Taller UX - Prototipado Rápido: Actividades
PDF
Taller UX: Diseño visual - IxDA Mendoza
PPTX
Elaboración de prototipos
PPT
Prototipado
Prototipos En El Proceso De DiseñO De InteraccióN Ix Da Ba 5 Nov 2009 San...
Prototipado rápido para web y mobile
Taller Prototipos EngineUp Peru
Prototipado: Cómo representar la interacción
01. Taller UX - Prototipado Rápido: Actividades
Taller UX: Diseño visual - IxDA Mendoza
Elaboración de prototipos
Prototipado

La actualidad más candente (16)

PPT
Evaluación
PPTX
2.1 Diseño, prototipo y construcción
PDF
Presentación Modelo sistemático para testeo con usuarios en Startups
PDF
Diseño de interacción, Prototipado y Testing
PPTX
Interfaz de usuario
PPT
7. Prototipos Básicos (Intro HCI)
PDF
Taller de prototipado iterativo
PDF
Como prototipar MAL una aplicación. La importancia del Wireframe
PPTX
Cuándo utilizar prototipos digitales
PPTX
Modelo sistemático de testeo con usuarios para startups
PPTX
Taller UX: Tests de usabilidad
PDF
Criterios Ergonómicos
PPTX
Prototipado UTRNG
PDF
Prototipos:Un juguete muy valioso
PDF
¿Como se trabaja hoy en ux?
PDF
¿Cómo evaluar la Experiencia de Usuario?
Evaluación
2.1 Diseño, prototipo y construcción
Presentación Modelo sistemático para testeo con usuarios en Startups
Diseño de interacción, Prototipado y Testing
Interfaz de usuario
7. Prototipos Básicos (Intro HCI)
Taller de prototipado iterativo
Como prototipar MAL una aplicación. La importancia del Wireframe
Cuándo utilizar prototipos digitales
Modelo sistemático de testeo con usuarios para startups
Taller UX: Tests de usabilidad
Criterios Ergonómicos
Prototipado UTRNG
Prototipos:Un juguete muy valioso
¿Como se trabaja hoy en ux?
¿Cómo evaluar la Experiencia de Usuario?
Publicidad

Similar a 01. Prototipado rápido: teoría (20)

PDF
4. PROTOTIPAR - 4 paso para la elaboración de un producto innovador .pdf
PDF
¿Cuándo utilizar prototipos digitales?
PDF
Como prototipar MAL una aplicación. La importancia del Wireframe
PPTX
LAMINAS EXPOSICION.pptx
PDF
UX en el Proceso de Desarrollo de Producto
PPTX
5. Prototipado
PPT
Prototipos de interfaces
PPTX
Desarrollo ágil enfocado en ux 1 0 1
PPT
Presentación Estudiantes Webmaster Area 2º Curso
PDF
La Comunificadora. Taller de Agile Design Thinking
PPT
La validación o evaluación es la etapa final del design thinking
PPT
Prototipos
PDF
Mkt design thinking
PDF
El diseñador a medias (con notas). UX Spain 2013
PDF
Métodos de Integración Lean, Agile & Design Thinking
PPT
#Aprender3c - Cómo crear productos eficientes, efectivos y mantener a nuestro...
PDF
Guía Innovación Empresarial a través del Design Thinking.pdf
PDF
prototipo.pdf
PPTX
¿Cómo diseñar SUNAT.gob.pe? Aplicando Diseño Centrado en el Usuario
PPTX
Investigación e Innovación Tecnológica - Diapositivas 08
4. PROTOTIPAR - 4 paso para la elaboración de un producto innovador .pdf
¿Cuándo utilizar prototipos digitales?
Como prototipar MAL una aplicación. La importancia del Wireframe
LAMINAS EXPOSICION.pptx
UX en el Proceso de Desarrollo de Producto
5. Prototipado
Prototipos de interfaces
Desarrollo ágil enfocado en ux 1 0 1
Presentación Estudiantes Webmaster Area 2º Curso
La Comunificadora. Taller de Agile Design Thinking
La validación o evaluación es la etapa final del design thinking
Prototipos
Mkt design thinking
El diseñador a medias (con notas). UX Spain 2013
Métodos de Integración Lean, Agile & Design Thinking
#Aprender3c - Cómo crear productos eficientes, efectivos y mantener a nuestro...
Guía Innovación Empresarial a través del Design Thinking.pdf
prototipo.pdf
¿Cómo diseñar SUNAT.gob.pe? Aplicando Diseño Centrado en el Usuario
Investigación e Innovación Tecnológica - Diapositivas 08
Publicidad

Último (20)

PPTX
13 huhijkjlkjlkjlkjlkjlkjde agosto (2).pptx
PPTX
Mariluz_VITE HERNANDEZSaber pedagógico.pptx
PPT
Ghhhhhhhhyhhhhyuuiiiiiiiigbyejku⁶778990⁰0000o99
PDF
Biologia molecular para riesgos ambientales
PDF
Informe del proyecto con todo 14-02-25.pdf
PPTX
el respeto laurenz daniela duran acuña alfonzo lopez
DOCX
INFORME FERIA DE CIENCIAS EJEMPLO INDAGACIÓN 2025.docx
PDF
PROYECTOS VIII - 4. Construcción tipológica de la vivienda colectiva (2025).pdf
PPTX
primer respondiente VUGVKGYFCUTFCFCUFCYFC
PDF
TF - LOGÍSTICA INTERNACIONAmL.pdf puesto
PDF
LA_SIERRA ,clima ,fauna,especies,selva húmeda
PPTX
8_Representacion_de_Elementos_Mecanicoss
PDF
538778821ddffds-Etiqueta-en-La-Mfesa.pdf
PPTX
INTRODUCCIÓN HISTORIA 5A DE SECU UNIVERSAL.pptx
PDF
Gestion d3 procesos kfififoofofkfjdjdjieoeodkjfjfjf
DOCX
flora y fauna del PERU animales ,plantas
PDF
lineamientos-orientacion-vocacional-y-profesional.pdf
PDF
Scere ji jsin dkdhf dkwiej jdkwl de unodostres
PPTX
Programa_Orientacion_Vocacional_Ecuador_Detallado.pptx
PPTX
Kick Off iMetrology metrologia industrial
13 huhijkjlkjlkjlkjlkjlkjde agosto (2).pptx
Mariluz_VITE HERNANDEZSaber pedagógico.pptx
Ghhhhhhhhyhhhhyuuiiiiiiiigbyejku⁶778990⁰0000o99
Biologia molecular para riesgos ambientales
Informe del proyecto con todo 14-02-25.pdf
el respeto laurenz daniela duran acuña alfonzo lopez
INFORME FERIA DE CIENCIAS EJEMPLO INDAGACIÓN 2025.docx
PROYECTOS VIII - 4. Construcción tipológica de la vivienda colectiva (2025).pdf
primer respondiente VUGVKGYFCUTFCFCUFCYFC
TF - LOGÍSTICA INTERNACIONAmL.pdf puesto
LA_SIERRA ,clima ,fauna,especies,selva húmeda
8_Representacion_de_Elementos_Mecanicoss
538778821ddffds-Etiqueta-en-La-Mfesa.pdf
INTRODUCCIÓN HISTORIA 5A DE SECU UNIVERSAL.pptx
Gestion d3 procesos kfififoofofkfjdjdjieoeodkjfjfjf
flora y fauna del PERU animales ,plantas
lineamientos-orientacion-vocacional-y-profesional.pdf
Scere ji jsin dkdhf dkwiej jdkwl de unodostres
Programa_Orientacion_Vocacional_Ecuador_Detallado.pptx
Kick Off iMetrology metrologia industrial

01. Prototipado rápido: teoría

  • 2. 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.
  • 3. 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.
  • 4. ¿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
  • 5. 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
  • 6. 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!
  • 7. Uno simplemente no puede crear un prototipo de la nada
  • 8. El proceso iterativo de validación de ideas. Necesitás
  • 9. Proceso iterativo 1. Hipótesis 2. Personas 3. Producto Mínimo Viable 4. Validación
  • 10. 1. Hipótesis ¿Cómo las definimos? ● Declararamos suposiciones. ● Definimos el problema. ● Definimos la hipótesis.
  • 11. 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.
  • 12. 2. Personas Son nuestra mejor predicción de quién está usando (o usará) nuestro producto y porqué.
  • 13. 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
  • 14. ¿Qué es un prototipo?
  • 15. Rosenfeld Media . MF211: Figure
  • 16. Un prototipo es una aproximación a una experiencia que te permite simular como se usaría el producto en cuestión.
  • 17. ¿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:
  • 18. Los prototipos sirven para: ● Exteriorizar ideas. ● Hacer en lugar de analizar. ● Aprender antes de escalar. ● Permitirse fracasar.
  • 19. Clases de prototipos: a. Prototipos de baja fidelidad. b. Wireframes clickeables. c. Bocetos de mediana/alta calidad. d. Prototipos codeados.
  • 20. a. Prototipos de baja fidelidad: Papel, elementos de oficina.
  • 22. 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.
  • 23. 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.
  • 26. b. Wireframes clickeables Pros ● 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.
  • 27. b. Wireframes clickeables Contras ● Los usuarios notan que es algo inacabado. ● Se pone atención extra en el copy.
  • 28. c. Bocetos media/alta calidad Axure/Fireworks
  • 29. Rosenfeld Media . PT051: Figure 9.1
  • 30. c.Bocetos media/alta calidad Pros ● 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.
  • 31. c. Bocetos media/alta calidad Contras ● Los usuarios no pueden interactuar con datos reales. ● Consumen mucho tiempo de preparación y mantenimiento.
  • 32. d.Prototipos codeados Pros ● Reutilización del código en producción. ● Es la simulación más realista que existe. ● Se puede generar con elementos existentes.
  • 33. d. Prototipos codeados Contras ● Se puede estancar el avance por los detalles finos. ● Crear la experiencia deseada lleva mucho tiempo. ● Actualizar e iterar puede consumir mucho tiempo.
  • 34. 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.
  • 35. 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:
  • 36. 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.
  • 37. Seguir aprendiendo links 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