5-tecnicas-para-atraer-la-atencion-de-los-usuarios

Nuestros Expertos en CRO nos desvelan las 5 Técnicas para Captar la Atención de los Usuarios en tu Página Web. Así que, si quieres que tu site sea el centro de todas las miradas, presta mucha atención a nuestro post de hoy. ¡Empezamos!

Una de las claves para Convertir a nuestros usuarios es centrar su atención en aquello que nos interesa que vean, por ejemplo, un CTA, un descuento, una promoción, una categoría, un producto…etc. Como te hemos dicho aproximadamente un millón de veces, en Internet, el usuario no lee secuencialmente el contenido de una página, sino que lo escanea. Es decir, va saltando de un punto de atención a otro  sin profundizar en el contenido. Y únicamente detiene su ritmo de escaneo, cuando detecta algo  que verdaderamente le interesa (un titular, una imagen, un vídeo, etc.). En ese momento es cuando se para a procesar la información relacionada.

Entendiendo esta forma de interacción entre nuestro usuario y nuestro contenido, tenemos La Fórmula Secreta para poder captar todas las miradas y dirigir la atención de nuestro público hacia los elementos más importantes de nuestra web, aquellos que nos interesa que asimile por encima de cualquier otro aspecto.

Nuestra tarea es, por tanto:

Destacar los elementos que quiero que mi Usuario vea 

 

A continuación vamos a explicar cómo se logra esto a partir de 5 Técnicas Básicas que Nuestros Expertos en conversión aplican a todos sus diseños.

1. Tamaño

En Internet el Tamaño Sí Importa. Evidentemente aumentar el tamaño o proporción de un elemento web es una forma eficaz y muy muy sencilla de resaltarlo frente al resto de elementos que “conviven” con él en la página.

Si te fijas, este método de destacar elementos web, así como el resto de métodos que te explicaremos a continuación, siempre se basan en  las reglas de percepción óptica del usuario. Las cuales, se aprovechan para aplicarlas al diseño web y conseguir que éste sea PERSUASIVO.

La siguiente imagen es un ejemplo para que veas, claramente y por tí mismo, cómo un elemento, efectivamente destaca por su tamaño.

destacar-por-tamano

Sabemos que ahora mismo estás pensando “¿Pero por qué ha utilizado esta gente caracoles verdes para ejemplificar las 5 Técnicas Básicas para Captar la Atención de un Usuario?” Emm… si somos sinceros, te diremos que ni siquiera nosotros sabemos el porqué de los caracoles. Pero siempre es más divertido utilizar estos simpáticos animalitos antes que insípidos círculos verdes, ¿No crees? Aunque, por otra parte, quizá se trate de un truco Mnemotécnico para que te aprendas estos principios básicos de la conversión web de una vez por todas… quién sabe… 🙂

Sea como sea, aquí te mostramos una aplicación práctica del tema que estamos tratando. Fíjate en como  han utilizado el recurso del tamaño para destacar el titular principal de esta cabecera, por encima del resto de elementos.

Generalmente esto es una práctica totalmente extendida en el mundo del diseño web. De hecho, seguro que tú has visto un montón de ejemplos como este.

ejemplo-tamano

Vale ya hemos destacado nuestro elemento ¿Y ahora qué?

¡Es evidente! Debemos sacarle el máximo provecho. Ahora que sabemos que nuestro titular es el elemento que más destaca de nuestra cabecera debemos exprimir su relevancia para orientarla eficazmente hacia la conversión. De nada nos sirve un titular a escala 1:1 si éste no es capaz de mover a la gente a seguir ojeando el resto de contenido de nuestra web y acabe comprandonos, ¿no?

Entonces, lo que deberemos hacer es destinar parte de nuestro esfuerzo a acabar de perfilar nuestro titular con un toque de persuasión al más puro estilo Hollywood. Para ello aquí te dejamos un interesantísimo artículo en el que te desvelamos 3 Enfoques para un Titular web de 5 Estrellas ¡No te lo pierdas!

 

2.  Contraste de Color

La segunda técnica que vamos a explicarte hoy  para destacar elementos de tu web de forma correcta es la técnica del color de contraste. Como puedes apreciar, al igual que la técnica del Tamaño, éste es un proceso muy muy fácil de conseguir. Aún así, todavía hay muchísima gente que no lo emplea adecuadamente.

Como su nombre indica, “Un color de contraste” es UN ÚNICO COLOR cuya función es romper la aparente monotonía visual de la página web, haciendo que, de forma casi inconsciente, la mirada de nuestro usuario se dirija al punto del que emana ese cromatismo diferenciado.

Veamoslo plasmado de forma sencilla con este ejemplo:detacar-por-color

Si te fijas, el caracol de color azul destaca de forma simple y elegante sobre el resto. Es un efecto sutil cuyo éxito se alcanza al encontrar un color que, a pesar de romper con el tono general (el verde), no llega a descombinar.

Muchas páginas web llevan esta técnica del color de contraste hasta el extremo, convirtiendo sus webs en verdaderos circos ambulantes llenos de colores xillones y estridentes que lejos de destacar un elemento complican muchísimo la lectura y comprensión de los contenidos de la página.

Aquí tienes un ejemplo de cómo hacerlo:

ejemplo-destacar-color

 

Si te fijas, en esta plantilla han utilizado como color de contraste el rojo, que permite la inmediata visualización de los elementos que engloba (como el formulario de suscripción) y además no produce ningún tipo de discordancia con el tono general de la página.

La técnica del color de contraste se utiliza sobretodo en una de las secciones más importantes de las páginas web; la sección del “pricing” o la parrilla de precios.

Seguro que más de una vez te has encontrado con un diseño similar a este ¿verdad?

ejemplo-destacar-color-pricing

Generalmente se cambia el color de fondo de un plan específico de precios para marcarlo como recomendado o preferido. En ocasiones dicho plan no tiene ningún beneficio adicional para los usuarios pero el simple hecho de destacarlo como tal siembra una semillita en el inconsciente de los visitantes y en su decisión de compra.

 

3.  Aislamiento

Dentro de la relativa sencillez de estas técnicas para Captar la Atención de un Usuario web, el aislamiento es quizá una de las complejas ya que implica un cierto cambio de estructuración de elementos.

Como vemos en el ejemplo, el caracol de la derecha, destaca, no por su diferenciación en cuanto a tamaño o color, sino simplemente por que está aislado del resto de elementos, con lo que tiene menos competencia a la hora de “hacerse ver”.

Se puede decir que este elemento rompe el esquema organizativo inicial y precisamente por eso se hace más visible.

Destacar-aislamiento

Ahora vamos a mostrarte un ejemplo de ese aislamiento aplicado a una página web real. En este caso, encontramos una nueva sección de “pricing” o de parrilla de ofertas en la que el pack de contenidos recomendado se ha extraído de la parrilla normal y se ha aislado a la derecha.

Suponemos que, en este caso, el color del elementos así como la indicación de “recomendado” o el marco que lo encuadra, ayudan a destacarlo de forma más pronunciada pero, en esencia,  la idea del aislamiento queda reflejada claramente.

 

ejemplo-destacar-aislamiento

4.  Señalización

En este tipo de técnica entran en juego varias formas de “señalización” para un elemento concreto. Habitualmente se ha entendido que las flechas y demás indicativos del estilo eran una de las formas estrella para hacer destacar un elemento.

Veámoslo en la siguiente imagen:

destacar-senalizacion

Como puedes comprobar, el caracol que es señalado por la pequeña flecha verde es el que destaca frente a los demás. Pero la función de esta señalización no es solamente hacerlo resaltar; secundariamente esta flecha también le atribuye otra peculiaridad.

Vamos a ver si a ti también te pasa

Vuelve a mirar el caracol que indica la flecha ¿No tienes la sensación de que dicha indicación te está animando a pulsarlo, arrastrarlo, pasar el puntero sobre él…? A muchos usuarios (no decimos que a todos, pero sí a una cantidad importante) les ocurre esto.

Las flechas u otra indicación similar imprime una sensación de avance por lo que son geniales para dirigir la navegación de un usuario por una página web y animarle a hacer click sobre un elemento o marcarle el camino a seguir. Fíjate:

 

ejemplo-destacar-senalizacion

 

Actualmente el uso de las flechas se ha ido sustituyento por efectos más sutiles como lo son por ejemplo,  las miradas. Sí, has leído bien: las miradas.

Emplear la fotografía de una persona que mira hacia un punto concreto de nuestra página nos asegura que, siguiendo su ejemplo, el usuario (de forma instintiva) también lo hará. Éste es un efecto que se emplea para dar un carácter más ligero a la página ahorrándonos el empleo de constantes iconos y flechas.

Con esta forma de señalización o indicación, matamos dos pájaros de un tiro: incluímos un toque de personalización en nuestro site y además redirigimos la atención de nuestro visitantes hacia una zona concreta del mismo.

Compruébalo por ti mismo:

ejemplo-destacar-senalizacion-2

 

 

Pero no solo funciona con imágenes de personas, fíjate en cómo este simpático robot mira el mensaje que se coloca sobre su cabeza. Encantador, ¿verdad?

 

ejemplo-destacar-senalizacion-3

5.  Ubicación centrada

La técnica de la ubicación se confunde habitualmente con la del aislamiento. Sin embargo, aunque parecidas, el efecto no es el mismo.

En el caso de la técnica del aislamiento, el objetivo es que un elemento concreto se “evada” del resto de contenido. Cuando hablamos de la ubicación, el elemento destacado no está aislado, ni mucho menos. Digamos que representa el centro de atención de la página y el resto de elementos lo apoyan y amparan, trabajando conjuntamente para reforzar más si cabe su importancia.

Fíjate en el ejemplo:

destacar-posicion

Si observas, el caracol que se encuentra en el centro de este esquema, destaca por su ubicación, de igual forma que la fotografía de nuestro siguiente protagonista lo hace en este ejemplo. Mira:

ejemplo-destacar-posicion

 

Esta plantilla forma parte del portfolio digital de este chico, Nick Rivers, y para destacar su principal elemento de interés (el propio muchacho) utiliza la técnica de la ubicación.

Como ves, coloca una fotografía a gran escala de la persona sobre la que se centra todo el contenido de la página y secundariamente va reforzando su imagen gracias al resto de elementos: textos, botones, secciones, etc. Todo gira en torno a él y eso es exactamente lo que un portfolio debe hacer.

 

Y hasta aquí nuestro post de hoy. Si te ha parecido interesante, déjanos un comentario. Si no te lo ha parecido, déjanoslo también (pero ¡ojo! de forma suave, somos muy sensibles, jeeje). Y si no quieres dejarnos ningún comentario (porque eres demasiado vago), compártelo al menos en redes sociales. Son solo dos clicks, lo prometemos.

Nos vemos en el próximo post!!