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.
- Nimeä hakukenttä selkeästi, jotta käyttäjä ymmärtää, mitä tietoa kentässä haetaan. Esimerkiksi "Hae opiskelijaravintoloita" tai "Hae palvelu- tai asiointipistettä" ovat selkeitä ja ohjaavia tekstejä.
- Kerro täyttöohjeessa, minkälaisia hakutekijöitä kenttään voi antaa. Älä kirjoita täyttöohjetta kentän nimilappuun.
- Jos hakutoiminto on tarve erottaa selkeästi sivun muista sisällöistä, aseta sille vaalea taustaväri.
- Anna tarvittaessa haulle otsikko ja esittelyteksti.
Esimerkki yksinkertaisesta hausta, jolla voi hakea koko sivustolta.
<TextInput
addonAfter={
<Button iconBefore={<IconUiMagnifyingGlass />} variant="primary">
Hae
</Button>
}
className="kds-max-w-screen-sm"
labelText="Hae koko sivustolta"
/>
Esimerkki, jossa hakukentällä on täyttöohje ja värillinen tausta.
<Box appearance="solid" variant="light">
<TextInput
addonAfter={<Button variant="primary">Hae</Button>}
className="kds-max-w-screen-sm"
helpText="Hae kunnan nimellä."
labelText="Hae opiskelijaravintoloita"
/>
</Box>
Esimerkki, jossa haulla on otsikko ja esittelyteksti.
<Box appearance="solid" variant="primary">
<Heading as="h3" size={2} mt={0}>
Opiskelijaravintolat
</Heading>
<Text>Hausta löydät kaikki opiskelijaravintolat, joista saa tuettuja aterioita.</Text>
<TextInput
addonAfter={<Button variant="primary">Hae</Button>}
className="kds-max-w-screen-sm"
helpText="Tee haku kunnan nimellä."
labelText="Hae opiskelijaravintoloita"
/>
</Box>
Sivustokohtainen haku
Jos kyseessä on kaikkia sivuston sisältöjä koskeva haku, joka on käytettävissä palvelun kaikilla sivuilla, haku kannattaa sisällyttää palvelun yläpalkkiin. Tällöin se erottuu yksittäisellä sivulla olevasta kyseiseen sivuun liittyvästä hakuelementistä.
<>
<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={<IconUiMagnifyingGlass size="s" className={iconClassName} />}
addonAfter={<Button className={btnClassName}>Hae</Button>}
/>
</form>
)}
/>
</MainBarActionGroupItem>
<MainBarActionGroupItem className="kds-flex lg:kds-hidden">
<MainBarAction icon={<IconUiMagnifyingGlass />}>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>}
/>
<TableV2>
<TableV2Head>
<TableV2HeadRow>
<TableV2HeadCell>Kunta</TableV2Header>
</TableV2HeadRow>
</TableV2Head>
<TableV2Body>
<TableV2Row>
<TableV2Cell>Akaan kaupunki - Akaan hyvinvointikeskus, Torkontie 2, 37800 Akaa</TableV2Cell>
</TableV2Row>
<TableV2Row>
<TableV2Cell>Akaan kaupunki - Palveluneuvonta, Torkontie 2, 37800 Akaa</TableV2Cell>
</TableV2Row>
<TableV2Row>
<TableV2Cell>Alavieskan kunta - Asiointipiste, Pappilantie 1, 85200 Alavieska</TableV2Cell>
</TableV2Row>
</TableV2Body>
</TableV2>
</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>
</>
Aputoiminnot
Käytettäessä päivämääriä haun rajaamiseen, voi olla hyödyllistä tarjota aputoimintoja useimmin käytettyjen hakuehtojen syöttämiseen.
Esimerkissä kuluva kuukausi, edellinen kuukausi ja edeltävät kaksi kuukautta voidaan asettaa hakuehdoksi painikkeiden avulla.
function SearchExample() {
const [value, setValue] = useState();
const today = new Date();
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
const firstDayOfPreviousMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
const lastDayOfPreviousMonth = new Date(today.getFullYear(), today.getMonth(), 0);
const firstDayOfMonthBeforePreviousMonth = new Date(today.getFullYear(), today.getMonth() - 2, 1);
function formatDate(date) {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${day}.${month}.${year}`;
}
const separator = <span className="kds-mx-2 kds-text-muted">|</span>;
const helpers = (
<>
<Button
appearance="link"
onClick={() => setValue({ from: formatDate(firstDayOfMonth), to: formatDate(lastDayOfMonth) })}
>
Kuluva kuukausi
</Button>
{separator}
<Button
appearance="link"
onClick={() => setValue({ from: formatDate(firstDayOfPreviousMonth), to: formatDate(lastDayOfPreviousMonth) })}
>
Edellinen kuukausi
</Button>
{separator}
<Button
appearance="link"
onClick={() =>
setValue({ from: formatDate(firstDayOfMonthBeforePreviousMonth), to: formatDate(lastDayOfPreviousMonth) })
}
>
Edeltävät 2 kuukautta
</Button>
</>
);
return (
<>
<Heading mt={0}>Hae päätöksiä</Heading>
<SelectionGroup labelText="Mitä haluat hakea?" required>
<Radio name="mitä haluat hakea" labelText="Kaikkia työntekijöitä koskevat päätökset" defaultChecked />
<Radio name="mitä haluat hakea" labelText="Yhtä työntekijää koskevat päätökset" />
</SelectionGroup>
<Column className="kds-w-3/4 kds-mt-6">
<DateRangePickerV2
helpers={helpers}
helpText="Voit hakea kuluvana vuonna ja kahtena sitä edeltävänä vuonna annettuja päätöksiä."
labelText="Aikaväli"
onChange={(dateRangeValue) => {
setValue(dateRangeValue);
}}
required
value={value}
/>
<Button variant="primary">Hae päätökset</Button>
</Column>
</>
);
}
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>
</>