Navigaatio ja valikot
Verkkosivuston navigaatiolla tarkoitetaan sitä, miten sivusto ohjaa kävijää liikkumaan helposti paikasta toiseen. Selkeät navigaatiot ovat erityisen tärkeitä saavutettavuuden takia.
Hel.fi-sivustolla on käytössä useita erilaisia valikkoja, joista useimmiten käytetään nimitystä navigaatio eli navi. Valikkojen lisäksi voit ohjata käyttäjän oikeaan paikkaan linkityksillä.
Hel.fi-sivuston valikot toimivat eri tavalla pöytäkoneella ja mobiililaitteilla. Suurin osa hel.fin käyttäjistä käyttää sivustoa mobiililaitteella.
Pöytäkoneen navigaatiot
- Meganavigaatio kokoaa yhteen eri pääosiot (esim. Asuminen). Meganavigaatiossa näkyvät osiot sekä niiden navigaation toinen taso. Pöytäkoneella meganavigaatio on oikeasta yläkulmasta avautuva ns. hampurilainen ja se toistuu samanlaisena kaikilla sivuilla. Etusivulla meganavi toistuu myös ylävalikossa.
- Ylävalikko on kyseisen pääosion (esim. Asuminen) valikko. Se sisältää pääosion navigaation kaksi ensimmäistä tasoa. Etusivulla ylävalikossa näkyvät pääosiot ja niiden navigaation toinen taso.
- Sivuvalikko on käytössä perussivuilla sivun vasemmassa laidassa. Sivuvalikossa näkyy alaosion oma valikko kokonaisuudessaan. Voit myös piilottaa sivuvalikon "Valikon asetuksista" (Drupalin oikea sivupalkki), mutta käytettävyyden ja saavutettavuuden takia se kannattaa yleensä pitää näkyvissä.
- Navin toisinto korvaa sivunavigaation laskeutumissivuilla. Käytä silloin navigaationa linkkilistaa otsikolla "Tällä sivustolla". Varmista, että laskeutumissivun navin toisinnossa sivut ovat samassa järjestyksessä kuin muissakin navigaatioissa. Se on tärkeää käytettävyyden ja saavutettavuuden kannalta.
Mobiililaitteiden navigaatiot
- Mobiilivalikko eli ns. hampurilainen: oikeasta yläkulmasta avautuva mobiilinavi korvaa kaikki pöytäkoneen navigaatiot paitsi linkkilistana toteutetun navin toisinnon, joka on sama sekä pöytäkoneella että mobiilissa.
Usein kysyttyä navigaatiosta
Navigaation paino määrittää, missä järjestyksessä sivulinkit menevät navigaatiossa. Pienemmällä painolla olevat valikkokohdat näytetään ennen suurempipainoisia.
Käytä painoina kymmenlukuja. Esim. ylin sivulinkki 10, toiseksi ylin 20 ja kolmanneksi ylin 30. Tämä mahdollistaa sen, että jos myöhemmin tulee tarvetta lisätä uusi sivu valikon keskelle, niin sille voi valita painoksi jonkin välinumeron eikä kaikkien sivujen painoja tarvitse vaihtaa.
Jotta kieliversion otsikko näkyy oikealla kielellä valikossa, tulee varmistaa kaksi kohtaa Drupalin oikeasta sivuvalikosta kohdasta "Valikon asetukset". Valikon linkin otsikko tulee olla oikealla kielellä. Lisäksi tulee aktivoida julkaistuksi valintakytkin, jossa lukee "Julkaistu päävalikossa" ja "Valinta julkaisee sivun koko hel.fin pää- ja mobiilivalikkoon. Aseta valinta julkaistu-tilaan, kun valitset yltä Näytä sivusto valikossa. Sivu ei näy päävalikossa eikä mobiilivalikossa ilman tätä valintaa".
Voit tehdä. Tällöin jätät valitsematta Drupalin oikean sivupalkin kohdasta Valikon asetukset vaihtimen "Näytä sivu valikossa".
On kuitenkin hyvä varmistaa, että sivun saavutettavuus säilyy.
Saavutettavuuskriteerit:
2.4.5 Sivulle pitää löytää useampaa eri reittiä, ellei se ole osa jotain prosessia (esim. lomakkeen 2. sivu). Eri reittejä/tapoja on mm. haku, ylänavigaatio, linkkaus toiselta sivulta, sivukartta, linkkilista. Myös sivun navigaation pitää pysyä selkeänä käyttäjälle.
Alasivua ei pidä julkaista, jos sen yläpuolella olevia sivuja ei ole julkaistu. Julkaisemattomat tasot aiheuttavat käytettävyys- ja saavutettavuusongelmia.
Huomioithan tämän myös kieliversioiden kanssa eli myös isäntäsivulla tulisi olla kieliversiot, jos alasivulla on.
Suositus on, että kullakin valikon tasolla olisi korkeintaan seitsemän osiota. Erityisen tärkeää tämä on hel.fin valikon kahdella ensimmäisellä tasolla , jotta meganavigaatio pysyy hallittavan kokoisena silmäiltäväksi.
Perustelluista syistä voit poiketa tästä suosituksesta alemmilla tasoilla. Esimerkiksi asiakkaiden tiedonhankinnan kannalta on selkeintä, että kaikilla ulkoilualueilla on omat sivunsa, vaikka ulkoilualueita on enemmän kuin seitsemän.
URL-osoite
URL-osoite on verkkosivuston tai -sivun osoite Internetissä. Mitä yksinkertaisempi sivun URL-osoite on, sitä käyttäjäystävällisempi, saavutettavampi ja löydettävämpi sivu on. Oleellisin osa on sivua kuvaava osa:
https://www.hel.fi/fi/kaupunkiymparisto-ja-liikenne/pysakointi
Näin muodostat sivun osoitteen:
- Jos sivulla on hero-elementti, osoite muodostuu automaattisesti sen otsikko-kentästä. Jos sivulla ei ole hero-elementtiä, osoite muodostuu sivun otsikko-kentästä. Osoitetta voi muokata manuaalisesti osoitealias-kentässä.
- Poista erikoismerkit, kuten !, & ja ;.
- Korvaa välilyönnit lyhyellä viivalla, esim. hel.fi/fi/kaupunkiymparisto-ja-liikenne.
- Käytä ainoastaan pieniä kirjaimia.
- Tiivistä tarvittaessa poistamalla tarpeettomat sanat.
Huom! Hel.fi:ssä käytetään ensisijaisesti hel.fi-päätteisiä osoitteita. Kaupungilla on kuitenkin myös niin sanottuja erillissivuja, jotka ovat .helsinki tai .hel.fi -päätteisiä. Osoitteen valinnassa tulee noudattaa yhteisiä periaatteita.
Osoitteen hakukoneoptimointi:
Sivun osoite näkyy hakutulossivulla ja siksi osoiterivin tulisi auttaa käyttäjää hahmottamaan, mitä sivu pitää sisällään. Osoitteen tulisi olla myös merkitykseltään selkeä. Esim: https://www.hel.fi/fi/kasvatus-ja-koulutus/stadin-ammatti-ja-aikuisopisto-teollisuuskadun-toimipaikka
Hakusanan löytymisellä osoitteesta on pieni positiivinen vaikutus sijoitukseen hakutulossivulla, mutta siihen ei tule pyrkiä käytettävyyden tai luettavuuden kustannuksella.
Lisätietoja osoitteen hakukoneoptimoinnista löydät sisällöntuottajan SEO-ohjeistuksesta (Linkki johtaa ulkoiseen palveluun) .
Selkeä URL-rakenne tuottaa selkeitä linkkejä
Selkeän osoitteen tärkeys korostuu linkkijaoissa. Esimerkiksi jotkut sosiaalisen median kanavat jakavat linkkien osoitteet sellaisenaan. Selkeä URL-rakenne auttaa käyttäjää ymmärtämään, minne hän siirtyy linkkiä klikkaamalla.
Esim: https://www.hel.fi/FI/kasvatus-ja-koulutus/lukiokoulutus/kallion-lukio/
vs. https://www.hel.fi/FI/title/746923840/?ref_ttesl_hdh_ep1
Hel.fi:n sekä erillissivustojen (esim. historia.hel.fi) osoitteet toimivat sekä ääkkösten kanssa että ilman ääkkösiä. Osoitteen ensisijainen, eli virallinen, versio on aina ääkkösetön. Ääkkösellinen versio ohjaa käyttäjän ääkkösettömään versioon.
Esimerkki:
Kestävä Helsinki -sivuston virallinen osoite on kestava.helsinki. Kestävä.helsinki on ohjaava osoite, joka vie käyttäjän osoitteeseen kestava.helsinki.
Suosimme ääkkösetöntä versiota, sillä ääkköset eivät ole käytössä kansainvälisesti. Näin varmistamme sivuston sujuvan käytön myös esimerkiksi ulkomailta sekä laitteilla, joiden näppäimistöissä ei ole ääkkösiä.
Lue lisätietoja ääkkösten käyttämisestä verkkotunnuksessa Traficomin-sivuilta (Linkki johtaa ulkoiseen palveluun) .
Viestinnässä ja markkinoinnissa voit käyttää osoitteesta sekä ääkkösellistä että ääkkösetöntä versiota.
Esimerkkejä:
Hel.fi-sivut:
- Lisää tietoa aiheesta löydät pysäköinnin sivulta.
- hel.fi/pysakointi TAI hel.fi/pysäköinti
Murupolku:
- Etusivu > Kaupunkiympäristö ja liikenne > Pysäköinti
Erillissivustot
- Lisää tietoa aiheesta löydät Kestävä Helsinki -sivustolta.
- kestava.helsinki TAI kestävä.helsinki
Drupal luo sivuille automaattisesti URL-osoitteen otsikon ja sen perusteella, missä sivu sijaitsee navigaatiossa. Osoitetta ei normaalisti tarvitse muokata itse.
Jos olet kuitenkin julkaisemassa uutta sisältöä ja haluat julkaista sen samassa URL-osoitteessa kuin jo olemassa olevan sisällön, tee seuraavasti:
- Muokkaa vanhan sivun URL-osoitetta: muokkaa vanhan sivun osoitetta kohdassa Osoitealias. Poista valinta kohdasta "Luo osoitealias", jolloin pääset muokkaamaan osoitealiasta. Kirjoita URL-osoitteen loppuun esimerkiksi "-vanha". Esim. /.../hammashoito-vanha. Jos olet pian julkaisemassa uuden sivun, voit jo asettaa vanhan sivun luonnokseksi. Tallenna sivu.
- Poista vanhalta sivulta uudelleenohjaus vanhaan URL-osoitteeseen: kun muokkasit sivun URL-osoitetta, Drupal loi uudelleenohjauksen muokatusta URL-osoitteesta vanhaan URL-osoitteeseen. Tämä uudelleenohjaus pitää poistaa. Siirry kohtaan Osoiteuudelleenohjaukset. Paikanna sivun edellinen osoite, esimerkissä /../hammashoito. Avaa alasvetovalikosta kohta "Poista" ja poista vanha osoite. Tallenna sivu uudelleen.
- Aseta uudelle sivun vanhan sivun URL-osoite: siirry muokkaamaan uutta julkaistavaa sivua. Jos uutta sivua ei ole vielä asetettu paikalleen navigaatioon, lisää se oikeaan paikkaan ja tallenna. Siirry tämän jälkeen kohtaan Osoitealias. Jos uuden sivun otsikko on identtinen vanhan kanssa ja siirsit sivun omalle paikalleen navigaatiossa vasta lopuksi, osoite voi olla jo oikea. Jos osoitealias ei ole oikea, poista valinta kohdasta "Luo osoitealias" ja muokkaa URL-osoite oikeaksi. Esimerkissä /.../hammashoito. Tallenna.
- Muista kieliversiot: toista vaiheet 1. - 3. kieliversioille tarpeen mukaan soveltaen.
Huomioitavaa julkaisussa:
- Vanhaan sisältöön linkkityökalulla tehdyt sisäiset linkit menevät rikki, kun se luonnostetaan. Jos uuteen sisältöön halutaan samat linkit, ne pitää käydä korjaamassa kaikille sivuille ja kieliversioille, jotka ohjasivat sisäisellä linkillä vanhaan sisältöön. URL-pohjaiset linkit mm. muista instansseista ja erikseen tilatut lyhytosoitteet eivät mene rikki.
- Uuden sivun alasivujen osalta kannattaa tarkistaa, että linkkipolku näyttää kokonaisuudessaan oikealta. Jos uusien alasivujen URL-osoite on väärän mallinen, voit korjata osoitteen näin:
- Jos alasivulle ei ole annettu käsin alias-osoitetta (kohdan 1. tavalla), riittää että avaat sivun muokkaustilaan ja tallennat sen uudelleen.
- Jos alasivulle on annettu käsin alias-osoite, palauta valinta Luo osoitealias ja tallenna sivu.
- Muista luonnostaa myös vanhan osion alasivut. Tarvittaessa voit toistaa niille vaiheet 1. - 3., jos myös alasivujen rakenne säilyy ja alaosoitteiden halutaan pysyvän samoina.
Sisältöalueet
Laita sivun sisällöt pääosin ylemmälle sisältöalueelle.
Alempi sisältöalue on varattu lisätiedoille ja pois sivulta vieville linkityksille. Alemmalle sisältöalueelle voit nostaa linkkejä esimerkiksi ulkoisille sivustoille, joilla kerrotaan aiheesta lisää.
Alempi sisältöalue on leveämpi kuin ylempi sisältöalue.
Vasempaan sivupalkkiin voit laittaa tekstipalstan tai uudelleenkäytettävän lohkon.
Huomioi, että tämä osio jää herkästi kävijältä huomaamatta erityisesti mobiilissa, jossa tämä sivupalkki siirtyy sivun loppuun. Tärkeät sisällöt, esim. tärkeät linkit, kannattaa siis sijoittaa muille sisältöalueille.
Väripaletti ja koromuoto
Hel.fi-sivustolle on määritelty kokoelma erilaisia väripaletteja, jotka ovat tärkeä osa sivuston yhtenäistä ilmettä. Uusia sivuja rakentaessa sivun ylläpitäjä voi valita sivustolle väripaletin kymmenestä eri vaihtoehdosta.
Väripaletit koostuvat kolmesta eri väristä: ensisijaisesta väristä, toissijaisesta väristä ja aksenttiväristä. Ensisijaiset värit ja aksenttivärit perustuvat kaupungin väripalettiin, ja toissijaiset värit ovat vaaleampia versioita kaupungin väripaletista.
Väripaletin voi valita teemakohtaisesti (Senioripalvelut, Terveyspalvelut, Pysäköinti jne.) ja ne valitaan Drupalin oikeasta sivupalkista väripaletti-kohdasta. Jos et valitse sivuille väriteemaa, Drupal-sisällönhallintajärjestelmä määrittelee sivulle automaattisesti perusväriteeman “Vaakuna”.
Joissain tapauksissa voi olla perusteltua käyttää eri väripalettia teeman eri sivuilla, kun esimerkiksi luodaan tunnistettavia ja mielekkäitä sivustokokonaisuuksia. Tästä on hyvä keskustella UX-suunnittelijoiden kanssa. Jos et tiedä mitä väriteemoja omassa teemassasi on käytössä tai kaipaat tukea väriteeman valintaan, keskustele muiden hel.fi tuoteomistajien ja UX-suunnittelijoiden kanssa.
Katso esimerkkejä eri väripaleteista:
Kulttuuri ja vapaa-aika: sivulla käytetään Kesä-väripalettia.
Sosiaali- ja terveyspalvelut: sivulla käytetään Vaakuna-väripalettia.
Kasvatus ja koulutus: sivulla käytetään Metro-väripalettia.
Osallistu ja vaikuta: sivulla käytetään Engel-väripalettia.
Väripaletin lisäksi sivuilla käytetään Helsingin graafisista elementeistä koromuotoja, joita on kuusi erilaista. Koromuodot ovat saaneet inspiraationsa Helsingin vaakunasta.
Koromuotoja käytetään Hel.fi-sivustolla kansikuvissa (hero) ja alatunnisteessa. Kullekin instanssille voidaan valita vain yksi koromuoto.
Katso esimerkkejä eri väripaleteista:
Etusivu: sivustolla käytetään Perus-koromuotoa.
Asuminen: sivustolla käytetään Pulssi-koromuotoa.
Kaupunkiympäristö ja liikenne: sivustolla käytetään Värinä-koromuotoa.