Rakenna selkeä valikko WordPressiin

Tiivistelmä

Verkkosivuston valikko auttaa kävijää löytämään etsimänsä ja ymmärtämään, mitä sivusto tarjoaa. Kun linkit on nimetty ymmärrettävästi ja järjestetty loogisesti, yhteystiedot, palvelut ja kiinnostavat artikkelit löytyvät…

WordPressissä valikon rakentaminen onnistuu yleensä ilman ohjelmointia. Muokkaustapa riippuu käytössä olevasta teemasta, mutta suunnittelun periaatteet pysyvät samoina: valitse tärkeimmät kohteet, käytä selkeitä nimiä ja tarkista toiminta erilaisilla laitteilla.

Hyvä valikko ei synny lisäämällä siihen mahdollisimman paljon linkkejä. Se syntyy siitä, että tunnet kävijän tarpeet ja tarjoat niihin sopivat reitit.

Aloita kävijän tärkeimmistä tarpeista

Ennen WordPressin asetusten avaamista mieti, miksi ihmiset tulevat sivustollesi. Yrityksen asiakkaat saattavat etsiä palveluiden hintoja tai yhteydenottotapaa. Blogissa lukija haluaa tutustua aihealueisiin ja löytää hyödyllisiä ohjeita. Yhdistyksen sivustolla tärkeimpiä kohteita voivat olla tapahtumat ja liittymisohjeet.

Kirjoita ensin kolme tehtävää, jotka kävijän pitäisi pystyä suorittamaan helposti. Esimerkiksi:

Tutustua tarjolla oleviin palveluihin.
Selvittää palvelun hinta tai pyytää tarjous.
Löytää yhteystiedot ja ottaa yhteyttä.

Valitse päävalikon linkit näiden tehtävien perusteella. Kaikkien julkaistujen sivujen ei tarvitse näkyä sivuston yläreunassa. Yksityiskohtaisiin sisältöihin voidaan ohjata myös aihetta kokoavalta sivulta.

Pienellä sivustolla neljästä kuuteen pääkohtaa on usein käyttökelpoinen lähtökohta. Määrä on kuitenkin suunnittelun apuväline, ei ehdoton sääntö.

Nimeä valikon kohdat ymmärrettävästi

Valikkotekstin pitäisi kertoa jo ennen napsauttamista, mitä linkin takana odottaa. Tutut nimet, kuten Palvelut, Hinnasto, Blogi ja Yhteystiedot, auttavat kävijää tekemään päätöksen nopeasti.

Vältä liian yleisiä ilmaisuja, kuten Tutustu tai Lisää, jos niiden merkitys jää epäselväksi. Myös yrityksen sisäiset nimitykset voivat tuntua uudesta asiakkaasta vierailta.

Vertaa esimerkiksi seuraavia vaihtoehtoja:

”Ratkaisumaailma” → ”Palvelut”
”Ajatuksia ja näkökulmia” → ”Blogi”
”Ollaan kuulolla” → ”Yhteystiedot”
”Kaikki tarvittava” → ”Asiakasohjeet”

Persoonallisuus voi näkyä sivun sisällössä ja kuvituksessa. Valikossa kannattaa painottaa tunnistettavuutta.

Pidä nimet myös keskenään johdonmukaisina. Jos yksi kohta on lyhyt substantiivi ja toinen kokonainen mainoslause, kokonaisuudesta tulee helposti levoton. Erityisesti pitkät suomenkieliset yhdyssanat kannattaa tarkistaa puhelimen näytöllä.

Suunnittele rakenne ennen toteutusta

Kirjoita alustava valikko paperille tai tekstieditoriin. Näin huomaat päällekkäisyydet ennen kuin alat siirtää linkkejä WordPressissä.

Pienen palveluyrityksen päävalikko voisi olla:

Etusivu
Palvelut
Hinnasto
Yritys
Yhteystiedot

Palvelut-kohdan alle voidaan tarvittaessa sijoittaa muutama tarkempi palvelusivu. Jos palveluita on paljon, selkeä palveluiden esittelysivu voi olla pitkää pudotusvalikkoa helpompi ratkaisu.

Blogissa vastaava kokonaisuus voisi muodostua kohdista Etusivu, Aihealueet, Oppaat, Tietoa sivustosta ja Yhteystiedot.

Järjestä kohdat kävijän etenemisen mukaan. Ensin hän tutustuu tarjontaan, sitten selvittää yksityiskohdat ja lopuksi toimii. Aakkosjärjestys sopii hakemistoon, mutta päävalikossa tärkeys ja asioinnin luonteva järjestys ovat usein hyödyllisempiä.

Selvitä, mistä oman sivustosi valikkoa muokataan

WordPressissä valikoiden hallinta riippuu teemasta. Lohkoteemassa valikkoa käsitellään sivustoeditorissa ja Navigation-lohkon avulla. Klassisessa teemassa käytössä on tavallisesti Ulkoasu → Valikot. Myös teeman omat toteutukset voivat vaikuttaa muokkauspaikkaan. WordPressin valikko-ohje

Pelkkä artikkeleiden kirjoittaminen lohkoeditorilla ei tarkoita, että sivustolla olisi lohkoteema. Artikkelin sisältöeditori ja koko sivuston rakenteen muokkaaminen ovat eri asioita.

Tarkista siis ensin Ulkoasu-valikon vaihtoehdot. Jos ohjeessa mainittu näkymä puuttuu, selvitä käytössä olevan teeman muokkaustapa. Ylläpidon rajatut käyttöoikeudet voivat myös vaikuttaa siihen, mitä asetuksia näet.

Valikon muokkaaminen lohkoteemassa

Lohkoteemassa pääset alkuun avaamalla Ulkoasu → Muokkain. Sivustoeditorin navigaationäkymässä voit hallita valikoita. Tarkemmat linkkiasetukset löytyvät avaamalla valikko muokattavaksi.

Etene seuraavasti:

Valitse muokattava valikko.
Lisää tarvittavat sivulinkit.
Muokkaa linkkitekstit lyhyiksi ja kuvaaviksi.
Järjestä kohdat haluttuun järjestykseen.
Tallenna muutokset.

Jos loit uuden valikon, varmista vielä, että sivuston ylätunnisteen Navigation-lohko käyttää sitä. Pelkkä valikon luominen ei automaattisesti sijoita sitä näkyviin sivustolle. WordPressin sivustoeditorin navigaatio-ohje

Valikossa voi olla myös Sivulista-lohko, joka näyttää julkaistuja sivuja automaattisesti. Jos haluat päättää jokaisesta linkistä erikseen, muuta sivulista muokattaviksi yksittäisiksi linkeiksi editorin tarjoamalla toiminnolla. Navigation-lohkon ohje

Tarkista tallennuksen yhteydessä, mitä olet muuttamassa. Yhteisen ylätunnisteen tai useassa paikassa käytetyn valikon muutos voi näkyä monella sivulla.

Valikon luominen klassisessa teemassa

Klassisessa teemassa avaa Ulkoasu → Valikot. Valitse olemassa oleva valikko tai luo uusi esimerkiksi nimellä Päävalikko.

Valitse lisättävät sivut sivuluettelosta.
Paina valikkoon lisäämisen painiketta.
Vedä linkit sopivaan järjestykseen.
Avaa tarvittaessa kohdan asetukset ja muokkaa navigaation otsaketta.
Valitse teemasta sopiva näyttösijainti.
Tallenna valikko.

Alavalikko syntyy vetämällä linkkiä hieman oikealle sen pääkohdan alapuolelle. Näyttösijaintien nimet vaihtelevat: teemassa voi olla esimerkiksi päävalikon, ylävalikon tai alatunnisteen sijainti. Valikossa näkyvän tekstin voi muuttaa vaihtamatta itse sivun otsikkoa. WordPressin klassisten valikoiden ohje

Anna ylläpidossa valikoille kuvaavat nimet. Päävalikko ja Alatunniste kertovat käyttötarkoituksesta enemmän kuin Valikko 1 ja Valikko 2.

Käytä alavalikoita harkiten

Alavalikko auttaa kokoamaan yhteen kuuluvat sisällöt. Esimerkiksi Oppaat-kohdan alla voivat olla WordPress, Verkkotunnukset ja Palvelimet.

Aloita yhdestä alatasosta. Useat sisäkkäiset tasot tekevät kokonaisuuden hahmottamisesta ja linkkien valitsemisesta vaikeampaa, etenkin pienellä näytöllä.

Jos pääkohta toimii samalla linkkinä esittelysivulle, alavalikon avaamisen pitää erottua sivulle siirtymisestä. Erillinen avauspainike voi ratkaista tämän. Tarjoa esittelysivulla myös tavalliset linkit alakohteisiin, jotta sisältöihin pääsee useammalla tavalla. W3C:n ohje avautuvista valikoista

Kysy jokaisen alavalikon kohdalla, helpottaako ryhmittely löytämistä. Jos ryhmään kuuluu vain yksi sivu, erillinen päätason linkki saattaa olla selkeämpi.

Tarkista valikko puhelimella

Tietokoneella toimiva valikko voi olla puhelimessa hankala. Pitkä linkkiteksti saattaa rivittyä huonosti, avauspainike jäädä huomaamatta tai viimeiset linkit kadota näytön alareunan ulkopuolelle.

Kokeile valikkoa oikealla puhelimella ja tarkista:

Löytyykö valikon avauspainike helposti?
Ovatko tekstit luettavia ja linkit riittävän väljästi?
Avautuvatko alavalikot koskettamalla?
Pääseekö pitkän valikon loppuun vierittämällä?
Voiko valikon sulkea vaivattomasti?

Kokeile myös puhelimen vaaka-asentoa. Tarkista, etteivät evästebanneri tai muut kelluvat painikkeet peitä valikon toimintoja.

Jos valikko tuntuu ahtaalta, lyhennä ensin nimiä ja arvioi linkkien määrää. Tekstin pienentäminen voi tehdä käytöstä entistä vaikeampaa.

Huomioi näppäimistö ja luettavuus

Valikon pitää toimia myös ilman hiirtä. Siirry linkistä toiseen Tab-näppäimellä ja takaisin Shift+Tab-yhdistelmällä. Tarkista, että näet koko ajan, mikä linkki tai painike on valittuna.

Kokeile linkkien avaamista Enterillä sekä alavalikoiden avaamista niiden painikkeista. Pelkästään hiiren osoittimen viemiseen perustuva toiminta ei riitä näppäimistökäyttäjälle. W3C:n valikkojen saavutettavuusohje

Huolehdi tekstin ja taustan riittävästä erottumisesta. Vältä valikkoa vilkkaan taustakuvan päällä, jos kirjaimet hukkuvat kuvaan. Selkeä taustapinta ja rauhallinen ulkoasu helpottavat lukemista.

Jos näppäimistöllä liikkuminen ei onnistu, ongelma voi olla teeman teknisessä toteutuksessa. Pelkkä linkkien järjestyksen muuttaminen ei silloin korjaa toimintaa.

Jaa linkit päävalikon ja alatunnisteen kesken

Päävalikkoon kuuluvat tärkeimmät asiointireitit. Alatunnisteeseen voit sijoittaa täydentäviä linkkejä, kuten tietosuojaselosteen, käyttöehdot ja sivuston taustatiedot.

Yhteystiedot voivat perustellusti näkyä molemmissa paikoissa. Sivun loppuun päätynyt kävijä löytää ne silloin palaamatta ylös.

Laajassa blogissa myös hakutoiminto auttaa. Valikko näyttää tärkeimmät aihealueet, ja haku palvelee lukijaa, joka etsii tiettyä ongelmaa tai termiä.

Lisää lisäksi sisältöihin asiayhteyteen sopivia linkkejä. Esimerkiksi palvelukuvauksesta kannattaa päästä suoraan hinnastoon ja yhteydenottoon. Näin jokainen seuraava askel ei edellytä päävalikkoon palaamista.

Testaa kokonaisuus ja pidä se ajan tasalla

Avaa lopuksi sivusto uloskirjautuneena ja käy jokainen valikkolinkki läpi. Tarkista kohdesivu, linkkiteksti ja se, että sisältö on julkisesti nähtävissä.

Pyydä mahdollisuuksien mukaan toista ihmistä etsimään sivustolta esimerkiksi hinnasto tai tietty opas. Älä neuvo reittiä etukäteen. Hänen valintansa paljastavat, vastaavatko valikon nimet kävijän odotuksia.

Jos muutokset eivät näy, tarkista tallennus, käytössä oleva valikko ja sen sijoitus. Selvitä tämän jälkeen mahdollisen välimuistin vaikutus.

Arvioi valikko uudelleen, kun sivuston sisältö kasvaa. Lisää uusi pääkohta vain perustellusta syystä, yhdistä päällekkäiset reitit ja korjaa vanhentuneet linkit. Johdonmukainen rakenne helpottaa sekä kävijän asiointia että omaa ylläpitotyötäsi.

Liittyvät kategoriat

Artikkeleita 2 028 artikkelia IT 1 954 artikkelia Kotisivut 1 203 artikkelia Nettisivut 1 203 artikkelia Verkkokehitys 1 269 artikkelia Verkkosivut 1 402 artikkelia Verkkotyökalu 1 182 artikkelia WordPress 1 222 artikkelia