Käyttöliittymäohjeistus
Info |
---|
Dokumentti on luonnosvaiheessa. Ohjeistuksen ensimmäinen versio hyväksytään projektissa elokuussa 2014. |
Table of Contents | ||
---|---|---|
|
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 | ||
---|---|---|
| ||
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
...
- 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 css:llä
- ei inline css/js
- hakutulokseen ja muutenkin edelliseen palaaminen
...
- jatkuva iterointi
- jokainen osa-alue valmistuessaan selaintestiin
- merkitään milloin tarvitaan javascriptiä [JS]
- peruskirjastoon vain yleisesti käytetyt osiot, erikoistapaukset ko. moduleissa sisällä. Vältetään liika kasvu
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 tiimille
...
- tarkistuslistat kehittäjien avuksi
- otsikot
- pieni teksti (himmennetty)
- lihavoinnit, kursivointi
- listat (ul, ol). Muotoilematon, ilman etumerkkejä
- linkit, linkkien eri tilat
Bootstrap
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.omaan less- tiedostoon
Kehys
- Yläpalkki (header)
- sovellus brändäys, tausta
- käyttäjän tiedot ja toiminnot
- Päänavigaatiopäänavigaatio
- Alapalkki (footer)
Päänavigaatio (topbar)
- Päänavigaatioon uusi yksinkertaistettu toteutusMitä tulossa valikkoon, käykö tekstuaalinen rakenne vai ikoni (FontAwesome) 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.
...
- näkymän otsikkopalkki (voi sisältää otsikon, toimintoja, tietoja, ehkä palaute/lataaja) http://ui.devespdev.eduix.fi/eduplangui/latest/demo/version2/examplesdemo/eduguidemo-header-entity.php
- määrittele tarkemmin
- Näkymän yleinen määrittely, sivun otsikko, murupolku jne. Perustelu jos jokin pääelementeistä puuttuu.
...
- 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
- modaalissa
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#dialog-ajax
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#form-items
- Valittuna yksipalstainen oletuksena
- muokkauksen sisäinen navigointi eri osioihin view-näkymästä (sidebar)
- jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
- modaalissa
- Näkymän sisäinen navigaatiorakenne
- dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
- 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
- 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
...
- 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
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
- Painikkeet
- Tooltip
- Labelit / merkinnät
- Erilaiset listauksetm ei-taulukkomainen
- Taulukot
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-stripe
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-hover
- http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#table-sort
- numeeriset arvot oikealle (num-e)
- Toiminnot taulukossa
- Paneelit (laatikoinnit)
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
- 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ä
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
...
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
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
...
Käyttöympäristö ja päätelaitteet / mukautuvuus
Mukautuvuus
- mukautuvuus syytä voi 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/
...
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
- http://usabilitypost.com/2008/08/30/usability-tip-use-verbs-as-labels-on-buttons/
- Isolla / Pienellä
- Lomakkeen avain ilman ":"
Kieleistys
HETIkehittä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?
jälkikäteen
Testaus
- Laadunvarmistus-checklist
- selainyhteensopivuus
- demot pitkillä listoilla / 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 |
Lähteitä / linkkejä
...
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
...