Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Prototipado
Capítulo IV
Prototipado
Toni Granollers i Saltiveri y Jesús Lorés Vidal
mismo tiempo que concede un alto grado de libertad para que el equipo de desa-
rrollo decida libremente cuándo y cómo deberá aplicar las diferentes técnicas.
Entre otras características de los prototipos, encontramos las siguientes:
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 140 Diseño de sistemas interactivos centrados...
1. ¿Qué es un prototipo?
El supuesto lógico del diseño iterativo es que los prototipos son construidos
y evaluados para guiar el rediseño y la mejora.
Un prototipo es una implementación parcial, pero concreta, del diseño de
un sistema. Los prototipos pueden ser creados para explorar muchas cuestiones
acerca del sistema durante su desarrollo.
En lo que respecta a una interfaz de usuario, se realizan prototipos con la finali-
dad de explorar los aspectos interactivos del sistema (Rosson y Carroll, 2002), inclu-
yendo su usabilidad, accesibilidad y/o funcionalidad.
Copyright © 2005. Editorial UOC. All rights reserved.
Los prototipos son, además, herramientas altamente útiles para hacer parti-
cipar activamente a los usuarios en el desarrollo y poder evaluar el producto en
las primeras fases del desarrollo –durante las etapas iniciales, es imposible reali-
zar evaluaciones sin la ayuda de un prototipo.
El uso de los prototipos, sin embargo, no se limita sólo a probar las interac-
ciones que los usuarios deben realizar, sino que son útiles también para otras
actividades durante el desarrollo de un sistema.
El uso de los prototipos es altamente útil también durante la recogida de re-
quisitos, ya que amplía y mejora la calidad de la información necesaria para la
implementación del sistema.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 141 Capítulo IV. Prototipado
Hay distintas opciones para realizar prototipos de interfaces de usuario. Las di-
ferentes técnicas varían entre sí en términos de: 1) el coste y el esfuerzo de producir
el prototipo y, 2) la fidelidad y generalidad del resultado. Será necesario, por tanto,
valorar en cada momento cuál será la técnica que hay que utilizar en función del
periodo del desarrollo en el que nos encontremos y de los objetivos para cumplir.
Las técnicas de prototipado se suelen catalogar en dos categorías (Rettig, 1994):
baja fidelidad (low-fidelity o low-fi) y alta fidelidad (high-fidelity o hi-fi).
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 142 Diseño de sistemas interactivos centrados...
Ventajas Inconvenientes
Determinados autores aseguran (Virzi y otros, 1996) que, al menos en las primeras
etapas del diseño, los prototipos de baja fidelidad son tan efectivos como los de alta
fidelidad.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 143 Capítulo IV. Prototipado
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 144 Diseño de sistemas interactivos centrados...
4. Técnicas de prototipado
1. En palabras de Snyder (2003), look son píxeles y feel es código, y la producción de los dos requiere
cierto esfuerzo que varía dependiendo del método de prototipado utilizado. Esta reflexión hace refe-
rencia a las interfases visuales (dominantes actualmente) y no a las interfases multimodales.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 145 Capítulo IV. Prototipado
4.1. Bocetos
Los bocetos son representaciones de primeras ideas. Se usan en las etapas más
iniciales del diseño, a menudo antes incluso de determinar muchos aspectos del
análisis de requisitos, 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 quince o veinte segundos, de manera que se pueden generar gran can-
tidad de bocetos en muy poco tiempo. Se trata tan sólo de una recogida de ideas
iniciales.
4.2. Storyboards
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 146 Diseño de sistemas interactivos centrados...
acerca de su funcionamiento.
2. Representar la situación de un determinado proceso tal y como se realiza actualmente sería una
vista, y otra sería tal y como se realizará tras la implantación de un nuevo sistema.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 147 Capítulo IV. Prototipado
Este sistema permite una gran velocidad y flexibilidad a la hora de hacer los
prototipos. Además, se trata de una técnica muy económica, puesto que requie-
re materiales muy básicos
El objetivo del prototipo de papel no es probar o verificar lo bonito que es el di-
seño, sino que se trata de verificar si los usuarios son capaces de realizar sus tareas.
Este tipo de prototipo no necesita incorporar todos los avances tecnológicos.
Sólo es necesario que capture la funcionalidad del sistema y que comunique la
información y sus interacciones adecuadamente.
La técnica del prototipado de papel consiste en dibujar en un papel, a dife-
rentes niveles estéticos, las interfaces que se van a probar y valorar. Los diferen-
tes estados de la interfaz se dibujan en hojas separadas, y mediante un proceso
de ordenación que el diseñador determina, permite que el usuario final interac-
túe con este material y simule el funcionamiento del sistema.
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 que el usuario se encontraría
como resultado de las diferentes interacciones que produciría, las cuales son,
evidentemente, ficticias.
Cuando se realiza un prototipo de papel, no debemos olvidar que de lo que
se trata es de reflejar aquellos aspectos de la interfaz del usuario referidos a las
interacciones que el sistema le proporciona. Esto indica un prototipo de papel
que deberá mostrar dos aspectos muy importantes: uno es la presentación, que
hace referencia a qué elementos proporciona esta interfaz para la interacción, y
el otro es la navegación, en forma de información complementaria con diseño
claramente perceptible que facilite la movilidad durante la fase de evaluación
Copyright © 2005. Editorial UOC. All rights reserved.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 148 Diseño de sistemas interactivos centrados...
• A la hora de evaluarlo, es fácil que se den por supuestas cosas que realmente
Inconvenientes no recoge el prototipo.
• La construcción de los prototipos de papel parece tan evidente que con frecuencia
se menosprecian aspectos tan importantes como que el prototipo se asemeje al
máximo en tamaño y forma al dispositivo para el cual estamos realizando
–cuanto más realistab resulte el prototipo, mejor será el feedback de los usuarios– el
prototipo, lo cual suele llevar a rediseños posteriores que inutilizan los ya hechos.
a. Fenómeno relacionado con el miedo que tienen muchas personas hacia la tecnología.
b. Por ejemplo, un prototipo de papel de un dispositivo que simule el funcionamiento de un sistema que se ejecutará con un PDA debe
concordar con el tamaño real del dispositivo.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 149 Capítulo IV. Prototipado
“El prototipo de papel tiene otra ventaja aparte del impacto en la calidad final del
producto. Considera todo el resto de los libros que has leído sobre tecnología y orde-
nadores, diseño web, etc. ¿Cuántas cosas de ellos seguirán siendo válidas dentro de
diez años? ¿Y de veinte? Todo lo que aprendas sobre el prototipado de papel podrás
utilizarlo en todos los proyectos durante el resto de tu carrera.”
C. Snyder (2003). Paper Prototyping. The fast and easy way to design and refini user inter-
fícies. San Francisco: Morgan Kaufmann.
Los dos gráficos de la figura 4.1 nos servirán para constatar la utilidad de una
técnica tan simple y tan familiar de elaboración de prototipos de sistemas de
software. Estos gráficos muestran el resultado de distintos profesionales desarro-
lladores interesados por la usabilidad de los sistemas de software, a los que se
planteó (entre otras) la pregunta siguiente: “¿qué grado de importancia otorgas
al prototipado en tu trabajo diario?”.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 150 Diseño de sistemas interactivos centrados...
4.4. Maquetas
maqueta este dispositivo no existía. Se trataba del dispositivo conocido como tablet
PC, que actualmente ya se encuentra disponible comercialmente. Para poder
simular este dispositivo, se realizó una tableta realizada con madera y papel.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 151 Capítulo IV. Prototipado
Para realizar una maqueta digital ya no son suficientes materiales básicos, sino
que ya es necesario utilizar herramientas más sofisticadas (por ejemplo, editores
gráficos) que precisan de mayor tiempo de desarrollo y mejor preparación de las
personas que los realizan. Por el contrario, el mayor nivel de detalle de las maquetas
digitales permite visualizar de una manera muy aproximada a la versión final el di-
seño de la interfaz (colores, estructura de navegación, botones, etc.).
Las maquetas realizadas con papel y lápiz se perciben como herramientas
poco detalladas en las que priman más los aspectos conceptuales, mientras que
usuarios e implicados ven las maquetas digitales como versiones finales que no
se pueden cambiar, por lo que es más adecuado utilizarlas en la fase de diseño.
3. No hay que confundir los estados de las interfaces con los estados del sistema. Los primeros
representan las diferentes posibilidades de la interfaz, mientras que los segundos lo hacen con el
funcionamiento interno del sistema.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 152 Diseño de sistemas interactivos centrados...
4.7. Vídeos
una oficina de una compañía. Tognazzini escogió una product manager, Julie, de
una compañía de automóviles que se vio rápidamente sorprendida con la necesi-
dad de realizar una presentación multimedia para una reunión de emergencia
con sus superiores.
Una película o un vídeo permiten construir la demostración definitiva de un
nuevo sistema. No existen limitaciones ni por parte del hardware ni del software.
Todo funciona perfectamente, sin importar cuántas veces se mira la grabación, y
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 153 Capítulo IV. Prototipado
los mensajes pueden conducir al usuario a las conclusiones que el productor tiene
en su mente. Las dos características son dos de las ventajas e inconvenientes que
el prototipaje en vídeo ofrece.5
Ventajas • Proporciona una simulación dinámica de los elementos de la interfaz que los
pueden ver y comentar tanto el equipo de desarrollo como los usuarios.
4.8. Escenarios
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 154 Diseño de sistemas interactivos centrados...
Esta técnica sirve tanto para explicar la manera en la que se realizan las accio-
nes actualmente como para predecir el futuro. Lo importante en ambos casos es
que el escenario contenga la mayoría (si no la totalidad) de las situaciones que
directa o indirectamente intervienen durante el proceso interactivo, sobre todo
aquellas que son claves para que su consecución futura sea posible.
Peter Schwartz (1996) aporta una reflexión sobre los escenarios que vale la pena tener
en cuenta: un escenario no es una predicción. Simplemente, no es posible predecir el
futuro con certeza. Un viejo proverbio árabe dice que quien predice el futuro miente,
incluso si cuenta la verdad. Deberemos entender los escenarios, por lo tanto, como
vehículos para ayudar a las personas a aprender.
Copyright © 2005. Editorial UOC. All rights reserved.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 155 Capítulo IV. Prototipado
Elemento
Definición Ejemplos
del escenario
Persona o personas que interactúan Un contable que utiliza una hoja de cálculo
con los dispositivos interactivos o por primera vez.
Actores
cualquier otro elemento descrito en
la configuración.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 156 Diseño de sistemas interactivos centrados...
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 157 Capítulo IV. Prototipado
Figura 4.2
la recepción de una empresa en un entorno ubicuo para sorprender a los clientes y visitantes.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 158 Diseño de sistemas interactivos centrados...
4) Diagramas de casos de uso de UML. Los casos de uso describen escenarios (de
uso del sistema) a partir de secuencias de interacciones entre el sistema y uno o
más actores, los cuales obtienen los resultados observables del sistema (que es con-
siderado como una caja negra). En esta notación, los actores representan tanto
a personas como otros sistemas que interactúan con el sistema que se está des-
cribiendo (Scheneider, 1998). La técnica de los casos de uso, inicialmente pen-
sada para la especificación de requisitos funcionales de sistemas interactivos
(Jacobson, 1993), actualmente forma parte de los diagramas UML (Booch, 1999).
Una de las características por las que muchos adeptos defienden la represen-
tación de los escenarios con esta técnica es que, al tratarse de una notación for-
mal, no hay lugar para las interpretaciones ambiguas.
Este tipo de diagramas son mayoritariamente aceptados por los componen-
tes de los equipos de desarrollo que provienen de la ingeniería del software, los
cuales defienden que son fácilmente comprensibles por los clientes y usuarios
y, además, sirven de base para las pruebas del sistema y para la documentación
de los usuarios (Durán, 2002).
Figura 4.3
Copyright © 2005. Editorial UOC. All rights reserved.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 159 Capítulo IV. Prototipado
De manera resumida, cabe mencionar que los casos de uso tienen una repre-
sentación gráfica en los denominados diagramas de casos de uso en los cuales los
actores son representados por símbolos que esquemáticamente tienen forma
humana y los casos de uso, por elipses. Unas flechas entre el actor y el caso de
uso simbolizan la participación de los primeros en los segundos.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 160 Diseño de sistemas interactivos centrados...
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 161 Capítulo IV. Prototipado
No se trata, pues, de utilizar parte del desarrollo que se está realizando, sino
que es una aplicación con la funcionalidad mínima para que el usuario pueda
realizar las interacciones necesarias que permitan visionar el funcionamiento
(ficticio en esta fase) del sistema resultante.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 162 Diseño de sistemas interactivos centrados...
• Los prototipos creados por este método tienen una fidelidad alta
con el producto acabado.
Ventajas
• Estos prototipos permiten las evaluaciones de métricas.
• Aunque rápido, el método consume mucho más tiempo que otros tipos
de prototipos (de papel, por ejemplo).
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 163 Capítulo IV. Prototipado
asociada deben ser realistas: si no podemos contrastar los resultados entre pro-
totipos Java contra HTML ejecutando tareas reales, o si se evalúan con usuarios
más avanzados que el usuario medio de la aplicación, será muy difícil interpre-
tar los resultados y tomar decisiones correctas. Si los retrasos de feedback son me-
didos bajo condiciones de red limitadas, o si los diálogos simulados son demasiado
simplistas, las interpretaciones temporales no serán representativas.
Por lo tanto, la construcción y posterior prueba de prototipos de propósito
especial y específico pueden ser bastante caras, además de absorber tiempo y re-
cursos de otras actividades del proyecto.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 164 Diseño de sistemas interactivos centrados...
• Simplicidad, minimalismo.
Prototipo • Visibilidad de las funciones (más que la misma funcionalidad).
en papel • Metodología de interacción (facilidad).
• Capacidad de ser sintetizado.
• Reflejo de su utilización.
Maquetas
• Reflejo de las características físicas.
• Navegabilidad.
Prototipo en software
• Seguimiento de las tareas.
horizontal
• Globalidad del proceso interactivo.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Editorial UOC 165 Capítulo IV. Prototipado
Resumen
mos herramientas de apoyo, que ayuden a conectar a estos usuarios con nuestro
sistema, incluso cuando todavía no lo tenemos acabado. Estas herramientas son
los prototipos.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.
Copyright © 2005. Editorial UOC. All rights reserved.
Granollers, I. S. T., Lorés, V. J., & Cañas, D. J. J. (2005). Diseño de sistemas interactivos centrados en el usuario. Retrieved from http://ebookcentral.proquest.com
Created from unadsp on 2019-06-14 21:32:06.