Herramientas UX: wireframes

HERO-wireframes.jpg

En todo proyecto UX, hay una instancia donde es necesario dibujar la interfaz del producto digital que se está diseñando. Este bosquejo sencillo, formado por cajas y líneas, es la representación esquemática de una interfaz de usuario. Con ustedes, el wireframe.

Entonces, ¿para qué usan los diseñadores de interacción UX esta herramienta? Básicamente, para establecer la estructura y jerarquía de los contenidos: imágenes, cuadros de texto, títulos, etc.

En otras palabras, un wireframe es un boceto de la interfaz del producto o servicio digital que permite visualizar la estructura de cada una de las pantallas. ¿Es lo mismo que un mapa de navegación? Nada de eso. En el mapa de navegación se visualiza la arquitectura completa del sistema y en los wireframes la estructura de contenidos de cada pantalla.

¿Y es lo mismo que el diseño de interfaz (UI) o diseño visual? Tampoco. En el diseño de interfaz se trabaja la parte estética y es donde se resuelven los aspectos visuales y emocionales del diseño. Los wireframes se ejecutan primero y sirven como base para trabajar los aspectos estilísticos de las pantallas.

Desde el punto de vista visual, el diseño de interfaz está más relacionado con el diseño final. Por el contrario, el wireframe es un dibujo muy básico y no presenta colores e imágenes. Es preciso entender bien este contraste.

Sin dudas los wireframes son documentos fundamentales para tomar decisiones con el equipo de diseño y con los stakeholders. ¡Pero cuidado! Nunca permitas que los stakeholders crean que el wireframe que tienen antes sus ojos es el diseño final. Principalmente en las empresas que no tienen un buen nivel de madurez sobre la metodología del Diseño UX, los stakeholders pueden confundir esta herramienta con un trabajo a medio hacer y generar conflictos en relación a las expectativas.

Poniendo el acento en la estructura

¿Cómo hacer un wireframe? Según el tipo de proyecto, pueden ejecutarse 2 clases: el de baja intensidad y alta intensidad. Las formas de presentarlo son muy variadas y en definitiva este desarrollo depende del equipo de diseño, de las necesidades de los desarrolladores, de la madurez del cliente, etcétera.

Los wireframes pueden ser muy útiles para crear contenidos reales. Es decir, el estratega de contenidos puede tomar este bosquejo para descartar el texto simulado —muy utilizado en esta etapa— y volcarse a un desarrollo de contenido concreto que ya puede ser estudiado y validado por los stakeholders o los usuarios en las pruebas con usuarios reales.

Como siempre, estas herramientas pueden ser peligrosas si no se las utiliza de la manera correcta. Si bien ayuda muchísimo a establecer jerarquías en cada pantalla, el proceso de creación de wireframes puede durar una eternidad si no se establecen procedimientos claros.

Por ejemplo, realizar un wireframe de baja o alta intensidad afectará directamente el tiempo necesario para completar cada pantalla. Por eso, es preciso examinar detenidamente cómo y por qué se bocetan los wireframes.

Explora el mundo del wireframe

Para muchos profesionales UX, la etapa de diseño o ideación —incluyendo el desarrollo de los wireframes— es una de las más divertidas porque es cuando comienza a hacerse más tangible el producto o servicio digital, nivelando y teniendo en cuenta una larga lista de aspectos y objetivos.

Cuando necesitamos bocetar wireframes, en AyerViernes seguimos una serie de pasos que incluyen revisar a fondo los mapas de navegación y de clases, priorizar el contenido, dibujar un primer bosquejo muy simple para luego validarlo con el equipo y varios aspectos extra. Más allá del método utilizado, la regla de oro es siempre la misma: todo este trabajo debe hacerse teniendo en cuenta a los usuarios.

Antes de avanzar, te recomendamos seguir estudiando. La Escuela UX de AyerViernes se creó precisamente para brindar capacitación profesional basada en casos reales. Allí podrás trabajar la teoría y la práctica de los wireframes y de otras importantes herramientas UX de forma dinámica.

¡Aprende, aplica y vuelve a aprender!

entrenamiento ux capacitacion ux

Capacitación para empresas

Entrenamiento transversal en Diseño de Experiencia de Usuarios para tus equipos