Een groeiende verzameling kleine virtuele huisdieren weergeven

Kleine huisdieren zijn vooral visuele items, dus een regelmatig raster is een goed uitgangspunt. Gebruik cellen van gelijke grootte en houd een vaste leesvolgorde aan: van links naar rechts en vervolgens van boven naar beneden. Zo krijgt elk nieuw huisdier een voorspelbare plek en kan iemand die terugkomt de galerij snel scannen. Apple raadt vertrouwde indelingen met rijen of rasters aan voor visuele verzamelingen, terwijl Material Design beschrijft dat lichte rastertegels geschikt zijn voor afbeeldingsgalerijen. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Geef elke cel genoeg ruimte voor de afbeelding en de naam van het huisdier. Als de naam, het type of een korte status bij elk huisdier moet staan, gebruik dan een eenvoudige tegel met een duidelijke hiërarchie in plaats van een volledige kaart met randen, knoppen en decoratieve details. Volgens de richtlijnen van Material zijn afbeeldingsgalerijen iets anders dan kaarten, die vooral nuttig zijn wanneer items uiteenlopende inhoud of acties hebben. Bij een grotendeels uniforme verzameling huisdieren leiden extra kaartranden en versieringen de aandacht af van de verzameling.

Zodra de verzameling groter is dan het beschikbare schermoppervlak, kan een raster niet alle huisdieren tegelijk tonen. Kies een hoofddoel: in één oogopslag zo veel mogelijk huisdieren zien, snel een huisdier met een bekende naam vinden of genieten van een uitgelichte presentatie. Elk doel leidt tot een andere indeling.

Hoofddoel	Handige weergave	Afweging
Veel huisdieren scannen	Compact, gelijkmatig raster	Elk huisdier krijgt minder ruimte
Een bekend huisdier vinden	Raster met zoekfunctie of alfabetische sortering	De bedieningselementen nemen wat schermruimte in
Enkele favorieten tonen	Uitgelichte rij of groter weergavegebied boven het raster	Een groter deel van de verzameling staat verder naar beneden
Details van huisdieren vergelijken	Lijst- of detailweergave	Er passen minder huisdieren in de eerste weergave

Zie het uitgelichte gebied als een klein venster op de verzameling, niet als vervanging ervan. Toon bijvoorbeeld bovenaan een handvol favorieten en houd daaronder het volledige raster. In het aanpasbare voorbeeld voor een huisdierengalerij van Android staat een huisdier prominent in beeld en kan het raster meer huisdieren tonen wanneer de indeling meer ruimte biedt. Dat ondersteunt de algemene ontwerpkeuze om een uitgelicht gebied visuele prioriteit te geven en tegelijk daaronder een doorzoekbare galerij te behouden. (Android Developers: Furry friends and adaptive APIs)

Als het raster lang wordt, verdeel het dan in categorieën die aansluiten bij de manier waarop iemand over de huisdieren denkt. Mogelijke categorieën zijn soort of wereld, verzamelreeks, kleurfamilie of periode waarin ze zijn verkregen. Gebruik alleen categorieën die echt op de verzameling van toepassing zijn. Begin met een klein aantal groepen. Te veel kleine secties kunnen het bladeren laten voelen als het wisselen tussen afzonderlijke verzamelingen.

Zorg voor één duidelijke standaardweergave, zoals ‘Alle huisdieren’, en maak zichtbaar welke groep actief is. Als huisdieren tot meer dan één groep kunnen behoren, is een filter meestal duidelijker dan hetzelfde huisdier in meerdere secties te tonen. Als elk huisdier precies bij één vaste groep hoort, kunnen secties met labels het makkelijker maken om de hele verzameling te scannen. Dit zijn praktische toepassingen van inhoud ordenen volgens de structuur ervan; de beste indeling hangt af van de werkelijke kenmerken van de verzameling, niet van een universeel categorisatiesysteem.

De eigenaar herkent een huisdier misschien aan de afbeelding, maar namen helpen bij een groeiende verzameling en maken vergelijkbare varianten van elkaar te onderscheiden. Zet een korte naam direct onder elke miniatuur. Als twee huisdieren dezelfde naam kunnen hebben, voeg dan één beknopt aanvullend kenmerk toe, zoals de verzamelreeks of de vorm. Zet niet allerlei statistieken, badges en bedieningselementen op elke tegel: die concurreren met de afbeelding en maken het raster voller.

Als de weergave deel uitmaakt van een website of app, zorg er dan voor dat de identiteit van het huisdier zowel als tekst als met beeld beschikbaar is. Volgens de richtlijnen van W3C moeten informatieve afbeeldingen tekstalternatieven hebben die de relevante informatie overbrengen. Als een aangrenzend label al dezelfde informatie geeft, is het mogelijk niet nodig die in het alternatieve tekstlabel van de afbeelding te herhalen. Koppel in de praktijk een zichtbare naam aan een passend toegankelijk label en zorg dat een bijzonder huisdier niet alleen aan kleur of afbeelding te herkennen is. (W3C WAI: Images Tutorial)

Pas het aantal kolommen aan de beschikbare breedte aan in plaats van op elk scherm hetzelfde vaste aantal kolommen af te dwingen. Op een compacte telefoon kunnen bijvoorbeeld twee kolommen staan; op een breder scherm kunnen dat er meer zijn, zolang elke afbeelding en naam leesbaar blijft. Houd de tussenruimtes consistent en behoud dezelfde basisvolgorde wanneer de indeling zich aanpast. In het voorbeeld voor adaptief ontwerp van Android staat op compacte schermen een galerij met twee kolommen, en wordt er meer inhoud getoond wanneer er meer ruimte beschikbaar is. (Android Developers: Furry friends and adaptive APIs)

Bekijk de weergave op het smalste formaat dat mensen waarschijnlijk gebruiken en op een brede desktop. Let op afgekorte namen, afbeeldingen waarop herkenbare details verloren gaan, tegels met ongelijke hoogtes en bedieningselementen die onhandig verspringen. Als één huisdier een langere naam heeft, sta dan bewust een tweede regel toe of kort namen consequent af en bied een manier om de volledige naam te zien. Laat niet toe dat één uitzonderlijk item ongemerkt het hele raster vervormt.

Bij een kleine verzameling is het misschien genoeg om door één raster te scrollen. Voeg een zoekfunctie toe als mensen een bekend huisdier moeten kunnen terugvinden in een langere lijst. Voeg sortering toe als de volgorde ertoe doet, bijvoorbeeld alfabetisch of op het moment waarop een huisdier is toegevoegd. Voeg alleen filters toe voor kenmerken die helpen items van elkaar te onderscheiden. Plaats deze bedieningselementen boven de resultaten en toon de gekozen sortering of filter, zodat duidelijk is wat de huidige weergave laat zien. Volgens de richtlijnen voor verzamelingen van Material staan filters en sortering buiten de kaarten, zodat de items zelf op hun inhoud gericht blijven. (Material Design: Cards)

Vertrouw niet op eindeloos scrollen zonder enig idee van de voortgang. Een zichtbaar aantal items, koppen boven secties of een duidelijke actie ‘Meer tonen’ kan helpen duidelijk te maken hoeveel er nog is. Dit zijn optionele aanwijzingen, geen vereisten. Kies de minst opvallende optie die helpt om je weg te vinden zonder visuele rommel toe te voegen.

Voeg enkele representatieve huisdieren toe, waaronder huisdieren die op elkaar lijken en het huisdier met de langste naam. Bekijk de verzameling vervolgens op telefoon- en desktopbreedte. Vraag jezelf af: kan iemand elk huisdier herkennen, de naam lezen, de actieve groep of sortering begrijpen en de volledige verzameling vinden zonder te hoeven raden? Kan diegene een bekend huisdier vinden zonder elk item te hoeven scannen? Blijven de afbeeldingen de aandacht trekken?

Als herkenning lastig is, maak de tegels groter of beperk het aantal zichtbare details. Als items vinden lastig is, voeg dan een zoekfunctie op naam of een logische sortering toe. Als het eerste scherm te vol aanvoelt, reserveer dan een klein uitgelicht gebied en plaats de volledige verzameling eronder. Verander steeds één ding tegelijk en herhaal de controle naarmate de verzameling groeit. De juiste weergave blijft de taak van de lezer ondersteunen, bij de schermgrootte en de dichtheid die diegene gebruikt.

• 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/