Søk
Close this search box.
Søk
Close this search box.
ANNONSE

Lag en filtreringsløsning som fungerer på mobil

Ole Martin N. Evensmo
olemartin@netthandel.no

I dette leserinnlegget forteller danske Mogens Møller hvordan en filtreringsløsning bør se ut når de besøkende kommer via mobiltelefonen.

ANNONSE

La oss slå det fast med en gang: Desktop og smarttelefoner er to vidt forskjellige skjermer og enheter, derfor kreves det også vidt forskjellige design og oppsett. Filtrering på varelister er et av de områder, hvor man som nettbutikk er nødt til å tenke helt annerledes.

La oss ta et godt eksempel

Jeg kan finne frem en rekke eksempler på nettbutikker som løser dette veldig dårlig, men det får du ikke særlig mye ut av. Derfor vil jeg heller vise et eksempel på en nettbutikk som jeg har sett i brukertester mange ganger og som løser utfordringen med filtrering veldig bra – i hvert fall på mange områder. De feiler også, men her skal jeg fortelle, hva de burde gjøre annerledes, som du så kan la deg inspirere av.

Nettbutikken i mitt eksempel er Asos.com.

De viser to tydelige knapper i toppen av deres varelister som sender brukerne til henholdsvis sortering og filtrering. Det er logisk, brukervennlig og det fungerer veldig godt i praksis:

Bildet viser Asos sin nettbutikk på mobil, med oversiktelig filtrering og sortering. Klikk for å forstørre.

Når brukeren trykker på filtreringen, vises det et overblikk over de forskjellige filtreringsmuligheter. Samtidig vises det hele tiden en tydelig ”Close”-knapp nederst. Det fungerer også veldig godt:

Bildet viser en stor lukke-knapp nederst på mobilsiden til Asos. Klikk for å forstørre.

Når brukerne trykker på en av filtreringsmulighetene f.eks. ”Size” vises nå en liste med avkrysningsbokser, så man kan velge en eller flere av mulighetene. Dette er også veldig brukervennlig og lett å bruke:

Bildet viser hvor lett det er å krysse av i filtreringen. Klikk for å forstørre.

Sørg for at du ikke bare benytter standardvelgeren på smarttelefonene her. Det er nemlig veldig vanskelig å se på iPhones, hva man har valgt.

Se eksempel her fra Boozt.com:

BIldet viser eksempel på en filtering som fungerer dårlig. Klikk for å forstørre.

Nå går det galt også for Asos

Okay, Asos løste altså filtreringen frem til nå fint. Så langt bra. Men heretter går det litt galt. Når det trykkes ”Done” i forbindelse med valg av ”Size” sendes man nemlig tilbake til filtreringsmenyen i stedet for å bli sendt til selve varelisten. Det er ikke særlig brukervennlig.

Når jeg så endelig kommer til varelisten vises det dessverre ikke hva jeg har filtrert på. Det vises bare et utydelig V-tegn oppe ved ”Refine” knappen:

Bildet viser problemet med filtreringen hos Asos. Klikk for å forstørre.

Det betyr at hvis man vil endre sin filtrering og f.eks. slette noen av filterne i etterkant, så må man igennom menyene igjen. Det er ikke godt nok.

Her kan vi med fordel se på en dansk webshop som jeg har vært med å brukerteste en del ganger – nemlig Magasin. De viser tydelig hva det er filtrert på, og hvordan disse filtre eventuelt slettes igjen. Det er altså veldig vigtig:

Ingen tvil om hva man har filtrert på i dette eksempelet fra Magasin. Klikk for å forstørre.

Magasin gjør imidlertid dessverre en del andre usability-feil tidligere i filtreringsforløpet, noe som er grunnen til at jeg ikke har brukt dem som eksempel hele veien.

Jeg håper dette har gitt deg litt inspirasjon til hvordan du kan få styr på filtrering og sortering av varelister på smarttelefoner i din nettbutikk.

Del artikkel: