Ylätunnisteella tarkoitetaan palvelun jokaisella sivulla näkyvää kokonaisuutta, joka tyypillisesti sisältää palvelun logon sekä erilaisia navigaatio- ja valintatyökaluja.
Kelan ja Kannan verkkopalveluissa käytetään ylätunnisteena tyypillisesti MainBar-komponenttia.
Ylätunnisteeseen sijoitettaville kuvakkeiden yhteydessä tulee olla myös näkyvä tekstivastine saavutettavuuden takaamiseksi. Esimerkiksi kielivalikon yhteydessä tulee näyttää tekstimuodossa, mikä kieli on valittuna.
Varmista, että ylätunniste sisältää samat toiminnot eri kokoisilla näytöillä.
Hyödynnä SkipLink-komponenttia, joka ohjaa esim. ruudunlukijakäyttäjät suoraan sivuston sisältöön ohittamalla ylätunnisteen.
Asettele logo aina ylätunnisteen vasempaan reunaan.
Varmista, että logo toimii linkkinä palvelun etusivulle.
Sisällytä ylätunnisteeseen vain tarpeellisimmat, koko palvelua koskevat toiminnot.
Palvelun nimi
Kannan palveluissa vasen yläreuna on varattu logolle. Koska tilaa on rajallisesti, palvelun nimeä ei tule MainBarissa asettaa logon perään. Palvelun nimen voi näyttää joko erillisessä nimipalkissa tai sivupalkissa (Sidebar).
Nimipalkki
Nimipalkki mahdollistaa pitkän nimen näyttämisen tekstimuodossa.
Nimipalkkia voi soveltaa palveluissa, joilla ei ole palvelun nimeä kuvaavaa omaa logoa (esimerkiksi OmaKanta) ja joissa ylätunniste on koko sivun levyinen.
Sivupalkki
Logo asetaan sivupalkkiin niissä palveluissa, jossa navigaatiorakenteen pääelementtinä käytetään Sidebar-komponenttia.
Esimerkiksi kielivalinnat ja kirjautumistoiminnot esitetään tällöin kuitenkin ylätunnisteessa (MainBar). Näin esimerkiksi kirjautuneen henkilön nimen näyttämiseen on riittävästi tilaa.
Pienemmillä näytöillä navigaatioelementit piilotetaan yleensä valikkopainikkeen taakse. Valikkopainikkeen paikka on tällöin ylätunnisteen oikeassa reunassa.
Kirjautumistoiminnot näytetään tyypillisesti ylätunnisteessa. Esimerkiksi uloskirjautuminen voidaan kuitenkin sijoittaa ylätunnisteen lisäksi myös valikkopainikkeen (hampurilaisvalikko) takaa avautuvaan näkymään.
Ylätunnisteessa näytettävien ja valikon taakse piilotettujen toimintojen ryhmittelyssä ja hierarkiassa kannattaa muistaa, etteivät kaikki käyttäjät välttämättä päädy etsimään toimintoja hampurilaisvalikosta.
Keskeisimmät toiminnot (esim. kielivalinta) kannattaa pyrkiä sijoittamaan niin, etteivät toiminnot jää piiloon valikkopainikkeen taakse, jotta käyttäjä havaitsee ne ilman ylimääräisiä klikkauksia.
Palvelun logolla on ylätunnisteessa kaksi tehtävää: logo toimii samanaikaisesti sekä brändielementtinä että linkkinä etusivulle. Logon asettelussa ja koon määrittelyssä tulee huomioida riittävä suoja-alue ja muut visuaalisen ilmeen ohjeet.
Kelan ja Kannan verkkopalveluissa käytettävät logot on koottu Kelan ja Kannan logot -sivulle.
Esimerkki Kelan logon suoja-alueesta.
Esimerkki Kannan logon suoja-alueesta.
Kirjautumistoiminnot
Palveluun kuuluvat kirjautumistoiminnot asetetaan ylätunnisteen oikeaan yläreunaan. Leveillä näytöillä toiminnon yhteydessä näytetään myös palveluun kirjautuneen asiakkaan etu- ja sukunimi.
Ylätunnisteeseen sijoitettujen toimintojen määrä kannattaa pitää maltillisena. Esimerkiksi kirjautumistoiminnon ohessa näkyvä käyttäjän nimi saattaa sisältää paljon merkkejä.
Vakiintunut paikka kielivalikolle on MainBarin oikeassa reunassa sijaitsevassa työkalupalkissa
Tyypillisesti kielivalinta ilmoitetaan ylätunnisteessa siten, että nykyinen valittu kieli näytetään valintakuvakkeen oikealla puolella tekstimuodossa (esim. suomi, svenska, english).
Kielivalikko tulee näyttää ylätunnisteessa siten, että käyttäjä voi tunnistaa toiminnon helposti myös ilman tekstiä esimerkiksi kuvakkeen avulla. Käyttäjän pitää voida tunnistaa toiminto kielivalinnaksi myös vieraskielisessä sivustonäkymässä.
Jos kielivalintoja ei ole mahdollista sijoittaa esimerkiksi MainBariin, mobiilinäkymässä kielivalinnat voi tapauskohtaisesti näyttää pelkässä hampurilaisvalikossa. Huomaa, että tämä voi kuitenkin heikentää valintatoimintojen löydettävyyttä.
Navigaatio
Ylätunnisteeseen voi asettaa tarvittaessa myös navigaatioelementtejä (sivuston rakenteesta riippuen).
Välilehtiin pohjautuvan päänavigaation voi toteuttaa TabNav-komponentin avulla.
Tätä mallia käytetään tyypillisesti sivustoilla, joissa tietosisältöä on jaettu eri osioihin esimerkiksi käyttäjäryhmän perusteella (Henkilöasiakkaat/Työnantajat).
Jos ylätunniste ei sisällä työkaluja (esim. kielivalinnat tai kirjautuminen), MainBar voi toimia palvelun päänavigaatioelementtinä. MainBarissa linkit toteutetaan MainBarAction-komponentin avulla.
Jos MainBar sisältää sekä työkaluja että linkkejä, elementit on ryhmiteltävä siten, että ne erottuvat selkeästi toisistaan.
Linkkeihin perustuva navigaatiota voi tyypillisesti soveltaa esimerkiksi Kelan ja Kannan sisäisissä palveluissa ja järjestelmissä.
Mobiilinäkymässä käytetään usein puurakenteeseen perustuvaa navigaatiota, joka esitetään sisällön päälle avautuvassa overlay-näkymässä.
Avattuna overlay-valikko peittää sivun sisällön, jolloin käyttäjä ei näe samanaikaisesti sekä sivun sisältöä että navigaatiota. Varmista siksi esimerkiksi sivun otsikoinnin ja murupolun avulla, että käyttäjä ymmärtää missä kohtaa sivustoa hän kulloinkin on.
Mobiilinäkymässä puuvalikkorakenne kuvaa yhdellä silmäyksellä sivuston koko navigaation sisällön ja hierarkian. Valikon rakenteen tulee olla sisällöllisesti sama, vaikka navigaatio olisi toteutettu eri elementeillä desktop- ja mobiilinäkymiin.
Haku
Koko verkkopalvelua koskeva yleishaku sijoitetaan yleensä osaksi ylätunnistetta. Näin käyttäjä voi hyödyntää hakua helposti jokaisella sivulla. Haun paikka on tyypillisesti ylhäällä sivun oikeassa reunassa.
Hakukentän voi asettaa näytön koosta riippuen joko MainBarin sisä- tai ulkopuolelle. Jos tilaa on käytössä rajallisesti, hakukentän voi määrittää avautumaan MainBarin alapuolelle.
Koko sivustoa koskevan ilmoituksen (esim. häiriötiedotteen) voi tarvittaessa esittää ylätunnisteessa Alert-komponentin avulla.
Ylätunnisteeseen liitetty virheilmoitus voidaan näyttää joko sivuston kaikilla sivuilla tai ainoastaan etusivulla. Tarvittaessa ilmoituksen voi näyttää myös kertaluonteisesti vain sillä sivulla, jolle käyttäjä saapuu esimerkiksi hakukoneen kautta.
Jos ylätunnisteeseen asetettu virheilmoitus näkyy kaikilla sivuilla, varmista että käyttäjä voi halutessaan sulkea ilmoituksen.
Virheilmoitus sijoitetaan aina MainBarin alapuolelle.
Jos ylätunnisteessa käytetään sekä MainBaria että TabNavia, koko sivustoon liittyvä virheilmoitus asetetaan näiden väliin.
