Creación de wireframes

Los wireframes son herramientas muy importantes en el proceso de creación centrada en el usuario. Con las herramientas adecuadas se pueden crear fácil y rápidamente.

Ya he escrito respecto del proceso de arquitectura de un proyecto digital sobre la producción de mapas mentales y flujos de usuario; el siguiente paso en el proceso de diseño centrado en el usuario corresponde a los wireframes, que nos ayudan a definir cuáles serán los elementos en la interfaz y en los sistemas de navegación, así como la forma en que trabajarán juntos.

Wireframe en papel
Wireframe en papel

Los wireframes no son parte del proceso de diseño visual, por lo que no incluiremos en este proceso la definición de colores, gráficos o la tipografía a utilizar en el diseño final.

Wireframe low-fi con Balsamiq
Wireframe low-fi con Balsamiq

Se pueden construir dos tipos de wireframes: los de baja calidad y los de alta calidad. Los wireframes low-fi son esquemas donde sólo vamos a colocar cuadros abstractos con una etiqueta simple que explique su rol en la maqueta. Los wireframes low-fi pueden crearse usando sólo lápiz y papel, en un pizarrón o con una herramienta que no aporte mucho detalle como Balsamiq Mockups.

Los wireframes high-fi son aproximaciones más complejas y detalladas donde todas las opciones de navegación, como las opciones para aceptar términos o condiciones, o para recuperar una contraseña sí están presentes. Los wireframes high-fi pueden servir incluso para desarrollar un prototipo interactivo.

Una buena herramienta para desarrollar wireframes detallados es Axure RT, aunque aplicaciones como Adobe Illustrator también son muy recurridas por su flexibilidad.

Wireframes high-fi en Axure
Wireframe high-fi en Axure

La ventaja de herramientas como Axure o Balsamiq es que fueron creadas desde el principio para crear wireframes de manera muy sencilla, basando su interfaz en un modelo de interacción de arrastrar-y-soltar (drag and drop).

Axure incluye además herramientas de personalización e interacción poderosas donde un  wireframe simple puede llegar a verse y a funcionar casi como el producto final con poco esfuerzo, porque los archivos del wireframe se exportan como HTML, lo que permite realizar trucos muy interesantes mediante CSS y JavaScript sin necesidad de tener escribir código desde cero.

En futuros artículos escribiré más a fondo sobre Axure como herramienta de prototipado, desde sus funciones más básicas hasta algunos trucos para conseguir prototipos interactivos avanzados.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO

Mapas Mentales

En muchos proyectos de tecnología no se genera una documentación inicial que englobe todos detalles que el producto debe de contener. Los mapas mentales son una herramienta útil para evitar huecos en el diseño de la experiencia del usuario.

El ámbito de la publicidad es muy común ignorar esos detalles, y se pasa directamente del brief del cliente al diseño y luego a desarrollo, sin ningún proceso de planeación.

Esta falta ocasiona que en la etapa de desarrollo aparezcan huecos que nunca fueron planeados: una sección adicional o procesos rutinarios como las pantallas de registro o recuperación de contraseña, pero que al no haber sido consideradas desde el inicio aumentan el tiempo del proyecto y con ello el stress y las pérdidas económicas de la agencia.

Una herramienta útil para evitar estos contratiempos son los mapas mentales. Con ellos podemos de forma creativa, lógica y organizada tener un vistazo completo a todas los elementos del proyecto.

Los mapas mentales parten de una idea central, de la que se desprenden los elementos que la integran, los cuales pueden ser, por ejemplo, las secciones de una página o funciones específicas de un app.

Mapa Mental
Mapa Mental para pedir pozole.

En la imagen podemos ver un mapa mental para una aplicación móvil ficticia para pedir pozole. En el mapa lo que encontramos no son los flujos del app, ni las secciones en específico, pero si los elementos que debe de contener. De esta forma este documento servirá de referencia para los diseñadores, desarrolladores y project managers que tendrán de una forma más sencilla una visualización lo que debe de incluirse en el producto.

El lápiz y el papel pueden usarse siempre para crear mapas mentales, pero quisiera recomendar un par de programas:

MindNode

MindNodeSin duda la mejor aplicación de su género para Mac y iPad, con la que hice la imagen de ejemplo del app pozolera. Es limpio y muy sencillo de utilizar, y permite personalizar con facilidad el look & feel de nuestros mapas. Existe una versión libre para Mac, pero limitada. Los documentos creados en MindNode Pro, la versión pagada de la app, se pueden compartir entre la versión de escritorio y la de iPad mediante iCloud.  En cualquier versión se puede exportar a documentos en formatos PDF, PNG, JPG o FreeMind.

FreeMind

FreeMindComo el nombre lo dice, FreeMind es una herramienta de software libre; está escrita en Java, lo que permite que se pueda utilizar en Windows, Mac OS y Linux sin costo. La herramienta es bastante buena y eficiente, pero la interfaz no es del todo amigable. Es una muy buena opción para empezar a implementar mapas mentales en nuestros proyectos.

UX Specialist en Foo Studio. Creador de geekoteca.com. Fan de LEGO