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 buscaremos 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 de su diseño, son uno de los más importantes. ¿De qué otra manera comunicarías acciones a un usuario? ¿De qué otra manera proporcionarían información en ese circuito 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 del botón.
Debería parecer táctil
Los usuarios deben ver un botón en el diseño y pensar que necesitan (um, quieren) llegar y tocarlo. Si bien se puede hacer clic en el botón de casi cualquier tamaño en una pantalla, el tamaño y el relleno alrededor de un botón en un dispositivo táctil son vitales.
El usuario promedio tiene un tamaño de punta de dedo que tiene 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 de inicio 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 hacer que un elemento se vea también táctil.
- Una sombra sutil puede? Levantar? el elemento fuera del fondo para que se sienta un poco más cerca del usuario.
- El mayor relleno alrededor de los botones hace que parezcan más fáciles de hacer clic y ayuda a guiar al usuario hacia el elemento.
- Las acciones de desplazamiento o cambio de color pueden mostrar a los usuarios lo que están haciendo en tiempo real y significar acción.
Asuntos de color
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 botón.
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 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 del color es la marca. Desea seleccionar un color de botón que funcione con su paleta de colores e identidad de marca. No importa cuánto desee que el color de un botón se destaque en el diseño, debe funcionar con, no en contra, de su esquema de color primario.
El tamaño importa aún más
¡Hazlo grande!
Los botones necesitan un poco de peso para que los usuarios se dibujen de inmediato en la pantalla. La tendencia de los botones fantasma (contornos sin color de botones distintos) se centra en los botones grandes en términos de conteo de píxeles, pero carece de peso visual. En términos de tamaño, un botón debe ser grande en ambos aspectos. (Esta es una de las razones por las que la tendencia ha pasado de moda).
Sin embargo, hay un punto difícil cuando un botón pasa de tener un tamaño perfecto a un tamaño excesivamente embarazoso. Exactamente cuando esto sucede depende de la escala de otros elementos de diseño, pero usted sabrá con seguridad cuándo sucederá. Si el botón es todo lo que ve en el diseño, es probable que sea demasiado grande.
La colocación es la clave
¿En qué parte del diseño debe ir el botón? ¿Hay una ubicación que ayude a generar clics más que otros?
En la mayoría de los casos, los botones deben seguir el contenido que están diseñados para complementar.
- Al final de un formulario.
- A la derecha de un mensaje de llamada a la acción.
- En la parte inferior de la página o pantalla.
- Centrado debajo de un mensaje
¿Por qué estas colocaciones? 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 se aplica a las técnicas utilizadas dentro del elemento en sí, pero también a la relación entre el elemento y su ubicación en el diseño y el entorno.
Recuerde pensar en las siguientes técnicas en este entorno dual:
- Color
- Tipo de peso y tamaño
- Tamaño de los elementos
- Forma en lo que se refiere al fondo
- Transparencia o animacion
- Sombras o graidentes
- Espacio en blanco y relleno
Utilizar formas estándar
Cuando se trata de botones, solo hay dos formas que debes considerar:
- Círculos El botón circular se ha hecho 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 ajusta al patrón del usuario.
- Rectángulos Esta forma predeterminada debe ser su destino 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 y saben inmediatamente qué hacer. Si bien algunos pueden argumentar los méritos de las esquinas redondeadas frente a los ángulos de 90 grados, cualquiera de los dos es igualmente apropiado según su estilo de diseño.
Dile a los usuarios qué hacer
Cada botón debe incluir una instrucción de texto que indique a los usuarios qué hará exactamente 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 debería decirle al usuario que ha llegado al destino esperado. Ya sea enviando un formulario, haciendo una compra o simplemente moviéndose a otro enlace, el usuario debe obtener el resultado deseado al interactuar con el botón. (De lo contrario, asegúrese de que haya un error indicado en el ciclo de comentarios para que sepa qué correcciones deben ocurrir en el diseño del sitio web).
Ejemplos de mensajes de botones incluyen:
- haga clic aquí
- Crea una cuenta ahora
- Pruébalo gratis
- Añadir a la cesta
- 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 estancado en esta situación peligrosa.
En el diseño, los botones deben 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 hacer que un botón se vea especial y enfatizar su uso.
Conclusión
¿Está empezando a repensar algunas de sus opciones de diseño de botones? ¿Crees que puedes crear algo que fomente mejor los clics?
Pruebe algunos de estos consejos mientras observa los análisis de su sitio web para ver exactamente a qué cambios de diseño responde su base de usuarios. Use esa información para ayudarlo a crear botones con más clics para proyectos futuros.