Button (botón)
Los botones comunican llamados a la acción al usuario.
Definición
Los buttons o botones son elementos accionables que permiten a los usuarios interactuar con las páginas de diversas formas, como reproducir audio/video, abrir un modal, etc. Los buttons comunican llamados a la acción al usuario y sus etiquetas expresan la acción que ocurrirá al interactuar con ellos.
Anatomía
1Container o contenedor
2Label o etiqueta
3Icon o icono
Estados
1 Enable: Estado inicial del componente.
2Active: Indica que el botón ha sido seleccionado o presionado por una acción del usuario, dentro de la interfaz.
3Hover: Estado donde el cursor está sobre el componente.
4Focus: El usuario hace click sobre el componente.
5Disable: El Componente no está habilitado para ser usado por el usuario.
Tipos
1 Label e icono
2Label
3Icono
Variantes
Primary o primario
Término utilizado para la ejecución de llamada principal o la acción en la página. Los Primary Buttons o Botones Primarios sólo deben aparecer una vez por pantalla (sin incluir el Header o Encabezado de la aplicación, el Mode o Cuadro de Diálogo Modal o el Side Panel o Panel Lateral).
Secondary o secundario
Para las acciones secundarias en cada página, los Secondary Buttons o Botones Secundarios sólo se pueden utilizar en conjunto con un Primary Button o Botón Primario. Como parte de un par, la función del Botón Secundario es realizar la acción de la parte negativa del conjunto, como ¨Cancel/Cancelar¨o ¨Back/Atrás¨. No utilices un Botón Secundario de manera aislada, ni lo uses para una acción positiva.
Tertiary / terciario
Término utilizado para las acciones menos prominentes y, a veces, independientes. Los Tertiary Buttons o Botones Terciarios, pueden ser utilizados de manera aislada o en pareja con un Botón Primario, cuando hay múltiples llamados a la acción. Los Botones Terciarios también pueden ser usados para sub-tareas en una página donde hay un Botón Primario para la acción principal a ejecutar.
Danger
Para las acciones que podrían tener efectos destructivos en los datos del usuario, como por ejemplo: Eliminar o Remover. Este botón tiene tres estilos: Primary (Primario), Tertiary (Terciario) y Ghost (Fantasma).
Ghost o fantasma
Se usa para las acciones menos pronunciadas; usualmente se utiliza en conjunto con un botón primario. En un caso como un flujo de progreso, un botón fantasma puede estar emparejado con un conjunto de botones primarios y secundarios, donde el botón primario es para la acción que va ¨hacia adelante¨ y el botón secundario es para la acción que va ¨hacia atrás¨, y el botón fantasma es para ¨cancelar¨.
Tamaños
1Small o pequeño
2Medium o mediano
3Large o grande
4X-large o extra largo
5Extended o extendido
Cuándo usar
Se usan los botones para comunicar acciones que los usuarios pueden tomar y permitirles interactuar con la página. Cada página debe tener un solo botón principal, y cualquier llamado adicional a la acción debe representarse como botones de menor énfasis.
Cuándo no usar
Los botones no son elementos de navegación. En su lugar, use enlaces cuando la acción deseada sea llevar al usuario a una nueva página.
Accesibilidad
Las Pautas de Accesibilidad al Contenido Web 2.1 y 2.2 ofrecen recomendaciones para mejorar la accesibilidad a personas con discapacidades visuales, auditivas, de movimiento, del habla, cognitivas y fotosensibilidad. Aunque las guías no cubren todas las necesidades, sí ayudan a que más personas puedan acceder a los servicios digitales.
Las guías de accesibilidad se dividen en cuatro principios: Perceptible, entendible, operable y robusto, consideramos abarcar únicamente los principios perceptible, entendible y operable, dejando fuera robusto ya que este no tiene un campo de acción en el diseño de los componentes UI.
La siguiente lista son recomendaciones de la WCAG que afectan al componente botón.
Perceptible
Color y contraste SC 1.4.3
La relación de contraste mínima recomendada para la accesibilidad es de 4.5:1 para el texto normal y de 3:1 para el texto grande (18 puntos o más).
Recursos:
Estado focus SC 2.4.7
El propósito del estado focus es ayudar a las personas que dependen del teclado para operar una página, permitiéndoles determinar visualmente en qué lugar se encuentran. Beneficia a las personas con limitaciones de atención, limitaciones de memoria a corto plazo o limitaciones en los procesos ejecutivos.
Etiquetado SC 2.4.6
En el caso de los botones que no tienen una etiqueta visible permanente, como los botones con iconos, deben ser etiquetados con una tooltip que se muestre al pasar el cursor o al enfocarse en el botón. Esto garantizará que los usuarios comprendan claramente la función del botón y mejoren la accesibilidad del contenido.
Entendible
Propósito y contexto SC 2.4.4
Asegúrese de que el botón tenga un comportamiento previsible, permitiendo que los usuarios con discapacidad cognitiva o de aprendizaje comprendan fácilmente lo que sucederá cuando se seleccione el botón.
Operable
Target size SC 2.5.5
Los target size se aplican a cualquier dispositivo sea táctil o no táctil, deben tener como mínimo 48 dp permitiendo que los usuarios con discapacidad motriz lo seleccionen fácilmente.
Consistencia
El texto del botón debe ser conciso: de 1 o 2 palabras, no más de 4 palabras, con menos de 20 caracteres incluyendo espacios. No utilice signos de puntuación, como puntos o signos de exclamación.
Etiquetas y verbos
Un botón representa una acción, por lo que su etiqueta debe reflejar la acción que el usuario está realizando, que es un verbo. Las etiquetas escritas como sustantivos o adjetivos tienden a ser poco claras y desconcertantes.
Mayúsculas y minúsculas
El texto del botón siempre debe estar en mayúsculas y minúsculas. Nunca use mayúsculas para enfatizar un botón específico.
Tono
Los emojis y los signos de exclamación no son apropiados para la naturaleza funcional y utilitaria de los botones. Mantenga la etiqueta solo como texto, sin signos de puntuación ni decoración adicional.
Iconos
Los iconos se pueden utilizar en los botones cuando se requiere una claridad adicional y si el icono es altamente relevante para la acción. Los iconos no deben ser utilizados para decorar.
Jerarquía
La jerarquía de los botones es un aspecto clave al diseñar interfaces de usuario. Es importante considerar la importancia de cada botón en relación con otros elementos de la interfaz y su propósito dentro del flujo de trabajo del usuario.
Grupo de botones
Una buena combinación de botones debe permitir al usuario interactuar de manera clara y eficiente con la interfaz, facilitando la toma de decisiones y la realización de acciones.
