Geavanceerd zoeken
Voor het specificeren van de content ben ik alvast gaan kijken naar wat voor soorten zoek- en filtermogelijkheden er zijn, welke design patterns vaak voorkomen en welke van toepassing kunnen zijn voor mijn concept.
How to improve advanced search in UX?
In het artikel van Minhas, 2018b, worden verschillende manieren van geavanceerd zoeken uitgelegd met patterns en de voor en nadelen ervan. Ook wordt er dieper gedoken in de verschillende parameters die er kunnen worden gebruikt in de zoekopties en met behulp van het artikel van Minhas, 2018a, met welke hoeveelheden ze het beste gebruikt kunnen worden.
Alle parameters zichtbaar
Voordelen
Gebruiksvriendelijk om alle parameters te laten zien zodat de gebruiker gemakkelijk kan scannen.
Werkt goed voor veel content.
Nadelen
Wel moet er voldoende ruimte zijn zodat het overzichtelijk blijft.
Meest gebruikte parameters zichtbaar
Voordelen
De meest gebruikte parameters worden getoont. De gebruiker maakt zich minder zorgen over details die niet nodig zijn.
Het weergeven van slechts enkele opties heeft minder ruimte nodig en is er ook minder onoverzichtelijkheid in de interface.
Nadelen
Heeft meerdere interacties nodig om naar de opties te navigeren.
Niet handig voor een groot aantal content.
Soorten input parameters
Input box
Voordelen
Handig wanneer er geen gedefineerde waardes zijn voor een parameter.
Door placeholders te gebruiken wordt het duidelijk voor de gebruiker.
Nadelen
Er moet wel duidelijk gecommuniceerd worden naar de gebruiker wat er in een box moet komen.
De gebruiker moet wel echt weten waarnaar ze zoeken, is niet geschikt voor 'browsen'.
Checkboxen
Voordelen
Handig voor als er voor meerdere opties gezocht moet worden.
Is een gebruiksvriendelijk control omdat het een duidelijk beeld geeft van het selecteren en deselecteren.
Bespaart ruimte als de categorieën ingeklapt staan.
Nadelen
Door een categorie uit te moeten klappen moet de gebruiker wel meer stappen zetten.
Hyperlinks
Voordelen
Als de gebruiker op een hyperlink klikt, dat wordt het automatisch toegepast.
Als een hyperlink geselecteerd is, dan is het handig dat het een andere state heeft zodat het makkelijk onderscheiden kan worden.
Nadelen
Wordt vaak gebruikt met meerdere hiërarchie lagen wat zorgt voor onduidelijkheid.
Radio buttons
Voordelen
Zijn handig om te gebruiken als de gebruiker daarna nog specifiek moet zoeken (hyperlinks zijn anders handiger om meteen toe te passen).
Wordt gebruikt zodat de gebruiker alle opties zien.
Nadelen
Meestal is er een extra klik nodig om de parameter toe te passen.
Niet handig bij 5 of meer opties (7 opties is wel echt het maximaal).
Visuele iconen
Voordelen
Iconen of visuele elementen zijn een goede en aantrekkelijke manier om informatie te presenteren zoals kleur of het aantal sterren van een beoordeling.
Nadelen
De iconen kunnen niet te ingewikkeld of origineel zijn, maar moeten standaard blijven zodat ze makkelijk begrijpbaar zijn.
Slider
Voordelen
De gebruiker krijgt een snel te zien wat het beschikbare is en de geselecteerde waarde.
Nadelen
Meestal handiger op touch devices omdat de muis niet heel precies is (dit kan opgelost worden met vastgezette punten).
Tags
Inbox tags
https://dribbble.com/shots/3612881-Tags-Interaction
Als er een functie in komt met het zoeken op basis van skills en talenten is een tag systeem erg handig. Assis (2017) heeft dit handige en functionele concept gemaakt. In deze pattern kun je een tag toevoegen door te zoeken of door de categorieën heen te browsen.
Vanwege dat er weinig visuele hulp is bij de tags vond ik het een beetje onduidelijk wat er gebeurde als je een tag uit de balk sleept. Nu ik de pattern wat beter heb bekeken verwijder je de tag (kan ook door op het kruisje te klikken). Dit zou duidelijk zijn als de tag rood zou worden of dat er een prullenbakje erbij zou verschijnen.
Ook de layout zelf is iets dat je vaak terug ziet komen, links een menu met categorieën, boven de resultaten kun je nog tags toevoegen om het te verfijnen.
Free lancer UI
Later heb ik deze nog toegevoegd als design pattern omdat dit ook een mooi voorbeeld is wat ik uiteindelijk heb gebruikt in mijn uiteindelijke design. Babu (2018) heeft de tags zo ontworpen dat als je typt, je de letters ook dikgedrukt terug ziet in de suggesties.
Ook de manier waarop de zoekbalk een andere kleur heeft ga ik meenemen. Daarbij is de manier waarop de filters geselecteerd zijn erg duidelijk en de gebruiker ziet ook meteen hoe deze weer te verwijderen zijn met het kruisje.
Filters
Nike
Ook Nike (z.d) maakt gebruik van de standaard layout met links de filters. Elke filter is een dropdown die automatisch open staat. Dit zorgt ervoor dat meteen alle opties zichtbaar zijn voor de gebruiker zonder een extra klik.
Hier worden verschillende parameters gebruikt: hyperlinks om snel naar een categorie te gaan, vooral checkboxen, maar ook visuele kleur iconen.
Zalando
Zalando (z.d) is eigenlijk de eerste website, die ik ben gekomen, die niet gebruik maakt van de 'standaard' layout met links de filters en de rest van de ruimte de producten.
Bij hun staan de meest gebruikte filters, daarnaast is er een button om meer filters te tonen. Zalando heeft dit zo gemaakt omdat het per categorie verschilt hoeveel filters er toegepast kunnen worden. Om de meest gebruikte op 1 rij staan, voorkomen ze dat er bijvoorbeeld 3 rijen staan met alle mogelijke filters.
De opties staan allemaal ingeklapt in een dropdown, dit zorgt ervoor dat er meer ruimte vrij is, maar ook dat de gebruiker meer kliks moet maken.
Wat ik wel jammer vind, is dat het stuk met de filters niet mee scrollt. Wel logisch als je in de schoenen van een shopper staat die eerst gaat filteren en dan de producten wil bekijken, en omdat het verfijn gedeelte ook wel wat ruimte opneemt. Daarnaast kun je makkelijk naar boven met hun 'omhoog' button.
Puma
Bij Puma (z.d) maken ze op een meer visuele manier gebruik van de filters. De opties worden in blokjes geplaatst. Dit kan leuk zijn met weinig opties, maar zoals bij 'product type', wordt het al snel onoverzichtelijk omdat ze niet allemaal dezelfde grootte zijn.
Naast de gestylde checkboxes maakt Puma ook gebruik van de visuele kleur iconen en een slider voor de prijzen. In dit voorbeeld staan de waardes in de slider vast en wordt het voor de gebruiker makkelijk gemaakt om te kiezen.
The North Face
Ook bij The North Face (z.d) wordt gebruik gemaakt van de filter bovenin over de hele breedte van de website. Bij deze site hebben ze niet een optie om nog meer filters te voorschijn te halen, alle opties staan er.
Als je op een dropdown klikt dan staan er, net zoals bij Puma, gestylde checkboxen. Wat handig is voor de gebruikers, is dat er ook bij de opties staat hoeveel items er in die categorie zitten.
Wat mij opviel is dat als je scrollt net zoals in afbeelding 12, dan blijven de filters plakken aan de bovenkant! Dit vind ik erg gebruiksvriendelijk mocht je toch andere opties willen kiezen.
Zoeken
Junction
Om te zoeken is dit een leuke pattern van Junction (2020) om te gaan gebruiken. Door suggesties of recente items hierin te verwerken wordt de gebruiker op weg geholpen.
Wel is het zo dat mijn product waarschijnlijk verschillende paginas krijgt met verschillende onderwerpen. In dit geval zou deze pattern niet heel handig zijn, maar kan wel als inspiratie voor een zoekfunctie gebruikt worden.
Van alles wat
Funda
Ook bij Funda (z.d) maakt de site, naast de 'standaard layout', gebruik van veel verschillende parameters bij het geavanceerd zoeken. Dit ligt natuurlijk ook maar net aan waar de gebruikers allemaal naar moeten kunnen zoeken.
Deze site maakt vooral gebruik van radio buttons. Funda heeft hele duidelijke filters zodat de gebruiker heel gericht kan zoeken. Ook zijn er een paar opties die gebruik maken van checkboxes, deze worden dan naast het element uitgeklapt als overlay over de kaart.
Helemaal onderaan het zoekgedeelte heb je ook nog een zoekbalk om naar specifieke woorden in de omschrijving te zoeken, dit wordt gedaan met tags.
Wat wel handig is, is dat ze de meest algemene opties laten zien, mocht de gewenste optie daar niet tussen zitten kan de gebruiker op een '+' knop klikken om alle opties te laten tonen.
Dribbble
Dribbble (z.d) gebruikt veel verschillende methodes om de resultaten specifieker te maken. Als je hebt gezocht met een trefwoord dan kom je bij de resultaten tabs tegen om in die categorie te zoeken. Daarnaast kun je ook nog tags toevoegen om nog specifieker te zijn.
De layout is, net zoals Zalando, erg handig, alles staat netjes en overzichtelijk naast elkaar en is in een oogopslag te zien. Om de filters in en uit te klappen staat rechts een button met 'filters'.
Als je naar beneden scrolt dan gaat de het stuk met de filters niet mee, om terug naar het menu te gaan zou je weer naar boven moeten scrollen. Ook hier hebben ze dit opgelost met een terug naar boven button.
Assis, V. (2017, 29 juni). Tags Interaction. Geraadpleegd op 25 mei 2020, van https://dribbble.com/shots/3612881-Tags-Interaction
Babu, V. (2018, 11 oktober). Free Lancer UI for Web. Geraadpleegd op 13 oktober 2020, van https://dribbble.com/shots/5381438-Free-Lancer-UI-for-Web
Coolblue. (z.d.). Coolblue’s Keuze Game PC’s. Geraadpleegd op 25 mei 2020, van https://www.coolblue.nl/desktops/game-pcs/coolblues-keuze
Dribbble. (z.d.). Dribbble. Geraadpleegd op 26 mei 2020, van https://dribbble.com/
Funda. (z.d.). Funda zoeken op kaart. Geraadpleegd op 23 mei 2020, van https://www.funda.nl/kaart/koop/heel-nederland/
Junction. (2020, 19 augustus). Junction creative + digital agency. Geraadpleegd op 25 mei 2020, van https://www.junction.nl/?gclid=EAIaIQobChMItvy9lofN6wIVCc93Ch1eTg5EEAAYASAAEgLk9PD_BwE
LinkedIn. (z.d.). LinkedIn Job Search: Find US Jobs, Internships, Jobs Near Me. Geraadpleegd op 23 mei 2020, van https://www.linkedin.com/jobs/search/
Mango. (z.d.). Mango. Geraadpleegd op 23 mei 2020, van https://shop.mango.com/nl/dames/jassen_c67886633
Microsoft. (z.d.). Microsoft careers. Geraadpleegd op 24 mei 2020, van https://careers.microsoft.com/us/en/search-results
Minhas, S. (2018a, 6 mei). 7 Rules of Using Radio Buttons vs Drop-Down Menus. Geraadpleegd op 29 mei 2020, van https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1
Minhas, S. (2018b, 15 juni). How To Improve Advanced Search UX? Geraadpleegd op 27 mei 2020, van https://uxplanet.org/how-to-improve-advanced-search-ux-450df698004c
Nike. (z.d.). Women’s Tops & T-Shirts. Nike NL. Geraadpleegd op 20 mei 2020, van https://www.nike.com/nl/en/w/womens-tops-t-shirts-19uk5z5e1x6z5mqt9z9om13?sort=priceAsc
Puma. (z.d.). Puma. Geraadpleegd op 26 mei 2020, van https://eu.puma.com/nl/en/women/new-arrivals
thenorthface. (z.d.). The North Face. Geraadpleegd op 26 mei 2020, van https://www.thenorthface.nl/shop/nl/tnf-nl/dames-dames-new-arrivals
Twitter. (z.d.). Twitter Geavanceerd zoeken. Geraadpleegd op 24 mei 2020, van https://twitter.com/search-advanced
Last updated
Was this helpful?