Wireframes content-first: perfeccionando el proceso de diseño
Hacer un wireframe sin pensar en el contenido es como golpear una piñata a ciegas: puede que le atines al primer golpe, puede que requieras más de un golpe para acertar o puede que se te acabe el tiempo y no hayas logrado darle una sola vez. Pero antes de entrar en cómo se construye un wireframe…
¿Qué es un wireframe y para qué sirve?
Un wireframe es un modelo visual que representa la estructura de un sitio web o aplicación. Funciona como una guía visual de cómo quedará ordenado el contenido, la navegación y en general la experiencia de uso de la aplicación antes de incluir contenidos finales como imágenes o textos de cada página del sitio web o cada pantalla de una aplicación, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.
Típicamente, los wireframes los realiza un diseñador UI/UX, quien imagina, a partir de un brief que le proporcionan, cómo acomodar los elementos que contendrá la aplicación o sitio web. Pueden ser esquemas tan rudimentarios como dibujos a mano, o más elaborados y construidos con software especializado, a continuación mostramos un ejemplo que representa el wireframe de un portal bancario una vez que se ha iniciado sesión.
Los wireframes no muestran el diseño final, sino que se limitan a indicar el acomodo de los elementos del sitio o aplicación. Tal como un arquitecto, presenta planos que no incluyen el color de las paredes, o el acabado de los pisos.
Como podrás ver, quien observa el wireframe no tiene aún una noción clara del diseño gráfico final, puesto que vestirlo con las tipografías, los colores corporativos y las imágenes y contenidos constituye un paso posterior en el desarrollo. Hacer un wireframe es una labor indispensable en la etapa de planeación, pero en ocasiones este paso es omitido por desarrolladores que no trabajan con una metodología a prueba de errores.
No hacer un wireframe puede generar cambios infinitos por parte del cliente y un gran desperdicio de recursos: imaginemos que el equipo de diseño comienza a trabajar en conjunto con los programadores y se realiza una maqueta que nada tiene que ver con la manera como lo visualizó el cliente al comienzo (antes de desarrollar, el cliente debe dar Vo.Bo. al wireframe), todos estos equipos tendrían que hacer dos veces su trabajo si no es que más.
Hay otro inconveniente que recientemente los especialistas en este campo han detectado, y es que a pesar de que se haga un wireframe, al no tener en mente el contenido definitivo que tendrá el sitio web, los elementos no siempre se acomodan de la mejor manera. Por ello, la nueva tendencia es realizar wireframes con una mentalidad content-first, a partir de Guías de priorización.
Guías de prioridades (content-first) al hacer un wireframe
El concepto de Guía de prioridades en el contexto del diseño UX, se atribuye a Drew Clemens, quien acuñó el término en un artículo acerca del proceso de diseñar de manera responsiva. Las limitaciones que tradicionalmente presentan los wireframes pueden ser salvadas añadiendo un lineamiento al dibujarlos: pensar en el contenido.
Como mencionamos anteriormente, el diseño de interfaces sin pensar en el contenido puede resultar en una jerarquización errónea. Por ello, al seguir una guía de prioridades, el diseñador empatiza con el usuario de la página o aplicación y prioriza el contenido de mayor interés. ¿Cómo? Mostrando lo más relevante al comienzo o en un lugar más visible.
Para establecer una Guía de prioridades de contenido es necesario:
Conocer al usuario. Saber quién estará usando la aplicación, cuáles son sus intereses y prioridades. Para ello están las herramientas del buyer persona, mapas de empatía y el customer journey map.
Determinar los objetivos del sitio o aplicación. ¿Queremos generar leads? Entonces convendrá poner un formulario cuando antes en la página. ¿Queremos vender un producto? Entonces lo pondremos en el home, y evitaremos que el usuario tenga que dar más clics para encontrarlo.
Identificar los temas más relevantes de los contenidos. Para ello, es necesario conocer a qué etapa del customer journey está dirigido el contenido y así priorizar los CTAs o los tópicos que cada página debería contener idealmente.
Definir los objetivos y las prioridades de cada página o pantalla. Una vez que se han definido los objetivos de cada pantalla, a quién están dirigidos, qué queremos que haga el usuario, etc. se crea una Guía de prioridades tan detallada como sea necesario.
Pudiera parecer un concepto muy simple, pero en realidad, el tener claras cuáles son las prioridades del contenido que está buscando el usuario en la página o aplicación puede cambiar por completo la estructura. Retomando el ejemplo anterior, este podría ser el resultado del Wireframe una vez que se considera la Guía de prioridades.
Además de que los sitios desarrollados con estas guías son más amistosos para los usuarios finales, los equipos de trabajo encuentran estos beneficios:
Optimizan el customer experience, puesto que los productos finales están centrados en el usuario.
Son más estables al realizar desarrollo responsivo, puesto que un wireframe tradicional no necesariamente respeta el mismo orden de los elementos en móvil que en PC.
Fomentan la interdisciplinariedad y el trabajo en equipo entre departamentos de marketing, puesto que el diseño está por fuerza centrado en el estudio que se ha realizado del cliente o usuario potencial.
En conclusión…
La manera tradicional de dibujar un wireframe tenía limitaciones que ciertamente se pueden salvar al ser empáticos con el usuario y realizar un diseño que lo considere desde el primer esquema del sitio o aplicación. Las guías de priorización son una herramienta clave que se ha calificado como content-first, pero también son customer-first por lo que mejoran significativamente las experiencias y las historias que contamos.