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.
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.
Trabajar con wireframes permite:
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.
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.
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.
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.
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.
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:
Como ves, es sencillo imaginar qué tipos de elementos irán en cada parte de esos bocetos de página web.
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.