Verwendung
Die Avatar-Komponente wird eingesetzt, um Benutzer und Profile in Oberflächen schnell erkennbar zu machen, z. B. in Profilbereichen, in der Benutzerverwaltung, als Zuweisung in tabellarischen Daten, in der eigenen Profilübersicht oder bei anderen kollaborativen Funktionen.
Avatare unterstützen die Zuordnung von Aktionen und Inhalten zu einer Person, einem Unternehmen oder einem Unternehmensbereich und unterstützen damit die Orientierung im Interface. Sie stellen ein Benutzerkonto (runde Variante) oder ein Profil (quadratische Variante) visuell dar.
- Benutzerkonto-Variante (zu erkennen am Avatar): Rund, farbig, beinhaltet Initialen des Benutzers.
- Profil-Variante (differenzierendes Merkmal hier das Profilbild, nicht für Bürgerprofile!): Quadratisch mit abgerundeten Ecken, beinhaltet ein Platzhalterbild für den Profiltyp, das von Benutzern durch ein Bild oder Logo ersetzt werden kann.
Die größten Varianten der Avatare werden im Kopfbereich auf den direkten Unterseiten des Benutzerkontos und des Profils angezeigt. Nur dort sind die Avatare interaktiv und editierbar.
- Benutzerkonto-Variante (Avatar): Initialen können vom Benutzer selbst gewählt werden. Die Farbe wird initial zufällig zugewiesen und kann vom Benutzer gewechselt werden. Es gibt 10 Farboptionen.
- Profil-Variante (Profilbild): Hauptbenutzer können ein Logo hochladen und damit das generische Profilbild ersetzen. Wird das Bild gelöscht, dann wird das Platzhalterbild wieder angezeigt.
Aufbau
Avatar
- Avatar-Fläche: Farbgradient mit eigenständigen Farbwerten, die sonst nicht im Design System zu finden sind, um ihre Herkunft als nutzergenerierter Inhalt zu verdeutlichen.
- Fallback-Inhalt: Initialen als kontraststarkes Identifizierungsmerkmal.
Profilbild
- Entweder Platzhalterbilder für Geschäftskunden- und Behördenprofile (Bürgerprofile haben kein Profilbild),
- oder ein eigens hochgeladenes Logo in Form einer Bilddatei (.jpg oder .png mit Größenbeschränkungen).
Beschriftung
Innerhalb des Avatars werden die Initialen des Benutzers angezeigt:
- Es werden initial die Anfangsbuchstaben von Vor- und Nachname verwendet (z. B. „Max Mustermann“ → „MM“).
- Bei nur einem Namen wird ein einzelner Buchstabe dargestellt.
- Sollte es durch Adelsprädikate oder andere Namenszusätze zu fehlerhaften Darstellungen kommen, dann kann die Vorbelegung vom jeweilgen Benutzer mit maximal zwei frei wählbaren Zeichen überschrieben werden (z. B. „Max van Mustermann“ wird zu „MV“ und kann zu „MM“ geändert werden).
Profilbilder haben keine weitere Beschriftung.
Editieren eines Avatars oder Profilbildes
- Im Kopfbereich der Benutzerkontoseiten (Avatar) und der Profilseiten (Profilbild) wird die interaktive Variante der Komponente eingesetzt. Nur dort ist die Komponente ein Button, der ein Modal öffnet.
- Bewegt man den Cursor über die Button-Variante der Komponente, dann legt sich ein weißes Editieren-Icon über eine abgedunkelte Fläche.
- Diese Optionen zur Anpassung von Avatar oder Profilbild werden erst im Modal angeboten.
Modal “Avatar ändern”
- Das Modal besteht aus einem Titel, einem Einleitungstext, einer Live-Vorschau und den beiden Einstellungsoptionen für die Hintergrundfarbe und die Initialen des Avatars.
- Für die Hintergrundfarbe kann einer von zehn vordefinierten Farbgradienten ausgewählt werden. Die aktuelle Auswahl wird unterstrichen und direkt in der Live-Vorschau übernommen.
- Um die Initialen zu verändern, die im Avatar angezeigt werden, kann das Textfeld genutzt werden; bis zu zwei Zeichen sind hier maximal zugelassen. Die Eingabe von Sonderzeichen, Emojis oder ähnlichen Symbolen sollte bestmöglich unterbunden werden.
Modal “Profilbild und Anzeigename ändern”
- Das Modal besteht aus einem Titel, einem Einleitungstext, einer Live-Vorschau, den beiden Einstellungsoptionen für das eigene Profilbild oder Logo, sowie einem veränderten Anzeigenamen für das Profil.
- Für das Profilbild gibt es eine kompakte Upload-Komponente. Ausgewählte Bilder werden unmittelbar in der Live-Vorschau angezeigt, um das Ergebnis vor dem Speichern zu prüfen. Mit dem Löschen-Iconbutton kann das ausgewählte bzw. das aktuelle Bild entfernt werden und das Platzhalterbild des jeweiligen Profiltyps wird wieder angezeigt.
- Den Anzeigenamen des Profils kann man im gleichen Modal bearbeiten, um automatisch übernommene Unternehmensnamen ggf. aussagekräftiger oder Menü-gerechter anzuzeigen.
- Profilbild und Anzeigename werden überall verwendet, wo auf dieses Profil verwiesen oder verlinkt wird.
Do’s and Dont’s
So:
- Avatare verwenden, um Personen eindeutig zuzuordnen
- Farben, die einmal für einen Benutzer festgesetzt wurden, sollten nur von diesem Benutzer geändert werden können
- Einheitliche Größen innerhalb eines Kontextes beibehalten
- Avatare immer in Kombination mit dem Namen anzeigen, da sonst Verwechslungen möglich sind (Max Mustermann & Monika Musterfrau)
So nicht:
- Benutzerpersonalisierung (Farbzuweisung und Initialen) überschreiben/verändern
- Avatare/Profil ohne Bezug zu einer Person oder dem Profil einsetzen (kein Schmuck-Element)
- Zu viele unterschiedliche Größen in einer Ansicht mischen
- Avatare als alleinige Informationsquelle nutzen. Ausnahme: Wenn mit Klick auf das umliegende Element eine Detailsseite aufgeht, die sowohl den Avatar als auch den Benutzernamen beinhaltet.
- Profilbild als alleinige Informationsquelle
