Etusivu: Sisällöntuottajanopas
Etusivu: Sisällöntuottajanopas
Valikko

Traficom.fi-pääsivustolla käytetään niin sanottua megamenua. Muilla sivustoilla on käytössä yksinkertaisempi navigaatioratkaisu.

Tällä sivulla kuvataan, miten sivustorakenne koostetaan konseptinmukaisesti. Olemassaolevien sivustojen rakenteita on kuvattu tarkemmin omilla sivuillaan. 

Yleinen kuvaus sivustojen rakenteesta

Pääsivustot ja erillissivustot rakentuvat jatkossa yhteisen konseptin ja pohjarakenteen mukaisesti. Sivustojen yleinen rakenne suunnitellaan niin, että päävalikosta siirrytään laskeutumissivuille, joita on kahden tyyppisiä: pääteeman laskeutumissivu sekä alateeman laskeutumissivu. Laskeutumissivuilta siirrytään sisältösivulle. Sisältösivuilla on käytössä sivunavigaatio. 

Päävalikko

Päävalikkoja on jatkossa käytössä kahden tyylisiä: perinteinen yksinkertaisempi navigaatio, sekä megamenu-valikko. Yksinkertaisempaa navigaatiota käytetään erillissivustoilla, megamenu-valikkoa Traficom.fi-pääsivustolla sekä tarvittaessa myös muilla pääsivustoilla. 

Yksinkertaisempi navigaatio (erillissivustot)

Traficomin erillissivustoilla käytetään yksinkertaisempaa versiota navigaatiosta. Tässä versiossa päävalikon osiota painamalla avautuu alasvetovalikko, jossa osion alisivut ovat listattuna. Valikossa ei käytetä ikoneja tai tarkenteita. Erillissivustojen sisältö on useasti suppeampi, kuin pääsivustojen, jolloin yksinkertaisempi valikkorakenne palvelee käyttäjiä paremmin. 

Kuva päivitetystä navigaatiosta lisätään tälle sivulle syksyllä 2025. 

Huomioitavaa erillissivustojen navigaation suunnittelussa

Navigaatio tulee suunnitella huolellisesti, jotta sivuston käytettävyys on hyvä. 

  • Päävalikon otsikkotekstit tulee pitää lyhyinä ja ytimeikkäinä. Ei lauseita, pitkiä yhdyssanoja tai pitkiä yhdistelmiä. 
  • Navigaation päävalikkoon mahtuu noin kuusi tai seitsemän otsikkoa. 
  • Testaa navigaation rivittymistä pienillä ruuduilla, esimerkiksi tabletilla. Erikokoisia laitteita voi emuloida myös liikuttamalla selainikkunan kokoa. Rivittyminen tekee navigaatiosta vaikeammin luettavan, joten mitä vähemmän otsikkoja, sen parempi. 
  • Yhden päävalikon osion alla voi olla maksimissaan 10 sivua valikossa. Tämän jälkeen valikko on avautuessaan liian pitkä, mikä haittaa käytettävyyttä. 

Megamenu-valikko

Tässä versiossa päävalikon osiota painamalla avautuu isompi, visuaalinen elementti, jonne on listattu valikkokohdan alta löytyvät teemat ikonilla ja selitteellä. 

Laskeutumissivut

Pääteeman laskeutumissivua käytetään, kun teemalla on alateemoja. Se toimii osana rakennetta ja esittelee alateemat, sekä niiden suosituimmat sisällöt.

Alateeman laskeutumissivua käytetään pääteeman alaisilla teemoilla. Alateeman laskeutumissivua käytetään myös sellaisilla pääteemoilla joilla ei ole alateemoja, esimerkiksi Traficom.fi raideliikenteen laskeutumissivut. Alateemalla ei koskaan voi olla alateemaa. 

Teemaan kuuluvat sivut listataan alateeman laskeutumissivuilla otsikoittain. Kun käyttäjä avaa jonkin sisältösivun, siirtyvät teeman sivut ja otsikot sivunavigaatioon sivun vasempaan laitaan. 

Alateeman laskeutumissivu voi esiintyä myös kokonaisuudella, jolla on vain vähän sivuja. Tällöin sivuille ei tarvitse antaa yhteistä otsikkoa. Sivut listautuvat tällöin laskeutumissivulla ja sivunavigaatiossa ilman otsikkoa. Alateeman rakenteessa ei kuitenkaan voi olla samaan aikaan tilannetta, jolloin teemaan kuuluu sivuja, joilla ei ole yhteistä otsikkoa, ja sivuja, joilla on yhteinen otsikko. 

Mobiilinavigaatio

Mobiilinavigaatio toimii aina samalla tavalla, riippumatta siitä, minkälainen päävalikko sivustolla on käytössä. Navigaatiossa näytetään ensin päävalikon otsikot, jonka jälkeen nuolista liikkumalla voi siirtyä rakenteessa syvemmälle. Valikossa pääsee myös taaksepäin. Valikon ylin painike osoittaa aina edelliselle tasolle. 

Sivunavigaatio esitetään mobiililaitteilla osana päänavigaatiota. Jos avaat sisältösivulla ollessasi päävalikon, valikko näyttää sinulle millä sisältösivulla olet ja missä kohtaa rakennetta. 

Havainnekuva mobiilinavigaation toiminnasta
Päivitetty