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

title	Huomio

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

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.

...

palvelun työpöytä (dashboard)
1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#desktop
alaosion työpöytä
listausnäkymä
1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#listing
yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#view-single-item
2. Palstajaottelu, jotta pysyy ryhdissä
  1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#items
lomake / muokkaus
1. modaalissa
lomake / muokkaus
1. modal
  1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#dialog-ajax
  2. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#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, esim. Pepin tallennetut haut
2. valintojen väliotsikot
3. 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ö
1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#basic-page
Palstat perustuvat Bootstrapin Gridiin.
1. Sisällössä http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#grid-content
Lomakkeiden validointi
1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#form-validation-2
Palautteet toiminnoista
1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#form-feedback

Latausikoni

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

Periaatekysymykset

sovittu että katselu pyritään toteuttamaan aina
- jos katselua ei toteuteta, tähän vaaditaan hyväksyntä ja perustelu (yhteneväisyys!)
muokkaus Jira-mainen modal-ikkuna.
- hyödyt: samaa muokkausta voidaan hyödyntää eri kautta, eri paikoissa
- tutkitaan toteutetaanko oma modal-ikkuna jQuery UI Dialogin sijaan
jos näkymässä on kokonaisuuksia (esim 3 listaa) ne pitää visuaalisesti erottaa (peppi > yksikko > kustannuspaikat), erotin, panel tms
näkymien sisällä erilaisten elementtien sijainti suhteessa toisiinsa (esim. Tallenna/Peruuta -painikkeet)

Yleinen sommittelu

lomake, sommittelu tai yleiset sommitteluperiaatteet, missä minkäkin tyyppiset elementit _yleensä_ sijaitsevat

Inline-editointi (ajax)

muokkausnäkymät vs. inline-editointi (http://vitalets.github.io/x-editable/demo-jqueryui.html?c=inline)
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ä

Näkymien navigointi

Eritasoiset navigaatiot

taso 1 - päätason välilehdet (horisontaalinen)
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

Kunnon esimerkit monitasoisesta navigaatiosta, liittyy kohtaan näkymäesimerkit

Alatasojen navigointi:

Tehdään vaihtoehtoisina vaaka + pysty vasemmalla

...

1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#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 http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php

Murupolku

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

Komponentit

...

- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.

...

käytetään esim: https://stagingpeppi.metropolia.fi/group/suunnittelijan-tyopoyta/yksikot

värityksien parannus
käyttötapa yhtenäinen > esimerkit

...

- php#tips
Labelit / merkinnät
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#labels
Erilaiset listauksetm ei-taulukkomainen
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#lists
Taulukot
Toiminnot taulukossa
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-actions
- myös sivutusmalli
Paneelit (laatikoinnit)

Murupolku

Tiivis, ei saa viedä tilaa
sovittu että yleisperiaatteena tulee kaikkialle, myös Liferayn sisällä

Näkymän sisäinen layout / rakenne

Palstat ja grid näkymät uusiksi

Grid

Tutustutaan ja arvioidaan olemassa olevia ja käytetään hyödyksi suunnittelussa

Lisänä yksinkertaisempi malli?

Tarve equal heights(?): http://foundation.zurb.com/docs/components/equalizer.html

Ikonit

ikonien käyttö (kirjastona: Font Awesome). Laajin skaala, väritys mahdollinen, lisenssi vapaa

Painikkeet

Eduguin nykyisten painikkeiden freesaus ja asemointi, myös aktiiviset tilat huomioiden

Peruspainikkeet
- eri koot, huomiotava mobiilivalmius
- tyylit: primary, vaarallinen (http://getbootstrap.com/css/#buttons) variables.lessiin värit
- elementtien disablointi
  - Disable pressed buttons http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
Painikeryhmät http://espdev.
- eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.
php#button-groups
Painikkeet ikoneilla
Toggle / Switcher
Dropdown

Periaatteet

yleinen linja käytettävästä tagista (a, button jne vai aina sama?)
dialogien napit sisällössä/dialogin buttoneina
eri tyyppisten toimintonappien sijainti suhteessa toisiinsa, (tallenna, peruuta, sulje)
tallenna/järjestys leijukkeissa kuten tip top

Lomakkeet

eri tyyppiset: basic, horizontal, jne. http://getbootstrap.com/css/#forms
validointi
- käytetäänkö esim. Dirty Forms
- pakollisen kentän merkitseminen yleisesti
- select2 validointi
elementtien disablointi, tyylit
TAB ordering, testauslistaan testaa ilman hiirtä
koot
- http://getbootstrap.com/css/#forms-control-sizes
- mukautuvuus
eri tyyppisten inputtien käyttö tekstuaalisesti selitetty kuten tiptopissa, missä tilanteessa käytetään mitäkin
auto-focus on input (malli, perustelut missä käytetään)
textarea ei monospace, määriteltävä fontti (wysiwygin käyttö?)

Input-tyypit

eri input-tyypit, katsotaan edugui läpi
ainakin
- tekstikenttä
- tekstialue
- pudotusvalikko (select2 käyttö)
- radio button / checkbox
  - ryhmät
- datepicker
- timepicker
- transfer select
- kenttäkohtaiset ohjeet?

Fieldset

miten edugui, voidaanko päivittää vain css tai rinnalle uusi

Tagit

Sliderit?

http://foundation.zurb.com/docs/components/range_slider.html

Autocomplete (select2)

erilaiset käyttötavat, milloin ja missä

Toteutusjärjestys

normaali palstoitettu malli ensin, sitten muita tarpeen mukaan, kuten http://getbootstrap.com/components/#input-groups

Esteettömyys

tabi/näppäimistönavigointi. Inputtien korostukset (vrt. peppi nyt)

Taulukot / listaukset

...

perus, raidoitettu, ym
oletuksena listassa nimen klikkaus vie katseluun, muut toiminnot painikkeen taakse
määriteltävä oletus linkitetty sarake (nimi, otsikko)?

...

Periaatteet

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

http://designshack.net/articles/css/15-tips-for-designing-terrific-tables

Fluid-list

plussana fluid list (toteutettu tuubissa)

Perus ei-taulukkomainen lista

avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili
- http://wiki.eduix.fi/confluence/display/EDUGUI/Simple+definition+lists
- muu tapa, dl ei aina toimi
ul-lista muotoilematon (ei bulletteja, mutta alitasoilla kyllä)

Palautteet

Palautteiden sijainti näkymissä
Varmennukset (oletko varma...)
Toiminto aloitettu (disablointi)
Toimintoa tehdään (etenemispalautteet)
Tallennus/toiminto on tehty (samoja voidaan käyttää myös saavuttaessa näkymään)
- Onnistui
- Info
- Varoitus
- Virhe
etenemispalautteet
- etenemispalkki (progress bar)
- latausindikaattori

Esimerkit! Virheeseen fixed-palkki ylös, joku yleinen virhe sovelluksessa. Siihen myös sulje rasti. Dialogilla virhe joka syntyy kun aktivoidaan joku toiminto.

Periaatteet

Yleinen sijainti(sijainnit) latausindikaatiolle, samoin tapa käyttää (inline/vakiopaikka/dialogi/muu?)

Tiptopista: Varoitusikkuna, Tiedote, Virheilmoitus, Varmennus, Sisäänkirjautuminen

Etenemispalautteet

Etenemispalkki (progress bar)
- Aikamääräinen+edistymispalkki+(Determinate+progress+bar),
- Määrämitaton+edistymispalkki+(Indeterminate+progress+bar)+
Latausindikaattori (ajax spinner)

http://getbootstrap.com/components/#alerts

Ohjeet

tooltipit (tiptip/qtip?)
- http://getbootstrap.com/javascript/#tooltips
ohjelaatikot
- samaa kuin palaute (info, uusi tyyppi guide tms)
- http://ui.dev.eduix.fi/demo/examples/edugui-notification.php
- http://www.smashingmagazine.com/images/web-applications-interface-techniques/goplan_help_stickie.png
label tyyppiset inline ohjeet?

Tilatiedot

labels, status, ikonit
http://getbootstrap.com/components/#labels

http://foundation.zurb.com/docs/components/labels.html

Paneelit (Boksit)

- laatikko, title, content

http://foundation.zurb.com/docs/components/panels.html

http://getbootstrap.com/components/#panels

Nimetään myös panel, nykyinen box jää legacyyn

Dialogit

modaalidialogit yleisesti tai milloin modal ja milloin ei
dialogien toimintonapit
mobiilivalmius?

jQuery UI, mutta myös normaali modaalimalli?

http://gumbyframework.com/docs/components/#!/modals

http://getbootstrap.com/javascript/#modals

Malli peräkkäisistä, http://foundation.zurb.com/docs/components/reveal.html

Kalenteri

Iso kalenteri

edelleen fullcalendar

Pvm valinta

jQuery UI datepicker

Apuvälinetyylit ja elementit

- quickfloats, clearfix, show hide jne

http://getbootstrap.com/css/#helper-classes

http://imperavi.com/kube/helpers/

http://foundation.zurb.com/docs/utility-classes.html

> valitaan olennaisimmat

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

Mukautuvuus

mukautuvuus syytä olla valinnainen (valinnaisesi otetaan mukaan edugui_resp.css tms?)
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

Mozilla Firefox 14, Internet Explorer 9, Google Chrome (uusin versio),
Safari 4 ja 5, Opera 10 ja 11 (Heidi täsmennä mitä on määritelty perusrekisteriin nyt?)

Tulostus

- Tulostus (css tyylit), print.less

Kieleistys

yhteneväisyys (save = Tallenna)
- js-kirjastojen kieleistys myös
Tyyli: Verbs in labels
- 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 jaksaa

Käytettävät / tarvittavat kirjastot

Arvioitava mitä tarvitaan perusrekisterissä, näistä esimerkit

jQuery ja jQuery UI
select2
fontAwesome
fullcalendar
jstree?
DataTables?
Timepicker? (erillinen plugin)
qtip / tiptip
tinymce tmv
...

Testaus

näkymä-checklistit kehittäjille, tiptopista vinkkejä
liikkuminen tabilla, testauslistaan testaa ilman hiirtä
selainyhteensopivuus (browserstack, muu työkalu)

Tekninen toteutus

...

pidetään hakemistossa edugui/core jne, koska polut viittaavat monessa paikkaa
uusi svn projekti

...

Tehdään Liferay-instassi jossa Edugui2 teema, johon voidaan hakea esimerkit => testaus oikeassa ympäristössä

...

elementit/kokonaisuudet palikoidaan
Variables.less

- värit, buttons, navi jne
- esim pyöristysten koot tms
- mallia (Bootstrap theme)

...

myös js?

...

aui pois päältä oletuksena, päälle jos admin tai parempi: käyttäjän valinnalla (user bar) jos admin
esimerkit testattava suurella datamäärällä ja liferay-teemalla

- php#portlet

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
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#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