Sesion06 sintesis-idear-prototipar

Síntesis
David Díez Cebollero
Departamento de Informática
Universidad Carlos III de Madrid
DISEÑO DE
SISTEMAS INTERACTIVOS
Grado en
Ingeniería Informática

Diseño de Sistemas Interactivos
Síntesis > Contenido sesión 6
 Entender qué es un wicked problem y por qué un sistema interactivo
puede entenderse como un wicked problem
 Entender qué es la ideación
 Conocer técnicas de ideación
 Entender qué es el prototipado
 Conocer distintas técnicas de prototipado
 Prototipado rápido
 Prototipado evolutivo
 Conocer distintos tipos de prototipos
 Prototipo en papel
 Wireframe
 Mockup
 Prototipo funcional
19/02/2016David Díez Cebollero

Síntesis
Wicked problem

Síntesis
Well-defined problem
Wicked problem
Wicked problem

Síntesis
http://www.co-society.com/2010/11/wicked-problems/
Wicked problem
¿Es posible resolver un wicked problem?

Síntesis
@Sameer Vasta
Wicked problem
¿Es posible resolver un wicked problem?

En buena parte
de las ocasiones el
diseño de un
sistema interactivo
reúne las
características de un wicked
problem
Síntesis

Síntesis
Frente a la idea tradicional de
buscar la solución óptima, se
propone dar formar (explorar)
a una solución adecuada
• Razonamiento deductivo
• Razonamiento inductivo
• Razonamiento abductivo
Wicked problems
- Diseño de Sistemas Interactivos -

Síntesis > Definición
“La síntesis es la
actividad encargada de
combinar y valorar
distintas opciones a fin
de alcanzar una
solución adecuada al
problema.”

Síntesis > Proceso
Elaboración de alternativas
(Ideación)
Validación de alternativas
(Prototipado)
Elección de la solución
Síntesis de la solución
- Proceso de síntesis -

Síntesis > Proceso
Adaptado de
http://world.edu/wp-content/uploads/2012/05/divergence.jpg
Ideación
Prototipado
Síntesis de la solución
- Proceso de síntesis -

Síntesis > Ideación
“La ideación es la actividad
de síntesis encargada de
generar alternativas o
posibles soluciones al
problema establecido.”
“El objetivo de la actividad es
explorar el espacio de
alternativas a fin de identificar
posibles soluciones.”

Síntesis > Ideación

Síntesis > Ideación > Técnicas de creación
Brainstorming
- Lluvia/Tormenta de ideas -
“Técnica de creación (individual o en
grupo) basada en la generación de ideas
por todos los participantes en la actividad
de manera espontánea.”

Group sketching
“Técnica de creación grupal basada en la elaboración de
esbozos por todos los participantes en la sesión. Técnica muy
aprobada para alcanzar un entendimiento común sobre la
solución a elaborar.”

Issue Cards
“Técnica de creación basada en la
utilización de tarjetas físicas como
gancho o palanca para la generación de
ideas.”

Síntesis > Prototipado
“El prototipado es la actividad
de síntesis encargada de
poner en práctica
(materializar) algunas de las
soluciones generadas durante
la fase de ideación a fin de
probar su validez, adecuación
o viabilidad.”

 Explorar
 Soportar la comunicación entre usuarios y
diseñadores
 Estudiar los requisitos de la solución mediante la
interacción con el usuario
 Confirmar
 Comprobar las alternativas elaboradas
 Especificar los requisitos de la solución mediante la
interacción con el usuario
 Experimentar
 Probar la viabilidad de posibles alternativas u
opciones de diseño
 Establecer cual de las soluciones se adecua mejor a
los requisitos de usuario
Objetivos del prototipado

Síntesis > Prototipado > Herramientas
Herramientas
Técnicas de
prototipado
Prototipado
evolutivo
Prototipado
rápido
Artefactos de
prototipado
Paper
prototype
Wireframe
Mockup
Wizard of Oz
Prototipo
funcional

Síntesis > Prototipado > Herramientas
Herramientas
Técnicas de
prototipado
Prototipado
evolutivo
Prototipado
rápido
Artefactos de
prototipado
Paper
prototype
Wireframe
Mockup
Wizard of Oz
Prototipo
software

Síntesis > Prototipado > Herramientas > Técnicas de prototipado
“Técnica basada en la elaboración de
sucesivos prototipos, cada vez con un mayor
nivel de detalle, tomando como referencia la
opinión de los usuarios.”
(Evolutionary prototyping)
Prototipado evolutivo
- Definición -


Design
Final
product
Feedback
provided
Ideation
Build
prototype
Final
product
User tests
prototype
Refine
prototype
Feedback
provided
Prototipado evolutivo
- Proceso -

Prototipado rápido
- Definición -
“Grupo de técnicas utilizadas para
desarrollar con rapidez un modelo a
escala de un producto final.”
(Rapid/Throwaway prototyping)


Síntesis > Prototipado > Herramientas > Artefactos de prototipado
¿Qué se entiende por
un prototipo?

Dimensiones

Dimensiones
- Grado de fidelidad -
− +

Dimensiones
- Alcance -

Dimensiones
- Alcance -
(Apariencia)
(Interacción)
Wizard of Oz
MockupWireframe
Paper
prototype
Prototipo
funcional

@The Guide to Wireframing – UX Pin

Nombre: Paper prototype / Index card
Dimensión: Bajo / Bajo
Definición: Prototipo basado en la utilización
de dibujos, esbozos, imágenes,
etc.
Ventajas: • Muy bajo coste
• Pronta retroalimentación
• Muy adecuado para el
prototipado rápido
Desventajas: • Según el tipo de usuario, a
veces la retroalimentación no
es la esperada
• Puede resultar muy trabajoso

Nombre: Wireframe
Dimensión: Medio / Bajo (*)
Definición: Modelo de la interfaz de usuario
para definir la arquitectura de
información del sistema
Ventajas: • Muy adecuado para establecer
contenidos y su jerarquía
• Reducido coste
• Numerosas herramientas
Desventajas: • No recoge aspectos visuales ni
de interacción
• Difícil comunicación con el
usuario

Anotaciones
Meta-información
Definición
interfaz

Componente Propósito información
Definición de
interfaz
Definir la apariencia
de la interfaz de
usuario
- Estructura de la
interfaz
- Controles
- Información
Anotaciones Explicar aquellos
aspectos que no
pueden ser
representados
visualmente
- Controles
- Condiciones
- Restricciones
- Razonamiento del
diseño
Meta-información Información de
auditoria sobre la
versión del wireframe
- Versión del
wireframe
- Fecha de la
versión
- Cambios en la
versión
- Temas pendientes

Nombre: Mockup
Dimensión: Alto / Bajo (*)
Definición: Modelo de la interfaz de usuario
para definir la apariencia visual
del sistema
Ventajas: • Muy adecuado para definir el
diseño visual
• Coste medio
• Numerosas herramientas
Desventajas: • No recoge aspectos de
interacción
• A veces plantea problemas
de comunicación con el
usuario

Nombre: Wizard of Oz
Dimensión: Alto / Medio (*)
Definición: Tipo de prototipo basado en la
simulación de determinadas
acciones mediante intervención
humana
Ventajas: • Bajo coste
• Muy adecuado para probar
aspectos de interacción
• Interacción novedosa
Desventajas: • No permite una evaluación
real con usuarios

Nombre: Prototipo funcional
(Prototipo software)
Dimensión: Alto / Alto
Definición: Prototipo con un alto nivel de
fidelidad que permite una
interacción casi completa con el
mismo
Ventajas: • Permite realizar evaluación
con usuarios
• Facilita la comunicación con
el usuario
Desventajas: • Tiempo de elaboración
• Coste
• En ocasiones lleva a mal
entendidos

Prototipo físico
“Prototipo tangible pensado para evaluar
alguna característica física del sistema
interactivo.”

Prototipo digital
“Prototipo basado en el uso de
recursos multimedia para
explicar/exponer alguna
característica visual o de
interacción.”

Síntesis > Prototipado > Recursos
Herramientas
- Stencils -

Herramientas
- PowerPoint / Keynote -

Herramientas
- Microsoft Sketchflow -

Herramientas
- Adobe Edge -

Herramientas
- Adobe InDesign -

Herramientas
- Adobe After Effects -

Herramientas
- Axure RP -

Herramientas
- HTML / CSS3 / JavaScript -

La importancia del prototipado
- PC vs. Móvil -

Sesion06 sintesis-idear-prototipar

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Sesion06 sintesis-idear-prototipar

Similar a Sesion06 sintesis-idear-prototipar (20)

Último

Último (20)

Sesion06 sintesis-idear-prototipar

Notas del editor