Mobiel zoeken, filteren en sorteren: best practices

Snelheid is één van de speerpunten van gebruiksvriendelijke mobiele sites en apps. Een gebruiker heeft weinig geduld als hij via zijn smartphone een site of app bezoekt. De zoekfunctie is daarom een essentiële functie om snel bij gewenste content te komen. Maar hoe zit een goede mobiele zoekfunctie in elkaar? Hoe komt een bezoeker zo snel en efficiënt mogelijk bij de gewenste content? In dit artikel vind je verschillende mogelijkheden om de zoekende bezoeker van dienst te zijn.

De redenen waarom mensen hun mobiele telefoon gebruiken om online te gaan, zijn onder te verdelen in 4 interactietypes. Ze willen:

1. Iets opzoeken. De gebruiker is lokaal en heeft urgent behoefte aan informatie.
2. Ontdekken/spelen. De gebruiker is verveeld.
3. Content/status checken of bijhouden. De gebruiker wil continu op de hoogte zijn van iets.
4. Wijzigen/updates maken. De gebruiker moet direct een actie uitvoeren die niet kan wachten.

De zoekfunctie bedient de gebruiker in al deze vier interactietypes. Een bezoeker die op zoek is naar de vertrektijd van de trein, gewoon eens in een reisapp rondneust, elke ochtend even de beursgegevens checkt of de contactgegevens opzoekt van een klant, omdat hij te laat dreigt te komen. Allemaal voorbeelden van doelen die via een zoekfunctie bereikt kunnen worden.

Het invoeren van de zoekopdracht

Niet alle apps en sites hebben een zoekfunctie (indien al aanwezig in de mobiele versie) op dezelfde wijze aangeboden. Het aanbod van zoekfuncties verschilt: de zoekfunctie altijd volledig in beeld, een zoekicoon (vergrootglas) bovenin het scherm, een item in de tabbalk, via de menuknop toegankelijk of echt verstopt en pas ontsloten bij het naar beneden trekken van de pagina (zie afbeelding).

Eénmaal in de zoekfunctie zijn er verschillende vormen van zoekvelden te onderscheiden:

• expliciete zoekfunctie
• autocomplete
• zoeken op basis van eerder gezochte zoekopdrachten
• afgebakende zoekfunctie
• zoekformulier

Expliciete zoekfunctie

De meest simpele vorm is de expliciete zoekfunctie. De gebruiker voert de term in waar hij naar op zoek is en activeert de zoekopdracht door middel van het klikken op de knop “zoeken”. Helder, maar het vereist wel de volledige invoer door de gebruiker. Er zijn manieren die het de gebruiker een stuk eenvoudiger maken.

Autocomplete

Versnel de invoer van de zoekopdracht door autocomplete te gebruiken. Onder het zoekveld worden zoekopdrachten getoond die beginnen met wat de gebruiker reeds heeft ingetypt in het zoekveld. Met een klik op één van deze suggesties wordt de zoekopdracht ingevoerd. Dat dit nog geavanceerder kan, laat Tripadvisor zien. Tripadvisor plaatst de suggesties direct in relevante categorieën om zo de gebruiker nog meer van dienst te zijn.

Zoeken op basis van eerder gezochte zoekopdrachten

Een zoekfunctie kan de bezoeker helpen door eerder gezochte zoekopdrachten, veelgezochte woorden of opgeslagen zoekopdrachten te tonen. De gebruiker hoeft in veel gevallen niets in te vullen en kiest direct uit de lijst. Handig, want vaak ben je als gebruiker toch meerdere dagen met hetzelfde onderwerp bezig. Airbnb pakt dit goed aan (zie voorbeeld hieronder). Gebruikers kunnen meerdere dagen bezig zijn met het zoeken naar een verblijfplaats voor een stedentrip. Het is echter zonde dat dit soort handigheden niet op de website doorgevoerd zijn.

Afgebakende zoekfunctie

Wanneer de zoekfunctie een enorme database doorzoekt, kun je ervoor kiezen om een afgebakende zoekfunctie aan te bieden. De gebruiker kiest er dan bewust voor om maar in een deel van het assortiment of de website te zoeken. Met deze methode is het voor gebruikers wel moeilijker om informatie te vinden. Pas daarom op met de afgebakende zoekfunctie. Dit kan leiden tot het niet ontsluiten van bepaalde informatie, omdat het binnen een andere categorie valt dan de gebruiker denkt. Als je het aanbiedt, laat de gebruiker dan bij default binnen alles zoeken en laat hem zelf de afgebakende zoekopdracht smaller maken.

Zoekformulieren

Applicaties waarin gezocht wordt aan de hand van meerdere criteria, zoals vluchten of reizen, hebben niet zo veel aan één zoekveld. Een zoekformulier, bestaande uit meerdere formuliertypes (bijvoorbeeld dropdowns, tekstvelden, datumpickers), biedt meer uitkomst.

De zoekfunctie aan het werk

Zoals gezegd is snelheid essentieel. Dit zit vooral in de beleving van de gebruiker. Als het duidelijk is dat een app bezig is een grote database te doorzoeken om jou het beste resultaat te tonen, snapt een gebruiker dat dit enkele seconden kan duren. Maar dit moet wel duidelijk te zien zijn. Zodra het idee ontstaat dat een app of website vastloopt, is de kans groot dat de zoekopdracht geannuleerd wordt of zelfs de hele applicatie afgesloten wordt. Laat dus altijd duidelijk zien dat de app of website aan het werk is. Doe dit door het tonen van een voortgangsbalk of een loader.

Zoekresultaten weergeven

Zodra de zoekopdracht is uitgevoerd, verschijnen de resultaten in hetzelfde of een volgend scherm. De resultaten kunnen op verschillende manieren weergegeven worden: in tabel/ lijstvorm, op een kaart of als thumbnails.

Lazy loading

Om (in ieder geval een deel van) de resultaten zo snel mogelijk te tonen, kun je gebruik maken van “lazy loading”. De eerste paar resultaten worden al getoond, terwijl de rest nog moet laden. In de beleving van de gebruiker zijn de resultaten er al. Tegen de tijd dat hij onderaan zijn scherm is met scannen, zijn de volgende resultaten geladen.

Kies niet voor paginering wanneer er veel resultaten zijn. Dit druist in tegen de natuurlijke manier van informatie bekijken op een mobiel. Plaats liever onderaan de eerst 20 resultaten een “toon meer resultaten” link, zoals Appie doet.

Sorteren

Om een bezoeker bij zijn gewenste zoekresultaten te brengen, is de sorteerfunctie veel gebruikt. Hierin zijn 2 types te onderscheiden:

• onscreen sorteren
• sorteren door middel van een selector

Onscreen sorteren

Kies voor onscreen sorteren als je maar enkele sorteeropties hebt (maximaal 4). De onscreen sorteerfunctie kun je boven of onderaan de pagina plaatsen. Geef hierin wel duidelijk aan welke optie “aan” staat, zie bovenstaande afbeelding van recepten sorteren in Appie.

Sorteren met behulp van een selector

De selector kan in meerdere vormen voorkomen. Bijvoorbeeld een knop die een picker of lightbox oproept. Een sorteerformulier vereist de meeste handelingen. De gebruiker moet na de juiste optie gekozen te hebben nog op “apply” of “done” klikken, dus gebruik deze vorm liever niet.

Filteren

De zoekresultaten worden verkleind door deze te filteren. Ook hiervoor zijn verschillende opties:

• onscreen filter
• filter tab
• filter pop up
• filter formulier

Onscreen filter

De onscreen filter werkt net als de onscreen sorteerfunctie. Met één klik is de filtering toegepast. De filterbenaming moet duidelijk zijn en de filter die “aan” staat, dient ook onderscheidend te zijn.

Filter tab

De filter tab staat aan de zij- of onderkant van je scherm. Bij klik schuift deze uit en toont de filtermogelijkheden. In deze vorm kunnen meerdere filters aangeboden worden. Pas de filtering direct toe op de resultaten, zodat de gebruiker de gevolgen van zijn acties ziet.

Filter pop-up

De filter verschijnt als layer of pop-up over je scherm heen. Vermijd scrollen in een pop-up.

Filter formulier

Een filter formulier bevat meerdere filteropties die per optie los gedefinieerd worden. Zo biedt marktplaats een zeer uitgebreide filtering aan met per onderdeel weer losse pop-up schermen.

Tot slot

Er zijn meerdere mogelijkheden om zoekfuncties aan te bieden. Bedenk vooral hoe je het de mobiele gebruiker zo eenvoudig en efficiënt mogelijk kan maken. Zijn er bepaalde zoekopdrachten of categorieën relevant voor jouw dienst? Bied daarin dan extra ingangen aan. Maar verlies hierbij de snelheid van je zoekfunctie nooit uit het oog.