Gerard Osan
phone
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:
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.
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.
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. Es decir, es importante que se establezca una jerarquía de botones en la página.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.
Por otro lado, es importante que el usuario también reciba una respuesta a medida que va navegando, ya sea a modo de mensaje o notificación. Estos mensajes, ayudan al usuario a navegar de una forma más cómoda por la página web, sobre todo en el caso de las pasarelas de pago o compra.
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:
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.
Podemos acompañar de iconos que nos ayuden a comprender la acción que realizaremos, como es el caso de poner una cruz cuando sea un botón para cerrar una pestaña.
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.
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 usabilidad y también de priorización visual.
El tamaño del botón debe estar correctamente adaptado para cada uno de los dispositivos, ya que si es demasiado pequeño, dificultará su clicado.
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.
¿Tienes un proyecto en mente? Cuéntanoslo
Un botón debe parecer un botón