Experiencia de Usuario, ¿cómo aplicar la UX en WordPress?

Y por todo ello vamos a resumir lo que ya hemos comentado anteriormente, para que te hagas una buena idea de los puntos principales sobre una buena experiencia de usuario en la web.

Espera… ¿qué? no te has enterado del primer párrafo… y probablemente te has sentido un poco incómodo, con ciertas ganas de abandonar la lectura y de ir a otro artículo más fácil de leer, ¿Verdad?

Querido amigo lector, acabas de vivir en tus propias carnes una mala experiencia de usuario. Ha sido un ejemplo tonto, pero en solo un párrafo ya se ha auto-definido por sí sola.

Si has leído el título de este artículo y te has sentido un poco abrumado pero aún así te has dispuesto a aprender de una vez qué es la UX (ya que ves esas dos letras juntas en todos los lados) puedes guardarte tus gafas de leer ciencia, colgar la bata blanca de investigador y guardar tu calculadora de matemáticas del instituto: la experiencia de usuario (UX) es más sencilla de lo que parece. 

Si hace varios años levantabas una piedra y salían cientos de runners, y hace relativamente poco, levantabas otra piedra y aparecían cientos de coach, hoy en día levantas una piedra más grande aún y aparecen otros tantos UX designers.

 

 

Si eres implementador de páginas web WordPress, quizás te ha pasado alguna vez (a mi me pasó la semana pasada) que para conseguir un cliente y hacerle una bonita web, habláis de los requerimientos, haces diseños de cómo quedaría la web (porque no utilizas plantillas) y le creas la web en sí.

Hasta ahí todo bien,  pero cuando el trabajo ya está hecho al 90%, de repente, tu cliente te viene con que ha contratado un UX designer, o el que riza el rizo: un coach UX designer (además, runner), y que tienes que hacer varios cambios en la web cuanto antes a partir del informe que te ha enviado por email.

Lees el informe del tal UX designer y te das cuenta de que, a parte de las obviedades que dice, la gran mayoría de aspectos son muy subjetivos como para tenerlos en cuenta y parece que directamente dicho profesional ha comparado tu web con la de Apple o Amazon y ha hecho un listado de cosas a cambiar (para que se parezcan más a dichas webs).

La buena noticia es que experiencia de usuario (UX), es eso, una experiencia, y dependiendo del público que tú busques para tu web, va a tener un tipo de experiencia u otra, y siempre va a ser la experiencia que tú quieras que tenga.

Por ejemplo, si haces una web cuyo público es de edad más avanzada, incluye botones grandes y poco texto (entre otras experiencias); si tu web es para un evento de scape de room, de alguna manera prueba a jugar con la tensión de no poder encontrar la información en tu web de manera fácil (entre otras experiencias).

Si tu web es una tienda online, por favor, que se vean productos y el botón de “comprar” y un carrito de la cesta nada más aterrizar en la web (repito, entre otras experiencias).

Y es que, la experiencia de usuario podría bien llamarse experiencia de lead, porque usuarios hay muchos, pero leads (posibles clientes) pocos y muy valiosos. Pero…

 

 ¿Qué es la User Experience o UX?

Puesto que te tengo que dar una definición más o menos clásica de lo que es una experiencia de usuario, piensa en un cúmulo de elementos que juntos crean y definen la UX.

No confundir con usabilidad. La usabilidad web forma parte de la UX.

En sí, la UX es una receta muy especial cuyos ingredientes son la interacción humana con tu web, el diseño de la misma, la utilidad que tenga, el marketing que muestre, el rendimiento técnico de la web, su accesibilidad, su ergonomía y como ya hemos mencionado, su usabilidad.

Todos y cada uno de esos elementos debe ser despedazado individualmente y trabajado todo lo bien que sea posible, para luego volver a juntar todas las piezas y conseguir una buena experiencia de usuario profesional.

 

 La experiencia de usuario (UX) y el valor del tiempo

La UX es una gran herramienta de seducción web. La UX es una mirada penetrante, unos labios carnosos, un cabello de película, un andar seductor a cámara lenta (marketing)…

En cuestión de segundos, una web tiene que ofrecer una gran experiencia. Tiene que atraerte, engancharte (diseño).

Tus ojos tienen que ser guiados hacia un objetivo en concreto (interacción humana, utilidad) y con un golpe de ratón o trackpad, hacer que todo fluya (rendimiento técnico, ergonomía) para que, lo que hayas venido a hacer a esa web se cumpla (usabilidad, accesibilidad) y sin saber muy bien cómo, dicha web ya forme parte de ti, de tu vida y de tu alma. (marketing).

Y todo ello en cuestión de segundos, porque vivimos en un mundo muy estresante y no hay tiempo que perder, ya que, al igual que con los ligues, siempre habrá uno mejor para elegir.

 

 La UX en WordPress y el “No me hagas pensar”

Antes de darte ejemplos más concretos de qué revisar a nivel de experiencia de usuario en tu web de WordPress, quiero que entiendas en concepto de Don’t Make me Think (No me hagas pensar).

Piensa en un show de televisión de gran éxito, como por ejemplo la serie de Friends o Los Simpson.

Son capítulos de 20 minutos en los que, si imaginamos una línea continua, podemos dibujar dicha línea con una tiza, sin levantar la mano de la pizarra. Del punto A, al punto B. Fácil. Que gusta. Que no te hace pensar y puedes hasta hacer cualquier otra actividad mientras ves un capítulo.

Ahora piensa en Juego de Tronos, o en West World, cuyos capítulos (no todos) parecen clases magistrales de universidad en donde tienes que estar con papel y boli mirando detenidamente la pantalla para no perder detalle.

Quién está con quién, quién domina qué, qué flashback hay aquí ahora, qué sueño es el de quien que controla no se qué y que mató a la mejor amiga de la cuñada de alguien… ¿Cansa a veces no? Hay que ser muy fan para seguir viendo algunas series hoy en día.

Pues, a mi modo de ver, lo mismo pasa con las webs.

Si una web, en un entorno de ocio como puede ser Internet, se complica demasiado desde el principio, y a eso, añádele que quien te visita no te conoce previamente ni tiene referencias sobre ti, puedes dar por hecho que tu porcentaje de rebote va a ser muy alto (gente que entra, mira lo que hay en 2 segundos, y huye despavorido).

Al visitar una web, hay que ver poco, casi nada. Muy pocas cositas. Un solo concepto que se entienda fácil: mira, esta web vende móviles, ok. Mira, esta web es para reservar hoteles, ok. Mira, este hombre es entrenador personal y hace que pierdas kilos, ok. 

Poco a poco vas descubriendo nuevo contenido, poco a poco te va enganchando.

No pretendas mostrar todas tus cartas en la pantalla de inicio. Muestra una ahí, luego otra en la página de servicios, luego otra en la de tu portfolio… pero conecta bien esas páginas, lleva de la mano a tu visitante y muéstrale, experiencia a experiencia, lo que puedes hacer por él.

Estos conceptos me recuerdan a dos momentos que para mi tienen mucho significado a nivel de UX o experiencia de usuario.

El primero, para mi, es un buen ejemplo de UX: es una escena de la película Idiocracy, en el que, en un futuro en donde la gente directamente no piensa más, un hombre de nuestra época viaja en el tiempo y se convierte en el hombre más inteligente del planeta.

En esta escena en concreto, este hombre visita un hospital y la recepcionista busca entre una interfaz de botones grandes y muy descriptivos lo que le sucede al posible paciente.

La segunda, es un claro ejemplo de mala UX y a muchos os sonará. Es la página web que se hizo Homer Simpson cuando descubrió Internet (baja el volumen porque hace mucho ruido).

Y ya por fin te paso a hablar sobre lo que debes de tener en cuenta a nivel de experiencia de usuario en los elementos que conforman tu web de WordPress.

Ten en cuenta que los comento superficialmente (ya que ir uno a un requeriría de un curso completo de UX), así que espero que te despierte curiosidad algunos puntos y que trabajes, investigues y te ensucies las manos para aplicarlo a tu página.

 

 Experiencia de usuario o UX en WordPress aplicada a…

 

 …los menús

Obviamente el menú es una de las partes más importantes de tu web, pero no siempre tiene por qué ser lo más llamativo nada más visitar tu sitio.

Es más recomendable que los ojos de tu visitante se dirijan directamente a un call to action (CTA) o llamada a la acción.

De todos modos, intenta que:

• Cuando se haga hover (pasar el ratón por encima del menú) tenga un efecto llamativo o al menos bonito.
• Que el menú quede fijo al hacer scroll hacia abajo. De esta manera el usuario no se pierde.
• Que haya un botón abajo a la derecha que al pincharlo, vayas a la parte superior de la web. Es decir: si un visitante está leyendo un artículo de tu blog, muy extenso, lo ideal es que con un simple click pueda volver a la parte de arriba de la web, y no tener que hacer scroll para conseguirlo.
• Que el menú tenga el mismo aspecto en todas las páginas (esto es obvio, pero hay veces que no nos damos cuenta y hay páginas con diferentes menús o en donde los items del menú varían de un sitio a otro.

 

 …los textos

Tanto los textos de los artículos (contenido más elaborado) en sí, como el copy (porciones de texto dentro de toda la web), han de intentar:

• Ser visuales (juego de tipografías, negrita, cursivas, etc)..
• Destacar siempre los beneficios de tu producto o servicio (y no las características). Esto quiere decir destacar el por qué tienen que comprar o contratarte y no simplemente saber qué ofreces.
• Usa un tono cercano (como por ejemplo el mío en mis artículos).
• Si hay partes del texto que opinas que es mejor que no salgan en los móviles porque ocupan un espacio innecesario, ocúltalos.

 

 …los formularios

Los formularios son los elementos que más CTAs persiguen, por eso debes prestarles una gran atención:

• Intenta preguntar los mínimos datos posibles. No sirve de nada pedir el número de teléfono, fecha de nacimiento, sexo, ciudad donde vive, etc, si de verdad no te hace falta. Céntrate en lo básico: Nombre, email, mensaje.




• Si es un formulario que tenga cierto uso continuado (por ejemplo, el formulario de atención al cliente de una web), recuerda los datos como el nombre y el email a través del uso de cookies, o si tus usuarios tienen cuenta en tu web, auto-rellena el formulario con el usuario y email que tengan. Con Gravity Forms esto es muy sencillo).




• Presta atención a la versión móvil del formulario, para que todo el diseño cumpla un correcto equilibrio.

 

 …las imágenes y vídeos

Parte fundamental de una web que impacte. Intenta que el contenido multimedia de tu web:

• Tenga fotografías relacionadas con el texto en donde aparezcan.
• Intenta evitar las típicas imágenes de stock, por ejemplo, la de un hombre ofreciendo su mano y sonriendo.
• No reproduzcas vídeos automáticos con sonido.
• No uses el efecto parallax en móviles.
• Optimiza siempre las imágenes de tu WordPress y no hagas demasiados embebidos de YouTube o Vimeo ya que aumentan mucho el tiempo de carga.

 

 …la velocidad de carga

Afortunadamente cada vez más gente se preocupa por un diseño minimalista y que cargue rápido (no cómo la página de Homer Simpson).

Hay varias herramientas gratuitas que analizan tu sitio web y te indican en dónde se puede mejorar la velocidad de carga. No tengas miedo en usarlas.

• https://tools.pingdom.com/
• https://developers.google.com/speed/pagespeed/insights/?hl=es
• https://gtmetrix.com/

También recuerda que puedes usar plugins como WP-Rocket, los cuales te ayudarán a optimizar la velocidad de carga de tu web.

 

 …la llamada a la acción

El elemento que tiene que ser tu favorito. Esto es lo que ven (y lo que define) los visitantes al entrar por primera vez a tu web.

Intenta sobretodo que sea:

• Llamativo y visible pero sin caer en la horterada.
• Que no haya elementos cercanos a él que distraigan la atención.
• Un solo CTA por pantalla.
• Frases del CTA sencillas de entender y con gancho.
• Usa el color y la forma que necesites, en función de tu púbico objetivo.
• Intenta no usar pop-ups.

 

 …eCommerce

Es de mis partes favoritas de UX, las tiendas online. Es cierto que hay que seguir muy de cerca lo que hace Amazon que no ha cambiado su UX en varios años, porque simplemente, les funciona.

Pero va a depender de la cantidad de productos que tengas cómo vas a presentarlos a tu usuario final. Si tienes pocos productos (menos de 10) puedes mostrarlos individualmente, con buenas descripciones y landing pages. Si tienes más de 100 productos, mejor enfocarse en una buena navegación hasta encontrar lo que se quiera.

En general, las pautas a seguir son:

• Optimiza cada una de las fichas de producto, tanto en texto e imagen, como en lo que ofreces (reviews, botón favorito, añadir al carro, zoom en imágenes, etc).
• Pon tus ofertas y rebajas bien visibles y destacadas.
• Añade un soporte de Chat si puedes.
• Optimiza bien la página de agradecimiento (tras comprar un producto), ofreciendo suscribirse a la newsletter para obtener un descuento en la próxima compra, por ejemplo.
• Añade un buen filtro a los productos para encontrarlos mejor.
• Intenta que la pasarela de pago tenga los mínimos pasos posibles.
• Haz que que el registro en tu web sea opcional; es decir, que se pueda comprar como un simple visitante. Puedes ofrecer las ventajas de estar registrado, así como un código de descuento en la página de agradecimiento por la compra para los compradores sin cuenta.
• Vigila bien que los productos sin stock puedan tener una lista de reserva, y que se vea claramente que no hay en stock para evitar frustraciones y malentendidos a tus compradores.

 

 …otros elementos

Como otros elementos me refiero a tablas de precios, sliders, testimonios, páginas 404… todo ello tiene que estar cuidado a nivel de diseño, texto, etc.

También decide si te hacen falta o no. Y sobre todo, ¿por qué te harían falta? Si no eres capaz de responder a esa pregunta, no los pongas.

Por ejemplo, yo odio los sliders. Los considero innecesarios a más no poder. Quizás en lugar de un slider, te conviene un banner estático con un buen botón de CTA.

Otro ejemplo: si vendes una suscripción mensual, ¿de verdad te hace falta una tabla de precios?

 

 Conclusiones

Y hasta aquí este artículo sobre cómo mejorar la experiencia de usuario o UX en WordPress de una manera bastante clara y concisa.

Espero que te haya quedado claro qué es la UX y por qué es tan importante para tu web. No dudes en contactarme para cualquier pregunta en la que te pueda ayudar.

¡Un abrazo y nos vemos en otro artículo!