Consejos y reglas para el diseño de botones

Los botones son un elemento crucial para un diseño interactivo. Estos botones juegan un papel importante en la conversación entre el usuario y el sistema. En este artículo, veremos conceptos básicos, reglas y consejos que necesitas saber para crear botones efectivos.

Los botones deben verse como botones

Cuando se trata de interactuar con la interfaz de usuario (UI), es importante que los usuarios sepan de inmediato en qué pueden hacer clic y en qué no. Cada elemento del diseño requiere un esfuerzo por parte del usuario para comprenderlo. En general, cuanto más tiempo le toma al usuario comprender la interfaz de usuario, menos útil se vuelve para el usuario.

¿Cómo entienden los usuarios si un determinado elemento es interactivo o no? Esto se basa en la experiencia previa y las indicaciones visuales para comprender el propósito del objeto de la interfaz de usuario. Por lo tanto, es muy importante utilizar señales visuales adecuadas (color, forma, tamaño, etc.) que hagan que el elemento se sienta como un botón. Las indicaciones visuales contienen información esencial. Estos ayudan a estructurar la interfaz de usuario.

Desafortunadamente, en muchos diseños, las indicaciones de que un botón es interactivo son débiles. Esto requiere un esfuerzo por parte del usuario, lo que reduce la efectividad del botón.

Si los usuarios tienen dificultades para comprender en qué pueden o no hacer clic, no importa lo hermoso que se vea el diseño. Cuando la interfaz de usuario es difícil de usar, esto generará frustración para el usuario y el botón no será efectivo.

Usuarios móviles

Los indicadores débiles son un problema aún mayor para los usuarios de dispositivos móviles. En un esfuerzo por comprender si un elemento es interactivo, los usuarios de escritorio pueden usar un cursor. Si el elemento cambia de estado, probablemente será un botón. Los usuarios de dispositivos móviles no pueden usar esto. Para comprender si un elemento es interactivo, los usuarios deben hacer clic en algo. No hay otra forma de comprobar si un elemento es interactivo en el móvil.

No asumas que un elemento en la interfaz de usuario es claro

En muchos casos, los diseñadores deliberadamente no identifican un botón como un elemento interactivo, asumiendo que debería ser obvio. Al diseñar una interfaz de usuario, siempre debes tener en cuenta la siguiente regla:

La capacidad de un diseñador para identificar una designación de un elemento interactivo no es la misma que la de un usuario. Como diseñador, sabes lo que debe hacer cada elemento de tu diseño.

Utiliza diseños conocidos

A continuación, se muestran algunos ejemplos de botones que son familiares para la mayoría de los usuarios:

• Botón relleno con bordes cuadrados
• Un botón relleno con bordes redondos.
• Un botón lleno de sombra.
• Botón fantasma

De los cuatro ejemplos, el diseño de «Botón relleno de sombra» es el más obvio para tus usuarios. Cuando un usuario ve esta dimensión del botón, inmediatamente comprenderá que este elemento puede presionarse.

No olvides el espacio en blanco

No solo es importante el aspecto visual del botón. La cantidad de espacio en blanco puede determinar si es más fácil o más difícil entender si se trata de un elemento interactivo.

Coloca los botones donde se espera

Los botones deben colocarse donde el usuario pueda encontrarlos o esperarlos fácilmente. No permitas que los usuarios inicien una búsqueda para encontrar un botón. Si los usuarios no pueden encontrar el botón, es probable que el usuario simplemente no sepa que existe un botón.

Utiliza diseños tradicionales y patrones de interfaz de usuario estándar tanto como sea posible

La ubicación habitual de tus botones te ayudará a encontrarlos. Con un diseño estándar, los usuarios comprenderán fácilmente el propósito de cada elemento. Esto incluso se aplica a un botón sin etiquetas fuertes. La combinación de un diseño estándar con un diseño visual claro y suficiente espacio en blanco hará que el diseño sea comprensible.

Sugerencia: prueba tu diseño para ver si es posible encontrarlo. Cuando un usuario navega por primera vez a través de una página que contiene botones para usar, deberían ser fáciles de encontrar.

Indica qué hace un botón

Los botones con una etiqueta genérica o engañosa pueden generar mucha frustración para el usuario. Al escribir la etiqueta de un botón, indica claramente lo que hace cada botón. Idealmente, la etiqueta de cada botón debería indicar exactamente lo que hace.

Los usuarios necesitan saber exactamente qué sucede cuando hacen clic en un botón. Veamos esto con un ejemplo. Supón que accidentalmente haces clic en algo que borra todo y ves un error. Este error te pregunta si deseas eliminar los siguientes elementos con los botones «Aceptar» y «Cancelar». No está claro qué representa «Aceptar» o «Cancelar» en este caso. Muchos usuarios se preguntarán qué sucede cuando presionan “Cancelar”.

En lugar de utilizar «Aceptar», es mejor utilizar «Eliminar». Esto indica claramente lo que hace este botón. Para indicar aún más claramente que se trata de una acción potencialmente peligrosa, puedes utilizar un color rojo para indicarlo.

Usa un buen tamaño para los botones

El tamaño de un botón debe reflejar la importancia de este elemento en la pantalla. Un botón grande significa que la acción es importante.

Priorizar ciertos botones

Haz que el botón más importante parezca realmente el más importante. Intente siempre hacer que el botón de acción principal se vea prominente. Esto se puede hacer cambiando el tamaño y usando un color diferente. Esto llamará la atención del usuario.

Haz que los botones sean amigables con los dedos para dispositivos móviles

En muchas aplicaciones móviles, los botones son demasiado pequeños. Esto a menudo conduce a la situación en la que un usuario hace clic en el botón incorrecto.

Un estudio realizado recientemente ha descubierto que un buen tamaño táctil mínimo es de 10 mm x 10 mm.

Ten en cuenta el orden

El orden de los botones debe reflejar la conversación natural entre el usuario y el sistema. Pregúntate qué orden esperan los usuarios en una pantalla y ajuste el diseño en consecuencia.

Tomemos como ejemplo cómo utilizar los botones «Anterior / Siguiente» para desplazarte por las páginas. Tiene sentido que el botón de avance debe estar a la derecha y el botón de retroceso a la izquierda.

No uses demasiados botones

Este es un problema común para muchas aplicaciones y sitios web. Cuando ofreces demasiadas opciones, los usuarios no hacen nada. Al diseñar una aplicación o página, piensa en las acciones más importantes que deseas que realicen tus usuarios.

Haz uso de comentarios visuales o sonoros

Cuando un usuario hace clic en un botón, el usuario espera que responda con comentarios plausibles. Dependiendo de la acción, esto puede ser una retroalimentación visual o auditiva. Si no se reciben comentarios, el usuario puede pensar que el sistema no ha realizado su acción correctamente. Esto hará que vuelvan a realizar la misma acción. Este comportamiento a menudo conduce a acciones innecesarias.

¿Por qué está pasando esto? Como seres humanos, esperamos retroalimentación cuando interactuamos con un objeto en particular. Esto puede ser un comentario de audio o visual, por ejemplo, siempre que tengamos la confirmación de que la acción se ha registrado.

Para algunas acciones, como la descarga, es valioso demostrar el progreso del proceso. De esta forma, el usuario ha recibido comentarios de que la descarga está en curso.

Conclusión

Aunque los botones son elementos comunes del diseño de interacción, es importante prestar mucha atención a esto. Intenta diseñar cada elemento del botón lo mejor posible. El diseño de la experiencia de usuario (UI) de los botones siempre debe basarse en el reconocimiento y la claridad.