logo

Wireframe: mejora el UX/UI de tu web de forma fácil

Diseño web y UX 
25/05/2022

Un diseño sólido de UX es fundamental para el éxito de una página web, ya sea un comercio electrónico, una aplicación o un sitio web para implementar una estrategia de contenidos. Casi el 90% de los compradores online no regresarán a un sitio si tuvieron una mala experiencia de usuario, y alrededor del 75% de la opinión sobre la credibilidad de un sitio se basa completamente en su estética. En este contexto, el web wireframe te ayuda a mejorar la experiencia de usuario. Veamos cómo.

Wireframe, ¿qué es?

A modo de definición, podemos sustituir el término wireframe por boceto de página web. Estos bocetos o planos que componen el wireframing web pueden ser digitales o dibujados físicamente en papel. En cualquier caso, tienden a incluir elementos como ubicaciones de imágenes y texto, posibilidades de navegación y branding.

 

wireframe-wireframing

 

Objetivos del wireframing UX

Trabajar con wireframes permite:

  • Que los diseñadores hagan una lluvia de ideas sobre la experiencia del usuario y los elementos visuales, ajustándolos para que cumplan con las necesidades comerciales previstas antes de la fase de desarrollo.
  • Documentar el proyecto de diseño para que sirva de referencia durante la fase de desarrollo.
  • Servir como hoja de ruta a los diseñadores web y al Digital Project Manager.

Diferencias entre wireframes de alta y baja calidad

Estos son los tipos más conocidos. Un wireframe de baja fidelidad está enfocado para proyectos sencillos, o como un prototipo de un diseño que evolucionará con el tiempo. De este modo, un boceto que esté algo más avanzado, con el uso de imágenes, iconos y otros elementos que estarán mucho más cercanos al diseño final de nuestro sitio web.

Consejos para diseñar mediante wireframing

Ser diferente, pero no demasiado

Un buen Digital Project Manager será clave para la transformación digital, es por ello que sabe que el diseño de UX debe lograr el equilibrio entre lo familiar y lo inesperado. Si la página es muy diferente a la que el usuario está acostumbrado, no sabrá cómo navegarla Por otro lado, si el wireframe es demasiado común, quizá los usuarios no escojan volver al sitio web.

Comprender la psicología humana

La raíz del diseño UX se basa en la psicología Gestalt. La afirmación principal de esta forma de psicología es que el total es mayor que la suma de las partes.

En UX, esto significa que la experiencia en conjunto es más importante que las fases de esa experiencia. Por lo tanto, toda la “estancia” en la página web debe responder a un patrón unificado. Los wireframes son un elemento importante para lograr esta cohesión: incluso antes de que los desarrolladores comiencen a trabajar, los equipos de diseño pueden asegurarse de que todos los aspectos necesarios están cubiertos en el wireframe y fluyen juntos como un todo.

Escribir es reescribir: usar datos para ver qué funciona

Ya antes de crear el boceto de la página web es necesario que el equipo disponga de determinados datos. Estos pueden proceder de varias fuentes, como las mejores prácticas de la industria, Google Analytics, mapas de calor de páginas publicadas anteriormente, mapas de viaje del cliente o información de estudios de mercado.

El objetivo será informarse sobre cómo es más factible que los usuarios usen una página o aplicación y, a partir de ahí, desarrollar el diseño correcto.

Dominar el lenguaje de la comunicación visual

En esencia, el diseño UX es como una conversación. El usuario hace una pregunta, y la interfaz da una respuesta y plantea otra pregunta, que luego responde el usuario. Este intercambio continúa hasta que el usuario logra sus objetivos. Una buena experiencia de usuario será aquella en la que el objetivo se logra tras una “conversación” corta.

Wireframe, ejemplos

Una manera de generar buenas ideas para wireframes es acudir a ejemplos de páginas que funcionan. Hablemos de algunas. Pero antes, fíjate en esta imagen:

 

wireframe-wireframing

Como ves, es sencillo imaginar qué tipos de elementos irán en cada parte de esos bocetos de página web.

  • Los cuadros marcados con una equis son espacios para imágenes.
  • Los rectángulos anchos y estrechos marcan títulos y textos.
  • Los rectángulos de esquinas redondeadas marcan botones con llamadas a la acción.
  • Las flechas indican la ruta de navegación entre todos esos elementos.

Wireframe: el ejemplo de Twitter

Si echas un vistazo a la página de bienvenida de Twitter te encontrarás con un diseño muy sencillo y efectivo. La página se divide en dos mitades. A la izquierda nos explica qué es Twitter y a la derecha nos anima a registrarnos. Sin más adornos ni florituras y usando los colores de la marca.

El copy de Twitter se limita a enfatizar que es una red social y que permite el uso de 280 caracteres en cada tuit.

La ventaja de un wireframe tan minimalista es que no permite que el usuario se distraiga. Twitter ha decidido que no quiere informar a sus usuarios de sus funciones hasta que no sean efectivamente usuarios registrados.

Pero existe un diseño incluso más efectivo: el de Google, que no muestra más que el cuadro donde efectuar la búsqueda. Nunca menos fue más.

Tal y como ves, el diseño UX y su base, el wireframe son dos temas apasionantes sobre los que un digital project manager tiene mucho que decir. Si crees que tu carrera profesional podría estar en este sector, echa un vistazo a nuestro Máster en Digital Project Management y comprueba que se trata de un programa completo que te formará para el éxito laboral.



© Instituto de Innovación Digital de las Profesiones. Planeta Formación y Universidades. Todos los derechos reservados.
Por cualquier consulta, escríbanos a info@inesdi.com