Upload
david-diez-cebollero
View
131
Download
2
Embed Size (px)
Citation preview
SíntesisDavid Díez Cebollero
Departamento de InformáticaUniversidad Carlos III de Madrid
DISEÑO DE SISTEMAS INTERACTIVOS
Grado en Ingeniería Informática
Diseño de Sistemas InteractivosSí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
Diseño de Sistemas InteractivosSíntesis
19/02/2016David Díez Cebollero
Wicked problem
Diseño de Sistemas InteractivosSíntesis
19/02/2016David Díez Cebollero
Well-defined problem
Wicked problem
Wicked problem
Diseño de Sistemas InteractivosSíntesis
19/02/2016David Díez Cebollerohttp://www.co-society.com/2010/11/wicked-problems/
Wicked problem¿Es posible resolver un wicked problem?
Diseño de Sistemas InteractivosSíntesis
19/02/2016David Díez Cebollero
@Sameer Vasta
Wicked problem¿Es posible resolver un wicked problem?
19/02/2016David Díez Cebollero
En buena partede las ocasiones el
diseño de un sistema interactivo
reúne las características de un
wicked problem
Diseño de Sistemas InteractivosSíntesis
Diseño de Sistemas InteractivosSíntesis
19/02/2016David Díez Cebollero
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 -
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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.”
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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 -
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Proceso
Adaptado de http://world.edu/wp-content/uploads/2012/05/divergence.jpg
IdeaciónPrototipado
Síntesis de la solución- Proceso de síntesis -
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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.”
Diseño de Sistemas InteractivosSíntesis > Ideación
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Ideación > Técnicas de creación
19/02/2016David Díez Cebollero
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.”
Diseño de Sistemas InteractivosSíntesis > Ideación > Técnicas de creación
19/02/2016David Díez Cebollero
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.”
Diseño de Sistemas InteractivosSíntesis > Ideación > Técnicas de creación
19/02/2016David Díez Cebollero
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.”
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSí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.”
Diseño de Sistemas InteractivosSíntesis > Prototipado
19/02/2016David Díez Cebollero
Explorar Soportar la comunicación entre usuarios y
diseñadores Estudiar los requisitos de la solución mediante
la interacción con el usuarioConfirmar
Comprobar las alternativas elaboradas Especificar los requisitos de la solución
mediante la interacción con el usuarioExperimentar
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
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas
19/02/2016David Díez Cebollero
Herramientas
Técnicas de prototipado
Prototipado evolutivo
Prototipado rápido
Artefactos de
prototipado
Paper prototype
Wireframe
Mockup
Wizard of Oz
Prototipo funcional
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas
19/02/2016David Díez Cebollero
Herramientas
Técnicas de prototipado
Prototipado evolutivo
Prototipado rápido
Artefactos de
prototipado
Paper prototype
Wireframe
Mockup
Wizard of Oz
Prototipo software
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Técnicas de prototipado
19/02/2016David Díez Cebollero
“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 -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Técnicas de prototipado
19/02/2016David Díez Cebollero
Design
Final product
Feedback provided
Ideation Build prototype
Final product
User tests prototype
Refine prototype
Feedback provided
Prototipado evolutivo- Proceso -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Técnicas de prototipado
19/02/2016David Díez Cebollero
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)
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas
19/02/2016David Díez Cebollero
Herramientas
Técnicas de prototipado
Prototipado evolutivo
Prototipado rápido
Artefactos de prototipado
Paper prototype
Wireframe
Mockup
Wizard of Oz
Prototipo software
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
¿Qué se entiende por un prototipo?
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Dimensiones
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Dimensiones- Grado de fidelidad -
− +
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Dimensiones- Alcance -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Dimensiones- Alcance -
(Apariencia)(In
tera
cció
n)
Wizard of Oz
MockupWireframe
Paper prototype
Prototipo funcional
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
@The Guide to Wireframing – UX Pin
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Nombre: Paper prototype / Index card
Dimensión: Bajo / BajoDefinició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ápidoDesventajas:
• Según el tipo de usuario, a veces la retroalimentación no es la esperada
• Puede resultar muy trabajoso
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
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
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Anotaciones
Meta-información
Definición interfaz
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
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ñoMeta-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
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
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
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Nombre: Wizard of OzDimensió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 novedosaDesventajas:
• No permite una evaluación real con usuarios
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
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
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Prototipo físico“Prototipo tangible pensado para evaluar alguna característica física del sistema interactivo.”
Diseño de Sistemas InteractivosSíntesis > Prototipado > Herramientas > Artefactos de prototipado
19/02/2016David Díez Cebollero
Prototipo digital“Prototipo basado en el uso de recursos multimedia para explicar/exponer alguna característica visual o de interacción.”
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- Stencils -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- PowerPoint / Keynote -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- Microsoft Sketchflow -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- Adobe Edge -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- Adobe InDesign -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- Adobe After Effects -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- Axure RP -
Diseño de Sistemas InteractivosSíntesis > Prototipado > Recursos
19/02/2016David Díez Cebollero
Herramientas- HTML / CSS3 / JavaScript -
Diseño de Sistemas InteractivosSíntesis > Prototipado
19/02/2016David Díez Cebollero
La importancia del prototipado- PC vs. Móvil -
Diseño de Sistemas InteractivosSí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ónConocer técnicas de ideaciónEntender qué es el prototipadoConocer 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