Formularer
Autocomplete & søgeforslag
Autocomplete — søgeforslag der dukker op mens man skriver — er gået fra at være en luksus til at være en forventning. Men det er svært at ramme rigtigt: et flertal af sites får detaljerne forkert. Her er evidensen, best practices og faldgruberne, inkl. hvordan feltet gøres tilgængeligt.
Definition
Et mønster hvor søgefeltet, efterhånden som der tastes, foreslår hele søgeord eller -sætninger (query-forslag) og evt. konkrete produkter eller kategorier. Feltet bygges teknisk som en »combobox«, så forslagene kan vælges med både mus, tastatur og skærmlæser.
Hvorfor det virker
Søgeforslag er ikke længere en »nice-to-have«. Nielsen Norman Group beskriver dem som »et forventet tegn på en velfungerende søgning« — i høj grad fordi brugerne er vant til Googles søgefelt og tager samme adfærd med sig til dit site.2
Funktionen er udbredt, men sjældent gjort rigtigt: autocomplete findes på 80% af e-handelssites, men kun 19% implementerer alle detaljerne korrekt. Der er altså meget at hente i selve udførelsen — ikke bare i at have funktionen.1
Kvaliteten af forslagene er alt. NN/g er kontante: »Foreslåede søgninger, der giver nul resultater eller irrelevante resultater, er værre end ubrugelige.« Et dårligt forslag sender brugeren på et sidespor og irriterer — så et forslag skal altid pege på reelle resultater.2
Selv når forslag tilbydes, vælges de langtfra altid — i e-handelsstudier blev et tilbudt forslag valgt i ca. 23% af tilfældene. Alligevel har de værdi som stavehjælp og som en indikation af, hvad der findes at søge efter.2
Berigede forslag (billeder, produkter, kampagner) bliver ofte overset: i NN/g’s studie blev de brugt 7 ud af 60 gange, hvor de optrådte. Brugerne er i »søge-modus«, ikke browse-modus — de simple tekstforslag er dem, der reelt bærer funktionen.3
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Søgning er en central måde at finde indhold eller produkter på, og katalog eller ordforråd er stort nok til, at stavning og formulering er en reel forhindring.
- Du kan garantere, at de foreslåede søgninger rent faktisk fører til resultater — tomme forslag skader mere end de hjælper.
- Du kan implementere korrekt tastatur- og skærmlæser-adgang (combobox-ARIA); ellers udelukker forslagene en del af brugerne.
Hvornår du bør undgå det
- Ved meget lille eller fladt indhold, hvor en almindelig menu eller filtrering er hurtigere end at taste.
- Hvis forslagene kun kan bygges på tvivlsomme data og risikerer at sende brugeren mod søgninger uden resultater.
Best practices
Hold listen kort
Vis højst omkring 10 forslag på desktop og færre på mobil (mål 4–8). Flere end det giver valg-lammelse: brugerne enten ignorerer forslagene eller bruger urimeligt lang tid på at læse dem. De fleste vælger alligevel blandt de første få.1
Vis kun forslag, der giver resultater
Hvert forslag skal føre til en side med relevante resultater. Forslag, der ender i nul eller irrelevante resultater, er værre end ingen forslag — de spilder tid og undergraver tilliden til søgningen.2
Behold de simple tekstforslag — og navngiv de berigede
Fjern ikke de rene tekstforslag, selvom du tilføjer produkter eller billeder; brugerne bruger tekstforslagene mest. Og navngiv de berigede typer eksplicit (»Seneste søgninger«, »Populære produkter«), så brugeren ikke skal gætte, hvad de ser, eller tror, det er reklame.3
Byg feltet som en combobox med korrekt ARIA
Følg W3C’s combobox-mønster: feltet får role=combobox med aria-expanded (åben/lukket) og aria-controls til forslagslisten (role=listbox); hvert forslag er en option. aria-autocomplete beskriver om forslagene matcher (list) eller også udfylder inline (both). Så virker forslagene for både tastatur og skærmlæser.4
Lad forslag navigeres uden at overskrive det tastede
Brug aria-activedescendant, så piletasterne kan flytte den fremhævede række, mens skrivemarkøren og teksten bliver i feltet — brugeren mister ikke sit input. Enter vælger, Escape lukker listen uden at ændre værdien. Undgå at fange tastetryk, der forstyrrer normal tekstredigering.4
Typiske fejl
For mange forslag — og scroll i listen
Lange lister giver valg-lammelse, og en indre scrollbar i forslagene fører til utilsigtede klik og skjult indhold. Skær ned, og lad listen passe uden scroll.
Forslag, der fører til nul resultater
Et forslag, der lander på en tom side, er værre end intet forslag. Byg kun forslag på søgninger, du ved giver resultater.
Kun mus — ingen tastatur eller skærmlæser
Et felt uden combobox-ARIA og pil/Enter/Escape-navigation udelukker brugere, der taster eller bruger skærmlæser. Tilgængelighed er ikke valgfrit her.
Berigede forslag, der drukner de simple
Produktbilleder og kampagner uden tydelig mærkning bliver overset eller læst som reklame — og skubber de tekstforslag væk, som brugerne faktisk bruger.
Eksempler i praksis
Google (ofte fremhævet)
Googles søgeforslag er den erfaring, de fleste brugere kommer med — NN/g peger på netop den vane som grunden til, at forslag i dag forventes. Ofte fremhævet for tydelig fremhævning af den foreslåede del og lynhurtige, ikke-påtrængende forslag.
Amazon (ofte fremhævet)
Ofte fremhævet for scoped forslag, hvor en søgning kan afgrænses til en kategori direkte fra forslagslisten — et eksempel på scope-forslag med egen visning oven på de almindelige query-forslag.
Ofte stillede spørgsmål
Hvad er forskellen på søgeforslag og autocomplete-i-feltet?
Søgeforslag (query-forslag) vises som en liste under feltet, som man vælger fra. »Autocomplete-i-feltet« (inline) udfylder resten af ordet direkte i feltet efter markøren. I ARIA svarer det til aria-autocomplete=»list« henholdsvis »both« — mange løsninger kombinerer begge.
Hvornår skal forslagene dukke op?
Almindelig praksis er at vente, til brugeren har tastet nogle få tegn (typisk 2–3), så listen ikke springer op ved første bogstav. Det er en designafvejning, ikke et fast tal — juster efter dit ordforråd, og hold forslagene hurtige og ikke-påtrængende.
Skal jeg vise produkter og billeder eller kun tekst?
Start med rene tekstforslag — de bruges mest. Berigede forslag (produkter, billeder) bliver ofte overset og kan opfattes som reklame; tilføj dem kun velorganiseret og tydeligt navngivet, og fjern aldrig tekstforslagene. På mobil foretrækkes typisk ren tekst.
Hvordan gør jeg søgeforslag tilgængelige?
Byg feltet efter W3C’s combobox-mønster: role=combobox med aria-expanded og aria-controls, forslagene i en listbox med options, og aria-activedescendant til at fremhæve den aktive række. Understøt pil op/ned, Enter (vælg), Escape (luk) og Home/End.
Kan forslag komme til at overskrive det, brugeren skriver?
Det er en klassisk fælde. Med aria-activedescendant flyttes fremhævningen i listen, mens teksten og markøren bliver i feltet, så input ikke går tabt. Escape skal lukke listen uden at ændre feltets værdi.
Kilder
Relaterede mønstre