7 bästa metoder för design och placering av sökrutor
Sökrutan är en av de viktigaste delarna på en webbplats. Oavsett vilken typ av verksamhet du har är det viktigt att ha en väldesignad sökruta på plats så att besökare enkelt kan hitta det de letar efter. Det betyder inte att det räcker att bara lägga till en sökfunktion utan att ens tänka på hur den ser ut.
Du måste överväga funktionaliteten, användarvänligheten, estetiken och till och med placeringen av sökrutan. Allt för att du ska kunna förbättra användarupplevelsen på din webbplats, vilket till och med kan leda till ökade konverteringar.
Så vad måste du göra när du designar en sökruta? Även om de exakta rekommendationerna kan vara subjektiva baserat på dina behov och mål, finns det några allmänna tips som kan fungera för olika typer av webbplatser. Så här är några av de bästa metoderna för design och placering av sökrutor:
1 Gör det framstående
Den första och viktigaste regeln i design av sökrutor är att göra det lätt att märka. Du kanske är för fokuserad på designestetiken att du skapar en sökruta som smälter in med resten av webbplatsen. Men det är viktigt att komma ihåg att du lägger till en sökruta för personer som vill hitta något på din webbplats. Att låta dem söka efter sökrutan är inte meningsfullt och kan till och med ha en negativ inverkan på deras upplevelse.
Det betyder inte att du måste kompromissa med estetiken helt och hållet. Kom på en design som ser bra ut mot din befintliga webbdesign samtidigt som den fortfarande är tillräckligt framträdande för att folk ska märka. Så storleken på lådan bör vara stor men inte för stor att den tar för mycket plats på sidan. Och färgen ska vara kontrasterande men ändå komplettera resten av färgerna som används på sidan.
Sökrutan Best Buy är ett bra exempel eftersom den vita kontrasten mot det blå på sidan samtidigt som den är i linje med de andra färgerna som används i siddesignen. Storleken på sökrutan är inte för stor samtidigt som den är tillräckligt framträdande för att människor omedelbart ska märka när de kommer in på sidan.
2 Markera knappen Skicka
Som nämnts tidigare är hela syftet med en sökruta att göra det enklare för webbplatsbesökare. Undvik att överkomplicera saker och ting med små inlämningsknappar som användarna måste fokusera på för att kunna klicka. Att få knappen skicka att sticka ut förbättrar synligheten för själva sökrutan och gör det också lättare för användare att klicka på.
Om du väljer att använda en förstoringsglasikon eller stavar "Skicka" i knappen Skicka är upp till dig. Fokusera dock på storleken och färgen på knappen för att säkerställa att användarna inte har några problem att hitta den efter att ha skrivit in Gör det klart för dem vad de måste göra efter att de skrivit in vad de letar efter.
Vissa webbplatser går till och med så långt att de bara anger förstoringsglasikonen så att besökare kan söka efter något. Detta kan visa sig vara till stor fördel för webbplatsens estetik som i fallet med Levi’s Strauss. Men detta är inte ett optimalt exempel på sökrutedesign.
Även om detta ser bra ut designmässigt kan det vara obekvämt för besökarna eftersom de måste vänta på att sökrutan ska laddas efter att ha klickat på förstoringsglasikonen. Det kan vara frustrerande särskilt om du kommer åt sidan från en plats där anslutningen är långsam. Istället för att ladda det separat, kan det vara bättre att låta sökrutan expandera på samma plats där förstoringsglaset är placerat.
När du har fastnat med begränsat utrymme, men sökning är viktigt, kan det vara trevligt att få det att smälta in i den översta navigeringen. Detta är precis vad shralpin gjorde på sin mobilsajt.
Xero Shoes, å andra sidan, har ingen skicka-knapp alls. Besökare måste ange ett nyckelord i sökningen och sedan trycka på Retur för att söka efter något på webbplatsen. Nu kanske du tycker att det inte är så illa att helt enkelt trycka på enter-tangenten för att starta sökningen, men hur är det med resten av besökarna? Vissa av dem söker kanske specifikt efter skicka-knappen och kan ha svårt att göra sökningar med den här typen av design.
Amazons skicka-knapp är ganska framträdande i orange medan resten av sökrutan är i vitt. Färgen på skicka-knappen kontrasterar också mot den mörkare färgen på webbsidans rubrik. Så även om de bara använder en förstoringsglasikon som skicka-knappen, är den fortfarande tydligt synlig till skillnad från Levi’s-exemplet. Se till att ikonen är vadderad, eftersom det ökar synligheten.
3 Placera den där det är mest sannolikt att användarna tittar
Det pågår en debatt om det bästa stället att placera sökrutan på en webbplats. Men om du tittar runt på några av de mest populära webbplatserna kommer du att märka att sökrutorna ofta är placerade längst upp i mitten eller uppe till höger på sidan. Det framgår av studien publicerad av SLI Systems. Analysen visade att 54 % av återförsäljarna placerar sökrutan uppe till höger, 30 % i mitten och endast 16 % till vänster.
Det betyder att besökare kan förvänta sig att hitta sökrutan längst upp till höger på din webbplats. Att placera den någonstans oväntat innebär att användare kan behöva anstränga sig extra för att hitta sökrutan. Trots detta är det fortfarande en bra idé att studera besökarnas aktivitet med hjälp av en värmekarta eller ett ögonspårningsverktyg. Detta hjälper dig att identifiera var de är mest benägna att leta, vilket hjälper dig att förstå var du ska placera sökrutan på din webbplats.
Oavsett om du väljer vänster, höger eller mitten; se till att det är högst upp på sidan eftersom det är där besökarna är mer benägna att skanna först enligt en NN Group eye-tracking-studie. Det skulle göra dig bra att utföra ett A/B-test på olika sökrutaplaceringar och sedan fastställa vilken position verkar fungera bäst för dig.
Här är ett exempel på en sökruta placerad till höger på sidan från Get Plus Followers.
EBays sökrutaplacering är i mitten av sidan, där den är väl synlig och en av de första sakerna som besökare kommer att lägga märke till på webbplatsen.
4 Kombinera automatisk komplettering med grafik
Din webbplats kan vara bland de 62,5 % som använder funktionen för automatisk komplettering i sökrutan. För att få konkurrensfördelar kan du förbättra funktionen ytterligare genom att lägga till bildförhandsvisningar av produkten tillsammans med förslagen för automatisk komplettering i din sökfunktion. Detta beror på att endast 28,2 % av de deltagande webbplatserna för närvarande implementerar den här funktionen.
För att ytterligare göra ett fall för automatisk komplettering med grafik, kanske du vill ta en titt på fallet med LED Hut. Efter att ha lagt till bildförhandsvisningar i sina förslag till autoslutförande lyckades LED-belysningsleverantören öka sin sökkonverteringsfrekvens med 200 %. Så här kommer det att se ut när du lägger till bildförhandsvisningar i sökförslaget.
5 Undvik att isolera eller överfulla sökrutan
Den första punkten nämnde hur viktigt det är att göra sökrutan framträdande. Det betyder att du bör undvika att överbefolka de omgivande områdena med ikoner eller andra element som kan distrahera besökare från sökrutan. Sökrutan måste prioriteras och fokuseras på. Samtidigt bör du undvika att överdriva detta eftersom det kan sluta med att du isolerar sökrutan så att den blir svår att hitta.
Sökrutan för Snow and Rock är ett bra exempel på en väldesignad sökruta. Som du kan se i bilden nedan finns det inte för många element som trängs i området där den är placerad. Men du kan fortfarande se den i mitten-vänster på sidan och är inte placerad någonstans som användare kommer att ha svårt att hitta. Skicka-knappen står också i kontrast till resten av färgerna på webbplatsen, vilket gör att den sticker ut.
6 Välj en expanderande sökruta
När du letar efter sätt att spara utrymme samtidigt som du gör sökrutan framträdande för användarna, kan du välja en växande sökruta. Detta är ett idealiskt val för webbplatser där sökning kanske inte är alltför viktig men du ändå vill ge användarna möjlighet att söka efter något. Istället för att bara lägga till en förstoringsglasikon, lägger du till en liten sökruta bredvid den för att fungera som en visuell ledtråd för webbplatsbesökare. När en användare klickar på fältet expanderas rutan och gör det möjligt för användare att ange den term de behöver.
Här är ett bra exempel från Net-a-Porter. Om du tittar längst upp till höger på webbplatsen ser du att sökrutan är synlig men inte för stor. Det finns en förstoringsglasikon för användare att identifiera att det är ett sökalternativ.
Men när du klickar på fältet expanderar sökrutan så att du kan skriva in din önskade sökterm. Denna kombination av estetik och användbarhet är utmärkt för en webbplats som måste inkludera massor av element på startsidan eftersom det hjälper dig att spara utrymme utan att kompromissa med sökrutans synlighet.
7 Överväg att lägga till en rullgardinsmeny
Sökrutan finns för personer som redan har en aning om vad de letar efter. Men hur är det med de som inte är alltför säkra på vad de letar efter. Du kan ha en förslagsfunktion för automatisk komplettering, men att lägga till en rullgardinsfunktion precis bredvid sökrutan kan vara en bra idé för vissa webbplatser. Det ger användarna en känsla av riktning och ger dem ledtrådar om vad de ska leta efter.
Denna taktik visade sig vara en framgång för Casa Mineira, ett Brasilien-baserat fastighetsbolag. I en fallstudie som genomfördes på webbplatsen hjälpte det att ersätta standardsökrutan med rullgardinsmenyer för att generera fler potentiella kunder. Faktum är att variationen resulterade i 57,25 % fler leads än tidigare.
Anledningen till att denna variant fungerade så bra är att besökarna fick en tydlig handlingsväg och de kunde snabbt hitta det de letade efter. I den tidigare designen var besökarna tvungna att vara säkra på exakt vad de letade efter. Så för att guida besökarna bättre bestämde de sig för att täcka en mängd olika platser och typer av boende.
Men det är viktigt att komma ihåg att det här alternativet kanske inte är det bästa för alla typer av webbplatser. En e-handelsbutik kanske till exempel inte kan göra sökningen mer funktionell för besökare som använder den här tekniken. Men för fastighetsbolag och tjänsterelaterade företag kan en rullgardinssökningsfunktion vara den perfekta lösningen.
Slutsats
Du har nu en bättre förståelse för sökrutornas design och placering med hjälp av exempel och tips. Så vad har du lärt dig av detta? Du kanske har lagt märke till vikten av att sökrutan är framträdande och synlig. Det betyder att färgkontrast, estetik och storlek på sökrutan är några av de viktigaste aspekterna.
Ditt fokus bör ligga på funktionalitet och estetik kombinerat, vilket kanske inte är lätt att utföra. Det bästa rådet du kan få är att utföra A/B-tester på olika konstruktioner och positioner som nämnts i de föregående punkterna. Har du några frågor om design av sökrutor? Lämna gärna en kommentar nedan.