Käyttötarkoitus
Käytä banneria kun:
- ohjaat käyttäjää eteenpäin palveluihin
- korostat käyttäjälle tiettyä sisältöä
- haluat tehdä aiheeseen liittyvän infolaatikon tai tiivistelmän
Toiminnallisuudet
Voit lisätä bannerikomponenttiin seuraavat kentät:
- Tyyli *
- Otsikko *
- Kuvitusikoni tukemaan viestin sisältöä
- Lyhyt kuvausteksti
- Linkki
- Linkin tyyli *
Komponentin käyttöpaikat
- Toimipistesivun ylempi ja alempi sisältöalue
- Palvelusivun ylempi ja alempi sisältöalue
- Perussivun ylempi ja alempi sisältöalue
- Laskeutumissivu
- Uutinen
- Artikkeli
Ohjeistus
Bannerikomponentista on kaksi erilaista vaihtoehtoa:
- Tasattu vasemmalle (ensisijainen väri taustalla)
- Tasattu vasemmalle, toissijainen väri
Komponentin taustaväri määräytyy sivulle valitun väriteeman mukaisesti. Banneriin voi valita joko ensisijaisen värin tai toissijaisen värin. Suosituksena on valita ensimmäiseen banneriin ensisijainen väri. Jos sivulle tulee kaksi banneria, kannattaa toiseen valita toissijainen väri.
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 reunustettua linkkiä (toissijainen painiketyyli) tai korostetun linkin.
Banneriin sinun on mahdollista valita myös ikoni, mutta ikonien käytön kanssa kannattaa noudattaa harkintaa. Käytä ikonia, vain jos on aiheeseesi tai tarkoitukseesi erityisen sopiva ikoni.
Bannerin tavallisin käyttötarkoitus on ohjata käyttäjä eteenpäin linkistä (call-to-action eli CTA). Banneria voi myös käyttää esimerkiksi kokoavan tiivistelmän esittämiseen tai infolaatikkona. Infolaatikoita käytetään erityisesti artikkeleissa.
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ä.
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.
Esimerkkejä bannerista linkillä (CTA)
Esimerkit vasemmalle tasatusta bannerista, jossa on taustalla sivun ensisijainen väri (ensimmäinen esimerkki) ja toissijainen väri (toinen esimerkki).
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.