Avatar
Resumo
O componente Avatar é responsável por representar visualmente o usuário no sistema. Ele exibe a imagem do usuário, oferecendo alternativas para quando esta se encontra indisponível.
Anatomia
Imagem: Exibe um placeholder, ícone ou foto do usuário
Badge ou Notification: Em algumas aplicações, o componente pode ser acompanhado de outro componente para identificar status ou avisar quando o usuário possui notificações
Bordas: Podem ser utilizadas para indicar atualizações. Por exemplo, stories não vistos do Instagram.
Quando usar?
Avatares pequenos
Geralmente utilizados para tabelas e outros layouts com limitação de espaço
Tamanho médiano
Utilizado na maioria dos casos como estado padrão do componente
Tamanho grande
Utilizado para testemunials de landing pages e em status de redes sociais
Tamanho Gigante
Utilizado em cards, corpo de postagens, etc
Variações
Avatares podem ser utilizados como menu. Nessa ocasião, é comum o avatar ter o cursor:pointer e, ao ser clicado, abrir um overlay contendo opções de menu como configuração de conta, logout, etc
Não é uma regra universal, mas geralmente, para pessoas utiliza-se o círculo. Já para empresas, utiliza o quadrado arredondado.
Também é possível agrupar diversos avatares em um componente, o chamado Avatar Group. Ele é usado geramente para representar uma coleção de usuários ou entidades em uma interface, como listas de equipes, membros, ou participantes de uma conversa
Muitas vezes, cada avatar pode ser clicável para acessar informações detalhadas do usuário.
Quando há muitos avatares para exibir, é comum adicionar um indicador como “+3”
Acessibilidade
A
A imagem do avatar precisa ter um texto alternativo (WCAG 1.1.1).
Cor não pode ser o único meio de transmitir informação (WCAG 1.4.1).
AA
As bordas do avatar, sobreposição no avatar group e o badge de status precisam de contraste de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11)
Se houver texto sobre o avatar esse texto precisa de contraste de 4.5:1 com o fundo (WCAG 1.4.3)
Se o avatar é clicável, a área de toque precisa ser de no mínimo 24×24px (WCAG 2.5.8).
Se o avatar é clicável, o indicador de foco precisa estar visível por teclado (WCAG 2.4.7).
Se o avatar é clicável, ao receber foco ele não pode ficar totalmente escondido atrás de outro elemento da interface (WCAG 2.4.11).
Se o avatar mostra tooltip ao focar ou passar o cursor, esse conteúdo precisa ser dispensável, permanecer enquanto o cursor estiver sobre ele, e não sumir sozinho (WCAG 1.4.13)
AAA
Texto sobre o avatar (iniciais, "+99") com contraste de 7:1 contra o fundo (WCAG 1.4.6).
Se o avatar é clicável, área de toque de 44×44px (WCAG 2.5.5).
Se o avatar é clicável, o indicador de foco precisa ter pelo menos a espessura de um perímetro de 2px ao redor do componente e contraste de 3:1 com o fundo (WCAG 2.4.13).
Boas práticas
Sempre que possível, tente usar uma imagem em miniatura do usuário em vez de uma silhueta humana padrão e sem graça
Isso não só confere um toque mais humano à interface, como também pode ajudar a organizar visualmente, memorizar e compreender as seções quando usado por vários usuários.
Gere uma imagem de fallback exclusiva
Se a imagem não carregar ou estiver indisponível, considere alternativas que sejam exclusivas para o usuário. Dessa forma, a identidade de um usuário será sempre única e pura!
Exibir vários tamanhos
Um avatar de tamanho único não funciona para todos os casos de uso. Devido a limitações inerentes de layout, as tabelas geralmente exigem uma variante menor, enquanto os cartões de perfil podem acomodar uma versão maior.
Você pode exibir uma dica de ferramenta com um avatar ao focar ou passar o cursor sobre o elemento
A dica de ferramenta deve ter o mesmo valor que o avatar label. Não utilize dicas de ferramentas com um avatar, a menos que sejam interativas.