...
Tämä käyttöliittymäohjeistus on laadittu 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 Perusrekisterissä 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. Ohjeeseen kootaan myös kehittäjän tarkistuslista, josta voidaan tarkistaa täyttääkö tehty näkymä määritellyt vaatimukset. Poikkeustilanteet käsitellään ja hyväksytetään käyttöliittymätiimin kanssa. Ohjeistusta tullaan täydentämään projektin edetessä, kun esimerkiksi uusia näkymätarpeita ilmenee. 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.
| Info | ||
|---|---|---|
| ||
| Tarkemmat kooditason ohjeistuksen löytyvät alasivuilta: Kehittäjän ohjeet sekä varsinaisesta demo-ympäristöstä http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php |
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
...
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
...
- palvelun työpöytä (dashboard)
- alaosion työpöytä
- listausnäkymä
- yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
- lomake / muokkaus
- modaalissamodal
- muokkauksen sisäinen navigointi eri osioihin view-näkymästä (sidebar)
- jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
- modaalissamodal
- Näkymän sisäinen navigaatiorakenne
- dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
- valintojen väliotsikot
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#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ö
- Palstat perustuvat Bootstrapin Gridiin.
- Lomakkeiden validointi
- Palautteet toiminnoista
- Latausikoni
Poikkeavat / uniikit näkymät aina UI-tiimin kautta!
...
- 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)"sticky" navigaatio (optiona tulevaisuudessa)
vieritettäessä sivun yläreunaan jäävä navigaatio
Ensisijaisesti käytetään pystynavigaatiota, perustelut tabinavigaatioon oltava:
sivuvalinnat http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php
Esim. Pepissä ongelmana tilankäyttö kun monta välilehteä
Murupolku
- sovittu että yleisperiaatteena tulee kaikkialle, myös Liferayn sisällä
- kun siirrytään työpöydältä eteenpäin
Komponentit
- Painikkeet
- Tooltip
- Labelit / merkinnät
- Erilaiset listauksetm ei-taulukkomainen
- Taulukot
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-stripe
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-hover
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-sort
- numeeriset arvot oikealle (num-e)
- Toiminnot taulukossa
- Paneelit (laatikoinnit)
...
- sovittu että katselu pyritään toteuttamaan aina (eli ei suoraan lomakenäkymälomakenäkymiä)
- jos katselua ei toteuteta, tähän vaaditaan hyväksyntä ja perustelu (yhteneväisyys!)
- muokkaus modal-ikkunassa 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
...
- yhteneväisyys (save = Tallenna)
- js-kirjastojen kieleistys myös
- http://usabilitypost.com/2008/08/30/usability-tip-use-verbs-as-labels-on-buttons/
- Isolla / Pienellä
- Lomakkeen avain ilman ":"
Kieleistys HETI kehittäessä, ei sitten kun jaksaajälkikäteen
Testaus
- Laadunvarmistus-checklist
- selainyhteensopivuus
- demot pitkillä listoilla ja liferayn sisälle testiin/ 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:
|
| Navigointi noudattaa perusperiaatetta, lista > katselunäkymä > modaali(tai useita) tietojen muokkaukseen. Paluu listaukseen on toteutettu |
Lomakkeet
|
| 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 |
TODO
- hierarkinen lista togglella
- plussana fluid list (toteutettu tuubissa)
- Etenemispalautteet
- Etenemispalkki (progress bar)
- Aikamääräinen+edistymispalkki+(Determinate+progress+bar),
- Määrämitaton+edistymispalkki+(Indeterminate+progress+bar)+
- Latausindikaattori (ajax spinner)
- Tulostus
Tulostus (css tyylit), print.less
Tulevaisuudessa kehitettävää
Listataan ominaisuuksia, joita voidaan myöhemmin kehittää. Ei todennäköisesti tarvita perusrekisterissä
Pysyvä otsikkopalkki, Sticky nav
- http://foundation.zurb.com/docs/components/magellan.html
- http://ui.dev.eduix.fi/demo/examples/edugui-header-entity.php
Wizard-näkymä
...
Lähteitä / linkkejä
Linkkejä
...