Badges (selos)

Marcadores visuais pequenos que sinalizam status, contagem ou conquista.

Hard

O que é

Badge e um marcador visual pequeno que comunica algo na hora, como quantas mensagens nao lidas existem, um status ou uma conquista. Pelo tamanho compacto e pela boa visibilidade, ele chama atencao sem quebrar o fluxo da tela.

Em interface, ele tem dois usos comuns. Tem o funcional, como o contador de nao lidas que avisa o que precisa de atencao. E tem o motivacional, como o selo de conquista que reconhece progresso. Quando bem dosados, os dois juntos viram a base da gamificacao.

O cuidado aqui e nao exagerar, porque badge demais sobrecarrega e perde significado. Cada um precisa de sentido claro, contraste e forma reconhecivel, alem de rotulo descritivo pra funcionar tambem com leitor de tela.

Em uma frase

Esse badge vermelho no ícone já avisa que tem três mensagens não lidas sem a pessoa abrir nada.

A pergunta que ele responde

Como eu sinalizo que tem algo novo ou pendente sem tirar a pessoa do que ela está fazendo?

Quando usar

Ajuda pra sinalizar contagem, status ou conquista de um jeito rapido e discreto.

Como não usar

O cuidado e nao encher a interface de selo ate ninguem mais reparar e o marcador perder todo o sentido.

Na prática

Pense no contador vermelho no icone de mensagens que avisa que tem tres nao lidas, sem voce precisar abrir nada.

Não confunda com

Vale separar badge de notificacao. O badge e o marcador visual que indica que ha algo (um numero, um ponto), enquanto a notificacao e a mensagem em si que entrega o conteudo.

D

Em inglês

Badges

Pronúncia

bed-jis

Também chamado de

badge, selo, marcador, contador de notificacao

Origem

n/a

Fonte

Saiba mais

Material Design, guideline sobre badges