Visuaalinen navigointi

Visuaalinen navigointi tarjoaa katalogimaisen tavan selata verkkoalustan sisältöä. Sen avulla käyttäjä voi siirtyä aineistokokonaisuudesta toiseen kuvallisten ja hierarkkisesti järjestettyjen navigointikohteiden avulla.

Visuaalinen navigointi soveltuu erityisesti tilanteisiin, joissa sisältöä halutaan esitellä käyttäjälle esimerkiksi aiheittain, kokoelmittain, paikoittain tai aineistotyypeittäin.

Navigointikohde voi:

• avata kohteen alapuolella olevat navigointitasot
• näyttää kohteeseen liittyvän rajatun hakutuloksen
• toimia otsikkona tai visuaalisena nostona ilman linkkiä.

Visuaalisen navigoinnin rakenne, sisältö ja ulkoasu määritetään organisaatiokohtaisesti.

Navigoinnin rakenne

Visuaalinen navigointi muodostuu hierarkkisesti järjestetyistä kohteista.

Ylimmän tason kohteet voivat kuvata esimerkiksi:

• aineistotyyppejä
• aihealueita
• kokoelmia
• paikkoja
• ajanjaksoja
• tapahtumia
• teema- tai sisältökokonaisuuksia.

Kohteiden alapuolelle voidaan sijoittaa tarkempia alakohteita. Näin käyttäjä voi edetä yleisestä aiheesta yksityiskohtaisempaan sisältöön.

Navigointitasojen määrä riippuu valitusta rakenteesta ja verkkoalustan konfiguraatiosta.

Visuaalisen navigoinnin käyttöönotto

Visuaalista navigointia varten valitaan Collection Prosta hierarkkinen objektityyppi, jonka kohteita käytetään navigoinnin rakenteena.

Valittu objektityyppi voi olla esimerkiksi:

• aihe
• kokoelma
• paikka
• luokitus
• organisaation oma hierarkkinen sisältörakenne.

Objektityypin kohteisiin liitetään ne aineistot, jotka halutaan näyttää kyseisen navigointikohteen kautta.

Kun käyttäjä valitsee kohteen verkkoalustalla, hakutulos rajautuu siihen liitettyihin aineistoihin. Samalla käyttäjälle voidaan näyttää kohteen alakohteet.

Visuaalisen navigoinnin rakenteesta ja käyttöönotosta sovitaan tavallisesti verkkoalustan määrittelyn yhteydessä. Jos rakenteeseen halutaan myöhemmin merkittäviä muutoksia, ota yhteyttä palvelun pääkäyttäjään tai ylläpidosta vastaavaan henkilöön.

Visuaalisen navigoinnin kentät

Visuaalisessa navigoinnissa näytettävän kohteen ominaisuudet määritetään Collection Prossa kohteen tiedoissa.

Täydennettävät kentät

Kenttä	Tekninen kenttänimi	Kuvaus
Otsikko	awp_vn_title	Anna kohteelle lyhyt, kuvaava ja helposti ymmärrettävä otsikko.
Kuvaus	awp_vn_description	Anna kohteelle tarvittaessa lyhyt kuvaus.
Kuva	awp_vn_image	Lisää kohdetta ja sen sisältöä edustava kuva. Kentässä voidaan käyttää myös linkitettyä objektia.
Järjestys	awp_vn_order	Määritä kohteen sijainti suhteessa muihin saman tason kohteisiin. Pienemmällä numerolla varustettu kohde näytetään ensin.
Leveys	awp_vn_width	Määritä kohteen näyttöleveys ja tarvittaessa se, onko kohde klikattava.
Pitkä kuvaus	awp_vn_description_top_header	Anna valitulle kohteelle tarvittaessa laajempi esittelyteksti.

Kaikkien kenttien täyttäminen ei välttämättä ole pakollista. Vähintään otsikko, kuva, järjestys ja leveys tarvitaan tavallisesti kohteen tarkoituksenmukaiseen näyttämiseen.

Käytettävissä olevat kentät voivat riippua oman palvelun määrittelystä.

Otsikko

Otsikon tulee kertoa selkeästi, mitä sisältöä kohteen kautta löytyy.

Hyvä otsikko on:

• lyhyt
• yksiselitteinen
• käyttäjän näkökulmasta ymmärrettävä
• yhdenmukainen muiden samalla tasolla olevien otsikoiden kanssa.

Vältä tarpeettoman pitkiä otsikoita, sillä niiden esitystapa voi vaihdella näyttökoon mukaan.

Esimerkiksi Kuvat on yleensä selkeämpi otsikko kuin Organisaation hallinnoimat digitoidut kuvakokoelmat.

Kuvaus

Kuvauksella voidaan täydentää otsikkoa ja kertoa tarkemmin kohteen sisällöstä.

Pidä kuvaus lyhyenä ja keskity käyttäjän kannalta olennaiseen tietoon. Kuvauksen tarkoituksena on auttaa käyttäjää arvioimaan, mitä kohteen kautta löytyy.

Kaikissa verkkoalustan näkymissä kuvausta ei välttämättä näytetä.

Aktiivisen kohteen pitkä kuvaus

Pitkä kuvaus näytetään, kun navigointikohde on valittu aktiiviseksi suodattimeksi.

Sitä voidaan käyttää esimerkiksi:

• sisältökokonaisuuden esittelyyn
• taustatietojen kertomiseen
• käyttöohjeiden antamiseen
• valitun aiheen tai kokoelman tarkempaan kuvaamiseen.

Pitkän kuvauksen tulee täydentää otsikkoa ja lyhyttä kuvausta. Vältä tarpeetonta toistoa.

Teksti kannattaa jäsentää lyhyiksi kappaleiksi, jotta se on helppo lukea myös pienellä näytöllä.

Kuva

Kuva toimii navigointikohteen tärkeimpänä visuaalisena tunnisteena.

Valitse kuva, joka:

• vastaa kohteen sisältöä
• on riittävän tarkka
• toimii myös pienessä koossa
• ei sisällä liikaa pieniä yksityiskohtia
• sopii yhteen muiden saman näkymän kuvien kanssa
• kestää automaattista rajaamista.

Sijoita kuvan tärkein sisältö mahdollisuuksien mukaan lähelle kuvan keskiosaa. Verkkoalusta voi rajata kuvan eri tavalla näytön koon ja kohteen leveyden perusteella.

Vältä kuvien käyttämistä siten, että kohteen merkitys välittyy vain kuvasta. Sisällön tulee käydä ilmi myös otsikosta.

Kuvan käyttäminen linkitetystä objektista

Kuvakenttä voidaan määrittää myös linkitetyn objektin kentäksi.

Tällöin verkkoalusta käyttää navigointikuvana linkitetystä objektista löytyvää ensimmäistä aineistoa.

Varmista tällöin, että:

• linkitetty objekti sisältää sopivan kuvan tai muun esikatseltavan aineiston
• ensimmäinen aineisto edustaa navigointikohdetta
• aineisto voidaan näyttää verkkoalustalla
• kuvan rajaus toimii navigointinäkymässä.

Jos sopivaa aineistoa ei löydy, kohde voidaan näyttää ilman kuvaa tai palvelussa määritetyllä oletuskuvalla.

Järjestys

Järjestys määrittää, missä järjestyksessä saman tason kohteet näytetään.

Pienemmällä numerolla varustettu kohde näytetään ennen suuremmalla numerolla varustettua kohdetta.

Esimerkiksi:

Kohde	Järjestys
Valokuvat	10
Esineet	20
Arkistoaineistot	30

Järjestysnumeroihin kannattaa jättää välejä. Näin uusia kohteita voidaan lisätä myöhemmin ilman, että kaikkien muiden kohteiden numeroita tarvitsee muuttaa.

Jos usealla kohteella on sama järjestysnumero, niiden keskinäinen järjestys ei välttämättä ole ennakoitavissa.

Leveys

Leveys määrittää, kuinka suuren osan käytettävissä olevasta rivistä kohde peittää.

Käytettävät arvot ovat:

Arvo	Näyttöleveys
1	Kohde peittää koko käytettävissä olevan leveyden.
2	Kohde peittää puolet käytettävissä olevasta leveydestä.
4	Kohde peittää neljäsosan käytettävissä olevasta leveydestä.

Esimerkiksi:

• yksi arvolla 1 määritetty kohde täyttää koko rivin
• kaksi arvolla 2 määritettyä kohdetta voidaan näyttää samalla rivillä
• neljä arvolla 4 määritettyä kohdetta voidaan näyttää samalla rivillä
• yksi arvolla 2 ja kaksi arvolla 4 määritettyä kohdetta voidaan näyttää samalla rivillä.

Kohteiden todellinen esitystapa riippuu käytettävissä olevasta näyttötilasta. Mobiililaitteella kohteet voidaan näyttää allekkain leveysasetuksesta riippumatta.

Leveyksien käytössä kannattaa noudattaa selkeää ja yhdenmukaista rakennetta. Suurempaa leveyttä voidaan käyttää esimerkiksi tärkeimmille nostoille tai sisältökokonaisuuksien otsikoille.

Ei-klikattava kohde

Kohteesta voidaan tehdä ei-klikattava lisäämällä miinusmerkki leveyden arvon eteen.

Käytettävät arvot ovat:

Arvo	Toiminta
-1	Koko rivin levyinen ei-klikattava kohde
-2	Puolen rivin levyinen ei-klikattava kohde
-4	Neljäsosan rivin levyinen ei-klikattava kohde

Ei-klikattavaa kohdetta voidaan käyttää esimerkiksi

• väliotsikkona
• osion esittelynä
• visuaalisena nostona
• navigointirakennetta jäsentävänä elementtinä.

Ei-klikattavaa kuvaa ei kannata käyttää sellaisessa kohdassa, jossa käyttäjä voisi olettaa sen johtavan sisältöön. Klikattavien ja ei-klikattavien kohteiden tulee erottua toisistaan selkeästi.

Navigointikohteen toiminta

Kun käyttäjä napsauttaa visuaalisen navigoinnin kohdetta, kyseinen kohde valitaan aktiiviseksi suodattimeksi.

Hakutuloksessa näytetään aineistot, jotka on liitetty valittuun kohteeseen. Samalla näkymässä voidaan näyttää:

• valitun kohteen alakohteet
• kohteen otsikko
• kohteen pitkä kuvaus
• aktiivinen suodatin
• valittuun kohteeseen liittyvien aineistojen hakutulos.

Käyttäjä voi jatkaa selaamista valitsemalla alakohteen tai palata takaisin navigoinnin ylemmälle tasolle.

Ei-klikattavan kohteen valitseminen ei muuta hakutulosta eikä aktiivista suodatinta.

Oletuksena näytettävä juurikohde

Visuaaliseen navigointiin voidaan määrittää oletuksena näytettävä juurikohde.

Juurikohde näytetään uuden istunnon alussa silloin, kun käyttäjä ei ole vielä valinnut muuta navigointikohdetta.

Juurikohdetta voidaan käyttää esimerkiksi:

• navigoinnin aloitusnäkymänä
• koko sisältörakenteen ylimpänä tasona
• tietyn sisältökokonaisuuden oletusnäkymänä
• käyttäjälle näytettävien ensimmäisten navigointivaihtoehtojen rajaamiseen.

Käyttäjän ei tarvitse ylläpitää juurikohteen teknistä asetusta. Jos oletuksena näytettävää kohdetta halutaan vaihtaa, ota yhteyttä palvelun pääkäyttäjään tai ylläpidosta vastaavaan henkilöön.

Kohteen lisääminen visuaaliseen navigointiin

Näin lisäät kohteen visuaaliseen navigointiin:

1. Avaa Collection Prossa hierarkkisen objektityypin kohde, jonka haluat näyttää visuaalisessa navigoinnissa.
2. Täytä kohteen otsikko.
3. Lisää tarvittaessa lyhyt kuvaus.
4. Lisää kohdetta edustava kuva tai linkitä kuvana käytettävä objekti.
5. Anna kohteelle järjestysnumero.
6. Määritä kohteen leveys.
7. Lisää tarvittaessa pitkä kuvaus.
8. Tallenna muutokset.
9. Tarkista kohteen esitystapa verkkoalustalla.

Muutokset eivät välttämättä näy verkkoalustalla välittömästi. Päivittymiseen voivat vaikuttaa palvelun välimuisti ja hakemiston päivittyminen.

Hierarkian muokkaaminen

Visuaalisen navigoinnin rakenne perustuu valitun objektityypin hierarkiaan.

Kohteen sijainti hierarkiassa määrittää:

• millä navigointitasolla se näytetään
• minkä kohteen alapuolella se sijaitsee
• mitkä kohteet näytetään sen alakohteina.

Kun kohde siirretään hierarkiassa toisen kohteen alle, myös sen sijainti visuaalisessa navigoinnissa muuttuu.

Ennen rakenteen muuttamista tarkista, käytetäänkö samaa hierarkiaa myös:

• suodattimissa
• hakutoiminnoissa
• aineistojen luokittelussa
• käyttöoikeuksissa
• muissa verkkoalustan näkymissä
• integraatioissa.

Laajoista hierarkiamuutoksista kannattaa sopia palvelun pääkäyttäjän kanssa.

Esimerkki visuaalisen navigoinnin rakenteesta

Museon visuaalinen navigointi voisi muodostua esimerkiksi seuraavasti:

• Kokoelmat
  • Valokuvakokoelma
  • Esinekokoelma
  • Taidekokoelma
• Aiheet
  • Rakennukset
  • Henkilöt
  • Tapahtumat
• Paikat
  • Kaupunginosat
  • Kunnat
  • Historialliset alueet.

Ylimmän tason kohteet voidaan näyttää suurina nostoina ja niiden alakohteet pienempinä navigointikortteina.

Rakenteen tulee perustua käyttäjän tapaan etsiä sisältöä. Organisaation sisäinen luokittelurakenne ei aina sellaisenaan sovellu julkisen palvelun navigoinniksi.

Suunnittelussa huomioitavaa

Visuaalista navigointia suunniteltaessa huomioi seuraavat asiat:

• Käytä samalla tasolla yhdenmukaisia otsikoita.
• Pidä navigointitasojen määrä kohtuullisena.
• Vältä liian suurta kohdemäärää samalla tasolla.
• Käytä keskenään yhtenäisiä kuvia.
• Sijoita tärkeimmät kohteet ensimmäisiksi.
• Käytä leveyksiä johdonmukaisesti.
• Vältä turhaa vaihtelua suurten ja pienten kohteiden välillä.
• Varmista, että hierarkia vastaa käyttäjien tarpeita.
• Tarkista, ettei sama sisältö löydy tarpeettomasti usean eri kohteen kautta.
• Testaa navigointia sekä työpöytä- että mobiilinäkymässä.

Navigointikohteiden otsikoiden ja kuvien tulisi muodostaa selkeä kokonaisuus, jonka käyttäjä ymmärtää ilman erillistä ohjeistusta.

Saavutettavuus

Visuaalisen navigoinnin tulee olla ymmärrettävä ja käytettävissä myös ilman kuvien visuaalista tulkintaa.

Huomioi erityisesti seuraavat asiat:

• Anna jokaiselle klikattavalle kohteelle kuvaava otsikko.
• Älä välitä olennaista tietoa vain kuvan tai värin avulla.
• Varmista tekstin ja taustan riittävä kontrasti.
• Vältä tekstin sijoittamista kuvan päälle, jos luettavuutta ei voida varmistaa.
• Käytä selkeitä ja johdonmukaisia otsikoita.
• Varmista, että klikattavat ja ei-klikattavat kohteet erottuvat toisistaan.
• Vältä kuvia, joissa on olennaista pientä tekstiä.
• Tarkista navigoinnin toiminta eri näyttöko’oissa.
• Varmista, että kohteiden lukemisjärjestys on looginen.

Kuvien vaihtoehtoiset tekstit ja muut saavutettavuuteen liittyvät ominaisuudet riippuvat verkkoalustan toteutuksesta.

Verkkoalustan mukautus

Visuaalisen navigoinnin ulkoasu voidaan mukauttaa organisaation visuaaliseen ilmeeseen.

Mukautettavia ominaisuuksia voivat olla esimerkiksi:

• kirjasimet
• tekstien koko ja sijoittelu
• värit
• taustat
• kuvien kuvasuhteet ja rajaukset
• korttien välit ja reunukset
• otsikoiden ja kuvausten esitystapa
• kohteiden valinta- ja osoitustilat
• näkymän käyttäytyminen eri näyttöko’oissa.

Mukautuksissa tulee huomioida visuaalisen ilmeen lisäksi käytettävyys, saavutettavuus ja yhtenäisyys verkkoalustan muiden näkymien kanssa.

Ulkoasuun liittyvät muutokset toteuttaa tavallisesti verkkoalustan ylläpitäjä.

Huomioitavaa

• Visuaalista navigointia varten käytettävän objektityypin tulee olla hierarkkinen.
• Navigointikohteisiin tulee liittää ne aineistot, jotka halutaan näyttää kohteen kautta.
• Täytä vähintään kohteen otsikko, kuva, järjestys ja leveys.
• Kuvan laatu ja rajaus vaikuttavat merkittävästi navigoinnin ulkoasuun.
• Kohteiden järjestys ja leveys vaikuttavat koko näkymän sommitteluun.
• Hierarkian muuttaminen voi vaikuttaa myös hakuihin, suodattimiin ja aineistojen luokitteluun.
• Jos kuvana käytetään linkitetyn objektin aineistoa, varmista, että ensimmäinen aineisto soveltuu navigointikuvaksi.
• Tarkista muutosten jälkeen navigoinnin toiminta verkkoalustalla.
• Epäselvissä tilanteissa ota yhteyttä palvelun pääkäyttäjään tai ylläpidosta vastaavaan henkilöön.