
Avatar Designsystem
Zeigen Sie Identität und stellen Sie kontrollierte Foto-Updates bereit.
6 Prüfpunkte · 2 Inhaltsgruppen
Inhalt der Checkliste
Prüffortschritt
01Struktur und Bedeutung
Vergleichen Sie Informationen und Präsentation im Nutzungskontext.
02Interaktion und Benutzerfreundlichkeit
Probieren Sie den Vorgang aus, ändern Sie den Status und arbeiten Sie weiter.
Der Fortschritt wird automatisch in diesem Browser gespeichert.
ANLEITUNG
So prüfen Sie
01Zum Erkennen von Personen oder Gruppen
Profilbilder sollten nicht die einzige Möglichkeit sein, einen Benutzer zu identifizieren.
BEISPIELE
Anwendungsbeispiele
Zum Erkennen von Personen oder Gruppen
In der Mitgliederliste werden sowohl der Avatar als auch der Name „Linh Nguyen“ angezeigt.
Varianten und Anwendungsfälle
Form des Profilbilds
Für gleiche Objekttypen einheitliche Formen wählen und beim Zuschnitt wichtige Bildbereiche erhalten.
Porträts am Rand und breite Logos testen: Erkennbare Merkmale bleiben erhalten.
Beispiel Personen haben runde Bilder, Organisationen abgerundete quadratische Rahmen.
Größenskala
Größen für Listen, Kommentare und Profile festlegen, statt sie je Bildschirm beliebig zu ändern.
Avatare in dichten Zeilen und Profilköpfen vergleichen: Kleine Bilder erhöhen die Zeile nicht unnötig.
Beispiel Listen verwenden 32 px, Profile 80 px, jeweils mit gleichem Zuschnitt.
Statusmarkierung
Status neben dem Bild zeigen und benennen, damit die Farbe nicht erraten werden muss.
Helles und dunkles Design sowie Darstellung ohne Farbe testen: Online bleibt erkennbar.
Beispiel Der grüne Punkt wird in den Nutzerinformationen mit „Online“ beschriftet.
Ohne Bild
Bei defekten, fehlenden oder noch ladenden Bild-URLs Größe und Identität erhalten.
Die Bildanfrage blockieren: Die Zeile springt nicht und die Person bleibt erkennbar.
Beispiel Ein defektes Bild wird beim Konto Anh Nguyen durch AN ersetzt.