North Patrol on digipalvelujen ja tietojärjestelmien suunnitteluun erikoistunut konsulttitoimisto. Muotoilemme ideoista vision ja palvelukonseptin, löydämme parhaat arkkitehtuuri- ja teknologiaratkaisut, suunnittelemme toimivan käyttökokemuksen ja kilpailutamme ihannekumppanin toteutustyöhön. Emme myy toteutusprojekteja, emmekä lisenssejä, olemme aidosti asiakkaan puolella.
Navigointivalikon suunnittelu – osa 3: Hybridimallissa valikot rakenteen alatasoilla
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.
North Patrol on suunnitteluun erikoistunut konsulttitoimisto. Suunnittelemme, autamme teknologiavalinnoissa, kilpailutamme. Emme myy toteutusprojekteja, emmekä lisenssejä, olemme aidosti asiakkaan puolella.
Tämä juttu kuuluu artikkelisarjaan, jossa esitellään seitsemän erilaista mekanismia verkkosivuston navigointivalikoiden muodostamiseksi sivuston sivujen keskinäisen rakennehierarkian (tai jonkin metatietoluokittelun) pohjalta.
Esitellyt navigointimallit perustuvat North Patrolin luomaan protomalliin, joka demonstroi käytännössä sitä, millä tavoin verkkosivuston sisällöt hahmottuvat eri navigointimallien kautta.
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.
Kuvan esimerkissä navigoidaan ylätason sivulta toiselle, ja vasta kolmannella tasolla sisältösivulle ilmestyy sivunavigaatiovalikko.
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:
Malliesimerkissä ”Skandinavian” maat alasivuineen näytetään kumuloituvassa sivuvalikossa.
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).
Oivaltaisiko tähän näkymään laskeutunut käyttäjä, että hän voisi etsiä myös Afrikan tai Etelä-Euroopan alueita?
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.
Valikkomalli soveltuu hyvin…
Laajoille sivustoille.
Kun verkkosivuston sisältö koostuu melko erityyppisistä aineksista.
Kun tietosisällöt rakennehierarkian loppupäässä muodostavat loogisia kokonaisuuksia.
Ongelmakohtia ovat…
Yhdenmukaisen toimintalogiikan toteuttaminen koko sivustolle.
Nollainformaatioiset ”linkkisivut”, jotka toimivat vain navigointivälineinä toiselle sivulle siirtymiseen.
Siirtymät navigointivalikollisilta sivuilta ylemmille tasoille, jotka eivät näy valikossa.
FM Virpi Blom on verkkopalvelustrategioiden, käyttökokemuksen ja palvelukonseptien asiantuntija. Virpi konsultoi asiakkaitaan strategisten linjausten, konseptoinnin, määrittelyn ja suunnittelun kysymyksissä. Hänen erityisosaamistaan on verkkopalvelujen hyötyodotusten kirkastaminen, positiivisen käyttäjäkokemuksen varmistaminen sekä hankittavien ratkaisujen konseptointi ja määrittely siten, että niin loppukäyttäjien kuin ylläpitäjienkin tarpeet täyttyvät.
Virpin 25-vuotinen kokemus verkkopalvelujen suunnittelusta sisältää satojen internet-, intranet- ja extranet-palvelujen määrittelyä, suunnittelua, toteutusta, käytettävyystestausta ja kehittämistä. Aiemmissa työpaikoissaan hän on mm. toiminut johtavana konsulttina, konsultoinut verkkopalvelujen suunnittelua ja toteutusta lukuisissa eri rooleissa ja vetänyt User Experience -tiimiä.
Autamme laajojen tietosivustojen suunnittelussa, määrittelyssä ja kilpailuttamisessa. Muotoilemme konseptin, tietorakenteet, käyttökokemuksen ja toiminnot hyötypalveluksi, jota on miellyttävä käyttää, helppoa ylläpitää ja kustannustehokasta kehittää koko elinkaarensa ajan.
Meitä on kymmenen konsulttia, kaikki kokeneita suunnittelijoita tai teknologia-asiantuntijoita. Joka vuosi viemme läpi yli 50 projektia, joissa autamme hankkeensa eri vaiheissa olevia asiakkaitamme luomaan uusia digipalveluja ja tietojärjestelmiä. Asiakkaamme ovat olleet erittäin tyytyväisiä työhömme (arvosana 9,5/10), ja monet heistä palaavat asiakkaiksi yhä uudestaan.
Olemme apunasi, kun kaipaat puolueetonta näkemystä teknologiavalintoihin, kirkastusta palvelukonseptin ideaan, tarkennusta vaatimusten määrittelyyn, konkreettista tukea tarjouskilpailuun tai ohjausta toteutusprojektin läpivientiin.
Olemme erikoistuneet digipalveluiden laadukkaaseen suunnittelutyöhön ja vaatimusmäärittelyyn. Missiomme on auttaa asiakkaita onnistumaan hankkeissaan luomalla mahdollisimman hyvät lähtökohdat toteutusvaiheelle – oli sitten kyse ketterästä toteutuksesta omalla tiimillä tai kumppanin kanssa tehtävästä hankkeesta tai julkisesti kilpailutettavasta urakasta.
Emme myy koodausta emmekä lisenssejä
Moni teknologiakonsultti suosittelee asiakkailleen teknisiä ratkaisuja, joita sama talo myös toteuttaa. Meillä tätä vinoumaa ei ole. Tavoitteena on aina löytää asiakkaalle parhaiten soveltuva ohjelmistoratkaisu, oli se sitten räätälöity ratkaisu, saas-palvelu, avoimen lähdekoodin alusta tai näiden yhdistelmä.
Tehokkuus, tavoitteellisuus ja tuloksellisuus
Toimeksiannoillemme sovitaan aina konkreettinen lopputuotos, jonka avulla asiakas pääsee hankkeessaan eteenpäin. Hioutuneiden menetelmiemme ja kokeneiden konsulttiemme ansiosta pystymme tuottamaan sen tehokkaasti, yllättävän vähäisillä työmäärillä, ja rahallesi syntyy vastinetta.
