• Created by Unknown User (heidileh), last modified by Unknown User (jannerii) on 27.8.2014

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

Käyttöliittymäohjeistus

Dokumentti on luonnosvaiheessa. Ohjeistuksen ensimmäinen versio hyväksytään projektissa elokuussa 2014.

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.

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]

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
  • tarkistuslistat kehittäjien avuksi
 

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 (footer)

  • [Takaisin ylös] mobiilissa

Typografia

  • otsikot
  • pieni teksti (himmennetty)
  • lihavoinnit, kursivointi
  • listat (ul, ol). Muotoilematon, ilman etumerkkejä
  • linkit, linkkien eri tilat

omaan less- tiedostoon

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)
  2. alaosion työpöytä
  3. listausnäkymä
  4. yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
  5. lomake / muokkaus 
    1. modal, kuten Jira
    2. muokkauksen sisäinen navigointi eri osioihin
    3. jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
  6. Näkymän sisäinen navigaatiorakenne
    1. dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
    2. valintojen väliotsikot
  7. kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä
  8. haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
  9. Excel-tyyppinen inline editointi
  10. 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
  • 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)

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

Ensisijaisesti käytetään pystynavigaatiota, perustelut tabinavigaatioon oltava:
sivuvalinnat http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.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

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

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
  • 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?

Autocomplete (select2)

  • erilaiset käyttötavat, milloin ja missä

Toteutusjärjestys

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
  • 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

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

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

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

Käytettävät / tarvittavat kirjastot

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

  • (tick) jQuery ja jQuery UI 
  • (tick) select2
  • (tick) fontAwesome
  • (question) fullcalendar
  • (question) jstree?
  • (question) DataTables?
  • (question) Timepicker? (erillinen plugin)
  • (question) qtip / tiptip 
  • (question) 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 http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php 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

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

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ä

 

 

  • No labels
You must log in to comment.