Asiantuntija-artikkeli: Päätason sivujen dilemma käyttöliittymässä

Uutta verkkopalvelua suunniteltaessa monet keskeisimmistä päätöksistä liittyvät sivuston rakenteeseen ja navigaatioon. Suunnittelussa on tasapainoiltava monenlaisten tarpeiden ja toiveiden välillä. Käyttökokemus ja liiketoiminnan tarpeet ovat tärkeitä, mutta myös tekninen toteutus, saavutettavuus, hakukoneoptimointi ja sisällöntuotanto on otettava huomioon.

Laajoissa verkkopalveluissa usein toistuva haaste koskee sivuston eri osioiden pääsivujen roolia. Pääsivulla tarkoitetaan siis niin sanottuja toisen tason sivuja. Esimerkkinä osoiterakenteessa voisi olla ersimerkiksi www.esimerkki.fi/paasivu.

Keskeisiä esiin nousevia kysymyksiä ovat muun muassa:

• Ovatko pääsivut käyttäjän kannalta oikeasti tarpeellisia, vai ovatko ne turha välivaihe käyttäjäpolussa?
• Kuinka pääsivujen osalta navigointi toteutetaan ilman, että se haittaa käyttökokemusta ja hämmentää käyttäjää?
• Onko palveluun pakko rakentaa pääsivut hakukoneoptimoinnin vuoksi?

Alla esitellään kolme yleisesti käytössä olevaa ratkaisua pääsivujen käytöstä verkkopalveluiden navigaatioissa..

Ratkaisu 1 – Ei pääsivuja

Ensimmäinen ratkaisu on yksinkertaisin malli, jossa navigaation päätaso toimii aiheen sisällöt kokoavana otsikkona. Otsikkoa klikkaamalla aukeaa aihealueen sivut sisältävä valikko. Erillistä päätason alasivuja ei ole, jolloin alasivujen rooli korostuu.

Hyvät puolet 👍

Ratkaisu on käyttökokemuksen ja rakenteen kannalta toimiva, sillä se vähentää sivuston tasojen ja sisällön määrää. Varsinaiset sisältösivut (kolmas taso, esim www.esimerkki.fi/paasivu/sisaltosivu) ovat tässä mallissa yhden askeleen lähempänä domainin ”juurta”, eli muodossa www.esimerkki.fi/sisaltosivu. Mobiilikäytössä tämä malli yksinkertaistaa valikoita ja helpottaa niiden käyttöä.

Myös sisällöntuotannon ja ylläpidon näkökulmasta malli on kevyt, sillä sisältöä on vähemmän.

Huonot puolet 👎

Hakukoneoptimoinnin kannalta ratkaisu voi olla ongelmallinen, sillä päätason sivut ovat tärkeitä sivuja, jotka keräävät tärkeitä avainsanoja ja jakavat linkkivoimaa alasivuille. Ne auttavat hakukoneita ja tekoälyhakuja ymmärtämään yksittäisten sivujen kontekstin, eli mikä niiden ”isäntäsivu”parent”-sivu on. Ratkaisulla voi olla kauaskantoisia negatiivisia seurauksia sivuston liikenteen kannalta, ja myöhemmin rakennetta voidaan joutua muokkaamaan.

Malli voi olla toimiva esimerkiksi sisäisissä palveluissa ja työkaluissa, joissa hakukoneoptimointi ei ole tärkeässä roolissa. Tämän tyyppisissä palveluissa on hyvä panostaa siihen, että käyttö on mahdollisimman suoraviivaista ja käyttäjäpolut pysyvät selkeinä.

Ratkaisu 2 – Navigaation otsikko on linkki osion pääsivuille

Toinen yleinen ratkaisu on tehdä navigaation otsikosta suora linkki osion pääsivulle. Malli korostaa pääsivujen roolia palvelussa.

Hyvät puolet 👍

Tätä mallia suositellaan usein SEO-näkökulmasta, sillä se säilyttää sivuston hierarkian ja linkkivoiman ehyenä. Käyttäjiä ohjataan navigaatiossa vahvasti pääsivuille.

Huonot puolet 👎

Käyttökokemuksen kannalta ratkaisu on haasteellinen. Käyttäjälle voi olla epäselvää, mikä osa navigaatiosta on klikattava linkki ja mistä puolestaan aukeaa valikko. Tämä korostuu mobiilin pudotusvalikoissa, joissa virhe-täppäykset voivat aiheuttaa turhautumista.

Mallia käytettäessä linkin ja valikon avaus on hyvä erottaa toisistaan mahdollisimman selkeästi saavutettavuuden ja käytettävyyden vuoksi.

Ratkaisu 3 – Navigaation otsikko ja ohjaus pääsivulle on erotettu toisistaan

Kolmannessa mallissa osion pääsivulle on oma selkeä ohjauksensa valikon sisällä. Tässä mallissa valikon avaus ja pääsivun linkki on erotettu selkeästi omiksi toiminnoikseen.

Pääsivun ohjausta voidaan korostaa tekemällä siitä visuaalisesti näyttävämpi elementti muihin ohjauksiin verrattuna.

Hyvät puolet 👍

Tämä ratkaisu yhdistää kahden edellisen mallin parhaita puolia. Se on käyttäjäystävällinen, saavutettava ja toimii hyvin kaikilla laitteilla. Kun pääsivun linkki erottuu navigaatiossa selkeästi, käyttäjän ei tarvitse arvailla mitä mistäkin painamalla tapahtuu.

Sivustolle saadaan myös rakennettua tarvittavat pääsivut, jolloin hakukonenäkyvyydestä ei tarvitse tinkiä. Pääsivuja ei kuitenkaan ole pakko käyttää jokaisessa sivuston osiossa, mikä tekee sivuston rakenteesta joustavan.

Huonot puolet 👎

Osion pääsivulle ei ohjata yhtä aggressiivisesti kuin edellisessä vaihtoehdossa, jolloin niiden kävijämäärät voivat jäädä pienemmiksi. 

Tämä vaihtoehto on toimiva ratkaisu useimmissa palveluissa, sillä se tuo navigaatioon selkeyttä ja johdonmukaisuutta. Se on myös joustava ja eri tarpeisiin mukautuva ratkaisu.

Yhteenveto – Palvelun luonne määrittää oikean ratkaisun

Monesti pääsivut eli toisen tason sivut ovat ikään kuin näyteikkunoita sisällölle, jota niiden alasivuilla esitetään. Käyttäjä harvoin saa tehtävänsä suoritettua pääsivulla, vaan asiointi suoritetaan alemmilla sivupohjilla. Siksi toisen tason sivujen rooli on monesti vain ohjata käyttäjä oikeaan paikkaan.

Yllä esitetyistä kolmeasta eri vaihtoehdosta viimeinne eli kolmas vaihtehto on käytettävyyden ja saavutettavuuden kannalta usein paras ratkaisu. Se myös mahdollistaa sivuhierarkian suunnittelun hakukoneoptimoinnin näkökulmasta.

Palveluita on kuitenkin moneen lähtöön, ja esimerkiksi sisäiseen käyttöön tarkoitetuilla sivustoilla paras ratkaisu voi olla rakenteeltaan yksinkertaisempi malli. Palvelua kannattaa testata aina suunnitteluvaiheessa oikeilla käyttäjillä halutun lopputuloksen varmistamiseksi.

Yleisesti sivuston rakenne kannattaa miettiä niin, että se muovautuu tarvittaessa erilaisiin tilanteisiin. Mikä toimii juuri nyt ei enää välttämättä toimi vuoden tai kahden päästä.