Wireframes|La Mejor Forma de Usarlos

¿Qué fidelidad debe tener un wireframe?

Los wireframes no son bocetos.

Los bocetos tienen sus propios objetivos y características, normalmente hechos a lápiz y papel, su idea es que sean rápidos de hacer y fáciles de descartar. Perfectos para ideación rápida dentro del equipo de trabajo y no tanto para presentarlos a un cliente por ejemplo.

Los wireframes no son maquetas

Las maquetas son representaciones de alta fidelidad lo más parecido posible a lo que queremos que sea el producto final. Perfectas para validar la interfaz de usuario (UI) y, por supuesto, para entregarla a los desarrolladores frontend para su implementación.

La fidelidad correcta

Aún cuando hay programas o servicios que nos permiten hacer wireframes que parecen bocetos, o en el sentido contrario, aún cuando tengamos todas las herramientas y el tiempo para realizar las maquetas de diseño, es muy importante que los wireframes se vean como….. wireframes:

Formas

Utilicemos solo formas sencillas, como rectángulos, círculos y óvalos. Debe ser evidente que no es una propuesta de diseño, pero tampoco un boceto generado unos minutos antes. Los wireframes deben ser coherentes a través de todas las pantallas, por ejemplo utilizar siempre las mismas formas para representar los mismos elementos como una imagen, mantener el mismo grosor de línea y tamaños de pantalla.

Colores

Utilicemos sólo un color, recomendable un color neutro como gris o azul  y sus respectivas escalas. Las diferentes tonalidades de un solo color se pueden utilizar para comunicar niveles de jerarquía, por ejemplo, un gris obscuro para los títulos o un gris claro para los pies de foto. Evitemos a toda costa utilizar otros colores, ya que puede prestarse para que quien revisa o prueba los wireframes emita opiniones sobre ellos, confundiendo el entregable con una propuesta de diseño visual, cuando todavía no es momento para eso.

Tipografía

Utilizar una tipografía genérica, Arial o Helvética por ejemplo. Elegir una tipografía muy particular puede también invitar a quien revisa o prueba a opinar sobre ella, cuando lo que queremos es que los interesados se concentren en otros aspectos de la propuesta, como el contenido que se contempla para cierta pantalla, o la jerarquía de títulos. Por esto último, sí es recomendable jugar con diferentes tamaños de tipografía y grosores, siempre manteniendo coherencia entre ellos, por ejemplo, mismo peso y tamaño de tipografía para todos los encabezados de primer nivel.

¿Qué contenido se puede usar en un wireframe?

Texto

Evitemos utilizar texto simulado (Lorem Ipsum). Como una herramienta de validación, los wireframes son una gran oportunidad para proponer cómo el contenido va a ser organizado en la pantalla. Por ejemplo, si estamos diseñando una pantalla con una lista de noticias, es posible que asumamos que los títulos de las noticias siempre cabrán en una línea de texto, pero el contenido real nos puede mostrar que necesitaríamos dos o tres líneas en algunos casos. El texto simulado tipo “Lorem Ipsum” puede también confundir a quien prueba o valida una pantalla con preguntas como ¿En qué idioma está la aplicación?

En caso de no contar con el contenido final del producto, la segunda mejor opción es utilizar contenido similar ficticio, por ejemplo, noticias de otro medio, nombres de personas, ciudades o direcciones reales. La mayoría de las herramientas de diseño de productos digitales ofrecen ya sea nítidamente o a través de extensiones una forma de generar contenido ficticio.

Imágenes

Para las imágenes tenemos la opción de simplemente mostrar un contenedor, desde un recuadro gris con líneas diagonales o bien un ícono sutil o bien utilizar imágenes reales solamente que en escala de grises o del color de los wireframes. De esta forma los wireframes seguirán siendo consistentes y las imágenes no serán un foco de atención no deseado para el entrañable.

Te compartimos algunos consejos para su utilización en el proceso de diseño de experiencias de usuario.

Unas de las herramientas más útiles en el proceso de diseño UX son los Wireframes. Primero, revisemos qué son, qué -no- son, y algunos consejos para sacar provecho de ellos.

Los wireframes (modelo de alambre en español pero normalmente utilizamos el término en inglés), es un entregable de diseño, que tanto por el nivel de definición, como por la etapa en que se realizan, se encuentran generalmente entre los bocetos (sketches) y las maquetas (mockups), pero que pueden ser utilizados  en cualquier momento en el proceso iterativo de creación de un producto digital para comunicar o validar una interacción o una propuesta de arquitectura de información.

 

¿Para qué debemos usar un wireframe?

Utilicemos los wireframes para proponer, validar y comunicar interacciones y arquitectura de información.

Interacciones

Los wireframes son excelentes para diseñar interacciones, por ejemplo, el proceso de pago de una tienda en línea o los pasos que debe seguir un usuario para crear una cuenta en una aplicación móvil. En estos casos, los wireframes pueden mostrar todas las pantallas, los pasos y los estados necesarios para completar el objetivo.

Todos los componentes involucrados en la pantalla deben estar ya presentes en un wireframe, por ejemplo, en una pantalla de login, el encabezado, los campos de correo y contraseña, el botón de ingresar, los checkboxes de aceptación de términos y condiciones, el enlace para recuperar contraseña, etc. Esto es importante ya que precisamente nos estaremos dando cuenta qué elementos deben estar ahí presentes.

De la misma forma, todas las pantallas deben estar representadas, en el ejemplo de un proceso de pago, la forma de captura de tarjeta de crédito, el ingreso de la dirección de envío, la revisión del pedido, la página de confirmación. De esta forma sacamos provecho del wireframe para asegurarnos de que el proceso se puede completar con las pantallas que estamos proponiendo.

Por último, de forma opcional y dependiendo de la etapa en que se encuentre el proceso de diseño, es posible también representar estados de las pantallas, por ejemplo, qué elementos se muestran cuando el login es incorrecto, cuando falla la forma de pago, etc.

Arquitectura de información

Los wireframes también nos sirven para el diseño de arquitectura de información, tanto para temas de navegación entre las pantallas que conforman el producto digital, como para representación de jerarquías dentro de cada una de las pantallas. Debe ser evidente cuales son los elementos principales y secundarios o los llamados a la acción principalmente.

¿Cuándo debemos usar un wireframe?

Cuando queremos proponer

Aún cuando podemos utilizar bocetos para proponer, los wireframes son un poco más formales al momento de que necesitemos mostrar a alguien nuestra propuesta de diseño, todo dependerá de la dinámica del equipo de trabajo y a quién se esté realizando una propuesta. Al mismo tiempo, al no ser una propuesta de diseño visual al que se le deba invertir más recursos, los wireframes son ideales para proponer e iterar nuevos productos, nuevas características o modificaciones de ellas.

Cuando queremos validar

Los wireframes también son una excelente herramienta para ser utilizada en pruebas de usabilidad. Un wireframe que ha sido convertido a un prototipo (las pantallas del wireframes con interactividad) se pueden realmente usar frente a usuarios para poder validar que, por ejemplo, la navegación sea entendible, el flujo de un proceso se puede completar o que la jerarquía de elementos de una pantalla es clara. Ya que normalmente los recursos invertidos en la creación de wireframes es menor en comparación con una maqueta, podemos iterar en ellos más rápidamente conforme vayamos obteniendo descubrimientos en las pruebas de usabilidad.

Cuando queremos comunicar

Cuando contamos con wireframes que ya han sido validados, también nos sirven como una forma de comunicación, ya que los wireframes consideran todos los elementos que formarán parte de una pantalla y su jerarquía, nos sirven tanto para tomarlos como base para las maquetas (mockups), como incluso poder comenzar con los trabajos de desarrollo.

[FIGURA  4 – Wireframes pueden ser usados como entregables para continuar con el diseño visual o incluso iniciar el desarrollo]

¿Con qué herramientas podemos crear wireframes?

Siempre tenemos la libertad de utilizar cualquier herramienta que tengamos a la mano para crear wireframes, inclusive algunas que no fueron creadas específicamente para ellos como Powerpoint o Illustrator, pero para facilitar el trabajo y obtener mejores resultados, lo ideal es utilizar herramientas especializadas para el diseño de productos digitales y sus respectivos kits para creación de wireframes, como Adobe XD, Sketch o Figma. Las tres cuentan con características como componentes reutilizables y la facilidad de agregar interactividad.

Conclusiones

Los wireframes son una gran herramienta de validación y comunicación dentro del proceso de diseño para la experiencia de usuario (UX). Son casi tan rápidos de crear como un boceto, pero su presentación es más formal. Pueden ser utilizados en pruebas de usabilidad y sirve como un entrañable para continuar tanto con las maquetas (mockups) en la etapa de diseño de interfaces (UI) como incluso para el desarrollo o implementación de un producto digital.



Receive the latest news

Subscribe To Our Monthly Newsletter

Sign up to our monthly newsletter to get all the latest news and upcoming events straight to your email inbox.