7 beste fremgangsmåter for design og plassering av søkebokser

Søkeboksen er et av de viktigste elementene på en nettside. Uansett hvilken type virksomhet du har, er det viktig å ha en godt utformet søkeboks på plass, slik at besøkende enkelt kan finne det de leter etter. Dette betyr ikke at det er nok å bare legge til en søkefunksjon uten å tenke på hvordan den ser ut.

Du må vurdere funksjonaliteten, brukervennligheten, estetikken og til og med plasseringen av søkeboksen. Alt dette er for at du skal kunne forbedre brukeropplevelsen på nettstedet ditt, noe som til og med kan føre til økte konverteringer.

Så hva må du gjøre når du designer en søkeboks? Selv om de eksakte anbefalingene kan være subjektive basert på dine behov og mål, er det noen generelle tips som kan fungere for forskjellige typer nettsteder. Så her er noen av de beste fremgangsmåtene i søkeboksdesign og plassering:

1 Gjør det fremtredende

Den første og viktigste regelen i søkeboksdesign er å gjøre det lett synlig. Du kan være for fokusert på designestetikken til at du lager en søkeboks som smelter sammen med resten av nettstedet. Men det er viktig å huske at du legger til en søkeboks for folk som ønsker å finne noe på nettstedet ditt. Å la dem søke etter søkeboksen vil ikke gi mening og kan til og med ha en negativ innvirkning på opplevelsen deres.

Dette betyr ikke at du må gå på akkord med estetikken helt. Kom opp med et design som ser bra ut mot ditt eksisterende nettsteddesign, samtidig som det er fremtredende nok til at folk kan legge merke til det. Så størrelsen på boksen bør være stor, men ikke for stor til at den tar for mye plass på siden. Og fargen skal være kontrasterende, men likevel komplementær til resten av fargene som brukes på siden.

Best Buy-søkeboksen er et godt eksempel ettersom det hvite kontrasterer mot det blå på siden mens det fortsatt er på linje med de andre fargene som brukes i sidedesignet. Størrelsen på søkeboksen er ikke for stor, samtidig som den er fremtredende nok til at folk umiddelbart kan legge merke til det når de kommer inn på siden.

2 Marker Send-knappen

Som nevnt tidligere, er hele formålet med en søkeboks å gjøre ting enklere for besøkende på nettstedet. Unngå å overkomplisere ting med små innsendingsknapper som brukerne må fokusere på for å klikke. Å få innsendingsknappen til å skille seg ut forbedrer synligheten til selve søkeboksen og gjør det også enklere for brukere å klikke på.

Det er opp til deg om du velger å bruke et forstørrelsesglassikon eller stave «Send inn» i send-knappen. Fokuser imidlertid på størrelsen og fargen på knappen for å sikre at brukerne ikke har problemer med å finne den etter å ha skrevet inn søkefeltet. Gjør det klart for dem hva de må gjøre etter at de har skrevet inn det de leter etter.

Noen nettsteder går til og med så langt at de bare legger forstørrelsesglassikonet slik at besøkende kan søke etter noe. Dette kan vise seg å være til stor fordel for nettstedets estetikk som i tilfellet med Levi’s Strauss. Men dette er ikke et optimalt eksempel på søkeboksdesign.

Selv om dette ser bra ut med tanke på design, kan det være upraktisk for besøkende siden de må vente på at søkeboksen skal lastes etter å ha klikket på forstørrelsesglassikonet. Det kan være frustrerende, spesielt hvis du går inn på nettstedet fra et sted der tilkoblingen er treg. I stedet for å laste den separat, kan det være bedre å utvide søkeboksen på samme sted der forstørrelsesglasset er plassert.

Når du sitter fast med begrenset plass, men søk er viktig, kan det være greit å ha det blandet inn i toppnavigasjonen. Dette er nøyaktig hva shralpin gjorde på mobilsiden deres.

Xero Shoes har derimot ikke noen send-knapp i det hele tatt. Besøkende må skrive inn et nøkkelord i søket og deretter trykke enter for å søke etter noe på nettstedet. Nå tror du kanskje det ikke er så ille å bare trykke på Enter-tasten for å starte søket, men hva med resten av de besøkende? Noen av dem søker kanskje spesifikt etter send-knappen og kan ha vanskeligheter med å søke med denne typen design.

Amazons send-knapp er ganske fremtredende i oransje mens resten av søkeboksen er i hvitt. Fargen på send-knappen står også i kontrast til den mørkere fargen på nettsidens overskrift. Så selv om de bare bruker et forstørrelsesglassikon som send-knappen, er det fortsatt fremtredende synlig i motsetning til Levi’s-eksemplet. Sørg for at ikonet er polstret, da dette vil øke synligheten.

3 Plasser den der brukerne mest sannsynlig vil se

Det er en pågående debatt om det beste stedet å sette søkeboksen på et nettsted. Men hvis du ser deg rundt på noen av de mest populære nettstedene, vil du legge merke til at søkeboksene ofte er plassert øverst i midten eller øverst til høyre på siden. Dette fremgår av studien publisert av SLI Systems. Analysen fant at 54 % av forhandlerne plasserer søkefeltet øverst til høyre, 30 % i midten og bare 16 % til venstre.

Dette betyr at besøkende kan forvente å finne søkefeltet øverst til høyre på nettstedet ditt. Å plassere den et uventet sted betyr at brukere kanskje må anstrenge seg ekstra for å finne søkeboksen. Til tross for dette er det fortsatt en god idé å studere besøkendes aktivitet ved hjelp av et varmekart eller et øyesporingsverktøy. Dette vil hjelpe deg med å identifisere hvor de mest sannsynlig vil se, og hjelpe deg med å forstå hvor du bør plassere søkefeltet på nettstedet ditt.

Uansett om du velger venstre, høyre eller senter; sørg for at det er mot toppen av siden, da det er her besøkende som mer sannsynlig vil skanne først i henhold til en NN Group eye-tracking-undersøkelse. Det vil hjelpe deg å gjennomføre en A/B-test på forskjellige søkeboksplasseringer og deretter finne ut hvilken stilling ser ut til å fungere best for deg.

Her er et eksempel på en søkeboks plassert på høyre side av siden fra Get Plus Followers.

EBays søkeboksplassering er i midten av siden, der den er godt synlig og noe av det første besøkende vil legge merke til om nettstedet.

4 Kombiner automatisk fullføring med grafikk

Nettstedet ditt kan være blant de 62,5 % som bruker autofullføringsfunksjonen i søkefeltet. For å oppnå konkurransefortrinn, kan du forbedre funksjonen ytterligere ved å legge til forhåndsvisninger av produktet sammen med autofullføringsforslagene i søkefunksjonen din. Dette er fordi bare 28,2 % av deltakende nettsteder implementerer denne funksjonen.

For ytterligere å lage en sak for autofullføring med grafikk, kan det være lurt å ta en titt på saken til LED Hut. Etter å ha lagt til bildeforhåndsvisninger i forslagene deres for automatisk fullføring, klarte LED-belysningsleverandøren å øke søkekonverteringsfrekvensen med 200 %. Slik vil det se ut når du legger til bildeforhåndsvisninger i søkeforslaget.

5 Unngå å isolere eller overbefolke søkefeltet

Det første punktet nevnte hvor viktig det er å gjøre søkeboksen fremtredende. Dette betyr at du bør unngå å overbefolke områdene rundt med ikoner eller andre elementer som kan distrahere besøkende fra søkefeltet. Søkefeltet må prioriteres og fokuseres på. Unngå samtidig å overdrive dette, da du kan ende opp med å isolere søkefeltet i den grad at det gjør det vanskelig å finne.

Søkeboksen til Snow and Rock er et godt eksempel på en godt utformet søkeboks. Som du kan se på bildet nedenfor, er det ikke for mange elementer som overtrenger området der den er plassert. Men du kan fortsatt se den mot midten til venstre på siden og er ikke plassert et sted brukere vil ha vanskelig for å finne. Send inn-knappen står også i kontrast til resten av fargene på nettstedet, noe som gjør at den skiller seg ut.

6 Velg en utvidende søkeboks

Når du leter etter måter å spare plass på og samtidig gjøre søkeboksen fremtredende for brukere, kan du velge en søkeboks i vekst. Dette er et ideelt valg for nettsteder der søk kanskje ikke er for viktig, men du fortsatt vil gi brukerne muligheten til å søke etter noe. I stedet for å bare legge til et forstørrelsesglassikon, legger du til en liten søkeboks ved siden av det for å fungere som en visuell ledetråd for besøkende på nettstedet. Når en bruker klikker på feltet, vil boksen utvides og gjøre det mulig for brukere å skrive inn termen de trenger.

Her er et godt eksempel fra Net-a-Porter. Hvis du ser øverst til høyre på nettstedet, ser du at søkeboksen er synlig, men ikke for stor. Det er et forstørrelsesglassikon for brukere å identifisere at det er et søkealternativ.

Men når du klikker på feltet, utvides søkeboksen slik at du skriver inn ønsket søkeord. Denne kombinasjonen av estetikk og brukervennlighet er utmerket for et nettsted som må inkludere mange elementer på hjemmesiden, da det hjelper deg med å spare plass uten å gå på akkord med søkeboksens synlighet.

7 Vurder å legge til en rullegardinmeny

Søkeboksen finnes for folk som allerede har en ide om hva de leter etter. Men hva med de som ikke er så sikre på hva de ser etter. Du kan ha en forslagsfunksjon for automatisk fullføring, men å legge til en rullegardinfunksjon ved siden av søkeboksen kan være en god idé for enkelte nettsteder. Det gir brukerne en følelse av retning og gir dem ledetråder om hva de skal se etter.

Denne taktikken viste seg å være en suksess for Casa Mineira, et Brasil-basert eiendomsselskap. I en case-studie utført på nettstedet hjalp det å erstatte standardsøkeboksen med rullegardinmenyer til å generere flere potensielle kunder. Faktisk resulterte variasjonen i 57,25 % flere potensielle kunder enn før.

Grunnen til at denne variasjonen presterte så bra er fordi besøkende fikk en klar handlingsvei og de raskt kunne finne det de leter etter. I det forrige designet måtte besøkende være sikre på nøyaktig hva de lette etter. Så for å veilede besøkende bedre, bestemte de seg for å dekke et bredt utvalg av steder og typer overnatting.

Men det er viktig å huske at dette alternativet kanskje ikke er det beste for alle typer nettsteder. En e-handelsbutikk kan for eksempel ikke være i stand til å gjøre søk mer funksjonelt for besøkende som bruker denne teknikken. Men for eiendomsselskaper og tjenesterelaterte virksomheter kan en rullegardinsøkefunksjon være den perfekte løsningen.

Bunnlinjen

Du har nå en bedre forståelse av søkeboksdesign og plassering ved hjelp av eksempler og tips. Så hva har du lært av dette? Du har kanskje lagt merke til stresset som legges på fremtredende og synlighet av søkefeltet. Dette betyr at fargekontrast, estetikk og størrelse på søkeboksen er noen av de viktigste aspektene.

Fokuset ditt bør være på funksjonalitet og estetikk kombinert, noe som kanskje ikke er lett å utføre. Det beste rådet du kan få er å gjennomføre A/B-tester på ulike design og posisjoner som nevnt i de foregående punktene. Har du spørsmål om søkeboksdesign? Legg gjerne igjen en kommentar nedenfor.