En sökruta är en av de viktigaste delarna som ingår i nästan varje webbdesign. Medan ibland skapandet av detta lilla element blir en eftertanke, finns det ingen anledning till att sökrutan inte ska utformas så vackert som resten av en webbplats.
Utformningen av en sökruta ska spegla den för resten av webbplatsen, vara funktionell och enkel att använda och placeras på en plats som är uppenbart för användarna. Idag ska vi titta på några bra sökrutor och några verktyg för att hjälpa dig genom din egen design.
Behöver din webbplats en sökruta?
Det enkla svaret är ja. Om din webbplats innehåller en betydande mängd innehåll - tänk mer än en teaser eller stänk sida - en sökruta är ett måste.
Att ha en sökruta gör det lättare för användarna att hitta innehåll. Det kan också hjälpa dig att samla information om vad användare vill hitta och kommer till din webbplats för, till exempel produktinformation, nyckelordsanvändning och användares önskemål och behov.
Å andra sidan kan webbplatser som fungerar som teaser eller stänk sida vara bra utan att en sökfunktion införs. I allmänhet kanske du tror att ensidiga webbplatser faller i den här kategorin, men det beror verkligen på storlek, omfattning och design. Enkelsidiga webbplatser med mycket innehåll genom att använda element som parallaxrullning kan dra nytta av att inkludera sökfunktionalitet.
Sökfunktionalitet
En av de största frågorna när det gäller sökning är? Vad ska det göra ?? Även om det här kan verka som en uppenbar fråga och svar, kan sökfunktionerna variera från sida till sida. Användare kan ha olika förväntningar på hur sökningen kommer att fungera också baserat på webbplatsens innehåll.
Enkel sökning: Den vanligaste typen av webbplatssökning är utformad runt en ruta som innehåller en plats att skriva in vad du söker och en? Sökning? eller? Skicka? knapp. (Vi använder den typen av sökning här på Design Shack-webbplatsen.) Ofta innehåller rutan vad som kan sökas på webbplatsen, till exempel nyckelord eller artikelnummer.
Intelligent sökning: Google är ledande när det gäller intelligent sökning, vilket hjälper till att fylla i vad du söker baserat på populära söktermer och relevans för webbplatsen.
Filtrerad sökning: Webbplatser med filtrerad sökning, ge användaralternativen för vad eller var du ska söka efter något på webbplatsen. Amazon är ett utmärkt exempel på att använda filtrerad sökning. I översta fältet kan du söka hela sidan för ett objekt eller begränsa det till en viss produktkategori. (Amazon använder också intelligent sökning, vilket visar att du inte är begränsad till en typ av sökfunktionalitet.)
Placering i sökrutan
Det finns en bra anledning till att nästan varje webbplats du besöker har en sökruta högst upp på skärmen. Det är där användarna förväntar sig att det ska vara.
En analys av Site Search Today visade det hos de 50 största amerikanska detaljisterna, alla hade en sökruta längst upp på sidan. Av dem hade 54 procent en sökruta längst upp till höger, 30 procent i toppcentret och 16 procent längst upp till vänster på sidan. Resultaten var likartade i en studie av brittiska detaljhandlare med ett stort tillvägagångssätt - sökningen är vanligare placerad högst upp på webbplatsen följt av högra höger.
Placering som du borde undvika ligger någonstans under rullgardinsmenyn eller längst ner på sidan. (Det vill säga, om du inte innehåller en sökruta på båda ställena.) Designare bör också undvika att gömma sökrutan i navigeringsmenyn eller inuti en verktygsfält.
Sök identifierare
Sökverktyg ska vara lätta att identifiera och använda. Om användarna inte kan hitta verktyget kan det orsaka frustration eller att en användare lämnar din webbplats.
Vanliga sökidentifierare är en ruta med ordet sökning eller ett förstoringsglas bredvid en inmatningsruta. Det är allt. När du utformar sökning är ett av dessa alternativ din bästa insats.
Och glöm inte åtgärdsknappen. Precis som sökidentifierare, bör knappen för att utföra den aktuella sökningen vara enkel också. Använd ett ord som? Sök? eller? hitta.? ?Gå? är ett annat acceptabelt alternativ.
Sök designtips
När det gäller att skapa en sökruta (eller många andra vanliga användargränssnitt) är enkelhet nyckeln. En sökruta behöver flera saker: en inmatningsfält, titel, åtgärdsknapp och instruktioner.
Vid utformning av en sökruta bör designen fokusera på en låda. Låter enkelt, eller hur? Tänk på att rutan måste vara tillräckligt stor för att skriva (och se) vanliga sökord som är relevanta för din webbplats och innehålla text som är tillräckligt stor för att läsa i en enkel typsnitt. Håll dig borta från super små typ eller nyhet eller skript typsnitt.
Gör klart att du har sökning. Märk din sökfunktion som sådan, antingen med en titel bredvid eller ovanför rutan eller med text i rutan som säger att användarna ska söka på webbplatsen här.?
Se till att användarna vet hur man använder sökningen. Inkludera enkla instruktioner i sökrutan som berättar för dem vad de kan hitta med verktyget. (Men se till att provtexten försvinner när användaren klickar för att skriva eller aktivera rutan.) Slutligen, ta med en tydlig anrop till handlingsknapp för sökinsändning.
Sökverktyg och resurser
Google sökmotor
Du kan lägga till Google-sökning på din webbplats med ett enkelt verktyg som är gratis för grundläggande funktioner och kan anpassas för att matcha din webbdesign. Google har också ett betalt sökverktyg som innehåller några extra godsaker, inklusive fler designalternativ, för 100 dollar per år.
Sök inmatning med förslag
Den här enkla rutan kommer som en Adobe Photoshop-fil som du kan anpassa något för att hoppa på din sökrutans design. Den lagrade vektorfilen kommer komplett med en automatisk föreslagningsfunktion och är bara $ 2 från Creative Market.
Sök Bar Dropdown
Den här enkla sökfältfilen använder ett enkelt sökformat med en rullgardinsmeny för menyalternativ.Photoshop-filen kan laddas ner med rätt kredit.
Utökningsbar sökrutan
Om du vill se hur du kodar din sökruta, kolla på det här utvidbara alternativet som finns tillgängligt på CodePen.
CSS3 Form Pack
Om du inte är helt säker på vilken typ av sökrutan du letar efter innehåller CSS3 Form Pack sex sökformulär. Licensen för hela förpackningen är $ 4 för en bra samling goodies.
Hur man bygger ett sökformulär
Genom att bygga upp från koden, kan du också ha mycket kontroll över din sökruta. SpeckyBoy Design har ett bra exempel på enkel kod för en ren sökruta som är lätt för nästan alla med grundläggande kodningskunskap att följa.
Slutsats
Även om du har en bra sökruta kanske inte är den roligaste delen av designprocessen är det ofta en viktig del av din webbplats. Tänk på användaren först när du skapar en sökruta och sedan överväga den övergripande designen.
Sökrutor kan lägga stor funktionalitet till din webbplats medan du ser bra ut. Välj en ruta som matchar det övergripande temat på din webbplats och blandar in, men utan att dölja det helt och hållet.
Om du vill se ännu fler bra sökrutor, kolla in Design Shack-galleriet.
Bildkälla: Sökboks av Jamie Syke.