Lijst en detail

Oplijsting, filter mogelijkheid en detail pagina’s. Websites staan er vol van. Een pagina met meerdere elementen van hetzelfde type (lijsten), die je dan kan verfijnen aan de hand van filter mogelijkheden. Om uiteindelijk door te klikken om alle details van het element te bekijken op de detailpagina.

Hierbij denken we meteen aan webshops. Alle producten staan met een foto, hun naam en de prijs op een lijstpagina. Via de filter mogelijkheid kan je specifieker gaan selecteren welke producten je wenst te vergelijken (Een laptop, met Windows 10, minstens 64 GB RAM en een scherm). Je klikt verder op 1 product en krijgt de volledige specificatie van het gekozen product.

Oplijsting

Uiteraard is dit niet enkel van toepassing bij webshops. Denk maar aan volgende voorbeelden:

Type	Voorbeelden
Foto’s	Pinterest, Instagram, Dribbble
Video’s	YouTube, Vimeo
Nieuws	VRT Nws, HLN, Medium
Evenementen	Eventbrite, Ticketmaster
Zoekresultaten	Google, Bing
Diensten	Overzicht van de diensten die een bepaald bedrijf aanbiedt
…

Het goed opmaken van dergelijke pagina’s is dus uitermate belangrijk.

Filtering

Een lijst kan bestaan uit 10 elementen maar even goed uit 100000 elementen. Het is dus van belang dat gebruikers aan de hand van de filter mogelijkheid zo snel mogelijk bij de juiste pagina uitkomen. Hoe duidelijker => hoe minder stappen => hoe beter!

Er zijn verschillende mogelijkheden om een lijst van elementen te verfijnen tot het gewenste resultaat.

Navigatie / subnavigatie

Een belangrijke methode is het opsplitsen aan de hand van de navigatie en/of subnavigatie. Dit zijn categorieën die gekoppeld zijn aan de verschillende elementen. Meestal kan een element gekoppeld worden aan meerdere categorieën. Ook kan een categorie, sub-categorieën bevatten. Deze sub-categorieën kunnen dan als subnavigatie dienen.

Enkele voorbeelden

Website	Navigatie	Subnavigatie
Zalando	Dames, Heren, Kinderen	Nieuw, Kleding, Schoenen, Sport, Accessoires, Beauty, Luxe, Merken, OUTLET
Bol.com	Categorieën, Cadeaus & Inspiratie, Aanbiedingen	Boeken, Muziek, Film & Games, Computer & Elektronica, Speelgoed & Hobby …
Coolblue.be	Computers & Tablets, Phones, Image & sound, Kitchen, Household & living …	Laptops, Apple MacBook, Desktops, Monitors …

Zoekveld

Je kan een (groot) zoekveld aanbieden waar gebruikers zelf een zoekopdracht kunnen uitvoeren. De gebruiker kan op die manier op een heel snelle manier naar een specifiek element of elementen. In Google geef je bijvoorbeeld ‘Adresgegevens Artevelde Mariakerke’ in, de Google server moet dan de zoekopdracht ‘proberen’ begrijpen om de juiste resultaten terug te geven.

Opmerking

Enkele valkuilen

• Niet elke gebruiker kent de juiste termen en kan dus dit zoekveld ook niet gebruiken
• De zoekterm moet exact aanwezig zijn in je website (databank).
  ‘Dieter De Weirdt’ en ‘De Weirdt Dieter’ kunnen al voor verschillende of zelfs geen resultaten opleveren voor een van de termen.
• Gebruikers gebruiken andere termen. Bv: ‘Containerpark’ terwijl in onze databank/app ‘Recyclagepark’ staat.
• Gebruikers schrijven fouten ‘huwawei’ in plaats van ‘huawei’
• Smartphones passen tekst aan via de Autocorrect functie: ‘apple’ wordt ‘appel’

Kenmerken

Om de nadelen van een zoekveld op te vangen kan je kiezen voor het filteren op kenmerken. Meestal vind je deze terug aan de zijkant of boven de lijst van elementen. Je geeft de gebruiker een overzicht van de verschillende kenmerken waarop hij/zij kan filteren (bijv. merk, prijs, specificatie …) met elk een aantal voorgedefiniëerde waardes (bijv. Acer, Apple, Asus, HP, Lenovo, Dell, Huawei …)

Kenmerken selecteren via een

• Dropdown: bedoeling om 1 waarde te selecteren
• Checkboxes: Meerdere waardes selecteren
• Een bereik: Bijvoorbeeld bij prijs: een ‘van’ en ‘tot’ veld of een slider

De lijsten met voorgedefiniëerde waardes kunnen wel lang en uitgebreid zijn waardoor het opnieuw onoverzichtelijk wordt. Een oplossing hiervoor is om dan de belangrijkste/meest gebruikte bovenaan te zetten en de lijst deels verbergen. De gebruiker kan dan via een ‘Meer kenmerken’-link de volledige lijst zien.

Voorbeelden van filters

1. Meerdere keuzes
   
2. Meerdere keuzes met een voorstel richting de eindgebruiker (Aanbevolen, meest gekozen, populairste, …)
   
3. Bij lange lijsten best toeklappen, en indien mogelijk sorteren op aantal of populariteit
   
4. 1 keuzemogelijkheid kan via radiobuttons…
   
5. …of gewoon als link
   
6. Sliders voor een getal of een bereik
   

Begeleid de gebruiker

Om foute zoekopdrachten te vermijden kan je de gebruiker voorstellen geven vooralleer hij op de zoekknop moet klikken. Denk maar aan de voorstellen die google je al geeft nog voor je je volledige zoekterm hebt ingegeven. Ook bij het filteren op kenmerken waar lange lijsten niet zomaar getoond kunnen worden (bv. Locaties, tags, namen (bv bij het taggen van vrienden), …)

Duidelijkheid scheppen

Zorg er ook steeds voor dat bezoeker weet waar hij zit in je website, welke acties hij heeft uitgevoerd en welke acties hij nog kan uitvoeren.

Dit kan door…

• item(s) in de navigatie actief te zetten;
• duidelijke titel te geven;
• breadcrumbs te gebruiken;
• aan te duiden welke item in de filtering gekozen is;
• de gekozen filters nog eens te herhalen

Paginatie

Heb je lange lijsten dan heb je de mogelijkheid om deze op te splitsen in kleinere stukken. Dit noemen we paginatie (Pagination). Als we 1000 elementen opsliptsen in pagina’s van 20, dan kan de gebruiker door 50 pagina’s gaan om het gewenste element te vinden. Niet altijd eenvoudig behalve als er een logische volgorde inzit. Dan kan je soms pagina’s overslaan om naar de gewenste pagina te klikken. Bijvoorbeeld als nieuwsberichten op datum gesorteerd staan kan je klikt op enkele pagina’s tot je aan de juiste maand zit.

Opmerking

Hoe vaak heb je zelf al doorgeklikt naar pagina 2 van Google? En pagina 3?

Hoewel ze nodig zijn, klikken we niet zo graag door op dergelijke paginatie. Een oplossing om paginatie gebruiksvriendelijker te maken is door te werken met een zogenaamde infinite scroll. Voorbeelden hiervan zijn Facebook, Twitter, Google images. De meeste van deze pagina’s zijn zodanig geprogrammeerd dat van zodra je (bijna) op het eind van de lijst zit er meteen dynamisch nieuwe elementen worden toegevoegd.

Overzicht

Filtertype	Voordelen	Nadelen
Navigatie	Duidelijk	Berperkt in aantal items (bv bij horizontale navigatie)
Zoekveld	Sneller naar het juiste resultaat	Exacte term moet aanwezig zijn, Schrijffouten, autocorrect
Voorgedefiniëerde kenmerken	Hoge verfijning mogelijk, geen gebruikersfouten	Lange lijsten

Detail

Op de detail pagina kunnen we dan uiteindelijk alle detail bekijken van het element. Denk hierbij ook aan de hiërarchie van de inhoud. Welke inhoud willen we meteen duidelijk maken aan de bezoeker, welke inhoud is minder belangrijk en moet maar in 2e of 3e instantie duidelijk zijn. Om die hiërarchie te bekomen spelen we opnieuw met de positie van de tekst, lettergrootte, kleur …

Cross linking

Indien de gebruiker op een detail pagina terecht komt (eventueel rechtstreeks via Google). Dan kan het ook interessant zijn om andere inhoud aan te bieden.

Bij webshops zien we soms onderaan de pagina ‘Andere gebruikers bekeken ook deze producten’ of ‘Misschien ook interessant’. Dit om ervoor te zorgen dat de gebruiker kan verder klikken naar andere detail pagina’s. En in het geval van webshops meer producten te laten bestellen.