Avatar – Nutzerbilder und Profilsymbole im UI-Design

Ein Avatar ist eine visuelle Repräsentation eines Nutzers oder einer Entität im Interface, üblicherweise als Profilfoto, Initialen-Container oder generisches Icon dargestellt.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Profilbild, Nutzerbild, User Icon, Profile Picture, Account Image

Was ist ein Avatar?

Avatare humanisieren digitale Interfaces. Sie verbinden Inhalte (Kommentare, Nachrichten, Beiträge) mit einer konkreten Person oder Entität und verbessern so die soziale Orientierung in kollaborativen Anwendungen. Ein Avatar erscheint in der Navigationsleiste, in Kommentarspalten, in Messaging-Apps, auf Profilseiten und überall dort, wo Autorenschaft oder Zugehörigkeit visualisiert werden muss.

Erklärung

Varianten

Photo Avatar: Das Profilfoto des Nutzers, meist kreisförmig beschnitten. Standardform in sozialen Netzwerken und Collaboration-Tools.

Initials Avatar: Wenn kein Foto vorhanden ist: Initialen des Namens (z. B. „DL" für Dominik Lazi) auf farbigem Hintergrund. Hintergrundfarbe kann aus dem Namen generiert werden (Hashfunktion) für konsistente Nutzer-Farbe.

Icon Avatar: Generisches Personen-Icon als Fallback, wenn weder Foto noch Name bekannt. Beispiel: Silhouette einer Person auf grauem Hintergrund.

Bot/Entity Avatar: Für nicht-menschliche Accounts (Bots, Systeme): spezifisches Icon oder Logo statt Personenbild.

Group Avatar / Stacked Avatars: Mehrere Avatare übereinander gestapelt mit leichtem Versatz, um eine Gruppe von Nutzern darzustellen. Beispiel: „Drei Nutzer bearbeiten diese Datei: [Avatar1][Avatar2][Avatar3] +5". Ab einer Schwelle werden Einzelavatare zu einer Zahl (+N) zusammengefasst.

Größenvarianten

Avatare erscheinen in definierten Größen je nach Kontext:

Avatar-Form

• Kreis: Standard-Form in den meisten modernen Apps (Gmail, LinkedIn, Slack)
• Quadrat mit Border-Radius: Unternehmens-Avatare, Shopify, einige Design-Systeme
• Quadrat: Sehr selten, meist für Logos/Entities

Status-Indikator (Presence)

Avatare können mit einem kleinen farbigen Kreis am unteren rechten Rand ergänzt werden, der den Online-Status zeigt:

• Grün: Online/Aktiv
• Gelb/Orangegelb: Abwesend
• Rot: Nicht stören
• Grau: Offline

Accessibility (WCAG 2.1)

• Profilbilder sind dekorativ wenn der Name des Nutzers daneben steht → alt="" (leerer Alt-Text)
• Steht kein Name dabei: alt="Profilbild von [Name]" oder alt="[Name]"
• Initials-Avatar: Der Container braucht aria-label="[Name]" oder einen visuell ausgeblendeten Text
• Avatar als klickbarer Link/Button: aria-label="Profil von [Name] öffnen"
• Status-Indikator: Rein visuell reicht nicht – aria-label oder title mit Statustext
• Gruppenavatar: aria-label="[Name1], [Name2] und 5 weitere" auf dem Container

Beispiele

1. Slack – Nachrichtenliste: Avatare der Absender links jeder Nachricht. Rundes Profilfoto, darunter ein Presence-Indikator (grün = online). Bei Hover erscheint eine Hovercard mit vollständigem Namen und Profil-Link.
2. GitHub – Commit-History: Autoren-Avatar (32 px Kreis) vor jedem Commit-Eintrag. Da Commits keinen Fließtext-Kontext haben, zeigt GitHub bei Hover den vollständigen GitHub-Nutzernamen.
3. Mobile vs. Desktop: In mobilen Chat-Apps (WhatsApp, Telegram) sind Avatare in der Konversationsliste 50–56 px groß – touch-optimiert und schnell erkennbar im Scroll. Desktop-Chat zeigt oft kleinere Avatare (36–40 px) da mehr Platz vorhanden ist.
4. Accessibility Best Practice: Google Meet zeigt in der Teilnehmerliste jeden Avatar mit dem Namen des Teilnehmers direkt daneben – Avatar ist aria-hidden="true" (dekorativ), der Name-Text trägt die Semantik.
5. Häufiger Fehler: Initials-Avatar ohne semantische Verknüpfung – nur der farbige Kreis mit Buchstaben ist sichtbar, aber kein zugänglicher Text erklärt, wer das ist. Screenreader liest dann gar nichts oder ein bedeutungsloses „DL" vor.

In der Praxis

Figma: Avatar-Komponente als Master mit Variants für Size (XS–XL), Type (Photo/Initials/Icon), Shape (Circle/Rounded-Square), Status (None/Online/Away/DND/Offline). Boolean-Property für Presence-Indicator. Photo als Image-Fill mit clip-path: circle(). Initials: Text-Layer zentriert über Hintergrundkreis mit generierter Farbe.

HTML/CSS-Grundstruktur: ```html <!-- Photo Avatar --> <img src="profil-dominik.jpg" alt="Profilbild von Dominik Lazi" class="avatar avatar-md" width="48" height="48" />

<!-- Initials Avatar --> <div class="avatar avatar-md avatar-initials" style="background-color: #4A6FA5;" aria-label="Dominik Lazi" role="img" > <span aria-hidden="true">DL</span> </div>

<!-- Avatar mit Status --> <div class="avatar-wrapper"> <img src="profil.jpg" alt="Dominik Lazi" class="avatar avatar-md"> <span class="avatar-status status-online" aria-label="Online" title="Dominik Lazi ist online" ></span> </div>

<!-- Stacked Group Avatar --> <div class="avatar-group" aria-label="Bearbeitet von: Anna, Tom und 3 weiteren"> <img src="anna.jpg" alt="Anna" class="avatar avatar-sm"> <img src="tom.jpg" alt="Tom" class="avatar avatar-sm"> <span class="avatar-overflow" aria-hidden="true">+3</span> </div> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie generiert man konsistente Farben für Initials-Avatare? Gängige Methode: Aus dem Namen einen Hash berechnen und diesen auf eine vordefinierte Farbpalette mappen. Wichtig: Die Palette muss nur Farben enthalten, die ausreichend Kontrast zu weißem Text haben (WCAG 4,5:1). Praktische Bibliotheken wie boring-avatars (npm) erledigen das automatisch.

Kreis oder Quadrat für Avatare? Kreisförmige Avatare sind in sozialen Kontexten (Personen, Social Networks, Messaging) Standard und signalisieren „Mensch". Quadratische oder gerundete Formen werden für Unternehmenslogos, Teams und Non-Person-Entitäten bevorzugt. Material Design und iOS-HIG empfehlen Kreis für Personen, um die Unterscheidung zu unterstützen.

Verwandte Einträge

• Badge, Tag & Chip
• Skeleton Loader
• Navigation Bar
• Design Tokens

Weiterführend

• Material Design 3 – Avatar: m3.material.io/components/avatars (nicht dediziert, aber in Chip/List-Guidance)
• Apple Human Interface Guidelines – People and Faces: developer.apple.com/design/human-interface-guidelines
• Boring Avatars (Open Source): boringavatars.com
• Accessibility in Imaging: webaim.org/techniques/alttext