Cómo Diseñar los Botones de tu Web en 3 Pasos

Son muchos los elementos que marcan la diferencia entre un diseño web y un buen diseño web y uno de los factores principales es el cuidado de cada uno de los esos elementos que participan del diseño.

No solo debemos tener en cuenta la experiencia de usuario (aunque es uno de los factores principales) para diseñar una buena estructura web. Sino que hay ciertos elementos, que ya hemos visto en algunas ocasiones, que tienen un papel fundamental y de los cuales hemos de cuidar cada uno de los detalles, y uno de ellos son los botones.

A rasgos generales hemos hablado en distintas ocasiones de ellos, de su forma, de su claridad… Pero dada la importancia de los mismo, hemos considerado necesario hacer un articulo solo para ellos, para comprobar todo lo que hemos de tener en cuenta en el diseño de los mismos.

Al final, son unos de los elementos mas importantes en una web, pues nos suelen acompañar mientras navegamos a través de ellas y son los encargados de ir guiando nuestra atención por ella, facilitando la navegación y además consiguiendo distintos procesos.

Así que vamos allá! 🙂

Análisis del botón

Seguro que os preguntareis como un elemento que puede parecer pequeño, tiene tantos factores a tener en cuenta, pero la realidad es que es un elemento bastante complejo, del que el diseño de cada uno de esos factores, conseguirá que nuestro usuario permanezca con nosotros o no.

Creo que no somos capaces de imaginarnos una web sin botones y por lo tanto, estos deben ser perfectamente diseñados. En general hay tres puntos que hemos de tener en cuenta:

1. Decidir cuántos botones habrá y la jerarquía entre ellos: Qué texto contendrá cada uno. Hacer un esquema de que botones necesitamos y para que

2. Definir las cualidades del botón, colores, bordes, situación del texto…: Todo lo que lleva aparejado el diseño, teniendo en cuenta su situación.

3. Saber cómo se comportara el botón cuando hagamos hover sobre él y también cuando lo ciclemos: Un botón tiene distintas posiciones y todas deben ser diseñadas.

Así, para tomar todas estas decisiones, hemos de estudiar bien todos los aspectos del mismo y tomar la decisión que encaje con él.

elementos-diseno-boton-web

Aquí un ejemplo de todos los elementos que hemos de tener en cuenta y que deben estar perfectamente pensando. ¿A qué ya no parece un elemento simple?

1. Definición de los tipos de botones y del texto de los mismos

Lo normal, es que no solo usemos un tipo de botón, sino que quizá partiendo del mismo diseño, demos distintas jerarquías, cambiando quizá el tamaño. Si por ejemplo estamos ante una lista en la que todos llevan el mismo botón, intenta hacer estos más claros, y que el usuario no se pierda en un bosque de botones.

Los botones se usan en general, para llamar la atención de uno u otra forma, por lo que es muy importante que se entiendan bien y que sepamos darle importancia a cada uno de ellos.

distintos-botones-web

De la misma manera, decide el texto que va a incluir el mismo. Busca las palabras claves que hagan que tu usuario sepa perfectamente dónde y porque está clicando justo ahí. Al final, un botón es una llamada de atención por lo que hemos de conseguir.

elegir-texto-boton

Una vez tengamos los distintos tipos de botones que vamos a necesitar así como el texto que va a contener cada uno de los mismos, podemos dar el siguiente paso y decidir su diseño.

2. Diseño del botón según sus cualidades

Ya sabemos cuántos tipos de botones necesitamos por lo que vamos a comenzar con el diseño.

A la hora de definir el color el botón, además de obviamente tener en cuenta los colores corporativos e intentar introducir estos en los elementos de la web y por lo tanto en los botones, hemos de tener claro las distintas posiciones que este ocuparía dentro de la web, específicamente los distintos colores de fondo.

colroes-fondo-web-botones

Es muy importante tener en cuenta el color de fondo, porque necesitamos que el botón genere contraste. Aunque tengamos que usar un color nuevo, que de primeras no estuviera entre los colores corporativos, lo que no podemos permitir es que no exista contraste.

Así, debemos tener claro, según las posiciones que ocupe, si va a ser relleno o va a tener borde y esta decisión va muy unida al punto 3, la decisión del comportamiento del botón en sus distintas posiciones.

Ya sabemos también el texto que se va a incluir dentro del mismo, pero además, esas palabras o frase, no puede estar colocada aleatoriamente dentro del botón, sino que su lugar deberá ser el optimo para que la vista del usuario se centre en el. Estas tienen una posición particular, y si aparecen desordenadas también lo harán a nuestra vista.

posicion-texto-dentro-boton

3. Funcionamiento del botón

Es muy importante saber que un botón en una web no es solo lo que vemos en un primer vistazo, sino que tiene distintas posiciones que deben ser diseñadas. No es lo mismo el botón cuando se clica, que cuando se hace hover.

Cada posición necesita de un diseño distinto y que por supuesto la diferencie del anterior para poder marcar esa diferencia de estado y funcionamiento.

posiciones-boton

Y claramente cada una de esas posiciones deben tener un diseño particular pero que tengan relación con el diseño global. Tampoco tendría mucho sentido que el botón en hover, tuviera un diseño totalmente distinto con le botón cuando se clica.

Hay que definir las distintas posiciones del botón y establecer el diseño de las mismas, siempre con el objetivo de un diseño global.

Consejos generales del diseño

En general, y siguiendo los consejos anteriores, cuando estamos diseñando un botón debemos tener muy claro para que lo estamos haciendo y por supuesto diseñarlo para ese fin. Saber el lugar que ocupa y hacer que cumpla su función. Sin caer en errores de diseño.

A veces por querer minimizar y conseguir un diseño totalmente flat, tendemos a hacer que se parezcan demasiado los botones y los enlaces. Sin embargo son dos elementos muy distintos que necesitan una diferenciación especial. No son lo mismo y por lo tanto el diseño no puede ser igual.

Al final, estamos diseñando un elemento dentro de un conjunto, por lo que sin perder de vista el global, debemos conseguir con el diseño del botón que llame nuestra atención y consiga el propósito. No hay que dejar al azar elementos que nos pueden ayudar a conseguir nuestro propósito.

Comentarios (1)

  1. Con lo difícil que puede ser para atraer a los clientes a la página web de su empresa en el primer lugar, es un reto aún mayor para conseguir que se haga clic en sus anuncios u otros enlaces a información de productos y servicios. Los botones web son hipervínculos que contienen imágenes gráficas diseñadas para atraer la atención de un visitante a sus enlaces y animarlos a hacer clic.

    !Suerte en el diseño de los botones para tu web!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *