Komponenten är responsiv. Ändra bredd på webbläsarfönstret för att se komponenten i dess olika lägen. OBS! Bred skärm samt omladdning av sidan kan behövas för att se desktopläget. Se gärna Sketchbiblioteket för referens.
Exempel
Designspecifikation
I desktop är sökfält och knapp separerade med ca 20 px avstånd. Notera att sökknappen är fyrkantig med 10 px rundade härn, till skillnad från vanliga rundade knappar.
I tablet och mobil sitter sökfält och knapp i hop med varandra.
Sökfältet finns i olika states: InActive, Active searchfield, Active button.
Do’s and Don’ts
-
Tillgänglighet
För många användare så ses sökfunktionen som det enklaste sättet att hitta något på en webbplats.
Det är vanligt att användare förväntar sig att hitta sökfunktionen högt upp på sidan. Den vanligaste placeringen är högt upp till höger på sidan. Därför är det viktigt att sökfältet tydligt framgår om den inte är placerad på uppe i högra hörnet där många användare förväntar sig att hitta sökfältet. Om sökfältet inte syns tydligt så finns risken att användaren tror att webbplatsen saknar sökfunktion. Användaren ska kunna skriva ett eller flera sökord och aktiverasökningen med en knapp som heter "Sök".
I mobilgränssnitt kan det ibland vara aktuellt att gömma sökfunktionen bakom en knapp. Undvik detta på stor skärm, eftersom det gör sökfunktionen svårare att hitta.
Research på komponenten
-
Relaterade resurser/komponenter
Status
Status | FÄRDIG VALIDERAD |
|---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |