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
Bannerin tyylivaihtoehdot
- Tasattu vasemmalle (ensisijainen väri taustalla)
- Tasattu vasemmalle, toissijainen väri
Bannerin käyttötavat
- CTA-banneri: bannerin tavallisin käyttötapa on ohjata käyttäjä eteenpäin linkistä (call-to-action eli CTA).
- Banneri infolaatikkona tai tiivistelmänä: voit käyttää banneria myös esimerkiksi kokoavan tiivistelmän esittämiseen tai infolaatikkona. Infolaatikoita käytetään erityisesti artikkeleissa. Artikkelien infolaatikoissa kerrotaan usein aiheeseen liittyvän palvelun perustiedot.
Bannerin väri, linkit ja ikonit
Komponentin taustaväri määräytyy sivulle valitun väriteeman mukaisesti. Bannerissa on valittavana ensisijainen ja toissijainen väri. Katso alta suositukset värien käyttöön.
- Ensimmäinen call-to-action eli CTA-banneri: ensisijainen väri
- Toinen CTA-banneri: toissijainen väri
- Banneri infolaatikkona tai tiivistelmänä: 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.
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.
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.
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. Käytä laajemmassa tiivistelmä- tai infolaatikkobannerissa vaaleampaa, toissijaista väriä.
Katso esimerkkibanneri katujen talvikunnossapidon omalta sivulta.