Indique el significado de la insignia.
Un punto de color no es suficiente para explicar el estado a todo el mundo.
Insignia Sistema de diseño
Agregue cantidad o estado sin invadir el contenido principal.
Contenido de la lista
Progreso de la revisión
01
Estructura y significado
Comparar información y presentación en contexto de uso.
02
Interacción y usabilidad
Pruebe la operación, cambie el estado y continúe trabajando.
El progreso se guarda automáticamente en este navegador.
GUÍA
Cómo revisar
EJEMPLOS
Ejemplos de uso
Indique el significado de la insignia.
El botón “Notificaciones” tiene como nombre de acceso “3 notificaciones no leídas”.
Variantes y casos de uso
Contador numérico
Explica qué cuenta el indicador y define cómo representar los números grandes.
Prueba 0, 1 y 120; al ocultar o abreviar el número, conserva un nombre accesible que comunique el valor completo.
Ejemplo Muestra 99+, pero conserva el nombre accesible «120 notificaciones sin leer».
Combina el color con un número o una etiqueta.
Indicador de novedades
Usa un punto cuando solo necesites indicar un cambio, sin comunicar una cantidad concreta.
Comprueba que se pueda distinguir el indicador de novedades del estado de conexión.
Ejemplo El punto de la pestaña Perfil incluye la etiqueta «Hay información que revisar».
Combina el color con un número o una etiqueta.