So präsentieren Sie eine wachsende Sammlung kleiner virtueller Haustiere

Kleine Haustiere sind in erster Linie visuelle Elemente, daher ist ein regelmäßiges Raster ein guter Ausgangspunkt. Verwenden Sie gleich große Zellen und behalten Sie eine feste Leserichtung von links nach rechts und von oben nach unten bei. So erhält jedes neue Haustier einen vorhersehbaren Platz, was Sammlern das Überfliegen der Galerie bei der Rückkehr erleichtert. Apple empfiehlt vertraute Zeilen- oder Rasterlayouts für visuelle Sammlungen, während Material Design leichtgewichtige Raster-Kacheln als ideal für Bildergalerien beschreibt. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Geben Sie jeder Zelle ausreichend Platz für das Bild des Haustieres und seinen Namen. Müssen Name, Typ oder ein kurzer Status bei jedem Tier angezeigt werden, verwenden Sie eine schlichte Kachel mit klarer Hierarchie, statt eine vollständige Karte mit Rändern, Schaltflächen und dekorativen Details einzusetzen. Die Richtlinien von Material unterscheiden Bildergalerien von Karten, die sich besser eignen, wenn Elemente unterschiedliche Inhalte oder Aktionen aufweisen. Bei einem weitgehend einheitlichen Satz von Haustieren lenkt überflüssiges Kartendesign nur von der Sammlung ab.

Ein Raster kann nicht mehr alle Haustiere gleichzeitig anzeigen, sobald die Sammlung über den verfügbaren Bildschirmbereich hinauswächst. Wählen Sie ein primäres Ziel: die größtmögliche Anzahl auf einen Blick sehen, ein bestimmtes benanntes Haustier schnell finden oder einen hervorgehobenen Bereich genießen. Diese Ziele erfordern unterschiedliche Layouts.

Hauptziel	Sinnvolle Darstellungsform	Kompromiss
Viele Haustiere überfliegen	Kompaktes, gleichmäßiges Raster	Einzelne Haustiere erhalten weniger Platz
Ein bestimmtes Haustier finden	Raster plus Suche oder alphabetische Sortierung	Steuerelemente beanspruchen Bildschirmfläche
Einige Favoriten hervorheben	Feature-Zeile oder größerer Anzeigebereich über dem Raster	Der Rest der vollständigen Sammlung rückt weiter nach unten
Haustierdetails vergleichen	Listen- oder Detailansicht	Weniger Haustiere passen in die anfängliche Ansicht

Betrachten Sie den hervorgehobenen Bereich als kleines Fenster zur Sammlung, nicht als Ersatz für sie. Zeigen Sie beispielsweise oben eine Handvoll Favoriten an und behalten Sie darunter das vollständige Raster bei. Das adaptive Haustiergalerie-Beispiel von Android nutzt einen prominenten Haustierbereich sowie ein Raster, das mehr Tiere anzeigt, sobald das Layout mehr Platz bietet. Dies unterstützt den allgemeinen Gestaltungsansatz, einem Feature-Bereich visuelle Priorität einzuräumen und darunter eine durchstöberbare Galerie beizubehalten. (Android Developers: Furry friends and adaptive APIs)

Wird das Raster zu lang, unterteilen Sie es in Kategorien, die der Denkweise eines Sammlers entsprechen. Mögliche Optionen sind Art oder Welt, Sammlungsset, Farbfamilie oder Erwerbszeitraum – nutzen Sie dabei nur Kategorien, die in der Sammlung auch tatsächlich vorkommen. Beginnen Sie mit wenigen Gruppen. Zu viele winzige Abschnitte können dazu führen, dass sich das Durchstöbern wie der Wechsel zwischen separaten Sammlungen anfühlt.

Behalten Sie eine eindeutige Standardansicht wie „Alle Haustiere“ bei und heben Sie die aktive Gruppe deutlich hervor. Wenn Haustiere mehreren Gruppen angehören können, ist ein Filter meist übersichtlicher, als dasselbe Haustier in mehreren Abschnitten zu duplizieren. Gehört jedes Haustier genau einer festen Gruppe an, können beschriftete Abschnitte das Erfassen der gesamten Sammlung erleichtern. Dies sind praktische Anwendungen für die Anordnung von Inhalten entlang ihrer Struktur; die beste Gruppierung richtet sich nach den tatsächlichen Attributen der Sammlung und nicht nach einem universellen Kategorienschema.

Das Bild eines Haustieres mag für den Besitzer zwar wiedererkennbar sein, doch Namen helfen bei einer wachsenden Liste und erleichtern das Unterscheiden ähnlich aussehender Varianten. Platzieren Sie einen kurzen Namen direkt unter jedem Thumbnail. Falls zwei Haustiere denselben Namen tragen können, ergänzen Sie einen prägnanten zweiten Bezeichner, etwa deren Set oder Form. Vermeiden Sie es, jede Kachel mit mehreren Werten, Abzeichen und Bedienelementen zu überfrachten: Solche Details konkurrieren mit dem Bild und machen das Raster unruhig.

Ist die Anzeige Teil einer Website oder App, stellen Sie sicher, dass die Identität des Haustieres sowohl als Text als auch als Bild verfügbar ist. Laut W3C-Richtlinien benötigen informative Bilder Textalternativen, die ihren relevanten Inhalt vermitteln; liefert ein angrenzendes Label bereits dieselben Informationen, ist eine Wiederholung im Alternativtext des Bildes meist überflüssig. Verknüpfen Sie in der Praxis einen sichtbaren Namen mit einer passenden Barrierefreiheitsbeschriftung und vermeiden Sie es, ein unverwechselbares Haustier ausschließlich über Farbe oder Bild identifizierbar zu machen. (W3C WAI: Images Tutorial)

Nutzen Sie die verfügbare Breite, um die Spaltenanzahl anzupassen, anstatt auf jedem Bildschirm eine feste Anzahl zu erzwingen. Ein kompaktes Smartphone zeigt womöglich zwei Spalten; ein breiterer Bildschirm kann mehr darstellen, sofern jedes Bild und jeder Name gut lesbar bleibt. Behalten Sie gleichmäßige Abstände bei und wahren Sie dieselbe Grundreihenfolge beim Umbrechen des Layouts. Androids Beispiel für adaptives Design beschreibt eine zweispaltige Galerie auf kompakten Bildschirmen und das Freigeben weiterer Inhalte, sobald mehr Platz vorhanden ist. (Android Developers: Furry friends and adaptive APIs)

Prüfen Sie die Anzeige bei der schmalsten Größe, die Nutzer voraussichtlich verwenden, sowie auf einem breiten Desktop-Bildschirm. Achten Sie auf abgeschnittene Namen, Bilder, deren Erkennungsmerkmale verloren gehen, ungleichmäßige Kachelhöhen oder Bedienelemente mit unschönen Zeilenumbrüchen. Erfordert ein Haustier einen längeren Namen, ermöglichen Sie gezielt eine zweite Zeile oder kürzen Sie ihn einheitlich ab – mit der Möglichkeit, den vollständigen Namen einzusehen. Vermeiden Sie, dass ein einzelner ungewöhnlicher Eintrag das gesamte Raster unbemerkt verzerrt.

Bei einer kleinen Sammlung reicht das Scrollen durch ein einziges Raster oft aus. Ergänzen Sie eine Suchfunktion, wenn Nutzer ein bestimmtes Haustier aus einer längeren Liste heraussuchen müssen. Bieten Sie Sortierfunktionen an, wenn die Reihenfolge eine Rolle spielt – beispielsweise alphabetisch oder nach dem Hinzufügedatum. Setzen Sie Filter nur für Attribute ein, die tatsächlich zur Unterscheidung der Elemente beitragen. Platzieren Sie diese Bedienelemente oberhalb der Ergebnisse und heben Sie die aktive Sortierung bzw. Filterung hervor, damit die aktuelle Ansicht nachvollziehbar bleibt. Die Sammlungsrichtlinien von Material verorten Filter- und Sortierfunktionen außerhalb der Karten selbst, wodurch der Fokus auf dem Inhalt der Elemente bleibt. (Material Design: Cards)

Verlassen Sie sich nicht auf endloses Scrollen ohne Fortschrittsanzeige. Ein sichtbarer Zähler für die Sammlung, Abschnittsüberschriften oder eine deutliche „Mehr anzeigen“-Schaltfläche können verdeutlichen, wie viele Einträge noch folgen. Dies sind optionale Hilfen und keine zwingenden Vorgaben; wählen Sie die schlankste Variante, die Nutzern bei der Orientierung hilft, ohne visuelle Unruhe zu erzeugen.

Fügen Sie einige repräsentative Haustiere ein – darunter ähnlich aussehende Varianten und den längsten Namen – und prüfen Sie die Sammlung auf Smartphone- sowie Desktop-Breiten. Fragen Sie sich: Kann man jedes Haustier erkennen, seinen Namen lesen, die aktuelle Gruppierung oder Sortierung verstehen und ohne langes Raten zur vollständigen Sammlung gelangen? Lässt sich ein bekanntes Haustier finden, ohne jedes einzelne Element absuchen zu müssen? Stehen die Bilder weiterhin im Mittelpunkt?

Fällt die Wiedererkennung schwer, vergrößern Sie die Kacheln oder reduzieren Sie sichtbare Details. Ist das Finden von Elementen mühsam, ergänzen Sie eine Namenssuche oder eine sinnvolle Sortierung. Wirkt der erste Bildschirm überladen, reservieren Sie einen kleinen Bereich für Favoriten und platzieren Sie die vollständige Sammlung darunter. Nehmen Sie Änderungen schrittweise vor und wiederholen Sie die Prüfung, wenn die Sammlung wächst. Das passende Layout ist jenes, das die eigentliche Aufgabe des Nutzers bei der jeweiligen Anzeigegröße und -dichte optimal unterstützt.

• Apple Developer, „Collections“ — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, „Cards“ — https://m1.material.io/components/cards.html
• Android Developers, „Furry friends and adaptive APIs“ — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, „Images Tutorial“ — https://www.w3.org/WAI/tutorials/images/