Banneri

Bannerikomponentilla voit tehdä korostettuja nostoja esimerkiksi teemakokonaisuuden tärkeimpään palveluun.

Käyttötarkoitus

Käytä banneria kun:

  • korostat käyttäjälle tiettyä sisältöä
  • haluat kiinnittää käyttäjän huomion
  • ohjaat käyttäjää eteenpäin palveluihin

Toiminnallisuudet

Voit lisätä bannerikomponenttiin seuraavat kentät:

  1. Otsikko (pakollinen)
  2. Lyhyt kuvausteksti
  3. Painike (valittavissa kolme eri tyyliä)
  4. Kuvitusikoni tukemaan viestin sisältöä

 

Bannerikomponentista on olemassa kaksi erilaista vaihtoehtoa:

  • Tasattu vasemmalle (ensisijainen väri taustalla)
  • Tasattu vasemmalle, toissijainen väri

Ohjeistus

Komponentin taustaväri määräytyy sivulle valitun väriteeman mukaisesti, voit valita siihen joko ensisijaisen värin tai toissijaisen värin. Aiemmin pystyi valitsemaan bannerin tekstin vasemmalle tasattuna tai keskitettynä, mutta nykyään bannerien tekstit ovat aina vasemmalle tasattuja.

Bannerissa on usein linkki. Suosituksena on lisätä banneriin vain yksi painike. Painikkeita käytetään erityisesti, kun ohjataan asiakkaita palveluihin. Käytä lähtökohtaisesti taustavärillistä painiketta (pääasiallinen painiketyyli). Mikäli sinulla on tarve lisätä useampia painikkeita, voit valita ensisijaisen painikkeen lisäksi myös secondary-painikkeen (painike, jolla on vain reunukset) tai taustattoman version.

Eri painiketyylien avulla voidaan korostaa käyttäjälle tärkeimpiä ohjauksia. Jos harkinnan jälkeen päädyt ohjaamaan käyttäjän useampaan osoitteeseen, lisää linkit tällöin hierarkiajärjestyksessä tekstipalstaan, ja jätä linkille erikseen tarkoitettu kenttä tyhjäksi.

Banneri vai perusteksti? 

Kognitiivisen saavutettavuuden kannalta hyvin otsikoitu ja selkeä perussisältö toimii aina parhaiten. ​​Ethän siis kirjoita banneriin sivun perussisältöä, eli samanarvoista tekstiä kuin ympärillä, tai pitkiä tekstikappaleita. Poimi sen sijaan banneriin vain jokin lyhyt kohta, jota haluat korostaa sisällöstä.​

Käytä banneria harkiten: joskus visuaalinen korostus voi aiheuttaa sen, että sisältöä ei koeta osaksi sivun pääsisältöä ja sivun sisällön kokonaisuuden silmäiltävyys kärsii. 

Esimerkki bannerista linkillä

Esimerkki vasemmalle tasatusta bannerista, jossa on taustalla sivun ensisijainen väri. Tähän variaatioon sinun on mahdollista valita myös ikoni, mutta ikonien käytön kanssa kannattaa noudattaa harkintaa.

Esimerkki tiivistelmästä bannerissa

Esimerkissä banneria on käytetty kokoavan tiivistelmän esittämiseen.  Tässä esimerkissä on käytetty toissijaista väriä.

Katso esimerkkibanneri katujen talvikunnossapidon omalta sivulta.