Navigointimekanismien malleja 1: Käytännön standardina kumuloituva valikko

Käytännön standardi verkkosivuston navigointivalikkona on parin vuosikymmenen ajan ollut ”kumuloituva valikko”, joka esittää valitun rakennehaaran sivut ja alasivut sekä niiden keskinäiset hierarkiasuhteet hierarkkisina allekkain kertyvinä valikoina. Mobiilioptimoinnin myötä tämä mekanismi on alkanut kadota työpöytätaitoistakin, vaikka se on kyllä navigoinnin kannalta varsin näppärä, käytettävä ja ymmärrettävä.

North Patrol on suunnitteluun erikoistunut konsulttitoimisto. Suunnittelemme, autamme teknologiavalinnoissa, kilpailutamme. Emme myy toteutusprojekteja, emmekä lisenssejä, olemme aidosti asiakkaan puolella.

7.2.2023

Virpi Blom

Esittelyssä seitsemän eri valikkomallia

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.

Ohjeet ja linkki protomallin käyttöön

Kumuloituva sivuvalikko

Kaikkein perinteisin (eli opittavin ja ymmärrettävin) navigointivalikon tuottamisen mekanismi on se, että kun käyttäjä on valinnut päänavigaatiovalikosta (tyypillisesti vaakavalikko ylätunnisteessa) jonkin päähaaran, tämän haaran alasivut (lapsisivut) näytetään sivunavigaatiovalikkona sivulla (joko vasemmassa tai oikeassa laidassa).

Kun sivunavigaatiovalikosta siirrytään jonkin sisältöhaaran alasivulle, avautuvat valikkoon näkyville linkit tämän osion alasivuille, ja silti valikossa ovat edelleen näkyvillä ylemmän tason valintavaihtoehdot.

Kuvan havainnemallissa käyttäjä klikkailee itseään sivulta toiselle, ja sivuvalikko kumuloituu de facto -standardin mukaisesti.

Valikko indikoi siis suoraan ja näkyvästi, että tämä sisältöhaara koostuu vihanneksista, hedelmistä, juureksista, marjoista ja sienistä. Kun katselet alaosiota "Hedelmät", hahmotat selvästi millaisiin ryhmiin hedelmät jakautuvat. Ja kustakin ryhmästä on helppoa hahmottaa niiden alaryhmät, kuten sitrushedelmiin kuuluvat hedelmät (sitruunat, appelsiinit, greipit, limetit).

Valikossa on myös osoitettu muotokielen keinoin, missä kohdassa valikkoa (= millä sivulla) käyttäjä kulloinkin on eli käyttäjän sijainti sivuston rakennehierarkiassa. (Tämän toistaa myös esimerkissä näkyvä murupolku, joka tietysti on yksi omanlaisensa navigointimekanismi.)

Tällainen valikko palvelee navigointitarkoitusta ihanteellisesti: käyttäjä näkee, missä osiossa hän kulloinkin on, millaisia vaihtoehtoja rakennehierarkiassa on valittavana ylemmissä ja alemmissa sisältöhaaroissa, ja millainen teemallinen kokonaisuus sisältöhaarasta täten muodostuu.

Jos käyttäjä toteaa, että hedelmät eivät tarjonneet häntä kiinnostavaa sisältöä, on tyrkyllä koko ajan muita vaihtoehtoja, kuten 'juureksia' ja 'sieniä', joita on nopeaa ja helppoa siirtyä selailemaan.

Kumuloituva valikko on niin pitkään käytössä ollut malli, että käyttäjät ovat oppineet tulkitsemaan sitä oikein. Käytettävyydeltään tämä on siis erinomainen navigaatiomalli: intuitiivisesti ymmärrettävä, helposti opittava, motorisesti tehokas käyttää.

Yksittäisen sivunäkymän ymmärrettävyys?

Kumuloituva sivuvalikko on käyttäjälle helpointa hahmottaa silloin, kun surffailu aloitetaan verkkosivuston etusivulta, ja askel askeleelta käyttäjä pääsee näkemään, kuinka hierarkkinen valikko kumuloituu tehtyjen valintojen perusteella.

Mutta näinhän käyttäjät eivät useinkaan verkkopalvelujamme käytä!

Tyypillisintä on, että käyttäjä laskeutuu yhdelle yksittäiselle verkkosivulle Googlen hakutuloksista, somesta tai toisesta verkkopalvelusta löytämänsä linkin kautta.

Ja kun käyttäjä ilmestyy yhdelle yksittäiselle alasivulle, voi sivulla näkyvä linkkilista monimutkaisine muotoiluineen ollakin hankalampi tulkittava:

Yksittäiselle alasivulle laskeutuvan käyttäjän voi olla vaikea tulkita valikon monenlaisia fontteja ja värejä?

Neitseellisin silmin sivuvalikkoa tuijottava käyttäjä voi ihmetellä, miksi sivun reunalaatikossa on jotain sanoja versaalilla, jotain keltaisella taustalla ja joku 'Sitrushedelmät' alleviivattuna. Valikon kirjavia sanoja, hierarkioita ja muotoiluja voi olla todella hankala tulkita.

Kun verkkopalvelujen suunnittelijat ovat kohdanneet sen tosiseikan, että yhä useammin verkkosivustoille "tipahdetaan avaruudesta" yhdelle yksittäiselle sisältösivulle, on myös todettu nämä kumuloituvan valikon tarkoituksen ja muotokielen tulkintaongelmat. Tämä on varmasti yksi syy sille, että perinteisiä kumuloituvia valikkoja näkyy koko ajan vähemmän.

Syvän ja leveän hierarkian ongelmat

Toinen syy kumuloituvista valikoista luopumiseen on epäilemättä se, että ne soveltuvat hyvin huonosti verkkopalveluihin, joiden hierarkiarakenteet ovat kovin syviä ja leveitä.

Alla on pari esimerkkiä sivuista, joilla sivuvalikkoon kumuloituu niin paljon hierarkiatasoja ja valintavaihtoehtoja, että valikko käy mahdottomaksi ja epämiellyttäväksi lukea. Valikon sanat muodostavat vain "portaikon" tai "tikapuiden" tyyppisen sotkuisen elementin, joka ei helpota liikkumista eikä oman sijainnin hahmottamista.

Kuvakaappauksissa sivuvalikot (toisessa vasemmalla, toisessa oikealla) eivät oikeastaan selkeytä navigointia, vaan tekevät sivuista sekavamman näköisiä.

Kun laajaa tieto- ja palveluvalikoimaa esitellään hakukoneoptimoidusti yhdellä sivustolla (= yhdessä domainissa), on selvää että rakenteeseen syntyy leveitä ja syviä hierarkioita. Mikäli näistä tehdään kumuloituvia valikoita, valikko ei oikeastaan enää palvele tarkoitustaan: se ei auta käyttäjää hahmottamaan sijaintiaan sivustolla eikä se helpota navigoimista sivulta toiselle.

Kun verkkopalvelu on sisällöllisesti laaja, voi sen pääosioihin kertyä hyvin heterogeenistä ainesta. Yhdessä ja samassa sisältöhaarassa voidaan kertoa puuroista, velleistä, appelsiineistä ja mopoista: samassa kumuloituneessa valikossa näkyy siis täysin toisilleen vieraita teemoja. Niinpä valikko ei tue navigointia, kun emme usko puuroista lukevan käyttäjän innostuvan appelsiineistä tai mopoista.

Liian syvä, leveä ja moniaineksinen kumuloituva navigaatiovalikko ei siis olekaan enää käyttäjälle apuväline, vaan kognitiivista hälyä: häiritsevä elementti, joka ei kiinnosta, mutta vaikeuttaa pääasialliseen sisältöön keskittymistä.

Tämä on epäilemättä tärkein syy sille, että nykyisin julkaistavista uusista laajoista verkkopalveluista on aika usein otettu kumuloituva sivuvalikko pois.

Näytetäänkö valikkoa vai ei?

Viimeistään kun verkkopalvelujen mobiilikäyttö alkoi kasvaa työpöytäkäyttöä yleisemmäksi, ryhdyttiin verkkosivustoja optimoimaan älypuhelimen pieniä näyttöjä varten.

Kun mobiilinäkymiin ei mitään valikoita mahtunut, ryhdyttiin niitä riisumaan pois myös työpöytänäkymistä: mobiilitaiton ratkaisut alkoivat tarttua myös työpöytätaittoon.

Visualistit huokaisivat helpotuksesta, kun ei enää tarvinnut keksiä väkinäistä muotokieltä valikkoelementeille, niiden hierarkioille ja valittujen kohtien indikoinnille: yhdellä menu-napilla (se hampurilaiskuvake) hoitui valikon esittämisen ratkaisu työpöytätaitossakin!

Jokin lapsi taisi lennähtää pihalle tämän puhdistuksen pesuveden mukana? Kyllä jokin valikon antama konteksti sivulle on varsin hyödyllinen käytettävyysratkaisu. Se auttaa käyttäjää ymmärtämään sivustokokonaisuutta, sijaintinsa sivustolla ja esillä olevan sivun teemallisen kontekstin.

Näkyvästä valikosta jonkin toisen sivun valitseminen ja klikkaaminen sujuu paljon intuitiivisemmin ja tehokkaammin kuin käyttöliittymäalueen äärimmäiseen reunaan sijoitetusta menu-napista valikon avaaminen parilla klikkauksella aina uudelleen.

Kun halusitkin katsoa jonkin toisen uimahallin aukioloaikoja, miten sujuu navigointi sivulta toiselle?

Kumuloituvasta valikosta luopuminen on siis selkiyttänyt sivuja ja päästänyt eroon tilaa vievästä valikkoelementistä, mutta kuinkas olemmekaan iloinneet vapautuneesta tilasta?

Julma totuus on se, että säästynyttä käyttöliittymätilaa ei oikeastaan voi juurikaan hyödyntää! Tekstipalstaa ei voi leventää ylettömästi, eikä tekstisisältöjen taitto useammaksi rinnakkaiseksi palstaksi suju vielä kovin sutjakkaasti nykyisillä julkaisujärjestelmillä.

Samaan aikaan ovat näytöt työpöydillä vain leventyneet, joten työpöytänäkymiin on ilmestynyt valtavia valkoisia aukkoja tyhjää tilaa. Emme osaa oikein keksiä järkeviä hyödyntämistapoja leveiden näyttöjen tarjoamalle käyttöliittymätilalle – mobile first, desktop never?

Kun työpöytänäkymään jää joka tapauksessa tuo leveä aukkopaikka, voisi sen navigaatiovalikon ihan yhtä hyvin näyttää siinä tilassa :-) Mutta ei liian syvänä ja leveänä, sekalaisena kumuloituvana mammuttina, vaan hallittavan kokoiseksi rajattuna.

Tähän navigointivalikon hallittuun rajaamiseen laajoilla sivustoilla tarjoavat muut navigointimekanismit järkeviä tapoja: suppilovalikko, hybridimalli tai satelliittimalli voi olla toimiva ratkaisu.

Mallissa esitetty rakennehierarkia

Esimerkissäni käytetty sivunavigaatiovalikko on kumuloitunut tällaisen 4-tasoisen rakennehierarkiamallin mukaisesti:

Kuten tämä tiivis hierarkiarakenne osoittaa, kumuloituva valikkomalli soveltuu ihanteellisesti sivustolle, jolla ei ole tämän syvempiä hierarkiarakenteita eikä rinnakkaisia sisältöhaaroja ole kovin suurta määrää (tässä esimerkissä 4--6 kullakin tasolla).

Lisäksi on tietysti otettava huomioon se, että valikossa näytettävä teksti ei voi olla kovin pitkä, jotta se mahtuu valikkoon. Protomalliin keksityt sanat on tieten tahtoen tiristetty ihanteellisen tiiviiksi ja lyhyiksi, mutta ihan näin pienillä merkkimäärillä ei tarvitse selvitä.

Kuitenkin kumuloituvaa valikkoa suunniteltaessa on otettava huomioon myös se, miltä valikko näyttää, kun valikon termit laajenevat pidemmiksi (esim. "Oppilaan oman äidinkielen opetus" tai "Liikuntajulkaisut ja tutkimuskyselyt"). Miten elementit joustavat? Tarvitaanko sanojen tavutusratkaisuja?


Tämä valikkomalli soveltuu ...

  • Tyypilliseen keskikokoiseen markkinointiviestinnälliseen verkkopalveluun.
  • Kun rakennehierarkia sisältää korkeintaan 4 syvyystasoa eikä rakennepuu levähdä leveystasossakaan liian laveaksi.

Ongelmakohtia ovat...

  • Tyyliratkaisut valikon hierarkioiden esittämiseen, avattujen rakennehaarojen indikoimiseen ja valittuna olevan sivun osoittamiseen.

Artikkelisarja na­vi­gaa­tio­me­ka­nis­mien malleista

Esittelyssä seitsemän eri valikkomallia:

  1. Käytännön standardina kumuloituva valikko
  2. Suppilovalikko laajoille sivustoille
  3. Hybridimallissa valikot rakenteen alatasoille
  4. Jäsennys kahdesta ulottuvuudesta (2D)
  5. Megamenu on oikopolkulista
  6. Satelliittimallissa on kokoelma itsenäisiä sivustoja
  7. Hampurilaisvalikko työpöytänäkymässä

PS. Sinua voisi kiinnostaa tulossa oleva ilmainen webinaarimme: Parhaat muotoiluratkaisut tuote- ja palvelusivuille (15.5.2024 klo 10:00). Ilmoittaudu webinaariin

Lue palveluistamme Pyydä tarjous

Virpi Blom

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ä.

Tietosivustot

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.

Lue palveluistamme

Pyydä tarjous

North Patrol auttaa onnistumaan

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.

Ota selvää firmastamme

Miten erotumme kilpailijoistamme?

  • Digipalveluiden suunnitteluun erikoistuminen

    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, koska meiltä ei voi ostaa koodausta tai lisenssejä eikä meillä ole riippuvuuksia teknologiatoimittajiin. Näkökulmamme ohjelmistomarkkinaan on laaja-alainen. 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.

Siirry takaisin sivun alkuun