Arquitectura de Información

¿Por qué enamorarse de los Wireframes?

Los wireframes son clave en el diseño de experiencias digitales. Para muchos, es una herramienta “anticuada”, sin embargo, sin ella, fallará algo fundamental de cada proyecto: La Arquitectura de la Información. Por eso, debemos enamorarnos de los wireframes.

¿Por qué digo que los wireframes son “la clave” y no otras herramientas ni ejercicios? Es por varios motivos que detallaré y simplificaré en este artículo. Los principales puntos son:

• Es la primera vez que el cliente “ve” su proyecto “en pantalla”. Es cuando se siente más cómodo al hablar de un proyecto, ya que es un ambiente visualmente reconocible.
• Facilita el Co-Diseño. Al realizar “talleres de WF” con clientes. Los que son una tremenda oportunidad de involucrarlos de forma activa en su proyecto.
• Es tangible. Permite tomar acuerdos sobre algo concreto, rayarlo y trabajarlo.
• No entrega una visión del contenido. Permite enfrentarse al contenido de forma más concreta, al poder visualizarlo.
• Facilita la estrategia de contenidos. Nos permite articular los contenidos en un contexto plausible.
• Une Mapa de contenidos con diseño de interfaz. Conjuga herramientas áridas, con un reflejo del resultado en el diseño UI.
• Nos entrega un pronóstico inicial del proyecto. Es la primera instancia donde se pueden realizar un test de usabilidad de forma temprana.
• Facilita la mejora. Permite identificar errores para mejorar o interacciones no reconocidas en los procesos previos.
• Otorga lineamientos básicos para la futura interfaz. Es una herramienta fundamental para que el Diseño de interfaz se enfoque en elementos visuales, no en estructura y jerarquía desde cero. 

¿Qué es y que no es un Wireframe? 

Cuando hablamos de wireframes, podemos reconocer que existen muchas confusiones sobre su funcionalidades, elementos y forma. Es por eso, que dejamos algunos puntos sobre qué es y qué no es. Así como algunos elementos en los que se puede llegar a consenso con la herramienta.

Un wireframe no es

Un wireframes no es un diseño, no es una interfaz sin color, ni tampoco un diseño en blanco & negro. Así como un diseño, no es un wireframe pintado. 

Un wireframe no debe usar imágenes

Un wireframes no debería usar imágenes. Estas deberían ser reemplazadas por cuadrados que las representen. Sin embargo, dependiendo de la info-alfabetización del cliente uno puede hacer concesiones para que pueda entender mejor esta herramienta. 

Un wireframe es contenido y discurso

Es en el ejercicio de un wireframe donde podemos poner a prueba el contenido. Es recomendable que en esta etapa de los proyectos, se trabaje con contenido real y evitar al máximo el contenido simulado. 

Con ello, podemos asignar una jerarquía y ritmo a la lectura del contenido. Esto lo hacemos con la ubicación de frases, tamaño de imágenes, extensión de textos y orquestación de una serie de interacciones básicas y complejas.

Un wireframe es estructura

Un wireframe es un esquema que nos permite trabajar divisiones de pantalla. Se debe hacer cargo de traducir cómo se vería en la pantalla un mapa de contenidos. Estas divisiones son estructuras de pantalla que se mantendrán de forma permanente en el sitio con pequeñas modificaciones según las necesidades.

Un wireframe es una definición de elementos

Dentro de las estructuras de pantalla mencionadas, el wireframe se hace cargo de trabajar con elementos concretos por primera vez en un proyecto digital. 

Cuando hablo de elementos hago referencia a títulos, bloques de texto, imágenes, barras de menú, links, botones, Galerías, sliders, buscador, etc.

Estos elementos se agrupan en dos grandes grupos:

• Información: Diseño de Contenido. 
• Interacción: Elementos de navegación y llamados a la acción (Botones principales).

A la vez los elementos son agrupados en áreas específicas como la Cabecera o Header, Pie de página o Footer y Cuerpo o Main; el que a la vez puede dividirse en Contenido y Barras laterales.

Un wireframe es creación de unidades discretas

Un wireframe define, con distintos niveles de intensidad, la agrupación de elementos. Por ejemplo: Título + fecha + texto + autor + categoría + imagen + link. Estos elementos agrupados conforman un módulo de noticia que será indivisible. Una unidad discreta que, se ubique donde se ubique, debe mantener estos elementos, mostrándose inequívocamente como un acceso a la noticia.

Un wireframe es definir lógicas de comportamiento

Este conjunto de elementos o unidad discreta, a la vez tendrá distintas ubicaciones y tamaños según su ubicación en la estructura general. Siguiendo con el ejemplo, puede ser una noticia destacada, una noticia principal, una última noticia, una noticia relacionada, una noticia recomendada, noticias anteriores, etc. Todas, en su contexto, cumplen una misma función: ser un acceso al artículo completo de la noticia. 

Un wireframe es material de consulta obligada para diseño y desarrollo

Los wireframes no solo sirven para que el cliente apruebe la estructura, sus elementos y comportamientos. Son fundamentales para el trabajo interno. Un diseñador de interfaces no debería iniciar un diseño sin un set de wireframes. 

¿Qué tipos wireframes existen?

Si bien, en términos generales, podemos hablar de dos tipos: de alta o baja gamma; lo importante es considerar la realización de este entregable en todo proyecto y siempre (pero siempre siempre), partir con lápiz y papel o usando una pizarra. 

El ejercicio de enfrentarse a ordenar el contenido es muy enriquecedor en sí mismo. Enfrentarse a agrupar elementos, seleccionar, darles un orden, tamaño, relación, jerarquía y ritmo de lectura; desde mi punto de vista, es un proceso de creación sublime. 

¿Existe “la mejor” herramienta para hacer wireframes?

En {ida desde hace unos años usamos Sketch App, tanto para desarrollar wireframes como en el diseño de interfaces. Ciertamente, no es la única que hemos usado en estos 10 años y probablemente no será la que estaremos usando en algún futuro a mediano plazo. Depende netamente de su evolución como software. 

Lo que sí considero relevante compartir son los criterios para la selección de la herramienta. Que como verán, no es nada del otro mundo:

• Es fundamental que permita el trabajo vectorial.
• Escritorio de trabajo por páginas.
• Facilidad en el trabajo de elementos: selección, agrupación, trabajo de capas, etc.
• Creación de símbolos que se puedan replicar o utilizar en distintas instancias. 
• Integración con plataformas de visualización en línea como Marvel para compartir y recibir feedback en contexto.
• Control en fuentes tipográficas

En general, no es nada que no busquemos en cualquier herramienta de diseño. Lo más importante es que nuestro equipo esté familiarizado con ella y si usamos otras herramientas, que sean compatibles.

¿Por qué deberías amar tu wireframe?

Como hemos revisado, realmente el wireframe es la piedra angular de cualquier diseño, pero sobretodo, de nuestra arquitectura. Sin él, nuestro proyecto probablemente no generará los resultados esperados en las personas. Amar nuestro wireframe implica trabajar cada una de sus etapas con cuidado. Co-crear junto a clientes, pensar en el futuro del producto terminado y abrir la imaginación a procesos e interacciones que estarán en nuestro diseño.

Todos deberíamos amar nuestro wireframe.

Algunas lecturas sugeridas 

Tres libros para partir:

• Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders.
• Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders.
• Wodtke, Christina; Govella, Austin (2009). Information Architecture: Blueprints for the Web, Second Edition. New Riders.