Sökning och filtrering
På denna sida beskrivs begreppen sökning och filtrering samt designmönster för respektive situation. Tekniskt är det inte någon skillnad på sökning och filtrering, båda är sätt att begränsa mängden data som visas i en tabell eller en lista. Men från användarens perspektiv är detta två olika uppgifter och det är därför vi väljer att skilja på dem.
Vi definierar en sökning som det användaren gör innan det finns någon data att ta ställning till. Syftet med sökningen är att se vad det finns för data. En filtrering görs efter sökningen, när användaren har tillgång till datan. Syftet med filtrering är att begränsa mängden data till det som är relevant för användaren.
Sökning
En sökning sker alltså innan det finns någon data att ta ställning till. Användaren vet inte vilka värden som finns och sökningen är därför öppen och ostrukturerad, vanligtvis formulerar användaren själv söktermen. I vissa fall krävs en avancerad sökning med flera alternativ och då använder vi samma designmönster som för filtrering.
Filtrering
Till skillnad från sökning, som är mer utforskande, bygger filtrering ofta på fördefinierade värden. Användaren väljer aktivt vilka filtreringskriterier som ska gälla och kan kombinera flera kriterier för att begränsa träffmängden. Filtreringsalternativen ska vara tydliga och det ska vara enkelt att förstå vilka kriterier som påverkat urvalet av data.
Här följer ett antal designmönster för filtrering i tabeller och listor
Inline-filter
Inline-filter innebär att filtren placeras direkt ovanför tabellen och alltid är synliga. Det gör det enkelt att se vilka filter som finns tillgängliga och vilka som redan är aktiva, samt att justera flera filter på en gång utan extra interaktioner. Du kan se ett exempel på detta mönster här
Använd detta mönster när
- det bara finns ett fåtal filter
- användaren snabbt behöver kunna justera flera filter på en gång
- det är viktigt att direkt kunna se vilka filter som är aktiva
Filtren kan vid behov läggas i en Accordion för att kunna fällas ihop och ta mindre plats.
Filter i popover
I detta mönster öppnas filtervalen i en Popover via en knapp eller en ikon. Det ger en fokuserad tabellvy och är användbart filtrering inte är användarens primära handling. Inne i popovern läggs filtren i Accordion som kan expanderas och fällas ihop, vilket ger en tydlig och skalbar struktur även när det är många filter.
Använd detta mönster när
- filtreringen inte är en primär uppgift för de flesta användare
- det finns många filter
- du vill kunna gruppera filter
