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

Introducción

Categorías

Técnicas

Elección

PrototipadoÍndice

1. Introducción2. Categorías de prototipos3. Técnicas de prototipado4. Elección de la técnica

Introducción

Categorías

Técnicas

Elección

Fases del MPIu+a:Análisis de RequisitosDiseñoImplementaciónLanzamientoPrototipadoEvaluación

PrototipadoIntroducción

Introducción

Categorías

Técnicas

Elección

PrototipadoDesde que se empieza el desarrollo de unsistema interactivo necesitamos probar partesdel mismo con multitud de objetivos:

verificar funcionalidades,averiguar aspectos relacionados con la interfazdel 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

PrototipadoIntroducción

Introducción

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 activamenteal usuario en el desarrollo y poder evaluar el producto desde las primeras fases del desarrollo

PrototipadoIntroducción

Introducción

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

PrototipadoIntroducción

Introducción

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

PrototipadoIntroducción

Introducción

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

PrototipadoCategorías de prototipos

Introducción

Categorías

Técnicas

Elección

PrototipadoCategorías de prototipos

Ventajas Inconvenientes

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

Introducción

Categorías

Técnicas

Elección

PrototipadoCategorías de prototipos

Ventajas Inconvenientes

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

Introducción

Categorías

Técnicas

Elección

Técnicas para la construcción de prototiposBocetosStoryboardsPrototipos de papelMaquetasMaquetas digitalesStoryboards navegacionalesVídeosEscenariosPrototipos de software

Unas técnicas dan más importancia a la presentación (look) y otras a la interacción (feel)

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

BocetosSon formas de representar "primeras ideas", ya sea sobre lo que se pretende representar, sobre alguna funcionalidad concreta o sobre qué metáforas se utilizaránSe 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ónLa 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

StoryboardsTienen su origen en la industria cinematográficaConsisten 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

PrototipadoTécnicas de prototipado

Ejemplo de storyboard:Check-in

Introducción

Categorías

Técnicas

Elección

PrototipadoTé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/

Introducción

Categorías

Técnicas

Elección

StoryboardsPermiten crear diferentes vistas del sistema en las primeras etapas de su implementación de la manera más rápida y barata posibleResultan 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 élNo 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Prototipos de papelSe basa en la utilización de papel, tijeras y lápiz para describir un diseño en un papelPermite una gran velocidad y flexibilidadEs una técnica muy económicaEl 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 propuestaSu 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Ejemplo de prototipo de papel:Check-in

PrototipadoTécnicas de prototipado

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 separadasSe indica de forma perceptible la navegación entre las interfaces en función de la interacciónSe ordenan las hojas y se entregan al usuario para que interactúe con ellas y simule el funcionamiento del sistema

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Ventajas de los prototipos de papelLos problemas (funcionales y de usabilidad) se pueden descubrir en una etapa muy temprana del proceso de diseño, mucho antes de haberlos codificadoFavorecen la comunicación entre el equipo de diseño-desarrollo, los usuarios y los implicadosSon muy rápidos de construir y refinar, lo que permite realizar rápidas interacciones de diseñoLos recursos consumidos son mínimos (materiales muy básicos) y económicosResultan tan familiares para los usuarios que sin dudarlo intervienen en las modificaciones del diseñoEl usuario, que es consciente de la facilidad y el bajo coste del prototipo, no se siente cohibido de proponer cualquier cambioResultan menos intimidantes que un ordenador (ayudan a superar el fenómeno conocido como tecnofobia)El tiempo dedicado al proceso de codificación es ceroNo 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Inconvenientes de los prototipos de papelPor su simplicidad, no sirven para realizar evaluaciones detalladas del diseñoNo pueden simular la respuesta del sistemaEn 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

MaquetasUna 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 sistemaEsta técnica es útil cuando queremos reflejar cómo será un dispositivo en un momento en el que aún no existe

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Maquetas digitalesSon representaciones de calidad en formato digital que llenan el espacio que hay entre el prototipo de papel y la versión definitiva de la interfazPara 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 realizanSu 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Storyboards navegacionalesConsisten 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 concretaSe 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 lasposibles acciones o movimientosque el usuario puede realizar mientrasinteracciona con la interfaz

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Ejemplo de Storyboard navegacional

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

VídeosGrabar 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 futurosEjemplos:

STARFIRE: A Vision of Future Computing, Sun Microsystems, 1994Poblado íbero de Els Vilars, Grupo GRIHO, 2005

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

PrototipadoTécnicas de prototipado

Ventajas Inconvenientes

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

Introducción

Categorías

Técnicas

Elección

EscenariosSon maneras de describir historias sobre personas, actividades, productos y entornosSirven 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 concretasElementos:

ConfiguraciónActoresObjetivosAcciones

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Maneras de representar los escenarios:Lenguaje naturalStoryboardVídeosDiagramas decasos de uso

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Prototipos de softwareSon 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 finalPueden ser horizontales o verticales en función del objetivo de la evaluación a realizar con el mismoNormalmente 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

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

Ejemplo de prototipo de software

PrototipadoTécnicas de prototipado

Introducción

Categorías

Técnicas

Elección

PrototipadoTécnicas de prototipado

Ventajas Inconvenientes

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

Introducción

Categorías

Técnicas

Elección

Elección entre las alternativasLa elección depende del objetivo a evaluar

PrototipadoElección

Técnica ¿Qué se analiza? Coste Tiempo

Boceto Primeras ideas Muy bajo Muy rápido

Storyboard Descripción del proceso de

interacción

Muy bajo Rápido

Prototipo de

papel

Simplicidad, visibilidad de las

funciones, sintetizabilidad

Muy bajo Rápido

Maqueta Características físicas Relat. bajo No tan rápido

Maqueta

digital

Visibilidad de las funciones,

disposición de los elementos

interactivos

Bajo No tan rápido

Storyboard

navegacional

Visibilidad de la navegación.

representación de los estados del

sistema

Bajo Rápido

Introducción

Categorías

Técnicas

Elección

Elección entre las alternativasLa elección depende del objetivo a evaluar

PrototipadoElección

Técnica ¿Qué se analiza? Coste Tiempo

Vídeo Representación de situaciones

interactivas, visibilidad de los

actores y objetos que intervienen,

escenificación de posibilidades

futuras

Alto Muy alto

Escenario Representación de situaciones

interactivas, visibilidad de los

actores y objetos que intervienen

Medio Rápido

Software Navegabilidad, funcionalidades

concretas, medidas de rendimiento

Medio Medio/Alto

Introducción

Categorías

Técnicas

Elección

ConclusionesLos prototipos son documentos, diseños o sistemas que simulan o implementan partes del sistema finalConstituyen una herramienta muy útil para hacer participar a los usuarios y evaluar el sistema desde las primeras fasesHay diversas técnicas de implementación de prototiposHay 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

PrototipadoElección

Los prototipos son fundamentales en el DCU Los prototipos son fundamentales en el DCU

porque ayudan a conectar a los usuarios con

el sistema, aún cuando no esté acabado

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