Liite 1: Käyttöliittymäsuunnittelua ohjaavia dokumentteja. JHS 129, Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet.

Transkriptio

1 Liitteet Liite 1: Käyttöliittymäsuunnittelua ohjaavia dokumentteja Suomi JHS 129, Julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteet. Verkkopalvelujen laatukriteeristö Valtiovarainministeriön laatuohje. (Kohdat 4.2, 4.3, ym.) EU eeurope 2002: Julkisen sektorin verkkosivujen ja niiden sisällön saavutettavuus. Maailma WCAG 2.0 W3 konsortion saavutettavuusohjeisto. (Taso A: Jos tätä tasoa ei toteuteta, joidenkin ryhmien on mahdotonta käyttää sivua.) Työkaluja WCAG 2.0 muokattava tarkistuslista (Esim A tason vaatimusten tarkasteluun.) Wave, esteettömyyden testaustyökalu.

2 Liite 2 Käyttöliittymärakenteet ja tiedon visualisointi Tässä liitteessä esitellään käyttöliittymäryhmän pohtimia vaihtoehtoisia tapoja jäsentää visuaalisesti tietoa. Koosteen tarkoituksena on antaa ideoita toimivalle, käyttäjäystävälliselle järjestelmälle niin, että Tiptop projektissa määritellyt heuristiset tavoitteet toteutuvat. Käytännössä tämä tarkoittaa sitä, miten tieto on jäsennelty, millä logiikalla käyttäjä navigoi järjestelmässä ja yksityiskohtaisemmalla tasolla sitä, mikä on käyttöliittymän lopullinen layout ja minkälaista tyyliä eri käyttöliittymäelementtien suunnitelussa noudatetaan. Yksi käyttöliittymätiimin tavoitteista käyttäjäystävällisen järjestelmän luomisen lisäksi on esitellä vaihtoehtoisia, innovatiivisia käyttöliittymäratkaisumalleja, joista järjestelmän toteutusvaiheessa voidaan valita mieluisin Tiptop tietomallin esittämiseen. Näitä innovatiivisia ratkaisumalleja ollaan poimittu muun muassa videopelimaailmasta, sosiaalisista medioista, tieteellisistä artikkeleista liittyen tiedon visualisointiin ja erilaisista portaaliratkaisuista foorumeista joita kohderyhmämme, nuoret opiskelijat, käyttävät päivittäin. Yhdeksi uudentyyppiseksi käyttöliittymässä esitettäväksi komponentiksi on suunniteltu aikajanan kautta tapahtuvaa visualisointia opiskelijan etenemisestä opintopolullaan. Tällaisella havainnollistamisella oppija pystyy aiempaa paremmin jäsentämään asemoitumistaan opintopolullaan sekä arvioimaan haluttuja mittareita vasten suoriutumistaan eri opintojen osissa tai opinnoissa kokonaisuudessaan. Projektissa ei ole tehty vielä päätöstä käyttöliittymässä eri osioissa hyödynnettävistä käyttöliittymän rakennemalleista ja visualisointitavoista. Tehtävien päätösten mukaisesti standardia tarkennetaan, kun palvelukohtaisesti on päätetty halutusta esittämistavasta Lineaarinen rakenne (wizard, aikajana ja Ganttin kaavio)

3 Lineaarinen rakenne Käyttöliittymässä navigoidaan lineaarisesti niin, että syvemmälle tasolle pääsee askel kerrallaan. Takaisin päätasolle navigoiminen tapahtuu peruuttamalla aikaisemmat vaiheet. Tällaisia käyttöliittymämalleja ovat muun muassa wizard tyyliset käyttöliittymät ja modernimpana versioina aikajana, jossa navigointi on huomattavasti tehokkaampaa, sillä alemman aikatason valikot aukeavat väliklikkailuiden sijasta skrollaamalla tai vetämällä. Usein sijaintia indikoidaan käyttäjälle sivutuksella tai aikajanatyylisessä käyttöliittymässä fyysisenä mittarina. Aikajana Lineaarisessa rakenteessa on hyvää se, että eteneminen on selkeää ja ohjattua. Huonoa puolestaan se, että käyttöliittymä ei välttämättä ole tehokas tiedon etsinnän kannalta ja vaikka aikajanassa ajanjakson pystyy visuaalisesti tehokkaasti esittämään, kokonaisuuden hahmottaminen voi tuottaa vaikeuksia.

4 Vaadin addonilla toteutettu Ganttin kaavio. Ganttin kaavio koostuu aikajanalle sijoitetuista tehtävistä. Aikajana kulkee vaakatasossa, pystytasolle sijoitetaan tehtävät siten, että ne ovat aikajanalla palkkeina alkamis ja loppumisajankohtansa mukaan. Tehtävien riippuvuutta voidaan kuvata palkista toiseen osoittavilla nuolilla. Nykyhetki voidaan merkitä pystysuoralla viivalla, ja tehtävien eteneminen palkkien värityksellä. Ganttin kaaviota voidaan kohtuullisen vähällä vaivalla soveltaa opintojen visualisoimiseen. Aikaskaalaksi esim. periodit, jonka jälkeen "tehtäviksi" yksittäisiä opintojaksoja. Opiskelija voi ajastaa itse määrätyt jaksot (esseet ym.), ja ne, joista tieto on, opetusohjelmasta. Kurssien keskeiset riippuvuudetkin voitaisiin tehokkaasti esittää flow nuolilla. Lisäksi opiskelija voisi lisätä ja ajoittaa vapaasti omia tehtäviään kaavion pohjalle (etsin kirjallisuutta, kirjoitan tutkielmaa, käyn salilla jne.).

5 3.2.2 Kalanruotorakenne Kalanruotorakenne Kalanruotomalli mahdollistaa sivupolkujen yhdistämisen lineaariseen rakennemalliin. Monet aikajanakäyttöliittymät ovat myös kalanruotomallisia, kuten facebook. Kalanruotomalli mahdollistaa yhden solmun päähän ylettyvää hierarkiaa Lumihiutalemalli Lumihiutalemalli Lumihiutalemalli mahdollistaa osioiden välillä tehokkaan navigoinnin. Alasivuilta pääsee kulkemaan muille samantasoisille sivuille ilman ylätasolle palaamista. Lumihiutalemalli on yksinkertainen kuvaus monihierarkiamallista.

6 3.2.4 Verkostorakenne Verkostorakenne Verkostorakenteessa navigointi on vielä vapaampaa kuin lumihiutalemallissa. Verkostorakenteessa jokaisesta yksittäisestä elementistä pystyy navigoimaan vapaasti minne tahansa. Kyseinen rakenne on vapaa ja tehokas, mutta haasteellinen käytettävyyden näkökulmasta: käyttäjä eksyy helposti ja navigaatioelementtejä yhdessä näkymässä on paljon Puurakenne Puurakenne on perinteisen hierarkisen tiedon rakennemalli. Navigointi tapahtuu pääkategoriasta alemmille hierarkiatasoille aina yhtä polkua käyttämällä. Alimmilta sivuilta on usein oikotie takaisin pääkategoriaan tai pää / etusivulle. Puurakenne Puurakennehierarkia esitettynä kiekon muodossa Tässä visualisointimallissa on hyvää se, että kokonaisuuden hahmottaa heti mutta huonoa

7 se, että se tuottaa haasteita pitää näkymä selkeänä erityisesti jos taitekohdissa on esitettävää teksti informaatiota. Tämän mallin lisäksi käyttäjälle pitäisi tarjota joko vaihtoehtoinen näkymä tai suunnitella kiekko visuaalisesti niin toimivaksi, että pelkästään sen avulla pystyisi navigoimaan. Ajan esittäminen kyseisessä muodossa voi myös olla haasteellista. Kiekkorakenne Toinen vaihtoehtoinen tapa esittää puuhierarkia on ympyrän muoto.

8 Puurakennehierarkia esitettynä spiraalin muodossa

9 Kuva: Visual exploration of large data sets. Daniel A Keim. Association for Computing Machinery. Communications of the ACM; Aug 2001; 44, 8; ABI/INFORM Global Kolmas mahdollinen tapa puurakenteisen hierarkian kuvaamiseen on puun vääntäminen spiraalimuotoon.spiraalirakenne Puurakennehierarkia esitettynä pallona Jos tietoa on paljon, voi kiekkohierarkia laajentaa myös 3D pallon muotoon. Tällaisessa lähetystymistavassa voisi käyttää mallina erilaisia pelikäyttöliittymiä ja skenaarioita. 3D pallon edut olisivat siinä, että opintopolun havaitsemiseen saisi syvyysvaikutelman lisäksi esitystilaa kaikkiin ilmansuuntiin. Tämä innovatiivinen käyttöliittymärakenne saattaisi tarvita vaihtoehtoisen navigointiratkaisun, mutta mahdollisesti pelkkä haku voisi riittää.

10 Pallonavigointimalli Skyrim pelistä Käyttäjä navigoi Skyrim pelissä horisontaalisesti 3D pallossa oikealle ja vasemmalle. Navigaatiota voisi laajentaa myös vertikaaliseen suuntaan (ylös/alas) ja miksei myös syvyyssuuntaan. Videoesimerkki Skyrim pelin pallonavigaatiosta Cushion treemap Tämä menetelmä on kehitetty alunperin kansio ja tiedostoluetteloiden visualisointiin. Tämä hierarkian visualisointimalli voisi toimia ideoinnin tukena, mutta ei varsinaisesta käyttöliittymämallina Tiptop projektissa. Kuva: Jarke J. Van Wijk, Frank Van Ham, Huub Van De Wetering Rendering Hierarchical Data

11 Kyseinen esimerkkikuva on Windows käyttöjärjestelmän kansiorakenteesta visualisoitu kuva jossa punaiset pikkulaatikot vasemmalla indikoivat kansiorakenteeseen tallennettuja kuvia. Väreillä on tarkoitus indikoida tiedostotyyppiä. Punaiset neliöt ovat itseasiassa useaan eri kansioon tallennettujen useiden eri animaatioden yksittäisiä kuvaframeja jotka vievät kovalevyltä suuren määrän tilaa. Vihreät neliöt ovat suuria videotiedostoja ja violetti arkistokansion tiedostoja. Vaikkakin visualisointi tällaisenaan saattaa näyttää kaoottiselta, on kokonaisuuksien suhteellinen laajuus kuitenkin esitetty selkeästi. Tyynypuukartoissa voidaan lisäksi käyttää varjostusta korostamaan kolmiulotteista vaikutelmaa. Tyynypuukartta Tiptop projektissa tätä visualisointitapaa voisi hyödyntää esimerkiksi niin että opintojen kokonaisuudet (opintopisteet) esitettäisiin numeroiden sijaan visuaalisina mittareina, esim. eri kokoisina neliöinä. Cushion treemapista, Beamtreestä ja Botnical Treenstä voi lukea enemmän Rendering Hierarchial Data artikkelista Beamtree

12 Kuva: Jarke J. Van Wijk, Frank Van Ham, Huub Van De Wetering Rendering Hierarchical Data Putkimainen kuvaus erilaisista käyttöjärjestelmän tiedostorakenteista ja niiden viemästä tilasta. Lapsiputket ovat kääntyneet 90 suhteessa vanhempiinsa. Hierarkian lehtitasot on esitetty värikkäinä juovina edellisen tason ympärillä, jotta vältyttäisiin massiiviselta määrältä minimaalisia putkenpätkiä Botanical Tree

13 Kuva: Jarke J. Van Wijk, Frank Van Ham, Huub Van De Wetering Rendering Hierarchical Data Hierarkian selkeyttämiseksi jos lehtiä puumallissa on paljon, niputetaan ne hedelmän muotoon Monihierarkiat Perinteisessä hierarkiamallissa alemmalle tasolle navigointi tapahtuu yhtä polkua käyttäen. Multihierarkisessa mallissa alemmille hierarkian tasoille liikkumiseen tarjotaan useita eri mahdollisuuksia. Tässä kappaleessa pohditaan erilaisten monihierarkisten mallien eroja ja mahdollisuuksia. Multihierarkiamallit mahdollistavat intuitiivisen ja tehokkaan tavan porautua järjestelmässä syvimmille hierarkiatasolle säilyttäen visuaalisen selkeyden ja säästäen näyttötilaa. Hyvin toteutettuna multihierarkiamallit ovat erittäin intuitiivisia käyttää ja visuallisia: käyttäjä saa käytön aikana heti selkeät kuviomallit järjestelmässä käytetystä logiikasta ja siitä mikä on fokuksen ja siihen liittyvän kontekstin välinen suhde. Monihierarkisisista malleista voi lukea lisää Mississippi State University:n laatimasta artikkelista InterRing malli InterRing mallin avulla pystytään selkeästi esittämään kokonaisuudet ja näihin liittyvät osakokonaisuudet yhdellä näkymällä. Malli on hyvin visuaalinen mutta tällaisenaan hankala soveltaa suoraan käyttöliittymäksi ilman lisäjalostuksia. InterRing malli

14 Zoomology malli Zoomologisessa monihierarkiamallissa esitetään kolmen tason hierarkia yhdellä näkymällä niin että lapsisolmut näkyvät vanhempiensa sisällä. Kokonaisuuksien visuaalisuuden parantamiseksi lapsisolmut voi värjätä joko tummemmalla tai vaaleammalla sävyllä. Zoomology malli Moire Trees malli Moire Tree malli käyttää samaa lähestymistapaa hierarkian esittämiseen kuin Zoomology mutta on astetta kehittyneempi versio. Moire Tree näyttää puun koko polun eikä pelkästään läheisimpiä vanhempia. Kokonaishierarkian visualisointiin sovelletaan usein ns. kalansilmä objektin kaltaista efektiä jolla venytetään näkymä niin että moniuloitteinen tieto saadaan sovitettua 2D näkymään paremmin. Tämän monihierarkiamallin avulla voi esittää paljon tietoa intuitiviisesti ja niin että syy yhteys säilyy. Tämän mallin etuja: fokus&konteksti yhteys näkyy, navigointi hyvin suunniteltuna olisi visuaalista, näkymätilaa ei menisi paljoa ja järjestelmä olisi samalla tehokas sekä käyttäjäystävällinen. Haasteena tässä mallissa voi olla sovellettavuus.

15 Kuva: M.J Mohammadi Aragh & T.J. Jankul Kelly / MoireTrees: Visualization and Interaction for Multi Hierarchial Data Pyramidi ja labyrinttirakenne Pyramidimalli Pyramidi ja labyrinttimallissa käyttäjä pystyy valitsemaan oman tapansa kulkea läpi järjestelmän. Tällaista navigointitapaa hyödynnetään usein pelimaailmassa, jossa käyttäjän valinta vaikuttaa suoraan siihen miten hän pääsee etenemään.

16 Labyrinttimalli Tätä voisi Tiptop projektissa hyödyntää muun muassa niin, että riippuen siitä minkälaisia valintoja opiskelija opintonsa kanssa tekee, suositeltaisiin hänelle valintojaan tukevia muita opintoja Matriisirakenne

17 Matriisirakenne Matriisirakenne kategorisoi sisältämänsä tiedon yleensä kahta dimensiota käyttäen. Kaksidimensoisessa matriisissa tieto on jaettu sivuille kokonaisuuksiin, joiden välillä voidaan navigoida kahdella eri tavalla. Molemmat tavat luokittelevat saman tiedon eri kriteereillä. Navigointi elementtien välillä on rakennettu siten, että käyttäjä pääsee liikkumaan molempien dimensioiden sisällä tiedosta toiseen lineaarisesti. Näin matriisissa pääsee navigoimaan jokaisessa pisteessä horisontaalisesti ja vertikaalisesti. Esimerkkinä Tiptop projektissa tämä voisi olla vaikkapa Käytettävyys opinnot. Tiptop järjestelmä voisi luokitella käytettävyyden opinnot kahta dimensiota käyttäen. Ensimmäinen dimensio voisi olla koulutusohjelma tai tiedekunta, joka tarjoaisi käytettävyyteen liittyviä opintoja, kuten Digitaalisen viestinnän koulutusohjelma ja toinen dimensio Käytettävyysopinnot, jonka kautta tulisi kaikki käytettävyyteen liittyvät opinnot tiedekunnasta tai koulutusohjelmasta riippumatta Fasettiluokitusrakenne Fasettiluokituksessa tieto jaetaan myös kahteen tai useampaan dimensioon eli fasettiin, kuten matriisiluokituksessa, mutta jokainen fasetti voi käyttää mitä tahansa luokitustapaa. Fasettiluokitus on erittäin joustava, sillä fasettien määrää ei tarvitse rajata, ja jokaista fasettia voidaan määritellä riippumattomasti muista faseteista. Tällaisia esimerkkejä voisi olla erilaiset hakukoneet joissa on paljon rajausmahdollisuuksia. Tiptop projektissa tämä voisi tarkoittaa muun muassa sitä, että yksi fasetti olisi koulutusohjelma, yksi fasetti aikuisopiskelija/nuoriso opiskelija, yksi fasetti YAMK/AMK jne. ja sen perusteella järjestelmä hakisi käyttäjälle halutun opintopolun Vapaan sanan luokitukset (taggays) Vapaan sanan luokitus tarkoittaa sitä, että ei ole olemassa mitään ennalta sovittua ja määriteltyä tapaa luokitella tietoa, vaan käyttäjät itse luokittelevat tietonsa tagien mukaan järjestelmään. Kun suuri määrä käyttäjiä käyttää samoja tageja, muodostuu pikkuhiljaa luokittelujärjestelmä. Sinänsä tagitys ei tämänkaltaisessa järjestelmässä ole relevantti toiminto, sillä sisältö tuotetaan ECTS vaatimusten pohjalta ja opinnot ovat virallisesti yhden instanssin tekemiä. Tageja Tiptop järjestelmässä voisi tarjota opiskelijakäyttäjälle lähinnä oman tiedonhallinnan tueksi. Käyttäjä voisi muunmuassa tagien lisäksi lajitella opintonsa itse nimettyihin kategorioihin: Omat proggikset, Pakolliset hommat jne.