Linkit

Mikä on linkki?

Linkit ovat siirtymiä. Linkki voi siirtää käyttäjän palvelun sisällä uuteen näkymään, toiseen kohtaan saman näkymän sisällä (ns. ankkurilinkki) tai kokonaan uuteen palveluun.

KDS tarjoaa erilaisiin tarpeisiin erilaisia linkkikomponentteja

• Tavallinen tekstilinkki sopii käytettäväksi silloin, kun linkkiä ei ole tarpeen erityisesti korostaa. Tavallista linkkiä voi käyttää myös leipätekstin seassa.
• Korostettu linkki sopii tilanteisiin, joissa linkin tulee kiinnittää käyttäjän huomio.
• Linkki lisätietotekstillä sopii käytettäväksi silloin, kun linkin yhteydessä halutaan antaa lisätietoa sen sisällöstä.

Linkkien nimeäminen

Nimeä linkit kuvaavasti ja napakasti. Käyttäjän tulee ymmärtää, mihin linkki johtaa ja mitä tietoa sen takaa löytyy. Jos linkit muodostavat listan tai ryhmän, nimeä kaikki ryhmässä olevat linkit samalla tyylillä.

Olennaisiin avainsanoihin perustuva nimeäminen helpottaa sisällön silmäilyä. Myös ruudunlukijan käyttäjälle tärkeää, että linkistä toiseen liikkuminen käy sujuvasti. Linkkitekstin ymmärtäminen ei tällöin edellytä esimerkiksi linkkiä ympäröivän tekstin lukemista.

Jos linkki johtaa verkkopalvelun ulkopuolelle, siirtymän tulee käydä ilmi linkkitekstistä. Voit esimerkiksi mainita linkissä sivuston nimen tai www-osoitteen. Älä kuitenkaan käytä linkkitekstinä pelkkää www-osoitetta.

Milloin linkki, milloin painike?

Lähtökohtaisesti linkit ovat siirtymiä ja painikkeet käynnistävät toimintoja. Joskus käyttäjän kannalta merkittävä toiminto voi kuitenkin olla pelkkä siirtymä. Seuraavassa ohjeita näiden tilanteiden ratkaisemiseksi.

Prosessia eteen- ja taaksepäin vievät painikkeet

Painikkeet ovat käyttäjän kannalta usein käyttöliittymän keskeisimpiä elementtejä. Painikkeiden avulla käyttäjä voi suorittaa asiointiprosessiin liittyviä toimintoja ja liikkua ohjatusti prosessin eri vaiheiden välillä.

Jos siirtymä vaikuttaa ratkaisevasti käyttäjän prosessin etenemiseen, siirtymä kannattaa yleensä esittää linkin sijaan toimintoa kuvaavalla painikkeella. Siirtymä näyttäytyy siten visuaalisesti samanarvoisena muiden keskeisten toimintojen kanssa.

Esimerkiksi prosessissa eteenpäin ohjaava siirtymätoiminto kannattaa yleensä esittää Seuraava-painikeen avulla.

Näissä tilanteissa voidaan käyttää painiketta eli <button>-elementtiä, joka ohjaa käyttäjää prosessissa eteenpäin. Painike sopii yhteen muiden käyttäjälle esitettävien toimintopainikkeiden kanssa ja muodostaa selkeän ja loogisen kokonaisuuden.

Painikkeen voi toteuttaa tilanteesta riippuen hieman eri tavalla. Huomioi, että <a>-elementti ja <button>-elementti toimivat eri tavoin näppäimistöllä. Painikkeen voi valita välilyönnillä tai enterillä, mutta linkki toimii vain enterillä. Varmista siis, että painikkeet toimivat loogisesti molemmilla näppäimillä. Muista myös, että ruudunlukijan käyttäjän täytyy saada tieto siitä, että näkymä on vaihtunut.

Call to action -linkit

Käyttäjän kannalta tärkeät yksittäiset linkit voi esittää niin sanottuina call to action -linkkeinä. Linkin ulkoasu on samanlainen kuin ensisijaisella painikkeella. Visuaalisesti erottuvan cta-linkin tarkoituksena on ohjata käyttäjän huomio hänen kannaltaan olennaisiin toimintoihin. Cta-linkkejä käytetäänkin esimerkiksi tärkeissä nostoelementeissä.

Vaikka cta-linkit näyttävät painikkeilta, koodissa näiden tulee olla linkkejä. Tällöin ruudunlukijat saavat tiedon siirtymästä. Kiinnitä huomiota myös cta-linkin tekstiin. Käyttäjän pitäisi tekstisisällön perusteella ymmärtää, että linkki siirtää hänet toiseen näkymään.

Jos toiminnon tyyppinä on siirtymä, cta-linkeissä käytetään nuolikuvaketta tekstin oikealla puolella. Jos cta-linkki käynnistää toiminnon, kuvaketta ei käytetä. Lue lisää kuvakkeiden ja ikonien käytöstä.

Huomioi, että samassa näkymässä ei kannata käyttää useita cta-linkkejä, vaan ne sopivat lähinnä vain yksittäisiksi nostoiksi. Jos haluat korostaa useampaa linkkiä tai kokonaista linkkilistaa, käytä mieluummin korostettua linkkiä (LinkBox).

Uuteen välilehteen avautuvat linkit

Oletuksena linkit avataan Kelan ja Kannan palveluissa samaan välilehteen.

Uuteen välilehteen avautuvat linkit ovat usein ongelmallisia esimerkiksi ruudunlukijan käyttäjille ja kognitiivisista rajoitteista kärsiville ihmisille. Siksi linkit kannattaa avata uuteen välilehteen vain erityisistä syistä.

Tilanteet, joissa linkin voi avata uuteen välilehteen:

• Käyttäjä on tunnistautunut
  Linkin voi ohjata avautumaan uuteen välilehteen esimerkiksi tilanteessa, jossa linkin avaaminen samaan välilehteen johtaisi käyttäjän kirjaamiseen ulos palvelusta (ja palaaminen ei ole mahdollista selaimen takaisin-komennolla) tai jos vaarana on, että käyttäjä unohtaa itse kirjautua ulos palvelusta. Pyri varmistamaan, että käyttäjän istunto katkeaa automaattisesti selaimen sulkemiseen tai aikakatkaisuun. Muussa tapauksessa linkit kannattaa avata uuteen välilehteen.
• Käyttäjä menettää syöttämänsä tiedot
  Jos linkin avaaminen samaan välilehteen aiheuttaisi sen, että käyttäjä menettää sivulle syötetyt tiedot, linkki kannattaa mieluummin avata uuteen välilehteen.
• Selaimen takaisin-toiminto ei toimi
  Kaikissa palveluissa selaimen takaisin-toiminto ei välttämättä toimi tavanomaisesti, jolloin käyttäjä ei pääse palaamaan aikaisemmalle sivulle. Pyri mahdollistamaan selaimen takaisin-toiminnon käyttö palvelussa. Muussa tapauksessa linkit kannattaa avata uuteen välilehteen.

Älä koskaan avaa linkkiä uuteen välilehteen vain varmuuden vuoksi. Käyttäjä voi kuitenkin itse halutessaan avata linkin uudella välilehdellä.

Varmista, että linkkien avautuminen uusille välilehdille noudattaa käyttäjän näkökulmasta johdonmukaista logiikkaa.

Uuteen välilehteen avautuva linkki merkitään kuvakkeella ja sitä kuvaavalla piilotetulla tekstiselitteellä. Näin tieto linkin tyypistä välittyy myös ruudunlukijan käyttäjälle.