Wireframes for All

Lindsay Ellerby de UXMatter comparte sus experiencias sobre un taller informal de Técnicas de Creación de Wireframes que tuvo lugar en Toronto, Canadá, a finales de Febrero del año pasado, un poco tarde, lo sé, pero la señorita Ellerby, vino a escribir esto ayer.

Me gustaría comentar las conclusiones que plantea Lindsay en relación a este taller informal (iniciativa que me parece estupenda) y más adelante conversar sobre lo útil que resulta la incorporación de Patterns dentro de la creación del wireframe para entender con más detalle el esqueleto del proyecto.

El rol del wireframe en la fase inicial del proyecto

Antes de comenzar a tirar líneas es importante considerar quién va a ser el usuario final de nuestro wireframe para así poder determinar el grado de detalle del mismo. Por ejemplo, ¿qué incorporamos, nos enfocamos plenamente en el layout para diseño, aportamos medidas y dimensiones? ¿Detallamos al máximo e incorporamos los famosos Patterns? ¿Basta con indicar Main Menu (menú principal) o será mejor detallar el menú para hacernos una la idea? Todas estas dudas se responden con saber quién mirará esta información.

Mucho detalle o menos detalle ¿Qué hacemos?

Un poco lo que planteábamos anteriormente: el cómo resolver la profundidad del detalle. Un ejemplo claro y tangible. Hace un par de meses colaboré en la creación de un template para un site promocional de una universidad, en esta oportunidad yo hacía las veces de programador/diseñador CSS y para ello el equipo de diseño gráfico y el jefe del proyecto me prepararon un wireframe de muchísima precisión el cual no sólo indicaba la ubicación de los objetos dentro del layout sino también medidas de columnas y porcentajes de proporciones del layout, lo cual me facilitó enormemente el trabajo. Tuve que interpretar menos y ejecutar más. Un ejemplo inverso fue la elaboración de este blog. Esta vez yo tenía todos los roles, IA, programador, diseñador, administrador de contenidos, etc, etc… Sin embargo, creé un wireframe muy escueto, puesto que yo mismo comprendía las dimensiones de mi proyecto.

Oda a Microsoft Visio

Lindsay hace hincapié en la utilización de esta herramienta para generar estos documentos, en función de utilizar todo el potencial del software para cumplir con las premisas anteriores. Personalmente la utilizaría más para crear sitemaps que wireframes, quizá por tener más libertad, aunque Visio te da todo el soporte iconográfico. Pero una vez más, también depende de la primera premisa ¿quién procesará este documento? Por otro lado, también me he encontrado con sitemaps y wireframes muy específicos hechos en software de diseño como Ilustrator o Freehand. Una vez me mostraron un prototipo en PowerPoint y la verdad que funcionaba, no es lo más óptimo pero cuando no hay muchos recursos es una buena ruta de escape.
Otro asunto interesante de este artículo es una pequeña guía de cómo incorporar Patterns a la hora de crear un wireframe detallado para el cliente, sobre todo enfocado en generar Experiencias de Usuario y/o resolver problemillas que se puedan presentar.

Crea el layout del primer nivel

Paso número uno básico, layout sin más.

Identifica los Patterns que puedes utilizar y sigue con el layout

Es hora de hacer un poco de I+D para identificar qué elementos necesitan ser aclarados con precisión, un lista y a buscar los famosos patterns que utilizaremos. Luego detallamos más a fondo el Wireframe.
Lo Mejor para patterns: Yahoo! Design Pattern Library

Consistencia

Una vez planteado lo que necesitarás es probable que tengas que repetirlo en varias ocasiones, con lo cual usa el mismo, sé consistente. En este sentido, no tienes por qué pegar el patter en cada página, crea un índice.

Goodbye lorem ipsum, hello annotations

Como consejo final, nuestra experta nos invita a ser más específicos y más realistas, dejar menos a la imaginación. Con lo cual es mejor dejar de usar Dummy Text y comenzar a usar texto de verdad. También recomienda usar anotaciones con referencias claras siempre teniendo en cuenta quién leerá esto.

Y ahora… ¡hagamos wireframes!

Vía: UXMatter