Wireframes y Prototipos

Para crear una buena aplicación web es esencial empezar con la interface. Con lo que el cliente final tiene que trabajar cada día. La interface tiene que ser clara y comunicar efectivamente lo que el usuario necesita hacer o entender con cada pantalla.

Lograr una interface clara no es fácil. La realidad es que la mayoría de las veces cometemos pequeños errores que confunden a los usuarios. Lo que significa que la unica forma de llegar a un diseño efectivo es viendo a los usuarios usar lo que tienes, entender los problemas con los que se encuentran y solucionarlos. En resumen “user testing” y re diseñar.

Mi herramienta favorita para lidiar con este asunto son los wireframes. Aunque regularmente los hago usando OmniGraffle, en proyectos reciente he empezado a hacerlos en papel y el resultado ha sido muy interesante.

Primero dibujo con muy pocos detalles dos o tres pantallas y hago que algún miembro del equipo use los wireframes como si fueran el producto final. Para hacer click tienen que tocar el papel donde hay botones dibujados. Este tipo de “user testing” informal ayuda a detectar problemas grandes en el diseño y al ser un simple “sketch” en una hoja de papel, hace muy fácil botar ese diseño y probar uno nuevo.

Ayer mismo estaba trabajando en una aplicación que uno de sus componentes principales es una agenda. Probamos al menos 15 diseños diferentes para resolver la presentación de la data en la pantalla. Luego hicimos pruebas con dos personas que visitaron la oficina donde estábamos y descubrimos problemas con donde teníamos los botones para realizar acciones sobre la data. En 2 minutos hice un nuevo dibujo con un pequeño cambio y las próximas dos personas que hicieron el “test” no se encontraron con el mismo problema.

Este acercamiento al “user testing” es informal y agil pero estoy convencido de que ayuda a mejorar las interfaces en una etapa temprana del proceso. Definitivamente sigo pensando que una vez que tengamos un prototipo en html y funcional deberíamos hacer más pruebas e incorporar cambios que ayuden a resolver los problemas encontrado en las pruebas.

Esta última parte es la que nunca veo suceder. Mucha gente hace “testing” pero luego ignoran los resultados y no hacen nada por mejorar los problemas que se encuentran.

Para hacer “testing” es necesario ser humilde, aceptar los resultados y hacer cambios para resolver los problemas.

Los wireframes en papel hacen más fácil este proceso. No cuesta mucho dibujar un “sketch” con algunas ideas nuevas y probarlas rápidamente.

Es mejor producir muchas ideas de “baja resolución” y encontrar la que mejor funciona, que producir una sola idea de “alta resolución” y apostar todo a ella.