Page tree
Skip to end of metadata
Go to start of metadata

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.

Huomio

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

Pohjamateriaalit

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ätyypit / esimerkit

  1. palvelun työpöytä (dashboard) 
    1.  * esimerkki katsottava käytööliyyttmäkatsauksena *
  2. alaosion työpöytä
    1. https://eduplangui.ppp.eduix.fi/demos/#sub-desktop
    2. https://eduplangui.ppp.eduix.fi/demos/#sub-desktop-left
    3. https://eduplangui.ppp.eduix.fi/demos/#sub-desktop-help-visible
  3. listausnäkymä
    1. https://eduplangui.ppp.eduix.fi/demos/#listing
  4. 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
  5. 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
  6. Näkymän sisäinen navigaatiorakenne
    1. dynaamiset valinnat vasemmalla
    2. valintojen väliotsikot
    3. https://eduplangui.ppp.eduix.fi/demos/#left-navi
  7. kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä > jokainen oma modaali
  8. haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
    1. https://eduplangui.ppp.eduix.fi/demos/#search
    2. https://eduplangui.ppp.eduix.fi/demos/#search-simple
    3. https://eduplangui.ppp.eduix.fi/demos/#search-complicated
  9. Excel-tyyppinen inline editointi (mass edit)
  10. Perus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö
    1.  * esimerkki katsottava käytööliyyttmäkatsauksena *
  11. Palstat perustuvat Bootstrapin Gridiin. 
    1. Sisällössä https://eduplangui.ppp.eduix.fi/demos/#grid-content
  12. Lomakkeiden validointi
    1. https://eduplangui.ppp.eduix.fi/demos/#form-validation-2
  13. Palautteet toiminnoista
    1. https://eduplangui.ppp.eduix.fi/demos/#form-feedback
  14. 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

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


Murupolku

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

Komponentit

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

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

Selainyhteensopivuus

Mozilla Firefox 14, Internet Explorer 9, Google Chrome (uusin versio), 
Safari 4 ja 5, Opera 10 ja 11

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ä

 

 

  • No labels
You must log in to comment.