Seitsemän eri navigointivalikon protomalli

Suunniteltaessa käyttökokemuksen ratkaisuja laajoille tietosivustoille on yhtenä ratkaistavana asiana aina jonkinlaisen navigointimekanismin valinta. Jotta eri vaihtoehtojen mahdollisuudet ja reunaehdot olisi tehokasta demonstroida, päädyimme North Patrolissa rakentamaan protomallin seitsemästä tyypillisimmästä tai kiinnostavimmasta navigointimallista tietosivuston työpöytänäkymään. Artikkelisarjassamme esittelemme kunkin mallin hyödyt, reunaehdot, riskit ja soveltamistavat.

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

13.12.2023

Virpi Blom

Näin käytät protomallia

Protomallimme on toteutettu Figma-työkalulla, ja voit avata proton millä tahansa selaimella. Koska protomallin sivujen elementit ovat suuria, kannattaa selainikkuna säätää vähän tavallista kapeammaksi. Sitten valitset Figma-näkymän vaihtoehdoista sen, että malli täyttää selainikkunasi koko leveyden ("Fit width"):

Protomallin selailua varten selainikkunaa kannattaa kaventaa vähän, ja sitten valita Options-kohdasta "Fit width"-vaihtoehto.

Ja sitten vain ryhdyt klikkailemaan protomallin päänavigaatiosta erilaisia demonstroituja valikkomalleja! Proton kunkin sivun tekstit selittävät kyseistä navigointimallia. Lisäksi sivuilla on kuvitteellisia sisältötekstejä ja kuvituskuvia, jotta selailukokemus muistuttaisi aidon sivuston lueskelua.

Jos klikkaat sellaista kohtaa, joka protomallissa ei ole linkki, Figma vilauttaa vinkiksi sinisellä korostusvärillä sellaisia kohtia, joista linkkejä löytyy. Seuraa siis niitä!

Mallinnuksessa on kuitenkin pyritty sellaiseen johdonmukaisuuteen, että kaikissa mallinnnetuissa alavalikoissa järjestyksessä toinen kohta olisi aina se toimiva linkki, josta protossa pääsee eteenpäin.

Linkki protomalliin on:
https://www.figma.com/proto/bS2Oke0QXVi26P6beVrsEG/Navigaatiomekanismit

Minkälaiset mallit protoon on valittu?

Navigointimekanismeja ja navigointivalikoiden muodostamisen periaatteita on toki paljon muitakin kuin protossamme mallinnetut seitsemän esimerkkiä -- mallinnuksiin on valittu muutama yleinen tai kiinnostava ratkaisu havainnollistamaan ideoita verkkopalvelujen suunnittelijoille.

Prototyypin mallinnukset on tehty työpöytätaittoon, koska tyypillisesti valikoiden esittäminen on relevanttia vain silloin, kun taittopisteessä on kyllin paljon tilaa navigointivalikoiden näyttämiseen. Kustakin mallista on siis erikseen suunniteltava, mikä sen vastine on mobiilitaitossa.

Protomallissa navigointimekanismit on havainnollistettu yhteismitallisesti siten, että kaikissa valikkomalleissa (paitsi "hampurilaisvalikossa") rakennehierarkian päähaarat esitetään yhtenä vaakatasoisena päävalikkona sivujen yläreunassa ylätunnisteen yhteydessä. Navigointimalleja on kuitenkin mahdollista soveltaa ihan yhtä hyvin siten, että päätason valikko esitetään jollain toisella ratkaisulla.

Proton päävalikossa on kohdat Standardi, Suppilo, Hybridi, 2D, Megamenu ja Satelliitti.
Protomallin vaakavalikossa on kukin eri navigointimalli omana kohtanaan, ja tälle näkyvälle päänavigaatiovalikolle korvaava vaihtoehto löytyy hampurilaisnapin takaa.

Protomallien esittelyt:

  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ä

Millainen navigointimalli sivustollesi sopisi?

Protomalleissa esitettyjen navigointimekanismien joukossa ei ole "hyviä" tai "huonoja" ratkaisuja, vaan kukin niistä voi soveltua oman tietosivustosi tarpeisiin paremmin tai huonommin. Pohdi sitä, miten laaja, syvä, leveä, moniaineksinen, eheä tai sirpaleinen oman sivustosi rakennehierarkia on, ja punnitse sen mukaan vaihtoehtojasi.

Kun sivustosi ei ole kovin laaja

Pienelle ja keskikokoiselle sivustolle (esim. alle 50 verkkosivua yhteensä) kannattaa harkita käytännön standardin mukaista kumuloituvaa valikkoa, vaikka se ei olekaan yhtään muodikas. Kunhan rakennehierarkiasi ei ole liian leveä eikä liian syvä, on tämä navigointimalli kaikille käyttäjille seurattava, tuttu, ymmärrettävä ja opittava - jos käyttäjiä pitää auttaa navigoimaan sivustolla, tämä malli on pläkkiselvä. Lisäksi se on helppoa muodostaa automaattisesti julkaisujärjestelmillä.

Jos keskikokoisen sivustosi sivut asettuvat loogiseen rakennehierarkiaan, mutta haluaisit sen päälle tarjota ristiinpoimintoja eri näkökulmista yhdisteltyinä, kannattaa tunnustella, istuisiko "kahden dimension malli" tarkoitukseen:

Kun sivustosi on todella laaja ja hierarkialtaan syvä

Kun sivustolla on satoja sivuja, jotka muodostavat syviä ja leveitä hierarkiatasoja, on pakko turvautua sellaisiin navigointimalleihin, joissa valikot eivät paisu liian suuriksi.

"Hybridimalli" mahdollistaa sen, että kumuloituvia valikoita näytetään vain rakenteen alatasoilla, ja hierarkian ylätasoilla navigointi sujuu muutoin kuin valikoihin kerryttämällä:

Kun tietopalvelun rakennehierarkia on todella syvä, ja sivujen keskinäinen hierarkia on käyttäjälle olennainen tulkinta-avain sisältöjen ymmärtämiseen, on "suppilomalli" näppärä ratkaisu valikoiden kerryttämiseen:

Kun laaja sivustosi koostuu hyvin kirjavasta aineksesta

Kun laaja tietosivusto (esim. kunnan verkkopalvelu) käsittelee hyvin kirjavaa ainesta, sivusto voi muodostua vaikkapa 50 erityyppisestä teemasta, jotka eroavat toisistaan kuin yö ja päivä. Käyttäjä on etsimässä noiden 50 teeman joukosta vain yhtä ainutta aihetta eivätkä muut 49 aihetta ehkä kiinnosta häntä yhtään.

Tällaisessa tapauksessa on sivustolla surffailevaa käyttäjää autettava löytämään langanpää siitä aihepiiristä, joka häntä kiinnostaa: 50 erilaista aihetta on tarjoiltava koontinäkyminä tai ohjaavina linkkisivuina, joista se yksi etsitty aihe löytyy helposti. "Hybridimallissa" rakenteen ylätason sivut voidaan muotoilla hyviksi ohjaussivuiksi, ja kun käyttäjä löytää tiensä etsimäänsä aiheeseen alatasoilla, sujuu siellä aihetta koskevien sivujen selailu helposti:

Todella kirjavan ja sirpaleisen aineksen selailuun voi kokeilla myös "satelliittimallia". Siinä ne sivuston 50 eri aihetta muodostavat omat, suhteellisen itsenäiset sivustonsa, ja rakenteen ylätasolla on yhteenvetosivuja, jotka auttavat käyttäjää löytämään itseään kiinnostavat aihepiirit:

Kun ylätason rakenneotsikot ovat vain sanoja

Silloin kun tietopalvelusi sisältösivut ovat luokiteltavissa kategorialuokkien tai teemasanojen alle, eikä yksittäisestä kategorialuokasta tai teemasanasta tarvitse kertoa mitään yleistä informaatiota, on verkkokaupoista tuttu "megamenu" tarkoitukseen soveltuva navigointimalli.

Sen avulla käyttäjät voidaan ohjata tehokkaasti suoraan etsitylle alatasolle (esim. "tennarit") , mikäli vain hyväksytään se, etteivät megamenun avulla navigoivat käyttäjät koskaan vieraile ylemmillä rakennetasoilla ("urheilujalkineet" tai "kengät").

Liian paljon pääosioita?

Kun verkkosivustosi pääosioita on tosi paljon ja ne kaikki ovat yhtä tärkeitä, voi olla mahdotonta muodostaa sellaista päänavigaatiota, joka sisältyy kaikkiin protossa demonstroituihin navigointimalleihin. Tällöin "hampurilaisvalikko" voi olla ainoa tapa saada näytettyä käyttäjille päänavigaatio, joka tarjoaa pääsyn kaikkiin sivuston pääosioihin.

Useampia erilaisia valikoita eri tarpeisiin?

Protomallissamme esiteltyjä navigointimekanismeja voi myös yhdistellä erilaisiksi kombinaatioiksi, ja samalta tietosivustolta voi löytyä eri osioista erilaisia navigointimalleja.

Ja kannattaa muistaa, että vielä ihan oma navigointimekanismien tyyppiluokkansa ovat "kontekstuaaliset" navigointimallit, joilla suositellaan käyttäjälle lisää luettavaa sivun lopuksi. Oman sivustonsa käyttäjäpolkujen suunnittelussa onkin syytä pohtia myös niitä metatietoja, linkityksiä tai muita mekanismeja, joilla käyttäjää ohjataan sivulta eteenpäin jatkolinkeillä, joiden otsikko voi olla vaikkapa:

  • Katso myös...
  • Sinua voisi kiinnostaa myös...
  • Muita sivuja tästä aiheesta...
  • Tämän sivun lukijat katsoivat myös...

Älä luovu valikosta tekosyiden vuoksi

Hyvän ja johdonmukaisen navigointimallin valitseminen on vaikeaa, ja yhtä kimuranttia voi olla sivuston rakenteen muotoilu loogisesti jäsentyneeksi kokonaisuudeksi, josta eri aiheet löytävät oman paikkansa.

Navigointivalikon näyttämisestä ei kuitenkaan kannata luopua vain siksi, että sen suunnittelu tuntuu vaikealta. Navigointielementit ovat tärkeä osa verkkosivuston käytettävyyttä ja miellyttävää käyttökokemusta:

  1. Navigointivalikot parantavat tietojen löydettävyyttä osoittamalla käyttäjälle, millaisia sivuja / teemoja sivustolta löytyy.
  2. Valikot tarjoavat käyttäjälle olennaisen kontekstitiedon hänen sijainnistaan sivuston rakenteessa.
  3. Valikoiden kautta siirtymät sivulta toiselle sujuvat tehokkaasti, ilman edestakaista surffailua.

Monien tekee mieli luopua navigointivalikon näyttämisestä ihan siitä syystä, että se näyttää rumalta tai kömpelöltä. Tämäkin on melko turha tekosyy, sillä valikon voi myös tyylitellä keveäksi, kauniiksi ja tasapainoiseksi.

Ja itseltään kannattaa kysyä, onko informaatiopainotteisen tietosivuston hyvännäköisyys lopulta käytettävyyttä ja löydettävyyttä tärkeämpää?

Lue palveluistamme Pyydä tarjous

PS. Sinua voisi kiinnostaa tulossa oleva ilmainen webinaarimme: B2B-verkkokauppojen eri mallit ja menestystekijät (13.3.2024 klo 10:00). Ilmoittaudu webinaariin

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 lyhyesti

Meitä on kymmenen konsulttia, kaikki kokeneita suunnittelijoita tai teknologia-asiantuntijoita. Vuosittain meillä suunnitellaan ja valmistellaan yli 50 erilaista digipalvelu-uudistusta ja tietojärjestelmähanketta. Asiakkaamme ovat olleet erittäin tyytyväisiä työhömme (arvosana 9,5/10), ja monet heistä palaavat asiakkaiksi yhä uudestaan.

Lue lisää meistä

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

  • Realistisuus ja kaukonäköisyys

    Suunnittelemme digipalveluiden palvelukonsepteja, toteutustapoja ja arkkitehtuureja, jotka kestävät aikaa ja jatkokehittämistä. Me painotamme ratkaisujen toteutuskelpoisuutta, hyvien kumppaniehdokkaiden löytymistä ja kustannusten ennustettavuutta.

Siirry takaisin sivun alkuun