Experiencia de Usuario en el Diseño Web [UX + UI]

¿Alguna vez has llegado a una página web y te has vuelto loco por no encontrar lo que buscabas o no llegar a cumplir tu objetivo?

En muchas webs los diseños y procesos son complicados, llevando a los usuarios a un sentimiento de frustración.

Y todos solemos pensar que esto ocurre tan solo en grandes empresas, pero no, existen miles de pequeñas webs que no generan una buena experiencia de usuario (ux), ya sea por su poca usabilidad o por su mala interfaz (ui).

Tenemos que facilitar la vida de las personas y hacer que su paso por la web sea fácil y memorable (para bien) y pensar siempre en ellos.

Nos gastamos un dineral en hacer webs muy potentes, pero luego no funcionan o no convierten, y al final esto es dinero perdido para la empresa.

Por ello, vamos a ver qué es la experiencia de usuario o UX, qué es la interfaz de usuario o UI, la diferencia entre UX y UI, y cómo mejorar la experiencia de usuario en nuestro diseño web.

¿Qué es la Experiencia de Usuario (UX)?

La experiencia de usuario o UX es lo que se percibe o lo que se siente cuando interactuamos con un producto o servicio. Es lo que experimenta el usuario antes, durante y después de interactuar.

Un proceso de experiencia de usuario se basa en aumentar su satisfacción ya sea con una mejora en la usabilidad, en la interfaz de usuario o en cómo le hagamos sentir con el producto.

Cada producto que usamos crea una experiencia de usuario: Un móvil, una cama, un libro, etc.

Quien realice el proceso de UX deberá analizar qué se necesita para cumplir el objetivo y cómo evitar dolores de cabeza a las personas.

Como ves, al final el usuario es lo primero en este proceso, por lo que el primer paso para mejorar la experiencia de usuario es involucrándoles en nuestros productos o servicios, pero luego veremos esto con más detenimiento.

Y ahora viene un ejemplo muy típico de experiencia de usuario, el de Ketchup Heinz, en el que podemos ver cómo ha mejorado su experiencia de usuario, y no necesariamente en su web:

La etiqueta es diseño, pero el hecho de haber puesto boca abajo para tener siempre el final a mano, es mejorar la experiencia de usuario.

Otro caso es el de Google:

Google triunfó porque tenía en cuenta los enlaces como un factor de importancia o popularidad, lo que le permitía dar resultados de gran relevancia.

Pero si te fijas, Google se centra solo en un único objetivo, el principal del usuario, que es BUSCAR. Al contrario que Yahoo, que no solo tiene un buscador, sino que aparece el tiempo, noticias, etc.

¿Qué es la Interfaz de Usuario (UI)?

La interfaz de usuario (UI) está más centrado en la parte visual y en el diseño e interacción. Son los elementos que permiten que el usuario interactúe con el producto.

Una buena interfaz de usuario permite una buena experiencia de usuario, ya que es la combinación de muchas actividades que harán que la experiencia sea positiva o negativa.

Por ello, los elementos de la interfaz de usuario que juegan un papel muy importante, entre otros, son:

Diseño de la interacción, es decir, qué es lo que hará cada uno de los elementos cuando se interactue con ellos en la web.
Diseño de los elementos visuales (formularios, sidebar, iconos, botones…)
Tipografías
Paletas de colores
Etc.

Gran parte de la credibilidad de una página web se basa en la estética.

Es decir, cuando llegamos y nuestra impresión es: Uf, qué web más fea o, oh me encanta… Esto hace que confíen más en la compra de tu producto, por lo que la estética y el diseño UI juega un papel esencial.

¡DESCARGA EL PACK DE RECURSOS!

¿No logras vender a través de tu página web?

Consigue un pack de recursos con los que conseguirás tener una web que venda siguiendo los pasos. 

Incluye: Ebook, checklist y cuadernillo de trabajo de la estrategia de marketing digital.

Descarga gratis el pack

Diferencia entre UX y UI en el diseño

La experiencia de usuario (UX) es lo que sientes con la marca, producto o servicio cuando interactúas con él, mientras que la interfaz de usuario (UI) es lo visual (no necesariamente lo gráfico) y lo que hace el diseño de la interacción.

Por lo tanto, si tenemos un diseño bonito y fácil de interactuar con él, y además, más le facilitemos la navegación a este usuario, más fácil será captarlo y tener una buena experiencia, logrando así estimular la conversión.

Te voy a poner un ejemplo de un proyecto en el que no se tiene cuenta la experiencia de usuario:

Cuando pensamos en una página web, a nuestra mente viene el desarrollador, el diseñador, el SEO y poco más, ¿verdad?

Una vez tenemos cada una de las partes, llega la hora de juntarlas, y viene el cajón desastre.

El SEO le dice al diseñador que incluye fotos demasiado grandes que ralentizarán la web, el desarrollador pone códigos que a saber, y no hay nadie que controle esto, y así sucesivamente. La pescadilla que se muerde la cola.

Por todo esto, tenemos que tener una persona que se encargue de controlar que todas estas partes se coordinen y al final el usuario se vaya satisfecho de la web, y lograr así que vuelva.

Diseño Web centrado en el usuario: Qué es, ejemplos y medición

¿Qué es el diseño centrado en el usuario?

El diseño web centrado en el usuario es una metodología de trabajo con unas fases en el que debemos establecer un proceso de diseño teniendo en cuenta la perspectiva del usuario.

Por esto mismo, debemos estar en contacto con ellos para que nos den feedback y hacer un análisis para poder implementarlo en nuestro diseño.

Estamos acostumbrados a que un diseñador nos haga una web bonita y ya está, pero esto no es rentable en términos económicos, hay que hacer una página web que convierta, y esto no es “por amor al arte” (nunca mejor dicho), sino que debe haber un proceso detrás.

Fases del diseño web centrado en el usuario:

1. Entender el contexto y qué es lo que necesitan los usuarios:

Para un diseño web centrado en el usuario, debemos hacernos ciertas cuestiones o preguntas enfocadas a la toma de decisiones del diseño de la página web:

Quién es nuestro público objetivo y usuarios de la web.
Qué tareas deben cumplir.
Cuáles son sus necesidades, metas y objetivos.
Cómo podemos resolver sus problemas.
Qué información necesitan para llegar al objetivo.

Al final tenemos que poner un contexto que nos ayude a situar al usuario, cómo llegan a cumplir su objetivo, y cómo actuarían ante esta situación.

Se trata de hacer más eficaz un producto o servicio, en este caso una página web, mediante un análisis del usuario y de los procesos.

2. Diseñar:

Ahora llega la etapa del proceso de diseño, en el que el resultado final será una página web.

Conviene realizar un boceto gráfico, wireframe o prototipo antes, ya sea mediante un diseño de vectores o de mapa de bits. Pero esto ya dependerá de la forma de trabajar del diseñador, en mi caso suelo hacer un boceto gráfico previo.

3. Evaluación:

Una vez tenemos el diseño, hay que localizar los puntos de la página web donde los usuarios se pierden o bloquean porque el diseño no está bien hecho.

Y para ello, podemos utilizar diferentes técnicas

Encuestas y cuestionarios a los usuarios – Testear con nuestro público objetivo en sesiones de laboratorio o mediante grabaciones en tiempo real, eyetracker. Se plantean unas tareas a los usuarios para observar las barreras o impedimentos que tienen.
Test A/B – Muchas herramientas ya lo incorporan, como Divi.
Mapas de calor – Con una herramienta como Yandex, por ejemplo.
Analítica web – Podemos medir las analiticas de nuestra página web con Google Analytics.
Grabación de pantalla – Mediante herramientas como Smartlook o Hotjar podemos ver qué acciones realizan los usuarios en la web.
Google Tag Manager – Permite analizar mediante etiquetas.

Para un proyecto realmente bueno, también debe haber una parte de investigación y análisis, y esto hace que el UX esté involucrado en todos los procesos de diseño y desarrollo web.

¡DESCARGA EL PACK DE RECURSOS!

¿No logras vender a través de tu página web?

Consigue un pack de recursos con los que conseguirás tener una web que venda siguiendo los pasos. 

Incluye: Ebook, checklist y cuadernillo de trabajo de la estrategia de marketing digital.

Descarga gratis el pack

Técnicas y ejemplos para mejorar la experiencia de usuario en el diseño web

Al final el UX y UI deben coordinarse y hacer un diseño web centrado en el usuario. Hay técnicas y prácticas que debemos de tener en cuenta en nuestra página web.

No todo lo que te voy a contar es la verdad absoluta, pero muchos de estas técnicas están comprobadas en la práctica, pero ya sabes que si no pruebas y mides no lo sabrás.

Menús:

Hover y Active llamativo. El usuario debe saber en todo momento dónde se encuentra, y por ello debemos hacérselo fácil mediante un color llamativo como es el verde en este ejemplo.

Menú fijo en la parte superior y back to top para volver al principio de la página cuando lo necesiten.

Destaca el elemento del menú que te interese y te haga convertir, como por ejemplo: Servicios, cursos, recursos…

Formularios:

Reduce los formularios: Si hay 10 pasos en un formulario y lo reducimos a 4, tardarán menos en hacerlo, y por lo tanto, conseguiremos vender más con el mismo esfuerzo y siendo mejor. No interrogues al usuario, pide lo justo y te darán más.

Ojo con las confirmaciones: ¿Estás seguro? ¿Confirmas el envío? ¿Seguro de continuar? El usuario ya sabe lo que está haciendo cuando rellena un formulario, no seas pesado o se irá sin enviarlo y podemos perderlos.

Incluye la opción de recordar tus datos, para que la próxima vez que vayan a rellenar un comentario del blog o un formulario, les aparezcan sin tenerlos que volver a incluir.

En versión móvil reducir aún más los formularios, porque nos cuesta escribir más que en ordenador, no les hagas perder el tiempo.

Imágenes y vídeos:

Si utilizamos fotos de personas deben estar mirando al texto para centrar la atención en los elementos principales y en el CTA. Nunca mirando hacia el lado contrario.

Siempre te cuentan que tiene que haber una sonrisa y mirándote a los ojos, pero esto nunca te lo dicen, así que seguro que acabas de aprender algo nuevo 😉

Nunca dejar que los vídeos se reproduzcan automáticamente, es odioso para el usuario, ya que se vuelve loco buscando el sonido esto le causará rechazo. Probablemente si esto sucede en nuestra web, nunca más volverá.

Una vez en medio de clase de la universidad entré en la web de la marca YSL de moda, y empezó a sonar la música porque se me olvidó silenciar el ordenador. Sabéis a qué web no he vuelto a entrar en esta web, ¿no?

Esto es resultado de tener una mala experiencia.

No utilices Parallax (efecto 3D en el scroll) en la versión responsive si son innecesarios, ocultalos.

Ocupan gran parte de la pantalla en algo sin sentido a la hora de convertir, y además puede causar problemas en los diferentes dispositivos.

Cuidado con la versión responsive. Piensa siempre que MOBILE FIRST, los vídeos muchas veces en las plantillas de wordpress no se adaptan, y tendremos que contactar con un diseñador o desarrollador para que nos ayude en esto.

Google ya tiene muy en cuenta que el sitio web esté preparado para móvil, no solo que sea responsive, sino que el usuario sea capaz de cumplir objetivo para el sitio móvil.

“El 50% de los jóvenes españoles solo se conectan a internet por el móvil” Sociedad Digital, Fundación Telefónica (2017)

CTA’s o llamadas a la acción

Los CTAs deben seguir un patrón de estilo, siempre visibles y llamativos, pero mismos colores y tamaños.

Como mucho podemos combinar y añadir otros estilos si son CTAs primarios o secundarios y jugar con las jerarquías, pero siempre con la misma estética.

Cuida los colores, cada color transmite unos valores. Aquí te dejo un artículo de cómo combinar las paletas de colores.

Las llamadas a la acción no deben tener elementos alrededor que nos distraigan del objetivo principal, hará que pierda fuerza. Deben de estar en un sitio muy visible y accesible. Además, utilizar varias columnas y en una de ellas tener nuestro CTA puede despistar al usuario, por ello es recomendable utilizar solo una columna.

Un CTA por pantalla, si hay que hacer scroll y el CTA desaparece, poner otro para que no tengan que volver arriba.

Innova en el copy de los botones: Deja de lado los botones de: Saber más, leer más, etc. ¡Da rienda suelta a tu imaginación! Otras opciones menos vistas son: ¡Me interesa! Sigue contándome. Sí quiero.

No utilices Pop-up sobre todo en móvil, es intrusivo y el usuario puede abandonar. Está claro que si no medimos no lo sabemos, pero si lo haces en móvil te podrá perjudicar en el SEO.

Os dejo un estudio de Ana Mata sobre por qué eliminar los pop-ups que me pareció muy interesante:

Aun así, esto es según el caso.

Como ves, en el blog de Ana gana más suscriptores, pero hay mayor tasa de abandono y menor duración de las visitas, por lo que a ella no le interesará mantenerlo.

¿Por qué no pruebas tú y me lo cuentas?

Blog y Textos de la web:

Separa los textos, no pongas parrafadas, piensa en la versión responsive. Tenemos que pensar en los usuarios móviles, que hoy por hoy son la gran mayoría. Pon iconos y hazlo atractivo con listados.

Destaca los beneficios y no las características de los productos, y hazlo más visible jugando con colores y tamaños. La mayoría de personas no leen de pe a pa, así que destaca lo más importante.

Sé cercano y habla para la otra persona de forma natural, no seas un robot, ni hables super serio sin transmitir nada de nada. ¡Sé tú mismo!

Cuántas veces hemos llegado a nuestro blog y no tenemos ni un comentario, 0 interacción, no comparten, etc. Y nos desmotivamos, ¿verdad? Todo el currazo para nada. Añade llamadas a la acción al final de los posts con preguntas al final para generar debate y que comenten.

En versión móvil, céntrate en lo importante y no quieras mostrar todos los contenidos. Pon énfasis en lo que destaque de tu web y oculta de tu diseño lo que sea poco relevante. La gente lo quiere todo ya, sin necesidad de leer mucho.

Tipografías simples y legibles. Entiendo que se utilice alguna tipografía para llamar la atención en determinados aspectos de la página web, pero hay algunas páginas que entras y lo quieren hacer tan bonito, que se exceden con estas tipografías tipo handmade. Y ojo, a mi me encantan, pero solo para detalles, ya que dificultan la legibilidad.

Vamos a hacer la prueba ¿Qué se lee mejor?

Obviamente el Arial. El otro se lee, pero si tenemos toda una web llena de estos títulos créeme que no será fácil.

Aquí tenéis un listado de las mejores tipografías para vuestra página web.

Otros elementos y aspectos de la web

Tablas de precios o planes de servicios: Siempre debe haber una opción que interese más al comprador y al vendedor, y debe ser la más visible (sin importancia de donde la situemos). No hay que destacar el más caro, sino el más interesante.

No al slider: El slider gusta muchísimo, pero hay que decir que aumentan los tiempos de carga, ya que son fotos enormes, y los usuarios no se quedan parados a mirarlos. Una buena alternativa son las Imágenes hero (puedes verla en la home de mi web).

Según estudios tan solo un 1% de los usuarios harían click en ellos.

Debemos utilizar los testimonios. Estimulan la confianza, por lo que hay que hacerlos muy visibles. Incluye fotos de las personas, es muy importante para ser transparente, y si puedes vídeos, mejor.

“Un 92% de la gente confía en una recomendación de un compañero, y el 70% de la gente confía en una recomendación de alguien que ni siquiera conocen.” Estudio realizado por Nielsen.

Optimiza la velocidad de carga. Una buena optimización de la velocidad de carga de tu página web hará que mejore la experiencia de usuario, la indexación, el crawl budget, y por lo tanto, mejorará nuestro posicionamiento SEO.

Si tenemos una web lenta, convertirá mucho menos. ¡Somos vagos y no queremos esperar!

Podemos medir la velocidad de carga con Google Page Speed, Pingdom o GTMetrix.

Estudio de Google: “El 53% de los usuarios que entran en una página web desde un dispositivo móvil la abandonan si ésta no carga en 3 segundos.”

Error 404: ¿Cuántas personas vamos a buscar algo en una web y nos sale un error 404 horrible? Anímalo y personalízalo. Para ello tenemos plugins como 404page.

Además, si tienes un ecommerce pon productos, si tienes un blog pon artículos. ¡No dejes que el usuario se vaya de esa página!

Ecommerce:

No empieces a diseñar por la home, empieza por las páginas que te interesa y centra ahí el foco de atención. Es decir, si tu objetivo final es que te compren, empieza a diseñar por donde está el proceso de compra. Lógico, ¿no?

Destaca las ofertas más interesantes y juega con los textos, tamaños, colores, y mezclalas junto con otras ofertas. Eso sí, la que más te interese juega con su visualización.

Añade tiempos a las ofertas. Si le pones un tiempo finito, probablemente compren más, indícalo para incentivar la venta y generar urgencia.

Chat en directo con una persona detrás. Ahora las relaciones no son ni B2C, ni B2B, ahora son persona a persona (H2H). Hay que construir una relación persona a persona para que la relación dure.

Dos plugins de WordPress con los que podemos crear nuestro chat son Crisp y Zopim.

¿Cuántas veces habremos hablado con el servicio de atención al cliente de Amazon? No sé tú, pero yo miles jajaja.

La conversión de cualquier e-commerce mejora si se acompaña al cliente. Las conversiones se multiplican hasta 16 veces si hay un agente disponible para atender al cliente.

Sé agradecido cuando compren o se suscriban a tu newsletter con una página solo de gracias, conseguirás empatizar más y además será más fácil medir más adelante.

Y además trata de retenerlos aún más para aumentar la permanencia en la web. Pon un vídeo o déjales acceso al producto.

Filtros de: Más relevante, más vendido, mejor valorado, etc.

Seguro que más de una vez has llegado a un ecommerce de ropa o de cualquier otro producto y has acabado viendo los mejores valorados. Por ejemplo, en Amazon. ¿verdad?

Proceso de compra: Con 1 paso es suficiente. Consigue que compren en unos segundos y probablemente si tu producto es bueno volverán a hacerlo.

Si tu proceso de compra es complicado, no olvides hacer un pequeño esquema con los pasos que deben seguir para llegar a adquirir el producto. No te costará mucho y ganarás clientes satisfechos.

No obligues al registro en el proceso de compra, perderás muchos clientes por este paso, no nos interesa, y menos en móvil.

Productos sin stock:

–  Si vamos a tener más stock de ese producto:

• Ofrécele la posibilidad de aviso de stock por email.
• Además, ofrécele un descuento por la espera. Probablemente si nos saltamos este paso y van a buscarlo a otra web, lo comprará a la competencia, así que hazle que se lo piense.
• Muestra productos similares por si las moscas.

–  Si no vamos a tener más de ese producto:

• Redirección 301 a un producto similar.
• Redirección 301 a la categoría madre.

Conclusión:  Reducir tiempos de procesos y ahorrar en pequeñas tareas

Al final se trata de generar una buena satisfacción en el usuario para que nos recomiende y vuelva, y sobre todo, que acabe comprando.

Debemos construir relaciones con los clientes tanto en el producto (la web y tus productos), en el proceso (el proceso de compra) y las personas.

Está claro que podemos aumentar las conversiones con ofertas, bajadas de precios, etc. Pero si hacemos una web más fácil, intuitiva y bonita, aumentaremos las conversiones de nuestra página web sin perder 1€.

Y no te líes complicando todo, al final menos es más…

Así que os dejo un checklist con todos estos aspectos para que puedas hacer una pequeña auditoría de tu web: