# Avatar

Ein Avatar dient der visuellen Repräsentation von Usern oder anderen Inhalten, etwa durch ein Image, Initials oder ein Icon.

## Guidelines

# Grundlagen

Ein Avatar ist ein kleiner, runder Container, der ein
[Image](/04-components/content/image/overview), Initialen oder ein
[Icon](/04-components/content/icon/overview) enthalten kann. Avatare haben eine
stark visuelle, unterstützende Funktion, da sie Inhalte auf anschauliche Weise
repräsentieren. Besonders Avatare mit Images verleihen Benutzeroberflächen eine
persönlichere Note: User können ein individuelles Bild wählen (z. B. ein Profil-
oder Projektbild), wodurch die Benutzeroberfläche persönlicher und
vertrauenswürdiger wirkt. Gleichzeitig erleichtert das visuelle Feedback anderen
Usern den Aufbau einer mentalen Verbindung zu einem Profil.

## Best practices

Achte bei der Verwendung eines Avatars darauf, dass ...

- je nach Anwendungsfall die passende Variante gewählt wird. Ein Avatar mit
  [Image](/04-components/content/image/overview) eignet sich besonders für
  personalisierte Elemente wie Benutzerprofile oder Projektbilder. Ein Avatar
  mit [Icon](/04-components/content/icon/overview) passt besser zu
  wiederkehrenden Inhalten, die zum Beispiel in Lists aufgezählt werden können.
- wenn kein passendes Image im Avatar hinterlegt ist, Initialen verwendet
  werden. So bleibt die visuelle Orientierung auch ohne Bild erhalten.
- die Color-wahl sinnvoll getroffen wird. In der Regel bestimmt das enthaltene
  Element (z. B. Icon oder Initialen) die Color automatisch. In bestimmten
  Fällen kann es jedoch sinnvoll sein, eine feste Color zu definieren – z. B.
  zur besseren Unterscheidung.
- aus dem Benutzeroberflächen-Kontext klar hervorgeht, welche Bedeutung der
  Avatar hat.
- wenn mehrere Avatare nebeneinander dargestellt werden sollen, ein
  [AvatarStack](/04-components/content/avatar-stack/overview) verwendet wird, um
  die Darstellung kompakt und übersichtlich zu halten.

## Verwendung

Verwende einen Avatar, um ...

- einem übergeordneten Element eine visuelle Identität zu geben. Zum Beispiel,
  um Einträge in einer [List](/04-components/structure/list/overview) besser
  unterscheidbar zu machen.
- dem User Möglichkeiten zur Personalisierung zu bieten. Zum Beispiel um
  Benutzerprofilbilder hochzuladen oder Projekte eine visuelle Erscheinung zu
  geben.
- die visuelle Orientierung zu unterstützen. Zum Beispiel in einer
  Bestellübersicht, in der ein Avatar mit Icon anzeigt, um welche
  Zahlungsmethode es sich handelt.