Los botones son el vínculo más claro entre la experiencia del usuario y las conversiones. Añadir a la cesta, logarse o enviar un formulario son algunas de las principales acciones a las que estamos más que acostumbrados en nuestro uso de webs, apps, programas y juegos.
Cada vez utilizamos más aplicaciones informáticas, tomamos cientos de decisiones a diario y muchas veces pulsamos o hacemos clic casi instintivamente, como algo natural o que hemos automatizado.
Y sí, también muchas veces hacemos esos clics sin terminar de asimilar la información aun en procesos con los que interactuamos por primera vez. ¿Cómo es posible?
De esto tiene mucha ‘culpa’ la sofisticación y los estudios de comportamiento de usuario: se genera no solo la necesidad de obtener algo, sino también la urgencia. O sencillamente reconocemos o asemejamos los procesos con pautas que hemos realizado previamente. Por ello es habitual que nos dejemos llevar según nos guíe la interfaz sin cuestionarnos la acción que estamos llevando a cabo o aceptando, siendo más o menos conscientes de los riesgos o concesiones que nos pueda acarrear.
¿Todo esto lo hace solo un botón? ¡Pues claro que no! Pero sí que el botón es crítico: es el último elemento, el definitivo para confirmar e iniciar el proceso interno y de ahí que dedicar tiempo a su diseño sea fundamental.
Características de los botones
Parémonos a analizar qué es un botón y cuáles son sus características: fijándonos en lo más básico podríamos decir que es un recuadro de color con un texto ‘dentro’. Esto es ser quizás demasiado simplista.
Vayamos punto por punto:
- Un recuadro de color: el color sin duda influye en nuestro comportamiento, puede producirnos una mayor tensión o seguridad, prisa o calma… Usar un color u otro debe estar justificado y tampoco podemos olvidarnos de ser coherentes con la imagen de marca. El color elegido además, deberá destacar del resto de elementos que lo rodeen y tener suficiente contraste tanto con el fondo como con el color del texto que integra.
- Un texto dentro: así es, y tanto su mensaje como su forma (tipografía, caja, color…) deben estar bien escogidos.
¡Pero hay más!
- Tamaño: hay que tener en cuenta las proporciones con respecto a los otros elementos que lo circundan, así como el espacio que guarda con estos (y entre el propio texto y los márgenes del botón) para que sea visualmente equilibrado, pero también su tamaño y espaciado está íntimamente ligado a la usabilidad ya que influye en cómo de cómodo será al pulsarlo y que otros elementos no interfieran.
- Forma y volumen: hacer esquinas o bordes redondeados, poner color al contorno o usar sombreado son decisiones que deben ir ligadas tanto a la experiencia del usuario como a la guía de estilos de la marca.
- Ubicación: según los elementos que lo acompañen, tendremos que pensar dónde colocarlo para que sea fácil de localizar y cómodo para interactuar con él.
- Contexto: la voz y el tono que se emplean (imperativo, infinitivo, tratamiento de usted o tú…) y el propio mensaje del botón deben aportar información de valor y ser parte de un discurso coherente.
Vaya cantidad de decisiones para un elemento tan pequeño, ¿verdad? Y para rizar el rizo, ¿qué ocurre cuando tienen que convivir varios botones?
Obviamente no a todas las acciones querremos darles la misma relevancia, pero tampoco hacer una escala cromática que acabe distrayendo. Habrá que jerarquizar, ordenar y dar estilos de una forma armoniosa y coherente teniendo en cuenta todos los puntos anteriores además de la guía de estilos de la marca.
Está claro que los botones requieren una atención especial y bien merece la pena dedicar nuestro tiempo a pensar bien su diseño.
Gracias a unos botones bien diseñados, unido a una secuencia de procesos fácil, accesible y bien guiada, muchas aplicaciones y market-places consiguen mejorar sus conversiones; y algunos programas fidelizan a sus usuarios por la comodidad y seguridad que transmiten a la hora de tomar decisiones.
¿Crees que tu web o producto no convierte tanto como debería? Escríbeme y encontremos juntos la mejor solución 🙂