Prioriter søgefeltet på mobilen

mobiltilpassede e-handelssites er søgefeltet oftest designet anderledes end på desktop. Søgefeltet kæmper side og side med andre elementer, som menu, kurv, logo og login, om pladsen i headeren og prioriteringen skal være benhård hvis mobildesignet skal komme til at sidde lige i skabet.

Løsningsforslagene på denne udfordring er meget forskelligartede og nogle virker mere velovervejede end andre.

Lad os se på en række eksempler, der giver indblik i de tendenser vi ser i forhold til prioritering og placering af søgefeltet på mobil.

Søgefelt bag knap i headeren

Mange sites vælger at placere søgefeltet bag en knap med et søgeikon i den øverste del af headeren. For eksempel ligesom Ikea.dk:

Ikea                Ikea                  Ikea 3

På det første billede vises sitet som det ser ud når det tilgås. På det andet billede har brugeren klikket på søgeikonet i headeren og søgefeltet foldes ud, imellem headerens øverste del og menuen nedenunder. På det tredje billede har brugeren indtastet “Sofa” i søgefeltet.

Matas.dk gør noget lignende. De viser dog søgefeltet foldet ud, lige når brugeren kommer ind på sitet. Prøv at se det første billede herunder. Så snart brugeren så begynder at scrolle eller navigere på sitet, forsvinder søgefeltet igen (billede 2) og brugeren skal nu trykke på knappen med søgeikonet i headeren for at få det frem igen (billede 3).

2015-06-24 09.34.17                 Matas 1Matas 1

Søgefelt i off-canvas menu og/eller bag burgermenu

En anden løsning vi møder, er sites der vælger have søgefeltet liggende i sitets off-canvasmenu eller bag en generel menu-knap i headeren, ofte repræsenteret med det omstridte burgermenu-ikon.

Wupti 1                 Wupti 2

På Wupti.com ligger søgefeltet i off-canvas menuen. Menuen tilgås ved hjælp af knappen med navnet “Menu” øverst til venstre i sitets header. 

Stylepit 1                 Stylepit 2

Stylepit.dk har ikke en klassisk off-canvas menu, men har i stedet valgt at lade navigationsmulighederne overtage hele skærmen på mobil, når brugeren klikker på burgermenuen. 

Synligt søgefelt i headeren

Vi ser også mange sites, der vælger at lade søgefeltet være synligt i headeren, ligemeget hvor på sitet brugeren befinder sig. Dette gør både Coop.dk og Zalando.dk.

Coop

På Coop.dk er søgefeltet i webshoppen hele tiden tilgængelig i headeren øverst på alle sider.

Zalando 1                 Zalando 2

Det samme gør sig gældende på Zalando.dk, hvor søgefeltet, når det ikke er aktivt, ligger i forlængelse af menuen. Når brugeren aktiverer søgefeltet overtager det hele bredden af skærmen og bliver brugerens primære navigationsmulighed. 

Synligt søgefelt i bunden af sider

Til slut er det også en mulighed at placere et ekstra søgefelt i bunden af siderne på mobilen. Det vil sige at der både findes det konventionelle søgefelt i toppen af siden i headeren, mens der samtidig er tilføjet et søgefelt lige over sitets footer.

Zalando gør dette på deres mobilsite, hvor søgefeltet er placeret lige under “Til toppen” muligheden:

Zalando

Hvad skal du vælge?

Du kan vende spørgsmålet om og spørge dig selv: Hvad giver mest mening for mine brugere?

Generelt kan vi sige, at søgning (med meget få undtagelser) er en kernefunktionalitet. På nogle sites kan søgningen endda være det centrale omdrejningspunkt for al navigation på hele sitet. Se bare på sites som Airbnb.com, DBA.dk eller Bilbasen.dk. Samtidig ved vi at brugere i dag generelt er meget søgedominerede og søgning kan derved nemt være deres primære navigationsform, også på klassiske e-handelssites.

Samtidig bør du tage i betragtning, at søgning er mindst lige så vigtig på mobil, som på tablet eller desktop. Måske endda endnu vigtigere, da klassisk browsing i sitets katalog, kan være en bøvlet og tung proces, der let kan erstattes af en søgning. Der er derfor sjældent argumenter for at gøre søgefeltet mindre prominent på mobilen.

Derfor er det typisk også vores anbefaling, at du skal følge Coops og Zalandos eksempel og lade søgefeltet være synligt i headeren hele tiden.

Dog ved vi også, hvor svært det kan være at designe en optimal løsning til den minimale skærmplads der er til rådighed på de små skærme. Hvis du vælger at gøre søgning mindre prominent, enten ved at skjule søgningen bag en knap eller at gå så vidt som at gemme den bag en generel menu-knap, kan det være fordi:

  • Din søgning ikke er den mest oplagte navigationsmulighed for brugeren.
  • Din søgning ikke giver den bedste oplevelse af dit udvalg og dine produkter.
  • Dit produktudvalg er så tilpas lille, at det vil skabe mere værdi at arbejde med en skarp navigation direkte til dine kategorier fra sitets forside.

Samtidig er det oplagt at gentage søgefeltet tæt på footeren, som det ses i det sidste eksempel ovenfor fra Zalando.dk. Dette skyldes at brugeren ofte kan scrolle langt ned på siden uden at finde det, hun leder efter. Som en naturlig forlængelse af de lange sider virker det derfor godt, at servere søgefeltet igen nær footeren. I vores tests observerede vi samtidig, at der stadig er mange brugere, der ikke kender genvejen til toppen af skærmen på deres smartphone. For dem er der lang vej tilbage til udgangspunktet, og det er tidskrævende og irriterende at skulle swipe sig hele vejen til tops igen.

Vil du vide mere om søgning i e-handel?

Download vores gratis e-bog: User experience guidelines til søgning i e-handel. 

Her har vi samlet en række grundlæggende anbefalinger og guidelines til søgning i e-handelsløsninger, både på mobil og desktop.

Læs blandt andet om:

  • Søgefeltet
  • Auto-suggest
  • Søgeresultatsidens forskellige elementer
  • Facetteret søgning og brug af filtre
  • Søgeresultatets indhold
  • Tomme søgeresultater

Download din e-bog her1

Du kan også tilmelde dig vores morgenmøde om søgning i e-handel. Læs mere og tilmeld dig her.

Kategorier: E-handel, Mobil, UX

Tagged as: , , ,