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!!