Yleistä
Kelan ja Kannan verkkopalveluissa esiintyvät hakutoiminnot noudattavat pääsääntöisesti kahta eri mallia: yksinkertaista ja tarkkaa hakua.
Yksinkertainen haku sisältää yhden hakukentän, kun taas tarkassa haussa kenttiä ja hakuehtoja voi olla useampia.
Yksinkertaisen ja tarkan haun erottelu on viitteellinen. Käytännössä verkkopalvelut sisältävät yleensä sekä yksinkertaisia että tarkkoja hakutoimintoja.
Huomioi hakutoiminnallisuuksien suunnittelussa ja toteutuksessa myös lomakkeiden suunnittelumalli.
- Otsikoi hakuvaihtoehdot selkeästi
- Näytä hakutulosten määrä tulosten yhteydessä
- Hyödynnä asiakkaiden palautetta hakutulosten kehittämisessä
Rakenne
Haun ja suodatuksen rakenne ja asettelu seuraa käyttäjän käyttöpolkua:
- Haku
-
Suodatus
- Järjestely
- Lopulliset hakutulokset
<>
<div className="kds-w-3/4">
<Heading as="h3" mt={0}>
Asiakirjahaku
</Heading>
<TextInput
labelText="Henkilötunnus"
required
placeholder="010203-123AB"
addonAfter={<Button variant="primary">Hae</Button>}
className="kds-w-3/4 kds-pr-8"
/>
<Heading as="h4">Rajaa tuloksia</Heading>
<Row className="kds-w-3/4">
<InputGroup className="kds-mb-0">
<InputLabel htmlFor="asiakirjan-tyyppi-1">Asiakirjan tyyppi</InputLabel>
<Select id="asiakirjan-tyyppi-1">
<option>(valitse)</option>
<option>PDF</option>
<option>Text</option>
<option>Excel</option>
</Select>
</InputGroup>
<InputGroup className="kds-mb-0">
<InputLabel htmlFor="päätöksen-lopputulos-1">Päätös</InputLabel>
<Select id="päätöksen-lopputulos-1">
<option>(valitse)</option>
<option>Käsittelyssä</option>
<option>Hyväksytty</option>
<option>Hylätty</option>
</Select>
</InputGroup>
</Row>
<Heading as="h4">Hakutulokset (3)</Heading>
<InputGroup className="kds-w-3/4 kds-pr-8">
<InputLabel htmlFor="järjestä-1">Järjestä</InputLabel>
<Select id="järjestä-1" defaultValue={1}>
<option>(valitse)</option>
<option>Uusin ensin</option>
<option>Vanhin ensin</option>
<option>Suosituin ensin</option>
</Select>
</InputGroup>
</div>
<Box p={0}>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h5" size={5} mt={0} mb={2}>
Hakutulos 1
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.4.2018</DescriptionListItem>
<DescriptionListItem label="Lisätieto">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
<Box p={0}>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h5" size={5} mt={0} mb={2}>
Hakutulos 2
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">12.6.2020</DescriptionListItem>
<DescriptionListItem label="Lisätieto">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
<Box p={0}>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h5" size={5} mt={0} mb={2}>
Hakutulos 3
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">11.12.2024</DescriptionListItem>
<DescriptionListItem label="Lisätieto">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
</>
Yksinkertainen haku
Yksinkertainen haku koostuu yhdestä hakukentästä ja painikkeesta.
<TextInput labelText="Hakusana" placeholder="Kirjoita hakusana" addonAfter={<Button variant="primary">Hae</Button>} />
Yksinkertaista hakua käytetään tyypillisesti kansalaisille suunnatuissa verkkopalveluissa (esim. kela.fi, kanta.fi ja tietotarjotin.fi).
Yksinkertaisen haun yleisin käyttötarkoitus on tietyn asiasisällön etsiminen sivustolta.
Jos yksinkertainen haku koskee koko sivustoa, se tyypillisesti asetetaan päänavigaation yhteyteen, esimerkiksi yläpalkkiin (Mainbar).
- Aseta hakukenttä selkeästi havaittavalle paikalle, esimerkiksi sivun yläosaan.
- Esitä tarvittaessa linkki myös tarkennettuun hakuun yksinkertaisen hakukentän yhteydessä.
- Yksittäisessä hakukentässä sijoita ”Hae”-painike hakukentän viereen.
- Varmista, että käyttäjä ymmärtää, mihin sisältöön haku liittyy.
Toimintokohtainen haku
Yksinkertainen haku mielletään yleensä kokoa sivustoa koskevaksi elementiksi. Jos yksinkertainen haku liittyy tiettyyn toimintoon, on olennaista, että käyttäjä ymmärtää mihin sisältöön haku liittyy.
Jos käyttöliittymän tiettyyn toiminnallisuuteen liittyy erillinen sisäinen hakutoiminto, toimintokohtaisen haun tulee erottua selkeästi muista hakutoiminnoista, esimerkiksi koko sivustoa koskevasta hausta.
<>
<MainBarContainer>
<Container maxWidth="2xl" gx={2} fluid>
<MainBar stackOnMobile as="div" shadow={false}>
<MainBarActionGroup useGroupItems={true}>
<MainBarActionGroupItem className="kds-hidden lg:kds-flex">
<MainBarSearchV2
search={({ searchClassName, inputClassName, btnClassName, iconClassName }) => (
<form className={searchClassName}>
<InputLabel htmlFor="sivustohaku" className="kds-sr-only">
Etsi sivustolta
</InputLabel>
<Input
id="sivustohaku"
type="text"
size="sm"
className={inputClassName}
placeholder="Kirjoita hakusana"
addonBefore={<IconMagnifyingGlass size="s" className={iconClassName} />}
addonAfter={<Button className={btnClassName}>Hae</Button>}
/>
</form>
)}
/>
</MainBarActionGroupItem>
<MainBarActionGroupItem className="kds-flex lg:kds-hidden">
<MainBarAction icon={<IconMagnifyingGlass />}>Haku</MainBarAction>
</MainBarActionGroupItem>
</MainBarActionGroup>
</MainBar>
</Container>
</MainBarContainer>
<div className="kds-mx-6">
<Heading as="h3">Hae palvelupistettä</Heading>
<TextInput
labelText="Kunnan nimi tai postinumero"
className="kds-mt-12 kds-w-2/4"
addonAfter={<Button variant="primary">Hae</Button>}
/>
<Table>
<TableHead>
<TableHeadRow>
<TableHeader>Kunta</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Akaan kaupunki - Akaan hyvinvointikeskus, Torkontie 2, 37800 Akaa</TableCell>
</TableRow>
<TableRow>
<TableCell>Akaan kaupunki - Palveluneuvonta, Torkontie 2, 37800 Akaa</TableCell>
</TableRow>
<TableRow>
<TableCell>Alavieskan kunta - Asiointipiste, Pappilantie 1, 85200 Alavieska</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</>
Tarkka haku
Tarkennetussa haussa käyttäjä voi määrittää erilaisia hakuehtoja. Hakukriteerejä voivat olla esimerkiksi aihe, aihekategoria, päivämääräväli tai tiedostotyyppi.
Kelan ja Kannan palveluissa tarkkaa hakua käytetään etenkin asiantuntijakäyttöön suunnatuissa käyttöliittymissä (esim. käsittelyjärjestelmät, käsittelyn tukijärjestelmät ja erilaiset kumppaneille tarjottavat palvelut).
- Otsikoi hakuehdot selkeästi.
- Tarjoa käyttäjän kannalta olennaiset oletushakuehdot.
- Varmista, että haun suorittaminen ei tyhjennä käyttäjän syöttämiä hakuehtoja.
- Käytä listamaisten hakuvaihtoehtojen esittämiseen valintalistaa (Select tai Multiselect).
Hakuelementit ja asettelu
Jos hakukenttiä on useita, kentät asetellaan allekkain ja “Hae”-painike sijoitetaan kaikkien hakukenttien alapuolelle omalle rivilleen.
”Tyhjennä hakukentät” -painiketta kannattaa yleensä soveltaa vain silloin, kun sen käyttö on palvelun käyttäjän näkökulmasta perusteltua. Tyhjennystoiminto esitetään pääsääntöisesti toisen tai kolmannen tason painikkeena ”Hae”-painikkeen vieressä.
<>
<Heading mt={0}>Tiedostohaku</Heading>
<InputGroup>
<TextInput labelText="Tiedoston nimi" />
<Row>
<Column>
<InputGroup>
<InputLabel htmlFor="tiedoston-tyyppi-1">Tiedoston tyyppi</InputLabel>
<Select id="tiedoston-tyyppi-1">
<option>PDF</option>
<option>Text</option>
<option>Excel</option>
</Select>
</InputGroup>
</Column>
<Column>
<InputGroup>
<InputLabel htmlFor="julkaisuvuosi-1">Julkaisuvuosi</InputLabel>
<Select id="julkaisuvuosi-1">
<option>2019</option>
<option>2020</option>
<option>2021</option>
</Select>
</InputGroup>
</Column>
</Row>
</InputGroup>
<Button variant="primary">Hae</Button>
<Button variant="primary" appearance="outline" className="kds-ml-4">
Tyhjennä valinnat
</Button>
</>
Otsikointi
Otsikoi hakukokonaisuus selkeästi. Hakutoiminnallisuus on suositeltavaa nimetä siten, että otsikosta käy ilmi haun käyttötarkoitus (esim. Lääkehaku, Lomakehaku, Reseptihaku).
Otsikko voi olla myös tarvittaessa muodossa ”Hae reseptejä” tai ”Hae maksukieltojen palautuksia”.
Nimeä erikseen myös kaikki yksittäiset hakukentät. Kuitenkin esimerkiksi hakua rajaavien päivämäärien syöttökenttiin voi viitata yhteisellä otsikoinnilla ”Hae ajalta” tai ”Ajanjakso”.
<>
<Heading mt={0}>Asiakirjahaku</Heading>
<Column className="kds-w-3/4">
<DateRangePickerV2 labelText="Aikaväli" required />
<TextInput labelText="Henkilötunnus" required placeholder="011275-XXXX" className="kds-w-3/4" />
<InputGroup className="kds-w-3/4">
<InputLabel htmlFor="Asiakirjatyyppi-1">Asiakirjatyyppi</InputLabel>
<Select id="Asiakirjatyyppi-1" defaultValue={0}>
<option value="0">Päätös</option>
<option value="1">Hakemus</option>
<option value="2">Luonnos</option>
</Select>
</InputGroup>
<Button variant="primary">Hae</Button>
</Column>
</>
Hakuehtojen valinta ja esittäminen
Selvitä, mitkä hakukriteerit ovat käyttäjälle olennaisia.
Rajaa tarjotut hakuehdot vain käyttäjän kannalta hyödyllisimpiin ehtoihin. Kaikkia ”teknisesti mahdollisia” valintoja ei siis yleensä tarvitse sisällyttää osaksi hakua.
Vähän hakuehtoja
Jos hakuehto koostuu kahdesta tai kolmesta eri valintamahdollisuudesta, vaihtoehdot kannattaa yleensä esittää valintaruutujen (Checkbox) ja valintanappien (Radio) avulla.
<>
<Heading mt={0}>Tiedostohaku</Heading>
<InputGroup>
<TextInput labelText="Tiedoston nimi" className="kds-w-2/4" />
</InputGroup>
<SelectionGroup labelText="Versioiden kattavuus">
<Radio name="versioiden kattavuus" labelText="Hae vain uusin versio" defaultChecked />
<Radio name="versioiden kattavuus" labelText="Hae kaikki versiot" />
</SelectionGroup>
</>
Paljon hakuehtoja
Jos hakuehtoon sisältyviä valintoja on enemmän kuin kolme, listamainen esitystapa (Select tai Multiselect) tuottaa usein selkeimmän lopputuloksen.
<>
<Heading mt={0}>Perushakuehdot</Heading>
<InputGroup row>
<InputLabel htmlFor="asiakirjan-cda-tyyppi" required>
Asiakirjan CDA-tyyppi
</InputLabel>
<Select id="asiakirjan-cda-tyyppi" defaultValue={0} required>
<option value="0">Potilasasiakirjat</option>
<option>Lorem</option>
<option>Ipsum</option>
</Select>
</InputGroup>
<InputGroup row>
<InputLabel htmlFor="lisävalinta-1" required id="additional-info">
Lisävalinta potilasasiakirjoille
</InputLabel>
<Select id="lisävalinta-1">
<option value="0">Valitse...</option>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
</Select>
</InputGroup>
</>
Oletusvalinnat
Oletusvaihtoehtojen tulee perustua tunnistettuihin käyttäjätarpeisiin. Esimerkiksi listamaisesti koottujen hakuehtojen oletusvalintana kannattaa esittää se vaihtoehto, joka todennäköisimmin vastaisi käyttäjän tyypillistä valintaa, esimerkiksi.
- haettavan sisällön kieli: “suomi”,
- julkaisuvuosi: “tämä vuosi”,
- asiakirjatyyppi: “päätös”,
- näytettävät reseptit: “lääkettä jäljellä”
Oletusvalinnat myös ohjaavat hakua. Jos jotkin hakuehdot tarjotaan oletuksena, niitä myös hyvin todennäköisesti käytetään.
Huomaa, että käyttäjän kannalta väärin asetettu oletusvalinta voi usein hidastaa ja hankaloittaa haun käyttöä merkittävästi.
<>
<Heading mt={0}>Asiakirjahaku</Heading>
<InputGroup className="kds-w-2/4">
<InputLabel htmlFor="julkaisuvuosi-2">Julkaisuvuosi</InputLabel>
<Select id="julkaisuvuosi-2" defaultValue={0}>
<option value="0">2024</option>
<option value="1">2023</option>
<option value="2">2022</option>
</Select>{" "}
</InputGroup>
<InputGroup className="kds-w-2/4">
<InputLabel htmlFor="Asiakirjatyyppi-2">Asiakirjatyyppi</InputLabel>
<Select id="Asiakirjatyyppi-2" defaultValue={0}>
<option value="0">Päätös</option>
<option value="1">Hakemus</option>
<option value="2">Luonnos</option>
</Select>
</InputGroup>
<SelectionGroup labelText="Asiakirjan kieli">
<Checkbox labelText="Suomi" defaultChecked />
<Checkbox labelText="Ruotsi" />
<Checkbox labelText="Englanti" />
</SelectionGroup>
<Button variant="primary" className="kds-mt-6">
Hae
</Button>
</>
Hakutulosten määrän ilmoittaminen
Hakutulosten määrä kannattaa ilmoittaa mahdollisimman lähellä haun ja suodatuksen elementtejä.
Usein käytetty tapa tulosten kokonaismäärän esittämiseen on ilmaista määrä hakutulosten otsikossa.
<>
<Heading as="h4" mt={0}>
Hakutulokset (34)
</Heading>
<SelectionGroup labelText="Asiakirjan tila">
<div className="kds-flex kds-mb-4">
<Radio name="asiakirjan-tila-1" labelText="Kaikki (34)" className="kds-mr-4 kds-mt-2" />
<Radio name="asiakirjan-tila-1" labelText="Käsittelyssä (12)" defaultChecked className="kds-mr-4" />
<Radio name="asiakirjan-tila-1" labelText="Hylätty (22)" />
</div>
</SelectionGroup>
</>
Yksinkertaisessa haussa hakutulosten määrän voi ilmoittaa osana sisältötekstiä. Teksti kuvaa tulosten määrän lisäksi myös hakuun sovelletun hakuehdon.
<>
<Heading as="h4" mt={0}>
Hakutulokset
</Heading>
<Text>
Löydettiin <strong>34</strong> hakutulosta hakusanalla "opinto"
</Text>
</>
Hakutulosten esittäminen
Hakutulosten esittämisessä tärkeintä on ilmoittaa käyttäjälle mikä on haun tulos.
Yksinkertainen haku
Yksinkertainen haku perustuu usein laajaan hakutulosjoukkoon, jolloin kaikki käyttäjälle esitettävät hakutulokset eivät välttämättä täysin vastaa haettua aihetta. Käyttäjä voi kuitenkin halutessaan tarkentaa hakutuloksia esimerkiksi suodatuksen avulla.
Hakua vastaavat sanat tai fraasit voidaan korostaa tuloslistauksessa esimerkiksi korostusvärillä tai tekstin lihavoinnilla. Parhaiten hakukriteerejä vastaava tulos näytetään tuloslistauksessa ensimmäisenä.
Jos yksinkertainen haku toimii sivuston pääasiallisena hakutyökaluna, haun tuottamat tulokset esitetään aina omalla sivullaan.
Tarkka haku
Tarkan haun tuottamiin tuloksiin sovelletaan usein erilaisia suodatus- tai järjestelytoimintoja. Tuloslistauksen kannalta on tärkeintä esittää käyttäjälle tulosten kokonaismäärä sekä käytettyjen suodatinten vaikutus tuloksiin.
<>
<Heading as="h4" mt={0}>
Hakutulokset (34)
</Heading>
<SelectionGroup labelText="Asiakirjan tila">
<div className="kds-flex kds-mb-4">
<Radio name="asiakirjan-tila-2" labelText="Kaikki (34)" className="kds-mt-2 kds-mr-4" />
<Radio name="asiakirjan-tila-2" labelText="Käsittelyssä (12)" className="kds-mr-4" defaultChecked />
<Radio name="asiakirjan-tila-2" labelText="Hylätty (22)" />
</div>
</SelectionGroup>
<Box p={0}>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h5" size={5} mt={0} mb={2}>
Hakutulos 1
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">1.4.2018</DescriptionListItem>
<DescriptionListItem label="Lisätieto">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
<Box p={0}>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h5" size={5} mt={0} mb={2}>
Hakutulos 2
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">12.6.2020</DescriptionListItem>
<DescriptionListItem label="Lisätieto">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
<Box p={0}>
<Box variant="primary" appearance="solid" m={0}>
<Heading as="h5" size={5} mt={0} mb={2}>
Hakutulos 3
</Heading>
</Box>
<Spacing base={4} sm={6}>
<DescriptionList stack>
<DescriptionListItem label="Päivämäärä">11.12.2024</DescriptionListItem>
<DescriptionListItem label="Lisätieto">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit"
</DescriptionListItem>
</DescriptionList>
</Spacing>
</Box>
</>