Korppi styleguide

Seuraavia yleisiä ohjeita noudattamalla korpin käytettävyys kasvaa hyvin helposti:

• Ryhmitellään lomakkeet selvemmin käyttäen legend-, optgroup-, ja fieldset-elementtejä.
• Ei tungeta lomakkeita liian tiukkaan vaan selkiytetään asioita lisäämällä tyhjää tilaa
• Ollaan johdonmukaisia ja viedään jokaisella sivulla leipätekstiosassa vastaavia linkkejä kuin navigointipalkissa. Tällä hetkellä leipätekstilinkkejä on aina välillä mutta ei aina ja käyttäjä hämääntyy kun joutuu etsimään jatkolinkkejä mistä sattuu.
• Muutetaan väliotsikoiden tasaus vasempaan laitaan niin sivuista ei tule liian levottoman näköisiä.
• Johdonmukaiset otsikot. Yksittäisen sivun pääotsikko pitäisi aina olla H1 ja siis samankokoinen kaikilla sivuilla. Otsikkotekstit eivät tällä hetkellä vastaa täysin niihin johtavien linkkien tekstejä.
• Mitään aktiivista toimintaa ei saa tapahtua suoraan linkeistä vaan esim. kurssilta poistuminen pitää varmistaa. Ilman varmistuksia tapahtuvat toiminnot pitää tehdä painikkeilla.
• Painikkeet pitää selkeästi sijoittaa niiden lomake-elementtien jälkeen joiden yhteyteen ne kuuluvat. Liian yleiset painikkeet pitää mahdollisuuksien mukaan korvata linkeillä ja sijoittaa kaikki samaan paikkaan esim. sivun oikeaan laitaan.
• Lomakekenttien otsikot pitää merkitä label-elementeillä ja sijoittaa selkeästi samaan riviin niitä vastaavien kenttien viereen. Kentän pakollisuutta merkitsevä * pitää pyrkiä sijoittamaan aina samalle kohdalle eli joko kenttäotsikon edessä tai itse kentän jäljessä.
• Lomakekenttien koko pitää pyrkiä suurentamaan tarkoitustaan vastaaviksi. Esim. Lisätietoja-kentän pitää olla selvästi pitkä.
• Kaikki lyhyet (alle kymmenen alkiota) sisältävät alasvetovalikot pitää pyrkiä korvaamaan valintalaatikoilla. Valintalaatikoita on paljon nopeampi käyttää ja ne ovat myös selkeämmin hahmotettavissa.
• Pyritään käyttämään koko selaimen sallima tila myös sivusuunnassa eikä vain pystysuunnassa.
• Korpissa on useille sivulle upotettu lisämäärityksiä jotka on tarkoitettu vain "edistyneemmille" käyttäjille. Näihin liittyvät linkit pitäisi kaikkialla sijoittaa samaan paikkaan. esim. sivun oikeaan laitaan. Tätä varten voisi määritellä ihan oman lootan, joka olisi sitten kaikkialla saman näköinen.
• "Leivänmurutekniikkaa" voisi käyttää selventämään missä kohtaa sovellusta ollaan menossa.

Sivukohtaisia vinkkejä

• Luentoaikojen määrittely
  • Ajankohtien valitsemiseen yhtenäinen käytäntö koko Korppiin. Luentoaikojen määrittelyssä pitäisi ottaa mallia kalenterista.
  • Sivu pitäisi selvästi jakaa kahteen eri osaan ja mieluiten kahdeksi erilliseksi sivuksi. Ensimmäisellä sivulla valitaan ryhmät ja niiden kerrat (mieluiten kalenterityyppinen näkymä). Toisella sivulla listataan selkeästi ajat joihin muutokset ovat vaikuttamassa. Näkyvissä pitää olla päivämäärät, viikonpäivät, kellonajat jne eikä pelkästään mystisiä numeroita. Ryhmä- ja kertavalintaa ei näytetä enää tällä toisella sivulla.
• Lomakkeiden luominen
  • Lisää tilaa eri lomakeosien välille
  • Ryhmittelyä
  • Vähemmän käytetyt toiminnot omalle sivulleen
  • esimerkki
  • Esimerkkejä
• Lomakkeiden täyttäminen
  • Päivitettävien kenttien valitseminen valintaruuduilla eikä listalla
  • "Piilota valmiit hakuehdot"-valinta selvästi eroon normaaleista linkeistä.
  • Esimerkki lisäehdolle
  • Päivitettävät ryhmät myös valintaruuduilla
  • Otsikot eivät vastaa toisiaan
  • "Tallenna ja poistu"-nappula vain sekoittaa. Ei ole yhtään sen nopeampi kuin normaali tallenna ja sen jälkeen poistu. Päinvastoin hidastaa käyttäjän toimintaa, kun joutuu erikseen miettimään mitä ihmettä voi tarkoittaa "Tallenna ja poistu" tai jos sen jo etukäteen tietää niin joutuu kuitenkin valitsemaan kahden eri nappulan väliltä.
  • Esimerkkeja
• Raporttien luominen
  • Ensimmäinen käyttöruutu yksinkertainen, vain muutamia vaihtoehtoja
  • Listojen tiloille valintaruudut
  • Valmisraportteja (esim. näytä kaikki kurssillaolijat, tentin suorittaneet jne...)
  • "Advanced" -haku kokonaan omalle sivulleen
  • Raportin otsikolle riittäisi tavallinen input-kenttä. Advanced-puolella voisi käyttää textarea-elementtiä.
  • Malli