Arquitectura de información

Buenas prácticas para el diseño de wireframes

En proyectos digitales, luego de haber consolidado el mapa de navegación del sitio, la formulación de wireframes se presenta como la primera instancia de representación visual. Acá, los Arquitectos de Información jerarquizan la información y distribuyen el contenido con los que los usuarios interactúan.

Esta etapa es fundamental para el éxito de los proyectos, ya que sienta las bases de las plataformas y guía el trabajo. Al tratarse de dibujos simples, permite experimentar y probar distintas alternativas de manera rápida y maleable. Con ellos podemos evidenciar las jerarquías, presentar las funcionalidades y hacer pruebas con usuarios en una etapa temprana.

Además, los wireframes son un método que pone al contenido antes que la forma, ya que muestran qué elementos se incluirán antes de decidir cómo se verán. Gracias a esto, la discusión en los equipos puede centrarse en el contenido, la navegación y la diagramación, en lugar de lo estético.

Consejos para el diseño de wireframes

Para lograr todos sus beneficios, los wireframes deben estar bien pensados y centrarse en su funcionalidad. Estas son las principales buenas prácticas que hemos identificado en nuestro trabajo:

Crea bosquejos en un equipo de trabajo

Tanto los equipos internos como los clientes, suelen olvidar que los wireframes preceden al diseño. Trabajar en ellos en etapas tempranas nos permite identificar problemas y corregir errores a un bajo costo.

Usar contenido real

Si es posible, usa solo contenido real. Cuando se diseña usando caracteres o palabras aleatorias, es muy probable que tengas que adecuar las dimensiones para hacer calzar líneas extras, especialmente en títulos. En caso de que no cuentes con ello, simula el cuerpo de texto con “lorem ipsum”.

No usar color

Siempre trabaja en escala de grises. Los colores pueden causar distracción con facilidad e interfieren en el foco de conversación. La idea es que la discusión se mantenga centrada en la experiencia y no en la solución visual.

Evitar usar imágenes y tipografías personalizadas

Mantén las representaciones lo más simple posible para que el enfoque se mantenga en la funcionalidad. Las imágenes, iconografía y otros elementos visuales, distraen tanto a los miembros del equipo como a los clientes. Utilizar una fuente personalizada también tiende a distraer. Usa una fuente sin serif lo más neutra posible, como Helvética o Arial.

Si cuentas con el logo del cliente, puedes hacer una excepción y usarlo para contextualizar.

Compartir anotaciones

Usa notas para explicar zonas, interacciones y funcionalidades. Al detallar las cualidades de cada elemento, las anotaciones evitan la confusión entre los miembros del equipo.

Los sitemaps son otra forma de evitar las confusiones, ya que muestran claramente cómo las páginas interactúan entre ellas.

Mantener la consistencia

La consistencia en el uso de elementos permite tener una base estándar para empezar el trabajo. Utilizar módulos con una estructura similar que se repiten a lo largo del sitio, ayuda a que el usuario reconozca unidades discretas, disminuyendo la curva de aprendizaje.

Adicional a ello, para mantener un alto nivel de consistencia y comunicar las decisiones a todo el equipo, recomendamos trabajar con un repositorio de recursos para wireframes.

Enfocarse en la navegación

Un buen wireframe debe tener siempre en consideración que cualquier página puede ser un acceso al sitio. Enfócate en la navegación de los usuarios y cómo estos pasarán de un contenido a otro. Diseña un menú claro que los guíe y usa breadcrumbs o sidebars que contengan la navegación.

Integrar al equipo en la discusión

Los wireframes son una herramienta de discusión potente. Dialoga con tu equipo de trabajo para conocer sus ideas y detectar áreas a mejorar.

Esto también te ayudará a prevenir problemas en las etapas siguientes, ya que los otros profesionales pensarán en cómo trabajarán con ellos. Por ejemplo, cada parte del wireframe tendrá que ser pasada a código en la etapa de desarrollo. Al analizarlos, el desarrollador será el mejor crítico para decir qué elementos pueden producir dificultades.

Sistema de creación de wireframes

Recordemos que un wireframe no visualiza el aspecto final del sitio, es una representación gráfica de su contenido. Los sistemas ordenados facilitan la aplicación de las buenas prácticas.

No todos los equipos trabajan de la misma forma, pero por lo general, se siguen las siguientes etapas:

• Inventario de contenidos: Se crea una lista de todos los contenidos que deben ir en la plataforma digital.
• Jerarquía visual: Los contenidos se organizan en categorías y se ordenan según su relevancia.
• Wireframes de contenido: Tomando en cuenta las dos etapas anteriores, se determinan los tipos de contenidos y su disposición en cada etapa.
• Wireframes de estructura: Se añaden los elementos de navegación e interacción con el usuario.

Una vez que estas decisiones se aprueban es posible pasar a un prototipo de baja fidelidad que facilite su presentación.

Finalmente, al momento de presentar los wireframes, no dejes que la simplicidad del dibujo produzca una impresión incorrecta. Explica bien el contexto de cada elemento, las razones de cada decisión y su papel en la experiencia general del usuario final.

Si sigues estas buenas prácticas, tus wireframes mostrarán una idea clara y su interpretación será más fácil. Además, mantendrás a tu audiencia (clientes o equipo interno) concentrados en la estructura, sin perderse en el diseño visual.