Call to Action, qué son y cuál es su importancia.

Las llamadas a la acción son invitaciones para actuar. En el diseño Web y sobre todo, en el campo de la usabilidad, los Call to Actions son precisamente elementos diferenciables que instan al navegante a realizar una acción. Obviamente, estos elementos, en las interfaces web, solo pensando en el concepto de usabilidad, cobran una enorme importancia y deben ser considerados con extrema precisión.

Normalmente, los Call To Actions, en las interfaces web, toman la apariencia de botones activos que, una vez pulsados, remiten al navegante a concluir una acción bien definida (un pago, la introducción de datos en un formulario, un procedimiento de compra, etc.). )

Dada la delicadeza del asunto, existen reglas precisas para que las llamadas a la acción sean exitosas y óptimas. Algunas sugerencias muy interesantes son dadas por el sitio REVISTA DESTRUCCIÓN, lo que da una ilustración bastante grande y detallada con ejemplos reales.

Por eso, para todos los diseñadores web, tanto expertos como no expertos, es muy importante evaluar los aspectos que pueden influir positiva o negativamente en un Cll To Action. Y así, terminemos hablando de accesibilidad y usabilidad nuevamente. Términos que últimamente están cayendo en el olvido y no entiendo por qué.

El (derecho) copywriting para webs y redes sociales

La llamada a la acción, sin embargo, no se detiene solo en el aspecto gráfico:

siendo un elemento importante del marketing persuasivo, es claro que también habrá que evaluarlo en términos de contenido. Es decir, qué hay detrás de un Call to Action y por qué el navegador debe hacer clic allí mismo y no en otro lugar.

El Call To Action es un llamado a la acción real, esa acción que tienes que inducir o que quieres que se haga y entra dentro del ámbito de comunicación persuasiva porque una vez que el usuario ha llegado a nuestro sitio, no debemos permitir que se vaya, al contrario, debemos incluso convencerlo de que haga algo que pueda convertirse en una ventaja para ambos, es decir para nosotros y para el usuario. Soy de la opinión, de hecho, seamos realistas, lo sé con certeza, que 10.000 visitas diarias con una tasa de rebote (bounce rate) del 99% son menos útiles que 500 con una tasa de rebote del 10% y una tasa de conversión de 5. o incluso el 10%.

Somos muy conscientes de que el rendimiento del sitio en términos de número de visitantes y tasa de rebote también depende del tipo de sitio, pero también es cierto que un sitio web corporativo está hecho para "haciendo negocios" y no peinar las muñecas y por ello es imprescindible que el visitante permanezca “en nuestra casa” o mejor dicho en el sitio durante más de 30 segundos, realizando acciones que hemos intentado inducirle a realizar. De lo contrario, ¿de qué estamos hablando?

Por ejemplo, en el caso de sitios corporativos es muy importante hacer contacto con el visitante, en el caso de los sitios de comercio electrónico es necesario Vender productos, en el caso de sitios de información es necesario catalizar la atención posiblemente solicitando un comentario final; también existe la eventualidad de querer sólo hacer marcas, y puede llevar mucho menos tiempo, pero esa es otra historia.

La tu llamada a la acción. es una parte integral de redacción persuasiva: necesitas barrer todas las dudas del cliente potencial para empujarlo a la acción. No digo engañarlo, eso sí, sino poder hacerle entender el verdadero valor del producto (o servicio) que estás vendiendo y sobre todo la necesidad real, a veces no expresada.

La accesibilidad de las llamadas a la acción está íntimamente ligada a dos aspectos: la semántica de las etiquetas utilizadas para identificar una acción y la forma en que se realiza esta acción.

La semántica de las llamadas a la acción debe explicarse por sí misma. Un botón, un enlace, debe tener una etiqueta que identifique exactamente la acción que el usuario va a realizar. Recientemente vi los cambios realizados por algunas redes sociales y CMS en la llamada a la acción de carga de imágenes: básicamente ahora tenemos dos botones que dicen "Seleccionar imagen". Increíblemente, carece de un botón que diga "Subir fotos". Esto genera confusión en los usuarios, teniendo en cuenta además que cualquiera que navegue con un lector de pantalla tiene una visión seriale de la página, es decir, carece de la mirada global propia de los usuarios que navegan con un navegador visual.

Se deben evitar las etiquetas vagas, genérico o poco claro. Una etiqueta que debe evitarse es "Haga clic aquí". Si navega por una página que tiene llamados a la acción etiquetados de manera similar con un lector de pantalla, escuchará una serie interminable de "(enlace) Haga clic aquí" que no le brindarán ninguna información útil sobre la naturaleza de la acción que va a activar. .

Otra cosa a evitar es el abuso de atributos. title algunos enlaces Cuando se usa discretamente, este atributo puede proporcionar información contextual valiosa sobre la acción a realizar, pero cuando se usa en exceso, convierte la navegación por la página en un calvario. De hecho, los lectores de pantalla asocian cada enlace con su propio título y lo leen antes que el contenido del elemento.

Desde un punto de vista gráfico, y teniendo en cuenta las necesidades de los usuarios con discapacidad visual, aquellos elementos que recuerdan una acción deben estar claramente visibles y en relieve, con fuentes lo suficientemente grandes como para permitir una fácil lectura. Lo que es más importante, se deben usar algunos ajustes a nivel de CSS para permitir que dichos elementos se adapten a los cambios en el tamaño de fuente que un usuario con discapacidad visual puede realizar en la página. Por último, pero no menos importante, deben tener un contraste de color adecuado entre el texto y el fondo, para evitar problemas con los daltónicos.

nginx: un nuevo servidor web

JavaScript y su uso correcto

Con respecto a cómo se desencadenan estas acciones, debemos pensar en JavaScript.

Recordemos que JavaScript y accesibilidad no son incompatibles, siempre y cuando respete algunas de las mejores prácticas simples. Uno de estos se refiere a los enlaces y cómo mantenerlos accesibles incluso con JavaScript deshabilitado o no compatible. En este sentido, es necesario distinguir entre enlaces efectivos (que conducen al usuario a una nueva página o que, en todo caso, enlazan con recursos) y enlaces desencadenantes, es decir, enlaces sin contenido real pero que sirven para "disparar" acciones de JavaScript.

Una práctica a evitar es el de enlaces sin valor para el atributo href, como <a href="" id="trigger" >...</a>. En los navegadores sin compatibilidad con JavaScript, como Lynx, dicho enlace hará que la página se vuelva a cargar por completo. Por supuesto, podemos generar completamente el activador con JavaScript, pero el enlace no estará disponible si JavaScript no es compatible o está deshabilitado. Muchos sitios estáticos también utilizan esta técnica para generar enlaces permanentes, ya que el navegador considerará la página actual como el valor del atributo que falta. href.

Por lo tanto es necesario dar un valor a este atributo, considerando también el hecho de que para las especificaciones XHTML el atributo href No puede estar vacío. ¿Pero cuál? Muchos han optado por utilizar el carácter hash (#) como relleno. Sin embargo, incluso esta solución tiene limitaciones, ya que con JavaScript deshabilitado o no compatible obtendremos el efecto de crear una referencia a un ancla inexistente, lo que puede desorientar a quienes navegan por la Web con tecnología de asistencia no visual.

La solución, por supuesto, está en algún punto intermedio: de hecho, podemos crear un ancla que apunte al contenido real de la página. En el caso de contenido generado a través de JavaScript, podemos usar un enfoque como este:

Ayuda El correo electrónico debe tener el formato nombre de usuario@dominio.extensión

Apliquemos estilo a nuestro div, que ocultaremos con JavaScript. Si JavaScript no es compatible o está deshabilitado, nuestro div simplemente permanecerá visible. Para ocultarlo, usemos una clase CSS para enlazar cuando se cargue el documento:

.hidden { posición: absoluta; superior: -1000em; }

Tanto jQuery como Prototype tienen métodos para ocultar un elemento, pero recuerda que hacen uso de la declaración display: none. Desafortunadamente, esta declaración es interpretada por los lectores de pantalla, que tienen soporte parcial para JavaScript, lo que les impide leer el contenido de un elemento. En este punto, si usamos jQuery, podemos escribir:

$('#trigger').click(function() { $('#email-help').removeClass('hidden'); });

He evitado deliberadamente insertar la declaración return false; porque algunos lectores de pantalla pueden interpretar un evento click, equiparándolo a un evento de teclado en algunos casos. Si hubiera insertado tal declaración, dichos programas no habrían seguido el destino del enlace y, por lo tanto, no habrían podido leer el contenido de nuestro div. El único efecto desagradable para los navegadores normales es ver el ancla añadida a la URL de la página actual, pero esto no afecta en modo alguno a su accesibilidad y usabilidad.

Con las modificaciones apropiadas, las mismas observaciones también se aplican a los botones, obviamente teniendo en cuenta las diferencias en la casuística de los eventos de JavaScript disponibles.

El primer principio de usabilidad que se aplica a las llamadas a la acción es elidentificabilidad. Una llamada a la acción siempre debe ser inmediatamente reconocible por el usuario y su función debe entenderse fácilmente. Hay dos aspectos involucrados:

• diseño de la llamada a la acción
• etiquetado de la llamada a la acción

Cada aspecto está indisolublemente ligado al otro. El diseño de una llamada a la acción nunca debe afectar su reconocimiento. Un botón en un formulario, independientemente de cómo se modifique usando CSS, siempre debe hacer que el usuario piense "Ahora hago clic aquí". De hecho, según Steve Krug, el usuario debe hacer clic sin pensar si lo que ve es un botón o no. La acción debe ser inmediata (dentro de los 300 milisegundos aproximadamente, exactamente como lo determina una investigación reciente sobre la experiencia del usuario).

En cambio, el segundo aspecto está vinculado a cómo se define textualmente una llamada a la acción. Las etiquetas deben ser simples, claras y autoexplicativas. Un ejemplo es la traducción del elemento "Guardar" en el menú contextual de las aplicaciones de Mac OS X: en italiano, este elemento se ha traducido como "Grabar", que ciertamente no es el mejor en términos de claridad. Entonces, si un botón es para iniciar un motor de búsqueda, la etiqueta debe decir "Buscar" y así sucesivamente. En este caso la imaginación debe dejar paso al sentido común: las convenciones en este caso son muy útiles.

Está claro que quedaría mucho por escribir sobre el tema pero el propósito de este largo artículo es más que nada hacer pensar, tomar conciencia de lo que se está haciendo y sobre todo entender que un simple botón que debe inducir a ponerse en contacto con usted o enviar un correo electrónico o una solicitud, no es una cosa tan trivial.

Diseño para empresas, Sketchin: “Partir siempre del cambio…”