Käyttötarkoitus
Käytä hero-kansikuvaa, kun haluat:
- johdattaa käyttäjän nopeasti palvelun tai sivun oleellisen sisällön pariin.
- tehdä visuaalisen vaikutuksen.
- lisätä tunnetta ulkoasuun.
Käyttöpaikat
- Laskeutumissivu
- Artikkeli
- Perussivu (poikkeustapauksissa, katso tarkemmin ohjeistuksesta)
Toiminnallisuudet
Kansikuvakomponentti koostuu seuraavista toiminnallisuuksista ja ominaisuuksista:
- Kuva: Heroista on olemassa sekä kuvallisia että kuvattomia vaihtoehtoja. Kansikuvaksi kannattaa valita sellainen kuva, josta voi rajautua osia pois, kun Drupal sovittaa kuvan eri laitekokoihin (esim. pöytäkone tai kännykkä.
- Väri: Koromuodon taustaväri on sivustolle valitun väripaletin pääväri.
- Koromuoto: Koromuotoja on kuusi erilaista (tyrsky, värinä, pulssi, syke, perus, tyyni). Koromuotoa ja väripintaa voi käyttää myös leikkaamaan kansikuvaa 45 asteen kulmassa diagonaalisessa herossa. Huom. Koromuoto valitaan sivustokohtaisesti.
- Otsikko *
- Lyhyt ingressi
- Call-to-action (CTA): Kansikuvakomponenttiin voi lisätä myös painikkeita, ja onkin suositeltavaa nostaa kansikuvaan esim. sivun tärkein linkki, jos sellainen on tiedossa. Käytä lähtökohtaisesti taustavärillistä painiketta (pääasiallinen painiketyyli).
Ohjeistus
Hero-kansikuva on tarkoitettu lähtökohtaisesti vain laskeutumissivuille ja artikkeleihin. Kansikuvia on useita erilaisia, joiden avulla sivujen ulkoasua voi vaihdella.
Samassa instanssissa suositellaan käyttämään samalla hierarkiatasolla samanlaisia hero-kansikuvia (asettelu). Se auttaa käyttäjää hahmottamaan sivuhierarkian paremmin.
Artikkeleissa suositellaan ensisijaisesti käyttämään asettelua Kuva oikealla.
Mobiilissa kaikki kuvalliset hero-kansikuvat näyttävät samalta.
Hero perussivulla
Heroa ei yleensä suositella käytettäväksi perussivulla. Poikkeuksellisesti heroa voi käyttää perussivulla, jos kyseessä on esimerkiksi kampanjasivun tai muun aihekokonaisuuden kokoaminen yhteen (esim. rokotuksista kertova sivukokonaisuus, jolla ei ole erillistä laskeutumissivua). Heroa ei ole tarkoitettu perussivulle, joten mieti aina tarkkaan, onko se aivan välttämätön siellä.
Huomioi nämä asiat, jos käytät heroa perussivuilla:
- Jos perussivulla on vasen navigaatio, älä käytä hero-elementtiä. Hero aiheuttaa silloin käytettävyys- ja saavutettavuusongelman, koska sivun pääotsikko (H1) ja kuvaus ovat sivun vasemmassa yläreunassa ja näiden jälkeen luetaankin navigaatio eikä itse sivun sisältöä.
- Kirjoita ingressi perussivun kohtaan "ingressi", ja jätä heron tekstiosio tyhjäksi. Drupal hakee metakuvaukseen perussivuilla ingressin tekstin mutta ei heron tekstiä (laskeutumissivuilla haetaan heron teksti). Metakuvaus näkyy esim. hel.fin sisäisessä haussa.
Erityisohjeita diagonaalisen heron käyttöön
Diagonaalisen heron käytössä kannattaa noudattaa harkintaa, koska se on erityisen näyttävä mutta haasteellinen kuvien valinnan ja asettelun kannalta. Alun perin ajatuksena olikin, että diagonaalista heroa käytettäisiin lähinnä ensimmäisen tason sivuilla.
Muista aina testata heron kuvavalintaa sekä mobiili- että pöytäkonenäytöillä. Erityisen tärkeää tämä on diagonaalisen heron kanssa, koska siinä kuvan rajaukset muuttuvat paljon. Diagonaalisen heron kanssa toimii parhaiten kuva, jossa tärkeimmät asiat ovat kuvan keskellä. Useampi ihminen toimii yleensä paremmin kuin yksittäinen ihminen.