Los botones son un elemento esencial en una página web, es la forma en la que el usuario interactúa con el sistema.
Así que vamos a repasar los siete principios básicos para crear botones efectivos.
1. Haz botones que parezcan botones.
Cuando se trata de interactuar con una web o app, el usuario necesita saber de forma rápida que elementos son “clicables”.
Pero, ¿como sabe el usuario que elementos son interactivos y cuales no? El usuario se basa en su experiencia previa y en códigos visuales para deducirlo.
Por eso es importante que tu botón se parezca a un botón.
Esto es especialmente importante en los dispositivos móviles, ya que los usuarios de escritorio siempre tienen la posibilidad de pasar el cursos por encima de un botón para ver si el cursor cambia de forma, en cambio los usuarios de dispositivos móviles no tienen esa opción. La única forma de comprobar si lo que parece un botón es un botón, es pulsando sobre el.
Así que mi consejo es que no trates de reinventar la rueda, usa botones que sean familiares para los usuarios.
Aquí algunos ejemplos:
Después de muchas pruebas y analizando los datos se puede decir que la opción más efectiva es el botón con sombra.
Nos es mi preferido, pero al parecer el mostrar profundidad hace que el usuario asuma que algo pasara al hacer clic sobre el.
Espacio en blanco alrededor del botón.
Un consejo importante, deja suficiente espacio en blanco alrededor del botón, eso ayudará a llamar la atención y da a entender que se trata de un botón.
2. Pon los botones donde los usuarios esperan encontrarlos.
Somos animales de costumbres, así que lo mejor es que coloques los botones donde los usuarios esperan encontrarlos. No hagas que los usuarios tengan que estar buscándolos en los lugares más recónditos de tu web.
3. Etiqueta los botones con lo que hacen.
Puede parecer obvio, pero debemos etiquetar los botones con la acción que realizan.
Los usuarios tienen que entender claramente lo que va a pasar cuando hagan clic sobre tu botón.
Mira el siguiente ejemplo, imagina que has hecho clic sobre un botón de eliminación y te aparece el siguiente mensaje.
En este ejemplo no queda muy claro que hace cada opción. Muchos usuarios no tienen claro si al hacer clic sobre Cancel están cancelando el cuadro de diálogo o si están cancelando su cuenta.
En este caso hemos cambiado el botón OK por un REMOVE y hemos puesto el botón en rojo para indicar aire es una acción potencialmente peligrosa.
4. El tamaño si importa.
Digan lo que digan el trabajo si importa, y en el caso de los botones podemos utilizarlo para priorizar la importancia.
Siempre que puedas no incluyas más de un botón en la misma página web (Call to Action), pero en el caso de que tengas que incluir varios botones puedes hacer que el botón principal destaque sobre el resto haciéndolo más grande y utilizando un color destacado.
Pro punto importante a tener en cuenta a la hora de hacer botones para tu web es pensar en los dispositivos móviles.
A día de hoy el 50% de la visita de una página web proviene de dispositivos móviles, así que deberías hacer los botones accesibles para ellos.
En ocasiones los botones son demasiado pequeños en los móviles y eso hace que sean difíciles de pulsar sin equivocarte.
5. El orden de los botones.
Otro punto que puede parecer obvio, ordena los botones con cabeza y sentido común.
Por ejemplo, los botones de paginación “Anterior / Siguiente”, es lógico que el botón que nos mueve hacia adelante debe estar a la derecha y el botón que nos mueve hacia atrás debe estar a la izquierda.
Cuando vayas a incluir varios botones en tu web párate a pensar que orden espera encontrar el usuario.
6. No uses demasiados botones.
Otro de los principios básicos del desarrollo web, menos es más.
Cuantos más botones y opciones les das a tus usuarios menos hacen.
Cuando diseñes tu página web piensa muy bien que opciones quieres darle as tus usuarios y redúceles al mínimo posible.
7. Proporciona un feedback visual a la interacción.
Cuando el usuario pulsa sobre un botón espera que suceda algo, ya sea una muestra visual o subiera de que el botón ha sido pulsado.
Si al usuario no le queda claro que el botón ha sido pulsado puede que acabe pulsándolo de nuevo y eso puede causar errores u operaciones innecesarias.
En casos específicos como el de una descarga se puede mostrar el estado de la descarga en el propio botón.
Conclusión
Los botones son algo común en todas las páginas web, los hay por todas partes pero no por ello hay que dejar de prestarles la atención que se merecen.
Prensa que por lo general el método de conversión de tu página web va a pasar por el uso de uno de estos botones.
Y recuerda que si tienes alguna duda con el correcto uso de los botones en tu página web puedes usar mi formulario de contacto.
Originally published at https://ajra.es on August 15, 2019.
