Вы находитесь на странице: 1из 57

Prototipos

Prof. Robert Espinoza Domínguez


Prototipado
• Desde el inicio del desarrollo necesitamos probar
partes del sistema para:
• 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.
• Los prototipos permiten realizar estas comprobaciones
y constituyen una herramienta muy útil para hacer
participar al usuario en el desarrollo
• Son mucho más que simples demostraciones del
producto; se utilizan para recoger las impresiones del
usuario y repercutirlas en el diseño de la interfaz
¿Qué es un prototipo?
• Son documentos, diseños o sistemas que simulan el
aspecto y/o funcionamiento del sistema final.
• 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
evaluarlo desde las
primeras fases del
desarrollo.
Prototipos en
papel
Algunos ejemplos

Sketch original de
Twitter (“Stat.us”)
Algunos ejemplos

Sketch
de Flickr
Places
Algunos ejemplos

Sketch de AbiWord, procesador de texto para


OLPC (One Laptop Per Child)
Algunos ejemplos

Sketch de Vimeo
Características
• Son construidos rápida y eficientemente. Tienen un tiempo
de vida corto.
• Tienen un bajo costo de desarrollo.
• Van evolucionando conforme se desarrolla el sistema, es
decir, es un proceso iterativo.
• Permiten a los diseñadores explorar diversos conceptos del
diseño antes de establecer los definitivos.
• Son el primer paso para que ideas abstractas sean concretas,
visibles y evaluables.
• Sólo poseen las características más importantes del diseño y
algunas otras sobre las cuales se desean hacer pruebas
especiales.
¿Porqué son útiles?
• Mejoran la calidad y la completitud de las especificaciones
funcionales del sistema
• Permiten evaluar el sistema desde las primeras fases del
desarrollo (facilitan la exploración de ideas sobre nuevos
conceptos tecnológicos)
• Permiten detectar fallas antes de realizar el código.
• Nos permite corregir, anexar o modificar el diseño.
¿Porqué son útiles?
• Permite brindar al usuario un enfoque claro de cómo va a
funcionar el sistema y con que herramientas va a contar.
• 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
• Los Prototipos generan ideas nuevas sobre el producto.
• Permiten ahorrar tiempo y dinero.
Ventajas y Desventajas
Ventajas
• Tranquilidad del Usuario.
• Reducción del Costo de Desarrollo e implementación.
• Establece una mejor comunicación con los usuarios.
• Reduce el Tiempo requerido.
• Mejora la calidad del producto final.
• No se necesita muchos elementos.

Desventajas
• Empleo de recursos de un producto que no será el final.
• Se requiere total participación de parte del usuario.
Dimensiones del prototipado
• El prototipado reduce el costo 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
Categorías de prototipos
• Fidelidad es el nivel de detalle que presenta el prototipo

• 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
Prototipos de baja fidelidad
Ventajas Desventajas
Costos de desarrollo pequeños Limitado para la corrección de
De muy rápida creación errores
Fácil de cambiar (cualquiera puede Especificaciones poco detalladas
realizar los cambios) (para pasar a la codificación)
Los usuarios, al ser conscientes de la Dirigido por el evaluador
facilidad de los cambios y del bajo Su utilidad disminuye cuando los
coste económico, se sienten requisitos ya están bien establecidos
cómodos para opinar y proponer Navegación y flujo de acciones
cambios limitadas
Evaluación de múltiples conceptos
de diseño
Útil para el diseño general de las
interfaces
Útil para identificar requisitos
Prototipos de alta fidelidad
Ventajas Desventajas
Funcionalidad de tareas completa Elevados costes de desarrollo
Completamente interactivo Requieren mucho tiempo de
Dirigido por el usuario implementación
Navegabilidad Mayor dificultad de cambiar
Aspecto semejante al sistema final (cambios sólo realizables por el
autor)
Puede servir como especificación
Crea falsas expectaciones
Puede servir como herramienta de
marketing y para demostraciones de Menor efectividad para la recogida
ventas de requisitos
Técnicas de prototipado
• Técnicas para la construcción de prototipos
• Bocetos
• Escenarios
• Storyboards (Historietas)
• Vídeos
• Storyboards navegacionales
• Prototipos de papel
• Maquetas
• Maquetas digitales
• Prototipos de software
• Unas técnicas dan más importancia a la presentación (look) y
otras a la interacción (feel)
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
Escenarios
• Un escenario es una forma de reflejar las historias sobre
personas, sus actividades, productos y entornos.
• Los escenarios destacan objetivos sugeridos por la
apariencia y comportamiento del sistema
• Qué es lo que las personas quieren hacer con el sistema
• Qué procedimientos se usan, cuáles no se usan, cuáles se realizan o
no satisfactoriamente.
• Qué interpretaciones hacen de lo que les sucede.
• Ayudan al diseñador a explorar ideas y las ramificaciones de
decisiones de diseño en situaciones concretas
• Nos permite definir y desarrollar conocimientos sobre el
entorno del usuario y su espacio de trabajo.
Escenarios
• Es difícil conseguir un escenario correcto la primera vez. Es
interesante pensar en diferentes escenarios para reflejar
las diferentes situaciones y puntos de vista diferentes.
• Es importante por otro lado ser consistente con la
representación para ver que pasa en situaciones concretas.
Escenarios
Los escenarios presentan distintos elementos:
• Actores o agentes. Son los que realizan la acción.
• El alumno que busca sus notas.
• Configuración o decorado. Sitúa la acción donde se
desenvuelve, con que elementos, características iniciales, etc.
• El ambiente donde está la PC con la consulta de notas con el
• alumno situado delante.
• Metas u objetivos. Cambios que los actores esperan conseguir
dentro del decorado.
• La consulta de las notas de todas los cursos en las que está
matriculado.
• Acciones o trama. Las acciones que realiza el agente como
consecuencia de su actividad mental: planes, evaluación del
comportamiento del escenario, etc.
Escenarios
• Escenario de tareas
• Es una descripción del mundo del usuario tal como
existe ahora
• Escenario de futuro
• Es una descripción del mundo del usuario en el futuro
Escenarios. Ejemplo
• El alumno X está dentro de la Universidad y desea conocer todas
las notas de los cursos en las que está matriculado en la PC que
para tal efecto está en uno de los edificios de la facultad.
• Para ello, se dirige a la PC e introduce su código de matricula en
la pantalla de entrada a la aplicación.
• X está despistado y se equivoca al introducir el número, por lo
que la aplicación le advierte y le invita a introducir el código de
matricula de nuevo.
• Una vez que se ha identificado de forma adecuada se muestra la
pantalla con las notas.
• Después se va, dejando la pantalla con sus notas.
Escenarios. Tipos
• Narrativa (Lenguaje natural)
• Historia completa de la interacción hecha con la existente o con un
diseño nuevo
• Texto procedural
• Descripción paso a paso de las acciones del usuario y las respuestas del
sistema
• Diagramas de caso de uso
• Representación gráfica de las acciones y decisiones extraídas de la
narrativa
• Storyboard
• Prototipo de papel
• Vídeo
Prototipo en papel
• Este tipo de prototipo se basa en la utilización de papel,
tijeras, lápiz o instrumentos que se puedan utilizar para
describir un diseño en un papel.
• Este sistema nos permite una gran velocidad y flexibilidad
• Se trata de una técnica “altamente económica” puesto que
trabajamos con materiales muy básicos.
Prototipo en papel
• 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
¿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
¿Cómo se hace un prototipo de papel?
• Por ejemplo:
• Supongamos que tratamos de simular el comportamiento
de una funcionalidad concreta de una aplicación que se
ejecuta en un PDA; los prototipos de papel serán las
diferentes pantallas de dicho dispositivo que el usuario irá
visualizando a medida que con el vaya interactuando.
Prototipo en papel
Ejemplo de
prototipo de
papel:
Check-in
Prototipos de papel - Ventajas
• 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
Prototipos de papel - Ventajas
• 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
Prototipos de papel – Desventajas
• 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
Storyboards
• Tienen su origen en la industria cinematográfica
• Consisten en una serie de dibujos o imágenes dispuestos en
formato secuencial de sketches o viñetas que muestran la
evolución de la situación del usuario mientras está
interactuando con el sistema.
• Un ejemplo que rápidamente nos permite saber exactamente
de lo que es un storyboard son los cómics que todos hemos
leído en más de una ocasión.
• Esta técnica suele ir junta a la vista de los escenarios con lo
que se consigue una mayor precisión y sobretodo aporta un
mayor grado de información para su posterior evaluación.
Storyboards
• Ejemplo: Registro en un hotel
Storyboards

• Ejemplo de storyboard:
• Storyboard construido por Google para mostrar el
funcionamiento de su navegador Chrome,
http://www.google.com/googlebooks/chrome/
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
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
Storyboards navegacionales
Storyboards navegacionales
Storyboards navegacionales
• Un alumno desea ver consultar la nota de las asignaturas de
Teleinformática y de Transmisión de datos.
• Está en un edificio alejado de la máquina para las notas, por lo que
decide conectarse por medio de su PDA con PocketPc a través de la red
Wifi de la universidad.
• Existe una aplicación cliente que lee las notas de la base de datos de la
universidad por la red Wifi que precisa introducir su número de
identificación (bertin.osborne) y su contraseña (abcedf). El alumno
nunca se acuerda si tiene una f final o no y decide probar primero con
abced. La contraseña es errónea y necesita introducirla de nuevo.
• Una vez identificado correctamente le aparece una lista con todas las
asignaturas en las que está matriculado y debe seleccionar alguna de las
que quiere comprobar (la 205) por lo que la marca y pulsa el botón
Aceptar. La pantalla muestra la asignatura, y comprueba que todavía no
está la nota del último examen que hizo de la asignatura.
• Como recuerda que la siguiente nota de la sita es Transmisión de Datos,
decide ir a la siguiente asignatura con el botón Siguiente, en lugar de
volver a la pantalla de las asignaturas. Por último cierra la aplicación
cliente.
Storyboards
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
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
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
Vídeos

Ventajas Inconvenientes
Se pueden descubrir problemas de No captura a un usuario
usabilidad en una etapa muy interactuando recíprocamente con el
temprana del proceso de diseño prototipo, careciendo del elemento
Proporciona una simulación dinámica interactivo de otros métodos
de los elementos de la interfaz que se Al emplear materiales simples y
pueden ver y comentar tanto por el carecer de interactividad, los
equipo de desarrollo como por los prototipos de vídeo no apoyan la
usuarios evaluación de detalle de diseño fino
Aunque parezca lo contrario, no son Al permitir tantas opciones, se corre
necesarios muchos recursos 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
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
Prototipos de software - Ejemplo
Prototipos de software
Ventajas Inconvenientes
La fidelidad o semejanza de un prototipo Requiere habilidades de desarrollo de
software con el sistema final es alta software, aunque cada vez en menor grado
Debido a esta fidelidad, son muy útiles Aunque rápido, el método consume mucho
para realizar las evaluaciones de métricas más tiempo que otros tipos de prototipos
(tipo métricas de rendimiento o de (de papel, por ejemplo)
coherencia) Se requieren mayores recursos debido a la
El usuario tiene la sensación de estar necesidad de emplear software y hardware
trabajando con un sistema real 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
Prototipos - Elección
• La elección entre las alternativas depende del objetivo a
evaluar

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 Simplicidad, visibilidad de las funciones, Muy bajo Rápido
papel sintetizabilidad
Maqueta Características físicas Relat. No tan
bajo rápido
Maqueta digital Visibilidad de las funciones, disposición Bajo No tan
de los elementos interactivos rápido
Storyboard Visibilidad de la navegación. Bajo Rápido
navegacional representación de los estados del sistema
Prototipos - Elección
• La elección entre las alternativas depende del objetivo a
evaluar

Técnica ¿Qué se analiza? Coste Tiempo


Vídeo Representación de situaciones interactivas, Alto Muy alto
visibilidad de los actores y objetos que
intervienen,
escenificación de posibilidades futuras
Escenario Representación de situaciones interactivas, Medio Rápido
visibilidad de los actores y objetos que
intervienen
Software Navegabilidad, funcionalidades concretas, Medio Medio/Alto
medidas de rendimiento
Evaluación del prototipo
• Se debe preparar el material con todas las pantallas con los
elementos fijos apilados y los elementos de la interfaz que se
utilizan para la interacción preparados
Evaluación del prototipo
• Es necesario pensar en todas las tareas que el usuario
deberá realizar. Por ejemplo
1. Introducir una identificación errónea.
2. Salir de la pantalla de error.
3. Seleccionar la asignatura de Teleinformática de la pantalla
de asignaturas.
4. Desde la pantalla con los datos de la asignatura de
Teleinformática ir a la asignatura de Transmisión de datos.
a) Volviendo a la pantalla de asignaturas.
b) Mediante el botón “Siguiente”.
5. Salir de la aplicación.
Evaluación del prototipo
• El facilitador o guía explica al usuario el cometido del test.
• Una a una, le explica al usuario las tareas que debe realizar.
• El usuario interactúa con la interfaz (señalando con el
dedo, escribiendo los datos de entrada, explicando con
palabras su interacción).
• Uno o más componentes del equipo irán modificando los
elementos que indique al usuario, simulando las
reacciones del computador a las interacciones del usuario.
• Uno o más componentes del equipo actúan como
observadores anotando las incidencias o, mejor aún,
filmando la prueba.
Evaluación del prototipo
Conclusiones

• El diseño de la interfaz es parte fundamental del proceso de


desarrollo del software y debe ser considerado desde el
principio
• El usuario debe tomar parte en el diseño y no ser mero
espectador
• Los prototipos constituyen una herramienta muy útil para
hacer participar a los usuarios y evaluar el sistema desde las
primeras fases
• La elección de la técnica de prototipado depende de la fase
del desarrollo en que se utilicen