Oskari UX Guide 27.10.2015 Cybercom Finland Oy
Sisältö Käyttöliittymäsuunnittelun periaatteet 3 Yleinen asettelu 4 Asettelu päänavigaatiossa 5 Asettelu karttanäkymässä 6 Asettelu eri laatikkotyypeissä 7 Asettelu lomakkeella 8 Asettelu erillisessä toiminnossa 9 Komponentit 11 Painikkeet ja tekstilinkit 11 Radio button ja check-box 11 Info-ikoni 11 Ilmoitukset 12 Välilehdet 13 Karttataso-otsikot 13 Vuorovaikutus 16 Toimintojen avaaminen 16 Valinnan poistaminen 16 Vuorovaikutus kartalla 16 Toimintopainikkeet 16 Latauksen indikaatio 17 Nimeäminen ja ilmoitukset 18 Toiminnot 18 Painikkeet 18 Ilmoitukset 18 Ohjetekstit 19 Kielellinen tyyli 19 Käyttöohjeet 19 Taulukot 14 Värit ja Typografia 15 Typografia 15 Värit 15 2
Käyttöliittymäsuunnittelun periaatteet Näiden visuaalisten periaatteiden ja avulla käyttöliittymään saadaan luotua eheä ja toimiva käyttökokemus. Yhtenäisyys Ryhti Vähentäminen Käyttöliittymän tulee olla kauttaaltaan visuaalisesti sekä käyttölogiikaltaan yhtenäinen. Elementtien asetelussa tulee noudattaa sääntöjä. Tällöin elementit eivät jää leijailemaan. Käyttöliittymää kehittäessä tulee aina pohtia: Onko tämä tarpeen? 3
Yleinen asettelu Karttaikkuna koostuu kahdesta pääelementistä: Päänavigaatio-palkista ja Karttanäkymästä. Päänavigaatio Päänavigaatiossa on linkki palvelun päätoiminnallisuuksiin. Toimintojen keskinäinen järjestys määräytyy niin, että eniten käytetyt toiminnot ovat sijoitettuna navigaatiolistaan ensimmäisenä. Karttanäkymä Karttanäkymässä esitetään käyttäjän valitsemat karttatasot. Valittujen tasojen määrä on näkyvissä päänavigaatiossa Karttatasot-kohdassa korostettuna keltaisella. Päänavigaatiosta avautuvat toiminnot pääasiassa karttanäkymän päälle Flyoutlaatikoihin. Erilliset toiminnot, jotka estävät muiden toiminnallisuuksien käytön avautuvat niin, että päänavigaatio piilotetaan toimintojen ajaksi käyttöliittymästä. Tälläisiä toimintoja ovat esimerkiksi Karttajulkaisu ja Analyysi. Karttaikkunan rakenne Päänavigaatio Karttanäkymä 4
Asettelu päänavigaatiossa Päänavigaatiossa on linkki palvelun päätoiminnallisuuksiin. Toiminnot on järjestetty niin, että ne muodostavat loogisen listan. Listalla olevat selkeät toimintoryhmät erotellaan toisistaan erotteluviivan avulla. Toimintojen keskinäinen järjestys määräytyy niin, että eniten käytetyt toiminnot ovat sijoitettuna navigaatiolistan ensimmäisenä. Toiminnot on nimetty substantiiveillä eikä toiminto-otsikoissa esiinnyt verbejä, kuten Tee analyysi. Listalla prioriteettijärjestys Jos toimintoon liittyy toiminnon tilaa ilmaisevia asioita ne ilmaistaa omalla symbolillaan. Karttatasot-toiminnossa ilmaistaan käyttäjien valitsemien karttatasojen määrä. Tieto valittujen tasojen määrästä Päänavigaatiossa vain päätoiminnallisuudet. Mahdollisimman lyhyt lista. Jakava elementti 5
Asettelu karttanäkymässä Näkymän laajentaminen Navigointi Näkymän laajentaminen / supistaminen Karttanäkymässä voi piilottaa päänavigaation laajentamalla karttanäkymän. Navigointi Navigointielementit koostuvat karttaa liikuttavista nuolista, karttanäkymän resetoivasta palautusnuolesta ja zoomaustasoa kuvaavasta +/- -palkista. Navigointielementtien alla oleva sijaintitieto kertoo kursorin sijainnin kartalla tai kursorin viimeisimmän sijainnin kartalla. Mittakaavajana Mittakaavajana esittää janan pituuden valitulla zoomaustasolla metrisen ja brittiläisen mittajärjestelmän arvoina. Käyttöehdot ja Tietolähteet Käyttöehdot on linkki palveluntarjoajan käyttöehtoihin ja käyttöehdot esitetään omassa ikkunassaan. Tietolähteet on listaus valittujen karttatasojen tietolähteistä. Taustakartan valinta Taustakartat ovat kolme vaihtoehtoista valintaa. Valittu taustakartta on korostettu vaalealla taustavärillä. Mittakaavajana Karttatason asetukset Valikko, jossa esitetään valittuun karttatasoon liittyviä asetuksia. Käytössä esimerkiksi Teemakartat-toiminnossa. Käyttöehdot, Tietolähteet Taustakartan valinta Karttatason asetukset 6
Asettelu eri laatikkotyypeissä Flyoutit ovat sisältölaatikoita, jotka aukeavat suoraan vasemman laidan valikosta. Pop-up -dialogit ovat lisätiedon ja lisävalintojen näyttämistä varten. Pop-up -laatikot tulee sijoittaa niihin johtavan linkin tai painikkeen läheisyyteen, mutta sen ei tarvitse olla kiinni linkissä tai painikkeessa (eikä niissä tule olla väkäsiä, jotka osoittavat kohteen, johon laatikko liittyy). Pop-up -dialogit eroavat muista laatikoista erityisesti siten, että palvelussa taustaosa on harmaannutettu ja vain pop-up on käytettävissä. Sääntöjä ja esimerkkejä tilan käytöstä laatikoissa: Kohdetietolaatikko Kohdetietodialogit sisältävät lisätietoa tai lisävalintoja, jotka liittyvät valittuun kohteeseen. Asettelun suhteen kaikissa laatikoissa tulee huomioida, että on suositeltavaa käyttää koko laatikon leveys elementeille, koska se tekee niistä helpommin tavoitettavat sekä pitää asettelun selkeänä. Laatikoissa tulee käyttää ainoastaan näitä kolmea laatikkotyyppiä. Flyout Laatikoissa ei tule käyttää väkäsiä ollenkaan, koska niiden asettelu on ongelmallista ja niiden tuoma lisäarvo on vähäinen. Pop-up Laatikot tulee täyttää leveyssuunnassa marginaaleihin asti aina, kun mahdollista. Tämä tuo asetteluun ryhtiä ja selkeyttä. 7
Asettelu lomakkeella Lomakkeiden komponenttien ja tekstien asettelu. Ympäröivän laatikon marginaalit vaihtelevat laatikkotyypeittäin (ks. Laatikkotyypit). Samalle riville aseteltaessa komponenttien välillä tulee olla 6px rako. 8
Asettelu erillisessä toiminnossa 1/2 Toiminnot ja työkalut, jotka vaativat erityishuomiota tai paljon tilaa ruudulta (esim. Kartan julkaisu, Analyysi ja Teemakartat) voidaan toteuttaa erillisessä näkymässä. Erillinen näkymä tarkoittaa, että taustalla ei näy normaalia karttaa. Erillinen näkymä muistuttaa graafisesti eniten pop-up -dialogia. 9
Asettelu erillisessä näkymässä 2/2 Esimerkki: kartan julkaisu. 10
Komponentit Painikkeet ja tekstilinkit Painikkeita tulee käyttää laatikoiden sisällön lopussa esimerkiksi toimintojen vahvistamiseen tai peruuttamiseen. Painikkeet herättävät käyttäjän huomion. Painikkeet tulee sijoittaa aina laatikon oikeaan alalaitaan (tai riville heti sisällön perään). Primäärinen toimintopainike tulee aina asettaa oikealle ja sekundääriset vasemmalle Tekstilinkkejä tulee käyttää tilanteissa, joissa toimintoja ei haluta nostaa liikaa esille, kuten esimerkiksi taulukoissa, joissa sama toiminto saattaa toistua usealla rivillä. Radio button ja check-box Näiden elementtien käytössä tärkeää on, että valinta on tehtävissä myös klikkaamalla labelia, eli valintatekstiä. Kursorin tuominen tekstin päälle myös aktivoi hover-tilan elementille #e6e6e6 Info-ikoni Ikoni tulee sijoittaa otsikon tai komponentin kanssa samalle riville, välittömään läheisyyteen. 11
Komponentit Ilmoitukset Ilmoitusviestejä on neljää tyyppiä: Vinkki Geneerinen ilmoitus Virhe Onnistuminen Onnistumisilmoitus näytetään ruudulla vain 3 sekunnin ajan, mutta virhe, vinkki ja ilmoitustekstidialogi on noteerattava klikkaamalla ikkunassa olevaa painiketta klikkaamalla. Kaikki ilmoitukset tulee sijoittaa pop-up -laatikoihin (tämä opas sisältää ohjeistuksen laatikkotyypeistä). Virhe- ja onnistumisdialogien otsikkopalkit sisältävät lisäksi ikonit. Ilmoitustekstin laatimisesta lisää osiossa Nimeäminen ja ilmoitukset 12
Komponentit Välilehdet Välilehtiä tulee käyttää ainoastaan flyout-laatikoissa tai erillisissä näkymissä. Välilehtien otsikoiden tyyli: Fontti: 14px (aktiivinen lihavoitu) Tausta: #fafafa Rajaviiva: #999999 Karttataso-otsikot Fontti 16px Tausta: #f3f3f3 Rajaviiva: #999999 13
Komponentit Taulukot Ohessa määritellään taulukon ominaisuuksia. Taulukkoja ei tule käyttää muissa elementeissä kuin flyout-laatikoissa tai erillisissä näkymissä. Kaikkien taulukoiden kaikkien rivien korkeus tulee olla 28px, jollei saraketta jouduta rivittämään. 14
Värit ja Typografia Typografia Karttaikkunassa tulee käyttää Open Sans -fonttia kaikkeen sisältöön. Seuraavassa kirjasinten hierarkia: Värit Ohessa käyttöjärjestelmän värit. Karttaikkunassa tulee käyttää ainoastaan näitä eri fonttivariaatioita, jotta sisältö pysyy mahdollisimman luettavana ja käyttöliittymä pysyy mahdollisimman eheänä. Rivivälin tulee olla 1,5 kertaa kirjasimen korkeus normaalissa tekstikappaleessa, jotta teksti on helposti luettavaa. Otsikoissa rivivälin tulee olla 1,2 kertaa kirjasimen korkeus. Otsikoiden tulee aina olla lähempänä alla olevaa kappaletta. 15
Vuorovaikutus Toimintojen avaaminen Toimintojen avaaminen tapahtuu yksöisklikkauksella. Avattu toiminto näkyy valikossa korostettuna valkoisella. Vuorovaikutus kartalla Karttanäkymä on oletuksena tilassa, jossa kursorin avulla voi siirrellä karttaa karttanäkymä alueen sisällä. Hiiren rulla toimii karttanäkymässä zoomaustoimintona. Kartalla tapahtuvat valinnat aloitetaan valitsemalla kuvakkeista haluttu toiminto. Toiminnon suoritus lopetaan valitsemalla sovelluksen avaamasta pop-ikkunasta haluttu toiminnallisuus tai kaksoisklikkauksella. Toimintopainikkeet Päänavigaatiossa sijaitsevat toimintopainikkeet käynnistävät erilaisia toimintoja. Käyttäjä saa toiminnon nimen näkyville hover-tekstinä, kun kursori on toiminnon päällä. Valittuna olevan toiminnon pohja näytetään tummennettuna käyttöliittymässä. Valinnan poistaminen Erilaiset valinnat, kuten valitut tasot, analysoitavat tiedot yms. ilmaistaan käyttöliittymässä listana. Tehdyn valinnan voi poistaa valintarastista. 16
Vuorovaikutus Latauksen indikaatio Osa toiminnoista vaatii enemmän aikaa suorittamiseen. Jos toimintopainikkeen painamisesta kuluu yli 1 sekunti, näytölle tulee latausta indikoiva spinneri sekä teksti Hetki.... Indikaattori teksteineen tulee sijoittaa vain sen laatikkoelementin sisään, josta toiminto on aktivoitu. Se tulee sijoitella keskelle laatikkoa pysty- ja vaakasuunnassa. Laatikkoon tulee indikaattorin lisäksi harmaa värikerros. #3c3c3c opacity 60% 17
Nimeäminen ja ilmoitukset Toiminnot Päänavigaation toiminnot ja muut alemman hierarkiatason toiminnot nimetään sanan perusmuodossa, tyyliin Haku, Karttatasot, Käyttöohje. Painikkeet Painikkeissa käytetään verbien käskymuotoa, kuten Avaa, Tallenna, Peruuta. Ilmoitukset Käyttäjälle annettava palaute muotoillaan aina noudattaen viestin sisältönä: Mitä tapahtui? Mitä tästä seurasi? Mitä käyttäjän tulisi tehdä seuraavaksi? Esimerkiksi: - Hakusanalla ei löytynyt yhtään karttatasoa. Tee uusi haku. - Analyysia ei voitu tehdä. Aineistoa ja parametrejä ei ole valittu. Tee valinnat ja aloita Analyysi. 18
Ohjetekstit Kielellinen tyyli Ohjeteksteissä pyritään selkeään tyyliin yksinkertaisilla lauserakenteilla. Lukijan tulisi pystyä löytämään etsimänsä tieto tekstistä silmäilemällä. Tekstissä käytetään tarvittaessa luetteloita ja taulukoita selkeyttämään listamuotoisen tiedon esittämistä. Käyttöohjeet Käyttöohje on jaettu välilehdille tärkeimpien ominaisuuksien ollessa pääotsikkoina: Käyttöohjetekstin rakenne Omat aineistot löytyvät Omat tiedot -valikosta Aineistot-välilehdeltä sekä Karttatasot-valikosta kohdasta Omat aineistot. Valikot Tilaa ennen otsikoita Haku Haku-valikon kautta voit hakea paikkoja ja kartta-aineistoja. Paikkojen haku onnistuu Paikkahaun avulla. Paikkahaku - Ensimmäisellä välilehdellä on kerrottu yleisesti Karttaikkunasta ja ohjeen sisällysluettelo. - Toisella välilehdellä on esitelty palvelun perustoiminnallisuus. - Muilla välilehdillä on kuvattu erillisiä toimintoja. Yhden välilehden sisältö pyritään ohjeessa pitämään kompaktina. Ohjeen tekstin asettelussa kiinnitetään erityistä huomiota luettavuuteen. Luettavuutta tukee erityisesti selkeä ja yhtenäinen tekstinasettelu. Ennen otsikoita on kaksi tyhjää riviä ennen edellisen kappaleen jälkeen. Keltaisia korostusnuolia käytetään vain erityistä huomiota vaativissa tilanteissa. Käyttöohjeen tekstirakenne tukee tulostamista. Käyttäjä voi halutessaan tulostaa koko käyttöohjeen. Tulostettuna käyttöohje on automaattisesti sivutettuna ja siinä on sisällysluettelo. Käyttöohjeen tärkein toiminto on hakutoiminto. Haun avulla käyttäjä voi hakea ohjetta haluamaansa toiminnallisuuteen. Kuva: Hae paikkahaussa paikkoja tekstihaun avulla. Lyhyitä kappaleita Paikkahaun avulla voit hakea paikkoja paikannimen, osoitteen tai kiinteistötunnuksen perusteella. Kirjoita hakusana tekstikenttään, paina Hae ja valitse sopiva hakutulos. Haussa käytetään Maanmittauslaitoksen aineistoja. Jokerimerkin (*) avulla voit katkaista hakusanan. Esimerkiksi hakusanalla Hels* saat kaikki Hels-alkuiset paikannimet ja osoitteet. Jos käytät jokerimerkkiä, hakusanassa on oltava vähintään neljä muuta merkkiä. Haku näyttää enintään 100 hakutulosta. 19