Web-ostajan opas

30.3.2023

Monella laajalla, moniaineksisella sivustolla perinteisestä sivunavigaatiovalikosta on hyötyä rakennehierarkian loppupään tasoilla, vetämässä yhteen aihepiiriltään samankaltaisia sisältösivuja. Hierarkian ylätason valinnat ovat laajalla sivustolla niin sekalaisia, että niitä ei kannata roikottaa valikossa kumulatiivisesti.

Tällaiseen tarkoitukseen on yhä yleisemmin valittu navigaatiomekanismiksi ”hybridimalli”, jossa hierarkian ylätason sivuilla ei näytetä navigointivalikkoa, mutta alatasoilla näytetään.

Hybridimallin ylätasolla sivut ovat linkkilistoja…

Hybridiä tässä mallissa on se, että rakenteen ylätason sivuilla navigointi tapahtuu eri tavoin kuin rakenteen alatasolla.

Ylätason sivuilla linkkejä alemmille tasoille ei esitetä tukielementtinä toimivassa navigointivalikossa, vaan koko sivu toimii navigaatiovalikon tavoin.

Alla näkyvässä havainne-esimerkissä rakennehierarkian kahden ylimmän tason sivuilla (Maanosat ja Euroopan valtiot) keskitytään esittelemään linkit alahaaroihin. Kolmannelta tasolta (Skandinavia) lähtien alemmat hierarkiatasot näytetään sivunavigaatiovalikossa, josta käyttäjän on sujuvaa navigoida maasta toiseen.

Hierarkian ylätason sivut nostavat esiin sisältöteemat, joista palvelu koostuu: käyttäjän on tarkoitus silmäillä läpi vaihtoehdot ja löytää niiden joukosta itseään kiinnostava sisältökokonaisuus (kuten Eurooppa ja sieltä Skandinavia).

Linkit alemmille tasoille voivat olla yksinkertaisia korttielementtejä, joissa on vain linkkisana ja vaikkapa sitä havainnollistava kuvituskuva (kuten ylimmällä tasolla kortti ”Eurooppa”). Kuvaa kannattaa käyttää vain jos sillä on jotain aitoa informaatioarvoa.

Korttielementtiin voidaan myös lisätä jokin tulkintaa helpottava ja lisäinformaatiota tarjoileva seliteteksti. Hätäiset verkkosivujen lukijat eivät kuitenkaan todennäköisesti noteeraa tekstiä lainkaan, vaan orientoituvat klikkaamaan linkkiä jo linkkisanan nähdessään.

Tällaiset ”linkkikorteista” koostuvat ohjaussivut verkkosivuston rakenteen ylätasolla ovat käyneet yhä yleisemmiksi, koska korttitaitto istuu niin optimaalisesti myös mobiilinäkymään: näytön leveydestä riippumatta sivulle on helppoa pinota kortteja joko yhteen palstaan allekkain tai useammalle palstalle rinnakkain taittopisteen salliman tilankäytön mukaan.

…ja hybridimallin alatasoilla näytetään sivunavigaatiovalikko

Kun hybridimallissa tullaan rakennehierarkian alimmille tasoille, näytetään tämä rakennepuun loppupää käyttäjille navigaatiovalikkona, josta on helppoa hahmottaa alasivut ja siirtyä sisältöhaarasta rinnakkaiseen haaraan:

Kun sivunavigaatiovalikko (joka voi olla perinteiseen tapaan sivun vasemmassa reunassa tai motorisesti käytettävämäpänä oikeassa reunassa) ryhtyy kumuloitumaan vasta rakenteen loppupäässä, ratkaisulla saadaan ihanteellisesti käyttöön kaikki standardivalikon edut, ja samalla vältetään sen ongelmat!

Sivunavigaatiovalikko ei paisu sekavaksi ja hallitsemattomaksi, kun siinä näytetään vain rakennepuun kaksi viimeistä hierarkiatasoa (tai itse asiassa kolme, koska myös ’Skandinavia’ on yksi hierarkiataso, joka malliesimerkin valikossa indikoidaan ja linkitetään).

Tässä kontekstissa navigaatiovalikko toteuttaa juuri niitä tehtäviä, joita varten se on luotu:

• Käyttäjä hahmottaa helposti, millaisia erilaisia alueita Suomesta löytyy.
• Käyttäjä pystyy ymmärtämään, missä kohdassa rakennepuuta juuri nyt on.
• Käyttäjän on tehokasta siirtyä katselemaan Ruotsin tai Norjan alueita.

Ongelmana ylempien tasojen löydettävyys

Kun hybridimallin etuna on sivunavigaatiovalikon kertyminen vain alimmilla hierarkiatasoilla, tämä on myös sen riskitekijä: osaako käyttäjä hahmottaa kaikki ne vaihtoehdot ja sisällöt, joita on tarjolla ylemmillä tasoilla, eli ne jotka eivät näy navigaatiovalikossa?

Kun käyttäjä laskeutuu yksittäiselle sivulle esimerkiksi Googlen hakutuloksista, somesta tai muusta linkistä, on navigointivalikko katsetta ja tulkintaa ohjaava elementti. Valikko sitoo kokonaisuuden yhteen (= tässä ovat nämä ’Skandinavian’ alueet), mutta samalla se jättää ulkopuolelleen muut sisältöhaarat (esim. muut Euroopan alueet ja kaikki muut maanosat).

Käyttäjän pitäisi siis onnistua löytämään reittinsä niille rakenteen ylätason linkkisivuille, joista voi valita polun vaikkapa Etelä-Euroopan alueita selaamaan, tai Afrikan ja Aasian valtioiden pariin.

Tätä tarkoitusta varten murupolku on hybridimallissa välttämätön elementti: se indikoi käyttäjälle, että tarjolla olisi rakenteellisia ylätasoja, joista voisi löytyä lisää sisältöjä.

Toinen reitti ylätason linkkisivuille on tyypillisesti päänavigaatiovalikko, josta käyttäjän täytyy jälleen navigoida ylätason linkkisivujen kautta haluamansa alueen sivuja selailemaan.

Siis: kun hybridimalli tekee ihanteellisen helpoksi liikkumisen rakennehierarkian alatasoilla, niin vastaavasti se tekee ylätasojen hahmottamisen melko kömpelöksi. Silti ylätason ”linkkisivut” ovat hyvin suosittu esitystapa, joka on monilta osin myös käyttäjille helppo ymmärtää.

Ylätason linkkisivujen variaatioita

Hybridimallin ylätason linkkisivuja on ryhdytty suosimaan mobile first -ajattelun myötä: kun rakenteen ylätasoilla on lähinnä tarkoitus ohjata käyttäjiä alemmilta tasoilta löytyvien ”varsinaisten” sisältöjen pariin, niin ohjaava linkkisivu toimii palvelupolun käynnistämisessä sekä työpöytä- että mobiilikäytössä.

Kuvallisista ”linkkikorteista” on tullut erityisen suosittuja, koska niihin saadaan helposti mukaan elävöittävää kuvituskuvaa, ja kortin laaja pinta on helposti klikattava alue, johon sormi tai hiiri osuu ongelmitta.

Linkkikorttien variaatioita on paljon. Mitä enemmän yksittäisessä ”kortissa” on aineksia, sitä enemmän se vie tilaa linkkisivulta ja tekee sivua hankalammaksi hahmottaa. Kun visuaalisesti kivojen kuvituskuvien informaatioarvo on todettu vähäiseksi, ovat linkkikortit muuttuneet pikku hiljaa pelkistetymmiksi.

Alla on esimerkkejä Kokkolan, Raision, Tampereen, Kotkan ja Kaarinan kaupunkien linkkikorttisivuista, joissa kaikissa on hyvin selkeästi indikoitu käyttäjälle pääsy alasivuille.

Onko linkkisivun informaatioarvo nolla?

Kun ylätason rakenteen sivut ovat hybridimallissa lähinnä linkkilistoja, tämä synnyttää kysymyksen viestinnän tehokkuudesta: eikö sivulla tosiaankaan ole muuta virkaa kuin johtaa käyttäjä muille sivuille? Sivu siis todellakin on pelkkä navigointivalikko?

Erityisesti jos ylätason linkkilistasivuja on monessa hierarkiatasossa, käyttäjä voi joutua klikkailemaan tietään sivulta toiselle eikä saa polullaan eteensä mitään muuta viestinnällistä sisältöä kuin linkkikortteja toisensa jälkeen.

Kun mobile first -ajattelun hedelmät takavuosina tarttuivat myös työpöytänäkymiin, alkoivat suunnittelijat vieroksua navigointivalikoiden esittämistä ylipäätään. Tuolloin kävi yhä yleisemmäksi myös se käyttökokemus, että käyttäjä ohjautui yhdeltä linkkikorttisivulta toiselle linkkikorttisivulle, joka taas ohjasi uudelle linkkikorttisivulle.

Hybridimallia hyödyntävän suunnittelijan kannattaa ehkäistä sitä, ettei käyttäjän palvelupolku sivulta toiselle olisi pelkkää turhauttavaa valikoiden availua.

Ylätason rakenteen sivut (ne ”pelkät linkkilistat”) kannattaa pitää hierarkkisesti matalina. Mieluummin tarjoillaan yhdellä sivulla paljon linkkejä (jäsenneltyinä helposti silmäiltäviksi ryhmiksi) kuin jaetaan linkkiryhmät useille alasivuille erillisiksi linkkisivuiksi.

Ylätason sivuja kannattaa myös hyödyntää kokonaiskuvasta viestimiseen: pelkkien linkkilistojen esittämisen lisäksi niillä voi tarjota helposti hahmotettavaa sisältöä sekä oikopolkulinkkejä myös muiden, samasta teemasta kertovien tietolähteiden pariin (mutta käyttäjän pitää pystyä ennakoimaan, mihin linkit johtavat).

Sivun linkkejä voi myös vaikkapa jakaa väliotsikoin jäsenneltyihin ryhmiin, jolloin väliotsikko voi jo kertoa jonkin olennaisen tiedon, joka tulee käyttäjän noteeraamaksi?

Toisaalta sivulle ei kannata keksimällä keksiä jotakin sanottavaa – mikäli aiheesta ei ole mitään yleistä viisautta kerrottavaksi, ei sivulle pidä väkisin tuottaa virkkeitä.

Mallissa esitetty rakennehierarkia

Esimerkissäni käytetty hybridimalli muodostuu tällaisesta 5-tasoisesta rakennehierarkiasta:

Hybridimalliin saadaan siis mahtumaan leveä ja syvä rakennehierarkia, kun ylimmät tasot voidaan jättää kumuloituvasta valikosta pois.

Mallissa esitetyssä, alatasoilla kumuloituvassa sivunavigaatiovalikossa näytetään nelos- ja viitostaso rakennehierarkiasta, ja sivuvalikkoa aletaan näyttää ”Skandinavia”-sivulta lähtien (eli kolmannen hierarkiatason sivulta lähtien).

Valikon teknisen muodostamisen haaste

Kun alatasojen kumuloituva sivunavigaatiovalikko muodostetaan julkaisujärjestelmässä automaattisesti, mistä hierarkiatasosta lähtien sivuvalikkoa aletaan näyttää sivuilla? Olisiko valikko aina näkyvillä samalla tavoin rakennehierarkian kolmannesta syvyystasosta alaspäin?

No entä jos Aasian tai Afrikan alueista, tai muista Euroopan alueista muodostuisikin paljon syvempi tai matalampi hierarkia kuin Skandinavian alueista? Pitäisikö valikko sittenkin muodostaa automaattisesti aina rakennehierarkian viimeisestä tasosta laskien: valikossa näytettäisiin aina kaksi syvintä hierarkiatasoa, oli rakennehaarassa sitten vaikka kolme tai seitsemän syvyystasoa?

Entä jos jossakin osiossa sisältöjen funktio ja teemarakenne onkin ihan erilainen, ja niiden sivuilla olisikin hyödyllisempää näyttää sivuvalikossa vain yksi syvyystaso, ei kahta? Pitäisikö sisällöntuottajan itse pystyä valitsemaan, näytetäänkö sivulla ylipäätään navigaatiovalikkoa, ja jos näytetään, voisiko hän itse valita, mikä on se ”äitisivu”, josta alaspäin sivunavigaatiota aletaan kumuloida sivulla näytettäväksi?

Jos ajattelemme havainne-esimerkkiämme, sivu ”Skandinavia” varmaankin merkattaisiin tällaiseksi valikon muodostamisen äitisivuksi, josta alaspäin valikon näyttäminen periytyy? Vai pitäisikö ”Suomi”-, ”Ruotsi”- ja ”Norja”-sisältöhaarojen ylläpitäjien päästä itse päättämään, näytetäänkö nämä alahaarat mukana rakenteen ylemmällä tasolla olevassa ”Skandinavia”-valikossa??

Ja entä sitten ne ylätason linkkisivut – generoidaanko alatasoille johtavat linkkikortit niille automaattisesti sivujen rakennehierarkian mukaan? Vai poimiiko ja muokkaako sisällöntuottaja itse linkkikortit ylätason sivuille haluamallaan tavalla?

Jos linkkikorttisivut muodostetaan vapaamuotoisesti käsin, muistaako ”Skandinavia”-haarasta vastaava sisällöntuottaja käydä lisäämässä linkkinsä ”Eurooppa”-sivulle? Onhan hänelle muistettu antaa päivitysoikeudet tuolle linkkisivulle?

Näissä kysymyksissä kiteytyy hybridimallin hyödyntämisen tekninen haaste. Jos hybridimallin sisältämien valikoiden tuottaminen halutaan automatisoida, on sen perustuttava hierarkiarakenteisiin kiinnitettyihin linjauksiin, jotka voivat tehdä joillekin sisällöille väkivaltaa.

Jos taas valikoiden generointi halutaan pitää joustavana ja sivujen ylläpitäjien tehtäväksi annetaan valinta siitä, kuinka valikko kussakin kohdassa muodostuu, joutuvat sisällöntuottajat kantamaan melko haastavaa vastuuta kokonaisuuden hahmottamisesta. Virheitä navigoinnin toimintalogiikkaan syntyy helposti, ja nämä murentavat valikon ymmärrettävyyttä ja opittavuutta.

---