Técnicas de Prototipado en el Diseño de Interacción y UX
Bocetos
Los 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 o 20 segundos, de manera que se puede generar una gran cantidad de bocetos en muy poco tiempo. Se trata solo de una gran recogida de ideas iniciales.
Storyboards
Tienen su origen en la industria cinematográfica. Podemos utilizar este concepto, empleado en el cine o el teatro, para la realización de un escenario de interacción que puede ser evaluado con distintas técnicas. 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. Es una narración gráfica de una historia en cuadros consecutivos.
A veces tenemos una muy buena idea en la cabeza, pero no sabemos transmitirla de palabra; para ello, lo hacemos gráficamente. 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 concreto, aunque sí que será útil como material de soporte, tanto para asegurarse de que el diseñador ha comprendido el problema como para discutir detalles con los usuarios, implicados y responsables del proyecto acerca de su funcionamiento.
4
Prototipos de papel
Son una técnica de diseño que utiliza papel y lápiz para representar interfaces. Su objetivo no es que el diseño sea bonito, sino comprobar si los usuarios entienden la interfaz y pueden realizar sus tareas.
Cómo se hacen y se usan
Se dibujan las pantallas en hojas separadas y se indica la navegación entre ellas. El usuario interactúa con el prototipo mientras el diseñador cambia las hojas simulando el comportamiento del sistema.
Ventajas
- Detectan problemas de usabilidad muy pronto.
- Son rápidos, baratos y fáciles de modificar.
- Mejoran la comunicación entre diseño y desarrollo.
- Los usuarios se sienten cómodos proponiendo cambios.
- No requieren tecnología ni programación.
Inconvenientes
- No permiten evaluaciones muy detalladas.
- No simulan el comportamiento real del sistema.
- Pueden darse cosas por supuestas que no están representadas.
- Si no se cuida el tamaño y forma del prototipo, puede no servir para fases posteriores.
Maquetas
Una maqueta es un modelo a tamaño reducido de algún objeto, monumento o 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 (Mockups)
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 (como 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, etc.). A veces son percibidas por los usuarios como versiones finales que no se pueden cambiar, por lo que pueden usarse en la fase de diseño, aunque la experiencia y facilidad de aprendizaje de algunas herramientas hace que se usen desde el primer momento.
Maquetas digitales (Wireframes)
En el diseño web también aparece el término Wireframe, que esquematiza el diseño de la página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, aunque:
- Este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.
- En otras palabras, se enfoca en «qué hace la pantalla, no cómo se ve».
Pueden ser dibujados con lápiz y papel, esquemas en una pizarra o usando aplicaciones de software libre o comerciales.
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, etc.) 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.
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 del sistema que solo son ideas, están en fase muy inicial o son imposibles de realizar (tecnología inexistente, lugares inalcanzables). De esta manera, ofrecen una manera relativamente económica de visualizar partes de sistemas futuros.
Ventajas
- 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.
Inconvenientes
- 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.
Prototipos de software
Son implementaciones (fase de implementación) 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. Es recomendable no utilizarlos en las primeras fases, donde se busca mayor rapidez.
