Grundlagen
Ein Avatar ist ein kleiner, runder Container, der ein Image, Initialen oder ein Icon 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 eignet sich besonders für personalisierte Elemente wie Benutzerprofile oder Projektbilder. Ein Avatar mit Icon 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 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 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.