Avatar

A representacao visual de uma pessoa na interface, seja foto, ilustracao, icone ou iniciais.

Hard

O que é

Avatar e o elemento visual que representa uma pessoa dentro do produto, seja por foto, ilustracao, icone ou iniciais. Ele da uma pista de identidade, ajuda a pessoa a se reconhecer e a reconhecer os outros, e ainda cria uma sensacao de presenca.

Em interface, o avatar aparece no menu de perfil, na mensagem e na ferramenta colaborativa. Como e um marcador visual familiar, ele faz a pessoa achar rapido a propria informacao ou identificar quem esta na conversa, o que reduz o esforco de leitura da tela.

Vale pensar tambem em inclusao e no estado de falta. Como nem todo mundo quer usar foto, oferecer iniciais ou ilustracao da mais controle. E vale sempre desenhar o fallback, ou seja, o que aparece quando nao tem avatar, pra a tela nao quebrar com um icone vazio.

Em uma frase

Vamos desenhar o fallback do avatar com iniciais pra tela não quebrar quando a pessoa não sobe foto.

A pergunta que ele responde

Como eu represento uma pessoa na tela quando ela não tem ou não quer foto de perfil?

Quando usar

Ajuda em perfil, mensagem e colaboracao, pra dar identidade e mostrar presenca.

Como não usar

O cuidado e nao esquecer o estado de falta e deixar um icone quebrado quando a pessoa nao subiu nenhuma foto.

Na prática

Pense num doc compartilhado em que os avatares no topo mostram, naquele momento, quem esta editando junto com voce.

Não confunda com

Vale separar avatar de perfil. O avatar e so a imagem que representa a pessoa, enquanto o perfil e o conjunto de informacoes (nome, bio, dados) que esta por tras dela.

D

Em inglês

Avatars

Pronúncia

a-va-tar

Também chamado de

avatar, foto de perfil

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigos sobre design de perfil de usuário