Los botones de un sitio web cumplen con varias finalidades, más allá de principalmente conducir a otro link o ejecutar cierto script. Los botones llevan un mensaje inherentemente visual que debe ser coherente con la imagen general del sitio. Por ello, un botón es más que un hiperlink, es un ícono, que a su vez debe ser un “call to action” en sí mismo.

Uno de los factores más importantes en cuanto a diseño de botones es la usabilidad por parte del visitante. Los botones, y a pesar de que parezca evidente, conviene aclararlo una vez más, deben servir para facilitar la navegación en el sitio, y no para complicar las cosas. Por eso, a la hora de diseñar botones, conviene dejar los scripts de lado, o las botoneras enteramente diseñadas en flash para volver a diseños más sencillos que minimicen los tiempos de carga. Por ejemplo, en un newsletter, sería una muy mala idea poner un botón, o cualquier otro contenido, en flash.

Un botón es una guía para navegar en el sitio, una parte integral visual de la página, y un call to action que invita a realizar alguna acción en particular. Imaginemos un sitio sin botones, sólo con texto. Sin dudas, internet sería muy distinta de lo que es. Por todo esto, a menudo no se le presta la consideración necesaria al diseño de los botones del sitio.

Es importante mantener una identidad visual y una coherencia, para que los botones no pasen desapercibidos a los ojos de los usuarios. Por ello, la mayoría de los botones son rectangulares, más anchos que altos, y pueden acomodar un ícono y dos o tres palabras de texto. Por lo general, los botones de mayor tamaño son de bordes redondeados. Para botones de formas irregulares, donde por ejemplo el ícono supera el alto del botón, las imágenes de formato png permiten las transparencias, por lo cual, sobre todo si el fondo tiene algún tipo de trama, es posible que el botón se ajuste perfectamente, sin las marcas de bordes de color tan antiestéticas.

Cuando hablamos de coherencia nos referimos a la coherencia visual. El tamaño debe ser equilibrado, no sólo en cuanto al resto de los componentes del sitio, sino en cuanto al texto que se incluya en el botón mismo. Como componente visual de gran significación, el uso de íconos en el mismo botón ayuda a dar una atribución más clara del sentido, y contribuye como elemento persuasivo en la intención de call to action.

El uso de íconos en los botones aporta una gran fuerza comunicativa. Por ejemplo, puede presentar la impronta a comprar, si el ícono fuera una canasta, o puede indicar que el usuario entrará en un proceso de varios pasos, si se trata de una flecha. Esta fuerza para transmitir significado puede ser muy bien aprovechada en las landing pages, donde queremos destacar el call to action, o en newsletters. Por lo general, los últimos son mensajes con poco contenido textual pero con una call to action bien destacada. En estos casos, un buen botón con un ícono importante puede convertirse en una invitación para llegar a una efectiva landing page, y de esta forma incrementar de forma significativa nuestras tasas de click through.
Para lograr un índice óptimo de usabilidad, es necesario que el botón sea efectivamente clickeable. Lo mejor es respetar los estados clásicos de los botones: que cambie de aspecto ligeramente al pasarle el ratón por encima, y que haga algún tipo de click cuando se pincha en él. De esta manera, sacaremos el mayor provecho de estos elementos comunicativos, a menudo pasados por alto.