what is unbounce
CATEGORÍAS

Los 23 Principios de Diseño para captar la Atención, explicados por portadas discos


En la era de las distracciones digitales, ¿cómo puedes conseguir que la gente te preste atención?

Puedes shockear a la gente. Puedes provocarla. O, como dice Oli Gardner en esta guía sobre los 23 principios del Diseño Orientado a la Atención, puedes incluir ciertas pistas visuales que guíen a los visitantes a alcanzar el objetivo de tu página.

Estas pistas o elementos visuales están íntimamente relacionados con nuestro día a día que realmente existen en objetos de nuestro alrededor.

Puedes encontrarlos en los lugares más insospechados: como en mi colección de discos, por ejemplo.

Aunque no te lo creas, justo después de lanzar juntos un ebook con los 23 principios que hemos detectado en las landing pages que convierten mejor, Oli y yo nos pusimos como locos buscar estos 23 principios de diseño en las portadas. Y solo por placer.

Record player detail http://barnimages.com/

Entonces, ¿cuáles son los 23 Principios del Diseño Orientado a la Atención?

Te recomiendo que le eches un vistazo a la guía o que directamente te leas este post para tener una primera aproximación, directamente sacada de las portadas de mis colección de discos.

1. Dirección: Saturday Night Fever – BSO

Este fue uno de los primeros álbumes que compre. Uno de esos que sieeeeempre aparecen ofertados en cientos de tiendas de discos. Pero no por eso, y bajo mi humilde opinión, deja de ser el mejor disco jamás grabado de la historia.

La imagen de John Travolta señalando a los Bee Gees es una de las poses más reconocidas de la historia del cine, y no podría demostrar mejor el principio de DIRECCIÓN.

soundtrack-saturday-night-fever

Hasta John Travolta sabe cuán importantes son los Bee Gees. Fuente de la Imagen

Las pistas de dirección son elementos visuales utilizados para dirigir la atención hacia áreas importantes de tu landing page, especialmente los call to action. Pueden ser desde flechas hasta personas señalando o mirando hacia tu CTA, siempre dirigiendo la mirada de los visitantes hacia ahí.

La dirección, valga la redundancia, es un muy buen modo de hacer que la gente mire en la buena… dirección.

Y si necesitas poner esto en práctica, vas a necesitas un editor de páginas que te haga la vida fácil. ¿Cierto?

Movimiento: The Civil Wars – The Civil Wars

Este disco de Civil Wars, lanzado justo antes de que se separasen, es una pieza maestra. El duo junta en este álbum temas propios con algunos covers de temazos como “Disarm” de los Smashing Pumpkins.

Mientras íbamos pasando mis discos, el concepto de Movimiento apareció tan pronto Oli dio con esta portada de “The Civil Wars”. ¡Está muy conseguido! Esa nube de humo negro casi parece que se mueva por la portada del disco.

thecivilwars

Tal como la dirección, el movimiento en una landing page es una valiosa herramienta para atraer la atención hacia elementos importantes. Fíjate como Apple utiliza el Movimiento en las imágenes de la página del iPhone6, haciendo que el producto parezca más interesante y demostrando implícitamente algunas de las características más destacas del producto, como su impecable resolución de pantalla.

3. Ofrecimiento: Led Zeppelin – III

Led Zeppelin cambió radicalmente la dirección de sus anteriores dos discos, tan sinceros y “del rock”. Todavía se encuentran pinceladas de ese rock tan puro en este álbum pero la banda saco un nuevo sonido, inspirado por los enormes campos en Gales, donde grabaron este disco.

led-zep-iii

Lo cool de este diseño de portada es que el propio disco actúa como una rueda que, al girar, muestra diferentes las imágenes a través de los agujeros de la portada. Un pequeño hueco en el borde derecho permite que sobresalga el disco, haciendo fácil e intuitivo lo que se puede hacer: girar el disco. Es un ejemplo muy bueno de Ofrecimiento.

ezgif.com-video-to-gif

Los ofrecimientos son pistas visuales que evidencian cómo utilizar algo sin dar instrucciones, invitando a los usuarios a realizar alguna acción. El ejemplo más conocido de esto es el que compartió Steve Krug en su Don’t Make Me Think, y es el botón estilo 3D que deja claro que está para ser pulsado.

Utilizamos el Ofrecimiento en diseño web para decir a los usuarios qué tienen que hacer y dónde deben hacer click, lo cuál es exactamente la preocupación de muchos expertos en UX con respecto al uso de los botones fantasma.

[Nota de Pablo Penadés: El ofrecimiento (ofrecimiento estimular o affordance) es un término acuñado por James J. Gibson allá por los 70. Por aquel entonces, se empezaron a forjar las bases de muchos de los conceptos cognitivos y psicológicos relacionados con la percepción que ahora hemos digitalizado y convertido en UX/UI.]

4. Contraste: Joe Jackson – Look Sharp

Cuando Joe Jackson lanzó su primer disco, hizo una afirmación contundente sobre la portada de su disco, el cuál usa el efecto del Contraste para resaltar sus impecables zapatos.

look-sharp

El contraste se utiliza en landing pages para realzar la presencia de un elemento de la página con respecto a todo lo demás, tal como lo hacen los zapatos de Joe. Habrás visto este concepto llevado a la práctica en muchas landing pages, donde los colores del botón CTA destacan con respecto al resto de colores de la página.

La gente no hace click en un botón porque sea rojo o verde. La gente hace click porque contrasta con el resto de la página.

5. Subrayado: U2 – The Unforgettable Fire EP

El EP Unforgettable Fire de U2 contiene temas del disco de mismo nombre junto a otras 3 bonus-tracks (Love Comes Tumbling me chifla). Cuando saqué este disco de mi estantería, supe inmediatamente que era un ejemplo perfecto de Subrayado.

U2EP

¿Has visto cómo subrayan el título del álbum en dorado? Esto otorga una importancia visual de la que el ojo no puede escapar.

Destacar o subrayar de este modo se utiliza en landing pages para dirigir la atención hacia elementos importantes. ¿Quieres que los visitantes consigan un descuento o quieres que presten atención a tu propuesta de valor? Te recomiendo que pongas a testées diferentes elementos.

6. Espacio “en blanco”: Wilco – Sky Blue Sky

¡Ahá! Pensabas que sería el famoso White Album de los Beatles, ¿verdad?

Este es Sky Blue Sky, el sexto trabajo de estudio de Wilco, que nos trae una fantástica selección de sonidos folk-rock del sur de California, algo de country y toques de rock’n’roll.

wilco-attention-driven-design

Cuando te fijas en la portada, el pájaro solitario de la derecha es lo primero que ves. Tu ojo se fija directamente en este elemento y la pregunta que te viene a la cabeza se parece algo a “¿Qué tiene este pájaro de especial?”.

Tal y como pasa con este pajarillo de la portada del disco, puedes dirigir la atención para mejorar la conversión hacia algún elemento de tu landing page utilizando espacios en blanco, una técnica de diseño que se basa en utilizar áreas en blanco para enfatizar algún elemento a tu elección.

Importante mencionar que el “Espacio en blanco” no implica que sea blanco necesariamente. Si tu fondo es de otro color, puedes emplear este principio del mismo modo.

7. Anomalía: Sharon, Lois & Bram – Smorgasbord

¿Por qué este disco en mi colección? Pues porque es sencillamente genial, sincero y sencillo.

Con temazos como “Peanut Butter,” “Dan, Dan the Dirty Old Man,” y “Did You Feed My Cow?” este álbum se convirtió rápidamente en un un clásico.

sharonloisbram

Pero es que además, es un ejemplo perfecto del principio del Diseño Orientado a la Atención: Anomalía.

¿Ves la anomalía en esta portada? Bien, si te fijas un poco hacia la izquierda, entre la madre y el chico… ¡hay un elefante en la portada!

Cuando algo no encaja, nos damos cuenta así que: usa el efecto anomalía para destacar elementos en tu página web.

8. Cercanía o proximidad: The Jackson 5 – Destiny

Para este disco, los Jackson controlaron de algún modo la grabación en la que produjeron algunos de los hits más conocidos de su historia como “Blame It On the Boogie” y “Shake Your Body (Down to the Ground).”

destiny

El modo en que los Jacksons se han juntado en la portada, mostrando Proximidad, muestra que la unión hace la fuerza y que un grupo unido como ese puede hacer sonar el funk por toda la galaxia.

En tus landing pages, la proximidad o cercanía hará que los visitantes perciban que los elementos están relacionados. Esto puede jugar a tu favor si lo empleas bien.

Pongamos el clásico ejemplo de escribir “Nunca te enviaremos spam” cerca de tus llamadas a la acción o CTA. A pesar de que parezca que esto dará confianza al visitante, es también una palabra prohibida para la conversión, generando dudas a los visitantes al meterles la idea de “spam” en sus cabezas.

¿Qué sacamos de todo esto? Si estás empleando la Proximidad en tu página, ten claro que lo estás haciendo con toda la intención.

 

9. Distracción: Gord Downie, The Sadies, and the Conquering Sun

Este es un disco de una de las estrellas de rock más conocidas de Canadá y líder de la banda Tragically Hip, Gord Downie, con el sonido de la banda rockabilly “The Sadies”.

Tanto en el disco como la portada suceden muchas cosas que nos interesan:

gorddownie

Probablemente pases varios minutos mirando la portada del disco y nunca destaques nada en especial (a pesar de que todo es de lo más especial). Tus ojos deambularán de una cara a otra, sin rumbo.

En tus landing pages, este es el principio que tienes que evitar a toda costa: Distracción. Cuando colocas demasiados elementos juntos, estás complicando al usuario la tarea de discernir entre elementos y determinar cuál es el más importante.

Y esto dificulta aun más que la gente realice una acción.

10. Interrupción: Pink Floyd – The Dark Side of the Moon

El Dark Side of the Moon es uno de los discos más vendidos de la historia. Con más de 50 millones de copias vendidas desde su lanzamiento, la música es tan omnipresente como los perritos calientes en Nueva York.

pink-floyd-dark-side-of-the-moon-album-cover

En este álbum, el haz de luz se interrumpe de algún modo, generando un efecto de refracción en el que la luz se divide en sus colores primarios. Esto hace que te detengas un instante, mires el prisma y te preguntes qué ha pasado ahí.

De modo similar, utilizamos el efecto de Interrupción como una técnica de diseñar para captar la atención de los visitantes ¿Cómo capturar esa atención en una landing page o en una página web cualquiera? introduciendo un elemento rompedor que capte momentáneamente la atención, aportando valor y significado.

 

Mira este ejemplo en un post de Fast Company:

fastcompany

El modo en el que esa quote aparece hace que detengas tu lectura por un momento y prestes atención a lo que te quiere decir. Además, alivia visualmente el contenido al separar los mazacotes de texto.

Usar Interrupción en landing pages pasa por incluir elementos visuales que dividan la página, o incluso conseguir el efecto con algo tan sencillo como texto en negrita.

11. Dominio: Iron Maiden – The Number of the Beast

Esta portada de los Maiden causó furor cuando en muchas tiendas de discos cuando el álbum vio la luz en 1982, llegando a disco de platino al poco tiempo en los EEUU. Además de conseguir hacer saltar las alarmas entre los círculos más religiosos, se ha convertido en una pieza maestra de la historia del heavy metal.

666
Hecho curioso: The Number of the Beast fue el disco número 666 de mi colección. Fuente de la imagen.

Esta portada demuestra el enorme poder de la Dominación. La mascota de Iron Maiden, Eddie, está muy por encima del diablo rojo que, a su vez, domina una pequeña persona. Tanto el tamaño como la sensación de proximidad ayudan a crear este efecto.

Usar la Dominación en una landing page implica demostrar la importancia de un elemento sobre otro, a la vez que mostrar al usuario dónde actuar.

Tanto si usas tamaños de fuente grandes para los títulos, un enooooorme hero shot o un gran botón de call to action (llamada a la acción), el efecto Dominación ayudará a los visitantes a saber qué elementos son los importantes.

12. Consistencia – The Swing Era

Vamos a echarle un poco de creatividad. He sacado unos cuantos discos de la colección de mi mujer de The Swing Era y los he puestos todos juntos para demostrarte el siguiente principio: Consistencia.

swing-era

El principio de diseño orientado a la atención de la Consistencia es un refugio entre las tormentas de estímulos visuales a las que nos sometemos diariamente. Si puedes crear una consistencia visual para los visitantes de tu landing page, les estarás haciendo un favor.

Esto está íntimamente relacionado con los principios de Coherencia del Diseño y de Coherencia del Mensaje, los cuales implican que tanto el título como los colores y/o imágenes de la landing deben estar en consonancia con el anuncio que les hizo llegar hasta ahí.

Establecer una Coherencia o Consistencia entre tu anuncio y tu landing page (tanto en mensaje como en branding visual) generará una mejor experiencia de usuario, además de darles la seguridad de haber llegado al lugar adecuado.

13. Repetición: The Rolling Stones – Steel Wheels

Trataré de abstenerme de hacer chistes sobre cuán repetitivos se volvieron los Stones al grabar este disco… ¡madre mía!

Pero no les quitemos mérito. Por aquel entonces ya rondaban los 50 y sin duda, han pasado por muchos más momentos, buenos y malos, de los que muchos de nosotros vamos a pasar nunca. Es un esfuerzo más que digno, piénsalo.

Además, esta portada es un ejemplo idea del principio de diseño de Repetición:

steel-wheels
Sillas de ruedas de acero, ¿en serio? Fuente de la image

El principio de la Repetición sirve para dirigir la atención hacia elementos de tu página que quieras destacar.

Imagina un formulario de esos largos en una landing page con varios CTAs. El hecho de que aparezcan varias veces en la página indica que son importantes.

Además, la repetición genera familiaridad, lo cuál, con el tiempo se traduce en notoriedad.

14. Simetría: El Gran Gatsby – BSO

El prodcutor Baz Luhrmann hizo su propia versión del Gran Gatsby montando un festín por todo lo alto. Y cuando tuvieron que plasmar todo ese lujo y sensación de poderío en una portada, esto fue lo que consiguieron. ¡Brutal!

great-gatsby-ost

Las zigzagueantes líneas doradas sobre un fondo negro consiguen una fantástica sensación de simetría, lo que es muy agradable a la visión. Tanto en una portada de disco, como la cara de alguien, como en una landing page, la Simetría está íntimamente relacionada con la belleza.

¿Tienes un producto de última generación que quieres promocionar con una landing page? Usa la simetría en la landing para dar a tus visitantes un efecto de estilo y sofisticación mientras consigues mejores resultados de conversión.

15. Superposición: Nick Drake – Pink Moon

La portada del álbum de Nick Drake’s Pink Moon es tan irreal como un cuadro de Dalí (más exactamente, un Trevithick), pero demuestra perfectamente el principio de Superposición.

pink-moon
Un poco triste que tuviera que ser Volkswagen quien hiciera tan popular a Nick Drake.

El modo en que los elementos se sobreponen entre ellos te hace sentir que están relacionados temáticamente.

En una landing page, utilizamos el principio de Superposición para unir elementos con el objetivo de demostrar la importancia entre ellos. Como dice Oli en este ebook (en inglés, pero escríbeme si quieres que lo traduzcamos ya a español)

En términos de marketing, la superposición es el modo más empleado para la información relacionada con los precios (como las estrellas de “Mejor oferta”, o similares) y para destacar algunos elementos (como la imagen superpuesta zoomeada en productos de ecommerce)

Dicho de otro modo, la Superposición te ayuda a destacar cierta información que creas que es importante para el usuario y acompañarles hacia el objetivo de conversión.

16. Alineación: The Seeger Family – American Folk Songs Sung por los Seegers

Muchos de vosotros conoceréis a Pete Seeger y habréis escuchado temas como “We Shall Overcome” o “This Land is your Land” que marcaron un antes y un después. Pete viene de una familia de cantantes folk y eso se nota. Lanzado en 1957, este disco está entre mis top.

Pete, de hecho, no aparece en el disco. Solo la banda.

FW02005

La alineación o alineamiento es una característica del diseño que consigue enlazar visualmente elementos para indicar una relación entre ellos. Es un modo muy simple de poner orden a un conjunto de elementos y aportar claridad visual.

Además de ser un principio de diseño, tiene una aplicación directa en landing page: hacer tu página más congruente alineando cada elemento hacia un único objetivo, conversión.

17. Continuidad: My Chemical Romance – Black Parade

Oli me trajo este álbum de Chemical Romance mientras trabajábamos en el artículo: era el único que ejemplificaba muy bien el principio de Continuidad.

mychemicalromance

Cuando despliegas la portada, te das cuenta de cómo la imagen se extiende a el anverso y reverso de la portada. Eso es exactamente lo que refleja el princpio de continuidad en cómo diseñar una landing page.

Tu landing page debe contar la historia del producto o servicio que estás vendiendo ¿has oído hablar del storytelling? Lo mismo, pero en una landing. Esta historia debe ser visualmente interesante y contar las cosas en el orden adecuado.

Tus visitantes deben tener toda la información necesaria conforme van consumiendo contenido, porque estoy seguro que no quieres que vayan a otro lado a buscarla, ¿verdad?

18. Tamaño: The Allman Brothers – Eat a Peach

Despúes de que Duane Allman falleciera justo en mitad de la grabación de este disco, la banda puso toda su energía en conseguir crear uno de los álbumes “en directo” más grandes de la historia.

Con temas que rondan los 10 minutos, el paisaje sonoro que crean es tan sorprendende como ese enorme melocón gigante en la portada del disco.

Allman_Brothers_Band_-_Eat_A_Peach-Front-www.FreeCovers.net_

Es inevitable: cuanto más grande, más atención le prestas. Y eso queda evidente en este disco. Cuando más contraste el tamaño de un elemento con respecto a los que tenga a su aldededor, más atención captará.

El melocotón, obviamente, es el elemento más importante de la portada y su Tamaño lo deja patente.

El mismo principio, aplicado a landing pages: si tienes algo que quieres destacar del resto, AUMÉNTALO, HAZLO GIGANTE, y captará todas las miradas.

19. Perspectiva: Do Make Say Think – Self-Titled

La banda canadiense de post-rock Do Make Say Think (atención: el indie rock no es accesible para todo el mundo). Te llevará un tiempo hacerte a las canciones, pero es un disco que merece la pena digerir poco a poco.

No es para todos, pero si te gusta el post-rock, es una banda a la que debes prestar atención.

La portada del disco de nombre homónimo es un gran ejemplo del pricnpio de Perspectiva.

domakesaythink

¿Te das cuenta como se te desplaza la mirada desde delante hacia el fondo? Este efecto visual se utiliza para captar la atención hacia algún elemento de cualquier lugar, en nuestro caso, landing page.

En el ebook puedes aprender los principios para diseñar orientado a captar la atención.

fitspo

Fíjate como el background crea la perspectiva en la landing page y el formulario en la zona “delantera” destaca sobre el resto. La profundidad en este caso, juega a nuestro favor.

20. Agrupación – Varios

Parece que el princpio de Agrupación no era fácil de encontrar en las portadas. Así que para demostrarlo, Oli y yo cogimos varios de mis discos para generar el efecto. Voilà!

grouping
¿Quién demonios es Doug Kershaw (abajo izquierda)?

Colocar estos discos en grupos con los mismos efectos visuales crea la impresión de que hay una relación entre ellos, de unidad, de grupo. Además, te da la sensación de que están separados de los otros grupos y sus elementos. Además, también te llega a tu mente la cara de Doug Kershaw, directamente llegado de los 70s con una sonrisa oculta.

Esto es lo que consigue el princpio de diseño para la atención de Agrupación: crea límites entre grupos de elementos y aporta claridad y significado al mensaje. Colocando elementos similares cerca crearás un efecto de simplicidad y reducirás la carga cognitiva. O sea, se lo pondrás fácil a tu visitante.

21. Marco (o encapsulado): Fleetwood Mac – Tusk

Este álbum, para muchos, encapsula perfectamente los excesos del rock. Tanto la música como el packaging (con un curioso diseño muy “Lindsey Buckingham está enganchada a cualquier cosa que se le ponga… a tiro”) son ejemplos vivos de un ego desenfrenado.

No me lo tomes a mal: el disco es fantástico. Pero tiene un cierto nosequé.

Don’t get me wrong, it’s a great album. It’s just got a certain je ne sais quoi.

fleetwood_mac_tusk

El la postada del disco, aparece una imagen de un perro mordisqueando los pantalones de algún pringao, encapsulada o enmarcada en un fondo incierto y abstracto.

El encapsulado o marco en las landing pages otorga a los visitantes la idea de que algo es importante porque está dentro de algo. En el ejemplo de abajo, tanto el formulario como el CTA están enmarcados y se convierten así en el elemento focal de la página.

design-to-increase-conversions-encapsulation

En la imagen de la derecha, el enmarcado ayuda a que los visitantes sitúen las áreas importantes de la landing page. Y tan importante: ¡es el área donde van a dejar su información!

22. Contacto: John Lennon & Yoko Ono – Double Fantasy

Double Fantasy se lanzó justo tres semanas después de que John Lennon fuera disparado fuera de su apartamento. En el disco, John y Yoko mantienen una conversación tipo marido-y-mujer, con una track en la que Yoko habla (Prefiero escucharlo en CD y pasar cada vez esa pista).

La portada transmite sensación de cercanía, de intimidad y sinceridad detrás de la música.

Double-fantasy

Está claro que son John y Yoko, pero en lo que realmente nos fijamos es en el Contacto que han generado entre ellos. El beso, en directo y central, atrapando la mirada, mucho más que los textos en amarillo de las esquinas.

En diseño, utilizamos punto de Contacto para captar la atención, tal como lo hace el beso entre John y Yoko. La imagen de abajo te muestra como el Contacto puede quedar en una landing page.

contact-landing-page-example
El ojo va directamente al punto de contacto entre los dos teléfonos, y luego, te das cuenta de que el color es el mismo que las letras del título.

Y esto no es más que otra de las armas del arsenal del diseño que tienes para conseguir que tus clientes miren donde quieras.

23. Anidado: ¡A tu gusto!

Muchas veces tus páginas tendrán listas de beneficios y características de tu producto o servicio. Aquí es cuando el Anidado juega un papel importante y reduce la carga cognitiva necesaria a tus visitantes. Como Oli dice en el ebook (en inglés)

Puedes aportar claridad, reducir el tiempo de comprensión y enfatizar a través del espaciado generando una jerarquía con listas y su correspondía sangría (sangrado)

Más comúnmente, el anidado lo vemos en forma de listas con guiones o pequeños circulos (bullet ponts), que son fácilmente entendibles.

Un cosa más: no hemos podido encontrar ejemplos de esto en ninguna portada de mis discos. Si tienes un ejemplo de anidado en cualquier portada, déjalo en los comentarios de abajo (o vía redes sociales). Si encaja, ¡te enviamos una camiseta de Unbounce!

Aplicar los 23 principios del diseño para captar atención

Los principios del Diseño para generar Atención están en todos lados. Son tan onmipresentes que ni siquiera nos damos cuentas de que están. Los encontramos en la naturaleza, en la arquitectura, en el planeamiento urbano, en el arte, en los videojuegos, películas, cuadros,… incluso en portadas de disco.

Pueden emplearse en cualquier lugar porque son siempre herramientas para captar nuestra mirada. Y aprender cómo funcionan y los resultados que puedes conseguir aplicándolos inteligentemente, es dar un paso al frente para aumentar la tasa de conversion de tus páginas.

Seguro que alguna de las portadas de tus discos favoritos tienen alguno de los 23 Principios del Diseño para captar la atención muy presente.

¿Quieres compartirlo con nosotros?

default author image
Acerca de Mark John Hiemstra
Mark John Hiemstra es experto en marketing de contenidos y fue parte del equipo de Unbounce de Montreal. Escritor de día y lector de noche, odia hablar de sí mismo en tercera persona pero se deja seducir de tanto en tanto. Encuéntralo en Twitter aquí: @markjohnh
» Más posts por
  • Carlo

    Mark John Hiemstra es “experot”
    Por otro lado tras 20 años diseñando, creo que este post se basa en su percepción y no en reglas de diseño, si no lo que el cree que funciona, a demás de saltarse los nombres de las técnicas gráficas de cada portada, eso si, buena música y creatividad. Un saludo

  • Hola Carlo,

    Gracias por los detalles (y la corrección). Te respondo como community manager de Unbounce en Español.
    Sin duda, el post trata unos principios orientados a la atención, y esto implica directamente a la percepción. ¿Podrías enviarnos fuentes a hola@unbounce.com para poder hacer ampliaciones y mejoras del artículo en un futuro? ¿Te gustaría participar?

    Contáctame y lo comentamos.

    Gracias de nuevo.