Google lleva anunciando 6 meses que el próximo mes de Mayo del 2021 se va a producir una actualización del Core de su algoritmo de búsqueda. La buena noticia es que ya sabemos en base a qué factores va a ser dicha actualización, cosa inédita en la historia del buscador, poco dado a dar información clara o pistas de este tipo sobre sus actualizaciones (updates). ¿Quieres saber más?
En concreto, Google básicamente ha dicho que la actualización va a tener relación con lo que que ha llamado “Page Experience”, es decir, “Experiencia de Página” para los que no dominéis el inglés.
Y ahora vamos a ver su relación con el diseño web. Los diseñadores van a tener mucha responsabilidad a la hora de crear “Page Experiences” acordes con los estándares de Google. Sin embargo, antes de entrar en materia, permíteme dejar mi opinión al respecto sobre el papel de un diseñador web en la experiencia de usuario.
El eterno debate sobre si los diseñadores web tienen relación con el desarrollo web e incluso con el SEO On Page
Me acuerdo cuando al CTO de una Startup le dije que el diseño web también formaba parte del Marketing Online. Él puso el grito en el cielo como si yo hubiera dicho una barbaridad.
Pues mira Juan Antonio (nombre ficticio que me invento), si un diseñador web me viene con una sección Hero que integra una imagen que ha diseñado muy bien pero que pesa 5 MBs está:
- Aumentando el tiempo de carga de la web, lo cual afecta directamente al SEO de la página en cuestión.
- Está consumiendo más recursos del servidor y, por tanto, puede que tenga que contratar un plan superior si su política es crear imágenes superiores a 3 MBs.
- Está consumiendo una buena cantidad de datos móviles de los pobres usuarios que quieran acceder a dicha web.
- Está afectando directamente a la llamada “Page Experience” que más adelante voy a explicar en qué consiste.
Eso por hablar de solo un aspecto del diseño web: el peso de las imágenes.
Y apaga y vámonos si nos metemos a hablar del diseño de interfaces para que sean amigables con los usuarios y se les guíe por dónde pueden navegar para llevarlos a donde nosotros queramos.
Solo he puesto como ejemplo dos aspectos del diseño web que impactan directamente con la experiencia de usuario y, por tanto, afectan al SEO de la web.
Todos esto forma parte del Marketing online.
El diseño web y su relación con el update de Google de Mayo del 2021
Google va a determinar cómo es el “Page Experience” de cada página de tu web gracias a unas métricas que ha llamado Core Web Vitals. Son 3 indicadores que tienen que ver con diferentes aspectos de la carga de una página. Tienen nombres muy raros (no te asustes):
- LCP (Largest Contentful Paint).
Esto tiene relación con cuánto tiempo tarda en cargarse el elemento principal de la web, es decir, la sección Hero de una web, por ejemplo.
- FID (First Input Delay).
Cuánto tiempo pasa desde que hago clic en la tecla enter para ver una página hasta que puedo empezar a interactuar con la misma: hacer scroll, hacer clic en un botón…
- CLS (Cumulative Layout Shift).
Cuánto tiempo tarda en estabilizarse el diseño de una página.
¿Te ha pasado alguna vez que empieza a cargarse una página y vas a hacer clic en un botón y de repente se baja el botón porque se ha cargado un banner publicitario y acabas haciendo un clic sin querer en la publicidad? Pues a eso se refiere la estabilidad visual de una página.
Consejos para diseñadores web que quieran tener buenas métricas en las Core Web Vitals
- Si el diseñador web realiza una imagen que pesa 5 MBs, la métrica LCP va a ser horrible porque van a pasar bastantes segundos para cuando se cargue la imagen… y mientras tanto, el usuario estará viendo un espacio en blanco. Así que si te dedicas al diseño web, usa imágenes que pesen menos de 75 kbs, a ser posible.
- No utilices demasiados efectos de movimiento. Este consejo quizás tenga más relación con el desarrollador web porque el diseñador simplemente pasa un diseño y el desarrollador empieza a meter:
-
- Efectos Parallax.
- Elementos que van apareciendo de izquierda a derecha conforme el usuario va haciendo scroll.
- Cualquier efecto de zoom, elementos que aparecen progresivamente, efectos hover, es decir, cuando el usuario coloca el ratón en una caja de texto y ésta se mueve levemente o hace un zoom.
Todo este tipo de efectos ralentizan la carga final de la página. Yo personalmente, no uso ningún efecto de este tipo en mis páginas webs
- Evita las tipografías de Google Fonts. En ocasiones, los diseñadores utilizan tipografías bastante curiosas. Lo que no saben (o no les importa) es que muchas de esas tipografías son propiedad de Google Fonts y para que se carguen en la página hay que hacer una llamada a un javascript que ralentiza bastante la página.
- Utiliza fondos de colores en lugar de imágenes. Ya hemos dicho que las imágenes son una de las causas del retraso en la carga de una página. Si ya te has concienciado al respecto, tampoco utilices 20 imágenes en una página, aunque éstas ya estén optimizadas. Puedes poner un fondo con un color suave en vez de poner una imagen de fondo en un bloque.
Consejos generales de diseño web para una buena experiencia de usuario
- Utiliza una tipografía grande y que se lea bien porque contrasta con el color de fondo de la página. Yo suelo utilizar tipografías tipo Verdana o Helvética a un tamaño de 17 píxeles y de color casi negro. Tampoco te recomiendo que uses el color negro porque queda demasiado agresivo e incluso puede cansar la vista. Te he recomendado el color “casi negro” por no darte el código de color adecuado.
- Usar fondos blancos es lo mejor para el usuario. El color blanco es un color que se agradece porque la vista no se cansa y así se destaca muy bien la tipografía escogida.
- Realiza rupturas de patrón en el diseño móvil. Tienes que pensar en cómo se va a ver la web en un móvil ya que la mayoría de usuarios navegan en dispositivos móviles. Un párrafo de 4 líneas en escritorio puede volverse un tocho infumable en el móvil… y no te digo nada si juntas 5 párrafos seguidos de 4 líneas cada uno.
- Utiliza cajas de colores, imágenes, listas y columnas con iconos para romper la monotonía de la página.
- No coloques más de 3 párrafos de texto seguidos ni más de 3 líneas en cada párrafo.
- Utiliza diferentes colores en los encabezados. Cambiando el color a tus encabezados, lograrás destacarlos todavía más y lograrás esa ruptura de patrón de la que he hablado más arriba.
Consejo importante:
Diseña tu página con la vista previa en móvil. Hasta ahora siempre hemos diseñado con la vista previa en escritorio. Es hora de acostumbrarse a diseñar con la vista previa en móvil.
Sobre mí
Me llamo Daniel Cana Flórez y soy redactor web con conocimientos avanzados en SEO. Si quieres saber más sobre mí puedes encontrarme en https://yoredactor.com/
- El impacto de los comentarios en el SEO: UGC en tiempos de IA - 7 julio, 2024
- Grok: La IA de Twitter que revolucionará tu estrategia de marketing - 9 junio, 2024
- ¿Escribir por escribir? SEO para tu marketing de contenidos - 24 octubre, 2023
