Sesion06 sintesis-idear-prototipar

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


Wicked problem



Well-defined problem

Wicked problem

Wicked problem


19/02/2016David Díez Cebollerohttp://www.co-society.com/2010/11/wicked-problems/

Wicked problem¿Es posible resolver un wicked problem?



@Sameer Vasta

Wicked problem¿Es posible resolver un wicked problem?


En buena partede las ocasiones el

diseño de un sistema interactivo

reúne las características de un

wicked problem




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 -


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.”


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 -


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 -


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


Diseño de Sistemas InteractivosSí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.”


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.”



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


Herramientas

Técnicas de prototipado

Prototipado evolutivo

Prototipado rápido

Artefactos de

prototipado

Paper prototype

Wireframe

Mockup

Wizard of Oz

Prototipo funcional



Herramientas



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


“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 -

http://www.youtube.com/watch?v=KCSD_R6lJU0



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)



Herramientas



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


¿Qué se entiende por un prototipo?



Dimensiones



Dimensiones- Grado de fidelidad -

− +



Dimensiones- Alcance -



Dimensiones- Alcance -

(Apariencia)(In

tera

cció

n)

Wizard of Oz

MockupWireframe

Paper prototype

Prototipo funcional



@The Guide to Wireframing – UX Pin



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



http://www.youtube.com/watch?v=GrV2SZuRPv0



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ñ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



http://www.youtube.com/watch?v=T0vt3nLZKks

http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/



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 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



http://vimeo.com/20987560

https://www.youtube.com/watch?v=RdT4yG8wczQ



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.”

http://www.youtube.com/watch?v=-bUceTmlCuI



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


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 -

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


Sesion06 sintesis-idear-prototipar

Design

Transcript of Sesion06 sintesis-idear-prototipar