Badges
Los badges, también llamados ribbons son pequeñas unidades de información complementaria que indican el estado de un elemento. La principal característica de estos es contar con un texto breve y rápidamente escaneable.
Controlar el número de badges por pantalla
Utilizarlo únicamente para llamar la atención del usuario sobre un componente. Si todos tienen badge nada queda resaltado.
Sintéticos
Tratar de usar una sola palabra para describir el estado.
Utilizar hasta 20 caracteres por badge.
Alternativa al badge
Si dos palabras no son suficientes para transmitir el estado, considere usar el cuerpo del texto.
Uso de mayúsculas
Solo la primera palabra de la etiqueta debe estar en mayúscula.
Correlación entre elementos
El color, texto e icono deben ser claros y trabajar en conjunto para transmitir un mismo mensaje.
Énfasis
Estilos
Escenarios
Casos de uso
Alto
Requiere acción de la persona
Atención máxima, ya sea oferta o error crítico.
“Vencida” “Promoción” “Disponible solo online”
Intermedio
Requiere acción de la persona
Alerta: se debe tomar una medida o algo requiere atención.
“Por vencer”
Neutro
No es necesaria la acción de la persona
Estado general, deshabilitado o no disponible.
“Reservado”
“Apartado” “Vendido”
“Recibida” (notificación)
Bajo
No es necesaria la acción de la persona
Proceso en curso.
“En resolución” “En proceso”
Bajo
No es necesaria la acción de la persona
Información positiva que impacta en el momento: beneficio, éxito o celebración.
“Saldo a favor”
“Completado”
“0 Km”
“Nuevo”
Máximo utilizar 2 badges:
Solo se podrán combinar hasta 2 y
tendrán que ser de la tipología Square.
No apilar badges:
La agrupación deberá ser siempre horizontal, nunca vertical.
Utilizar en fondos donde resalte:
Asegurar el contraste del badge con su fondo.
No aplicar sobre fondos de color similar:
Esto hace que se pierda el contraste y no resalte.
1
Contenedor
El color de fondo ayuda a reconocer rápidamente el significado de un estado
2
Icono (opcional)
Sirve para reforzar el significado del mensaje
3
Label
Texto que comunica el mensaje del badge
4
Área de seguridad
Espacio que separa el contenedor de otros elementos
1
Square
Etiqueta, nombre o categorización de elementos
2
Corner (Left - Right)
Idénticos al Square, solo cambian su forma y ubicación
3
Number
Cantidad de notificaciones acumuladas
4
Dot
Llamada de atención para la persona usuaria
Filled
Color intenso. Se utiliza únicamente en casos de extrema relevancia donde necesitemos llamar mucho la atención de las personas.
Tonal
Color de menor intensidad. Es el uso predilecto, ya que llama la atención de una forma sutil.
Corner
En el extremo superior derecho
(preferentemente) o izquierdo de las cards.
Square
Entre diferentes bloques de contenido.
Number
Dentro de un icono en su extremo
superior derecho.
Dot
Dentro de un icono en su extremo superior derecho.
Casos de uso
Ejemplo
Estructura
Consideraciones
Diferencian un producto de los demás existentes de la lista.
Promoción
Sustantivo
Es nuestro uso predilecto
Definen, califican o describen un producto o funcionalidad.
Nuevo
Adjetivo
Es nuestro uso predilecto
Expresan estado de una situación o una cualidad.
Pagado
Participio pasivo
Utilizados en procesos que ya sucedieron
Indican lugar, tiempo, destino, causa, etc.
Por vencer
Preposición + Sustantivo
Es un uso recurrente
Expresan cantidad.
10 nuevos
Números + palabra
Es un uso recurrente
Acompañan a los números y buscan simplificar las palabras.
40%
Números + símbolo
Es un uso recurrente
Definen, califican o describen un producto o funcionalidad.
Saldo a favor
Sustantivos + Preposición + Sustantivo
Evitamos el uso por su posible extensión
Expresan contexto para generar una descripción más concreta.
Descuento exclusivo
Sustantivos + Adjetivo
Evitamos el uso por su posible extensión
No usar todo el texto en mayúsculas
El texto de estado y el color de fondo deben cumplir con el contraste mínimo requerido.
No usar badge con solo icono
Siempre acompañar al icono con un label de texto dado que comunicarlo solo puede ser confuso.