Diseño web optimizado para UX siguiendo las reglas de google

Mailrelay , Invited guest @ Mailrelay

El UX Design (User Experience Design) o “Diseño de Experiencia de Usuario” es una metodología de diseño web que tiene por objetivo la creación de productos que resuelvan necesidades concretas de los usuarios.

Actualmente los diseñadores web que tienen interés en la experiencia del usuario se ofrecen como profesionales de diseño UX.

Desde unos años hasta hoy, la creación de páginas web como modelo de negocio se ha incrementado considerablemente, y esto repercute en la necesidad creciente de encontrar desarrolladores o diseñadores web.

Incluso existen CMS específicos para crear webs que están optimizadas exclusivamente para obtener mejores ratios de clics en anuncios de PPC o Adsense.

Hoy en día en el mundo SEO se habla mucho de la calidad de los contenidos, de la calidad de las imágenes, de la calidad técnica de la web y de la calidad o relevancia global de un sitio web en general.

· Aprovecho para mostrar aquí una conversación de Gary Illyes

De hace solo unos dias intentando explicar como miden ellos la relevancia de una web.

La pregunta era la siguiente:

¿cómo saber si la página proporciona valor o es original o es exhaustiva o intuitiva?

La respuesta de Gary fué esta:

La respuesta de Gary fué esta:

Otra de las preguntas que le realizaron en esta conversación a Gary, fué sobre la optimización de imágenes.

Pregunta:

¿Hay algún cambio importante en la búsqueda de imágenes este año desde un punto de vista transaccional o educativo?

Respuesta:

Simplemente sabemos que la búsqueda de medios es demasiado ignorada por lo que es capaz de hacer para los editores, por lo que le estamos lanzando más ingenieros y más divulgación.

¿Hay algún cambio importante en la búsqueda de imágenes este año desde un punto de vista transaccional o educativo?

Algunas veces el silencio o este tipo de respuestas nos dan pistas de dónde es posible que google esté realizando un mayor esfuerzo dentro de su algoritmo central.

Y otra pregunta relacionada con el diseño web y la optimización de los archivos multimedia fué esta:

Pregunta:

¿Hay algo que la mayoría de los SEO tienden a pasar por alto / no prestar atención?

Respuesta:

La búsqueda de imágenes y videos de Google a menudo se pasa por alto, pero tienen un potencial enorme.

Por esta razón creo que realizar un análisis en profundidad de como google rastrea el diseño de una página web para comprenderlo mejor, puede ser de mucha utilidad.

Hoy quiero explicar una patente de google que profundiza en los documentos que aparecen dentro de una página web, incluyendo el diseño, el texto, las imágenes y los posibles anuncios.

Creo que puede ser de interés conocer como ve y organiza el contenido de una página un motor de búsqueda y a raiz de la información recogida, otorgará un ranking orgánico.

· El diseño UX siguiendo las reglas de google

En agosto de 2017 Cinthya Yukari Urasaki, diseñadora de UX Design en Google dió una conferencia sobre el diseño UX y como el motor de búsqueda lo utiliza en diversos sectores como la investigación, la educación y en los productos de innovación como la realidad virtual.

Yukari afirmó que la clave del UX Design no sólo es tener en mente a los usuarios, sino involucrarlos en el proceso recibiendo su información y feedback.

Cinthya Yukari Urasaki

· El diseño UX llega al buscador

Google Discover es una nueva forma de mostrar el contenido, más original, creativo y atractivo para los usuarios. Una adaptación más a mejorar la experiencia de usuario dentro del propio buscador.

Gracias a la Inteligencia Artificial el motor de búsqueda es capaz de permitir a los usuarios explorar mejor sus intereses prediciendo lo que les interesa .

Discover incluirá más imágenes y contenido visual así que el diseño web proporcionando imágenes de alta calidad y contenido en vídeo puede marcar una buena diferencia.

Discover también proporciona contenido de hoja perenne que es relevante para lo que esté buscando el usuario, por eso es necesario trabajar la autoridad y relevancia de la marca.

· Diferenciación de las distintas regiones de una página

Esta patente de google determina las regiones semánticamente distintas dentro de de un documento ( página web ).

La patente muestra como Google puede realizar una representación ( UX ) de una página web cuando rastrea la página para determinar «la posición y el tamaño aproximado de cada elemento del documento» para identificar semánticamente distintas partes de un documento.

Estas partes semánticas relacionadas son las secciones representadas a nivel de diseño, texto, títulos, menú o footer.

Diferenciación de las distintas regiones de una página

Cada una de estas secciones pueden desempeñar un papel diferente para el motor de búsqueda, según donde se encuentren y el contenido que tengan se le otorgará un peso diferente.

La patente lo expone de la siguiente manera:
Un documento que se muestra en un monitor de computadora generalmente comprende varias regiones semánticamente distintas, como un encabezado, un pie de página o una barra lateral, cada región incluye uno o más elementos semánticos como párrafos de texto, imágenes, bloques de anuncios o enlaces de navegación, etc.

Un motor de búsqueda necesita un método para dividir un documento estructurado para poder traducir el documento en una estructura de datos jerárquica, de acuerdo con los elementos sintácticos definidos en el propio documento (página web )…

Ejemplo de página:

En la imagen de ejemplo aparece una página web con varias secciones o bloques dentro de ella bien diferenciados.

Por un lado esta el bloque de la cabecera que corresponde al logo y el menú principal.

Por otro lado aparece en el lateral izquierdo un bloque de enlaces que pueden ser enlaces de navegación a diferentes categorías.

Luego aparece el bloque principal, situado en el centro y donde hay unas columnas de imagen y texto debajo de ellas.

En el lateral derecho aparecen bloques de anuncios o publicidad que están separados verticalmente.

Y por último aparece un bloque de enlaces en el pie de página.

Por tanto, esta página pertenece a un arbol ( Raiz ), y es una rama que consta de 5 trozos cada uno de los cuales corresponde a una región semánticamente distinta.

Después de esto, cada uno de los “bloques” se etiquetan y se les da un atributo incluyendo otros parámetros como en el caso del logo puede ser el ancho y altura de la imagen en píxeles.

Al dividir una página en bloques o secciones, un motor de búsqueda puede determinar con mayor precisión la relevancia entre la página web y un término de consulta de búsqueda en función de qué región semánticamente distinta contiene ese término de consulta.

Por ejemplo:

Si el término de consulta del usuario se encuentra en los bloques de imagen centrales, a la página web de ejemplo generalmente se le debe otorgar una puntuación más alta que otra página web en la que el término de consulta se encuentra en uno de los bloques de publicidad.

Aún así a veces es dificil para un motor de búsqueda determinar la jerarquía de una página web a través del HTML.

Por esta razón, tener una estructura de datos jerárquica a nivel de diseño web semántico es interesante porque puede ser utilizada por un motor de búsqueda para mejorar los resultados de búsqueda.

El diseño semántico determina diferentes enlaces que se encuentran en diferentes regiones semánticamente distintas, a los cuales se les pueden asignar diferentes pesos.

diseño semántico

Por lo tanto, un enlace de un documento a otro puede considerarse de acuerdo con la región en la que se encuentra el enlace, para determinar mejor la popularidad del documento web.

De manera similar, un módulo de análisis de texto puede asignar pesos diferentes a textos idénticos cuando ese texto se encuentra en diferentes regiones semánticas de un documento.

Siguiendo con el diseño de la página de ejemplo, si un término de consulta encuentra su coincidencia en el bloque de imagen central en lugar del bloque de pie de página, a esta página web se le debe dar una puntuación de consulta más alta que si el término se encontrara en el pie de página.

La razón es que el contenido que coincide con la consulta se encuentra en un lugar que suele coincidir con el objetivo de un usuario.

Esto nos puede dar una buena pista para diseñar la página para ofrecer una mejor experiencia usuario.

Vídeo explicativo

Si lo prefieres puedes ver un vídeo explicando este concepto.

·  Las imágenes dentro de una página

En general, el texto más cercano a una imagen es más relevante para la imagen que el texto que se encuentra más alejado de la imagen.

El motor de búsqueda es capaz de identificar el texto que está cerca de una imagen y, por lo tanto, crear un título para la imagen, que posteriormente se puede usar en otras aplicaciones como la búsqueda de imágenes.

Una buena idea puede ser otorgar un fragmento de texto representativo de la imagen.

· Relación semántica entre imágenes, texto y publicidad

Relación semántica entre imágenes, texto y publicidad

La publicidad dentro de un documento web puede formar parte del propio sitio en general, como lo puede hacer un medio de comunicación o un blog de noticias que utiliza Adsense para monetizarse.

La semántica entre en contenido de una página y los anuncios que aparecen en ella, puede determinar también su ranking orgánico.

Es probable que las webs que aparecen en los resultados de búsqueda donde las consultas están relacionadas con el contenido principal de esas páginas, proporcionen una experiencia de usuario mejor que las páginas que aparecen en resultados en los que el ruido (publicidad) en la página está relacionado con la consulta buscada por alguien.

Tanto google como Microsoft tienen patentes que tratan de segmentar una página en bloques con el objetivo de determinar la importancia de cada bloque.

En alguna ocasión me he encontrado con una página web que utiliza Asense que ha perdido mucho tráfico orgánico de forma constante.

Muchas veces a este tipo de problemas se les asigna la etiqueta “ha sido por una nueva actualización de google”, sin embargo, no se sabe muy bien el por qué.

En esta ocasión la web de noticias no había incurrido en malas prácticas de SEO, y a simple vista cumplía con todos los requerimientos de google, sin embargo, seguía y seguía perdiendo tráfico sin saber por qué.

Después de analizarlo todo, nos dimos cuenta de que los anuncios de Adsense que aparecían en el bloque central ( y más importante ) de la web no tenían ninguna relación con la temática de la página.

Decidimos realizar los ajustes necesarios para que los Ads fuesen lo más parecidos a la temática que ofrecía la web y el resultado fué que en 8 semanas la página recuperó el 80% del tráfico orgánico perdido.

Este tipo de detalles son importantes cuando se intenta monetizar una página con Adsense.

Como siempre, hay una fórmula para determinar la relevancia de cada uno de los bloques del diseño de una página web.

Aquí voy a compartir la fórmula de Microsoft que utiliza a través de un proyecto llamado VIPS: algoritmo de segmentación de página basado en VISION.

algoritmo de segmentación de página basado en VISION.

· Herramienta de UX y SEO

Es posible que necesitemos algo de ayuda para determinar la mejor opción de diseño basada en la experiencia de usuario.

Dareboost es una herramienta de SEO para análisis de rendimiento de sitios web y también realiza mediciones relacionadas con la experiencia del usuario (UX), como Start Render, Visually Complete y Speed Index.

Dareboost puede ayudar en este examen técnico de UX.

· Conclusión

El diseño UX está basado en mejorar la experiencia de usuario, pero también debe estar enfocado en que un motor de búsqueda comprenda mejor la estructura y jerarquía de ese diseño.

Los motores de búsqueda seccionan las páginas en “bloques” para ayudarles a determinan donde se encuentra la información que coincide con la consulta del usuario.

Un bloque ubicado en el centro de una página puede considerarse más importante que otro bloque en la parte inferior de una página.

Las imágenes también deben estar relacionadas con el contenido principal y el texto alrededor de ellas es importante, así como tamaño y número.

La publicidad dentro de la página también obtiene un peso o puntaje que puede afectar más o menos al ranking de esta página.

El análisis de estas patentes puede darnos buenas pistas de como podemos organizar el contenido dentro de una página a nivel de diseño y obtener un mejor puntaje en los resultados de búsqueda orgánicos.

Espero que esta información te sea de utilidad para trabajar mejor el diseño de tu web.

Ginés Mayol

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *