BLOQUE I 3. Prototipado Diseño Centrado en el Usuario Profesorado: Dra. María José Escalona Cuaresma Dr. José Mariano González Romano.

Presentación del tema: "BLOQUE I 3. Prototipado Diseño Centrado en el Usuario Profesorado: Dra. María José Escalona Cuaresma Dr. José Mariano González Romano."— Transcripción de la presentación:

1 BLOQUE I 3. Prototipado Diseño Centrado en el Usuario Profesorado: Dra. María José Escalona Cuaresma mjescalona@us.es Dr. José Mariano González Romano mariano@us.es Master Oficial en Ingeniería y Tecnología del Software http://www.lsi.us.es/docencia/master_its/ Departamento de Lenguajes y Sistemas Informáticos Universidad de Sevilla Curso 2008/09

2 Introducción Categorías Técnicas Elección Prototipado Índice 1.Introducción 2.Categorías de prototipos 3.Técnicas de prototipado 4.Elección de la técnica

3 Introducción Categorías Técnicas Elección Fases del MPIu+a: Análisis de Requisitos Diseño Implementación Lanzamiento Prototipado Evaluación Prototipado Introducción

4 Categorías Técnicas Elección Prototipado Desde que se empieza el desarrollo de un sistema interactivo necesitamos probar partes del mismo con multitud de objetivos: verificar funcionalidades, averiguar aspectos relacionados con la interfaz del sistema (posición de controles, textos, colores...), validar la navegación, probar nuevas posibilidades técnicas, etc. El término prototipado comprende todas las herramientas y técnicas que permiten realizar a los diseñadores de sistemas estas simulaciones Prototipado Introducción

5 Categorías Técnicas Elección ¿Qué es un prototipo? Es una implementación parcial, pero concreta, del diseño de un sistema Se realiza con la finalidad de explorar los aspectos interactivos del sistema, incluyendo su usabilidad, accesibilidad y funcionalidad Es una herramienta muy útil para hacer participar activamente al usuario en el desarrollo y poder evaluar el producto desde las primeras fases del desarrollo Prototipado Introducción

6 Categorías Técnicas Elección Características de los prototipos Son formidables herramientas de: Comunicación entre todos los componentes del equipo de desarrollo y los usuarios Participación, para integrar activamente a los usuarios en el desarrollo Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas sobre nuevos conceptos tecnológicos) Son el primer paso para que ideas abstractas sean concretas, visibles y testeables Fomentan la iteratividad Mejoran la calidad y la completitud de las especificaciones funcionales del sistema Prototipado Introducción

7 Categorías Técnicas Elección Dimensiones del prototipado El prototipado reduce el coste y el tiempo de implementación del futuro sistema Esta reducción se puede conseguir reduciendo el número de características o reduciendo el nivel de implementación de las características Prototipado vertical: Tiene implementadas pocas características, pero sus funcionalidades están totalmente implementadas Puede probar una parte limitada del sistema en profundidad y bajo circunstancias reales Prototipado horizontal: Incluye todas las características del sistema, pero no contiene funcionalidad subyacente Es una simulación de la interfaz en la que no se puede realizar ningún trabajo real Prototipado Introducción

8 Categorías Técnicas Elección Categorías de prototipos Prototipos de baja fidelidad: implementan aspectos generales del sistema sin entrar en detalles. Permiten abarcar un espectro mayor de la interacción a realizar Prototipos de alta fidelidad: representan aspectos más precisos. Sirven, por ejemplo, para detallar el proceso interactivo global de una o varias tareas concretas Prototipado Categorías de prototipos

9 Introducción Categorías Técnicas Elección Prototipado Categorías de prototipos VentajasInconvenientes Prototipos de baja fidelidad Costes de desarrollo pequeños De muy rápida creación Fácil de cambiar (cualquiera puede realizar los cambios) Los usuarios, al ser conscientes de la facilidad de los cambios y del bajo coste económico, se sienten cómodos para opinar y proponer cambios Evaluación de múltiples conceptos de diseño Útil para el diseño general de las interfaces Útil para identificar requisitos Limitado para la corrección de errores Especificaciones poco detalladas (para pasar a la codificación) Dirigido por el evaluador Su utilidad disminuye cuando los requisitos ya están bien establecidos Navegación y flujo de acciones limitadas

10 Introducción Categorías Técnicas Elección Prototipado Categorías de prototipos VentajasInconvenientes Prototipos de alta fidelidad Funcionalidad de tareas completa Completamente interactivo Dirigido por el usuario Navegabilidad Aspecto semejante al sistema final Puede servir como especificación Puede servir como herramienta de marketing y para demostraciones de ventas Elevados costes de desarrollo Requieren mucho tiempo de implementación Mayor dificultad de cambiar (cambios sólo realizables por el autor) Crea falsas expectaciones Menor efectividad para la recogida de requisitos

11 Introducción Categorías Técnicas Elección Técnicas para la construcción de prototipos Bocetos Storyboards Prototipos de papel Maquetas Maquetas digitales Storyboards navegacionales Vídeos Escenarios Prototipos de software Unas técnicas dan más importancia a la presentación (look) y otras a la interacción (feel) Prototipado Técnicas de prototipado

12 Introducción Categorías Técnicas Elección Bocetos Son formas de representar "primeras ideas", ya sea sobre lo que se pretende representar, sobre alguna funcionalidad concreta o sobre qué metáforas se utilizarán Se usan en la etapa más inicial del diseño, con la finalidad de recoger las primeras impresiones del espacio de trabajo de la interacción La clave de los bocetos es su velocidad de producción: Un boceto se realiza en unos 15 ó 20 segundos, de manera que se puede generar gran cantidad de bocetos en muy poco tiempo. Se trata sólo de una recogida de ideas iniciales Prototipado Técnicas de prototipado

13 Introducción Categorías Técnicas Elección Storyboards Tienen su origen en la industria cinematográfica Consisten en una serie de dibujos o imágenes dispuestos en formato secuencial de viñetas que representan cómo un determinado sistema será usado durante la consecución de una determinada tarea Prototipado Técnicas de prototipado

14 Introducción Categorías Técnicas Elección Prototipado Técnicas de prototipado Ejemplo de storyboard: Check-in

15 Introducción Categorías Técnicas Elección Prototipado Técnicas de prototipado Ejemplo de storyboard: Storyboard construido por Google para mostrar el funcionamiento de su nuevo navegador Chrome, http://www.google.com/googlebooks/chrome/ http://www.google.com/googlebooks/chrome/

16 Introducción Categorías Técnicas Elección Storyboards Permiten crear diferentes vistas del sistema en las primeras etapas de su implementación de la manera más rápida y barata posible Resultan especialmente indicados para aquellos proyectos en los que la implantación del nuevo sistema cambiará la forma de trabajar o de realizar ciertas tareas de las personas afectadas por él No es adecuado para comprobar aspectos referentes a la interactividad del sistema, aunque sí que será útil como material de soporte, tanto para asegurarse que el diseñador ha comprendido el problema como para discutir detalles con los usuarios, implicados y responsables del proyecto acerca de su funcionamiento Prototipado Técnicas de prototipado

17 Introducción Categorías Técnicas Elección Prototipos de papel Se basa en la utilización de papel, tijeras y lápiz para describir un diseño en un papel Permite una gran velocidad y flexibilidad Es una técnica muy económica El objetivo no es probar lo bonito que es el diseño, sino verificar si los usuarios son capaces de realizar sus tareas con la interfaz propuesta Su utilización no precisa incorporar avances tecnológicos; sólo es necesario que capture la funcionalidad del sistema y que comunique la información y sus interacciones adecuadamente Prototipado Técnicas de prototipado

18 Introducción Categorías Técnicas Elección Ejemplo de prototipo de papel: Check-in Prototipado Técnicas de prototipado

19 Introducción Categorías Técnicas Elección ¿Cómo se hace un prototipo de papel? Se dibujan en un papel las interfaces que se van a probar. Los diferentes estados de la interfaz se dibujan en hojas separadas Se indica de forma perceptible la navegación entre las interfaces en función de la interacción Se ordenan las hojas y se entregan al usuario para que interactúe con ellas y simule el funcionamiento del sistema Prototipado Técnicas de prototipado

20 Introducción Categorías Técnicas Elección Ventajas de los prototipos de papel Los problemas (funcionales y de usabilidad) se pueden descubrir en una etapa muy temprana del proceso de diseño, mucho antes de haberlos codificado Favorecen la comunicación entre el equipo de diseño-desarrollo, los usuarios y los implicados Son muy rápidos de construir y refinar, lo que permite realizar rápidas interacciones de diseño Los recursos consumidos son mínimos (materiales muy básicos) y económicos Resultan tan familiares para los usuarios que sin dudarlo intervienen en las modificaciones del diseño El usuario, que es consciente de la facilidad y el bajo coste del prototipo, no se siente cohibido de proponer cualquier cambio Resultan menos intimidantes que un ordenador (ayudan a superar el fenómeno conocido como tecnofobia) El tiempo dedicado al proceso de codificación es cero No están sujetos a restricciones impuestas por la tecnología, y a pesar de ello ayudan al equipo a anticipar problemas y decisiones derivadas de la tecnología Prototipado Técnicas de prototipado

21 Introducción Categorías Técnicas Elección Inconvenientes de los prototipos de papel Por su simplicidad, no sirven para realizar evaluaciones detalladas del diseño No pueden simular la respuesta del sistema En el momento de evaluarlo es fácil que se den por supuestas cosas que realmente no están en el prototipo La construcción de los prototipos de papel parece tan evidente que a menudo se menosprecian aspectos tan importantes como que el prototipo se asemeje al máximo en tamaño y forma al dispositivo para el que lo estamos realizando, lo cual suele llevar a rediseños posteriores que inutilizan los ya realizados Prototipado Técnicas de prototipado

22 Introducción Categorías Técnicas Elección Maquetas Una maqueta es un modelo a tamaño reducido de algún objeto, monumento, edificio, etc. En el caso del prototipado, nos referimos a las maquetas como objetos construidos (normalmente a partir de materiales muy básicos) con el fin de evaluar una parte física del sistema Esta técnica es útil cuando queremos reflejar cómo será un dispositivo en un momento en el que aún no existe Prototipado Técnicas de prototipado

23 Introducción Categorías Técnicas Elección Maquetas digitales Son representaciones de calidad en formato digital que llenan el espacio que hay entre el prototipo de papel y la versión definitiva de la interfaz Para realizar una maqueta digital se utilizan herramientas más sofisticadas (editores gráficos...) que precisan mayor tiempo de desarrollo y mejor preparación de las personas que las realizan Su mayor nivel de detalle permite visualizar de una manera muy aproximada a la versión final el diseño de la interfaz (colores, estructura de navegación, botones, etc.) Son percibidas por los usuarios como versiones finales que no se pueden cambiar, por lo que es más adecuado utilizarlas en la fase de diseño Prototipado Técnicas de prototipado

24 Introducción Categorías Técnicas Elección Storyboards navegacionales Consisten en una serie de dibujos o imágenes que representan el espacio de navegación, bien sea de todo el sistema, de una parte de él o de una tarea concreta Se representan en un espacio bidireccional (con papel, en una pizarra, con impresiones de pantalla y flechas con rotulador, etc.) todos los estados de las interfaces (pantallas...) de la parte del sistema que se examinará y todas las posibilidades a nivel interactivo desde cada uno de estos estados para visualizar las posibles acciones o movimientos que el usuario puede realizar mientras interacciona con la interfaz Prototipado Técnicas de prototipado

25 Introducción Categorías Técnicas Elección Ejemplo de Storyboard navegacional Prototipado Técnicas de prototipado

26 Introducción Categorías Técnicas Elección Vídeos Grabar un vídeo permite desarrollar un escenario de futuro en el que, gracias al uso de técnicas de postproducción, pueden parecer reales funcionalidades y sistemas que sólo son ideas, están en fase muy inicial o son imposibles de realizar (tecnología inexistente, lugares inalcanzables) Ofrecen una manera económica de visualizar partes de sistemas futuros Ejemplos: STARFIRE: A Vision of Future Computing, Sun Microsystems, 1994 Poblado íbero de Els Vilars, Grupo GRIHO, 2005 Prototipado Técnicas de prototipado

27 Introducción Categorías Técnicas Elección Prototipado Técnicas de prototipado VentajasInconvenientes Se pueden descubrir problemas de usabilidad en una etapa muy temprana del proceso de diseño Proporciona una simulación dinámica de los elementos de la interfaz que se pueden ver y comentar tanto por el equipo de desarrollo como por los usuarios Aunque parezca lo contrario, no son necesarios muchos recursos No captura a un usuario interactuando recíprocamente con el prototipo, careciendo del elemento interactivo de otros métodos Al emplear materiales simples y carecer de interactividad, los prototipos de vídeo no apoyan la evaluación de detalle de diseño fino Al permitir tantas opciones, se corre el riesgo de desperdiciar mucho tiempo en conseguir un vídeo "estéticamente bonito" dejando de lado detalles importantes para el verdadero propósito del vídeo

28 Introducción Categorías Técnicas Elección Escenarios Son maneras de describir historias sobre personas, actividades, productos y entornos Sirven tanto para contar la manera como se realizan las acciones actualmente (escenario de tareas) como para hacer imaginaciones de futuro (escenario de futuro) Ayudan al diseñador a explorar ideas y las ramificaciones de decisiones de diseño en situaciones concretas Elementos: Configuración Actores Objetivos Acciones Prototipado Técnicas de prototipado

29 Introducción Categorías Técnicas Elección Maneras de representar los escenarios: Lenguaje natural Storyboard Vídeos Diagramas de casos de uso Prototipado Técnicas de prototipado

30 Introducción Categorías Técnicas Elección Prototipos de software Son implementaciones realizadas con técnicas de programación del sistema interactivo propuesto que reproducen el funcionamiento de una parte importante de las funcionalidades con el objetivo de probar determinados aspectos del sistema final Pueden ser horizontales o verticales en función del objetivo de la evaluación a realizar con el mismo Normalmente se implementan después de varias iteraciones de prototipado-evaluación y se tiene la intención de empezar a ver realmente cómo responde el sistema Prototipado Técnicas de prototipado

31 Introducción Categorías Técnicas Elección Ejemplo de prototipo de software Prototipado Técnicas de prototipado

32 Introducción Categorías Técnicas Elección Prototipado Técnicas de prototipado VentajasInconvenientes La fidelidad o semejanza de un prototipo software con el sistema final es alta Debido a esta fidelidad, son muy útiles para realizar las evaluaciones de métricas (tipo métricas de rendimiento o de coherencia) El usuario tiene la sensación de estar trabajando con un sistema real Requiere habilidades de desarrollo de software, aunque cada vez en menor grado Aunque rápido, el método consume mucho más tiempo que otros tipos de prototipos (de papel, por ejemplo) Se requieren mayores recursos debido a la necesidad de emplear software y hardware específicos Debido a la mayor inversión suele renunciarse a "tirar" el prototipo, quedando como una versión preliminar del sistema. Este factor, a la larga, resulta ser un lastre Frecuentemente la última ventaja se convierte en un inconveniente, pues los directivos responsables y los usuarios creen que el sistema está casi terminado y tendrán prisa por verlo finalizado

33 Introducción Categorías Técnicas Elección Elección entre las alternativas La elección depende del objetivo a evaluar Prototipado Elección Técnica¿Qué se analiza?CosteTiempo BocetoPrimeras ideasMuy bajoMuy rápido StoryboardDescripción del proceso de interacción Muy bajoRápido Prototipo de papel Simplicidad, visibilidad de las funciones, sintetizabilidad Muy bajoRápido MaquetaCaracterísticas físicasRelat. bajoNo tan rápido Maqueta digital Visibilidad de las funciones, disposición de los elementos interactivos BajoNo tan rápido Storyboard navegacional Visibilidad de la navegación. representación de los estados del sistema BajoRápido

34 Introducción Categorías Técnicas Elección Elección entre las alternativas La elección depende del objetivo a evaluar Prototipado Elección Técnica¿Qué se analiza?CosteTiempo VídeoRepresentación de situaciones interactivas, visibilidad de los actores y objetos que intervienen, escenificación de posibilidades futuras AltoMuy alto EscenarioRepresentación de situaciones interactivas, visibilidad de los actores y objetos que intervienen MedioRápido SoftwareNavegabilidad, funcionalidades concretas, medidas de rendimiento MedioMedio/Alto

35 Introducción Categorías Técnicas Elección Conclusiones Los prototipos son documentos, diseños o sistemas que simulan o implementan partes del sistema final Constituyen una herramienta muy útil para hacer participar a los usuarios y evaluar el sistema desde las primeras fases Hay diversas técnicas de implementación de prototipos Hay prototipos de baja fidelidad (más simples y baratos) y alta fidelidad (más completos y caros) En la elección de la técnica influye el punto del desarrollo en que nos encontremos Prototipado Elección Los prototipos son fundamentales en el DCU porque ayudan a conectar a los usuarios con el sistema, aún cuando no esté acabado

36 BLOQUE I 3. Prototipado Diseño Centrado en el Usuario Profesorado: Dra. María José Escalona Cuaresma mjescalona@us.es Dr. José Mariano González Romano mariano@us.es Master Oficial en Ingeniería y Tecnología del Software http://www.lsi.us.es/docencia/master_its/ Departamento de Lenguajes y Sistemas Informáticos Universidad de Sevilla Curso 2008/09