Käyttöliittymäohjeistus
Info |
---|
Dokumentti on luonnosvaiheessa. Ohjeistuksen ensimmäinen versio hyväksytään projektissa elokuussa 2014. |
Table of Contents | ||
---|---|---|
|
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]
Ohjeet toteuttajille ja toteuttaminen
- kehyksen ulkopuoliset javascriptit/css ja niiden dokumentointi.
- sovitaan yhtenäinen rakenne ja sijainti portletin sisällä esim "portlet_x/jotain/css/portlet.js"
- 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
Typografia
- otsikot
- pieni teksti (himmennetty)
- lihavoinnit, kursivointi
- listat (ul, ol). Muotoilematon, ilman etumerkkejä
- linkit, linkkien eri tilat
omaan less- tiedostoon
Kehys
- Yläpalkki (header)
- sovellus brändäys, tausta
- käyttäjän tiedot ja toiminnot
- Päänavigaatio
- Alapalkki (footer)
Päänavigaatio (topbar)
- Päänavigaatioon uusi yksinkertaistettu toteutus
- Mitä tulossa valikkoon, käykö tekstuaalinen rakenne vai ikoni (FontAwesome)
- Maksimaalinen tilan käyttö
- Mukautuvuus (voi olla myös sidemenu!)
Väritys ja breakpointit esim. variables.lessiin
Alapalkki
- [Takaisin ylös] mobiilissa
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, ehkä palaute/lataaja) http://ui.dev.eduix.fi/demo/examples/edugui-header-entity.php
- määrittele tarkemmin
- murupolku
- 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)
- alaosion työpöytä
- listausnäkymä
- yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
- lomake / muokkaus
- modal, kuten Jira
- muokkauksen sisäinen navigointi eri osioihin
- jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
- Näkymän sisäinen navigaatiorakenne
- dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
- valintojen väliotsikot
- kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä
- haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
- Excel-tyyppinen inline editointi
- Perus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö,
...
- 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
Pitää tehdä kunnon esimerkit monitasoisesta navigaatiosta, liittyy kohtaan näkymäesimerkit
...
- 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
...
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
...
- 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
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ö?)
...
- tabi/näppäimistönavigointi. Inputtien korostukset (vrt. peppi nyt)
Taulukot / listaukset
- eri ulkoasut eri käyttötapauksiin
- perus, raidoitettu, ym
- oletuksena listassa nimen klikkaus vie katseluun, muut toiminnot painikkeen taakse
- määriteltävä oletus linkitetty sarake (nimi, otsikko) ?
- listauksessa toiminnot: 1 toiminto / monta toimintoa. Yksi painike / painike-alasvetovalikko. Määriteltävä millä logiikalla.
- tr-hover vain luokalla tableen?
- yleinen toimintopalkki koko listaukselle (button group?) (esimerkki!)
- rivikohtaiset työkalut, listauksessa toiminnot: 1 toiminto / monta toimintoa. Yksi painike / painike-alasvetovalikko. Millä logiikalla?
- statukset listoissa (esimerkki!)
- hierarkiset listat, onko nykyinen malli hyvä, tarvitaan useamman tason
- taulukko filtteröinti http://foundation.zurb.com/docs/components/subnav.html
- inline-edit: tiptop: - Taulukkodatan muokkaus??? Puhekupla http://vitalets.github.io/x-editable/demo-jqueryui.html?c=popup
- sarakkeiden leveyksien säätö, jos ei varma toiminto, tehdään valinnaiseksi > jatkokehitykseen
- Sivutus ja näytä "x riviä"
- demot pitkillä listoilla ja liferayn sisälle testiin
...
- 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
Tyypit
- 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
...
http://getbootstrap.com/components/#alerts
Ohjeet
- tooltipit (tiptip/qtip?)
- 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
...
Nimetään myös panel, nykyinen box jää legacyyn
Dialogit
- modaalidialogit yleisesti tai milloin modal ja milloin ei
- dialogien toimintonapit
- mobiilivalmius?
...
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://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
- Työnimi Eduplan GUI 2.0
- pidetään hakemistossa edugui/core jne, koska polut viittaavat monessa paikkaa
- uusi svn projekti
- Dokumentaatio Wikiin, esimerkit php:lla ui.dev.eduix.fi/demo2. Upotetaan Wiki-sivuihin, kuten nyt Edugui.
- Tehdään Liferay-instassi jossa Edugui2 teema, johon voidaan hakea esimerkit => testaus oikeassa ympäristössä
- CSS Lessillä
- elementit/kokonaisuudet palikoidaan
- edugui legacy
- Variables.less
- värit, buttons, navi jne
- esim pyöristysten koot tms
- mallia (Bootstrap theme)
- Typografia, fonttikoot myös omaan
- käytettävät js-kirjastot (esim Chosen vs. Select2, eli ei esim. kahta samaan tarkoitukseen).
- perus.js (nyt edugui.js) vain peruskomponentteihin vaadittavat. Tiukka linja mitä tänne
- Määrittely: kuinka tehdään poikkeustyylimäärittelyt ja javascriptit portleteissa
- optimointi
- myös js?
- miten tyylejä ja kirjastoja kutsutaan
- jirataskit erikseen osa-alueittain jotta tiedetään kuka tekee mitäkin ja mitä on tehty
- EduGUI 2 (nimi??)
- legacyna vanha mukaan
- Pois/legacyyn:
- Color schemes
- Liferay
- 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
- aui pois päältä oletuksena, päälle jos admin tai parempi: käyttäjän valinnalla (user bar) jos admin
...
Osio tuleville, mutta ei juuri nyt tarpeen
- Velho (jos jää aikaa)
- thumbnails
Tulevaisuudessa kehitettävää
Listataan ominaisuuksia, joita voidaan myöhemmin kehittää. Ei todennäköisesti tarvita perusrekisterissä
...
fb tyylinen unlimited loading, ehkä käypä esim. tiedotteiden kanssa (dashboardin pikkutietoboksit)
Muuta esille tullutta
- Dokumentoi jos ominaisuus vaatii selaimelta jotain erikoista tai sen käyttöä on harkittava!
- Miten tämä uusi dokumentaatio suhtautuu eduguihin omaan dokumentaatioon? omistusoikeus?
...