Para reconhecer pessoas ou grupos
As fotos do perfil não devem ser a única forma de identificar um usuário.
avatar Sistema de projeto
Mostre identidade e forneça atualizações controladas de fotos.
Conteúdo do checklist
Progresso da revisão
01
Estrutura e significado
Compare as informações e a apresentação no contexto de uso.
02
Interação e usabilidade
Experimente a operação, altere o status e continue trabalhando.
O progresso é salvo automaticamente neste navegador.
ORIENTAÇÕES
Como revisar
EXEMPLOS
Exemplos de uso
Para reconhecer pessoas ou grupos
A lista de membros exibe o avatar e o nome "Linh Nguyen".
Variantes e casos de uso
Formato do avatar
Escolher formatos consistentes para o mesmo tipo de entidade e preservar as áreas importantes no recorte.
Testar retratos próximos à borda e logos horizontais: não cortar os elementos necessários ao reconhecimento.
Exemplo Pessoas usam fotos circulares; organizações usam caixas quadradas com cantos arredondados.
Escala de tamanhos
Definir tamanhos para listas, comentários e perfis, em vez de variar arbitrariamente entre telas.
Comparar avatares em linhas densas e no cabeçalho do perfil: imagens pequenas não devem aumentar demais a altura da linha.
Exemplo Listas usam 32 px e perfis 80 px, com o mesmo tipo de recorte.
Indicador de estado
Mostrar o estado ao lado da foto e acrescentar seu nome para não depender da interpretação da cor.
Testar os temas claro e escuro e ocultar as cores: o indicador online deve continuar compreensível.
Exemplo O ponto verde tem o rótulo Online nas informações do usuário.
Quando não há foto
Preservar tamanho e identidade quando a URL da foto falhar, estiver ausente ou ainda carregar.
Bloquear a solicitação da imagem: a linha não deve mudar de posição e a pessoa continua identificável.
Exemplo Uma foto com erro é substituída por AN na conta de Anh Nguyen.
AN
Imagem alternativa