Buttons
Los botones permiten realizar las acciones principales y secundarias dentro una pantalla. Se aplican en diferentes lugares de la UI como cards, modales y formularios.
Identificables
Fáciles de reconocer entre otros elementos, incluídos otros botones.
Concretos
Indican una tarea específica y que las personas pueden entender.
Simples y claros
Explican a las personas qué acción se realizará si tocan en el botón.
Consistentes con la siguiente pantalla
La pantalla siguiente debe contener la información que contiene el botón. (Botón: Ver detalle, Pantalla siguiente: Detalle)
No usamos dos líneas
Rompen con la altura del botón
No más de cuatro palabras
Frase corta, no una oración
No usamos coma
Entorpece la lectura
No repetimos sustantivo
No utilizamos el Sustantivo en el botón si este se encuentra en el título
Icon left
Se utiliza la iconografía (reconocible y
autoexplicativa) a la izquierda.
Doble icono
No utilizamos más de un ícono por botón.
Icon right
El icono en esta posición representa continuidad. Su uso es menos frecuente.
Iconografía confusa
No utilizamos iconografía poco reprensentativa.
1
Contenedor
Zona tapeable
2
Icono (opcional):
Aporta contexto y complementa el Label
3
Label
Indica la acción a realizar
4
Área de seguridad
Espacio que separa el contenedor de otros elementos
1
Rectangle
Es el botón principal
2
Square
Son accesos a flujos secundarios dentro de una sección
3
Link
Son acciones de menor importancia que generalmente se ubican dentro de un bloque de texto
Filled
Denota el objetivo de la pantalla y solo podemos mostrar uno por vez (ver Stack).
Puede mantenerse siempre visible al scrollear (ver Sticky).
No todas las pantallas lo requieren.
Tonal
Indica una acción de jerarquía media (no es la acción principal ni tampoco la menos importante).
Utilizado únicamente en su configuración Square.
Quiet
Dirige a flujos alternativos a la acción principal.
No tiene un contenedor visible, sin embargo mantiene el área tapeable.
Puede usarse combinado con un Filled (ver Stack).
Enable
Disable
Hover
Focus
Pressed
Mobile devices
Fixed
Se dejan fijos en la parte inferior de la pantalla para permitir realizar acciones donde sea que se desplacen.
Relative
Se ubican al final del contenido de la pantalla siempre respetando el área de seguridad.
Top
Se utilizan en la parte superior del lado derecho principalmente para acciones complementarias.
Floating
Se usan delante de todo el contenido de la pantalla. Su uso está reservado para acciones constructivas.
Stack
Cuando tenemos más de una acción posible,
agrupamos los botones de una manera específica.
Vertical
Ubicamos la acción principal abajo para facilitar el escaneo y terminar la lectura en la acción deseable.
Una acción y una salida
El botón Filled es el que continua el flujo y el Quiet le da flexibilidad a las personas con un camino alternativo.
No utilizar dos filled juntos
Combinar dos botones con el mismo nivel de jerarquia genera carga cognitiva y confunde a las personas.
Dos botones como máximo
Para que las personas puedan enfocarse en la tarea de la pantalla.
Evitar stack horizontal en mobile
Posicionarlos horizontalmente genera una doble lectura.
Casos de uso
Ejemplo
Estructura
Consideraciones
Enuncian una acción específica y básica y no expresan modo, ni tiempo, ni personas.
Comprar
Infinitivo
Es nuestro uso predilecto.
Dan contexto sobre la acción.
Comprar garantia
Infinitivo + sustantivo
En la estructura de la pantalla no debería repetirse el sustantivo en el H1.
Hacen referencia a que la persona realiza la acción, el “yo”.
Me interesa
Primera persona
Son casos excepcionales.
Denotan de manera explicita con qué se va a encontrar la persona. Este recurso no implica una acción en sí misma.
Ayuda
Sustantivo
Son casos excepcionales.
Expresan lugar, tiempo, destino, causa, etc.
Ir a Inicio
Infinitivo + preposición + sustantivo
Su uso más frecuente es la redirección a secciones
El único caso que tenemos es el patrón nativo de IOs y Android.
Anterior
Adjetivo
Son casos excepcionales.
Interpelan a las personas.
¿Necesitas ayuda?
Preguntas en segunda persona
Recurso para no utilizar la primera persona.
Enuncian que las personas van a salir de la app o son redirigidas a otro sitio.
Ir a Kavak.com
Infinitivo + URL
"Empezar"
Utilizamos "Empezar" para un proceso largo, que necesita de pasos
"Confirmar"
El botón que termina la acción es "Confirmar", no usamos "Aceptar
"Continuar"
El botón que avanza durante el proceso es el infinitivo "Continuar"
"Iniciar"
Utilizamos la palabra "Iniciar" para comenzar un proceso corto, que no necesita de pasos
"Ahora no"
"Ahora no" se diferencia de "Saltar", ya que la pantalla podría aparecer nuevamente
"Ayuda"
Utilizamos "Ayuda" para redireccionar a FAQS y está la posibilidad de contactar a soporte.
"Contactar representante"
Utilizamos "Contactar representante" para cuando rediccionamos a whatsapp
"Guardar"
Al tocar el botón, el paso no se puede deshacer ni volver atrás, ya que la información se envía.
No usar mayúsculas
Las mayúsculas ralentizan la lectura. Ademas los lectores de pantalla leen estos textos letra por letra en lugar de las palabras.
Tamaño
El tamaño o área pulsable de los botones debe ser de 44px. mínimo.
Contraste
El contraste se calcula analizando la diferencia de luminosidad entre el fondo y la forma, que va desde 1:1 (blanco sobre blanco) a 21:1 (negro sobre blanco). Se recomienda un contraste mínimo de 4.5:1.
Navegación
El botón debe ser focalizable con el teclado y reconocido como un botón por las tecnologías de apoyo.
Atributos de lectura
Utilizar el atributo aria-label="..." para definir labels específicos para lectores de pantalla.
Uso de iconos
En web cuando el ícono es decorativo se debe ocultar para que los lectores de pantalla no lean los íconos.