Consejos de diseño de botones: simple, pequeño y vitalmente importante
Hablamos mucho de detalles en diseño. Es por una buena razón. Prestar atención incluso a los detalles más pequeños puede hacer o deshacer un diseño.
Hoy vamos a profundizar en uno de esos detalles y buscar formas de diseñar botones en los que los usuarios quieran hacer clic (o tocar). Aunque los botones pueden ser uno de los elementos más pequeños en su diseño, son uno de los más importantes. ¿De qué otra forma comunicaría las acciones a un usuario? ¿De qué otra manera proporcionarían información en ese ciclo de retroalimentación?
Piense por un momento en una de las grandes quejas sobre el diseño plano en las primeras etapas: los usuarios no sabían qué era y qué no era interactivo en el diseño. De ahí la importancia del gran diseño de botones.
Explore los recursos de diseño
Debería verse tocable
Los usuarios deberían ver un botón en el diseño y pensar que necesitan (um, querer) alcanzarlo y tocarlo. Si bien se puede hacer clic en casi cualquier botón de tamaño en una pantalla, el tamaño y el relleno alrededor de un botón en un dispositivo táctil es vital.
El usuario promedio tiene un tamaño de punta de los dedos de entre 8 y 10 milímetros de ancho. Con eso en mente, un objetivo de 10 por 10 milímetros es un gran tamaño de objetivo inicial para botones en dispositivos táctiles. (Eso es un poco más pequeño que las teclas estándar de su teclado).
Hay algunas cosas de diseño que puede hacer para que un elemento se vea táctil también.
- Una sombra sutil puede "levantar" el elemento del fondo para que se sienta un poco más cerca del usuario.
- Un mayor relleno alrededor de los botones hace que parezca más fácil hacer clic y ayuda a guiar al usuario al elemento.
- Las acciones de desplazamiento o alternar de color pueden mostrar a los usuarios lo que están haciendo en tiempo real y significan acciones.
El color importa
El color del botón debe ser especial en todo el diseño del sitio web. Este es un buen lugar para emplear un color de acento particular y usarlo solo para acciones de botones.
El color del botón debe ser brillante y atractivo. Hay una razón por la que tantos diseños incluyen botones amarillos, azules o verdes. Son fáciles de ver y se destacan del resto del diseño. Para un botón que realmente se destaque, seleccione un color que sea un par complementario al color principal en el diseño (opuestos en la rueda de colores).
La otra preocupación de color es la marca. Desea seleccionar un color de botón que funcione con su paleta de colores y su identidad de marca. No importa cuánto desee que un color de botón se destaque en el diseño, debería funcionar con, no en contra, su esquema de color primario.
El tamaño importa aún más
¡Hazlo grande!
Los botones necesitan algo de peso para que los usuarios se sientan inmediatamente atraídos por ellos en la pantalla. La tendencia del botón fantasma (contornos sin un color de botón distinto) se centró en botones grandes en términos de conteo de píxeles, pero careció de peso visual. En términos de tamaño, un botón debe ser grande en ambos aspectos. (Esta es una razón por la que la tendencia ha pasado de moda).
Sin embargo, hay un punto complicado cuando un botón pasa de ser de tamaño perfecto a vergonzosamente demasiado grande. Exactamente cuándo sucede esto depende de la escala de otros elementos de diseño, pero sabrá con certeza cuándo sucede. Si el botón es todo lo que ve en el diseño, lo más probable es que sea demasiado grande.
La colocación es clave
¿En qué parte del diseño debe ir el botón? ¿Existe una ubicación que ayudará a generar clics más que otros?
En la mayoría de los casos, los botones deben seguir el contenido para el que están diseñados.
- Al final de un formulario
- A la derecha de un mensaje de llamada a la acción.
- Al final de la página o pantalla
- Centrado debajo de un mensaje
¿Por qué estas ubicaciones? Porque sigue el camino natural de la acción y la forma en que los usuarios leen e interactúan con los sitios web.
Centrarse en el contraste
Con todos los elementos de diseño, el contraste es una consideración importante. Esto es cierto para las técnicas utilizadas dentro del elemento en sí, pero también para la relación entre el elemento y su ubicación en el diseño y sus alrededores.
Recuerde pensar en las siguientes técnicas en este entorno dual:
- Color
- Escriba peso y tamaño
- Tamaño de elementos
- Forma como se relaciona con el fondo
- Transparencia o animación
- Sombras o graidentes
- Espacio en blanco y relleno
Usar formas estándar
Cuando se trata de botones, solo hay dos formas que debe considerar:
- Círculos El botón circular se ha vuelto popular gracias a los conceptos de Material Design y Material Lite. Con cualquier estética similar, un botón redondo funciona con el diseño y se adapta al patrón del usuario.
- Rectángulos Esta forma predeterminada debe ser su opción para todos los botones, a menos que esté usando un círculo en la instancia anterior. Es lo que los usuarios saben y están acostumbrados. La mayoría de los rectángulos de botones tienden a ser al menos dos veces más anchos que altos (a veces tres o cuatro veces más anchos). Los usuarios ven esta forma e inmediatamente saben qué hacer. Si bien algunos pueden argumentar los méritos de las esquinas redondeadas versus los ángulos de 90 grados, cualquiera de los dos es igualmente apropiado según su estilo de diseño.
Diga a los usuarios qué hacer
Cada botón debe incluir una instrucción de texto que indique a los usuarios exactamente qué hará el botón. Desea mantener el lenguaje breve y simple y debe coincidir con el tono del resto del diseño del sitio web.
Entonces, cumpla esa promesa. Lo siguiente que aparece debe decirle al usuario que ha llegado al destino esperado. Ya sea que envíe un formulario, realice una compra o simplemente pase a otro enlace, el usuario debe obtener el resultado deseado al interactuar con el botón. (Si no, asegúrese de que haya un error indicado en el ciclo de retroalimentación para que sepa qué correcciones deben ocurrir en el diseño del sitio web).
Los ejemplos de mensajes de botón incluyen:
- haga clic aquí
- Crea una cuenta ahora
- Pruébalo gratis
- Añadir al carrito
- Lee mas
Dar botones de alta importancia visual
La mayoría de los diseños están llenos de pequeños elementos de la interfaz de usuario. Una trampa que sucede es que el diseño de estos elementos se empuja hasta que el proyecto esté casi terminado. Y luego elige un diseño para todos los elementos de la interfaz de usuario, con algunas pequeñas diferencias.
No te quedes atrapado en esta situación peligrosa.
¡En el diseño, los botones deberían verse como solo botones! Nada más en el diseño debe tener la misma forma, color y peso visual que un botón. Necesitan ser diferentes. Piense en crear un estilo para botones que sea más grande que cualquier otro elemento similar en el diseño, o use un color de acento que sea solo para botones. Estas técnicas pueden ayudar a que un botón se vea especial y enfatizar su uso.
Conclusión
¿Estás comenzando a repensar algunas de las opciones de diseño de tus botones? ¿Crees que puedes crear algo que fomente mejor los clics?
Pruebe algunos de estos consejos mientras vigila el análisis de su sitio web para ver con precisión a qué cambios de diseño responde su base de usuarios. Use esa información para crear aún más botones en los que se pueda hacer clic para proyectos futuros.
