CMS-suunnitteluopas – Osa 3: Navigaatiorakenne

Verkkopalvelun navigaation suunnittelu on yksi tärkeimmistä ja haasteellisimmista osista koko projektissa. Navigaatiojärjestelmä ei pelkästään tee sivustolla liikkumista helpoksi, vaan sen on myös pystyttävä laajentumaan ja kasvamaan yhdessä muun sivuston kanssa – ja tietysti supistumaan pienemmissä näytöissä. Jos palvelussa on käytössä alasivuja, tämän järjestelmän pitää pystyä mukautumaan yli sivurakenteen, jonka pohjalta navigaatio oli alunperin luotu. Luomasi navigaatiojärjestelmän avulla asiakkaasi on mahdollista lisätä siihen joustavasti uusia sivuja.

Tämä artikkeli on osa sarjaa, jossa esittelen vinkkejä kuinka voit suunnitella nettisivuston graafisen ilmeen julkaisujärjestelmän päälle.

Kun suunnitellaan verkkopalvelun navigaatiota, olisi hyvä miettiä seuraavia seikkoja:

  • Missä minä olen?
  • Minne voin mennä?
  • Missä olen ollut?
  • Mitä on seuraavalla alatasolla?
  • Mitä on edellisellä ylätasolla?
  • Mikä on sidoksissa tähän sivuun (ryhmät, kategoriat)
  • Mikä on uutta, suosittua tai tärkeää?

Seuraavassa esitellään yleisimpiä dynaamisia navigointijärjestelmiä, joissa on otettu huomioon yllä olevat seikat.

Yksitasoinen navigaatio

Yksinkertaisin esimerkki yksitasoisesta navigaatiorakenteesta voisi olla vaakatasoinen ylävalikko, jonka linkkien takana on vain yksi taso alasivuja.

Hierarkkinen navigaatio

Hierarkkinen navigaatio esittää  sivurakenteen allekkaisina tasoina. Joissain tapauksissa tämä rakenne voi olla klikattavissa auki ja kiinni.

Leivänmurut

Englanninkielisestä termistä breadcrumbs saanut navigaatiojärjestelmä näyttää havainnollisesti kuinka syvällä käyttäjä on sivurakenteessa ja tarjoaa paluupolun, jonka avulla voi yleensä palata aina etusivulle asti. Tämä on toimiva ratkaisu rakenteeltaan monimutkaisissa verkkopalveuissa.

Historiallinen navigaatio

Navigaatiojärjestelmä, josta kävijä näkee, millä sivuilla hän on käynyt. Erotuksena leivänmuruista, tämä järjestelmä ei välttämättä ole sidoksissa sivuston rakenteeseen, vaan esimerkiksi sisältöön, kuten verkkokauppa Amazonin ”Recently Viewed Items”.

Sisältönavigaatio

Usein verkkopalveluissa – varsinkin blogeissa – on etusivulla otteita sivuston artikkeleista tai uutisista. Tämän navigaatiojärjestelmän avulla voi nopeasti löytää sivuston uusimman tai suosituimman sisällön.

Kategoriavalikko

Sivuston pää- tai alikategorioista muodostettu valikko, josta pääsee selaamaan kategorian alle määriteltyjä sivuja. Esimerkiksi:
– Audi
– Ford
– Honda

Avautuva valikko

Tämän tyyppinen valikko vaatii ensin hiiren kursorin viemistä päälinkin päälle (tai sen klikkaamista), jonka jälkeen alla olevat navigaatiovalinnat paljastuvat. Samoin alasivujen alla olevat sivut näkyvät vasta kun kursori viedään niiden yläpuoliselle linkille.

Arvoon tai sijoitukseen perustuva valikko

Navigaatiojärjestelmä, jonka avulla voi esittää sivuston suosituinta, tärkeintä tai luetuinta sisältöä. Valikossa voi esimerkiksi olla hakusanoja, jotka näytetään suurempina mitä tärkeämpiä ne ovat (ns. tagipilvi).

Sivunumerointivalikko

Kun sisältö on jaettu useille sivuille, voidaan käyttää sivunumerointivalikkoa. Helpoin esimerkki tästä on Googlen hakutuloksien ylä- ja alareunoissa olevat valikot. Julkaisujärjestelmät tuottavat yleensä automaattisesti tällaisen valikon, kunhan ensin on määritelty näytettävien otsikoiden määrä per sivu.

Kuvapohjainen navigaatio

Navigaatiojärjestelmää, joka pohjautuu kuvissa tai Flashissa oleviin teksteihin, on yleensä hyvä välttää. Joissakin tapauksissa tämäkin tapa on hyväksyttävää – esimerkiksi sivustolla, jossa päätason linkkiotsikot eivät muutu. Alasivuilla ei kuvia kuitenkaan kannata käyttää. Vaikka jotkut julkaisujärjestelmät osaavat tehdä lennossa tekstipohjaisia kuvia navigaatioon, niiden kirjainvälistys ja luettavuus ovat usein kompromissejä. Lisäksi varsinkin pienillä kirjainko’oilla oikea teksti on tietokoneessa selvempää kuin esimerkiksi Photoshopilla toteutettuna.

Vaaka- vai pystynavigaatio?

Navigaation laajennettavuus perustuu vaakanavigaatiossa oikealle tai vasemmalle jätettyyn tilaan ja pystynavigaatiossa alhaalla olevaan tilaan. Jos navigaation ylimmän oksan otsikkolinkkien määrä lisääntyy, se voi aiheuttaa ongelmia vaakanavigaatiolle (sivuston reuna tulee vastaan ja pudottaa linkit toiselle riville).

Pienet ja suuret näytöt

Modernit verkkopalvelut tehdään skaalaantumaan pysty- ja vaakasuunnassa, jolloin hyvin suunniteltu navigaatio pystyy mukautumaan molempien vaihtoehtojen vaatimuksiin. Sisällön skaalautumista kutsutaan responsiivisuudeksi ja sitä käsitellään myöhemmässä artikkelissa.

Jatka lukemista seuraavaan artikkeliin: Osa 4: Ilmeen tekninen toteutus

Kirjoita kommentti