Søgefelt

Sådan bruges komponenten

Anvendes til

Søgefeltet er en samlet komponent (søgefelt og -knap), der giver brugeren mulighed for at søge efter specifikt indhold, hvis de kender søgeordene eller ikke kan finde indholdet gennem menuer eller anden navigation.

Søgefeltet giver et alternativ til brugere, der af den ene eller anden årsag ikke kan anvende løsningens navigation.

Anvendes ikke til

På meget små løsninger eller løsninger, der kun består af en enkelt side, bør det ikke være nødvendigt med et søgefelt.

Vejledning

Det er vigtigt for brugerne, at kunne se de indtastede søgeord. En god tommelfingerregel er at søgefeltet er 27 karakterer (27ch) langt som minimum.

Sørg for at søgefeltet ligner et søgefelt.

Hvis der anvendes et lup-ikon, skal ”Søg” fremgå i koden, så skærmlæsere kan se funktionen.

Søgefeltet vises i sin helhed på løsningens hjemmeside og ikke kun som et link.

Vis fortsat søgefeltet – også på søgeresultatet, der viser søgeordene.

Brug kun avanceret søgning som valgmulighed. Den primære søgning skal være en standardsøgning for at undgå forvirring omkring dens anvendelse.

Søgeknappen skal være en submit-knap.

Sådan (do)

Sådan: Gør søgefeltet mindst 27 tegn bredt, så det kan rumme flere ord uden at skjule dele af brugerens søgestreng (Nielsen, 2002).

Ikke sådan (don't)

Ikke sådan: Lav ikke søgefeltet så smalt, at brugerne ikke kan se, hvad de har indtastet. De fleste søgninger indeholder to eller flere ord.

Sådan (do)

Sådan: Gør det nemt at finde søgefeltet. Placér det i øverste højre hjørne, hvor brugerne forventer det (Nielsen, 2001). Lad feltet være tomt (Silver, 2018, s. 268) og hvidt (Guy, 2014), så det er tydeligt, at det er et indtastningsfelt.

Ikke sådan (don't)

Ikke sådan: Undgå at placere hjælpetekster, labels eller eksempler i søgefelter. I de fleste tilfælde er de helt unødvendige. Hvis der er brug for instruktioner, så placér dem over søgefeltet.

Se komponenten i eksempelløsninger

Sagsoversigt: Find sag

Referencer

• Jakob Nielsen: Top 10 Guidelines for Homepage Usability (2002)
• Jakob Nielsen: Search: Visible and Simple (2001)
• Adam Silver: Form Design Patterns (2018)
• Tammy Guy: Usability Tip: Don’t Make Me Search for Search (2014)
• The ideal search box is 27 characters wide
• Design a perfect search box
• Best practises for search results
• The Magnifying-Glass Icon in Search Design: Pros and Cons

Installation

HTML Struktur

<div class="form-group search">
    <label for="input-type-text" class="sr-only">Søg efter indhold</label>
    <input class="form-input input-char-27" id="input-type-text" name="search-button"
        type="search">
    <button class="button button-search">
        Søg
    </button>
</div>

<div class="form-group search">
    <label for="input-type-text-icon" class="sr-only">Søg efter indhold</label>
    <input class="form-input input-char-27" id="input-type-text-icon" name="search-icon"
        type="search">
    <button class="button button-search">
        <svg class="icon-svg m-0" focusable="false" aria-hidden="true"><use xlink:href="#search"></use></svg><span
            class="sr-only">Søg</span>
    </button>
</div>

Du kan styre søgefeltets bredde via input-width- og input-char- se mere under punktet formular elementer og input bredde og validering.

Du bør som oftest implementere auto-suggest på søgefelter, så brugeren foreslås relevante søge ord/sætninger.

Ordet ”Søg” skal altid fremgå af søgeknappen. Hvis der anvendes et lup-ikon, skal ”søg” fremgå i en aria-label, så skærmlæsere kan se funktionen.

Formularens felt skal have et skjult label af hensyn til skærmlæsere.