SearchInput (Hakukenttä)
Hakukentän avulla käyttäjä voi etsiä tarvitsemaansa sisältöä sivustolta tai sovelluksesta hakusanoja käyttäen. Hakukenttä on käyttäjän tukena, mikäli hän ei löydä etsimäänsä sisältöä navigoimalla.
Saavutettavuus ja käytettävyys
- Suurennuslasi-ikoni on yleisesti tunnettu tunniste hakutoiminnolle, ja siksi sitä ei ole välttämätöntä yhdistää visuaalisesti sanaan 'haku'. Ruudunlukijalle kerrotaan kuitenkin toiminnon nimi komponenttiin saavuttaessa.
- Hakukenttää kannattaa käyttää, sillä useimmat käyttäjät hyötyvät siitä, että he voivat etsiä sisältöä sivustolta tai sovelluksesta.
- Jos toteutuksen kokonaisuus on pieni ja yksinkertainen (single page ratkaisu), hakukenttää ei kuitenkaan tarvitse välttämättä käyttää.
- Anna hakukentälle aina otsaketieto. Otsaketieto voidaan piilottaa visuaalisesti, mutta ruudunlukijakäyttäjälle otsake on tärkeä tieto hänen saapuessaan komponenttiin. Otsaketiedosta tulee selvitä haun konteksti, kuten "Hae sivustolta" tai "Hae toimipakkoja".
Mistä komponentti koostuu
Hakukenttä, johon käyttäjä syöttää hakutermin tai -termit, on yhdistetty komponentti (hakukenttä, hakupainike ja hakusanan poistopainike). Tehty haku vie käyttäjän hakusivulle, jossa hakutulos näytetään. Hakukentässä käytetään ohjeistavaa kenttätekstiä (placeholder text), mutta se toimii ainoastaan visuaalisena lisänä näkeville käyttäjille. Kun hakukenttään on syötetty sisältöä, käyttäjälle näytetään hakupainike sinisellä painiketaustalla sekä hakusanan poistopainike, joka sijaitsee hakupainikkeen vasemmalla puolella. Komponentit ovat erikseen fokusoitavissa ja niihin pääsee näin navigoimaan myös näppäimistöllä.
Koko ja käyttö
Kirjoitettu hakuteksti on mahdollista poistaa kokonaan käyttämällä poistopainiketta. Hakupainikkeen painaminen tai hakusanan valitseminen näppäimistön enter-painikkeella vie käyttäjän hakusivulle, jossa näytetään hakutulokset. Mahdollinen uusi haku voidaan tehdä hakusivulla.
Hakukentän tulee olla leveydeltään minimissään 290 px. Hakukentän tekstialueen suositusleveys on minimissään 230 px, joka toteutuu komponentin 290 px kokonaisleveydellä. Tähän kokoon mahtuu hyvin yleisimpiin hakutilanteisiin riittävät hakuehdot. Kapeimmilla mobiilinäytöillä leveyttä rajoittavat sivumarginaalit, jolloin komponentin minimileveys on 290px.
Pienikokoisilla näytöillä hakukomponentin tulee aueta koko header-palkin päälle peittäen alleen muun headersisällön. Hakukomponentin tulee tällöin olla pienennettävissä erillisestä "Sulje" -painikkeesta. Mobiililaitteilla hakupalkki pysyy näkyvissä, vaikka käyttäjä klikkaa/täppää sisältöalueelle.
Komponentille voidaan antaa myös lista hakuehdotuksista, jotka näytetään valikossa hakukentän alapuolella. Hakuehdotukset auttavat käyttäjää löytämään sopivan hakusanan tai sisällön.
Komponentti käyttöliittymässä
Suomi.fi:n sivustohakukomponentti sijaitsee ylätunnisteessa kaikkialla verkkopalvelussa. On suositeltavaa asettaa hakukenttä osaksi ylätunnistetta. Hakukenttä voi sijaita lisäksi myös muualla käyttöliittymässä, mikäli käyttäjän on tarpeellista hakea sisältöä vain tietyssä kontekstissa (esim. dokumenttien haku).
Sivulla näkyvien tietojen, kuten listojen ja taulukoiden suodatukseen käytetään lähtökohtaisesti tekstikenttää. Poikkeuksena tilanteet, joissa tietoja haetaan ja suodatetaan samalla toiminnolla.