Web-ostajan opas

9.5.2023

Usein verkkosivuston sisältösivut asettuvat loogiseen hierarkiarakenteeseen, jota on selkeää näyttää sivuilla standardin mukaisesti kumuloituvana sivunavigaatiovalikkona. Joskus kuitenkaan tuo hierarkkinen jäsennystapa ei ole se yksi ja ainoa käyttäjille selkein erottelutapa: käyttäjät (tai palveluntarjoajat) haluaisivat ehkä lähestyä sisältösivuja myös jonkin muun luokittelutavan kautta.

Tällaiseen tarkoitukseen on monilla julkaisujärjestelmillä aika helppoa toteuttaa vaihtoehtoinen ”toisen ulottuvuuden navigointivalikko”. Tämä on harvemmin hyödynnetty ratkaisu, joka kuitenkin ansaitsee tulla esitellyksi sen toimivuuden ja helpon toteutettavuuden ansiosta.

2D-malli tarjoaa kaksi reittiä samaan tietosivuun

”Kahden ulottuvuuden” malliksi tämä navigointimekanismi on nimetty siksi, että se tarjoaa samoille tietosivuille kaksi erilaista navigointilogiikkaa rinnakkain.

Havainnemallissa on väreistä kertovat sivut jäsennetty ensisijaisesti väriperheiden mukaan (Keltaiset, Punaiset, Violetit jne.) hierarkkiseen rakenteeseen, joka indikoidaan sivuilla käytännön standardin mukaisena sivunavigaatiovalikkona. Tämän navigointimekanismin rinnalla näytetään päänavigaatiovalikon yhteydessä ”poikkileikkaavia” navigointisivuja, jotka esittelevät värejä toisenlaisen jäsennystavan mukaan luokiteltuina (esim. kylmät värit ja lämpimät värit).

2D-mallin sivutyyppien taittotavat ja funktiot muistuttavat joiltain osin hybridimallin sivuja: varsinaisilla tietosivuilla indikoidaan rakennehierarkia navigaatiovalikon avulla, ja ylätasolla tarjotaan ”linkkilistasivuja”, jotka ohjaavat käyttäjiä löytämään etsimänsä tietosisällöt.

2D-malli yhdistää hyvät, selkeät käytännöt: navigointivalikko voidaan muodostaa dynaamisesti sivujen rakennehierarkian perusteella, ja ”poikkileikkaaville navigointisivuille” voidaan tuottaa hierarkiasta riippumaton, käyttäjälähtöinen jäsennystapa ohjaamaan sisältöjen pariin vaikkapa ”linkkikorteilla” tai muutoin intuitiivisesti ymmärrettävällä tavalla.

Ymmärtääkö käyttäjä valikoiden eron?

Havainnemallissa kuvattu 2D-malli ei ole mitenkään yleinen ratkaisu. Niinpä on perusteltua epäillä se ymmärrettävyyttä ja opittavuutta: tajuaako käyttäjä mistä on kyse?

2D-mallin hyödyntäminen edellyttää sitä, että suunnittelijalla pysyvät langat käsissä: sisällöille on saatava järkevä ja looginen hierarkiarakenne (ei liian syvä), ja ”poikkileikkaavista navigointisivuista” on saatava otsikoiltaan ja idealtaan riittävästi hierarkiasta poikkeava jäsennystapa, jotta käyttäjät pystyisivät hahmottamaan kahden eri navigointivalikon eron.

Ja hyvästä suunnittelusta huolimattakaan eivät käyttäjät välttämättä hahmota valikoiden eroa, koska ratkaisusta ei ole juuri aiempia käyttötottumuksia.

Korkean oppimiskynnyksen vuoksi 2D-malli soveltuukin parhaiten sellaiseen verkkosivustoon, jota käytetään usein ja sitkeän tavoitteellisesti, esimerkiksi intranetiin, ekstranetiin, asiointipalveluun, jäsenpalveluun tai vastaavaan tietointensiiviseen palveluun.

Intranet-sivusto on hyvä esimerkki siitä, kuinka sisällöt tyypillisesti jakautuvat yhdellä logiikalla hierarkioiksi (ajattele vaikkapa sisäistä jäsennystä siitä, mitä palveluja tarjoaa tietohallinto, mitä henkilöstöhallinto, mitä viestintä ja mitä taloushallinto) ja vaihtoehtoisesta näkökulmasta palveluja pitäisi esitellä eri kohderyhmille tai eri tilanteisiin (vaikkapa ”Esimiehille” tai ”Perehdytys” tai ”Dokumenttipohjat” tai ”Projektin läpivienti”). 2D-malli tekee mahdolliseksi esitellä samaa sisältömateriaalia näistä kahdesta eri näkökulmasta.

2D-mallin hyödyntämiselle olisi ylimääräiseksi eduksi se, jos sen käyttölogiikkaa olisi mahdollista opettaa käyttäjille vaikkapa pienellä tietoiskulla tai esittelyvideolla. Tähänkin juuri intranet- tai ekstranet-käyttö tarjoaisi mahdollisuuden.

Mallissa esitetty rakennehierarkia

Esimerkissäni käytetyn 2D-mallin navigointivalikot muodostuvat tällaisesta 3-tasoisesta rakennehierarkiasta:

Hierarkiasta kannattaa panna merkille, että ”läpileikkaavat navigointisivut” ovat rakenteellisesti ihan samalla hierarkiatasolla kuin värisivujen päätasojen sivut (Keltaiset, Punaiset, Violetit jne.).

Teknisessä toteutuksessa ei siis voida pelkästä rakennehierarkiasta johtaa sitä, mitä linkkejä näytetään sivunavigaatiovalikossa, mitä ylätason ”toisen ulottuvuuden valikossa”.

Sivutyyppien välinen ero on toteutettava esim. sivupohjavalinnalla tai vastaavalla metatiedolla, joka on sisällöntuottajan valittavissa. Sivulle ”Lämpimät värit” pitää pystyä määrittelemään, että sitä ei näytetä sivunavigaatiossa rinnakkain ”Punaisten” kanssa, vaan se näytetään erikseen, ilman sivunavigaatiovalikkoa linkitettynä vaakatasoisen päänavigaatiovalikon pudotusvalikkoon rinnakkain ”Kylmien värien” ja ”Välivärien” kanssa.

Koska kunkin sisältöhaaran (tässä esimerkikssä ”2-D”) sivunavigointivalikossa näytetään kumulatiivisesti suoraan kaikki haaran sisältöosiot, tulee sivuvalikosta helposti hälyinen ja vaikeasti seurattava. Niinpä — kuten kumuloituvassa standardimallissa yleisestikin — on varottava sitä, ettei hierarkiarakenne levähdä liian syväksi ja leveäksi.

---