Los beneficios del prototipado web en el diseño de interfaces

Muchas veces para expresar una idea tomamos un papel y escribimos o dibujamos lo primero que se nos viene a la mente. A veces esa primera idea se sostiene hasta el final y nos sorprende lo fiel que fuimos a ese impulso. Pero otras, cuando lo llevamos a la realidad resulta completamente distinto a lo que imaginamos.

¿Qué es un prototipado web?

El prototipado web permite obtener una visualización previa de una página web, aplicación o interfaz en desarrollo, antes de llegar a su etapa final. Su finalidad principal es anticipar errores y maximizar la experiencia final de uso. En esta instancia se evalúa su navegabilidad y usabilidad, diseño de las secciones y experiencia total del usuario. Además, es una forma de abaratar el proceso de producción porque es más simple realizar modificaciones sobre el prototipo que sobre el producto final. Esto significa ahorro de tiempo y dinero.

Recordemos las fases del proceso de Design Thinking: descubrir, definir, idear, prototipar y evaluar. El prototipado es la instancia donde la idea comienza a tomar forma y tiene sus primeras interacciones con las personas que lo usarán. A partir de esa experiencia se itera el proceso la cantidad de veces que sea necesario hasta llegar al producto deseado.

Por lo tanto, el prototipado web no sólo sirve como una maqueta ideal para mostrar el proyecto (por ejemplo, frente al equipo de desarrollo web o en la búsqueda de inversores), sino que también sirve para recopilar opiniones de usuarios, lo cual permite revisar las decisiones tomadas.

¿Cómo hacer un prototipado web?

Para llevar a cabo un prototipado web es necesario tomar algunas decisiones que determinarán la organización de trabajo y el tipo de prototipo a desarrollar.

Por un lado, hay que decidir: quiénes en el equipo se encargarán de llevarlo adelante o en qué instancia se tercerizará el proceso; qué nivel de desarrollo tendrá el prototipo (a qué punto intermedio se llegará entre el boceto y el producto final); en consecuencia, qué presupuesto se destinará; en cuántas instancias de trabajo se dividirá el proceso y cómo se registrarán los comentarios de los usuarios.

Por otro lado, hay que decidir con qué herramienta se va a llevar adelante. Para esto, es importante saber que, en función de esa decisión, variará el tipo de fidelidad del prototipo. Por ejemplo, un desarrollo en papel es menos fidedigno con respecto al producto final que un desarrollo hecho en herramientas interactivas que permiten ver las “reacciones” que tendrá la página.

Herramientas para hacer prototipado web

En el amplio abanico de opciones que hay para hacer el prototipado se puede elegir entre:

Bocetos y anotaciones. Desde dibujos en papeles, cartulinas y post its hasta murales digitales colaborativos. Permiten volcar rápidamente las ideas, mover las partes y empezar a bocetar la estructura deseada.
Wireframes y mockups. Con estas herramientas de diseño se puede avanzar en detalles estéticos e impactar el branding. Una vez armadas las distintas pantallas se puede ver el look & feel general del proyecto.
Prototipos interactivos. Aplicaciones online que avanzan en la posibilidad de ver la dinámica entre pantallas e interacción entre las secciones. Se puede trabajar colaborativamente y muchas tienen que opciones que permiten acercarse a la etapa de programación de la página.

En muchos casos es probable que se usen las tres herramientas en distintas instancias, dependiendo el tipo de proceso de diseño que se esté llevando adelante.

Algunas herramientas para probar:

El prototipado web es una estrategia inteligente de diseño que presenta muchos beneficios:

Visualización rápida de cómo será el producto final.
Ahorro de tiempo y dinero: se pueden anticipar errores y permite hacer cambios sobre una instancia “borrador”.
Ofrece una forma preliminar de mostrar y compartir el proyecto con interesados, diseñadores y desarrolladores.
Ayuda a entender los tiempos y fases que llevará el desarrollo total.
Permite entregar una primera versión a usuarios para que den los primeros feedbacks de navegabilidad y usabilidad.