1. Taller de Prototipado Iterativo
Para IxDA Córdoba
por Martín Szyszlican
Programa:
1) Presentación de los participantes y el coordinador
2) Proceso de Diseño Centrado en el Usuario
3) ¿Qué son los prototipos en papel? ¿Cuando utilizarlos?
4) Realización de ejercicio de prototipado
5) Realización de pruebas de usuario
6) Correcciones al prototipo y nueva ronda de pruebas
7) Conclusiones, debate y pizzas.
Presenta: www.clinica-web.com.ar Invita: www.ixdacba.com.ar
Auspicia: www.lemon.com
Auspicia:
www.nutus.com.ar
Taller de Prototipado Iterativo Página 1 de 9

2. Diseño Centrado en el Usuario
Muchas veces ocurre, sobre todo en estas épocas de tercerización, que se está trabajando en un
proyecto sin tener más que una vaga noción de para quién es ese sitio. Por más que conozcamos al
dueño del sitio o al inversor, no trabajamos para ellos, sino para su negocio, y su negocio es el de
darle un producto o servicio a alguien.
Ese alguien es el usuario del sitio que estamos construyendo. Es muy importante conocerlo, saber sus
intereses, su forma de pensar y relacionarse tanto con las áreas temáticas sobre las que tratará
nuestro sitio como con las formas de interacción que se proponen. Saber esto nos permitirá hacer un
sitio más útil, fácil de comprender y efectivo ya que podremos incluir al usuario en cada una de las
decisiones que tomemos durante el proyecto.
Necesitamos saber sobre conocimientos y modos de uso, esta información tiende a ser dinámica y
variar en cada grupo, es por eso que debemos realizar una investigación utilizando alguno de los
siguientes métodos:
• Entrevistas.
• Encuestas.
• Informes de mercado.
• Conocimiento previo.
Los resultados de la investigación deben ser consolidados en un formato liviano, fácil de comprender
por todos los involucrados en el proyecto e incluso en otros proyectos. Para eso es muy bueno
escribirhistorias que cuenten la vida de nuestros usuarios, incluso inventando para ellos nombres y
fotografías, estas pequeñas biografías-cuentos se llaman personajes.
Adicionalmente suelen escribirse textos en los que de describen las situaciones en las que esperamos
que los usuarios accedan al sitio, de forma que podamos comprender su disposición mental en ese
momento y así acercarles exactamente la información que necesitan. Estos relatos se llaman
escenarios. Una versión más técnica de estos escenarios son los llamados casos de uso.
Recién cuando sabemos para quién trabajamos y en qué momento se encontrará con nuestro sitio, es
que podemos empezar a pensar en el contenido, la funcionalidad y la apariencia que el sitio necesita
para ser efectivo.
Taller de Prototipado Iterativo Página 2 de 9

3. Diseño centrado en el usuario Agile
En el desarrollo de sistema o
ciclo del software, lo se
conoce como Desarrollo
Ágil, nace como un
mecanismo de
supervivencia ante los
requerimientos cambiantes
por parte del cliente durante
un desarrollo a medida. Esta
estrategia se trata de reducir
consideradamente la pesada
documentación y generar
entregables a corto plazo.
Esta idea podemos
combinarla con el Diseño
Centrado enel Usuario, para
ello debe ser
suficientemente flexibles
desde la etapa del diseño,
dividiendo el requerimiento
global de manera que las
interfaces resultantes
puedas ser observadas y
ajustadas a medida que se
avanza las otras. No olvidar
que el Diseño Centrado en el
Usuario es un proceso
cíclico y en constante
evaluación que al agregar el
modelo de desarrollo ágil
nos puede facilitar la tarea
de recibir los cambios o
ajustes del cliente cuando le
mostramos por partes el
desarrollo de su producto
agilizando la entrega de
avances.
Taller de Prototipado Iterativo Página 3 de 9

4. Prototipado de baja fidelidad
“Es tu trabajo como profesional de la experiencia de usuario producir la mejor experiencia dentro del
tiempo y el presupuesto disponible, tenés que confiar en que las herramientas y técnicas que elijas
van a ser las correctas para darte la información que necesitás dentro de las limitaciones del
proyecto”
Por Jesmond Allen and James Chudley http://uxdesign.smashingmagazine.com/2013/01/24/effectively-planning-ux-design-projects/
Ventaja del prototipado en papel: Ahorrar tiempo. Un prototipo como el interlocutor de un proceso
de pensamiento en lugar de un entregable (José Allona).
Etimología de prototipo http://www.etymonline.com/index.php?term=prototype http://dictionary.reference.com/browse/prototype
Griego prototypon: "una forma inicial o primitiva"
De protos "inicial, primera" + typos "impresión."
Etimología de fidelidad http://www.etymonline.com/index.php?term=fidelity http://dictionary.reference.com/browse/fidelity
Latin fidelitatem (nom. Fidelitas), en inglés: "faithfulness, adherence,", adherencia
De fidelis "fiel," de fides "fe"
Apego a hechos o detalles, correspondencia exacta con los hechos.
En síntesis, un prototipo de baja fidelidad es:
Una primera impresión en la que tenemos poca fé, que no se apega exactamente a los
hechos.
El prototipado de baja fidelidad es:
Una técnica de diseño y prueba que permite crear y probar ideas o formas
tempranamente, facilitando su modificación, evolución y discusión con otros.
Cuándo hacer prototipado de baja fidelidad:
Sí, cuando...:
• aún no existe forma definida, no está clara o hay varias posibles.
• queremos probar un concepto quitando (tanto como se puede) otras posibles interferencias.
• la resistencia al cambio es un problema.
• tenemos poco tiempo y/o la implementación es complicada.
No, cuando...:
• hay una interacción muy rica y la falta de fidelidad impacta sobre la función.
• se desea evaluar un sistema que ya existe y funciona, y/o compararlo con otro.
• implementar es muy fácil/poco costoso.
Taller de Prototipado Iterativo Página 4 de 9

5. Valor de negocio
• Baja inversión de recursos (tiempo, energía, ganas, etc.) que facilitan el cambio.
• Realimentación rápida para el proceso de diseño.
• Evaluaciones tempranas, previas a grandes inversiones.
• Ahorro de tiempo (que vale oro).
• Minimiza fricciones en el equipo de desarrollo.
Guías generales para prototipar en baja fidelidad
• Geometría: laxa (a mano alzada, muestra claramente que no es definitiva)
•Color: sólo grises, y azul para links. Usar colores sólo cuando haya una
razón.
Taller de Prototipado Iterativo Página 5 de 9

6. •Tipografía y texto: tipografía neutra (sólo 3 tamaños) y texto simulado (puede ser lorem
ipsum).
En dispositivos táctiles y en
prototipos de papel la interacción
es “digital”:
Taller de Prototipado Iterativo Página 6 de 9

7. Prototipado iterativo
El prototipado iterativo es una técnica utilizada para probar con usuarios un diseño tempranamente y
pulir el concepto de interacción (y/o sus interfaces de usuario).
Es similar a un test de usabilidad en cuanto a que se arma un guión del test con tareas y se lleva a
cabo con usuarios reales, pero es diferente ya que no se pretende medir el desempeño, sino pulir un
diseño.
Esta técnica consiste en una serie de sesiones iterativas de tests con 1 usuario cada una donde cada
vez que se encuentra un problema -si los expertos creen que no es un error puntual- se modifica el
prototipo entre usuarios, y el próximo ya lo prueba con la modificación hecha.
Para poder tener esa flexibilidad, es necesario trabajar con algún prototipo de baja fidelidad y
programar un tiempo entre usuario y usuario, normalmente puede ser de 20~25 minutos.
Es una técnica que requiere esfuerzo y coordinación en el equipo, pero brinda resultados muy
interesantes. Dependiendo de la complejidad del problema, se pueden hacer entre 3 y 5 usuarios por
día; en pocos días, se pueden hacer 12 a 15 iteraciones. Si partimos de un concepto bien plantado,
deberíamos tener un prototipo anotado, documentado y libre de problemas de usabilidad
importantes en 1 semana.
Las limitaciones con esta técnica están relacionadas con la factibilidad de interactuar y modificar el
prototipo. Si es una aplicación con mucha interactividad (como un sistema de visualización complejo,
por ejemplo), es muy difícil hacer un test realista (que interactúe) con prototipos de baja fidelidad. En
ése caso, la flexibilidad del marco (framework) usado para los prototipos pone el límite a la innovación
entre usuario y usuario. Si el esfuerzo/tiempo es mucho (pasa de 1 hora para modificaciones
relativamente simples), se pierde la dinámica de la iteración y es preferible un test de usabilidad.
Taller de Prototipado Iterativo Página 7 de 9

8. Pruebas con usuarios
¿Por qué hacer pruebas?
Así como para saber si el código está bien escrito tenemos que ejecutar un compilador, para saber si
una interfaz está bien, tenemos que pedirle al usuario que ejecute una serie de tareas. Tanto si no
puede completar la tarea como si no entiende alguna cosa, consideraremos que la interfaz tiene un
error a mejorar.
¿Cómo se hace una prueba?
1. Se convocan usuarios. Estos deben ser lo más cercano posible a un usuario real del sitio.
2. Se les da una serie de tareas, se les pide que piensen en voz alta.
3. Se toma nota del comportamiento del usuario y de los problemas que encuentra.
4. Se analizan las notas buscando oportunidades de mejora.
¿Cómo se prepara el guión?
Primero debemos tener el claro qué características de la interfaz estamos probando. En una prueba
inicial, debemos probar si el usuario puede completar o no la tarea principal. La tarea principal de la
interfaz depende de la funcionalidad de la misma, puede ser hacer una compra, encontrar un item,
agregar un contacto. Además prestar atención a si los rótulos que tienen los botones y enlaces son
comprensibles.
Una vez que tengamos esto en claro, podemos definir las tareas que vamos a pedir al usuario. Es
importante ser cuidadoso en la redacción de la consigna, ya si esta contiene palabras presentes en la
interfaz, estaríamos facilitándole el trabajo, por ejemplo si el boton dice “buscar”, no pedirle al
usuario que “busque” algo, sino que “encuentre” o cualquier otra forma indirecta.
Contenido del guión para el facilitador:
1. Saludar al usuario
2. Dejar en claro que estamos probando la interfaz, que esto no estamos tomándole un exámen
al usuario.
3. Cuestiones legales y de privacidad.
4. Pedirle que piense en voz alta mientras realiza las tareas (protocolo think-aloud)
5. Explicar la tarea a realizar y pedirle que nos avise cuando haya terminado.
Análisis del test
• Compilación de datos registrados.
• Comprobación de cumplimiento de metas cuantitativas.
• Detección de patrones de conducta, ilustrados con frases y episodios.
• Creación de informe con conclusiones y recomendaciones de diseño.
• Presentación del informe a los interesados.
Taller de Prototipado Iterativo Página 8 de 9

9. Fuentes:
• Simplementewiki.org, wiki creada por Eduardo Mercovich con licencia Licencia Creative
Commons Atribución-Compartir Obras Derivadas Igual 2.5
• "Diseño centrado en el usuario Agile”, de Diseño de Experiencia Usuaria, blog de Percy Negrete
http://blog.pucp.edu.pe/ux con licencia Creative Commons Attribution-NonCommercial-
NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)
• “Effectively Planning UX Desing Projects”, de SmashingMagazine.com
Bibliografía sugerida:
• About Face 3, Alan Cooper
• Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests
• Libro de UX de SmashingMagazine.com: http://media.smashingmagazine.com/wp-
content/uploads/2012/09/06_9780470666852-ch02.pdf
• Lean UX: Applying Lean Principles to Improve User Experience, de Jeff Gothelf
• UX Design For StartUps de UXPin.com: http://uxpin.com/ux-design-for-startups.html
Sobre este texto:
Este texto fué compilado y adaptado por Martín Szyszlican para el Taller de Prototipado Iterativo
organizado por IxDA Córdoba el 8 de febrero de 2013, y se ofrece bajo una Licencia Creative
Commons Atribución-Compartir Obras Derivadas Igual 2.5
Taller de Prototipado Iterativo Página 9 de 9