UX, UI y su relación e impacto en el SEO

Diseña tu sitio web sin perder de vista la experiencia. Así logras que el  público y los motores de búsqueda se enamoren de tus contenidos.  En estos son los temas que vamos a tratar en este artículo:

• Aspectos para tener en cuenta en SEO y UI que benefician nuestra estrategia de posicionamiento web.
• ¿Qué es SEO?
• ¿Qué es SEO técnico?
• ¿Qué es UX y cómo se relaciona con el SEO?
• ¿Qué es el diseño UI o Diseño de Interfaz de Usuario?
• ¿Qué relación hay entre SEO y UI?
• ¿Qué es indexación y cómo afecta el diseño UI los resultados de búsqueda?
• ¿Qué sucede antes de que un sitio web sea indexado por Google?
• ¿Cómo influye el Diseño de interfaz de usuario en el SEO y optimización de contenido?
• ¿Qué relación hay entre Core Web Vitals, Diseño UI y SEO?
• ¿Qué elementos afectan la calificación en Core Web Vitals?
• ¿Cómo afectan las tipografías el SEO?
• Relación entre Diseño UI y SEO para dispositivos móviles

Cuando se habla de experiencia de usuario, Google, la empresa con el motor de búsqueda más utilizado en el mundo, comienza a hablar de la importancia del SEO. 

La optimización de contenidos en un sitio web le permite a Google brindarle al usuario información valiosa y precisa, y al usuario le permite encontrar la información que busca en el momento oportuno. 

La primera experiencia que tiene un usuario antes de ingresar a una aplicación o sitio web se centra entonces en que la información sea útil, relevante y confiable, y, sobre todo, que pueda ser encontrada en los primeros resultados de búsqueda. A esto le llamamos posicionamiento orgánico.

"Si un sitio web no está cuando se hace una búsqueda en Google, sencillamente no existe en Internet".

Aunque muchos usuarios llegan a activos digitales a través de otros canales (como pauta en search o redes sociales), las búsquedas orgánicas son las acciones más relevantes en estrategias de marketing actuales, debido a su rentabilidad a través del tiempo.

Pero eso no es todo. Que la información sea presentada de manera intuitiva, fácil de usar y entender nos lleva a plantearnos la importancia del diseño de interfaces en el posicionamiento de los contenidos.

Es por eso que nos centramos en evaluar la relación entre SEO y UI al momento de realizar una estrategia de posicionamiento.

Abordaremos los aspectos de SEO que se deben tener en cuenta en el momento en que se está diseñando una interfaz de usuario para potencializar el posicionamiento del sitio web y su contenido.

Aspectos para tener en cuenta en SEO y UI que benefician nuestra estrategia de posicionamiento web.

La relación entre SEO (Search Engine Optimization) y UI (Diseño de Interfaz de Usuario) es estrecha.
El SEO se encarga de todos los aspectos y variables que permiten a un sitio web aparecer en los motores de búsqueda cuando un usuario hace una consulta, principalmente en Google, el motor de búsqueda más utilizado en el mundo.

Por otro lado, el UI o diseño de interfaces le permite al usuario entender la información de manera fácil, rápida e intuitiva y lo guía al cumplimiento de objetivos a través de su interacción con un activo digital.

De un buen diseño de interfaz y una adecuada estructura de contenidos depende qué tan eficiente puede ser la implementación de una estrategia de posicionamiento orgánico y sus posteriores resultados en el cumplimiento de objetivos.

¿Qué es SEO?

El SEO (Search Engine Optimization) u optimización en motores de búsqueda, es lo que llamamos a una serie de acciones que tienen como objetivo mejorar el ranking o posiciones de un sitio web en los primeros resultados de búsquedas orgánicas.

Cuándo hacemos SEO tenemos en cuenta aspectos como la usabilidad del sitio, definición de palabras clave, optimización técnica de la página, generación de contenidos, entre otras acciones que sumadas trabajan en conjunto para lograr el objetivo de posicionar una página web.

Uno de los aspectos más importantes a la hora de evaluar la relación entre SEO y UI son los aspectos del SEO Técnico, pues es allí donde se encuentran los primeros aspectos a tener en cuenta cuando se habla de la relación entre SEO y UI.

¿Qué es SEO Técnico?

El SEO técnico, como su nombre lo indica, es el análisis detallado del funcionamiento técnico de una página web, con el fin de encontrar posibles errores y solucionarlos para mejorar el posicionamiento orgánico del sitio web.

Se encarga de mejorar aspectos que tienen impacto directo en el rastreo del sitio, estado de indexación, componentes gráficos, código de la página, entre otros, para ofrecer una buena experiencia de usuario. Además, al mejorar la arquitectura de información tenemos bases sólidas para una estrategia de contenidos.

Por medio de una auditoría técnica se revisan pormenores como: 

• Enlaces rotos.
• Tiempo de carga del sitio.
• CWV (Core Web Vitals).
• Microformatos.
• Contenido duplicado.
• Redirecciones.
• Optimización de imágenes y contenido.
• Estado de metadatos.

Estas y otras acciones que pueden ser evaluadas, pueden determinar la salud de un sitio web. Con base en sus resultados podemos implementar mejoras a nivel de diseño, arquitectura y optimización, que repercutan directamente en el SEO.

Semrush por ejemplo evalúa todos los aspectos técnicos de un sitio web para determinar qué tan fácil puede ser su posicionamiento e incluso permite obtener datos para tu estrategia de marketing digital en general.

Si te interesa este tema, podrás saber qué es la salud del sitio y su importancia en una auditoría seo con semrush, aquí.

Ahora veamos qué es el diseño de interfaz de usuario, cómo el comienzo, en el diseño de interfaz de usuario, se deben tener en cuenta algunos de los aspectos mencionados anteriormente para que nuestra estrategia de posicionamiento web sea eficaz.

¿Qué es UX y cómo se relaciona con el SEO?

UX (User Experience) se enfoca a la forma en que las personas interactúan con un producto o sitio web, enfocándose en crear experiencias positivas mediante la facilidad de uso y un diseño atractivo. Por otro lado, ya tenemos claro que el SEO (Search Engine Optimization) busca mejorar la visibilidad y el posicionamiento de un sitio web en los motores de búsqueda.

Ambos, UX y SEO, están estrechamente relacionados y son cruciales para el éxito de cualquier sitio web. Aquí cabe destacar los siguientes aspectos y la forma cómo se relacionan:

• Un contenido relevante y bien estructurado es fundamental para ambas disciplinas.
• La velocidad de carga del sitio web es un factor importante para la experiencia del usuario y el SEO.
• Un diseño receptivo y amigable para dispositivos móviles es esencial debido al creciente uso de dispositivos móviles para navegar.
• Una estructura de enlaces bien organizada y una navegación clara benefician tanto al SEO como a la experiencia del usuario.

Además, una baja tasa de rebote y un tiempo en el sitio más prolongado (permanencia dentro del sitio) son indicadores positivos para el SEO y reflejan una experiencia satisfactoria para el usuario. Integrar una buena UX en el sitio web no solo ayuda a atraer y retener visitantes, sino que también mejora el posicionamiento orgánico en los resultados de búsqueda. Por tal razón, enfocarse en una buena UX no solo mejora la satisfacción de los usuarios, sino que también tiene un impacto directo en el rendimiento de una estrategia SEO y, en última instancia, en la consecución los objetivos propuestos dentro de la estrategia digital general.

¿Qué es el diseño UI o Diseño de Interfaz de Usuario?

El Diseño de Interfaz de Usuario, también conocido como UI, es la disciplina encargada de crear la parte gráfica del sitio web que guiará al usuario en su navegación por toda la página para que lleve a cabo las acciones que tenemos como objetivo.

De un buen diseño de interfaz de usuario depende que podamos generar mayor interacción con nuestros CTA (llamados a la acción), tener más contactos, ventas, tener una mejor indexación en Google, tener fragmentos enriquecidos en los resultados de búsquedas orgánicas, una tasa de rebote baja, incremento del CTR, o cualquier otro objetivo que tengamos estipulado para nuestra página.

El diseño de interfaces o UI, en sí, es lo que nuestro usuario ve al ingresar a una web.

Ya sabemos qué es SEO y qué es el diseño de interfaces o UI.

Ahora veremos por qué es importante que desde la etapa de diseño pensemos detenidamente cómo se relacionan y cómo podemos aportar a nuestra estrategia de posicionamiento orgánico.

¿Qué relación hay entre SEO y UI?

El diseño UI es el encargado de facilitar al usuario la navegación en un sitio web y por ende aporta a la experiencia que tiene en el mismo.

El SEO técnico, al igual que UI, tienen como objetivo ofrecer a los visitantes al sitio web una buena experiencia dentro y fuera de la página.

Es fundamental que el sitio web tenga los elementos necesarios en su diseño.

El uso excesivo de recursos (imágenes de fondo, elementos de animación, entre otros) requiere más programación y uso de código que pueden afectar la velocidad de carga del sitio web.

Es importante encontrar un equilibrio.

No sacrificar diseño o identidad de marca, pero tampoco sobrecargar con efectos, animaciones, fuentes nativas, y demás recursos gráficos a un sitio web.

Lo más importante es que la carga de la página sea óptima y rápida para que el usuario pueda interactuar con ella en pocos segundos. Así podrá navegar rápidamente entre nuestros productos y servicios, y además tendremos una mejor tasa de conversión.

Ahora veamos qué sucede antes de que el usuario pueda encontrar nuestra página en los resultados orgánicos de los motores de búsqueda.

¿Qué es indexación y cómo afecta el diseño UI los resultados de búsqueda?

Indexación hace referencia a la acción que realiza Google para agregar un sitio web a su biblioteca de contenidos (índice). El diseño UI puede afectar la indexación cuando hay elementos que hacen que la carga del sitio sea lenta, como el peso y formato de las imágenes, exceso de archivos multimedia que cargan dentro del sitio y no son traídos de otra parte como por ejemplo YouTube.

Si tu página no está dentro del catálogo de Google, no aparecerá en los resultados de búsqueda y no tendrás tráfico orgánico hacia tu página.

En otros términos, un sitio indexado hace referencia a que Google tiene nuestro sitio web en su inventario y lo muestra en función de las búsquedas o consultas de los usuarios.

Google es un repositorio de información, su trabajo es dar contenido de calidad.  

Para contextualizar un poco sobre la indexación, veamos a continuación qué sucede previo a la indexación de un sitio web por parte de Google.

¿Qué sucede antes de que un sitio web sea indexado por Google?

Antes de indexar un sitio web, Google realiza 3 pasos en los cuales, con la ayuda de sus algoritmos, determina qué información es más relevante para él en función de su búsqueda y si clasifica nuestro contenido.

1. Rastreo o crawling

   Google tiene un software de rastreo llamado user-agents, y este se encarga de navegar y rastrear continuamente las nuevas páginas y sus respectivas actualizaciones.

   Las imágenes, estilos, tipografías, y demás recursos gráficos del diseño UI no son la excepción. Google revisa todos los recursos utilizados por los diseñadores de interfaces de usuario y tiene en cuenta el tiempo de respuesta de cada elemento utilizado.

   También existen user-agents encargados de navegar y rastrear continuamente las nuevas páginas y sus respectivas actualizaciones.

2. Indexación

   Después de rastrear los nuevos sitios y las actualizaciones de contenido de sitios existentes, Google interpreta la información, la clasifica y la agrega a su base de datos para mostrarla a los usuarios cada que se realiza una consulta.

   Los resultados que se muestran en la búsqueda, son producto de una selección rigurosa para ofrecer contenido relevante o de valor al usuario. Se tiene en cuenta el texto y los contenidos multimedia, en este caso imágenes, animaciones y demás formatos multimedia que enriquecen el contenido. En este punto el Diseño UI debe estar pensado en aportar información gráfica relevante, de calidad y original.

   Google tiene en cuenta la calidad de contenido que tiene el sitio, relevancia de la información, si es contenido multiformato (multimedia), su arquitectura y semántica y otros aspectos que permiten su clasificación. A esto lo llamamos indexación.

   Google organiza la información que tienen las páginas web, hace un inventario y la clasifica en función de las búsquedas de los usuarios para luego mostrar el resultado.

3. Posicionamiento

   Google realiza una búsqueda del contenido indexado y ofrece la información más relevante y útil en función de la búsqueda. Todo esto ocurre en una fracción de segundo.

   En este punto es donde Google suministra la información al usuario en función de su búsqueda y con ayuda de sus algoritmos, clasifica o muestra las páginas que mejor calificación tengan según la capacidad de resolver la consulta del usuario. Las imágenes y contenido multimedia dentro del sitio, son relevantes en esta cualificación de contenido para el usuario que hace la búsqueda.

   Al momento del rastreo por parte de los algoritmos, se tienen en cuenta los siguientes factores:

• Palabra clave de consulta.
• Relevancia y usabilidad de la página.
• Grado de especialización de las fuentes.
• La ubicación.
• La configuración.

El grado de especialización de un sitio web como fuente de información tiene relación con el diseño UI. Es decir, si el diseño de nuestro blog tiene categorizados los contenidos en función de las temáticas, y en cada una de ellas se ahonda más sobre el tema, Google lee tu sitio como una fuente confiable de información.

Al abordaje especializado de contenido a través del diseño de interfaces de usuario se le llama arquitectura de información, También está relacionado con diseño UX o Experiencia de usuario.

Por ejemplo:

Si acompañamos nuestro contenido de imágenes propias y generamos una arquitectura visual que le permita al usuario identificar fácilmente el contenido de valor, este será mucho más valioso para solucionar sus necesidades de búsqueda.

Cada factor tendrá más prelación por Google al momento de entregar el resultado, según la naturaleza o necesidad de la intención de búsqueda del usuario. Si un usuario busca una dirección, el ítem de ubicación tendrá más prelación.

¿Cómo influye el Diseño de interfaz de usuario en el SEO y optimización de contenido?

os La forma como influye el Diseño de Interfaz de usuario en el SEO es directamente en la optimización de la página web. El contenido multimedia es fundamental dentro de un sitio e influye directamente en la optimización.

Al momento de hacer el diseño de la página, usar demasiados elementos de imagen, animaciones, sliders, tipografías que no son para la web, entre otras, afectan la carga del sitio y por consiguiente la optimización.

Es fundamental que el sitio cargue rápido sobre todo en dispositivos móviles. Mientras más rápida sea la carga, mejor será la experiencia del usuario y mejor calificación obtendremos por parte de Google.

Es importante tener siempre presente que desde diseño podemos aportar a la optimización de la página en cuanto a tiempos de carga.

La entrega óptima de un sitio lo podemos entender como una excelente atención al cliente, en este caso, una buena experiencia de usuario en la web.

¿Qué relación hay entre Core Web Vitals, Diseño UI y SEO?

Las relación de las Core Web Vitals o CWV, con el diseño UI y SEO se enfoca en la optimización y performance de una página web. CWV es un algoritmo enfocado a conocer la forma cómo perciben los usuarios su interacción con un sitio web desde el momento en que hace clic para ingresar a ella, hasta el momento en que está totalmente cargada en su dispositivo.

Estas métricas tienen como principal objetivo la medición del rendimiento de una web en relación con la experiencia de usuario. Entre más natural e intuitiva y sobre todo óptima en cuanto a velocidad de carga, mejor será la puntuación.

El Core Web Vitals Se puede evaluar en 3 aspectos principales:

Largest Contentful Paint (LCP)

Mide el intervalo de tiempo que se toma el sitio en cargar hasta el último elemento más grande en el diseño, por ejemplo, las imágenes de gran formato y mucho peso pueden afectar este factor del Core Web Vitals. Una calificación buena está en 2,5 segundos, si es superior a 4 segundos, se considera pobre y se debe mejorar.

First Input Delay (FID)

Hace referencia al tiempo que le toma al usuario esperar a que los elementos del sitio estén listos para interactuar con ellos (hacer clic, hacer scroll, ver el menú, que el botón se active…). Si un elemento se demora en cargar y hace que el sitio no esté listo para que el usuario pueda usarlo en poco tiempo, afecta la calificación.

Este es el error más común debido al exceso de animaciones, imágenes pesadas, efectos y demás elementos gráficos. Es aquí donde los diseñadores UI pueden ayudar en la estrategia de optimizar los tiempos de carga.

Cumulative Layout Shift (CLS)

Mide la acumulación de elementos y cuanto cambia su aspecto visual mientras carga la página web. El Cambio Acumulativo de Diseño o CLS mide, por nombrarlo de una forma clara, la estabilidad visual de un sitio mientras carga.

Esta métrica está centrada netamente en la experiencia de usuario, y desde Diseño UI se puede aportar a que se obtenga una calificación positiva al disminuir el uso excesivo de recursos gráficos que afecten, como se mencionó anteriormente, la estabilidad visual del sitio mientras carga.

Ejemplo:

Si una imagen no tiene dimensiones definidas, puede cargar el texto primero y cuando el usuario esté leyendo, éste se mueve hacia abajo cuando cargue la imagen principal por completo.

También ocurre con los botones que cambian de lugar al aparecer un elemento que no había cargado.

El diseñador UI debe conocer e identificar el comportamiento de los elementos al momento de la carga del sitio. Entender sobre diseño web frontend le permite definir estrategias de diseño que propicien una mejor carga de los elementos y por consecuencia, una mejor calificación del CLS.

PODCAST

¿Qué elementos afectan la calificación en Core Web Vitals? 

Los factores que más afectan la calificación de Core Web Vitals y que están relacionadas con el diseño de interfaces son:

• Imágenes demasiado grandes o mal optimizadas.
• Archivos multimedia alojados dentro del mismo servidor.
• javascripts, css y html mal optimizados.
• Tipografías personalizadas.

También interfieren aspectos técnicos como el sistema de caché, la velocidad de respuesta del servidor, la manera en que se cargan los contenidos en el sitio y otros que dependen específicamente del desarrollo.

Recomendaciones para no afectar las Core Web Vitals de un sitio web si eres diseñador UI.

Para evitar afectar la puntuación de las Core Web Vitals y por consiguiente la experiencia de usuario de un sitio web, un UI o diseñador de interface puede seguir los siguientes consejos:

• Usar la imagen del tamaño real que se usa en pantalla del dispositivo para el que está diseñada.
• Usar formatos webp o SVG según sea el caso.
• Evitar el uso de gifs y priorizar el uso de animaciones html o video en caso de animaciones.
• No usar tipografías personalizadas, usa las de google font.
• No usar imágenes en png, y usarlas sólo si es estrictamente necesario.
• Evitar el peso de imágenes de más de 100kb y páginas mayores a 1mg de peso.
• Evitar el uso de transparencias en fotografías o estilos que no puedan darse a través de css.
• Evita usar elementos o interacciones que reten al desarrollador a usar javascript para resolver.
• Evita usar texturas que no puedan generarse a través de CSS. (una imagen de máximo 5px x 5px debería generar una textura).
• No generar distintos diseños para elementos como imágenes o botones según el dispositivo.

¿Cómo afectan las tipografías el SEO?

El uso de tipografías personalizadas o familias tipográficas que no están en Google Fonts, afectan al SEO debido a la manera en que los servidores resuelven las peticiones.

Una tipografía personalizada demora la carga del sitio y en ocasiones demora la respuesta de otros recursos que dependen de ellas, como banners, botones y menús. También son el principal causante de mala calificación en el CLS.

Las tipografías tienen licencias de uso, como cualquier software.

Usar tipografías que no son para la web puede causar problemas de rendimiento web pero también pueden causar problemas legales (aunque no son tan comunes). Aun así, usar una tipografía optimizada para impresión también puede causar problemas de lectura y rendimiento provocando una web lenta.

Google cuenta con una gran variedad de fuentes y todas son compatibles con la mayoría de dispositivos, tamaños, pantallas y compiladores de estilos.

Lo mismo ocurre con los íconos. Los íconos personalizados aportan a la identidad de marca, pero las tipografías e íconos son más eficientes para la optimización de la página y la carga inicial.

Existen tipografías de íconos que se pueden usar en las páginas web, en lugar de usar recursos como imágenes o archivos png que requieren un mayor consumo de recursos. En este punto cabe preguntarse qué es más importante: el uso de tipografías personalizada o íconos en formato png, en lugar de usar recursos disponibles en la web que aporten a la optimización del sitio y experiencia de usuario.

Relación entre Diseño UI y SEO para dispositivos móviles 

La relación entre Diseño UI en dispositivos móviles y SEO es, quizá, uno de los puntos más importantes.

En promedio, el 80% de tráfico hacia una página web proviene desde dispositivos móviles
La importancia de diseñar para móvil tiene relación con las tendencias o comportamientos de usuario.

Diseñar una interfaz de usuario para dispositivos móviles o será diferente según su comportamiento, en este punto es importante contar con un buyer persona que permita saber más sobre el comportamiento del público objetivo de nuestro negocio con el fin de ofrecerle una mejor experiencia.

¿Qué aspectos tener en cuenta para una buena experiencia de usuario en móvil que además ayude al SEO?

Los siguientes aspectos son clave para que la experiencia en móvil sea fluida, ayude a una mejor navegación dentro de la página web y por consiguiente se indexe mejor y mejorar el SEO de un sitio web.

El diseño UI es crucial porque, el uso de elementos pensados para el rendimiento de una página, influye en la optimización, la experiencia de usuario y posterior efectividad de la estrategia posicionamiento y del sitio web.

Algunos puntos a tener en cuenta durante el diseño de interfaces para móviles son:

• Tamaños de imágenes optimizadas.
• Tamaño del texto mobile first y uso de máximo dos tipografías.
• Contenido multimedia y recursos optimizados (pdf, videos, descargas, etc…) en caso de ser necesarios.
• Tipografías no personalizadas.
• Iconos en formatos svg e imágenes en formato webp.
• Diseño optimizado para menor uso de CSS.

La sumatoria de todos los componentes de Diseño de Interfaz de usuario o Diseño UI, son claves para que la estrategia de posicionamiento web SEO de un sitio tenga éxito. El objetivo en común es ofrecer una buena experiencia de usuario, por eso es fundamental que un sitio web sea óptimo para que sea fácil de indexar por parte de Google, que tenga un un flujo de navegación claro, y sobre todo, que se centre en el usuario para que se lleven a cabo las conversiones.

Al momento de diseñar, pensar en el usuario se debe tener presente aspectos como la conectividad a nivel local y tiempos de carga promedio. Un sitio lento y pesado que tenga imágenes y recursos sin optimizar y código en exceso, no ofrece una buena experiencia de usuario.

En este punto cabe destacar que la experiencia de usuario es la premisa principal.

Imaginar que conocemos un sitio web en redes sociales, luego al ingresar la carga se torna lenta y una vez dentro la interfaz es poco intuitiva, es visualizar una experiencia de usuario deficiente que aumenta la tasa de rebote y afecta el rendimiento de SEO de la web.

Recuerda, la experiencia de usuario es el pilar fundamental, ahí radica el complemento de diseño UI y SEO.

IMAGEN