...
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
- 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
...
- 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 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
- Lista käytettävistä ikoneista esim napeissa + sovituista termeistä (esim. Tallenna > fa-edit)
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ä
...