Alla arbeten

UX/UI-design · Designsystem · TRR · Med designers från andra produktteam

Så satte vi en filterstandard för TRR, så att filtrering fungerar likadant var man än letar

Användare filtrerar för att snäva in jobbannonser, aktiviteter och kandidater i TRR:s tjänster. Med tiden hade varje team byggt filtrering på sitt eget sätt, så samma uppgift fungerade olika från en tjänst till nästa. Tillsammans med designers från andra produktteam designade jag en gemensam filterkomponent, och list- och tabellåtgärderna runt den, och satte den som standard i TRR:s designsystem. Användarna lär sig den en gång och känner igen den överallt. Teamen använder en dokumenterad komponent i stället för att bygga en egen.

Min roll
UX/UI-designer, tillsammans med designers från andra produktteam
Företag
TRR
Typ
Komponent och mönster i designsystemet
Plattform
Webb, desktop och mobil
Levererat
Filter, list- och tabellåtgärder och datagrid, dokumenterade i Figma
Verktyg
Figma
Fungerande prototypProva självFiltrera jobbannonser och aktiviteter med samma komponent, öppna Fler filter, markera rader och prova mobilens filterpanel. På svenska, på dator eller mobil.
En mockup av filterstandarden i två tjänster: jobbannonser med filtret för yrkesområde öppet och två val gjorda, och framför aktiviteter med samma filterrad och filtret för kategori öppet

Kort version

Problemet

Filtrering hade vuxit fram olika i varje tjänst. Användarna fick lära om hur man väljer, ser och rensar filter varje gång de bytte tjänst.

Det här gjorde vi

Designers från flera produktteam enades om en filterkomponent, med alla lägen uppritade, plus list- och tabellåtgärderna som hör till.

Det här ger det

För användarna ett sätt att filtrera överallt. För teamen en dokumenterad standard i designsystemet i stället för många lokala varianter.

01

Problemet

Filter är hur människor hittar det som är relevant för dem: jobbannonser inom sitt område, aktiviteter nära dem, kandidater till en arbetsgivare. På TRR hade filtrering byggts team för team över tid. Varje lösning var rimlig för sig, men tillsammans hängde de inte ihop.

Lära om i varje tjänst

Samma uppgift, att snäva in en lista, såg ut och betedde sig olika beroende på var man var. Användarna fick lista ut varje variant på nytt.

Svårt att se vad som var på

Med olika mönster kunde det vara oklart vilka filter som var aktiva, eller hur man kom tillbaka till hela listan.

Många varianter att underhålla

Varje team designade, byggde och rättade sitt eget filter, så en förbättring i en tjänst nådde inte de andra.

Målet

Sätta en filterstandard för TRR: en komponent som fungerar likadant för användarna i alla tjänster, och som alla team kan använda.

02

Design­utmaningen

En komponent behövde passa mycket olika tjänster. Vissa listor har några få filter, andra många. Vissa används i mobilen, andra mest på datorn på jobbet. Vissa visar kort, andra är tabeller med valbara rader.

Den behövde också förankras mellan teamen. En standard som ingen använder är ingen standard, så designen behövde svara på varje teams behov så väl att de valde den framför sin egen variant.

Ett mönster, många sammanhang

Enkel nog att lära sig en gång, flexibel nog att täcka alla tjänsters filter.

03

Min roll: att designa standarden tillsammans

Min roll

Jag arbetade med filtret tillsammans med designers från andra produktteam på TRR. Vi jämförde hur filtrering fungerade i varje tjänst, enades om beteendet användarna skulle möta överallt, och jag designade komponenten och dess lägen i Figma.

Arbetet växte till en liten familj av gemensamma mönster: själva filtret, list- och tabellåtgärderna som hör till och en datagrid för tabeller. Var och en är dokumenterad i designsystemet som gemensam layout och funktionalitet.

Hur vi arbetade

Vi utgick från tjänsterna som redan hade filter och tittade på vad användarna mötte i var och en. Utifrån det enades vi om ett sätt att välja, visa, rensa och samla överflödiga filter, och ritade upp varje läge så att designers och utvecklare inte behövde gissa.

Från många varianter till en standard

Titta på hur filtrering fungerar i varje tjänst → enas om gemensamt beteende med de andra designerna → designa komponenten och dess lägen → dokumentera den i designsystemet → teamen använder den i sina tjänster.

04

Viktiga designbeslut

Fyra beslut utgör standarden. Vart och ett handlar om vad användare behöver när de snävar in en lista.

  1. Ett filter, en knappVarje filter är en knapp i en rad ovanför listan och öppnar en liten panel med sina val. Användarna ser alla filter på en gång och väljer utan att lämna sidan.
  2. Visa alltid vad som är påEtt aktivt filter byter färg och visar hur många val som är gjorda. En länk, ”Rensa filter”, återställer allt, så det är alltid lätt att komma tillbaka.
  3. Plats för många filterDe mest använda filtren stannar i raden. Resten hamnar under ”Fler filter”, en panel med alla filter grupperade, så att en lång rad aldrig trycker ner innehållet.
  4. En mobilpanel som visar resultatet förstI mobilen öppnar en Filter-knapp en panel där varje filter är en sektion. Knappen längst ner säger hur många träffar valet ger, eller ”Inga träffar”, innan användaren tillämpar det.
05

Standarden i användning

Skärmarna kommer från en fungerande prototyp byggd utifrån designen i Figma. Den visar samma filterkomponent i två tjänster, jobbannonser och aktiviteter. Innehållet är påhittat. Klicka på en bild för att förstora den.

Fungerande prototypProva självFiltrera jobbannonser och aktiviteter med samma komponent, öppna Fler filter, markera rader och prova mobilens filterpanel. På svenska, på dator eller mobil.

Välj

Filterraden ovanför listan med jobbannonser, med filtret för yrkesområde öppet: en panel med rubrik, stängknapp, kryssrutor och en Rensa-länk som ännu inte är aktiv
1En panel per filter. Rubrik, val och Rensa. Rensa är grå tills det finns något att rensa.
Samma panel med två val gjorda. Filterknappen har blivit turkos med siffran 2, och Rensa filter har dykt upp i raden
2Resultatet uppdateras direkt. Knappen visar antalet val, och Rensa filter dyker upp i raden.

Se och hantera

Filterraden med två aktiva filter, båda turkosa med antal, följda av Fler filter och Rensa filter, ovanför tre jobbannonser
3Aktivt i en blick. Turkos och antal för varje aktivt filter, en länk för att rensa alla.
Panelen Fler filter till höger med alla filter grupperade under rubriker, en Rensa-länk och en knapp som visar antalet jobbannonser
4Fler filter. Alla filter i en panel, grupperade. Knappen säger hur många träffar det blir.

Agera på listan

Listan med två av tre jobbannonser markerade: markera alla-rutan visar ett delvis läge, och åtgärder för att spara, kopiera länkar och mejla syns bredvid ”2 valda av 3”
5Liståtgärder. Markera alla, ett delvis läge och åtgärder som bara syns när något är markerat. Sortering, rader per sida och bläddring ligger till höger.
Tjänsten aktiviteter med samma filterrad, filtret för format aktivt och filtret för kategori öppet
6Samma komponent på ett annat ställe. Aktiviteter använder exakt samma filter, så det finns inget nytt att lära.

I mobilen

Mobilens filterpanel med varje filter som en stängd sektion och en inaktiv Rensa allt-länk
En Filter-knapp. Varje filter är en sektion.
Mobilpanelen med sektionen för yrkesområde öppen, ett val gjort, antal vid varje val och en knapp där det står Visa 23 träffar
Antal och ett levande resultat. Knappen säger hur många träffar valet ger.
Listan med jobbannonser i en mobil efter filtrering, med Filter-knappen som visar ett aktivt filter
Tillbaka till listan. Filter-knappen visar vad som är aktivt.
06

Komponenten och dess lägen

Filterkomponenten dokumenterad i Figma: rader för filtergrupp, aktivt filter, filteröverflöd, filterdialog, valda filteralternativ och aktiva filter, och under dem panelen i lägena standard, valt och scroll och panelen Fler filter i lägena standard och valt
Filtret i TRR:s designsystem. Alla lägen uppritade, under rubriken ”Gemensam layout och funktionalitet”.

Lägen som designers och utvecklare kan lita på

  1. FiltergruppRaden med filterknappar, utgångspunkten i alla tjänster.
  2. Aktivt filterTurkos med antal, så att det som är på aldrig är dolt.
  3. FilteröverflödNär det finns fler filter än som får plats hamnar resten under Fler filter.
  4. Panel: standard, valt och scrollVal med en Rensa-länk som vaknar när något är valt. Långa listor scrollar inuti panelen, med underrubriker.
  5. Sidopanel: standard och valtFler filter med alla filter grupperade, för tjänster med många filter.
  6. Mobilpanel: standard, öppen och valtSektioner som öppnas en i taget, antal för varje val, Rensa allt och en knapp som visar antalet träffar.
Mobilens filterpanel dokumenterad i Figma i tre lägen: standard, öppet filter och valt, med antal och en knapp som visar 147 träffar
Mobilen, i tre lägen. Standard, öppen och valt, med antalet träffar i knappen.

Mönstren runt filtret

Filtrering kommer sällan ensam. Samma arbete definierade list- och tabellåtgärderna ovanför en lista och en datagrid för tabeller, så att hela området runt en lista beter sig likadant.

  • Markera alla med tre lägen: inga, alla och några valda.
  • Åtgärder som bara syns när något är markerat.
  • Sortering, rader per sida och bläddring på samma plats i varje lista.
  • En datagrid för tabeller, med kolumninställningar, filter och valbara rader.
List- och tabellåtgärder dokumenterade i Figma: markera alla i lägena standard, alla valda och delvis, synliga åtgärder, sortering, rader per sida och bläddring, och tre exempel på listor
List- och tabellåtgärder. Samma mönster för att markera, agera, sortera och bläddra i varje lista.
07

Värde för användare och team

För användarna

Lär dig en gång

Filtrering fungerar likadant i alla tjänster, så det användarna lär sig på ett ställe kan de använda på nästa.

Vet alltid vad som är på

Aktiva filter syns och har antal, och en länk tar tillbaka hela listan.

Inga återvändsgränder i mobilen

Knappen visar hur många träffar ett val ger innan det tillämpas, och säger till när det inte blir några.

För designsystemet och teamen

En komponent i stället för många

Teamen använder det gemensamma filtret i stället för att designa och bygga en egen variant.

Alla lägen redan bestämda

Designers och utvecklare behöver inte gissa hur filtret beter sig när det är tomt, fullt, aktivt eller i mobilen.

Förbättra en gång, förbättra överallt

En rättning eller förbättring av komponenten når alla tjänster som använder den.

Därför spelar det roll

Konsekvens handlar inte om att se likadant ut. Det handlar om att användarna inte ska behöva tänka på hur man filtrerar, så att de kan fokusera på att hitta ett jobb, en aktivitet eller en kandidat.

08

UI-design: vad och varför

Filtret ligger ovanpå fulla listor, så det behövde vara tyst tills det används och tydligt när det används.

  1. Byggt på TRR:s designsystemLila för handlingar, turkos för valda lägen, Open Sans för text och de befintliga komponenterna för kryssrutor och knappar.
  2. Turkos betyder valtValda kryssrutor, aktiva filterknappar och markerade rader har samma turkosa färg, så att ”valt” ser likadant ut överallt.
  3. Små knappar, en radKompakta knappar håller filtren på en rad ovanför listan, så att innehållet börjar högt upp på sidan.
  4. Rensa är tyst tills den behövsRensa är grå och inaktiv när inget är valt, och blir lila när det finns något att rensa.
  5. Antal som små märkenEtt runt turkost märke visar antalet val på en filterknapp och en mobilsektion, utan att lägga till text.

Vad jag tar med mig

En komponent i ett designsystem blir en standard först när teamen väljer den. Att arbeta med den tillsammans med designerna som skulle använda den gjorde att den passade deras tjänster, och att den blev lika mycket deras som min.

Den mest användarcentrerade delen av en komponent syns ofta inte: att den beter sig likadant varje gång. Människor märker inkonsekvens mycket mer än konsekvens, och när den försvinner kan de fokusera på det de kom för.

Nästa case · UX/UI-design · TRR Så hjälpte jag TRR:s rådgivare att hitta rätt kandidater, så att fler arbetsgivare tar kontakt