menos es más: 4 reglas de oro para todo call-to-action

Publicado el 09 Abril 2010 por Daniel Rodríguez.

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í.