Valikot ja navigaatio

Moduuli 4: Sisällön tekeminen · Lukuaika: 7 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat tehdä selkeän valikon, sekä lohkoteemassa että perinteisessä teemassa, ja tiedät mikä tekee valikosta hyvän.

Keskeiset käsitteet: navigaatiolohko, Sivustoeditori, Ulkoasu > Menu's, valikkosijainti, alavalikko, mukautettu linkki, mobiilivalikko, alatunnistevalikko, linkkiteksti, saavutettavuus

Kaksi tapaa, riippuen teemastasi

Se, missä teet valikon, riippuu teemastasi (oppitunti 5.1):

• Lohkoteema: valikko on navigaatiolohko sivuston yläosassa. Muokkaat sitä Sivustoeditorissa (Ulkoasu > Editori > Navigaatio, tai sivupohjan osassa Ylätunniste).
• Perinteinen teema: teet valikon kohdassa Ulkoasu > Menu's ja valitset siellä teeman tarjoaman valikkosijainnin, kuten "Päävalikko" tai "Alatunniste".

Jos et näe Ulkoasun alla kohtaa Menu's, vaan ainoastaan Editori? Silloin käytössäsi on lohkoteema. Tämä aiheuttaa usein hämmennystä teeman vaihdon jälkeen: "valikkoni on kadonnut". Vanha valikko on edelleen olemassa (se on tietokannassa valikkokohteiden listana), mutta uusi teema etsii sitä eri paikasta. Sivustoeditorissa voit tuoda navigaatiolohkoon olemassa olevan perinteisen valikon.

Mitä valikkoon voi laittaa

Valikkokohde voi olla:

• sivustosi sivu tai artikkeli;
• kategoria (silloin se linkittää kyseisen kategorian arkistoon);
• mukautettu linkki: mikä tahansa osoite, myös toiselle sivustolle, tai ankkuri sivun sisällä (/diensten/#prijzen);
• lohkoteemassa myös muita lohkoja navigaatiossa, kuten hakukenttä, somekuvakkeet tai painike "Varaa aika".

Valikkokohteita voi järjestää allekkain alavalikoksi: perinteisessä teemassa vetämällä niitä hieman oikealle, navigaatiolohkossa valinnalla "Lisää alavalikko" tai vetämällä kohteen toisen päälle.

Valikkokohde linkittää sivulle, mutta sillä on oma nimilappu. Jos muutat myöhemmin sivun otsikkoa, valikon nimilappu ei muutu automaattisesti mukana (perinteisessä valikossa ei koskaan, navigaatiolohkossa riippuu siitä, miten lisäsit kohteen). Tarkista siis otsikon muutoksen jälkeen myös valikko.

Hyvä valikko

Valikko ei ole koko sivustosi sisällysluettelo. Se on opaste niihin muutamiin paikkoihin, joihin useimmat kävijät haluavat mennä. Muutama ohje:

• Vähän päävalikkokohteita: suunnilleen viidestä seitsemään. Useampi ei mahdu puhelimen näytölle kunnolla, eivätkä kävijät niitä kuitenkaan lue.
• Korkeintaan yksi alavalikkotaso. Alavalikko alavalikon sisällä on puhelimessa hankala käyttää ja ruudunlukijoille sekava.
• Myös alavalikon otsikko on linkki. Monissa teemoissa klikkaus kohdasta "Palvelut" avaa alavalikon, mutta "Palvelut" on itsekin sivu. Varmista, että kyseinen sivu on olemassa ja näyttää jotain järkevää, tai tee selväksi, että kohde on pelkkä otsikko.
• Tavallisia sanoja, joita kävijät itsekin käyttäisivät: "Hinnat", ei "Sijoitusmahdollisuutemme".
• Yhteystiedot ja tärkein toiminto (ajanvaraus, tilaaminen) aina saatavilla, usein valikon oikeassa reunassa tai painikkeena.
• Lakisääteiset linkit (tietosuojaseloste, yleiset ehdot, evästeasetukset) kuuluvat alatunnistevalikkoon, ei päävalikkoon. Niiden on kuitenkin aina löydyttävä, jokaiselta sivulta (oppitunti 9.3).

Mobiili ja saavutettavuus

Puhelimessa valikko yleensä supistuu painikkeeksi, jossa on kolme viivaa ("hampurilaisvalikko"). Navigaatiolohkossa määrität, milloin näin tapahtuu (aina, vai vain pienillä näytöillä). Testaa aina oikealla puhelimella:

• Osutko jokaiseen kohteeseen peukalolla ilman että osut vahingossa viereiseen?
• Avautuvatko alavalikot napautuksella, ja sulkeutuvatko ne taas?
• Sulkeutuuko valikko, kun valitset kohteen?

Saavutettavuuden kannalta (kävijät, jotka käyttävät ruudunlukijaa tai pelkkää näppäimistöä) huomioi:

• Selkeät linkkitekstit. "Lue lisää" tai "Klikkaa tästä" ei kerro mitään, kun ruudunlukija lukee kaikki linkit peräkkäin. "Lue lisää aukioloajoistamme" sen sijaan kertoo.
• Käytettävyys näppäimistöllä: Tab-näppäimellä valikon läpi, Enterillä kohteen avaamiseen. Useimmat teemat ja navigaatiolohko hoitavat tämän hyvin; itse tehdyt skriptipohjaiset valikot usein eivät.
• Linkki toiselle sivustolle avautuu mieluiten samaan ikkunaan. Jos sen on pakko avautua uuteen ikkunaan, mainitse se linkin yhteydessä.

Muu navigaatio

Päävalikon lisäksi nämä osat auttavat kävijöitä löytämään tiensä:

• hakukenttä (hakulohko), varsinkin sivustolla jossa on paljon artikkeleita;
• murupolku ("Etusivu > Palvelut > Verkkosivujen suunnittelu"), usein SEO-lisäosan tai teeman tarjoama;
• sisäiset linkit teksteissäsi muille sivuille (hyödyllisiä myös löydettävyyden kannalta, oppitunti 9.2);
• 404-sivu, joka auttaa: hakukenttä ja linkit tärkeimmille sivuille pelkän "ei löytynyt" sijaan. Lohkoteemassa muokkaat sitä sivupohjana "404" Sivustoeditorissa.

Käytännössä: näin se näyttää paneelissa

WordPressin ohjausnäkymässä:

• Lohkoteema: Ulkoasu > Editori > Navigaatio. Valitse valikko, lisää kohteita plusmerkistä, vedä ne oikeaan järjestykseen, ja valitse navigaatiolohkon asetuksista milloin mobiilivalikko näkyy.
• Perinteinen teema: Ulkoasu > Menu's. Luo valikko, valitse vasemmalta sivuja ja klikkaa Lisää valikkoon, vedä järjestys kohdalleen, ja valitse alareunasta valikkosijainti. Tallenna.

Yhteenveto

• Lohkoteemassa teet valikon navigaatiolohkolla Sivustoeditorissa; perinteisessä teemassa kohdassa Ulkoasu > Menu's valikkosijainnin avulla.
• Valikko näyttää tien muutamaan tärkeään paikkaan: vähän kohteita, korkeintaan yksi alavalikkotaso.
• Lakisääteiset linkit kuuluvat alatunnistevalikkoon, aina löydettävissä.
• Testaa mobiilivalikko oikealla puhelimella ja käytä linkkitekstejä, jotka kertovat jotain itsekseen.
• Hakukenttä, sisäiset linkit ja avulias 404-sivu täydentävät valikkoa.

Tietovisa

Tehtävä

Tehtävä D4.3: Valikko, joka toimii. Tee (tai paranna) sivustosi päävalikko, jossa on korkeintaan seitsemän päävalikkokohdetta, yksi alavalikko ja yksi mukautettu linkki, sekä alatunnistevalikko, jossa on tietosuojaselosteesi. Testaa mobiilivalikko puhelimellasi ja pelkällä näppäimistöllä (Tab ja Enter). Merkitse mikä toimii ja kirjoita muistiin: minkä tyyppinen teema sinulla on (lohko vai perinteinen), missä teit valikon, ja minkä linkkitekstin paransit ja miten?

Lue lisää

WordPressin käytöstä itsestään meillä ei vielä ole omia artikkeleita; WordPressin virallinen dokumentaatio on kattava.

• Navigaatiolohko (wordpress.org, englanniksi): https://wordpress.org/documentation/article/navigation-block/
• Valikot perinteisissä teemoissa (wordpress.org, englanniksi): https://wordpress.org/documentation/article/appearance-menus-screen/
• Sivustoeditori (wordpress.org, englanniksi): https://wordpress.org/documentation/article/site-editor/