353 | Las 3 claves para una buena experiencia de usuario en tu web WordPress

En el episodio 353 de WordPress Semanal hablamos de tres aspectos clave para que los visitantes de tu web disfruten de una gran experiencia y además cómo poner estos tres consejos en práctica. Vamos allá. Hola hola. Soy Gonzalo Navarro y Bienvenidos al episodio 353 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Hoy hablamos de la experiencia de usuario en WordPress, pero no sólo la parte conceptual, no solo estas tres claves que te digo, sino también su aplicación práctica, como una vez tenemos claros los conceptos podemos llevarlo a cabo en nuestra web con WordPress. Todo esto en un momentito, pero antes como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos nuevo vídeo de la zona código, ya sabéis que ahí aprendéis a modificar vuestra web con WordPress sin utilizar plugins, simplemente pues hacemos cosas un poquito más manuales. A veces os enseño un trocito de código que sólo tenéis que copiar y pegar, otras veces os enseño un proceso pues que requiere ciertas acciones, ya digo manuales y que simplemente tenéis que seguir el vídeo y replicarlo, no hace falta que sepáis código, no tenéis que ser desarrolladores ni programadores ni nada. Y en este vídeo más reciente te enseño el concepto de debugging en WordPress. En debugging viene de la palabra bug, que es realmente bicho en inglés, pero se refiere a errores. Cuando en el desarrollo web aparecen errores o incluso en ciertos programas en general en el mundillo así más tecnológico, cuando se encuentra un error se llama bug. Entonces debugging es el proceso por el cual encontramos esos errores. Y en WordPress hay un sistema un poco estandarizado que puedes activar en tu web y que de esa forma puedes ir viendo o bien en la parte frontal de la web o bien en un archivo ese registro de todos los errores. Si tú no entiendes muy bien esos errores, pues bueno, te puede servir a lo mejor a nivel un poco más general, porque a lo mejor en el error pues se muestra que algo falla en el archivo de un plugin, entonces tú te puedes imaginar que el error está en ese plugin, pero si aún así no entiendes absolutamente nada, esto sirve para si alguien te ayuda con esto, por ejemplo alguien de soporte de tu hosting, un desarrollador que contratas, alguien que trabaje contigo pues le puedes decir, mira, aquí está todo el registro de errores, a ver si me lo solucionas. Bueno, en cualquier caso, para lo que lo vayas a utilizar, que ya digo, se puede utilizar a nivel de desarrollador, pero también es útil a nivel de usuario normal, habitual o menos técnico, pues te explico en este vídeo de la zona código, que es el 303, cómo puedes activarlo, las distintas formas que tienes de activar este registro de errores y que ya verás que es mucho más fácil de lo que parece. Si quieres acceder a este y otros vídeos de la zona código están incluidos en la suscripción en Gonzalo Navarro es todos los miembros tenéis acceso a más de 300 vídeos ya publicados y uno nuevo a la semana. Por otro lado, ya sabéis que también tenéis cursos completos, más de 70 cursos ya publicados y en la parte de contenidos recomendados vais a ver varios muy interesantes y relacionados con el episodio de hoy. Por ejemplo, os voy a dejar el curso de test A B en WordPress, como puedes hacer que se muestren distintas versiones de partes de tu web y comprobar cuál funciona mejor para que se quede como definitiva. Os voy a dejar el curso de gamificación en WordPress, es decir, cómo convertir tu web en un lugar donde los visitantes puedan interactuar, puedan jugar, puedan ganar premios a cambio de ciertas acciones que lleven a cabo. Y también destaco esta semana el curso de Velocidad en WordPress, que hace muy poquito que renové desde cero y que sirve para hacer tu web rápida. Todo ello en las notas del episodio. Ya sabéis, si tenéis lo estáis escuchando el episodio en alguna aplicación de podcast que permite enlaces, pues lo vais a tener ahí. Y si no podéis ir a Gonzalo es 353 y ahí lo tenéis todo completo, todo ordenadito, las notas, un esquema de todo lo que he ido comentando y encima todos estos enlaces relacionados. Fantástico. Vámonos ahora con el plugin de la semana que se llama Fatso. Este plugin ha salido hace muy poquito, hace unos meses. Está activo sólo en 50 o algunas más webs con WordPress y hace una cosa súper chula. Lo que consigues con él es que no sé si te ha pasado a veces, pero estás editando en el editor nativo de WordPress, en el editor de Gutenberg, y queda todo como muy estrecho, ¿No? Sin embargo, luego lo ves en la parte frontal y ya queda como tiene que quedar pues con este plugin permites que en la zona de edición quede todo más amplio en lugar de tan estrecho Y el nombre Fatso, esto es un poco. ¿Si ves pelis en inglés y demás así muchas veces en los institutos se llaman a los gorditos para meterse con ellos y tal, pues se le dice fatso, no? Es como. No sé si viene de algo en concreto, pero yo entiendo que es como si le dices a alguien gordelas, que no existe realmente, pero es pues una forma despectiva de hacerlo y así ha llamado a este plugin, un poco por el hecho de que conviertes en más ancho la parte de la edición. Este desarrollador tiene también otros dos plugins que hemos visto o no sé si he recomendado en otros episodios y hacen cosas como muy chiquititas. Tienen otro que se llama Welcome to the Block Editor be gone, es decir, adiós a la bienvenida que te da el editor de Gutenberg cuando lo abres por primera vez o después de una actualización y otro que se llama Full Screen Mode be gone, este sí que creo que lo he recomendado y te quita directamente la opción de pantalla completa cuando estás editando en el editor de WordPress en Gutenberg, para que puedas ver la parte de la izquierda, porque se puede configurar digamos, pero cuando limpias la caché o cuando accede otro usuario vuelve a aparecer, entonces con este plugin lo quitas para siempre. Bueno, estos son al final te he recomendado tres plugins, pero vamos, son del mismo desarrollador, te dejo el enlace ya sabes en Gonzalo Navarro es barra 353. Y ahora ya sí, vámonos con el tema central de este episodio, Experiencia de usuario en WordPress, conceptos y aplicación práctica. Y vamos a empezar definiendo de forma muy llana, aquí yo no soy ningún experto en diseño ux, que es como se llama o son las siglas para User experience, en lugar de poner la e pues ponen la xdx, pero te voy a hablar de mi experiencia, de las webs que yo hago, de lo que por supuesto me formo en ello, pero no he publicado un libro al respecto, no he publicado un curso al respecto, entonces si quieres profundizar seguro que hay profesionales que lo explican en detalle. Yo voy a hablar de los aspectos generales y después sí creo te puedo ayudar en la parte práctica. ¿Cómo todo esto que hablemos puedes llevarlo de forma práctica a tu web con WordPress o cómo se traduce en términos ya de, vale, y esto qué hago en mi web para esto? Pues es lo que vamos a ver. Empezando por una definición muy básica de qué es una buena experiencia de usuario en una web, en concreto WordPress, o en general en cualquier web. Y no es otra cosa que el visitante se encuentre con una navegación y un consumo de los contenidos sencillo e intuitivo, es decir, facilidad de uso de la web. Y esto se puede reducir o se puede dividir en tres puntos clave. Uno, diseño intuitivo, dos, contenido relevante y de calidad y tres, interacción fluida del usuario. Esto del diseño intuitivo puede sonar muy general, de hecho lo es, pero vamos a intentar simplificarlo. El diseño, la parte del diseño para esto de la experiencia de usuario es de los factores más importantes. El diseño nos referimos a la parte visual de la web, lo que va a ver el visitante final. Entonces, como decíamos en la definición de una buena experiencia de usuario, aquí lo que queremos es que el visitante encuentre fácilmente lo que bus. Entonces cuando vayas a aplicar el diseño de la web, ya sea que tú seas diseñador, diseñadora y lo vayas a hacer, o que partas de un diseño existente, el objetivo es que se encuentre fácilmente lo que el visitante quiere. Entonces, por ejemplo, tener una navegación claramente marcada, que sea muy fácil encontrar pues dónde ir a cualquier sitio de esa web, que los contenidos estén ordenados de forma lógica, que los enlaces se vean claramente. En muchas webs no se sabe muy bien si algo es una cosa destacada o es un enlace. Esto es parte de un diseño intuitivo. Ahora en la parte práctica veremos ejemplos más específicos de cómo puedes hacer todo esto, pero básicamente es que a nivel estructural, a nivel visual, yo llegue a una web y entienda lo que hay y pueda ir a donde necesite. Claro, aquí es importante que la persona que haga la web, que la diseñe, sepa bien qué es lo importante, la jerarquía de importancia de las cosas. Entonces para esto hay que conocer muy bien a tu público objetivo y presentarle lo que necesite. Bien, punto 2, contenido relevante y de calidad. Esto pues siempre se dice para todo, no sólo para la buena experiencia de un usuario, sino en general para todos. ¿Siempre se dice, pues tu contenido tiene que ser bueno y relevante, obvio no? Pero bueno, a veces no se hace así. Entonces, contenido útil, interesante y bien escrito. Esto es básico, cuántas veces llegas a una web, buscas algo en Google, le das a la primera opción, que no sé por qué sale la primera muchas veces si es una porquería y te encuentras eso, una porquería, ¿Qué haces? Te vas a otra, la experiencia es mala. Ya no hablamos del diseño en sí, sino del contenido. Pero como estamos hablando de la experiencia, además de que sea interesante, que esté bien escrito, pues que eso va a hacer que la persona se quede, se interese por ir a otros lugares, es recomendable tenerlo bien categorizado y etiquetado. Imagínate que estoy leyendo un contenido muy chulo, que me gusta y que quiero leer más sobre la temática. Pues si yo me puedo ir a esa misma categoría y ver otros contenidos similares, estoy haciendo que la experiencia del visitante sea buena. Pero para eso tú debes tener esos contenidos bien categorizados y bien etiquetados para que tengan relación entre sí y el visitante pueda seguir consumiendo lo que le gusta. Y luego a nivel de ese propio contenido, pues que tenga una buena estructura si lo requiere, que tenga su índice de contenidos, donde cuando le da a cada una de las partes del índice pueda ir a la parte que le interese, que tenga sus títulos bien estructurados, que no te va a ayudar ya solo, no solo te va a ayudar para el SEO, sino también te va a ayudar para que el visitante lo lea de forma cómoda. También es importante que pongas llamadas a la acción claras. ¿Cuál es el siguiente paso después de leer esto? Pues aquí tienes otros contenidos relacionados, o aquí tienes un curso donde amplías información, o aquí puedes volver al blog de nuevo para ver otra vez todos los materiales. ¿Entonces un poco combinación entre lo que quieres que haga el visitante y dar opciones de que se pueda seguir moviendo, no? Que termine de leer y no sabe qué hacer o no encuentra cómo volver atrás o cómo ir al siguiente paso y se va. Así que por norma general, salvo que tengas un objetivo muy específico, es interesante que siempre haya acceso a la navegación general y a contenidos relacionados. Ya digo, salvo que hagas una landing page muy específica donde tu objetivo es solo una cosa y entonces en estos casos normalmente quitamos todo, dejamos todo para que la única opción del usuario sea irse o comprar o apuntarse a algo. Esto ya depende también del objetivo específico, pero hablamos de a nivel general de una web. Bien, tercer punto, interacción fluida del usuario. Que tu visitante pueda hacer cosas fácilmente no es más que eso, no sólo leer y navegar, sino cualquier interacción, que de hecho esto mejora la experiencia, hace que la persona pase más tiempo y que se vea involucrado en tu web, en tu aplicación, lo que sea, por ejemplo comentar, rellenar un formulario, participar en un foro, compartir en sus redes sociales. Esto son todo interacciones que puede hacer tu usuario y que siempre y cuando tenga sentido puedes poner a su disposición. Mi recomendación es que revises todos esos procesos tú mismo que hagas, muchas veces no lo hacemos, publicamos una web, dices venga sí se puede comentar aquí, aquí hay un formulario que se puede rellenar para contactar, he creado una parte de foro, he puesto unos botones para compartir en redes sociales. ¿Has probado la experiencia? ¿Cómo es eso? Es muy recomendable que lo pruebes y si ya le dices a amigos tuyos que lo pruebe a familiares para que veas si se encuentran con algún problema, pues mejor. Todo lo que te vayas encontrando se vayan encontrando que impida esa experiencia fluida, pues siempre puedes intentar corregirlo en la medida de tus posibilidades. Otro ejemplo, ¿Es necesaria una caja de búsqueda? Si es necesaria, pues la pones. Hay veces en las que he hecho alguna web corporativa y el cliente como ve en otras webs que hay una caja de búsqueda, pues quiere poner una porque le gusta cómo queda al lado del menú. Esto muchas veces no es necesario e incluso desde mi punto de vista da una mala experiencia de usuario, porque imagínate que sólo tienes contenidos corporativos, tienes una página de inicio, una página donde ofreces tus servicios, una página de contacto y las páginas de privacidad y el aviso de cookies y poco más. No tiene sentido desde mi punto de vista una caja de búsqueda. La persona en la búsqueda pues va a poner algo que quieran, algún contenido que quiera encontrar en el blog o no lo sé. En el caso de los cursos, pues encontrar un curso específico, pero en una página corporativa donde hay cuatro páginas y las pones todas en el menú de navegación no es necesario y creo que es contraproducente poner una caja de búsqueda, pero como decía, si tiene sentido y la vas a poner también comprueba su funcionamiento. Es muy habitual tener una caja de búsqueda y a lo mejor tú solo quieres que en la búsqueda pues aparezcan los contenidos del blog y y sin embargo están apareciendo como te decía antes, por ejemplo la página de aviso legal, cuando alguien busca algo los resultados no tiene sentido. Entonces esto se puede optimizar, ya sea instalando un plugin específico para búsqueda o poniendo la búsqueda solo donde tenga sentido. Más interacciones o ejemplos de interacciones de los usuarios. Cuando pones recomendaciones personalizadas, pues por ejemplo si están lo que te comentaba antes, leyendo el blog de una categoría o un artículo del blog de una determinada categoría, que al final venga pues categorías o perdón, artículos de esa misma categoría, artículos relacionados, bueno, muchos ejemplos de interacciones más. Para que la interacción sea fluida, pues asegurarte de que la web carga rápido. Esto es un básico, ya os he comentado que tenéis enlace al curso de velocidad en WordPress y hay veces en las que tiene sentido llevar la interacción a su máxima expresión, que sería crear un sistema de gamificación. La gamificación, ya he publicado un episodio al respecto, incluso tenéis un curso completo, permite ofrecer recompensas a cambio de la interacción del visitante, convertir la experiencia en una especie de juego, puede ganar monedas, ir acumulándolas, usarlas para comprar algo, monedas digo, o cualquier cosa. Incluso lo puedes integrar en un sistema de venta en el que si la gente va tomando ciertas acciones, pues al final puede utilizar esa moneda virtual o ese premio que gana para canjearlo por un descuento de un producto o por un producto específico. Ya digo que tenéis un episodio completo y un curso que voy a dejar enlazado en las notas del episodio. Bien, hemos visto los tres puntos, los conceptos claves, me he metido también un poco en la parte práctica porque es lo que me tira más, pero son básicamente diseño intuitivo, contenido relevante y de calidad e interacción fluida del usuario. Ahora vamos a ver algunos ejemplos de aplicaciones prácticas para la buena experiencia de los visitantes de tu web. Primero contrata un buen hosting, déjate del típico hosting baratuno, esto lo puedes hacer si vas a hacer webs nicho con contenido automático a los que te da igual, pero si va a ser un proyecto en condiciones contrata un buen hosting. Ya Sabéis, yo utilizo SiteGround, pero hay otros muy buenos hostings, sobre todo recomiendo que estén a la última en cuanto a tecnología y que estén bien configurados para WordPress. Si vais a gonzalonabarro es hosting, vais a ir a la mejor oferta que tenga SiteGround en el momento. Ese es mi enlace de afiliado. Más aplicaciones prácticas, cosas que puedes hacer para poner en práctica estos conceptos de los que estamos hablando, aprovechar la comunidad de WordPress y sus expertos. ¿Por qué te digo esto? Porque, por ejemplo, yo no soy diseñador, es decir, yo no me voy a un programa de diseño para crear una maqueta visual de lo que después será la web. Si voy a afrontar un proyecto, o bien elijo un thing que ya exista, que ya haya diseñado alguien y lo adapto, o bien contrato a un diseñador, una diseñadora y luego creo a medida, implemento a medida eso en WordPress. Entonces, si este es tu caso, o bien, ya digo, contratas a un buen diseñador, o bien parte de un theme que esté bien desarrollado, que tenga buenos diseños y que aporte versatilidad. Muchos de los buenos themes traen plantillas ya diseñadas y estas están diseñadas por profesionales, con el UX, con el User Experience, la experiencia de usuario en mente, con el UI, la interfaz de usuario también en mente, con las buenas prácticas, con accesibilidad, de la que no hemos hablado, pero también es importante. Tenéis también un episodio en el que también hablo de accesibilidad, si no, podéis buscar en el podcast accesibilidad, si no, si no me acuerdo de enlazarlo. Entonces, esto es importante. Si hay gente muy buena que tiene todo esto en mente y que lo hace por ti, aprovéchalo. La gracia de WordPress es que hay tanta gente dentro que hay cracks en todo, en desarrollo, en diseño, en accesibilidad, como he comentado. Así que no es necesario que tú sepas de todo esto, simplemente saber discernir los buenos de los malos. Bien, más aplicaciones prácticas. Bueno, algo que puedes hacer, recuerda que te he hablado bien, te he hablado antes de tener todo muy bien estructurado, pues a lo mejor tiene sentido que crees tipos de contenidos nuevos. Por ejemplo, yo publico cursos, además de artículos del blog, episodios del podcast, vídeos de la zona código, también publico cursos. Entonces puedes tener un tipo de contenido creado en tu web para cada uno de estos contenidos, diferentes tipos de contenidos diferentes, y esto te permite no sólo a ti por dentro tenerlo todo mejor estructurado, sino por fuera, en la parte frontal, mostrárselo también de forma dividida a tus visitantes. Crear un tipo de contenido nuevo en WordPress es relativamente sencillo. Tenéis un curso en el que os explico cómo hacerlo, que básicamente lo hacemos gracias al plugin cptui, que es un plugin que te facilita muchísimo la creación de tipos de contenidos nuevos, igual que vienen páginas y entradas ya por defecto en WordPress, que tú puedas crear uno nuevo que se llame por ejemplo cursos. Además de los tipos de contenidos, te recomiendo también que crees un sistema, un sistema de categorización o de etiquetado para que luego en la parte frontal tus visitantes puedan ver la relación que hay entre los distintos contenidos y si les interesa sólo una parte que puedan ir a ella y consumir todo lo relacionado con la misma. ¿Más aplicaciones o buenas prácticas para esto de la experiencia de usuario? Bueno, ya te he comentado antes que te asegures de que tu web cargue rápido, pues implementalo. Esto empieza desde elegir el buen hosting, como te comentaba al principio, elegir un buen tema, un buen thing, además de que desde el punto de vista del diseño te encaje, ya sabes que te recomiendo elegir un tema liviano, he hablado en muchísimas ocasiones de esto, tenéis cursos sobre los mejores temas también los más rápidos, los mejor desarrollados, Astra, GeneratePress, etc. No volverte loco eligiendo plugins, de hecho en el curso de velocidad en WordPress te enseño cómo puedes ver si un plugin tiene buen rendimiento o no, de modo que si estás entre dos parecidos para hacer algo, elijas el que mejor rendimiento tiene. Y luego la optimización en sí, instala un plugin de caché o habilita El caché en WordPress instala un plugin de optimización del rendimiento para asegurarte de que se van cargando las cosas en el orden que deben y que la experiencia de tu visitante es lo más rápida posible. Y este tipo de pasos que hacemos en la optimización del rendimiento de carga de una web, ya digo, os dejo curso enlazado. Otra parte importante, el mantenimiento interno de la web. ¿Uno podría decir, bueno, mantenimiento interno, qué más da para la experiencia del visitante? Bueno da porque está muy relacionado con lo anterior. Si tu web no la tienes actualizada, por ejemplo, que es parte del mantenimiento, puede producir que haya errores, puede devenir en un hackeo de la web porque se detecta una vulnerabilidad que tú no has corregido con una actualización, los hackers lo saben y la aprovechan porque se van acumulando cosas, no haces mantenimiento, no haces limpieza y tu web acaba pesando más, tu hosting empieza a rendir peor y la experiencia del visitante se ve perjudicada. Entonces todo esto al final las buenas prácticas generales también a nivel interno se van a ver en la parte frontal, si metes todo debajo de la alfombra, va a haber un momento en el que se va a ver un bulto de tantas cosas que has metido. Más aplicaciones prácticas. Escucha a tus visitantes. Al final muchas veces, a mí me pasa, a veces me pongo yo a pensar, yo creo que esto es mejor, creo que lo otro. Y al final son asunciones. Lo mejor es saber la opinión general de tus visitantes y en función de ello, pues ir haciendo las mejoras correspondientes. Incluso, como te comentaba al principio, puedes hacer TSAB, es decir, crear distintas versiones de una misma cosa, por ejemplo, distintas versiones del menú de navegación y comprobar cuál funciona mejor. Pues uno se lo muestras a 100 usuarios y el otro a otros 100 y ves cómo se comporta, en dónde hace clic cada uno, de modo que puedas decidir cuál es a lo mejor el mejor orden de los elementos que pones en el menú de navegación. Esto es un ejemplo simplemente. En el curso de Test A B en WordPress vemos muchos ejemplos y cómo puedes hacer todo este tipo de cosas. Bueno, y habría muchísimas más aplicaciones que puedes llevar a cabo, pero yo creo que habiendo visto estos tres conceptos y con estos ejemplos que te ido dando, te puedes hacer una muy buena idea de cómo puedes mejorar o si estás empezando desde cero, crear una buena experiencia para los visitantes de tu web. Recuerda que todo lo que he comentado lo tienes en las notas del episodio Gonzalo 353 353 y que si quieres poner todo esto en práctica, tienes la posibilidad de apuntarte en Gonzalo es como miembro y tener acceso a los más de 70 cursos sobre creación y gestión de webs con WordPress de forma profesional y todo lo que rodea a esto del mundo de las webs. Los vídeos avanzados de la zona código, donde vemos esas modificaciones que requieren ir un paso más allá y que yo te pongo fácil para que simplemente sigas el vídeo y lo implementes. Soporte conmigo personalizado para las dudas que te puedan surgir y además, ya mismo, si estás apuntado, atento a tu bandeja, porque abrimos comunidad para tener un lugar donde todos podamos hablar, podamos aportar unos a los proyectos de otros, poner nuestras dudas, las cositas interesantes que vamos descubriendo en el mundillo WordPress y mucho más. Fantástico. Nada más por este episodio, nos seguimos escuchando. Adiós.