Cómo empezar a diseñar UX (prototipado en 3 fases)

Benditos ordenadores, pero cuánto daño nos pueden hacer.

El programa X de diseño (sustituya X por Sketch, photoshop, illustrator, Axure, Balsamiq o cualquiera con el que se sienta un ninja), nos abre un infinito y maravilloso mundo de capas, vectores o píxeles, increíblemente potente y aparentemente fácil de manejar. Los que nacimos con dos manos zurdas para dibujar, por fin vemos la luz y podemos diseñar y prototipar, arrancando en poco minutos el aplauso de amigos y familiares. ¡Benditos ordenadores!

Si fuésemos artistas (y con tener mucho arte no vale) al terminar nuestra obra cerraríamos el ordenador, copa de vino en mano, y esperaríamos el aplauso del respetable. En cambio, los diseñadores nos sentamos esperando un email con una lista infinita de cambios (o infinitos emails con un cambio en cada uno y contradictorios entre sí). En ese momento empieza el tormento del diseñador que soñaba con ser artista, creando n versiones del archivo original (-2, -2-ok, -2-ok-final, 2-ok-final-aprobado…) ¡Que alguien detenga esta locura!

Mover píxeles al final se vuelve caro. Para el cliente que tiene al diseñador tirando de esquinas durante días y para el diseñador, que a partir de la segunda versión se pregunta por qué no montó una tienda para curvies con su amigo Antonio.

Por eso yo apuesto por dividir el proceso en tres fases: Primer boceto, pasar a limpio y prototipo navegable.


Fase 1.
Primer boceto.

Hacemos cajas y botones a destajo y comenzamos a pensar en estructuras y flujos de pantallas. Empezamos por lo general y vamos entrando en detalles según se nos van ocurriendo. Debemos dibujar todas las elementos y pantallas que tendrá el diseño, aunque su tamaño y aspecto no importan. Además podemos revisar y mejorar cualquier elemento según avanzamos. Este primer boceto se puede hacer con el cliente o se debe compartir con él. Compartirlo nos va a ayudar a detectar problemas por el hecho de contarlo y además este primer feedback nos dará gran cantidad de ideas de lo que el cliente tiene en la cabeza.

Empezar a trabajar sobre un papel es fácil y rápido (cuanto más sucio sea el papel más fácil y rápido es) y hacer cambios sobre ese papel es increíblemente fácil: se tacha y se redibuja al lado. Yo tengo un cuaderno específico para este primer boceto y mola mil volver las páginas hacia atrás y ver como empezó un diseño y cómo evolucionó.

Una vez que nos sentimos cómodos con el boceto pasamos a la siguiente fase.

Primer boceto UX


Fase 2.
Pasar a limpio.

Aunque el ordenador nos pone ojitos y sus led nos gritan, merece la pena seguir con el papel un poco más. La finalidad de esta fase no es solo tener un boceto que poder enseñar e incluso testar, sino que en esta segunda iteración pensaremos más los detalles y lo encajaremos todo a su tamaño aproximado. La pantalla del dispositivo desde el que se verá es muy importante, así que merece la pena hacer una plantilla, utilizando una regla para que las lineas nos salgan rectas.

El objetivo es reproducir exactamente cómo será la aplicación y pensarlo de esa manera nos ayudará a descubrir muchos problemas de usabilidad que no habíamos contemplado en el primer paso. No pasa nada, ¡sigue siendo papel! Deposita en el contenedor azul la hoja donde esta esa pantalla que odias y replantea el diseño (si el cambio es grande hazlo primero en el cuaderno de sucio).

Cuando termines no pierdas la oportunidad de enseñárselo a quien puedas, sobre todo a tu cliente. El nivel de detalle que le des te permitirá hacer incluso test de usuario y si te has vuelto muy loco puedes incluso testar interacción (como en este vídeo).

Imagen de app en limpio


Fase 3.
Prototipo navegable.

Con suavidad presiona el botón para encender tu ordenador y siente como su ventilador te echó de menos. Cuando ya tenemos un diseño bastante cerrado merece la pena ir más allá y acercarnos mediante la tecnología al que será el producto final. Aunque tiene sus detractores entre los puristas del UX, para mi Axure es la mejor herramienta del mundo. Crear un prototipo altamente funcional nos va a permitir ver qué cosas funcionan y cuales no, cuales habíamos olvidado y sobre todo va a permitir al cliente ver por donde va su proyecto y qué quiere cambiar antes de llegar a la costosa parte del diseño visual o la programación frontend.

El grado de complejidad al que podemos llegar con Axure es increíble, pero es fácil perderse en funcionalidades y programaciones. No olvides nunca que, aunque lo parezca, no es ni podrá ser el producto final. No hace falta que desarrolles y programes cada uno de los botones, pero si es interesante que le dediques tiempo a las funcionalidades más críticas y a aquellas más novedosas sobre las que necesites hacer un test de usuario más real.

Además de Axure, existen cienes de programas de prototipado que se pueden ajustar a las características y conocimientos de cada uno. En esta web puedes consultar los principales programas de prototipado web

Las imágenes de ejemplo han sido extraídas de un proyecto de aplicación móvil para diabéticos realizada en el Máster de Usabilidad y Experiencia de Usuario (UX) de Kschool Madrid.  En este enlace puedes ver el desarrollo de las fases: Aplicación Diabetes

Prototipo navegable

Si te interesan las herramientas de prototipado, tal vez te interese este artículo sobre herramientas de diseño y prototipado en interfaces de voz, donde hago un completo estudio de los diferentes tipos de herramienta que podemos utilizar para diseñar interfaces como Alexa o Google Assistant.

Si estás buscando un consultor UX, echa un vistazo a mi portfolio o mándame un email a hola@jesusmartin.eu
 

Jesús

Soy Jesús Martín, y fui el diseñador de Alexa en Francia, Italia y España tras su lanzamiento en esos países. Me enamoré de la tecnología y de sus recovecos hace ya varios años y lo que voy descubriendo lo cuento en esta página.

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *