Käyttöliittymäohjeistus

Tämä käyttöliittymäohjeistus on laadittu alunperin Perusrekisterin kehittäjien apuvälineeksi, jotta kehittäjien ei tarvitse käyttää aikaa näkymän suunnitteluun ja toteutettavat näkymät noudattavat samaa linjaa kautta ohjelmiston. Ohjeistuksessa käsitellään Pepissä käytettävät erilaiset näkymätyypit (aloitusnäkymät, listaukset, jne) sekä yksittäiset elementit (painikkeet, lomake-elementit, jne). Ohjeistus sisältää yleiset sommitteluperiaatteet, joita noudattamalla saavutetaan yhtenäinen kokonaisuus. Ohjeistus pohjautuu Eduixin Eduplan GUI käyttöliittymäkirjaston dokumentaatioon ja käytäntöihin, Metropolian käyttöliittymästandardiin sekä TIPTOP-projektin yhteydessä laadittuun käyttöliittymästandardiin.

Koko ohjeistus koodeineen on saatavissa osoitteesta https://eduplangui.ppp.eduix.fi/demos/

Pohjamateriaalit

Eduix Edugui ja sisäiset dokumentaatiot
Metropolian UI 1.0
TIPTOP_kayttoliittymastandardi_3.0.pdf
Eri CSS-frameworkit (kts. linkit)
Palveluiden rakenne ja nimeäminen: http://wiki.eduix.fi/confluence/pages/viewpage.action?pageId=41943089

Yleiset

Tavoitteet

yksinkertaisuus
selkeys
johdonmukaisuus
kontrasti ja värit
esteettömyys mahdollisuuksien mukaan (eri tasot opiskelija / hallinnoija / muokkaaja)
toteutuksessa
- html, css: syntaksin siivous, selkeytys, yksinkertaistus
- dropdownit (ja kaikki muukin mahdollinen) css:llä
- ei inline css/js
- hakutulokseen ja muutenkin edelliseen palaaminen

Suunnittelun periaatteet

jatkuva iterointi
jokainen osa-alue valmistuessaan selaintestiin
merkitään milloin tarvitaan javascriptiä [JS]
peruskirjastoon vain yleisesti käytetyt osiot, erikoistapaukset ko. moduleissa sisällä. Vältetään liika kasvu

Ohjeet toteuttajille ja toteuttaminen

kehyksen ulkopuoliset javascriptit/css ja niiden dokumentointi
yleisperiaate: jos et ole varma miten näkymä tehdään, kysy UI-tiimiltä!
näkymät, joita UI-tiimi ei ole protonnut/määritellyt on syytä hyväksyttää/näyttää UI-tiimille
tarkistuslistat kehittäjien avuksi

Bootstrap

Eduplan GUI perustuu nyt Bootstrap 3-frameworkkiin. Se on hyväksi todettu ja monipuolinen kirjasto, jossa on toteutettu myös mukautuvuus kattavasti. Tämän päälle on tyylitelty oma visuaalinen tyyli, sekä tarvittavat lisäkomponentit, css-luokat ja javascriptit.

Kehys

Yläpalkki (header)
- sovellus brändäys, tausta
- käyttäjän tiedot ja toiminnot
- päänavigaatio

Päänavigaatio (topbar)

Päänavigaatioon Bootstrap-pohjainen ikoninavigaatio
Maksimaalinen tilan käyttö
Mukautuvuus (voi olla myös sidemenu!)

Alapalkki (footer)

[Takaisin ylös] mobiilissa

Typografia

otsikot
pieni teksti (himmennetty)
lihavoinnit, kursivointi
listat (ul, ol). Muotoilematon, ilman etumerkkejä
linkit, linkkien eri tilat

Näkymät

Näkymäesimerkit ovat tässä määrittelyssä ensisijaisen tärkeitä. Pelkät elementtien määrittelyt eivät riitä takaamaan yhdenmukaisia toteutuksia.

Näkymän yleiset elementit

näkymän otsikkopalkki (voi sisältää otsikon, toimintoja, tietoja) http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#titlebar
Näkymän yleinen määrittely, sivun otsikko, murupolku jne. Perustelu jos jokin pääelementeistä puuttuu.

Näkymätyypit / esimerkit

palvelun työpöytä (dashboard)
1. * esimerkki katsottava käytööliyyttmäkatsauksena *
alaosion työpöytä
listausnäkymä
1. https://eduplangui.ppp.eduix.fi/demos/#listing
yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
1. https://eduplangui.ppp.eduix.fi/demos/#view-single-item
2. Palstajaottelu, jotta pysyy ryhdissä
  1. https://eduplangui.ppp.eduix.fi/demos/#items
lomake / muokkaus
1. modaalissa
  1. https://eduplangui.ppp.eduix.fi/demos/#dialog-ajax
  2. https://eduplangui.ppp.eduix.fi/demos/#form-items
  3. Valittuna yksipalstainen oletuksena
2. muokkauksen sisäinen navigointi eri osioihin view-näkymästä (sidebar)
3. jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
Näkymän sisäinen navigaatiorakenne
1. dynaamiset valinnat vasemmalla
2. valintojen väliotsikot
3. https://eduplangui.ppp.eduix.fi/demos/#left-navi
kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä > jokainen oma modaali
haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
Excel-tyyppinen inline editointi (mass edit)
Perus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö
1. * esimerkki katsottava käytööliyyttmäkatsauksena *
Palstat perustuvat Bootstrapin Gridiin.
1. Sisällössä https://eduplangui.ppp.eduix.fi/demos/#grid-content
Lomakkeiden validointi
1. https://eduplangui.ppp.eduix.fi/demos/#form-validation-2
Palautteet toiminnoista
1. https://eduplangui.ppp.eduix.fi/demos/#form-feedback
Latausikoni
1. https://eduplangui.ppp.eduix.fi/demos/#loader

Poikkeavat / uniikit näkymät aina UI-tiimin kautta!

Näkymien navigointi

Eritasoiset navigaatiot

taso 1 - päätason välilehdet (horisontaalinen). Esim HOPS
taso 2 - vasemman laidan välilehdet (vertikaalinen)
taso 3 - sisältöalueen (oikea palsta) välilehdet (horisontaalinen)

Ensisijaisesti käytetään pystynavigaatiota, perustelut tabinavigaatioon oltava:
sivuvalinnat

* esimerkki katsottava käytööliyyttmäkatsauksena *

Murupolku

sovittu että yleisperiaatteena tulee kaikkialle, kun siirrytään työpöydältä eteenpäin

Komponentit

Painikkeet
Tooltip
- https://eduplangui.ppp.eduix.fi/demos/#tips
Labelit / merkinnät
- https://eduplangui.ppp.eduix.fi/demos/#labels
Erilaiset listauksetm ei-taulukkomainen
- https://eduplangui.ppp.eduix.fi/demos/#lists
Taulukot
- https://eduplangui.ppp.eduix.fi/demos/#table
- ks. tarkemmin taulukkon lisäominaisuudet ko. sivulta
- numeeriset arvot oikealle (num-e)
Toiminnot taulukossa
- https://eduplangui.ppp.eduix.fi/demos/#table-actions-types
- myös sivutusmalli
Paneelit (laatikoinnit)
- https://eduplangui.ppp.eduix.fi/demos/#panels-basic
- https://eduplangui.ppp.eduix.fi/demos/#panels

Periaatekysymykset

sovittu että katselu pyritään toteuttamaan aina (eli ei suoraan lomakenäkymiä)
- jos katselua ei toteuteta, tähän vaaditaan hyväksyntä ja perustelu (yhteneväisyys!)
muokkaus modal-ikkunassa (egdialog)
- hyödyt: samaa muokkausta voidaan hyödyntää eri kautta, eri paikoissa
- modal perustuu laajennettuun bootstrapin modaaliin. Scrollaa näkymässä jos yli selainikkunan korkeuden
jos näkymässä on kokonaisuuksia (esim 3 listaa) ne pitää visuaalisesti erottaa (peppi > yksikko > kustannuspaikat), erotin, panel tms
Painikkeiden sijainnit
- Modaali: oikea laita
- Perusnäkymissä vasemmalla.
- "Sulje/Peruuta" linkkimäinen (btn-link)

Yleinen sommittelu

lomake, sommittelu tai yleiset sommitteluperiaatteet, missä minkäkin tyyppiset elementit _yleensä_ sijaitsevat
- https://eduplangui.ppp.eduix.fi/demos/#form-items

Inline-editointi (ajax)

ainoastaan jos selkeä tarve
editointitoiminnallisuudet ("koska tehdään ajaxilla ja koska pitää tallentaa" -ongelma)
jos ajax-tallennuksia, hyvin selkeä palaute
vältetään eri tallennustapoja näkymien sisällä

Kalenteri

Iso kalenteri

edelleen fullcalendar

Pvm valinta

jQuery UI datepicker

Muuta / huomioita

Grid

Perustuu Bootstrapin grid-järjestelmään

Autocomplete (select2)

selectit yleensä aina tällä

Periaatteet

DataTables kuopataan, käytetään serveripään toimintoja sorttaukseen ja sivutukseen

Käyttöympäristö ja päätelaitteet / mukautuvuus

Mukautuvuus

mukautuvuus voi olla valinnainen
jos ikonimainen dropdown, niin isolla resolla myös teksti
näkyvyys classeja: http://foundation.zurb.com/docs/components/visibility.html
http://touchpunch.furf.com/

Selainyhteensopivuus

Palvelun tulee olla yhteensopiva 4 yleisimmän verkkoselaimen uusimman vakaan version kanssa. (Chrome, Firefox, Edge, Safari).

Kieleistys

yhteneväisyys (save = Tallenna)
- js-kirjastojen kieleistys myös
Kieleistys kehittäessä, ei jälkikäteen

Testaus

Laadunvarmistus-checklist
selainyhteensopivuus
demot pitkillä listoilla / isolla datamäärällä
oikeassa ympäristössä testaaminen

Käyttöliittymien laatu:

Näkymät on käyty läpi seuraavan tarkistuslistan mukaan:

Tämä laadunvarmistuslista kehittyy Eduixin omassa releasedokumentaatiossa
Jokainen näkymä on tehty eelin tyyli-kirjaston mukaan
Näkymän otsikkoalue: Näkymissä on otsikko joka kertoo missä ollaan ja mitä katsellaan/muokataan Murupolku on ja toimii
Navigointi noudattaa perusperiaatetta, lista > katselunäkymä > modaali(tai useita) tietojen muokkaukseen. Paluu listaukseen on toteutettu
Lomakkeet Enterin painallus lomakkeella lähettää lomakkeen Jokaisen uuden input kentän validoinnit on tarkistettu Jokaisen uuden input kentän merkkimäärät on testattu. esim. kopioidaan wordista iso dokumentti textareaan ja koitetaan tallennusta Jokainen uusi tieto on tarkastettu vahingollisen datan osalta. esim. tallennetaan javascript-merkkijonoja tekstikenttiin. Lomakkeen navigointi tabilla toimii loogisesti Kaikki selectit on select2-muodossa
Painikkeiden sijainnit ja järjestys vastaavat ohjeistusta
Näkymä on mahdollisuuksien mukaan testattu runsaalla datalla. Pitkät listat, pitkät nimet, isot tekstisisällöt
Selaimen back-painikkeen painaminen ei aiheuta poikkeuksia uusissa näkymissä
Näkymät näyttävät samoilta kuin mockupit. Muutokset kommunikoidaan kälipuolelle
Näkymä ei aiheuta virheilmoituksia konsoliin (vaikka eivät olisikaan toiminnallisesti merkittäviä)
Kieleistys on yhteneväinen. Painike kertoo toiminnon. "Tallenna" (Todo määrittely, yleiset termit?)
Palautteet toiminnoista on kunnossa. Käyttäjän on tiedettävä joka hetki mitä tapahtuu/tapahtui. Pitkään kestävissä toiminnoissa lataus-indikaatio (todo malli)
Virheistä tulee selkeät virheilmoitukset
Listoissa toiminnot ovat tehty määrittelyn mukaan. Linkki katselunäkymään title/nimi-vastaavasta kohdasta. Jos ei ole, linkiksi "Näytä tiedot"
Jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide tai kerro ettei dataa löydy
Jos käytetään alaosion työpöytänäkymiä, niissä on järkevää dataa / toimintoja eikä vain Hae-ruutua tai ei mitään käyttäjää ohjaavaa.
Selaintestaus on tehty, etenkin IE-versioilla. Kompleksit näkymät kattavasti. Mukautuvuus on testattu niissä näkymissä joissa sellaista on määritelty tarvittavan. Oletus on työpöytäkäyttö. Testataan min. 1024-resoluutiolla

Lähteitä / linkkejä

Linkkejä