Karten oder Listen: So wählst du das passende UI-Layout

Wähle Karten, wenn Menschen unterschiedliche Einträge erkennen und erkunden sollen. Wähle eine Liste, wenn sie gleichartige Angaben überfliegen, einen bekannten Eintrag finden oder eine Abfolge abarbeiten müssen. Sollen viele Werte mehrerer Datensätze verglichen werden, ist eine Tabelle womöglich die passendere Wahl.

Das ist ein nützlicher Ausgangspunkt für die Entscheidung zwischen Karten und Listen im UI-Design. Es ist keine Regel, nach der bildreiche Produkte immer Karten und Geschäftsanwendungen immer Zeilen brauchen. Dieselbe Sammlung kann verschiedenen Aufgaben dienen. Das beste Layout hängt davon ab, welche Aufgabe die aktuelle Ansicht erleichtern soll.

Stell dir eine Bibliothek mit Websiteprojekten vor. Eine Designerin auf der Suche nach einer visuellen Richtung erkennt das passende Projekt vielleicht am Vorschaubild. Ein Projektmanager sucht dagegen eine überfällige Prüfung und braucht dafür Verantwortliche, Status und Frist. Beide betrachten dieselben Daten, stellen aber unterschiedliche Fragen. Ein anderer Eckenradius an der Karte löst diesen Unterschied nicht auf.

Kläre, wonach die Person sucht

Beginne mit einer Handlung statt mit einer Komponente. „Projekte durchsuchen“ lässt zu viel offen. „Ein Projekt finden, dessen Stil zu einem Kunden aus dem Gastgewerbe passt“ und „Die heute fällige Prüfung finden“ ergeben unterschiedliche Informationsprioritäten und einen Maßstab für das Layout.

Bei der ersten Aufgabe hilft eine erkennbare Vorschau. Ein großer Titel allein verrät womöglich nicht, ob das Projekt mit Fotografie, zurückhaltender Typografie oder farbiger Illustration arbeitet. Die zweite Aufgabe braucht verlässliche Datums- und Statusangaben an vorhersehbaren Stellen. Ein dekoratives Vorschaubild verbraucht hier möglicherweise Platz, ohne die Entscheidung zu erleichtern.

Notiere das erste Merkmal, nach dem jemand voraussichtlich sucht: ein Bild, einen Namen, eine Kategorie, eine verantwortliche Person oder ein Datum. Bestimme anschließend das zweite Merkmal, mit dem sich der Treffer bestätigen lässt. Beide sollten sichtbar sein, ohne den Eintrag zu öffnen. Wenn Menschen jeden Kandidaten öffnen müssen, nur um ihn zu identifizieren, leistet die Sammlungsansicht zu wenig.

Die Nielsen Norman Group unterscheidet in ihrem Beitrag über Karten sinnvoll zwischen deren Fähigkeit, gemischte Inhalte zu gruppieren, und dem vorhersehbaren Lesepfad einer Liste. Außerdem weist sie darauf hin, dass Karten mehr Platz brauchen und Rangfolgen weniger deutlich vermitteln können. Prüfe diese Vor- und Nachteile, statt eines der Muster zum allgemeinen Sieger zu erklären. Nielsen Norman Group über UI-Karten.

Pinterest und ein Eye-Tracking-Beispiel zeigen unterschiedliche Kosten

Die im Kartenartikel von NN/G dokumentierte Pinterest-Oberfläche gruppiert Bilder, Titel und ergänzende Informationen in unterschiedlich hohen Containern. Das passt zu einer Sammlung, in der Bilder beim Wiedererkennen helfen und die Einträge unterschiedlich viel Material enthalten. Der folgende Screenshot zeigt diese historische Oberfläche.

Derselbe Artikel enthält eine Eye-Tracking-Sitzung, in der eine teilnehmende Person in einem Kartenlayout nach einer interessanten Geschichte sucht. Der Blickverlauf zeigt wiederholte Sprünge zwischen Kandidaten. NN/G bringt dieses Verhalten mit einem Layout in Verbindung, dem eine klare Rangfolge fehlt und bei dem vergleichbare Informationen nicht durchgehend an derselben Stelle stehen.

Die Beispiele machen zwei unterschiedliche Aufgaben sichtbar. Wenn jemand ein Bild auswählt, das sich richtig anfühlt, gehört das Erkunden zur Aufgabe. Wer den zuletzt überfälligen Datensatz sucht, hat dagegen Zusatzaufwand, wenn das Datum auf jeder Karte neu gesucht werden muss. Beides „Stöbern“ zu nennen verdeckt genau den Unterschied, der das Layout bestimmen sollte.

Prüfe vor dem Stil zunächst die Informationen. Decke in deinem geplanten Raster die Vorschaubilder ab. Wird die Hauptaufgabe dadurch unmöglich, liefern die Bilder wahrscheinlich notwendige Hinweise. Wird sie leichter, weil Datums- und Statusangaben nun besser auffallen, konkurrieren die Bilder möglicherweise mit der Arbeit.

Bestimme, was vor dem Öffnen eines Eintrags sichtbar sein muss

Vergleiche Alternativen mit denselben Datensätzen, Filtern und verfügbaren Aktionen. Lass eine Person einen überfälligen Eintrag suchen und eine andere eine visuelle Richtung erkennen. Wechsle dabei ab, welches Layout zuerst erscheint. Halte falsche Auswahlen, unnötige Aufrufe von Detailseiten und Orientierungsverluste nach der Rückkehr fest. Die Vorliebe für die schönere Ansicht ist hilfreiches Feedback zum Erscheinungsbild, beantwortet aber nicht die Frage, welches Layout die Aufgabe unterstützt.

Lies die Inhalte, bevor du den Container wählst

Nimm eine kleine Stichprobe tatsächlicher Datensätze, einschließlich der unbequemen Fälle. In unserer Projektbibliothek wären das etwa ein kurzer Titel, ein langer Titel, ein fehlendes Vorschaubild, ein archiviertes Projekt und ein Projekt ohne verantwortliche Person. Diese Inhalte verraten mehr über das passende Layout als ein Bildschirm voller identischer Platzhalterrechtecke.

Bei stark unterschiedlichen Inhalten können Karten sinnvoll sein, weil jeder Eintrag eine in sich schlüssige Zusammenfassung bilden kann. Wiederholen sich bei jedem Eintrag dieselben Felder, spricht mehr für eine Liste. Keine dieser Beobachtungen entscheidet die Frage allein. Sie zeigen aber, womit die Gestaltung umgehen muss.

Achte besonders auf fehlende Medien. Wenn die meisten Datensätze kein aussagekräftiges Bild haben, wird ein Kartenraster schnell zur Galerie gleichförmiger Platzhalter. Das Layout verspricht visuelles Wiedererkennen, die Inhalte liefern jedoch eine textbasierte Suche. Erwäge eine textorientierte Liste oder kleinere, optionale Vorschaubilder, statt künstlich dekorative Abwechslung herzustellen.

Umgekehrt kann eine Liste, die ein visuelles Portfolio auf Dateinamen reduziert, notwendige Informationen beseitigen. „Projekt 14“ und „Projekt 15“ sind vielleicht korrekte Namen, helfen aber kaum beim Wiedererkennen. Eine brauchbare Vorschau kann wichtiger sein als zusätzliche Zeilen auf dem Bildschirm.

Ein durchgearbeitetes Beispiel: eine Bibliothek, zwei Einstiegsansichten

Stell dir sechs fiktive Projekte vor: Cedar Lodge, Harbor Rooms, Studio North, Maple Clinic, Archive House und Lumen Shop. Jeder Datensatz hat ein Vorschaubild, eine verantwortliche Person, einen Prüfstatus und einen Prüfungstermin. Keine dieser Angaben ändert sich durch eine andere Darstellung.

Für visuelles Erkunden steht das Vorschaubild im Vordergrund, der Projektname unmittelbar darunter. Ergänze eine kurze Kategorie und eine zurückhaltende Statusbeschriftung. Die verantwortliche Person kann mit geringerer Betonung sichtbar bleiben, wenn sie bei der Entscheidung hilft, wen man ansprechen sollte. Fülle die Karte nicht mit sämtlichen Projektmetadaten, nur weil sie vorhanden sind.

Für die Prüfverwaltung beginnst du mit einer kompakten Zeile. Setze den Projektnamen und gegebenenfalls ein kleines Vorschaubild an den Anfang. Status und Prüfungstermin erscheinen an festen Positionen. Eine konkrete Aktion wie das Öffnen der Prüfung darf sichtbar sein. Eine schmückende Beschreibung des visuellen Stils ist hier weniger hilfreich.

Die beiden Ansichten müssen nicht genau dieselben Felder zeigen. Sie müssen aber dieselben zugrunde liegenden Objekte konsistent beschreiben. Heißt ein Status einmal „Bereit zur Prüfung“ und anderswo „Ausstehend“, könnte der Eindruck entstehen, der Ansichtswechsel habe den Projektzustand verändert.

Die Startansicht sollte zum Hauptzweck des Bildschirms passen. Eine Entdeckungsseite kann mit Karten beginnen, eine Prüfwarteschlange mit Zeilen. Ein Umschalter entbindet dich nicht davon, einen sinnvollen Standard zu wählen. Viele Menschen bleiben bei der Darstellung, die sie zuerst sehen.

Gib jeder Ansicht eine klare Aufgabe

Karten: Schaffe eine klare innere Reihenfolge

Eine Karte braucht einen Lesepfad. Entscheide, welches Element den Eintrag identifiziert, welches ihn erklärt und welches eine Aktion startet. Wenn Vorschaubild, Titel, Badge, Autor, Schlagwortliste und Button gleich viel Aufmerksamkeit verlangen, wird die Karte zum winzigen Dashboard statt zur hilfreichen Zusammenfassung.

In der Erkundungsansicht der Projektbibliothek sollten Vorschaubild und Titel die Identität vermitteln. Die Kategorie hilft beim Einordnen. Status und Verantwortliche sind ergänzende Angaben. Diese Reihenfolge lässt sich durch Größe, Gewicht, Nähe und Zurückhaltung ausdrücken, ohne für jedes Feld eine neue Farbe einzuführen.

Platziere vergleichbare Angaben an vergleichbaren Stellen. Auch beim Stöbern prüfen Menschen manchmal dasselbe Detail bei mehreren Kandidaten. Setze den Status immer in denselben Bereich und verwende ein einheitliches Beschriftungsformat. Eine etwas kürzere Beschreibung ist oft der bessere Kompromiss, als wichtige Metadaten unvorhersehbar wandern zu lassen.

Das Bild muss seinen Platz rechtfertigen. Ein Screenshot, der zu klein ist, um das Layout zu erkennen, ist nicht zwangsläufig hilfreicher als gar kein Bild. Wähle einen Ausschnitt um ein identifizierendes Merkmal, nutze gegebenenfalls ein stabiles Seitenverhältnis und vermeide beliebige Ausschnitte, die das Raster unruhiger wirken lassen als die Projekte selbst.

Ein fehlendes Bild muss als Zustand vorgesehen sein. Nutze einen ruhigen Ersatz, bei dem Titel und Kategorie die Identität erhalten. Der Ersatz sollte nicht so dominant sein, dass ausgerechnet Einträge ohne Bild am stärksten auffallen.

Auch Karten brauchen Abgrenzung. Ein kräftiger Rahmen und tiefer Schatten an jedem Eintrag sind dafür jedoch nicht zwingend nötig. Die Informationen sollen ihrem Eintrag zugeordnet bleiben. Versuche das zunächst mit Abständen und einer dezenten Flächengestaltung, bevor du mehr Dekoration hinzufügst. Prüfe die gesamte Sammlung: Was an einer Karte gut aussieht, kann bei zwanzig Karten ermüdend wirken.

Listen: Erhalte einen verlässlichen Lesepfad

Den Vorteil einer Liste verlierst du am schnellsten, wenn jede Zeile anders aufgebaut ist. Halte die identifizierenden Inhalte an einer festen Stelle und lege die Reihenfolge der ergänzenden Felder fest. Menschen sollten die Sammlung nach unten durchgehen können, ohne jede Zeile neu lernen zu müssen.

In der Prüfwarteschlange steht der Projektname zuerst. Prüfstatus und Fälligkeit bekommen Positionen, an denen sie wiederholt leicht zu finden sind. Wird nach dem Termin sortiert, muss er sichtbar bleiben. Die Sortierung nach einem ausgeblendeten Feld lässt Leser nach einem Muster suchen, das sie nicht erkennen können.

Dichte ist eine Entscheidung über Lesen und Bedienung, kein Wettbewerb um die meisten Datensätze auf einem Bildschirm. Zeilen brauchen genug Platz, damit Namen unterscheidbar und Bedienelemente bequem nutzbar bleiben. Verschmelzen Verantwortliche und Status beim Verdichten zu einer grauen Textzeile, helfen die zusätzlich sichtbaren Datensätze möglicherweise nicht weiter.

Nutze die zweite Zeile bewusst. Sie kann eine kurze Beschreibung oder ein unterscheidendes Merkmal wie den Namen eines Arbeitsbereichs enthalten. Wiederhole nicht einfach den Titel mit anderen Worten. „Websiteprojekt für Cedar Lodge“ unter „Cedar Lodge Website“ verlängert eine Projektbibliothek, hilft aber kaum bei der Identifizierung.

Listen dürfen Bilder enthalten. Ein kleines, aussagekräftiges Vorschaubild kann beim Wiedererkennen helfen und die verlässliche Zeilenstruktur erhalten. Entscheidend ist, ob das Bild den Eintrag dominieren muss, nicht ob eine Liste überhaupt Bilder haben darf.

Sammeln sich in einer Zeile mehrere ausgerichtete Felder, die Menschen aktiv vergleichen, prüfe, ob du eigentlich eine Tabelle entworfen hast. Das ist kein Fehler. Eine Tabelle kann Beziehungen mit ausdrücklichen Überschriften versehen und den Vergleich direkter unterstützen. Die Bezeichnung „Liste“ lässt die Beziehungen zwischen Spalten nicht verschwinden.

Kläre das Klickverhalten, bevor alles klickbar wird

Eine Karte kann einen Eintrag öffnen, ein Menü anbieten, eine Favoritenfunktion enthalten und auf eine Kategorie verlinken. Jede zusätzliche Aktion macht die Oberfläche komplexer. Die Gestaltung muss erklären, was beim Anwählen von Bild, Titel, leerer Fläche und sekundärem Bedienelement passiert.

Verwende ein klares Hauptziel. Öffnet der Titel das Projekt, das Vorschaubild aber einen Bildbetrachter, braucht dieser Unterschied einen Grund und eine verständliche Kennzeichnung. Sonst verhalten sich zwei visuell verbundene Elemente wie voneinander unabhängige Links. Dasselbe Problem entsteht in Zeilen, deren Name und Hintergrund auf verschiedene Ansichten führen.

Das W3C-Designsystem dokumentiert sowohl Karten mit getrennten Links als auch Karten mit ganzflächigem Link. Es weist außerdem darauf hin, dass ihre Überschriftenebenen zur umgebenden Seite passen müssen. Das erinnert daran, dass eine visuelle Karte kein einziges verbindliches Interaktionsmodell vorgibt. Die Kartenmuster des W3C.

Für unser Projektbeispiel sind ein verlinkter Titel und ein separates Menü ein verständlicher Ausgangspunkt. Wenn die Umsetzung die primäre Klickfläche vergrößert, prüfe, ob das Menü unabhängig funktioniert und Text bei Bedarf ausgewählt werden kann. Erzeuge keine ineinander verschachtelten Links und mache nicht jeden Textschnipsel zu einer zusätzlichen Tastaturstation.

Auswählen ist etwas anderes als Öffnen. Wer mehrere Projekte für eine Aktion auswählt, braucht einen sichtbaren Auswahlzustand und einen klaren Weg, ihn zu verlassen. Lass den ersten Klick nicht in einer Ansicht auswählen und in der anderen öffnen, ohne einen ausdrücklichen Moduswechsel. Ein Ansichtswechsel soll die Darstellung ändern, nicht stillschweigend grundlegendes Verhalten umdefinieren.

Halte neben dem Zeigerverhalten auch die Tastaturerwartungen fest. Wohin wandert der Fokus? Welches Element öffnet den Eintrag? Wie wird das sekundäre Menü erreicht? Ein Screenshot beantwortet diese Fragen nicht. Nimm sie in die Interaktionsprüfung auf, statt davon auszugehen, dass eine klare visuelle Hierarchie automatisch eine klare Bedienstruktur garantiert.

Biete einen Ansichtswechsel nur an, wenn beide Ansichten nützlich sind

Ein Wechsel zwischen Karten und Liste lohnt sich, wenn dieselbe Zielgruppe tatsächlich zwischen Wiedererkennen und systematischem Überfliegen wechselt. Er bringt wenig, wenn eine Ansicht nur eine schwächere Version der anderen ist. Zwei Ansichten verdoppeln zudem die Zahl der Inhaltszustände und Interaktionsdetails, die gepflegt werden müssen.

Wenn du einen Umschalter anbietest, erhalte Filter, Sortierung und die ausgewählte Sammlung. Wer die Bibliothek auf Projekte mit ausstehender Prüfung eingegrenzt hat, sollte nach dem Wechsel zur Listenansicht nicht wieder alle Projekte sehen. Der Schalter ändert die Darstellung der Ergebnisse, nicht die Kriterien, die sie erfüllen müssen.

Erhalte eine Auswahl, soweit es sinnvoll ist, und mache Einschränkungen deutlich. Gibt es Sammelaktionen nur in der Listenansicht, erkläre das, statt die Auswahl kommentarlos zu verwerfen. Noch besser: Prüfe, ob die Aktion in beiden Darstellungen konsistent bleiben kann.

Verwende einen beschrifteten Schalter mit sichtbarem Aktivzustand. Raster- und Zeilensymbole können helfen, erklären aber nicht jedes Layout allein. Eine kurze Beschriftung wie „Karten“ oder „Liste“ verdeutlicht die Wahl, besonders wenn sich die Ansichten auf schmalen Bildschirmen stark ähneln.

Denke auch an wiederkehrende Besucher. In einem umgesetzten Produkt kann es hilfreich sein, die bevorzugte Ansicht zu speichern. Diese Präferenz sollte aber keinen Kontext übersteuern, in dem sich die Aufgabe ändert. Eine Prüfwarteschlange und eine öffentliche Inspirationsgalerie brauchen nicht zwangsläufig dieselbe globale Einstellung. Lege ihren Geltungsbereich fest, statt die Speicherung zu einem unbeabsichtigten Verhalten werden zu lassen.

Erhalte die Aufgabe auf schmalen Bildschirmen

Ein Raster wird auf dem Smartphone oft einspaltig. Dadurch wird es nicht automatisch zur hilfreichen Liste. Vielleicht belegt das Bild weiterhin den größten Teil des Bildschirms, während das für die Aufgabe nötige Feld weit darunter liegt. Prüfe die Informationshierarchie nach der Layoutänderung erneut.

Für die Erkundungsansicht kann eine großzügige Vorschau weiterhin passen. Für die Prüfwarteschlange ist eine kompakte Zusammenfassung mit lesbarem Datum möglicherweise nützlicher. Verstecke das entscheidende Feld nicht nur deshalb, weil es auf dem Desktop in der äußersten rechten Spalte stand.

Lass sekundäre Felder in einer festgelegten Reihenfolge umbrechen oder in eine zweite Zeile rücken. Ein Status sollte nicht zum unerklärten farbigen Punkt werden, nur um Platz zu sparen. Muss ein Feld erst aufgeklappt werden, prüfe, ob Menschen die Hauptaufgabe dennoch erledigen können, ohne jeden Eintrag zu öffnen.

Lange Namen zeigen Probleme besonders deutlich. Verwende zwei realistische Projektnamen, die mit denselben Wörtern beginnen und sich erst am Ende unterscheiden. Werden beide auf identischen Text gekürzt, kann das schmale Layout die Datensätze nicht mehr identifizieren. Passe Umbruch, verfügbare Breite oder das sichtbare Erkennungsmerkmal an, bevor du die Schrift verkleinerst.

Prüfe den Aktionsbereich gesondert. Ein Menübutton, der in einer breiten Zeile leicht zu bedienen ist, kann neben Titel oder Checkbox eingequetscht wirken. Bei einer schmaler werdenden Karte mit drei kleinen Bedienelementen wird es besonders schwierig. Entferne optionale Aktionen aus der unmittelbaren Ansicht, wenn das die Aufgabe vereinfacht, und erhalte einen klaren Zugang zu ihnen.

Vergleiche Listen- und Rasteransicht mit echten Suchaufgaben

Frage nicht nur, welches Layout die Prüfenden lieber mögen. Gib ihnen eine Aufgabe mit überprüfbarer Antwort. In der Projektbibliothek könnte es beim visuellen Erkunden darum gehen, ein zurückhaltend gestaltetes Projekt für das Gastgewerbe zu finden. Bei der Suche nach einem bekannten Eintrag wäre das Ziel Archive House. Beim administrativen Durchsehen könnte die früheste Prüfung für eine bestimmte Person gesucht werden.

Verwende in beiden Layouts gleichwertige Inhalte. Hat eines bessere Vorschaubilder, kürzere Texte oder nützlichere Filter, vergleichst du mehr als das Layout. Diese Verbesserungen können sinnvoll sein, sind aber kein Beleg dafür, dass Karten oder Listen grundsätzlich überlegen sind.

Beobachte, wo Menschen zögern. Wer wiederholt Einträge öffnet, um einen fehlenden Status zu finden, weist auf ein Inhaltsproblem hin. Wer nach der Rückkehr die Orientierung verliert, zeigt ein Navigationsproblem. Wer die zweite Rasterzeile überspringt, könnte mit der visuellen Reihenfolge Schwierigkeiten haben. Jede Beobachtung legt eine andere Änderung nahe.

Nimm eine Aufgabe auf, die deinen bevorzugten Entwurf herausfordert. Bevorzugst du Karten, teste eine Suchaufgabe, bei der dieselbe Angabe über mehrere Einträge hinweg geprüft werden muss. Bevorzugst du Listen, teste visuelles Wiedererkennen bei ähnlich benannten Einträgen. Ziel ist, die Kosten der Entscheidung sichtbar zu machen und ihre Vertretbarkeit zu beurteilen, nicht Zustimmung zum ersten Entwurf zu sammeln.

In OpenDesign kannst du HTML-Layoutvarianten erstellen und prüfen, ihr visuelles Verhalten mit Viewport-Vorgaben untersuchen und Kommentare an einer konkreten Karte oder Zeile anbringen. Halte Datensätze und Anforderungen im Gestaltungskontext fest, damit Überarbeitungen eine stabile Grundlage haben. Suche, gespeicherte Präferenzen und dauerhaft erhaltene Auswahlen prüfst du im tatsächlich umgesetzten Ablauf.