Behalten Sie ein Thema pro Karte bei
Ermitteln Sie, was Benutzer wissen müssen, bevor sie sich zum Öffnen einer Karte entscheiden.
Karte Designsystem
Sammeln Sie Informationen und Aktionen in einer einfach zu scannenden Einheit.
Inhalt der Checkliste
Prüffortschritt
01
Struktur und Bedeutung
Vergleichen Sie Informationen und Präsentation im Nutzungskontext.
02
Interaktion 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
BEISPIELE
Anwendungsbeispiele
Behalten Sie ein Thema pro Karte bei
Auf der Kurskarte sind Name, Niveau und Dauer vor der Schaltfläche „Kurs anzeigen“ angegeben.
Varianten und Anwendungsfälle
Karten voneinander abgrenzen
Karten durch Rahmen oder Hintergrund von der Seite abheben und gleiche Inhaltstypen einheitlich behandeln.
Karten auf hellen und dunklen Hintergründen testen: Grenzen bleiben auch ohne Schatten erkennbar.
Beispiel Eine Dokumentkarte hat einen klaren Rahmen und einen verlinkten Titel.
Abstände innerhalb der Karte
Bild, Titel, Beschreibung und Aktionen durch Abstände entsprechend ihrem Zusammenhang gruppieren.
Zweizeilige Titel und fehlende Bilder testen: Abstände erzeugen keine unbegründeten Lücken.
Beispiel Zwischen Bild und Titel liegen 12 px; die Beschreibung steht näher am Titel als an der unteren Aktion.
Abgerundete Ecken und Zuschnitt
Radien innerhalb derselben Gestaltungsskala halten und Bilder passend zu den Rahmenecken zuschneiden.
Bilder an den Kartenrand setzen und fokussieren: Bilder ragen nicht über die Ecken und der Fokusrahmen bleibt vollständig sichtbar.
Beispiel Das obere Bild hat nur oben abgerundete Ecken; der Fußbereich bildet eine durchgehende Fläche mit der Karte.