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ö,
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
Yleinen sommittelu
- lomake, sommittelu tai yleiset sommitteluperiaatteet, missä minkäkin tyyppiset elementit _yleensä_ sijaitsevat
- 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
Alatasojen navigointi:
Tehdään vaihtoehtoisina vaaka + pysty vasemmalla
Ensisijaisesti käytetään pystynavigaatiota, perustelut tabinavigaatioon oltava:
sivuvalinnat (http://ui.dev.eduix.fi/demo/examples/edugui-header-entity.php)
käytetään esim: https://stagingpeppi.metropolia.fi/group/suunnittelijan-tyopoyta/yksikot
- värityksien parannus
- käyttötapa yhtenäinen > esimerkit
Esim. Pepissä ongelmana tilankäyttö kun monta välilehteä
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
- http://gumbyframework.com/docs/grid/
- http://foundation.zurb.com/docs/components/grid.html
- http://getbootstrap.com/css/#grid
- http://lessframework.com/
- http://www.getskeleton.com/
- http://mashable.com/2013/04/26/css-boilerplates-frameworks/
- http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
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://ui.dev.eduix.fi/demo/examples/edugui-buttongroup-and-switch.php
- Painikkeet ikoneilla
- Toggle / Switcher http://ui.dev.eduix.fi/demo/examples/edugui-buttongroup-and-switch.php
- 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
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
Fieldset
- miten edugui, voidaanko päivittää vain css tai rinnalle uusi
Tagit
Sliderit?
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
- 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
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
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
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?)
- 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
- 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
Priorisointi
Tärkeimmät osiot, listataan muut jatkossa määriteltävät
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ä
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ä
undo-toiminto mahdollista?
Tekniseen toteutukseen arvioidaan mahdollista siirtymistä angularjs
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?
Linkkejä
- http://gumbyframework.com/
- http://getbootstrap.com/
- http://purecss.io/
- http://imperavi.com/kube
- http://foundation.zurb.com/docs/
- http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/ http://www.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/
- http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
- http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
- http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
- http://ui-patterns.com/patterns
- http://handsontable.com/demo/scroll.html