Aunque el botón se parece a un elemento de interfaz de usuario muy simple, su diseño ha cambiado mucho en las últimas décadas. Sin embargo, el diseño del botón UX siempre tiene que ver con el reconocimiento y la claridad.

En este artículo vamos a ver la evolución del diseño del botón y averiguar cuáles son las mejores prácticas más importantes que debe seguir para crear botones efectivos.

Botón tridimensional

Desde los primeros días, los botones del sistema operativo se basaron en la apariencia de relieve y sombra para distinguirlos de su contexto circundante. Esta solución de diseño se basó en el principio simple: el uso de un borde, un gradiente y una sombra permiten que el elemento se destaque contra el fondo y el contenido y esto lo hace fácilmente identificable como un elemento que se puede hacer clic.

Observe cómo aparecen los botones

Este cuadro de diálogo de Windows 95 hizo uso de sombras pesadas y resaltadas para crear efecto 3D que se utilizó para ayudar a los usuarios a interpretar la jerarquía visual y comprender qué elementos son interactivos.

Los elementos que aparecen levantados parecen que podrían ser presionados hacia abajo (clic con el mouse)

Botón Skeuomorphic

En el diseño digital, skeuomorphism es cuando los elementos de la interfaz de usuario se hacen para parecerse a objetos de la vida real, ya sea copiando una textura de la vida real, o haciendo que un botón parezca un botón de la vida real. Los diseños de Skeuomorphic son pensados para ayudar a usuarios a entender cómo utilizar una nueva interfaz permitiéndoles aplicar cierto conocimiento anterior sobre el objeto. La metáfora de la calculadora está pensada para ayudar a los usuarios a transferir conocimientos previos sobre calculadoras físicas al entorno digital.

Botón plano del diseño

Uno de los principales cambios que ha ocurrido recientemente en el diseño de interfaz de usuario es la tendencia de los elementos skeuomorphic hacia los más planos, despojado de efectos 3D. A diferencia del diseño skeuomorphic, el diseño plano fue visto como una forma de explorar el medio digital sin tratar de reproducir la apariencia del mundo físico. Como consecuencia, eliminó las señales visuales pesadas que tradicionalmente se han utilizado para comunicar la capacidad de clickability / tapability a los usuarios.

Botón regular y plano

Cuando todo es plano, ¿Cómo saben los usuarios qué piezas son botones? Los usuarios todavía necesitan significantes visuales para saber dónde pueden hacer clic / tocar en una página: pistas perceptibles que les ayudan a entender cómo usar las interfaces. Por lo tanto, el color es especialmente importante en el diseño plano, porque cuando se utilizan botones planos, estos colores serán uno de los principales identificadores que ayudarán al usuario a reconocerlos.

Diseño casi plano y botón de acción flotante

El diseño casi plano era una evolución del diseño plano original (o ultra). Este estilo es en su mayoría plano, pero hace uso de sutiles sombras, resaltes y capas para crear algo de profundidad en la interfaz de usuario. El lenguaje de diseño de material de Google es un ejemplo de diseño casi plano con las prioridades correctas y trae un nuevo tipo de botones: botón de acción flotante. Estos botones están superpuestos en la parte superior de la interfaz y llaman la atención sobre acciones promovidas o primarias. Actúan como botones de llamada a la acción ("utilizados para una acción promovida"), destinados a representar una sola acción que los usuarios realizan más en esa pantalla en particular.

Botón del fantasma

En 2014, una de las tendencias dominantes del diseño a pasar a través del mundo del diseño de la interfaz de usuario fueron los botones del fantasma. Los botones fantasmas son los botones transparentes y vacíos que tienen una forma básica de la forma, tal como rectangular o quizá cuadrado. También tienen títulos como botones "vacío", "desnudo" o "hueco". Los botones fantasmas son generalmente confinados por una línea muy fina, mientras que la sección interna consiste en el texto llano.

El origen del botón del fantasma vino de la revolución plana del diseño de los botones fantasmas, y se pusieron de moda cuando Apple lanzó iOS 7. Muchos de los botones en la interfaz de usuario de iOS son lo que llamaríamos un botón del fantasma. La forma rectangular simple y llana en combinación con la fuente limpia dentro del marco que se mira perfectamente dentro de una UI plana.

Prácticas básicas para los botones

Antes de empezar a diseñar sus botones es un momento para pensar en cómo el diseño comunica. ¿Cómo entienden los usuarios el elemento como un botón? Lo más probable es que deba hacer estos puntos:

Interfaz

- Haga que los botones parezcan botones (vea Shape)

- Facilite que el usuario interactúe con los botones (consulte tamaño y relleno)

- Proponga botones de etiquetas (ver etiqueta)

- Utilice el contraste de color para guiar a los usuarios a la acción (consulte color)

Y asegúrese de mantener la coherencia en todos los controles de interfaz, para que el usuario pueda identificar y reconocer los elementos de interfaz de usuario de su aplicación o sitio como botones en cada página.

Forma

Una apuesta segura es hacer botones cuadrados o rectangulares con esquinas redondeadas, dependiendo del estilo del sitio o la aplicación. Los botones de forma rectangular se han introducido en el mundo digital hace mucho tiempo y los usuarios están familiarizados con ellos.

Algunas investigaciones sugieren que las esquinas redondeadas mejoran el procesamiento de la información y atraen nuestros ojos hacia el centro del elemento.

Botón rectangular redondeado

Puede ser más creativo y utilizar otras formas como círculos, triángulos o incluso formas personalizadas, pero tenga en cuenta que este último podría ser un poco más riesgoso.

Tamaño y relleno

El tamaño de los botones también desempeña un papel clave para ayudar a los usuarios a identificar estos elementos. Debe considerar el tamaño de los elementos del botón, así como el relleno entre los elementos que se pueden hacer clic.

Cuando el ratón y el teclado son los métodos de entrada primarios, las mediciones de los botones pueden reducirse ligeramente para acomodar las interfaces densas del usuario.

Relleno. El relleno entre botones ayuda a separar los controles y da a su interfaz de usuario suficiente espacio para respirar.

Etiqueta

Usted debe elegir una etiqueta adecuada para sus botones. La selección debe basarse en el principio de menor asombro: si un botón necesario tiene una etiqueta con un alto factor de asombro, puede ser necesario cambiar la etiqueta.

Color

Al elegir una paleta de colores, recuerde pensar en cómo los colores ayudarán a los usuarios a navegar y entender la acción:

- Utilice el color y el contraste para ayudar a los usuarios a ver e interpretar el contenido de su aplicación, interactuar con los elementos adecuados y comprender las acciones. En el ejemplo siguiente utilizamos rojo para el botón que realiza una acción potencialmente destructiva.

- Observe cómo la acción 'Desinstalar' es más fuerte en color y contraste.

- Haz que el botón sea lo más importante (especialmente si los usas para las llamadas a la acción). Por ejemplo, Amazon utiliza un botón amarillo de contraste para llamar la atención del usuario a la acción correcta.

Conclusión

Cada botón (clásico o moderno como el botón fantasma o el botón de acción flotante) está diseñado para dirigir a los usuarios a tomar la acción que quieren que tomen. Piense en la web o la aplicación como una conversación iniciada por un usuario ocupado. El botón desempeña un papel crucial en esta conversación: una interacción fluida mantiene la conversación fluyendo mientras que las fallas (como la incapacidad de encontrar el botón correcto) crean interrupciones y, en el peor de los casos, averías.

Se pueden coseguir iconos gratuitos para en un inicio podamos economizar nuestros proyectos