SEO móvil (SEO + UX).
Recursos y ejemplos

por Arturo Marimón
(Twitter, Linkedin, Web personal)


Esta es la ponencia que di en el Clinic SEO el 19 de Febrero sobre SEO y UX.

Video del Clinic sobre SEO Móvil: SEO + UX

Os incluyo el video del streaming del evento con mi ponencia y la de Dani Armengol, espero que os guste.

Datos sobre tráfico mobile

Venta de smartphones y tablets (mobile)

Mercado del móvil en la red

Vamos a ver algunos datos que pondrán en contexto la importancia de móvil HOY.

La venta de smartphones y tablets en 2011 superó a la de PCs, y en el 2013 ya multiplicaba por 4 la venta de ordenadores en el mundo. Si queréis conocer el futuro de la web, creo que este gráfico pone las cosas en su sitio.

Tráfico móvil en España

Tráfico mobile en España

El tráfico mobile en España tiene una clara tendencia. A final de este año el tráfico móvil igualará el desktop y no solo es una tendencia, es una realidad.

Resoluciones de Android diferentes

La gráfica que tenéis a la derecha es tan esclarecedora como la anterior.

Según este estudio el número de resoluciones diferentes de Android, que se conectaron a internet en 2014, fueron de 18.796 resoluciones diferentes. Un mercado cada vez más fragmentado que requiere de una respuesta única. El Responsive Web Design.

18.796 resoluciones diferentes de Android

Evolución Mobile (2012-2015)

En el 2012 hablé en la ponencia que hice en el Clinic de cómo hacer una buena web responsive. En este post y ponencia trataremos una introducción a la experiencia de usuario y a los Factores de SEO mobile que vamos a tener que trabajar en 2015.

Como si de una cebolla se tratara, pelaremos nuestra estrategia desde el exterior hacia su corazón.

Mobile First

“Mobile No es un problema, es una oportunidad que te obliga a priorizar.“

Twitter Google +

El diseño basado en Mobile First te obliga a simplificar y enfocarte en lo más relevante, a esconder acciones y mostrarlas solo cuando son necesarias.

El Resposive Web Design no es una estrategia para ordenar columnas en un churro largo de contenido y enlaces sin sentido. El resultado está bastante lejos de ser usable. Mobile First te ayuda a centrarte. Todo lo que no entre en un dispositivo móvil nunca debería existir.

Hay que abandonar el Pixel-Perfect y aprender a ceder el control al dispositivo. El diseño ya no se puede imprimir.

Resposive Web Design: el problema de las columnas

Si tu web desktop tiene 1.700 píxels de alto, en móvil tendrá 26.000 pixel de alto. Y sino mirar la web de la Universidad de Notredam en el móvil, y tendréis una imagen clara del problema que comento.

Esto es muy habitual en la home de proyectos grandes, donde los problemas de "todo es prioritario" convergen.

Priorizar es sacrificar y entender que el usuario no necesita tener todos los enlaces de un documento, sólo el contenido necesario para identificar el camino hasta el objetivo.

Este es el orden correcto de trabajo. Vuestro código será más limpio, vuestra velocidad de carga más rápida y el contenido solo contendrá lo que realmente ayude al usuario a tomar la decisión.

Resposive Web Design: Mobile First

¿Cómo puedes evitar los grandes scrolls?

  • Céntrate en el mensaje

    Explica en el mínimo contenido la idea principal de tu servicio o producto.


  • Carga condicional

    Cargar con Ajax la información extra cuando se necesite. Por ejemplo en una ficha de e-commerce de ropa, la información sobre toma de medidas es una información que respondería perfectamente a esta tipología. Pero cuidado con utilizar esta técnica para contenidos relevantes. La carga puede fallar porque la conexión mobile no es estable. Nunca utilizarlo para contenidos que nos impidan la realización de la tarea principal.


  • Descubrimiento progresivo

    El ejemplo más claro es el que utiliza la Wikipedia escondiendo el contenido en apartados desplegables, perfectamente indicados. También a veces lo utilizamos creando contenidos de desplazamiento en horizontal. Pero hay que trabajarlo muy bien para mostrar correctamente la posibilidad de esta acción.

“Los detalles no son los detalles.
Ellos hacen el diseño.“
- Charles Eames

Twitter Google +

Pensar más allá del enlace. El contenido ahora es accionable gracias a los gestos táctiles. Aprovéchalo!!!.

Content First

80% menos de espacio en el movil

Teniendo un 80% menos de espacio, se acabaron las florituras gráficas, los widgets sociales, las columnas inútiles de información irrelevante. No tienes espacio para nada que no sea lo imprescindible.

Tu contenido. No se trata de diseñar tu contenido para móvil, sino de separar el contenido de la forma.

El texto ha dejado de ser parte del diseño gráfico para ser el protagonista. Loren Ipsum, es el contenido en latín que se añade a los diseños para llenar el espacio, sin sentido de contexto, como si fuera un gas inerte. Es una típica estrategia en los procesos de diseño en las agencias. Seguir la dirección contraria. Primero escribís el contenido y luego diseñáis.

Siempre que me preguntan en alguna formación sobre lo largo que debería ser un contenido pongo el ejemplo del reto que le pusieron a Ernest Hemingway. ¿Se puede escribir una historia con 6 palabras? El demostró que eso es posible, escribiendo una gran historia, con solo 6 palabras y cuyo texto completo dice en inglés "For sale: baby shoes, never worn" – Algo como: "Vendo zapatos de bebé, sin usar".

Las palabras tienen una gran fuerza si las utilizas correctamente, y no necesitas muchas para comunicar una idea: busca un profesional que te ayude. No os pagan por palabra, utiliza las necesarias para comunicar la idea.

Cada experiencia crea un efecto halo que afecta a la credibilidad de la marca, cada acción implica una propuesta de valor.

Podéis ver 3 detalles de cómo el New York Times modifica las acciones que te presenta según en qué momento estés de una tarea.

“La anticipación es parte de la creación de grandes experiencias“ - Luke Wroblewski

Twitter Google +

  • Detalle 1: Si entras en una noticia del NYT en versión de tablet podéis ver como el logotipo se oculta al hacer scroll, el menú se hace pequeño y las opciones de login y suscripción desaparecen para dejar espacio a la sección y título del contenido.

  • Detalle 2: Oculta y muestra el contenido relacionado de la noticia, en el momento en que el usuario quiere abandonar la página o busca más información haciendo un scroll rápido hacia arriba.

  • Detalle 3: En su versión para smartphones, el logotipo desaparece completamente, dejando paso a los shares sociales y centrándose en las dos redes principales (Twitter y Facebook). La belleza está en cómo vuelve al menú principal cuando llega al contenido relacionado.

    Esto es anticiparse a la acción. Esto es diseño.

La reducción del espacio te obliga a crear experiencias diferentes a cada momento. Anticiparse a las necesidades de los usuarios es la misma esencia del mobile.

People First

Es imposible escribir un gran contenido si no conoces las motivaciones, objetivos y el contexto de consumo. Como ejemplo de cómo nos afecta el contexto, un video puede ser un gran desencadenante del deseo en un ecommerce, pero en móvil no funciona, porque iOS no lo reproduce, o por su velocidad de carga, porque puede ser lento de consumo, o porque los usuarios no clican en él para no quemar su límite de datos ...

Motivaciones de los usuarios

Las motivaciones de las personas no son sus objetivos, sin un análisis cualitativo es imposible establecer sus auténticas motivaciones. Las motivaciones no cambian en base al dispositivo, pero si sus objetivos.

Una de las cosas que Dani me enseñó, es no juzgar al usuario en base a mis perjuicios sobre quién es y quién no es el usuario.

Me gustó mucho el cambio en que se ha embarcado Facebook, prohibiendo el uso de la palabra usuario. Hablamos de personas y no de usuarios, las personas son más complejas que la simple consecución de tareas de uso. Nombrarlos de manera más empática es un buen comienzo para crear grandes experiencias de usuario.

“Los “usuarios móviles” no existen.
Son las personas“

Twitter Google +

Los analistas, la gente de marketing vienen diciendo que los usuarios móviles actúan de tal manera o de tal otra. Como si fuera personas diferentes. Ven datos y estadísticas y especulan con sus motivaciones.

Eso no es la realidad. El mundo del móvil no es esto. Conocer qué tipo de dispositivo alguien está utilizando o donde está no te dice nada acerca de su intención.

La verdad es que vivimos en un mundo de múltiples pantallas y dispositivos de todos los tamaños, los tamaños no implican tareas de uso, ni contexto de situación. Cuidado con prejuzgar y tomar decisiones basadas en esos perjuicios.


Móvil no es un smartphone
Móvil es un verbo.
No es una cosa, es una acción.


Todas las webs son móvil. No se diseña para un dispositivo, una ubicación, un periodo de tiempo, un uso, ni una persona. Se diseña para todos y todo … a la vez.

Que hay objetivos diferentes claro. También tenemos objetivos diferentes de usuarios que no dependen del dispositivo y no por ello hacemos diferentes sites.

Creando un segmento avanzado en Google Analytics, observando Flujos de Comportamiento, mirando las queries mobile en Google Webmaster Tools y más herramientas de grabación de sesiones como Inspectlect nos ayudarán mucho a entender esos objetivos y comportamientos y tenerlos en cuenta en el diseño del site. Crear tareas que nuestro diseño ha de resolver.

SUX - Some User Experience

El UX es eso UX. Si sólo trabajamos para algunos usuarios, habría que llamarlo SUX - Some User Experience, como bien dijo Billy Gregory

Nos mentimos a nosotros mismos para justificar no tener que repensar nuestros sites, nuestros productos o servicios. Pero es un error. Siempre tenemos que volver a empezar, desde cero.

Estadísticas sobre contexto de uso por parte de Google. Si entendemos los datos que Google maneja entenderemos las decisiones que toma, y nos ayudará adelantarnos a los cambios de algoritmo.

Contexto de uso mobile

80% de personas ha utilizado sus móviles en casa en los últimos 7 días. En restaurantes, por la calle, en transporte público… están entre un 50 y el 35%. ¿Qué nos quiere decir?, que la utilización del móvil se produce dónde estás y que lo que determina el tiempo de uso es el tiempo que pasas en ese espacio.

Objetivos de las consulta

SEO Mobile, más allá del SEO local

Los objetivos de las consultas de nuestros clientes mayoritariamente buscan información de contacto. Lo que entraría dentro de las atribuciones de una disciplina como el SEO Local.

Según Google el 89% de las consultas en smartphones buscan información local.

¿Eso significa que tenemos que tener un diseño diferente para la versión mobile que dé respuesta a esas necesidades? O que por el contrario, esto ¿debería formar parte ya de nuestro diseño desktop? Yo soy partidario de tener un único diseño que dé respuesta a todas las necesidades. Y si el gobierno de UK (gov.uk) puede hacerlo con sus 11,3 millones de páginas y usuarios con necesidades tan diferentes, cualquiera puede hacerlo.

¿Cómo identificar estas consultas?

Accedéis a Google Webmaster Tools > Tráfico de búsqueda > Consultas de búsqueda y filtráis por mobile para ver las queries de los usuarios desde dispositivos mobile. Estas determinan objetivos que vuestro diseño ha de solventar.

Consultas de búsqueda filtradas por mobile

En Google Analytics podéis filtrar por el segmento avanzado "Tráfico de móviles" y luego trabajar con 2 secciones que os darán bastante información. Estas son Páginas de destino y Flujo del comportamiento. Identificar que páginas hay que trabajar a nivel de usabilidad.

Flujo del comportamiento mobile

Obstáculo para la compra móvil al cambio de algortimo de Google

Si nos fijamos en los obstáculos que nombran las personas de la estadística de Google veremos el porqué de los últimos cambios de algortimo.

Obstáculo para la compra móvil al cambio de algortimo de Google
  1. No puede confiar en la seguridad al poner la tarjeta de crédito.
    Google lanza como Factor SEO el disponer de un servidor seguro https en todo el site.

  2. Tarda mucho tiempo en abrir la página web.
    Factor SEO: La velocidad de carga es y va a ser más y más importante en la optimización de sites para móvil.

  3. No está acostumbrado a los smartphones / pantalla demasiado pequeña.
    Factor SEO: Usabilidad mínima en dispositivos móvil.

    La usabilidad en móvil se vuelve accesibilidad. No es que la experiencia de usuario sea mala, es que impide lo mínimo, que es realizar la acción principal de un ecommerce, comprar el producto o de un site, que es leer el contenido.

¿Por qué la obsesión de Google por los usuarios debería ser la nuestra?

Por dos motivos claros:

  1. Porque aprovecharás más tu energía si la enfocas en entender las motivaciones de Google y no siguiendo la sombra de los datos de su algortimo.

  2. Porque Google está centrado en satisfacer las necesidades de las personas, por encima de ti. O estás con él o contra él.

SEO móvil

Estos son los últimos cambios anunciados por Google y que afectan al SEO para móvil, desde el 2011 al 2015.

Tan importante como los cambios en sí, hay que fijarse en como la frecuencia de estos aumenta geométricamente en base a la importancia que le da Google con el paso de los años.

A nivel SEO para móvil los 5 factores que Google mide a nivel de usabilidad, y que pronto formarán parte del algoritmo son:

  1. Tamaño de fuente de letras

    Aunque Google recomiende tamaño de fuente de letras basado en 16px, la mejor solución sería trabajar el tamaño de fuente en "em" o "rem", que son tamaños relativos al dispositivo no al pixel.

  2. Ventana gráfica adaptada a móviles

    La ventana gráfica debe adaptarse al tamaño del dispositivo, para trabajar con diferentes anchos, lo que sería algo así:

    <meta name=viewport content="width=device-width, initial-scale=1">

  3. El contenido es más ancho que la pantalla

    Es habitual en sites donde no se trabaja correctamente el Mobile First que aparezca contenidos, imágenes o videos que sobresalgan del tamaño de la pantalla. Es algo que se ha de cuidar. En Google Webmaster Tools (Tráfico de búsqueda > Usabilidad móvil > El contenido no se adapta a la ventana gráfica) teneis un informe sobre todos las páginas que tienen ese problema.

  4. Los enlaces están demasiado juntos

    En este vídeo podeis ver cómo funciona en Chrome y que desarrolló para intentar solventarlo, y la problemática que tiene en determinar sobre que enlace estás clicando. Los clics incorrectos son una pésima experiencia de uso.

    Errores de click según tamaño del área de click.

    Microsoft lo explica muy bien en su guía de diseño para entornos touch.

    Como norma que tendríais que aplicar para saber cuál debería ser el tamaño de un botón/link: A mayor uso de la acción, más grande debería ser el área de click.

  5. Velocidad de carga mobile

    El 40% de los usuarios abandona una web si tarda más de 3 segundos en cargar. En mobile hay una latencia de 1 segundo, lo que hace la navegación de por si más lenta. Nunca ha tenido más sentido trabajar correctamente la velocidad de carga y optimizar el código para agilizarla. Imágenes, javascript y números de elementos DOM son la clave de la velocidad en dispositivos mobile.

    El Responsive Web Design, bien trabajado a nivel de código, es la clave para no perder segundos en la redirección hacia un contenido en otra url móvil y es por eso que Google lo recomienda.

    Para poder medir la velocidad de carga y obtener recomendaciones de mejora os recomiendo 2 herramientas: Page Speed, la herramienta de Google y WebPageTest, donde podréis testear vuestros sites con bots mobile y conexiones 3G y 2G.

Mitos y leyendas UX mobile

En este caso vamos a abordar 2 mitos que seguros que habéis leído por algún blog.

Las personas no hacen Scroll: El contenido importante está por encima del fold

Scroll de 50 millones de sesiones de usuarios

En contra de lo que Nielsen afirma en 2015 en este post, sobre el estudio que realizó en 2010 con 50mil sesiones de usuario, de que la parte más visible de un contenido está por encima del fold y que los usuarios no hacen scroll, el siguiente estudio que os traigo trae luz sobre lo equivocado que está Nielsen al sostener tal afirmación.

Según el estudio de chartbeat.com realizado sobre 50 millones de sesiones, el 70% de los usuarios hacen scroll antes de que termine de cargar la página, lo que significa que ninguna parte de la web es vista por el 100% de los usuarios.

¿Por qué?. Porque en la cabecera de vuestros sites está vuestro logotipo y eso sólo os interesa a vosotros. Los usuarios buscan la información, no la publicidad.

El área más vista de la página es sobre los 550 píxeles, con poco más del 80% de audiencia.

La parte del estudio del engagement es más reveladora aún. Los píxeles en la parte superior de la página están a la vista la menor cantidad de tiempo - unos 4 segundos - y la cantidad de tiempo se eleva a medida que bajamos por la web hasta un pico aproximadamente entre los 1.200 y 1.500 píxeles.

No hay que obsesionarse por donde situamos el contenido, sino por qué contenido creamos. Lo que viene a demostrar el estudio es que el usuario busca contenidos de calidad, saltándose lo superfluo y publicitario y pasa más tiempo en esa zona donde lo encuentra.

La publicidad no puede ser responsive

El mundo de la publidad se adapta lento a los cambios, pero hay proyectos como TheGuardian, que acaban de crear su site RWD, y ofrecen publicidades adaptadas a esta nueva realidad multidispositivo.

Os dejo el link al post donde publican estos dos tipos de banners y cómo se adaptan a las diferentes resoluciones sin interrumpir la lectura. Su web es un muy buen ejemplo de lo que se puede conseguir replanteando el trabajo desde inicio.



Y hasta aquí todo, espero que os haya parecido interesante.
Si es así, compártelo o enlázalo. Gracias!!!!

Twitter Google +