Este post reúne algunas de mis pasiones: la Magia, el desarrollo web y la innovación. Si existiera un Klout de nivel de “frikismo”, sin duda alguna, hoy puntuaría bastante alto.

Existen dos reglas que todos los magos conocen:

  1. Los espectadores miran dónde mira el mago
  2. El movimiento grande esconde el movimiento pequeño

Estos dos principios ayudan a un mago a controlar la atención del público y llevar a cabo sus juegos sin ser descubierto.

Si quiero hacer desaparecer una moneda puedo usar técnicas de ilusionismo y misdirection (control de la atención) o bien gritar: ¡Mira, un elefante hablando con iPhone! y esconder la moneda en el bolsillo.

En ambos casos el resultado será el mismo, pero la reacción despertada no será la misma. Todos queremos ser engañados, pero si es posible con un poco de clase.

¿Y qué tiene que ver esto con el jQuery? Paciencia…

Cuando un espectador (en adelante el Usuario) accede a una página web espera también ser entretenido, seducido, engatusado o cariñosamente engañado.

Para ello, disciplinas como la redacción, el diseño, la usabilidad, la programación, etc. han estado conspirando los últimos años para controlar los sentidos y la atención de los usuarios. Para hacerles ver y para llevarles a hacer lo que su web buscaba, ya sea comprar un libro, ver un anuncio o subir una foto. No se trata de una misión muy distinta a la de un mago.

Por un lado la tecnología, como por ejemplo los bloqueadores de pop-ups, y por otro el propio usuario han aprendido a omitir impactos no deseados y la lucha por la atención es constante. Se han refinado la técnicas, se han mejorado los contenidos, han aparecido las redes sociales, pero aún así y como dice Pau Garcia-Milà, está todo por hacer. Afortunadamente

La web es un escenario

Tomamos la web como un escenario y la carga de una página como la puesta en escena. Si alcanzamos unos tiempos de carga cercanos a cero (una de las recientes obsesiones de Google) estaremos exponiendo al usuario a muchos estímulos simultáneos y forzándole a tomar muchas decisiones en muy poco tiempo.

Las webs con mayores índices de conversión han evolucionado hacia: páginas con pocos mensajes y altamente jerarquizados, landing-pages de producto, copys claro, concisos y vendedores, botones de llamada a la acción, etc. Todas estas técnicas han mejorado las cifras de conversión de los distintos objetivos de las webs que las aplican, pero… ¿Se puede hacer mejor?, ¿se puede hacer algo más?.

La hipótesis

Se nos ha ocurrido probar lo siguiente: si los elementos de una página no se cargan/muestran de forma simultánea, sino siguiendo una secuencia dada (según nuestros objetivos) mediante el uso de animaciones, ¿podremos conseguir una mejor conversión?

Por lo que hemos visto es un recurso usado por lo general en los elementos publicitarios de la web, pero en pocas ocasiones se aplica a los contenidos ni para mejorar la usabilidad ni la conversión.

Si cargamos todos los elementos de una página al mismo tiempo hay un sólo “movimiento grande” que el usuario tiene que procesar. Si rompemos la carga en 2 o 3 pasos y dosificamos a voluntad los impactos/mensajes conseguiremos:

  1. que el usuario vea lo que queremos que vea,
  2. mire dónde queremos que mire,
  3. y que lo haga cuando queremos que lo haga

De esto modo la probabilidad de influir en su conducta será mayor y como consecuencia mejorar la conversión de nuestras páginas mejorará.

Otra aplicación podría ser que la primera vez que se cargue una página se muestren las partes principales del site una tras otra (Ej. menu, sidebar y cuerpo de página).

Por motivos parecidos realizamos las presentaciones de PowerPoint con animaciones de cada parte importante de la diapositiva. Si los 3-4 mensajes se van mostrando de forma consecutiva y acumulativa la comprensión es mejor que mostrando todo el contenido de una vez.

El caso

Desde QR-Planet estamos organizando la 2a partida de QR-Kill y estabamos realizando algunos ajustes en la web para animar a los usuarios a dar difusión a nuestro proyecto mediante las redes sociales. Obviamente hemos puesto los botones para compartir, twiteamos, enviamos info a blogs, etc.

Hemos realizado una pequeña prueba en este site y la “DIV” que contiene los “botones sociales” aparece con un delay de 2500 ms. y con un fadeIn de jQuery.


La aplicación en este caso es muy sencilla pero creemos que se trata de un recurso interesante cuando se trate de webs de alto tráfico, con objetivos específicos y mesurables.

Para verificar esta hipótesis estamos experimentando con tests A/B y eventos asociados a botones sociales. Si las página en las que la DIV aparece más tarde genera más interacción social será una señal de que puede tener sentido.

En cualquier caso los resultados de este experimento no serán concluyentes debido al volumen de visitas del site y el tipo de proyecto, pero animamos a los profesionales de la analítica web y la conversión a experimentar en esta línea y contarnos los resultados.

Bonus track: A todos los/as cracks de la usabilidad y persuabilidad que leáis este post os recomiendo que leáis: “Los cinco puntos mágicos” de Juan Tamariz. Aprenderéis algo de magia y como dice Pere os hará pensar.