Categorías: Diseño, Tutoriales, Usabilidad

4 reglas de oro para todo call-to-action

Publicado el 09 abril 2010 por .

Si el link es el rey de Internet, el call-to-action no se queda lejos. Estamos rodeados de botones y cada dia pulsamos unos cuantos con esa mano virtual llamada cursor. “Buscar”, “Comprar”, “Aceptar”, “Cancelar”, “Descargar”, “Iniciar sesión”, “Enviar”, “Pulsa aquí”, ¿Por qué?, “Tú pulsa”, etc.
Los hay de mil colores y estilos pero ¿Cómo debe ser el botón ideal? Con este post aprenderemos las 4 reglas que configurarían el botón perfecto. Vamos a ello…

Las 4 Reglas de Oro

  • Affordance
    Tal como Donald Norman apunta en The Design of Everyday Things, el affordance es aquella cualidad que un objeto tiene para autodescribir las posibilidades que ofrece y hacerlo de forma perceptible para el usuario. Por ejemplo, el pomo de una puerta y la maneta de otra son mecanismos de apertura que cumplen un mismo cometido, sin embargo y únicamente con su apariencia intuimos que ambos mecanismos requieren diferentes formas de interacción. Es decir, ofrecen affordance diferentes.
    Así que la primera regla es conseguir que todo call-to-action tenga un affordance correcto. Esto quiere decir que todo call-to-action tiene que aparentar ser un elemento pulsable.
    Un efecto 3D es la clave para conseguir una apariencia pulsable.
    En la imagen inferior, el botón de la izquierda tiene una apariencia más bien plana mientras que el botón de la derecha ofrece un aspecto que autodescribe el comportamiento.
  • Copys descriptivos
    Gracias al affordance ya sabemos el como interactuar con ese elemento que vemos en pantalla, ahora necesitamos saber el que o el para que nos servirá pulsar sobre el mismo. Utilizar un copy—o texto—descriptivo será fundamental.
    Por norma general el texto que incluyen la mayoría de los call-to-action es aquella palabra que describe la acción. Por ejemplo: “Comprar”, “Descargar”, “Suscríbete”, etc. Pese a que estos literales son bastante descriptivos, aún podemos reforzarlos si además incluimos el objeto sobre el que recae la acción. Por ejemplo: “Comprar entrada”, “Descargar catálogo”, “Suscríbete al RSS”, etc.
    En un primer momento, complementar el texto con el objeto puede parecer innecesario pues el propio contenido de la página daría el contexto necesario. Sin embargo, el propio peso visual de un call-to-action puede dirigir nuestro foco de atención hacia el mismo sin haber realizado un previo escaneo de los contenidos. En este caso, contar un botones que contengan el contexto de manera explícita facilitará el uso sin dar pie a posibles ambigüedades.
  • Refuerzo cromático
    Con un copy descriptivo tenemos un mensaje con contexto, pero aún podemos reforzar el mensaje si hacemos un uso adecuado del color. Es el caso típico de call-to-action con mensajes o acciones de tipo confirmación o anulación.
    Sucede que como usuarios procesamos e interpretamos el significado de un color mucho más rápido que leemos el texto que pueda contener el botón. Así, utilizar el recurso del color resultará en una mayor eficiencia al uso.
    No hay una norma estándar para este punto, pues está lleno de matices. Un consejo es diferenciar los call-to-action de acción neutral (p.e: “Añadir a favoritos”) de aquellos call-to-action cuya acción puede afectar al flujo de un proceso (p.e: “Ir al paso 2″ o “Cancelar compra”). Para el caso de los botones que ejecuten una acción neutral podemos utilizar el tema de color corporativo de todo el sitio web. Para los botones que aparecen durante un proceso podemos utilizar el color corporativo para aquellos botones que accionen confirmación y el color complementario para aquellos que anulen el proceso.
    En la imagen vemos que para la acción “positiva” se emplea el color corporativo, mientras que para la acción “negativa” se utiliza un color neutro que pasaría más desapercibido.
  • Eye Candy
    El punto estético tiene una influencia directa sobre la percepción de las cosas. Si algo está cuidado a nivel visual automáticamente cautivará nuestra atención, nos persuadirá, y nos transmitirá confianza.

    La apariencia importa, somos así.

Despedida

Para terminar, un par de enlaces recomendados.

  • In Defense of Eye Candy” de A List Apart y
  • Buttons Design Showcase“.

Espero que este artículo os sea útil y que lo podáis poner en práctica.

Nos vemos en Twitter @drodriguezlopez ;)

Tags: , , ,

4 Comentarios

  1. Eduard Barredo Dice:

    Buen artículo Dani, me ha encantado lo del affordance. Totalmente de acuerdo.

  2. Pablo Dice:

    Muy bueno, intentaremos aplicarlo.

  3. Pía Dice:

    Muy buena información, muy interesante! Gracias!!

  4. Mariano Dice:

    Muy buen artículo. Me parece importante también que haya pocos “Call to action” por página para guiar al usuario hacia la acción que queremos que realice.

    En este artículo complemento un poco más de información sobre el tema:
    http://www.glidea.com/blog/que-es-un-call-to-action

29 Trackbacks

  1. Quick links de la semana (09-may-2010) | blog Dice:

    [...] 4 reglas de oro para todo call-to-action [...]

  2. ¿Cómo conseguir más páginas vistas en tu blog? | Trucos Optimización Dice:

    [...] Fomentar uso del buscador El buscador suele situarse en la barra lateral del blog, omnipresente y en una zona fija. Sin embargo, el pie del post es un sitio ideal para replicar la caja de texto del buscador. Un buscador en el pie del artículo puede entrar en juego en diferentes casos de uso. Por ejemplo, servirá como herramienta de navegación si los artículos o categorías relacionadas se quedan cortas respecto los intereses del lector, y este prefiere filtrar con más nivel de detalle. También servirá para afinar la búsqueda cuando el post actúe como landing SEO, sin encajar exactamente con lo que el usuario pretendía encontrar. Una recomendación es no mostrar únicamente la caja de texto del buscador y botón de búsqueda, sino que acompañar estos elementos con un breve texto de persuasión así como sugerencias de búsqueda. Por ejemplo: “¿No has encontrado lo que buscas? Utiliza el buscador”. También es fundamental que el módulo de búsqueda tenga un buen diseño y cuente con un botón perfecto. [...]

  3. Consejos para optimizar el Email Marketing en dispositivos móviles — Fidelizador.com Dice:

    [...] un “Call to action” que sea claro y [...]

  4. 12 Trucos para el diseño de formularios web | Trucos Optimización Dice:

    [...] una llamada a la acción prominente y que cumpla las buenas prácticas del diseño de botones para la web. También, si situamos etiquetas y campos a rellenar alineados a la izquierda, también situar el [...]

  5. posicionamiento, reputación, influencia, popularidad, redes sociales, publicidad, promoción, social media, community manager, SEO, SEM, SMO, SMM, ORMIniciar Sesión | Dice:

    [...] 4 Reglas de Oro para Todo Call-To-Action | Trucos Optimización. Escrito por Gus en: Marketing Online,SMO,Usabilidad,UX | Etiquetas: call to action, experiencia [...]

  6. Landingpage perfecta | pjob Dice:

    [...] Formulario o botón CTA (call to the action). Botones que llaman al usuario a realizar una acción [...]

  7. 7 Principios básicos del copywriting que siempre debes tener en mente Dice:

    [...] [...]

  8. Los botones call to action | Trucos Optimización Dice:

    [...] este blog con un punto de vista un poco diferente. Echadle un vistazo a su visión en el artículo “4 reglas de oro para todo call-to-action”. [...]

  9. Gestión Redes Sociales en Hoteles. Todos para uno y uno para todos. | Blog TRW Dice:

    [...] y la viralicen, y él se encargue de darle forma, de un modo atractivo y provocar así un “call to [...]

  10. Gestión Redes Sociales en Hoteles. Todos para uno y uno para todos. | Sobre Blogs y SEO Dice:

    [...] y la viralicen, y él se encargue de darle forma, de un modo atractivo y provocar así un “call to [...]

  11. Claves para un sitio web exitoso « Mis Temas de Interes Dice:

    [...] Establecer call to actions [...]

  12. Claves para un sitio web exitoso | | ArticulosArticulos Dice:

    [...] Establecer call to actions [...]

  13. Claves para un sitio web exitoso | | Tus Articulos para ImprimirTus Articulos para Imprimir Dice:

    [...] Establecer call to actions [...]

  14. Claves para un sitio web exitoso | | Marketing de ContenidosMarketing de Contenidos Dice:

    [...] Establecer call to actions [...]

  15. Claves para un sitio web exitoso | | Contenido Para ReprintContenido Para Reprint Dice:

    [...] Establecer call to actions [...]

  16. Claves para un sitio web exitoso Dice:

    [...] Establecer call to actions [...]

  17. Claves para un sitio web exitoso - Markting de Artículos - Markting de Artículos Dice:

    [...] Establecer call to actions [...]

  18. » Claves para un sitio web exitoso » Contenidos Gratis para Sitios Web Contenidos Gratis para Sitios Web Dice:

    [...] Establecer call to actions [...]

  19. Claves para un sitio web exitoso | | ¡Sube tu Artículo!¡Sube tu Artículo! - ¡Sube tu Artículo! Dice:

    [...] Establecer call to actions [...]

  20. Claves para un sitio web exitoso | | Momentos de Ocio Momentos de Ocio Dice:

    [...] Establecer call to actions [...]

  21. Claves para un sitio web exitoso « « Directorio de Contenidos Directorio de Contenidos Dice:

    [...] Establecer call to actions [...]

  22. Claves para un sitio web exitoso - Momentos de Ocio Dice:

    [...] Establecer call to actions [...]

  23. Fast Tecnología − Claves para un sitio web exitoso Dice:

    [...] Establecer call to actions [...]

  24. Enlaces hacia el futuro » Claves para un sitio web exitoso » Enlaces hacia el futuro Dice:

    [...] Establecer call to actions [...]

  25. Claves para un sitio web exitoso | | Leer para AprenderLeer para Aprender Dice:

    [...] Establecer call to actions [...]

  26. Claves para un sitio web exitoso | | Artículos para un mundo globalizadoArtículos para un mundo globalizado Dice:

    [...] Establecer call to actions [...]

  27. Claves para un sitio web exitoso « Mis Artículos de Interés Dice:

    [...] Establecer call to actions [...]

  28. 4 Reglas de Oro para Todo Call-To-Action | SEO/SEM | Consigue clientes online | G. Parrabera Dice:

    [...] vía 4 Reglas de Oro para Todo Call-To-Action | Trucos Optimización. [...]

  29. 8 reglas básicas de usabilidad que no debes olvidar en tu E-Commerce | 2beDigital Dice:

    [...] Introducir claros botones que llamen a la acción (call-to- action). [...]

Deja tu comentario

Síguenos en Twitter