Lijst element
Lijsten

Lijsten herhalende elementen met vergelijkbare inhoud en opmaak. Onderstaande eissen en aanbevelingen zijn toepasbaar op elk soort lijst. Voordat je een lijst binnen een scherm plaatst is het goed om besluiten wat voor lijst je wilt gebruiken. Elk type heeft zijn eigen aanvullende eissen en aanbevelingen:

Snelheid

Lijsten kunnen vaak wat langer duren om te laden, zeker als het gaat om meer elementen dan op het scherm passen. Om er voor te zorgen dat de gebruiker nog steeds de ervaring van een snelle website heeft passen wij een aantal oplossingen toe:

Lijsten pas later laden

Op de meeste pagina's is de lijst het meest complexe onderdeel van de pagina. De rest van de pagina kan direct en zeer snel uit de cache worden geladen. Daarom kiezen we er vaak voor de pagina eerst te laden en de lijst pas er na. Dit zorgt ervoor dat de bezoeker zich al direct kan oriënteren op de rest van de website. Heel kort daarna komt ook de lijst.

Alhoewel het laden in twee delen samen iets langer duurt voelt het voor de bezoeker veel korter. Dit komt doordat er bijna direct al iets zichtbaar is. NIet hoeven wachten is voor het gevoel van snelheid belangrijker dan direct de volledige inhoud te kunnen zien.

Minimaliseren

Als je kritisch kijkt is het vaak niet nodig om de volledige lijst te laden. Door het kopje "nieuws" te vervangen door "laatste nieuws" kan je volstaan met de laatste 10 berichten. Dit zal meer dan voldoende zijn voor 95% van je bezoekers. Waarom zou je deze 95% langer laten wachten op het nieuws voor de overige 5% die misschien wat ouder nieuws wil zien. Optimale gebruikerservaring is soms ook keuzes maken voor de grootste gemene deler.

Andere oplossingen die hier op lijken zijn pagineren, oneindige scroll, zoeken en filteren. Meer hierover onder het kopje Navigatie.

Houdt het simpel

Soms is het niet de hoeveelheid data, maar de complexiteit van de gegevens die er voor zorgen dat het lang duurt om de lijst te laden. Als deze gegevens essentieel zijn voor het overzicht moet gezocht worden naar een optie om deze alsnog snel te tonen. Vaak zijn deze gegevens echter niet essentiëel voor het overzicht. Ze worden in het ontwerp geplaatst zodat de bezoeker ze "direct ziet". Als een bezoeker echter 0,5 seconde moet wachten op de lijst en 0,5 seconde om via een klik een pagina met alle aanvullende informatie te zien dan is hij / zij beter af dan 3 seconde te moeten wachten tot de lijst met alle informatie "direct te zien" is.

Sneller laden

Onder het kopje worden nog aanvullende opties besproken om de data zelf sneller te laden. Indien mogelijk is dit natuurlijk altijd aan te bevelen boven het aanpassen van de functionaliteit of weergave die direct voor de bezoeker zichtbaar zijn.

Navigatie

Volgorde

Het moet voor de bezoeker duidelijk zijn hoe de lijst gesorteerd is. De gegevens waar op gesorteerd dient dus zichtbaar te zijn: bij alfabetische sortering de naam, bij chronologische sortering de datum, etc. Indien dit niet kan moet de titel boven de lijst een duidelijke indicatie geven over hoe de lijst gesorteerd is.

Doorscanbaar

Het moet eenvoudig zijn om de lijst met je ogen te scannen. Dit betekend dat elk element duidelijk contrasterend kleurgebruik moet hebben, zonder de druk te zijn. Ook moet de witruimte binnen en om elk element zorgen voor rust en overzicht. De structuur moet dusdanig zijn dat je op een enkel element kan focussen, biijvoorbeeld de tekst of de iconen, zonder dat je blik continu verspringt. Als laatste dient de typografie ook te zorgen voor prettig leesbare en scanbare en wordt binnen een element niet meer dan één font gebruikt.

Paginieren

Een oplossing die dicht tegen het minimaliseren aan ligt is paginering. In de lijst worden slechts de eerste 10 of 20 elementen getoond. Een knop onder (of/en boven) de lijst geeft de bezoeker de mogelijkheid om de 10 of 20 opvolgende elementen te tonen. Zo kan de bezoeker toch de gehele lijst doorzoeken. De positioneren van de knoppen verdient extra aandacht: helemaal naar onder of boven aan de lijst moeten scrollen om de knoppen te vinden maakt deze functie eerder frustrerend. Ook in de lengte van de lijst moet een balans worden gevonden. Aan de ene kant wil je de bezoeker niet te veel laten klikken. Aan de andere kant moet de bezoeker ook niet de hele tijd hoeven te scrollen om maar verder te komen.

Oneindig scrollen

Oneindig scrollen is een variant op pagineren. Als het scherm geladen wordt worden slechts de eerste 10 elementen geladen. Zodra de bezoeker met scrollen de onderkant van de lijst heeft bereikt worden de volgende 10 geladen. Dit proces gaat door tot de hele lijst geladen is (indien nodig). In veel gevallen is deze optie, zeker op mobiel, te verkiezen boven pagineren. Weet de bezoeker echter al ongeveer waar hij moet zijn (b.v. bij de p in een alfabetische gesorteerde lijst) kan het echter frustrerend werken om elke keer op de 10 volgende te moeten wachten. Snel een aantal pagina's vooruitgaan is dan makkelijker. In deze gevallen is zoeken en/of filteren vaak ook een goede optie.

Zoeken

Zeker bij zeer lange lijsten is zoeken een veel snellere manier voor de bezoeker om bij de juiste elementen te komen dan scrollen of pagineren. Het heeft echter alleen zin om een zoekfunctie aan de lijst toe te voegen als de bezoeker ook redelijkerwijs weet waar hij/zij naar moet zoeken

Filteren

Interactie

Data