Diseño UX: descubre las claves para crear una experiencia de usuario extraordinaria

Seguramente tienes una web con la que estás intentando vender tus productos o servicios…

Y probablemente estés teniendo dificultades en lograrlo. ????

Y es que conseguir que tu página convierta no es tan sencillo como parece.

Tienes que lograr “guiar” a tus usuarios por tu web para lograr que encuentren lo que buscan y finalmente, si lo has hecho bien, que conviertan.

Para esto es imprescindible que sepas de diseño UX.

En el post de hoy te vamos a explicar en qué consiste, los factores principales para realizar un buen diseño UX de tu web y algunos ejemplos que te van a servir de inspiración

¿Te interesa? ¡Vamos a ello! ????

¿Qué es el diseño UX?

El UX Design o “Diseño de experiencia de usuario” es una filosofía de diseño que busca crear productos que resuelvan los problemas o necesidades de los usuarios consiguiendo la mayor satisfacción y la mejor experiencia posible al usarlos y con el mínimo esfuerzo.

La máxima de esta forma de diseñar es construir un producto que consiga satisfacer al máximo lo que el cliente demanda gracias a conocerlo a fondo.

El diseño de experiencia de usuario se puede dar en cualquier tipo de producto: desde un frigorífico, una televisión hasta un coche o un software.

Y es que lo que te tiene que quedar claro es el objetivo del UX: crear una experiencia única y adaptada a tu cliente.

Es decir, en lo que se refiere a páginas web, se ocupa de facilitarle la navegación a los usuarios que visitan tu web para que encuentren lo que quieren y lo que ofreces de la manera más sencilla posible.

Por tanto, necesitas saber qué necesidades tienen tus usuarios, alinearlos con los objetivos del tu negocio y teniendo en cuenta tus limitaciones tecnológicas o técnicas.

Diferencia diseño UX / UI

Muchas veces se confunden estos dos conceptos. Vamos a explicarte la diferencia entre UX y UI.

• UX (User Experience): esta es la experiencia en cuanto a usabilidad y navegación que le generamos al nuestro cliente en nuestra web. El objetivo es crear la mejor experiencia de usuario y saber su comportamiento dentro de la web.

• UI (User Interface): se refiere a la creación de la interfaz con la que el usuario tiene el primer contacto al entrar en tu web. El objetivo es crear un diseño visualmente atractivo que sea coherente con tu marca o producto. Hablamos de colores, tipografías, formularios, imágenes…

Beneficios de un buen diseño UX

El UX tiene una serie de beneficios para tu página web que te presentamos algunos a continuación:

• Incrementar ventas: el proceso de compra mejorará y por eso el UX es especialmente importante en Ecommerce donde todos estos pasos tienen que ser lo más sencillos posibles.

• Retención del usuario: el usuario se quedará más tiempo en tu web si la navegabilidad es buena y puede encontrar lo que busca rápidamente y de manera sencilla. Además. cuanto más tiempo estén, más posibilidades hay de que conviertan.

• Reducción de costes: al mejorar la usabilidad de tu web, el usuario llegará más fácilmente a su objetivo (ya sea compra, informarse…) y se reducirán las incidencias por lo que no será necesario gastar más recursos en modificaciones o correciones.

• Incrementar la satisfacción del cliente: si tu página web ofrece una buena experiencia de usuario, esto te ayudará a mejorar tu reputación online y a tener a tus clientes contentos, por lo que es probable que te recomienden y gasten más en tus productos.

• Aumentar el tráfico a tu web: si la UX de tu web es buena es más sencillo que los usuarios compartan y recomiendan visitarla lo que aumentara la audiencia que consigas atraer a tu página.

• Transmitir mejor los valores de tu marca: dependiendo de cómo estructures tu web y de lo que incluyas en ella serás capaz de generar la percepción que quieres que tus usuarios tengan de tu marca.

• Reducir la tasa de rebote

• Mejora el SEO: si tu página mejora métricas como la retención del usuario y la tasa de rebote y además está adaptada a mobile y desktop esto mejorará tu posicionamiento en buscadores.

• Estructurar mejor la arquitectura de la información

• …

Los factores base del diseño UX

Existen 7 factores clave dentro del UX que tienes que conocer y que van a permitir asegurar que, en este caso tu web, proporcione el mayor valor para tus usuarios y la mejor experiencia al navegar por ella posible.

• Útil: El contenido de tu web tiene que ser original y satisfacer la necesidad de tu cliente.

• Utilizable: Tu sitio web tiene que ser fácil de usar y la navegación tiene que ser sencilla e intuitiva.

• Deseable: Tu web tiene que generar emociones y buenas sensaciones en tus usuarios a través de las imágnees, la imágen corporativa, la identidad, tu marca. Esta parte es más enfocada al diseño UI pero también hay que tenerlo en cuenta en UX.

• Encontrable : El contenido de tu web tiene que ser navegable y localizable tanto dentro de tu propia página como fuera (SEO).

• Accesible: Tu contenido tiene que ser visible para tus usuarios y accesible a personas con discapacidad.

• Creíbles: Todo lo que publiques en tu web tiene que ser confiable y lo más transparente posible. Tienes que crear una conexión sincera con el usuario.

• Valioso: Tienes que asegurarte de que el contenido y la información que ofreces sea único y de valor para tu usuario.

Factores a tener en cuenta para hacer un diseño web UX

Antes que nada, existen dos aspectos principales a tener en cuenta antes de crear el diseño UX de tu página web

• Quien es tu target o tus clientes objetivo

• Cuál es tu objetivo principal, es decir, cuál es la finalidad de tu página web

Vamos a ver estos dos aspectos un poco más en profundidad…

Adapta tu sitio web al perfil de tu usuario objetivo

Como la mayoría de acciones de Marketing Digital, lo primero y fundamental es saber a quién te diriges con tu diseño UX y de quién quieres mejorar la experiencia

Es muy importante que conozcas tu target, realices la segmentación necesaria al igual que crees tu buyer persona antes de hacer el diseño UX de tu web ya que cada usuario tiene unas preferencias y necesidades distintas.

Es decir, no podrás presentar tu página de la misma manera a una persona de 55 años con años de carrera que a un recién licenciado de 22. Tienes que entender qué es lo que buscan y con que se sienten más cómodos a la hora de adquirir un producto por Internet.

Con esta información, adapta tu web en cuanto a imágenes, colores, copys, bloques y formas de navegación para aumentar las probabilidades de obtener una conversión.

Por ejemplo, en ThePowerMBA sabemos que muchos de nuestros potenciales clientes son jóvenes emprendedores o profesionales que buscan actualizarse.

Por eso, intentamos utilizar imágenes de referentes de este ámbito, como Chris Barton, Co-fundador de Shazam, y a través de los copys conectamos con este perfil de usuarios para que se sientan identificados y deseosos de formar parte de nuestra escuela, mejorando su experiencia en la web.

Define el objetivo de tu página web

La mayoría de negocios se abren una página web puesto que es el principal escaparate de su marca en internet (juntos a sus redes sociales).

No obstante, también la mayoría no se para a pensar realmente para qué se la abren.

Puede ser para que sus potenciales clientes conozcan su marca, para que compren su producto o servicio online, para que reserven una cita, para simplemente informarse sobre la empresa, para leer el blog. Para rellenar un formulario de suscripción y convertirse en lead… o puede que una mezcla de todas.

Sea cual sea el objetivo, es importante que lo tengas claro desde el principio y que lo definas antes de crear el diseño UX.

Nosotros por ejemplo, le damos importancia a nuestro blog y por eso lo incluimos en nuestro menú principal, pero puede que tu negocio no lo necesite.

También incluimos un CTA con clases gratis porque nos interesa que nuestros potenciales clientes se hagan una idea previa de nuestro producto y además se conviertan en lead, pudiendo volverse alumnos en un futuro.

Como ves, dependiendo de los objetivos que definas, los elementos que incluirás en tu web, cómo los distribuirás, qué colores y texto incluirán… cambiarán y se colocarán estratégicamente para que estos se cumplan.

Características de una web con buen diseño UX

1. Navegación y estructura de la información

El primer paso para crear un buen diseño UX es asegurarte que le proporcionas a tu usuario el camino más cómodo y rápido para permitirle llegar a lo que desea obtener en tu página web en el menor tiempo y con el mínimo esfuerzo posible.

Por lo tanto, el diseño de navegación de tu web tiene que ser sencillo e intuittivo.

Para ello tienes que intentar analizar el recorrido que hacen tus usuarios hasta llegar a la conversión para optimizarlo al máximo, es decir, incentivarles a realizar este camino reduciendo al máximo los pasos que necesitan hacer para lograrlo.

Para ello, es fundamental proporcionarles la información necesaria en cada momento de dónde están y hacia dónde pueden ir para que entiendan bien lo que tienen que hacer para encontrar lo que están buscando.

Par ello vamos a ver algunos elementos que tienes que tener en cuenta para mejorar la navegación…

Menu navegable, preciso y accesible:

Este es el elemento principal de navegación de los usuarios en tu web, por ello tienes que prestarle especial atención.

Incluye solamente las páginas más relevantes para los objetivos que buscas conseguir con tu web.

Te ponemos el ejemplo de ThePowerMBA:

Como ves, para nosotros es fundamental incluir:

• Las páginas de nuestros másters: para que los usuarios obtengan información sobre lo que ofrecemos.

• La página de “Aprende de los mejores”: para que conozcan al equipo que imparte las clases.

• La página de “Networking”: donde informamos de los diferentes eventos que llevamos acabo.

• La página de “Opiniones”: para que los usuarios vean las valoraciones de otras personas sobre nuestro producto y sirva como social proof.

• La página de “Dudas”: para resolver las dudas que puedan tener nuestros usuarios sobre nuestros producto.

• La pestaña de “Login”: para que accedan a la plataforma de los másters.

• Nuestro Blog: para ofrecerles contenido de valor adicional y mostrarles algunos temas que van a estudiar en nuestros másters.

Además, es recomendable incluir un CTA (“Apuntarme”) que anime al usuario a realizar la acción que te has marcado como objetivo principal en tu web.

Intenta que los enlaces sean lo más generales y directos posibles y además adapta las palabras que utilizas a lo que tu cliente espera encontrar.

Puedes utilizar submenús pero procura no saturar porque corres el riesgo de confundir al usuario con tu estructura.

Por otro lado, puedes utilizar un efecto como este que te dejamos abajo para indicar al usuario en que página se encuentra en cada momento y así mejorar su navegación por tu web.

En cuanto a accesibilidad, lo que mejor funciona es tener un menú estático y fijo, es decir que cuando hagas scroll se quede en la parte superior de la pantalla para siempre dar la opción al usuario de cambiar de página se lo desea.

Incluye un buscador interno

Es fundamental que incluyas en tu web un buscador ya que mejora enormemente la experiencia de usuario.

Esto se debe a que nos hemos acostumbrado a navegar mediante búsquedas, ya sea en Google, Yahoo, Youtube… y esto va a permitir al usuario acceder directamente al contenido en el que está interesado.

Además, es muy importante tenerlo lo más accesible que se pueda.

Este es el buscador de nuestro Blog:

Informa al usuario en cada paso y pónselo fácil

Una de los factores clave para que un usuario convierta es que el proceso sea lo más guiado y claro posible.

La mayoría de casos se trata de un formulario que tiene que rellenar y es donde se producen la mayoría de abandonos.

Por ello algunos aspectos importantes son:

• Simplificar tus formularios: cuantos menos pasos tenga el formulario, mayor es la tasa de conversión.

• Ayuda a los usuarios siempre que puedas: procura que los campos que incluyas sean lo menos propensos a que el usuario cometa errores, y si lo hace, explícale cuál es el error que ha cometido.

• Recuerda el proceso a los usuarios: puedes colocar una numeración o una barrita que vaya indicando el progreso del usuario en el formulario.

• Cuida el diseño: sigue leyendo…

Utiliza CTAs atractivos

Los Call to Actions son fundamentales para guiar a tu usuario por el proceso de compra y para incitarle a que realice las acciones que necesites para cumplir con los objetivos que te has marcado con tu web.

Tienes que tener en cuenta ciertos factores a la hroa de diseñar tus CTAs:

• Color: es fundamental que el contraste entre el color de CTA y el fondo sobre el que lo colocas sea notable y haga que resalte lo suficiente.

• Forma: es recomendable utilizar botones con los bordes redondeados ya que hacen que la atención se centre hacia el texto del centro.

• Texto: intenta utilizar técnicas de copy par volver más persuasivo la llamada a la acción. Funciona mejor Hablar en primera persona y utilizar adjetivos que recalquen los beneficios de hacer clic como “GRATIS” o que generen urgencia como “AHORA”.

• Colocación: el escaneo de los usuarios por tu página web va a determinar donde es más efectivo colocar tus CTAs. Esto va a variar de mobile a desktop.

2. Diseño estético

Esto incluye la parte de UI. Es fundamental que tu web tenga un diseño atractivo visualmente pero que a la vez sea eficiente para los usuarios.

Aquí entra en juego tanto el UX como la parte de UI.

Muchas veces, se cae en el error de crear páginas muy originales y creativas pero se pierde esa parte de navegabilidad y usabilidad esencial para cumplir con los objetivos que nos hemos marcado para nuestra web.

Tienes que intentar reducir al máximo la confusión dentro de tu página. intenta que todos los elementos sigan un orden lógico y que la estructura visual sea clara.

Además, el estilo en cuanto a la paleta de colores utilizada, el tipo de elementos audiovisuales, al tipografía, el estilo de los bloques etc. tiene que ser coherente y uniforme en toda tu web para evitar confundir al usuario.

Mira este ejemplo de ThePowerMBA:

En este bloque intentamos unir la estética con la utilidad. Creamos un diseño atractivo y en forma de carrusel para permitir al usuario desplazarse y de manera sencilla a la vez que conoce a los miembros de nuestro equipo.

Crea un web minimalista

Los usuarios quieren una interfaz clara y sencilla, es decir, que contenga solamente los elementos esenciales y necesarios para el usuario.

No se trata de tener pocos elementos, si no de tener los adecuados.

Una opción es crear contenido dinámico que se muestre o se oculte en función del interés del usuario.

Por lo tanto, no satures el espacio de tu página, busca el equilibrio.

3. Legibilidad

El usuario tienes que ser capaz de entender y captar la información de tu sitio web de la forma más rápida y con el menos esfuerzo posible.

De hecho, la mayoría de usuarios no se paran a leer, si no que de alguna forma escanean tu web.

Por eso algunos de los factores a tener en cuenta son:

• La tipografía: cuanto más simple sea el tipo de letra que utilizas, más fácil de leer. Además, intenta ser homogéneo en este aspecto, es decir, no cambies mucho de tipo de letra. Se recomienda utilizar las fuentes de tipo sans serif para las webs. En ThePowerMBA utilizamos la tipografía ‘Poppins’

• El formato de texto: estructura tu web utilizando los diferentes formatos de texto disponibles: títulos, subtítulos, listas, bullets… y juega también con las negrita, interlineado… para darle ritmo y estructura a tus textos.

• Color: procura que el contraste entre tus textos y el fondo elegido sea el adecuado para facilitar la lectura de estos. En un fondo oscuro, utiliza tipografía más clara y viceversa.

Adapta tus copys

Como hemos visto anteriormente, según el perfil de usuario al que te dirigas, una de las partes fundamentales que tendrás que adaptar son todos los textos presentes en tu página web, es decir, toda la parte de copywritting.

El copywritting es una técnica de escritura persuasiva que busca lograr que los usuarios realicen una determinada acción que nos interesa.

Te ponemos un ejemplo: este es el título principal de nuestra home.

Como ves a través del copywritting, intentamos conectar con nuestro perfil de usuario objetivo (personas que no buscan un master) para que se sientan identificados y les generemos intriga y curiosidad por conocer nuestro producto.

Además añadimos el número de alumnos que cursan nuestro máster y los países en los que estamos presentes como social proof.

Puedes aprender más sobre esta técnica en nuestra Guía Completa de Copywritting.

La importancia del Storytelling

Parece que esto no va con tu web, pero incorporar Storytelling y contar historias en tu página puede proporcionar una experiencia de usuario única, ayudar a que conecten mucho mejor con tu marca y por lo tanto que se animen más fácilmente a confiar en tu producto.

4. Diseño responsive

Es esencial que tu página web se adaptae a todo tipo de plataformas y que se muestre de forma adecuada al usuario en cualquier tipo de pantalla y dispositivo utilizado.

Y es que, si no eres capaz de adaptar tu web de desktop a mobile, tanto la navegabilidad como la usabilidad se verán resentidas, y con ello la experiencia de tu usuario.

La tecnología de desarrollo de tu web también tiene que ser la adecuada y no puede quedarse obsoleta.

Tus usuarios tienen que ser capaces de conectarse desde cualquier tipo de navegador (Chrome, Firefox, Internet Explorer…) y con distintos sistemas operativos (Mac, Windows…).

Puedes comprobar cómo se ve tu página web en diferentes formatos mobile pulsando el botón derecho y seleccionando “Inspeccionar”.

5. Tiempo de carga

Por último, tienes que tener una página web que cargue rápidamente para agilizar la navegación de tus usuarios, y por consecuente, aumentar su satisfacción.

Cada vez los usuarios tienen menos paciencia y actualmente una web que tarde más de 5 segundos es vista como una web lenta.

Por eso, es conveniente que intentes optimizar al máximo el tiempo de carga de tu web de diferentes maneras:

• Disminuyendo el tamaño de tus elementos audioviusales

• Contratando un servidor más rápido

• Usando CDNs.

• Utilizando el Lazy Load

• Utilizando buen sistema de caché

• Usando una plantilla más rápida

• Reduce el número de plugins

• …

Puedes utilizar GTmetrix, una de las herramientas digitales que te recomendamos en este post, para comprobar la velocidad de carga de tu web y optimizarla.

Todos estos factores de CRO van a hacer que mejores el UX de tu web.

La importancia del diseño UX para el SEO

Como hemos visto antes, dos de los beneficios principales de la UX es que aumentan el tiempo de permanencia y disminuyen la tasa de rebote de la web.

Estas dos métricas son uno de los factores más importantes para el SEO de tu web.

Es decir, que al ofrecer una buena experiencia de usuario, esto te va a colocar más arriba en los buscadores y por lo tanto te va a permitir atraer más tráfico a tu sitio web.

La clave para lograr aumentar estas métricas es ofrecer exactamente lo que está buscando o lo que puede interesar al usuario.

Por ejemplo, al incluir posts relacionados en tu blog, cuando los usuarios lean un artículo los mantendrás más tiempo en tu web al mostrarle contenido que también les puede interesar.

Esto es lo que incluimos al final de nuestros posts en ThePowerMBA:

O también en la barra lateral incluimos un apartado de “Entradas recientes” y un banner que permite al usuario acceder a unas clases gratis de la temática sobre la que trata el post.

Todos estos elementos sirven para retener a nuestros usuarios gracias a aportarles valor adicional a lo que buscan en el momento adecuado.

Vamos a ver por último algunos ejemplos de webs que cuentan con un buen diseño UX.

Ejemplos de páginas con buen diseño UX

Airbnb

El diseño de la home de Airbnb es un claro ejemplo de cómo se debe hacer UX en una web.

Como ves, incluyen un buscador simple y sencillo que incluye los 4 elementos básicos para realizar la reserva de alojamiento que necesita su usuario. No añaden pasos de más, se lo ponen muy fácil a las personas que buscan apartamento.

Además, incluye un bloque donde añade un apartado ende “explora tus alrededores” por lo que adaptan aun más la experiencia de sus usuarios a su localización actual.

BlaBlaCar

Al igual que en el caso anterior, el buscados de BlaBlaCar es extremadamente minimalista, al igual que el menú donde simplemente incluyen 4 pestañas clave para utilizar su plataforma.

Además, hay que destacar el copy utilizado y la imágen de una chica sonriendo con el que intentan generar emociones positivas y naturalidad en sus usuarios (incluyendo además la propuesta de valor en el subtítulo).

Amazon

El lider mundial en ecommerce es un referente en cuanto a UX web.

Y es que en las tiendas online cobra especial importancia la experiencia de usuario ya que la facilidad que tengan para encontrar el producto que buscan además de el valor adicional que les aporte tu web va a marcar la diferencia.

Además. la retención de los usuarios en estas plataformas es una de las métricas más importantes ya que esto supone aumentar las posibilidades de venta.

Como ves, Amazon utiliza bloques en su web con este objetivo de retención, como “Los clientes que vieron este producto también vieron” o la sección de “Opiniones de clientes”, una de las claves de su éxito y en a la que muchos clientes recurren asiduamente para informarse sobre los productos en lso que están interesados.

Apple

Siguiendo con los principios minimalistas de su fundador Steve Jobs, la web va en linea con los valores que busca transmitir la marca y, sabiendo lo muhco que Apple cuida el diseño de sus productos y la experiencia de sus usuarios, la página web no podía ser menos.

Como ves en el menú, al pulsar la opción “Iphone” se te despliega otro submenu en el que puedes ir navegando por los diferentes modelos con los que cuenta, incluido sus accesorios.

Además, por toda la web utilizan imágenes muy grandes de sus productos ya que saben que su diseño atractivo y elegante es lo que cautiva y gusta a sus clientes.

Hotjar: herramienta para optimizar tu UX

Te recomendamos Hotjar para optimizar el UX de tu web.

Se basa principalmente en utilizar mapas de calor de tu web en lo que muestran el comportamiento de los usuarios que visitan tu página: dónde hacen clic, en que apartado se quedan más tiempo, cuanto scroll hacen…

Con esta información que recopilas puedes realizar las modificaciones necesarias: cambiar color de un CTA, modificar un imágen, un título…

Esperamos que te haya gustado nuestro post sobre Diseño UX y que apliques desde hoy esta serie de trucos en tu página web para lograr ofrecer una mejor experiencia a tus usuarios.