Filter

(M) Als gebruiker wil ik spellen kunnen vinden met een filterfunctie.

In de JungleGym applicatie moet er gefilterd kunnen worden op spelsoort, groepen, minimum spelers en materialen. Wanneer er een filter geselecteerd is moet het speloverzicht de vernieuwde spellen lijst laten zien. Op deze manier kunnen de vakdocenten uit Suriname naar een specifiek spel filteren.

We zijn begonnen met het onderzoeken welke filteropties momenteel gebruikt worden in andere ontwerpen. Na dit onderzoek zijn we een eigen ontwerp gaan maken voor de filter functionaliteit. De vakdocenten in Suriname hebben kleine Android telefoons en hierdoor moeten we zoveel mogelijk gebruik maken van alle ruimte die beschikbaar is. Hierdoor hebben we uiteindelijk gekozen om een pop-up te maken waarin de filters aan- en uitgezet kunnen worden.

Het gemaakte ontwerp zag er als volgt uit:

De eerste ontwerpen van de filter functionaliteit

Nadat de basis van het ontwerp was gemaakt zijn we hier op door gaan itereren. Na elke test sessie en design review zijn we gaan kijken wat er verbeterd kon worden in het ontwerp en de aanhangende functionaliteiten. Na de tweede test zijn we een volledig herontwerp gaan maken voor de JungleGym applicatie. Veel functionaliteiten zoals filteren en offline beschikbaarheid werkte al, maar de look and feel van de applicatie was nog niet op het juiste niveau.

Het uiteindelijke ontwerp zag er als volgt uit:

Uiteindelijke ontwerp van de filter functionaliteit

Opzet van de filters

Het opzetten van de filters hebben we in aparte componenten gedaan. In het filter.svelte component worden al deze componenten samengevoegd tot een geheel. In eerste instantie hadden we twee componenten waaruit het filter bestond. Het dropdown filter menu is beschikbaar op de speloverzichtspagina en wanneer de gebruiker op de filterknop drukt komt de filterPopup omhoog. De gebruiker kan dan in dit scherm de filteropties selecteren die aan of uit moeten staan. Nadat we verder kwamen in dit project hebben we de filter functionaliteit opgedeeld in aparte componenten om het op deze manier overzichtelijker te maken.

filter.svelte component

In dit component komen de aparte componenten samen om hem daarna aan te roepen in de overzichtspagina. Op het moment zijn de filteropties vier arrays die we hardcoded hebben aangemaakt. De name en value die in deze array staan aangegeven komen overeen met de data vanuit de API. Op deze manier kan de gebruiker een filteroptie selecteren en op toepassen drukken en zal hij de gefilterde spellen zien.

De filter menu knoppen komen vanuit een shared filterButton component. Wanneer er op deze knoppen wordt gedrukt komt de filter pop-up tevoorschijn. Hierin maken we gebruik van een true | false boolean. Deze zal standaard op false staan en zal door een on:click event naar true veranderen. Wanneer een van deze variabelen op true staat is zullen de bijbehorende filters zichtbaar worden voor de gebruiker.

 <FilterButton filterTitle="Spelsoort" on:click={() => (category = !category)} />

Wanneer er filters zijn geselecteerd in de filter pop-up en er is gedrukt op annuleren of op de zwarte overlay worden de variabelen weer terug veranderen naar false. Dit gebeurd door een dispatch die we aanroepen op deze manier: on:close={() => (category = !category)}. Deze dispatch staat in een functie en deze wordt uitgevoerd wanneer er op annuleren of op de zwarte overlay wordt gedrukt. Dus als de filters zijn afgesloten op een van deze twee manieren wordt de on:closeuitgevoerd en is de variabele die bij de gesloten filters hoort weer naar false gezet.

filterPopup.svelte component

In dit component worden de filters ingeladen. Deze filters worden gebaseerd op de filterknop waar op gedrukt is in het filter dropdown menu. Ook worden hier de query parameters door gegeven aan de API. Wanneer er dus op toepassen is gedrukt worden de spellen op de overzichtspagina automatisch gefilterd en sluit het pop-up scherm.

Tijdens het maken van de filters hadden we niet genoeg rekening gehouden met de affordance van een checkbox. Tijdens de eerste test sessie wisten de opdrachtgevers niet of ze meerdere filteropties konden selecteren. We hebben toen besloten om dit wat beter te visualiseren voor de gebruiker door een checkbox aan de filteroptie toe te voegen. Op deze manier geven we de gebruiker feedback dat het checkboxen zijn en dat er meerdere opties geselecteerd kunnen worden.

Voor en nadat we affordance hadden toegevoegd

Naast dat we affordance hebben toegevoegd aan onze filters wilde we ook graag een manier waarop de geselecteerde filters onthouden konden worden. Hiervoor geven we een activeQueries prop mee vanuit het filter.svelte component. Deze wordt dan mee gegeven aan de filterButtons variabele en op deze manier blijven ze aanstaan.

let filterButtons = 
    filterQuery === 'targetGroup' ? 
    activeQueries.map((query) => Number(query)) : 
    activeQueries;

Doordat de targetGroup een string terug geeft terwijl het een number moet zijn zetten we deze om als de filterQuery gelijk is aan targetGroup. Voor alle andere filters krijgt die dus de activeQueries mee en blijven de geselecteerde filters aan staan wanneer je hem weer opnieuw opent.

Achter het toepassen van de filters zit ook een bepaalde functionaliteit. De filters die geselecteerd worden moeten mee worden gegeven aan de query parameters die mee worden gestuurd naar de speloverzichtspagina. Hier kunnen ze dan worden uitgelezen en wordt er een APIrequest gestuurd met als response de gefilterde spellen.

We maken gebruik van de URLSearchParams web API. Hiermee kan je dus een custom query mee geven aan de URL. In eerste instantie maken we een nieuwe variabele waar we over de filterButtons heen mappen. We voegen voor elke actieve filter de filterquery toe om op deze manier ze goed door te kunnen geven naar de API. Nadat dit is gebeurd wordt er een nieuwe URLSearchParams gemaakt met de waardes van deze variabele.

Met de for loop kijken we naar de query.entries(). Uit de query.entries() halen we de key en de value, wanneer de key niet overheen komt met filterquery wordt er dus een nieuw filter toegevoegd en wordt deze geplaatst achter de bestaande query params in de URL

function submitForm() {
	let queries = filterButtons.map((activeFilter) => [filterQuery, activeFilter]);
	const searchParams = new URLSearchParams(queries);
	for (const [key, value] of query.entries()) {
		if (key !== filterQuery) {
			searchParams.append(key, value);
		}
	}

	goto(`/spellen/?${searchParams.toString()}`).then(() => closeFilter());
}

Uiteindelijk geven we een goto die navigeert naar de overzichtspagina met de bijbehorende query params die we dan omzetten naar een string. Nadat deze redirect gebeurd sluiten we de filter door de closeFilter functie aan te roepen die de dispatch('close') erin heeft staan.

filterButtons.svelte component

het filterButtons component bestaat voornamelijk uit de filter tags die gelaten zien worden wanneer er filters aan staan. Deze tags bevatten de algemene filter titels. Wanneer er dus meerder filteropties zijn geselecteerd van een filter zal de gebruiker alleen de filtertitel zien in plaats van de filters die zijn geselecteerd. Op deze manier weet de gebruiker welke filters er op het moment aan staan.

Wanneer een gebruiker op de filtertag drukt worden alle filters die aanstaan onder deze filter automatisch uitgezet en de query parameters in de URL wordt ook verwijderd waardoor er een API request wordt gedaan en de spellen lijst opnieuw wordt ingeladen. Ook is het mogelijk om alle filters in een keer uit te zetten door op de reset filters knop te drukken. Wanneer dit gebeurd worden alle filters automatisch uitgezet en wordt de spellen lijst opnieuw ingeladen met alle beschikbare spellen.

Gebruiks uitleg van de filter tags

Design review - Koop Reynders

We wilden graag dat er een UX design blik op onze filters werd los gelaten. We zijn uiteindelijk met de vraag: "Is de interface flow voor het filteren te lang?" Naar het design review toegestapt. Hier wilde wij graag weten wat Koop Reynders van ons design vond en de hierbij hordende user-flow.

In onze huidig design moet de gebruiker op meerdere knoppen drukken om bij de filteropties te komen. Hier zijn wij het zelf niet helemaal mee eens, maar daarentegen maken we op deze manier het beste gebruik van de kleine ruimte die we hebben op de mobiel.

Tijdens deze design review hebben we een aantal punten gekregen wat we kunnen gaan aanpassen om het duidelijker te maken voor de gebruiker.

• Laat op een of andere manier de gefilterde resultaten terug komen in de filter pop-up

  • Als de gebruiker een filteroptie selecteert kan je boven aan de pagina: "13 resultaten beschikbaar" zetten en deze continue laten bijwerken.

  • Automatische scrol naar de spel kaarten toe en laten zien met een animatie dat er nieuwe spellen worden ingeladen.

• Ook is het handig om een titel toe te voegen boven de spellen lijst. Dit kan dan ook de zin: "13 resultaten beschikbaar" zijn.

• De gebruiker moet te zien krijgen dat hij daadwerkelijk wat aanpast. Er moet meer Forgiveness worden toegepast in het filteren.

• Wanneer er filters zijn geselecteerd moeten deze specifiek zichtbaar zijn onder het filter dropdown menu. Geen algemene titel, maar daadwerkelijk elke filters er zijn geselecteerd.

Dit gesprek hebben we gehad in de op een-na-laatste week van het project en dit was niet de enige vraag waarmee we waren gekomen. Uiteindelijk moesten we kiezen welk probleem voorrang had op de andere en hierbij hebben we niet voor deze gekozen. Dus deze is voor de toekomstige developers die JungleGym gaan oppakken.