diseño web
29 / 04 / 2019

9 consejos para el diseño de botones web

SectorHablamos de
Diseño de botones web

Un botón debe parecer un botón

Los botones son uno de los elementos más comunes en el diseño web. Se han convertido en un recurso prácticamente presente en todo tipo de portales. Desde sencillas webs corporativas que nos incitan a contactar con su negocio, hasta tiendas online que los usan durante el proceso de compra de sus productos.

Desde su uso en las primeras páginas web, el diseño de los botones ha ido evolucionando con el tiempo para modernizarse y adaptarse a las corrientes visuales de cada año. Pese a ello, existen una serie de convenciones que deben respetarse y aplicarse para que estos elementos del diseño cumplan con su función.

En definitiva, la función de un botón dentro de una web es muy simple: ser clicado por un usuario para realizar una acción. Y para conseguir que cumplan este cometido, os traemos una serie de consejos sobre el diseño de botones web:

1. Los botones deben parecer botones

Aunque parezca muy obvio, cuando añadimos un botón a una web, este debe parecer un botón. Es muy fácil que durante el ejercicio creativo del diseño del sitio web, este recurso evolucione hasta convertirse en algo poco identificable como tal.

Como norma general, cualquier usuario que acceda a nuestra web debe poder identificar un botón como elemento susceptible de ser clicado. ¿Cómo lo conseguimos? Siguiendo una serie de convenciones visuales habituales para los botones que incluyen el color, la forma o el tamaño.

2. Ten en cuenta el diseño para móviles

El auge y consolidación del uso de Internet en smartphones hace imperativo que el diseño de una web se realice teniendo en cuenta las características de uso de dichos dispositivos. Evidentemente, esto incluye los botones.

Por ejemplo, un recurso tan extendido en ordenadores como el hover es prácticamente invisible en smartphones.

3. Ubicación dentro de la página

La ubicación de los botones dentro de una página debe ser coherente. Debemos respetar el flujo de lectura y navegación de los usuarios, y conducirlos hacia los botones. Un ejemplo muy obvio: el botón de envío de un formulario nunca estará ubicado al inicio del mismo, dado que el flujo de uso natural de un usuario será rellenar los campos del formulario y finalizar con su envío.

Otro punto a tener en cuenta vinculado con la ubicación de los botones en una web es el orden. Ante la presencia de varios de estos recursos, deberemos utilizar una ordenación lógica e intuitiva. Por ejemplo, durante el proceso de compra de un e-commerce, el botón para continuar al siguiente paso del proceso estará ubicado a la derecha, y aquel destinado a retroceder un paso o cancelar la operación a la izquierda.

4. Deja clara su acción

Antes de hacer clic en un botón, el usuario debe tener claro qué acción se realizará a continuación. La incertidumbre provocada por desconocer la finalidad de un botón puede conllevar que muchos usuarios simplemente no hagan clic en el mismo. Como veremos más adelante, podemos utilizar recursos como el texto o la iconografía para indicar a los navegantes cuál será el resultado de hacer clic en el botón.

5. Escoge bien el color

El color de un botón en una página web tendrá cierta influencia en la percepción de los usuarios del mismo. Cada proyecto web es diferente, pero en líneas generales podemos definir los siguientes puntos clave a la hora de escoger el color de los botones de una web:

  • Contraste: el color debe resaltar sobre los elementos colindantes.
  • Legibilidad: el tono elegido tiene que permitir que el texto del botón sea fácilmente legible.
  • Convenciones habituales: existen preconcepciones sobre algunos colores que, en algunos casos, nos llevarán a evitar su uso. Por ejemplo, el verde para acciones positivas.

6. Se coherente en toda la web

El diseño de los botones a través de todo un portal web debe seguir el mismo estilo y líneas visuales. De este modo, los usuarios aprenderán de forma intuitiva qué es un botón y qué no en nuestra web, y qué acción pueden realizar al hacer clic en ellos.

En este punto se incluyen aspectos del diseño de los botones, como la forma, tipografía, el color, su ubicación o su tamaño.

7. Utiliza los textos del botón y los colindantes

El texto del botón debe dejar muy clara la acción que se va a realizar mediante el clic del mismo. También podemos utilizar textos complementarios al botón para explicar a los usuarios su funcionamiento, o incluso como recurso persuasivo.

8. Emplea el tamaño adecuado

De nada nos sirve añadir un botón en una web si el usuario no lo ve por ser demasiado pequeño. O en el caso de los Smartphone, si no es capaz de hacer clic en el mismo. La elección del tamaño de los botones debe seguir un criterio de usabilidady también de priorización visual.

9. Añade interacción a los botones

En el caso de los ordenadores, podemos aplicar cambios de estilo en los botones cuando los usuario pasan el ratón por encima, incluso cambiar el icono del cursor.

También es recomendable aplicar un recurso de interacción que sirva para indicar al usuario que el botón ha sido clicado. De este modo, evitaremos que el usuario desconozca si realmente ha hecho clic en un botón.

Aunque sigamos estos consejos sobre el diseño de los botones de una web, deberemos tener en cuenta las características de cada proyecto a la hora de definir su aspecto. Si necesitáis ayuda con éste o cualquier otro elemento del diseño web, no dudéis en contactar con nosotros.

Noticias relacionadas

¿Tienes un proyecto en mente? Cuéntanoslo

Finalidades de la protección de datos: Envío de nuestro boletín comercial y de comunicaciones informativas y publicitarias sobre nuestros productos o servicios que sean de su interés, incluso por medios electrónicos. Legitimación: Consentimiento del interesado. Destinatarios: No están previstas cesiones de datos. Derechos: Puede retirar su consentimiento en cualquier momento, así como acceder, rectificar, suprimir sus datos y demás derechos en info@latevaweb.com. Información Adicional: Puede ampliar la información en el enlace de Política de Privacidad.

Utilizamos cookies propias y de terceros para ofrecerte un mejor servicio. Más información

Aceptar