Guía para mejorar la experiencia del usuario (UX) del sitio de WordPress

Optimizar un sitio web para una mejor experiencia de usuario no es un juego de niños, principalmente porque las herramientas necesarias y / o el conocimiento de codificación no vienen por diez centavos la docena. Pero cuando el sitio web se crea en una plataforma que es prácticamente conocida y amada por su facilidad de uso, UXO ( optimización de la experiencia del usuario ) es mucho menos molesto.

Hay miles de herramientas disponibles en WordPress, muchas de ellas incluso gratuitas, que lo ayudan a comprender mejor a su audiencia (seguimiento y análisis), mejorar el rendimiento (complementos de optimización de imágenes y almacenamiento en caché) y probar y mejorar (A / B software de prueba como Nelio, OptimizePress, etc.). Esta guía no se trata de ellos.

Esta guía detalla algunos de los aspectos de usabilidad que se pasan por alto más fácilmente en un sitio web de WordPress y las mejores formas de solucionar esos descuidos. Empezaremos con:

Carruseles

Todos los departamentos de todas las empresas quieren carruseles / controles deslizantes, simplemente porque es un hermoso Golden Mean. Todo el mundo coloca su producto / campaña / mensaje en el espacio más visible de la página: la mitad superior de la página.

Esta es la razón por la que los temas de WordPress más deseables incluyen al menos un complemento de control deslizante (generalmente el control deslizante Revolution). Veamos los pros y los contras de ese enfoque:

Pros:

• Muestra los mensajes más significativos en un solo lugar.
• Los mensajes se pueden priorizar (lo más importante es la primera diapositiva)
• Se supone que atrae a todos los segmentos de visitantes ("algo para todos")

Contras:

• Los usuarios generalmente no esperan a que las diapositivas giren y saltan el carrusel después de echar un vistazo al marco visible actualmente.
• Los robots de búsqueda no pueden rastrear fácilmente el contenido de las diapositivas, lo cual es una mala noticia para el SEO.

Hay formas de solucionar esos inconvenientes y mejorar la UX del carrusel:

1. Mantenga el número de diapositivas / marcos no más de 5.
2. Dar control de navegación en carrusel a los usuarios
3. NO reenvíe automáticamente.

A veces, la solución más simple es la mejor. En lugar de depender de complementos de control deslizante premium de lujo, puede usar complementos ligeros de JavaScript (jQuery) como Slick para crear carruseles fáciles de usar en WordPress.

Navegación avanzada

Un menú principal en el encabezado combinado con una navegación secundaria en una barra lateral es una forma casi infalible de garantizar que su navegación sea completa y utilizable. Pero cuando se trata de sitios web enormes (especialmente comercio electrónico o blogs grandes con mucho contenido) con miles de páginas, una navegación secundaria por sí sola no es suficiente.

Por eso necesitamos Mega Menús. Pero esta moneda también tiene dos caras.

Pros:

Visibilidad uniforme: el contenido / las páginas de los niveles inferiores se incluyen en el mega menú
Ahorra un paso adicional: los usuarios pueden acceder al contenido más remoto / oscuro más rápido.

Contras:

• Se sabe que causan problemas de rendimiento cuando se agregan elementos de la interfaz de usuario como gráficos / iconos.
• Más o menos ineficaz en un sitio web con mala jerarquía de contenido
• Hacer que los mega menús respondan perfectamente puede ser un desafío

Antes de debatir los pros y los contras (y si incluso necesita un mega menú en su sitio web o no), debe clasificar su contenido a fondo. La taxonomía de WordPress está ahí por una razón. Úselo.

Una vez que tenga su jerarquía de contenido lo suficientemente domesticada y organizada, puede usar complementos de WordPress como Max Mega Menu, uberMenu, etc. para agregar un mega menú desplegable al sitio web. Las extensiones de WooCommerce como Ajax Layered Navigation agregan una interfaz de filtrado a la tienda.

Rendimiento

No importa lo que le GUSTARÍA creer: NO es exclusivo.

Los usuarios no quieren esperar por el contenido, así que no los haga esperar por el contenido o lo buscarán en otra parte. Incluso sus filas sufren de sitios web lentos. Esa es la suma total de la necesidad de optimizar el rendimiento en la experiencia del usuario.

Optimice el rendimiento de su sitio web de WordPress con:

CDN: una opción viable para sitios web que reciben una audiencia global y tienen un tráfico de medio a alto. El complemento MaxCDN y W3 Total Cache es una combinación hecha en el paraíso de la carga rápida.

Caché: como se mencionó anteriormente, W3 Total Cache es el único complemento de almacenamiento en caché que necesita (incluso sin el soporte CDN). También pregunte a sus desarrolladores sobre soluciones del lado del servidor como Redis y Memcached.

Optimización de front-end: complementos como EWWW Image Optimizer comprimen imágenes (sin comprometer la calidad). También asegúrese de que haya la menor cantidad posible de CSS y JS en línea en sus archivos de tema. Comprima y minimice las hojas de estilo y los archivos JavaScript también.

Reduzca las dependencias externas, use sprites CSS y sea extremadamente exigente al descargar complementos (cuanto menos, mejor). Incluso puede ponerse en contacto con su proveedor de alojamiento web y pedir ayuda. A veces, su proveedor de alojamiento web crea problemas relacionados con el rendimiento.

Pop-Ups modales

No seas desagradable en nombre de la interactividad y las conversiones.

Sí, la ventana emergente modal (marketing de interrupción) es una gran herramienta de conversión. Hay literalmente miles de complementos (la mayoría de los complementos de redes sociales tienen esta función ahora) que le permiten pegar un mensaje a los usuarios, recordándoles 'cortésmente' que compartan / sigan / les guste el contenido en las redes sociales, se suscriban o registren, aprovechar un descuento, et al.

Hay tantas cosas mal en él ... pero llegaremos a eso en un momento.

Pros:

• Probado para mejorar las tasas de conversión

Contras:

• Distracción: el visitante está aquí por el contenido y la ventana emergente está en el camino.
• Las ventanas emergentes se tratan como ruido blanco (como muchos anuncios) a menos que se adapten correctamente al recorrido del usuario.
• MALO para la accesibilidad

Hay ejemplos de ventanas emergentes que se utilizan muy bien en contexto. BrainPickings.org comprende a su audiencia y promueve su enlace 'donar' solo cuando el usuario ha accedido al sitio repetidamente y cuando ha terminado de leer el contenido. La ventana emergente Reebok Crossfit tiene un mal momento, pero lo compensa ligeramente con un descuento en la suscripción en la página de productos.

Fuente: REEBOK

Los retrasos de tiempo y activación están bien, pero también es necesario enfocarse en el panorama general y vincular una ventana emergente de una manera que sea relevante para los usuarios que lo deseen.

Hasta ahora, el aumento de conversión se debe más a una fuerza contundente, pero la calidad de las conversiones y los clientes potenciales posteriores se pueden aumentar cuando lo hace de manera inteligente. Pedirle a un visitante por primera vez que se suscriba a un sitio web no le dará clientes potenciales de calidad 99/100 veces.

Intente usar los complementos de WordPress de manera inteligente para las ventanas emergentes. Hay algunos (como Popups de Supsystic) que son buenos. Trabaje con ellos en lugar de centrarse solo en la interacción en una sola página.

Nota final

Para mejorar la experiencia del usuario, espere que se asegure de tomar este consejo con un grano de sal y probar todo (use Google Analytics o Nelio A / B testing, o cualquier otra herramienta: depende de usted).

Y prometa seguir mejorando.

Leer más Complementos de WordPress | 5 soluciones rápidas para su sitio de WordPress