El uso de los botones de acción se encuentra muy extendido hoy en día. Normalmente, son la forma de invitar al usuario a realizar una acción o tomar una decisión, dependiendo del propósito del sitio web. Pero, ¿qué hace que los botones de acción consigan el objetivo propuesto?

Botones con alto contraste

El principal factor que convierte un enlace cualquiera en un botón de acción es el contraste que tiene con respecto al resto del diseño. Los elementos que sobresalen por encima de otros en una página atraen la atención del usuario con más facilidad, de forma que es posible dirigir su mirada de forma estratégica.

Para lograr un efecto contrastado hay numerosos efectos y detalles que se pueden aplicar a los botones de acción. A continuación veremos algunos de los más importantes.

Color

El color del botón es el factor que más importancia tiene para determinar el nivel de contraste. Un botón de acción debe poseer un color diferenciado del resto del diseño, de forma que sea visible incluso ante la visión periférica del usuario.

También es recomendable utilizar colores saturados y vibrantes. Una mayor saturación sugiere al usuario vitalidad y actividad, de forma que le invita a tomar decisiones e interactuar con él.

Es importante tener en cuenta que aunque el botón ha de diferenciarse, no debe contrastar de forma exagerada con la paleta de colores del sitio. Un botón que llama demasiado la atención puede convertirse en una distracción, restando importancia a los contenidos y posiblemente frustrando al usuario.

Tamaño

El segundo factor más importante es el tamaño. Al ser una forma básica de diferenciación, un botón de acción con un mayor tamaño que el resto de elementos puede atraer atención con más facilidad.

Además, el tamaño de un elemento es comúnmente asociado con su importancia. Esto nos permite crear una jerarquía dentro del diseño que transmita la usuario cuáles son los elementos principales, dando una mayor prioridad a éstos últimos.

Relieve y profundidad

Para evitar que un botón se confunda con parte del diseño, debe tener un nivel mínimo de relieve. Al imitar objetos reales tales como pulsadores o palancas, un botón puede transmitir visualmente su función e interactividad. Para ello, es conveniente emplear efectos visuales tales como:

  • Gradientes
  • Bordes suavizados
  • Bordes marcados
  • Sombras

Al utilizar estas técnicas, un botón de acción puede captar el interés del usuario con mayor facilidad, invitando a que interactúe con él. Esto se ve acentuado con el uso de efectos hover y click diferenciados, los cuales pueden estimular la curiosidad del usuario.

Separación y delimitación

Tal y como se comentó en un artículo anterior, el espacio en blanco y la distancia entre elementos puede transmitir importancia, asociación o incluso dirección. Al crear una separación entre el resto de elementos y un botón de acción, es posible resaltar su importancia. De la misma forma, unir un botón a una imagen o un texto creará un vínculo entre ellos, aportando un contexto específico al conjunto de elementos.

Textos con propósito

Los textos que los botones de acción poseen también son un elemento importante. Tanto la tipografía como el conjunto de palabras utilizado impactan en gran medida sobre el mensaje que el botón transmite. Por ello, siempre es recomendable utilizar un texto relevante, y que esté relacionado con el propósito del botón. El uso de palabras genéricas tales como “Continuar” o “Más Información” no contribuye a crear interés en el usuario.

A fin de invitar a los visitantes a pulsar el botón, se deben utilizar palabras relevantes, que creen una sensación de urgencia e inmediatez. Dado que los usuarios muchas veces actúan por impulsos, el uso de verbos activos y frases con impacto les ayuda a tomar una decisión.