Empleando los principios de AIDA en diseño web

En este artículo, discutiremos cómo podemos usar el diseño para implementar los principios establecidos por AIDA (el acrónimo de marketing, no la ópera italiana) y ayudar a crear páginas web orientadas a las ventas.

AIDA significa Atención, Interesar, Deseo y Acción; los cuatro pasos que pertenecen al proceso de venta según E. St. Elmo Lewis, el hombre detrás de esta escuela de pensamiento. AIDA se puede aplicar a diferentes situaciones que involucran la venta de productos o servicios, pero en este artículo nos centraremos en cómo podemos lograr cada paso a través del diseño web..

Los principios de AIDA son especialmente relevantes para el diseño de páginas de destino, donde normalmente el marketing y el diseño web se encuentran en línea. Las páginas de destino generalmente tienen como objetivo vender un producto, un servicio o una suscripción..

Vamos a empezar.


A: Atención

La atención es el primer paso de los principios de AIDA y en el que se basan todos los demás. Después de todo, ¿cómo puede hacer que un usuario actúe si no ha llamado su atención para empezar??

Atraer la atención se discute mucho dentro del diseño web; Los clientes quieren que su sitio sea notado. Conceptos como Above The Fold y The Thee Second Rule se discuten regularmente, los cuales se centran en la necesidad de captar la atención de los usuarios rápidamente..


Vida por debajo de 600

La web como plataforma es una excelente manera de llamar la atención; El diseño bueno o único por sí mismo se hará notar. Sin embargo, se pueden utilizar elementos individuales de un diseño para llamar la atención del usuario y dirigirlos a áreas particulares de la página..

Vale la pena señalar, sin embargo, las connotaciones negativas de tener demasiados elementos de página compitiendo por la atención del usuario. Si se enfatiza todo, no se establecerá ningún sentido de jerarquía y el usuario puede sentirse intimidado y abrumado..

Los métodos para atraer la atención generalmente cambian con el tiempo a medida que evolucionan las tendencias y la tecnología, pero aquí hay algunos métodos populares actualmente en uso.

Texto grande

El texto realmente grande ha existido por un tiempo ahora dentro del diseño web. Generalmente se usa para hacer una declaración audaz por adelantado, como dar la bienvenida al usuario o explicar la naturaleza del sitio (por ejemplo, hacemos sitios web). El tamaño del texto en relación con el resto de la página lo coloca firmemente en la parte superior de la jerarquía visual.


Carsonified
Mark Hobbs
Gran cartel

Deslizadores

Los controles deslizantes con Javascript han sido una tendencia masiva durante los últimos años (solo revise algunos de los archivos populares en Themeforest) y con razón, ya que son excelentes para llamar la atención y dar una excelente primera impresión. Permiten el uso de imágenes combinadas con movimiento y animación. Los controles deslizantes se han ido haciendo cada vez más avanzados, a partir de transiciones de atenuación y deslizamiento simples a los efectos 3D compatibles con CU3ER y el fabricante de dispositivos (aunque basado en Flash).


Marcs Design
Piecemaker
Modernizar el tema

Animación

Para crear una animación detallada y elaborada en la web, tradicionalmente habría tenido que confiar en Flash, pero este ya no es el caso. Las animaciones de CSS3 son cada vez más avanzadas y el soporte del navegador aumenta junto con ellas..

La animación, si se usa correctamente, es una excelente manera de distinguir su sitio y atraer la atención del usuario.


La web expresiva
Reverdand Danger
Quazar

Estoy interesado

Luego viene el interés, el segundo de los principios de AIDA. Ya hemos captado la atención del usuario, ahora necesitamos que se interesen en lo que ofrecemos. Cómo hacemos esto?

Se sugiere que, en lugar de comunicar las características de nuestro producto o servicio, expliquemos sus beneficios y ventajas. Este enfoque cambia el enfoque de nuevo al usuario en lugar del producto o servicio y permite al usuario identificarse con él a nivel personal.

En términos de cómo podemos abordar esto a través del diseño, se trata de presentar estos beneficios de manera clara y concisa. Los usuarios no querrán leer los párrafos de un argumento de venta para encontrar lo que hay para ellos. Se pueden utilizar fragmentos de información, pasos, listas, viñetas, íconos y más para comunicar información rápidamente.


Evernote muestra tres grandes beneficios, junto con las imágenes, tan pronto como carga la página..
La página de destino de Basecamp by 37signals llega directamente al punto al enumerar tres beneficios clave.
La página web de Sparrow utiliza secciones claramente definidas para mostrar los beneficios de su aplicación.

D: deseo

Bien, hemos atraído su atención, los hemos interesado, ahora necesitamos que los usuarios querer lo que estamos ofreciendo. Tenemos que generar deseo..

Generar el deseo es un tema amplio, las empresas emplean divisiones de mercadotecnia completas para crear campañas elaboradas y atractivas para lograr esto. Sin embargo, nos centraremos en cómo podemos hacerlo a través del diseño web..

En esta etapa, tiene la atención y el interés del usuario y estará dispuesto a invertir más tiempo en el sitio. Esta paciencia permite presentar información más detallada, ya sea en forma de imágenes, video o texto. No hay necesidad de acelerar este paso..

Muéstralo

No hace falta decir que necesita presentar su producto de la mejor manera posible. Las personas emitirán juicios basados ​​puramente en la estética y asociarán un buen diseño con un mayor nivel de calidad general. No solo entonces, el diseño del sitio web debe estar a la par, sino que el producto real (si lo hay) también debe verse bien..


El video corto para Clear es excelente y realmente muestra la aplicación.

Las imágenes atractivas y de alta calidad y los videos bien producidos pueden ser extremadamente poderosos para hacer que su producto se vea bien. El sitio web de Apple hace un trabajo excepcional al mostrar todos sus productos utilizando imágenes grandes combinadas con animación.

Considere la mejor manera de presentar su producto o servicio. Aquellos que venden productos digitales, como aplicaciones o diseño web, a menudo los muestran en dispositivos como monitores, computadoras portátiles y teléfonos..

Prueba social

La prueba social es una de las formas más poderosas y comunes para generar deseo. Puede tomar muchas formas y, a menudo, lo verás varias veces en tu vida diaria..

La prueba social puede ser un concepto psicológico complejo, pero en un nivel básico describe que las personas siguen el ejemplo. Si otros encuentran algo aceptable, es más probable que un individuo piense de esa manera..

Los testimonios y las revisiones son un excelente ejemplo de esto, ya que demostrarán que otros ya han tenido una buena experiencia con un servicio o producto. Saber que otros han usado un producto y recomendarlo elimina la sensación de riesgo y, a su vez, aumenta el deseo.

Mejor aún es presentar las opiniones y puntos de vista de expertos o celebridades. Este tipo de personas tienen muchos seguidores y su opinión tiene mucho valor y confianza detrás de ellos..

El mismo concepto se puede ver cuando un estudio de diseño muestra empresas grandes y exitosas como clientes, o cuando un autor presenta con orgullo dónde se ha presentado su trabajo..

Además de utilizar la calidad para su beneficio, la cantidad puede funcionar igual de bien. Esto se puede ver cuando se muestran grandes cantidades de seguidores de Twitter, Me gusta de Facebook o Suscriptores de RSS para que todos puedan verlos..


Tuts + Hub

A: Acción

Hemos hecho todo el trabajo duro y hemos llegado tan lejos, ahora se trata del paso final: la acción. El objetivo final de una página de destino es convertir a alguien en un comprador o un suscriptor, y lo último que queremos es fallar en esta etapa final..

Llamada a la acción

Un elemento 'Llamado a la acción' es bastante autoexplicativo. Son elementos, generalmente en forma de botones, que invitan al usuario a realizar algún tipo de acción, como "Comprar ahora" o "Registrarse". Suenan bastante simples, pero hay algunas consideraciones que deben hacerse al diseñar.

Primero y ante todo, con cualquier elemento de llamada a la acción, debe ser absolutamente claro y obvio que el usuario pueda interactuar con él. Se espera que los botones tengan un estilo determinado, como un área claramente definida o una sensación de profundidad..

Podemos ayudar aún más a distinguir los elementos de la llamada a la acción utilizando varios métodos. Use color, tamaño, detalle y mucho espacio en blanco para su ventaja y para resaltar aún más el elemento.

Utilice la redacción directa de los botones para fomentar la acción y crear un sentido de urgencia. Un lenguaje claro y conciso no solo promoverá la acción, sino que también será obvio para el usuario qué esperar al interactuar con el elemento..

También debemos hacer que sea lo más fácil posible para que el usuario actúe, brindándole múltiples oportunidades para hacerlo. Se debe incluir un elemento destacado de llamada a la acción al principio del diseño, con más instancias en toda la página..

Sin embargo, es importante mantener un buen equilibrio. No queremos abrumar al usuario y hacer que se sienta presionado de alguna manera. Demasiados elementos de llamada a la acción parecerán agresivos y pueden tener el efecto contrario al que queremos. Dos a tres es probablemente un buen número para apuntar.

El diseño Z

El 'Z Layout' se ha discutido en Webdesigntuts + anteriormente, pero vale la pena volver a mencionarlo, ya que se aplica perfectamente a las páginas de destino para que los usuarios entren en acción..

El 'Z Layout' es un diseño de página web simple pero efectivo que dirige al usuario a través de varios puntos en una página y eventualmente conduce a un elemento de llamada a la acción. Este diseño es una manera perfecta de implementar los principios de AIDA, guiando al usuario a través de cada paso y finalmente presentando el llamado a la acción al final..

Una ventaja de este diseño es que es muy adaptable y se puede utilizar de muchas maneras diferentes. La estructura de la forma 'Z' no es rígida y puede expandirse y contraerse para abarcar diferentes formas de contenido. Por lo tanto, a menudo verá ejemplos de este diseño que pueden verse marcadamente diferentes entre sí..

Aquí hay algunos ejemplos de la disposición 'Z' en acción. Vea si puede detectar el camino previsto.


Conclusión

Conocer la teoría detrás de los principios de AIDA y cómo ejecutar cada paso a través del diseño puede ser un conocimiento muy valioso para un diseñador web..

Las técnicas individuales discutidas anteriormente son todas relativamente simples y comunes dentro del diseño web, pero es una habilidad completamente diferente poder combinarlas de tal manera para crear páginas web efectivas y orientadas a objetivos..

Si este artículo ha despertado interés en AIDA, consulte el tutorial Premium que se acompaña Diseñar una página de destino utilizando los principios de AIDA ...

Gracias por leer!