| Info |
|---|
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. |
| Innehållsförteckning |
|---|
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
-
...
Search är en komponent som används specifikt för sök, med specifik placeholdertext och ikon med förstoringsglas.
Innehållsförteckning
| Innehållsförteckning |
|---|
Komponentkällor
1177
Inera
Designspecifikation
Observera att sökfältet ser olika ut i mobil för Inera och 1177. I komponenten för 1177 sitter inputfält och knapp ihop med varandra, för Inera är de separata.
Tillgänglighet
| Info |
|---|
Tillgänglighetsinformation uppdateras inom kort. |
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
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | |
|---|---|
Senast uppdaterad |