TIPTOP käyttöliittymästandardi Versio Päiväys Tekijä Hyväksyjä Muutos

Transkriptio

1 TIPTOP käyttöliittymästandardi Versio Päiväys Tekijä Hyväksyjä Muutos Käyttöliittymätiimi Projektiryhmä Hyväksytty standardi 1

2 Sisältö 1 TIPTOP käyttöliittymästandardi 1.1 Tausta 1.2 Standardin hyväksyminen ja muuttaminen projektin aikana 1.3 Sovellukselle osoitettuja vaatimuksia 1.4 Käytettävyys 1.5 Puhuttelun sävy 2 Visuaalinen ilme 2.1 Graafinen ohjeisto Tunnus ja tunnuksen käyttö Typografia 3 Käyttöliittymän toimintaperiaatteet 3.1 Yhdenmukaisuus Eri etenemismuotoja 3.2 Valitut käyttöliittymämallit ja tiedon visualisointitavat Oppijan käyttöliittymä Ohjaajan käyttöliittymä 3.3 Käytettävät termit 3.4 Peruutus / uudelleensuoritus 3.5 Lokalisaatio 4 Esteettömyys 4.1 Mitä esteettömyys on? 4.2 A tason esteettömyysvaatimukset (WCAG 2.0) 4.3 Ohitettavuus 4.4 WAI ARIA 5 Lomakkeiden suunnittelu 5.1 Visuaalinen sommittelu Kenttäryhmät 6 Taulukoiden suunnittelu 6.1 Sarakkeet 6.2. Rivit 6.3 Taulukkodatan muokkaus 7 Käyttöliittymäelementtien ohjeistus 7.1 Navigaatio Tekstilinkit Murupolku Välilehdet 7.2 Painikkeet ja niiden asemointi Tiptop projektissa tarvittavat painikkeet Tiptop projektissa tarvittavat tagit 7.3 Kuvakkeet 2

3 7.4 Leijukkeet 7.5 Automaattitäydentävä kenttä 7.6 Drag & Drop 7.7 Päivämäärän ja ajan valinta 7.8 Käyttöliittymän osien koon muuttamiseen liittyvät elementit 7.9 Henkilön ja opintojakson valinta 7.10 Radiopainikkeet 7.11 Valintaruutu 7.12 Pudotusvalikko 7.13 Listavalikko 7.14 Varoitusikkuna Tiedote Virheilmoitus Varmennus 7.15 Sisäänkirjautuminen 7.16 Sivutus 7.17 Edistymisen ilmaisimet Tiimalasi 7.18 Vierityspalkit 7.19 Velhot 7.20 Tulostus 7.21 Haku ja hakutulosten esitys 7.22 Liitteiden lisääminen ja näyttäminen 8 Tarkistuslista 8.1 Puhuttelun sävy 8.2 Käytettävyys 8.3 Käyttöliittymän toimintaperiaatteet 8.4 Visuaalinen ilme 8.5 Esteettömyys Ohjeidenmukaisuuden vaatimukset 8.6 Käyttöliittymäelementit 9 Käytettävyyden arviointi projektissa 9.1 Yleisesti 9.2 Paikalliset läpikäynnit 9.3 Etätestaus Läpikäynnit etäyhteydellä Palautekomponentit / Asynkroninen testaus 10 Lopuksi Liitteet Lähteet 3

4 1 TIPTOP käyttöliittymästandardi 1.1 Tausta Tiptop projektissa on päätetty tuottaa käyttöliittymästandardi, jonka mukaisesti projektin aikana tuotettavat käyttöliittymät toteutetaan. Projektiin nimetty käyttöliittymätiimi ( on työstänyt dokumenttia syksyllä Ensimmäinen luonnosversio (dokumentin rakenne ja alustava sisältö) valmisteltiin kehityssprintin 4 aikana elo syyskuussa. Sprintissä 5 käynnistettiin varsinainen kirjoitustyö ja tuotettiin standardiin osiot mm. käyttöliittymän toimintaperiaatteista ja esteettömyydestä. Standardin näin syntyneestä välituloksesta kerättiin projektilta kommentteja sprintin lopussa järjestetyssä esittely ja palautetilaisuudessa. Sprintissä 6 käyttöliittymätiimi tuotti standardiin puuttuvat osiot (esim. visuaalinen ilme, käyttöliittymäelementtien ohjeistus, lomakkeiden ja taulukoiden suunnittelu), jonka jälkeen standardista kerättiin uudelleen palautetta esittelytilaisuudessa Saadun palautteen perusteella standardin ensimmäinen versio viimeisteltiin 7. sprintin aikana ja esitettiin hyväksyttäväksi projektiryhmässä Tämä toinen versio on muokattu ja valmistunut sprinttien 15. ja 16. aikana ja viety projektiryhmän hyväksytettäväksi sprintin 16. puolivälissä, Tässä dokumentissa kuvataan projektissa noudatettavat käyttöliittymäsuunnittelun periaatteet ja käytännöt, joiden nähdään olevan laajemminkin hyödynnettävissä vastaisessa opiskelun ja opetuksen tukipalveluiden alueen tietojärjestelmäkehitystyössä. Tavoitteenasetannassa projektissa toteutettavien käyttöliittymien on edellytetty olevan intuitiivisia, esteettömiä ja innovatiivisia. Standardilla pyritään osaltaan edistämään näiden yleisten tavoitteiden saavuttamista. Laajempaa yleisten hyvien käyttöliittymäsuunnitteluperiaatteiden tunnettuutta edistävän tavoitteen vuoksi standardi on suhteellisen laaja, ja se jakautuu osassa luvuista taustoittavaan ainekseen, josta edetään laajemman käsittelyn kautta Tiptop projektissa käytettäviin malleihin ja valintoihin (ks. 1.2 Standardin hyväksyminen ja muuttaminen projektin aikana). Keskeisimmin tämä ilmenee käyttöliittymäsuunnittelun toimintaperiaatteita käsittelevän luvun vaihtoehtoisiin käyttöliittymärakenteisiin ja visualisointiin keskittyvässä osiossa. Niin ikään esteettömyyden osalta standardissa käydään selkeästi läpi yleiset tavoiteltavat esteettömyystasot, joita vasten arvioidaan Tiptop projektissa tuotettavia referenssipalveluita. Projektin aikana ei saavuteta kaikilta osin esteettömyyden vähimmäistasona pidettävää luokituksen A tasoa. Niissä tunnistetuissa kohdissa, joissa tälle tasolle ei päästä, standardissa todetaan tilanne ja 4

5 kuvataan miksi tavoitetasoa ei saavuteta. Edelleen kohdittain lisätään arvio, millaisella työllä projektin jälkeisessä jatkokehityksessä A taso voidaan saavuttaa. Tiptop on monitoteuttajaprojekti ja luotavan standardin yhtenä perustavoitteena on varmistaa toteutettavien käyttöliittymien yhtenäinen ilme. Standardi toimii muistilistana kehittäjille ja auttaa osaltaan käyttöliittymäasiantuntijoiden ja kehittäjien välisessä kommunikaatiossa. Tiptop projektin aikana käyttöliittymät toteutetaan Liferay portletteina Java pohjaisella Vaadin tekniikalla. Tiptop käyttöliittymästandardissa esitettävät periaatteet ovat kuitenkin pääsääntöisesti hyödynnettävissä riippumatta käyttöliittymäkerroksessa käytettävästä tekniikasta. Tämä tarkoittaa käytännössä sitä, että käyttöliittymäkerros sisältää mahdollisimman vähän logiikkaa, minkä ansiosta käyttöliittymät ovat tarvittaessa vaihdettavissa. 1.2 Standardin hyväksyminen ja muuttaminen projektin aikana Tiptop projektin päätöksentekomallin mukaisesti standardi hyväksytään projektiryhmässä. Projektissa ei ole tehty vielä päätöstä käyttöliittymässä eri osioissa hyödynnettävistä käyttöliittymän rakennemalleista ja visualisointitavoista. Tehtävien päätösten mukaisesti standardia tarkennetaan, kun palvelukohtaisesti on päätetty halutusta esittämistavasta. Hyväksytty standardi julkaistaan ja säilytetään projektin wikissä. Mahdolliset myöhemmin projektin aikana esiintulevat standardin muutostarpeet valmistellaan käyttöliittymätiimissä, joka tuo muutokset projektiryhmän päätettäväksi. Muutokset standardiin valmistellaan google docissa säilytettävässä standardin muokattavassa versiossa. 1.3 Sovellukselle osoitettuja vaatimuksia Opittavuus, muistettavuus ja intuitiivisuus Rakenne ja reitit ovat helposti opittavissa, rakenne ja sisältö ovat selkeitä Käytetty kieli on selkeää ja tarkoituksenmukaista Graafinen ohjeisto Palvelu noudattaa "yleisiä konventioita" Käytetty terminologia ja ilmaisut ovat tuttuja Nopeus ja tehokkuus Sovellus reagoi käyttäjän toimiin viiveettä tai minimaalisella viiveellä Virheettömyys, virheiden estäminen ja niistä toipuminen, palaute Sovellus antaa käyttäjälle riittävästi palautetta tämän toimista Sovellus ohjaa käyttäjän toimintaa niin hyvin, ettei virheitä synny Jos virhe tapahtuu, siitä tulee selkä ja selväkielinen virheilmoitu Sovellus "täyttää käyttäjän odotukset" 5

6 Huomioitava suhde muun muassa uusien palveluiden ja vanhojen välillä. Kyseessä voi olla kulttuurinmuutos, kun uusia palveluita tai työskentelytapoja otetaan käyttöön. Esteettömyys Esteettömyyden suhteen otetaan tavoitteeksi A taso Visuaalinen esteettömyys: kontrasti on oltava riittävä, sivulayoutin ja elementtien on oltava selkeitä, sovelluksen on oltava esteettinen ja minimalistinen Koodin validius Tekninen toimivuus Selaimista tuetaan Vaatimen tukemat: Mozilla Firefox 14, Internet Explorer 9, Google Chrome (uusin versio), Safari 4 ja 5, Opera 10 ja 11 Päätelaitteista tuetaan perustietokoneita. Kännyköille ja tableteille toteutetaan omat versiot tuotekehittelyn myöhemmässä vaiheessa projektin jälkeen. Ruudunlukijat ja tekstipohjaiset (Lynx ym.) sovellukset pyritään ottamaan huomioon mahdollisimman hyvin jo projektin aikana osatavoitteena olevan esteettömyyden saavuttamiseksi. Jos esteettömyyden A tason edellyttämälle tasolle ei päästä, tulee syy dokumentoida selkeästi ja tuottaa tieto, millä toimenpiteillä A taso saavutetaan projektin jälkeen. 1.4 Käytettävyys Termillä käytettävyys (engl. usability) tarkoitetaan sitä, kuinka hyvin käyttäjä onnistuu käyttämään jotakin laitetta, sovellusta tai järjestelmää saavuttaakseen tavoitteensa sen suhteen. Käytettävyys määrittää sovelluksen laatua käyttäjän näkökulmasta karkeasti kahdesta näkökulmasta: onko sovelluksessa käyttäjän tarvitsemat ominaisuudet ja onko sitä helppo käyttää? Käytettävyyden perustavoitteena on parantaa käyttökokemusta eli sujuvoittaa ihmisen ja koneen välistä vuorovaikutusta. Yleisiä käytettävyystavoitteita määritellään mm. ISO standardissa, joka sisältää mm. tavoitteet tarkkuudesta (kuinka tarkkaan käyttäjä saavuttaa tavoitteensa), tehokkuuden sekä tyytyväisyyden. ISO standardin ohella käytettävyyttä on luonnollisesti tutkittu laajalti, ja käytettävyystavoitteiden saavuttamiseksi on laadittu runsaasti eri ohjeistuksia, kuten Jacob Nielsenin heuristiikat käytettävyyden arvioimiseen. Nielsen on täydentänyt ISO standardiin nähden käytettävyyden arvioimiseen opittavuuden, muistettavuuden ja virheiden vähyyden. Nämä ovat olleet vaikuttamassa myös Tiptop käyttöliittymästandardin tavoitteisiin alusta saakka. 6

7 Käytettävyyttä määrittävistä termeistä opittavuus ja muistettavuus liittyvät vahvasti toisiinsa; kun sovellusta on helppo oppia käyttämään, sen käytön muistaa hyvin myös sovellukseen palattaessa. Opittavuus voi tarkoittaa myös sitä, että sovellus hyödyntää muista sovelluksista tuttua toimintalogiikkaa; käyttäjä löytää painikkeet ja toiminnot oletetuista paikoista, jotka myös pysyvät läpi käyttöliittymän. Tätä kautta opittavuus ja muistettavuus ovat ominaisuuksia, jotka vähentävät koulutuksen tarvetta sovelluksen käytössä. Samalla ne säästävät kustannuksia, kun työaikaa ei kulu ylettömästi koulutuksiin ja sovelluksen toimintojen toistuvaan etsimiseen. Opittavuuteen ja muistettavuuteen liittyy olennaisesti myös tehokkuus. Tehokkaaksi suunniteltua käyttöliittymää on helppo oppia käyttämään ja sen toimintaperiaate on hyvin muistettavissa. Tehokkuus liittyy myös nopeuteen, eli siihen, että sovellus vastaa nopeasti käyttäjän toimintaan ja on vakaa. Välitön palaute on oleellinen osa tätä, etenkin siitä näkökulmasta, että jokin toiminto on hidas; tästä pitää antaa heti tieto käyttäjälle. Jokaisessa vuorovaikutustilanteessa on tärkeää informoida käyttäjää välittömästi hänen toimintansa seuraamuksista. Jotta sovellus voi olla helposti opittava ja muistettava sekä tehokas ja nopea, vaaditaan siltä myös virheettömyyttä. Virheettömyydellä tavoitellaan käyttäjän tekemien virheiden ennaltaehkäisemistä sovelluksessa, käyttäjien tekemien virheiden määrä on mahdollisimman alhainen. Virhetilanteita hyvin tyypillisesti kuitenkin syntyy, jolloin hyvin tärkeäksi nousee se, miten käyttäjä selviää niistä mahdollisimman yksinkertaisesti. Virhetilanteen piilottaminen ei koskaan ole ratkaisu, vaan käyttäjälle pitää ilmoittaa selkeällä kielellä yksiselitteisin virheilmoituksin tapahtuneesta. Kun aikaisemmat kriteerit toteutuvat, ja lisäksi visuaalinen ilme on selkeä ja esteettisesti onnistunut, saavutetaan myös miellyttävyys. Tämä kriteeri parantaa käyttökokemusta ja vaikuttaa myös käyttäjän motivaatioon käyttää sovellusta. Käyttäjän ei tarvitse tuskailla, vaan hän saavuttaa tavoitteensa sovelluksen suhteen onnistuneesti. Tällöin käyttömotivaatio nousee ja jos sovellus liittyy käyttäjän työhön, saattaa tämä parantaa jopa työilmapiiriä. Hyvin usein käytettävyydeltään heikot sovellukset vievät käyttäjiltään paljon ylimääräistä aikaa ja aiheuttavat stressiä jo senkin takia, että niitä on työn takia pakko käyttää. Käytön miellyttävyys on kuitenkin hankalasti määritettävissä ja sen kokemuksen muodostuminen on käyttäjäkohtaista. Käytettävyys on riippuvainen ensisijaisesti käyttöliittymästä, mutta myös ohjeistuksesta, käyttöympäristöstä (tietokone, kannettava, älypuhelin, kännykkä, tabletti ) ja käytön tarpeesta. Kun käytettävyyttä suunnitellaan, on oleellista tuntea sovelluksen tulevat käyttäjät, 7

8 heidän toiveensa ja tarpeensa. Tämä voidaan saavuttaa esimerkiksi haastattelemalla ja seuraamalla käyttäjiä heidän työssään. Muuten on hyvin vaikeaa tai lähes mahdotonta huomioida käyttäjänäkökulma aidosti suunnittelussa, selvittää mitä käyttöliittymältä vaaditaan käyttäjän näkökulmasta. Tässä projektissa pyrkimys toki on siihen, että kaikki käyttöliittymät täyttävät kaikki kriteerit, mutta painotus vaihtelee eri käyttäjäryhmittäin. Tehokäyttäjille tarjotaan oikopolkuja ja mahdollisuuksia tehdä yhdellä klikkauksella useammalle kohteelle sama valinta. Peruskäyttäjän kohdalla painotetaan yksinkertaista käyttöliittymää. Käyttöliittymän suunnittelussa käytetään mahdollisuuksien mukaan apuna varsinaisten käyttäjien näkemyksiä ja kokemuksia. Lisäksi suunnitelmissa kuvattujen käyttöliittymien ja olemassa olevien prototyyppien käytettävyyttä arvioidaan projektin aikana tarpeen vaatiessa. Arvionnit suoritetaan joko käyttäjien kanssa tapahtuvilla testeillä tai asiantuntija arviointeina. 1.5 Puhuttelun sävy Puhuttelun sävyllä tarkoitetaan tapaa, jolla käyttöliittymän teksteissä puhutellaan käyttäjää. Se on erittäin tärkeä osa käyttöliittymää, koska tekstimuotoinen puhuttelu on yksi tärkeimmistä kommunikointitavoista järjestelmästä käyttäjään päin. Jos käyttäjä tuntee itsensä taitamattomaksi tehtävän suorittamisessa tai kykenemättömäksi kommunikoimaan sovelluksen kanssa, pitää puhuttelun sävy tarkistaa. Käyttöliittymän puhuttelun sävyssä kannattaa ottaa huomioon seuraavia seikkoja: Kielen tulisi olla selkeää ja sen tulisi olla kirjoitettu käyttäjän eikä sovelluksen näkökulmasta. Tekstin tulisi olla rohkaisevaa; sen tulisi kertoa käyttäjälle mitä sovelluksella voi tehdä ja sen tulisi ohjata käyttäjää kokeilemaan uusia käyttötapoja. Teknistä ammattikieltä (jargonia) ja slangia tulee välttää. Käyttöliittymässä tulisi käyttää aktiivimuotoista sinuttelua: Voit tallentaa muutokset tästä (ei: Muutoksia tallennetaan tästä ) Samankaltaisia lyhenteitä esimerkiksi SBR ja SPB, tulisi välttää. Käyttäjän on vaikea erottaa nämä toisistaan. Huutomerkkien käyttöä tulisi välttää, sillä niistä syntyy helposti käskevä vaikutelma. Käytetään mieluummin kysymysmerkkiä esimerkiksi seuraavassa tilanteessa: Haluatko tallentaa muutokset? sen sijaan, että kirjoitettaisiin Tallenna muutokset! Vältetään hymiöitä ja huumoria. Huumori on monitulkintaista, eikä yleensä palvele käyttöliittymän tarkoitusperää. 8

9 2 Visuaalinen ilme Käyttöliittymäkuvia on etenkin otsikoiden ja alla. Portaalin etusivu, oppija 2.1 Graafinen ohjeisto Tunnus ja tunnuksen käyttö Tiptop projektin tunnus näkyy jokaisella projektin Internet sivulla. Asettelu on tapauskohtaista, mutta tunnus pyritään sijoittamaan alareunaan oikealle. Tiptop projektin tunnus Typografia Typografia eli kirjasinten käyttö tähtää mahdollisemman hyvään luettavuuteen sovelluksessa. Selkeä typografia tekee sovelluksesta miellyttävämmän käyttää sekä lisää sovelluksen luotettavuutta käyttäjän silmissä. Näytöltä luettavaksi tehdylle tekstille pätee erilaiset säännöt kuin paperille painattaessa. Esimerkiksi paperilla jotain asiaa painotettaessa voidaan käyttää joko kursiivia tai lihavointia, mutta kursiivi on erittäin 9

10 vaikeasti luettavaa näytöllä. Näytöllä korostaessa tulisi käyttää joko lihavointia tai toista väriä. Myöskään alleviivausta ei pidä käyttää näytöllä paitsi hyperlinkeissä. Tiptop projektin sovelluksissa yleisenä kirjasimena kaikkialla käytetään Arialia. Vaihtoehtoinen kirjasin on Calibri. Leipätekstissä (myös taulukoissa) pistekoko on 12, paitsi HOPSin busseissa leipätekstin pistekoko on 9. Tekstilinkeissä fonttikoko on 12, tilanteen mukaan kokoa voi pienentää kokoon 10 asti. HOPSin leijukkeella voi olla tarpeen pienentää linkkejä kokoon 8. Tekstilinkeissä ei ole mitään muotoiluja. Otsikoissa H1 on kokoa 16 (boldattu), H2 on kokoa 14 (boldattu) ja H3 kokoa 13 (kursivoitu, erottuvuuden lisäämiseksi voi tarvittaessa laittaa kursiivi+bold). Taulukoiden sarakeotsikoissa koko on 12. Tarvittaessa vähemmän huomiota tarvitsevien lyhyiden tekstien kohdalla, esimerkiksi viestien yhteydessä viestin saapumisaika, käytetään fonttikokoa 10, ei kursivointeja tai boldauksia. Lisäksi jos tarvitaan muita ns. selittäviä tekstejä, kuten ikonien selitteitä, voidaan käyttää fonttikokoja 8 10, tällöinkään ei kursivointeja tai boldauksia Värit Värien avulla voidaan kiinnittää käyttäjän huomio johonkin käyttöliittymän alueeseen tai osa alueeseen. Niiden avulla voidaan nopeuttaa tiettyjen käyttöliittymän osien tunnistusta (esim. varoitusvärit) tai niiden avulla voidaan ilmaista yhteenkuuluvuutta ja rakennetta. Oikealla värimaailmalla voidaan parantaa käyttöliittymän käytettävyyttä esimerkiksi parantamalla sen luettavuutta ja vähentämällä virhepainallusten määrää.tiptop projektin eri sovelluksissa käytetään samoja tai toisiaan muistuttavia värimaailmoja, näin voidaan mm. parantaa käyttöliittymien opittavuutta. Leipätekstin ja otsikoiden värinä käytetään joka puolella tummaa sinistä, myös leijukkeissa, ellei muuta mainita: #014A5B HOPSin bussien fonttiväri ja alasvetovalikoiden fonttiväri: #001A21 10

11 HOPSin rakennepuun opintojaksojen fonttiväri, opintokokonaisuusleijukkeilla valittujen (valintaruudun kautta) opintojaksojen fonttiväri ja hakukenttien markkerin fonttiväri: # Navigaation fonttivärit: #004A5C (valittu boldattuna, ei aktiivinen ilman muotoiluja) #B0CFD4 (fokustilassa oleva/hover) Tekstilinkkien värit: #46ABC3 #68CBE4 #126A80 #A9ACAD (avaamaton) (hover/aktiivinen) (avattu) (ei voi klikata*) *Esim. oppijalla HOPSin lukuvuosinäkymässä, kun selataan aikajanaa, eikä käyttäjä voi selata käyttäjä on aloittanut syksyllä 2013, eikä täten voi selata kevääseen Avoimen HOPSin puolella rakennepuussa valittua opintoa korostava tekstiväri: #ECA200 Taulukoissa käytettävät tekstien huomiovärit: #BF3439 #ECA200 #00896C 11

12 Taulukoiden sarakeotsikoiden väri: #298FA8 HOPSin rakennepuun Valittu otsikoiden värit: #7EC4BB (vaalea pohja) #C1F5EE (tumma pohja) Kirjaudu Ulos tekstin fonttiväri: #8F007D Portlettien taustavärit: #FC9B34 #E56924 (vasen / yksi) (oikea / kun on kaksi portlettia) Lukuvuositason aikajanan värit: Reuna: #93C9D6 Tausta: #FBFEFF Reunaviivan paksuus 2px 12

13 Bussien värit: Reuna: #BFD971 Reuna: #FFD100 Reuna: #FC9B34 Tausta: #FEFFFB Tausta: #FFFEF9 Tausta: #FDFBF9 Reunaviivan paksuus 3px Aikajanassa sekä keltaisessa ja oranssissa bussissa Drop Shadow: Distance 8px, Spread 0%, Size 10px, Opacity 75%, Angle 120 Poissaolo bussin värit: Reuna: #E65656 Tausta: #FFFFFF Valinnaisten opintojen hakuleijukkeen taustaväri: #FAFDFE Tai vaihtoehtoisesti Haun / Hakutulosten taustavärinä on valkoinen, jonka Fill arvo on 98% Yhteydenoton ja merkinnän lisäämisen popupien taustaväri: #E56924 Yhteydenoton vastaanottajien lisäämisen popupin taustaväri: #FC9B34 13

14 HOPSin tutkintorakennepuun elementit: #008FC4 #126A80 (valittu, vaaleampi) (passiivinen, tummempi) Taulukon rivien taustavärit: #F8FCFD (ensimmäinen, aloittava rivi) #D3EAF0 (joka toinen rivi) Kun on tarve ilmaista erilaisin pienten alueiden taustavärein, onko jokin osio käytettävissä vai ei, käytetään liikennevalotyyppisesti punaista, keltaista ja vihreää. Tätä värikoodausta voidaan käyttää esimerkiksi silloin, kun ilmaistaan kuinka moni opiskelija on jo palauttanut tehtävän, kuinka monella se vielä on kesken ja kuinka moni ei ole vielä aloittanut tehtävää (esim. ohjaajan etusivu). Nämä sävyt toimivat myös HOPSin bussien reunaväreinä, värien alla on suluissa merkitykset tähän tarkoitukseen. #E65656 #FFD100 #BFD971 (poissaolo) (ilmoittauduttu) (suoritettu) Tarpeen mukaan lisänä: #FC9B34 (ajoitettu) #B4B5B7 (ajoittamaton) Palvelussa käytetään erilaisia kehikoita selventämään käyttöliittymäelementtejä. AHOT palvelussa Aiemmin hankittu osaaminen kohdassa AMK tasoinen koulutus on 14

15 kehikon sisällä, jonka reunaviiva on 4px ja väriltään #FC9B34. Muu koulutus on puolestaan kehikon sisällä, jonka reunaviiva on niinikään 4px, mutta väri #FFD100. Hyväksiluvun kohde kehikoiden reunat ovat leveydeltään 4px ja väriltään #E HOPS palvelussa opiskelijan eri tutkintoja reunustavat kehikot. Tarkasteluun valitun tutkinnon kehikon reunat ovat leveydeltään 3px, reuna on väriltään #E56924 ja taustaväri on #FFFCFB. Valitsemattomissa on saman värinen reunus, mutta leveys on 1px. Kun käyttäjä vie kursorin tutkinnon kehikon päälle, on taustaväri #FCF0E8. Tällöin aikajanalla kyseisen tutkinnon bussit näkyvät normaalisti, mutta muiden tutkintojen bussit himmenevät läpinäkyvyydeltään 50%:iin. Ensisijainen tutkinto on listassa ylimpänä. Oppijan HOPS, tutkinnon hover efekti 15

16 3 Käyttöliittymän toimintaperiaatteet Käyttöliittymästä on varsinaisesti vain yksi versio. Eri käyttäjäryhmästä ja toiminnosta riippuen painotetaan kuitenkin erilaisia käytettävyyden painopisteitä. Samoja toimintoja usein käyttävillä ns. tehokäyttäjillä painotetaan tehokkuutta, nopeutta ja virheettömyyttä. Tällainen käyttäjä voi olla esimerkiksi opettaja tai suunnittelija, joka useita kertoja kuukaudessa päivittää opiskelijoille arvosanoja. Vastaavasti toiminnoissa, joita käytetään harvemmin, painotetaan opittavuutta ja muistettavuutta. Esimerkkinä tällaisesta käyttäjästä käy opiskelija, joka käyttää palvelua ehkä vain muutaman kerran lukuvuodessa suunnitellessaan hopsiaan tai ilmoittautuessaan opintojaksojen toteutuksille. 3.1 Yhdenmukaisuus Elementtien yhdenmukaisuus sovelluksessa sisäisesti ja eri sovellusten välillä on keskeinen käyttöliittymien toteutusta ohjaava periaate. Ihminen muodostaa luontaisesti kuviomalleja näkemistään asioista, esimerkiksi jokaisen ihmisen kasvot ovat kuvio, joka noudattaa tiettyä mallipohjaa. Ihminen pystyy erottamaan tuhansia kasvoja toisistaan vilkaisulla, vaikka periaatteessa kasvot poikkeavat toisistaan hyvin pienellä marginaalilla. Vastaavalla periaatteella käyttäjä luo merkityksiä myös käyttöliittymien kuviomalleille. Koska aivot jatkuvasti rakentavat kuviomalleja, ne myös tallentavat eri merkityksiä niille. Ihminen oppii nopeasti esimerkiksi että hakulaatikko on oikeassa yläkulmassa verkkokäyttöliittymissä, koska on ennestään tottunut näkemään samantyyppisiä kuviomalleja. Vaikka ratkaisu tai toiminto olisi kuinka epätäydellinen, oppii käyttäjä tekemään sen suorittaessaan toiminnon samalla tavalla useasti. Hänen aivonsa muodostavat kuviomallin, jota käyttäjä seuraa toiminnan kontekstissa. Jos käyttöliittymän toiminnot ovat aina samalla tavalla toimivia, pystyy käyttäjä oppimaan helposti useita käyttöliittymiä. Jos taas toiminnot ovat hyvin erilaisia, käyttäjä joutuu luomaan uuden kuviomallin jokaisessa tilanteessa tehdäkseen oikean valinnan. Pahin tilanne muistamisen kannalta on, jos toiminnot eivät ole yhdenmukaisia, mutta niiden semanttinen sisältö, merkitys, on sama tai lähes vastaava. Tällöin käyttöliittymän toimintaperiaatteet menevät käyttäjällä täydellisesti sekaisin. Tehtäessä olemassa oleviin sovelluksiin muutoksia täytyy muistaa, että vaikka uusi ratkaisu olisi käytettävämpi kuin vanha, voi se tuottaa vanhoille käyttäjille ongelmia. Tästä näkyy yhdenmukaisuuden ja ihmisen muistin voima; käyttäjät muistavat aikaisemman version toiminnan ja se häiritsee uudenlaista käyttöä. Mitä enemmän käyttöliittymä muistuttaa vanhaa, sitä varmemmin käyttäjä toimii vielä pitkään vanhasta käyttöliittymästä 16

17 opittujen toimintatapojen mukaan. Tämän takia käyttöliittymän perusteellinen uudelleenrakentaminen on parempi ratkaisu kuin yksittäisten pienten toimintasarjojen korjailu Eri etenemismuotoja Käyttöliittymässä voidaan kulkea eri suuntiin, esimerkiksi vasemmalta oikealle tai ylhäältä alas. Tiptop projektissa käyttöliittymissä kuljetaan pääsääntöisesti juuri näin. Vasemmalla käyttöliittymässä sijaitsevia tietoja tarkennetaan lisätiedoin tai niihin tehdään valintoja oikealle avautuvissa näkymissä. Esimerkiksi hopsissa vasemman palstan tutkintorakennepuuhun tehdään valintoja oikealle aukeavissa leijuvissa ikkunoissa, leijukkeissa. Vastaavalla tavalla toimitaan esimerkiksi opintojen vaiheittaisuuden kuvauksissa ja erilaisissa listauksissa Oppija, opintojakson leijuke 3.2 Valitut käyttöliittymämallit ja tiedon visualisointitavat Lopullisessa käyttöliittymärakenteessa sovelletaan enimmäkseen lineaarista käyttöliittymärakennetta, puumallista hierarkian esitystapaasekä kalanruotomaista 17

18 timeline navigaatiomallia. Käyttöliittymätiimi tutki standardin valmisteluvaiheessa useita vaihtoehtoisia käyttöliittymien rakennemalleja ja tiedon visualisointitapoja. Mallit on kuvattu dokumentin liitteessä Oppijan käyttöliittymä Tiptop portaalin oppijan käyttöliittymä koostuu etusivusta, hops näkymästä, opintojen seurannan näkymästä sekä viestit osioista. Etusivulla esitetään omalla palstallaan oppijan kalenterinäkymä sekä ajankohtaiset tiedotteet. Oppija, etusivu (lokakuu 2013) 18

19 Aikajanan ylätasolla saa tooltipin avulla näkyviin tarkempaa tietoa: Oppija, HOPS, aikajanan ylätason tooltip (lokakuu 2013) Oppija, HOPS, aikajanan ylätaso (lokakuu 2013) 19

20 Hops näkymässä vasen puoli noudattaa klassista hierarkista puurakennetta. HOPS tutkintorakennepuu Hopsin oikean puoleinen näkymä on vastaavasti timeline mallinen opintopolku ja lähemmäksi zoomatessa puumallinen opintopuu. Opintopolulle suunnitellaan ja ajoitetaan opintoja joko viemällä opinnot drag&drop tekniikalla suoraan opintopolulle, tai määrittelemällä opintojen ajoitus valintakentissä. 20

21 HOPS aikajana Opintopolku esitetään horisontaalisessa muodossa niin, että opintojen eteneminen ja esittäminen tapahtuu vasemmalta oikealle. Opinnot tullaan sijoittamaan timelinelle suorakaiteen muotoisena palikkana, joka on sitä paksumpi mitä suurempi opintopistemäärä siihen sisältyy suhteessa suoritettuun ajanjaksoon. Opintojakso voi hajautua myös usealle eri aikajaksolle, jolloin opintojaksoa yhdistää laatikoiden välissä oleva nauha. Kun horisontaaliin timeline ajatteluun yhdistää suorakaiteen muotoisten yksiköiden, tässä tapauksessa opintojen sijoittelun, muistuttaa käyttöliittymän oikean puolen näkymän alkuasettelu Gantt tyylistä rakenteelta. Oppijan käyttöliittymässä opintojen seurannan näkymä koostuu vasemman palstan opintosuorituslistauksesta ja oikean palstan etenemistä kuvaaviin graafeihin. Graafit ovat erityyppisiä diagrammeja, jotka kuvaavat oppijan etenemistä opintopolullaan valittuja vertailukohtia vasten. Oppija, ROS (Huom: portlettien sisällöt eivät vastaa Tiptop muotoiluja) Viestit osiossa oppija voi tarkastella saamiaan viestejä ja suodattaa niitä niiden tyypin ja tagien mukaan. Tässä näkymässä oppija voi myös tehdä lisää merkintöjä sekä yhteydenottoja. 21

22 Oppija, Viestit osio (lokakuu 2013) Yhteydenottoja ja merkintöjä pääsee lisäämään myös suoraan leijukkeista. Yhteydenottoa lisättäessä popupin otsikko on tasoa H2, muut tekstit leipätekstiä (vastaanottajien nimet koko 11) ja tekstilinkkejä. Markkerit on muotoiltu kuten hakukentän markkerit. Oppija, uuden yhteydenoton lisääminen (oranssin popupin ulkoasu on ajantasainen) 22

23 Yhteydenoton vastaanottajien lisäämisen popupissa on poikkeuksellinen valkofonttinen otsikko, koko 12, bold+kursiivi, muut tekstit ovat leipätekstiä, valittu vastaanottajaryhmä boldattu. Oppija, uuden yhteydenoton vastaanottajien lisääminen (popupien ulkoasut ovat ajantasaiset) HOPS osiossa on tutkintorakenteen ja aikajanan lisäksi Avoin HOPS alaosio. Täällä oppija voi tarkastella HOPSiinsa liittyviä merkintöjä ja yhteydenottoja, sekä tehdä niitä lisää. Merkintöjä ja yhteydenottoja voi suodattaa tutkintorakennepuun opintojaksojen mukaan tai oppijan itse tekemien tagien mukaan. 23

24 Oppija, Avoin HOPS (syyskuu 2013) Ohjaajan käyttöliittymä Tiptop portaalin ohjaajan käyttöliittymä koostuu etusivusta, ryhmäkohtaisesta koostenäkymästä, oppijan puolta vastaavasta hops näkymästä, opintojen seurannan näkymästä, viesti osioista sekä roolipohjaisesti esitettävästä arviointipalvelusta. Etusivulla on suunniteltu esitettävän vasemmalla palstalla kalenteri ja tehtävänäkymät sekä ohjausryhmäkohtaista yleistietoa. Ohjaaja, etusivu (lokakuu 2013) 24

25 Ryhmäkohtainen koostenäkymä sisältää suunnitelman mukaan taulukkomuotoisen yhteenvedon eri ohjausryhmien tilanteesta. Hops ja opintojen seuranta näkymät mukailevat oppijan puolella kuvattuja esitystapoja sillä poikkeuksella, että ohjaajalla on käytettävissään opintojen seuranta osiossa useampia tapoja tarkastella oppijan tai oppijaryhmän etenemistä. Ohjaaja, HOPS ryhmänäkymä (elokuu 2013) Ohjaajan HOPS ryhmänäkymästä pääsee tarkastelemaan yksittäisen opiskelijan tietoja, kuten tämän ohjaajalle lähettämiä viestejä. 25

26 Ohjaaja, HOPS ryhmänäkymä, yksittäisen opiskelijan yhteydenotot (elokuu 2013) Arviointipalvelussa arvioitavien opiskelijoiden tiedot kootaan listaksi vasemmalle palstalle, ja oikealle avautuvassa ikkunassa syötetään tai valitaan kenttiin mm. arvosana, laajuus ja opettajatiedot. Ohjaajan Viestit osio on toteutettu vastaavanlaisella logiikalla ja ulkoasulla kuin oppijan versio. 3.3 Käytettävät termit Koko palvelussa pyritään käyttämään yleismaailmallista kieltä, vältetään vain tietyn ryhmän käytössä olevia termejä. Käytettävää terminologiaa ohjaa osaltaa korkeakoulujen tietomallin (XDW) käyttämä terminologia. Käyttöliittymässä käytetään mahdollisimman lyhyitä ja yksinkertaisia sanoja. Tekstisisällön tulee olla yksinkertaista kieltä, ei monimutkaisia tai pitkiä lauseita eikä vieraskielisiä termejä. Vältetään myös laajoja kuvauksia, pyritään esittämään asiat tiivistetysti. 3.4 Peruutus / uudelleensuoritus 26

27 Aina sen ollessa mahdollista tulisi käyttäjälle tarjota mahdollisuus peruuttaa suoritettu toiminto. Käyttöliittymä, jossa peruutettavuus on helppoa, rohkaisee käyttäjää kokeilemaan erilaisia käyttö ja työtapoja. Peruutettavuus toteutetaan sellaisilla toiminnoilla kuin "Peruuta" (Undo) tai "Palaa tallennettuun versioon" (Revert to saved). Lisätään Olet nyt lähettämässä AHOT hakemusta kurssista x, oletko aivan varma? tyyppisiä vahvistuksia tilanteisiin, joissa opiskelija on lähettämässä ns. peruuttamatonta tietoa. Pakotetaan käyttäjä näin varmistamaan ja vahvistamaan lähetettävät tiedot. Joihinkin tilanteisiin voidaan tarjota myös esikatselutoimintoa, eli annetaan käyttäjän katsoa lähetettävää tietoa vastaanottavan osapuolen näkökulmasta. Tämä voisi olla hyvä tarjota esimerkiksi sellaisiin tilanteisiin, joissa tekeillä olevaa asiaa ei voi peruuttaa. Jos käyttäjän tekemää komentoa ei voi peruuttaa ja siitä seuraa tallentamattoman tiedon menettäminen, on siitä ilmoitettava käyttäjälle. Tällaisessa tapauksessa käytetään varoitusikkunaa. 3.5 Lokalisaatio Suomi, ruotsi ja englanti ovat palvelun viralliset kielet. Projektin aikana toteutetaan ainakin suomi versio. Projektin jälkeen jatkokehitysvaiheessa tulee täten ainakin ruotsi ja englanti versiot. Suunniteltaessa käyttöliittymää on otettava huomioon, että myös vieraskieliset tekstivastineet mahtuvat painikkeisiin ja toimintokuvauksiin. Suomi kieliversiossa ajan kuvaus sovelluksissa tehdään suomalaiseen malliin eli malliin pp.kk.vvvv. Sama toimii suurimmassa osassa maailmaa, joten euroopan sisällä toimiessa sama esitystapa voi olla englanninkielisessä versiossa. Ainoa suuri ryhmä, joka esittää ajan kk.pp.vvvv mallin mukaan, on amerikkalaiset. Tämä tulee ottaa huomioon, jos sovellusta aiotaan kohdentaa amerikan markkinoille. Jos sovellusta aiotaan suunnata monikansalliseen levitykseen, tulee harkita ajan kuvauksen esittämistä englanninkielisessä versiossa niin, että kuukaudet kirjoitetaan joko kokonaan auki tai lyhennettyinä (Jan, Feb, Mar, Apr jne.) Desimaalien erotteluun tulisi voida käyttää sekä pilkkua että pistettä. Järjestelmä tulee siis tukea kumpaakin. Pilkun käytön mahdollistaminen edesauttaa näppäimistön oikeassa laidassa sijaitsevan numeronäppäimistön (numpad) sujuvan käytön käsiteltäessä numeraalista tietoa. 4 Esteettömyys 27

28 4.1 Mitä esteettömyys on? Käsittettä esteettömyys (engl. accessibility) käytetään usein kertomassa tuotteen tai palvelun yhdenvertaisesta ja helposta lähestyttävyydestä. Palvelun esteettömyys ei koske ainoastaan rajoitteisia erityisryhmiä, vaan myös tavanomaisista poikkeavien laitteiden käyttäjiä. Esteettömyyden arviointi eroaa käytettävyyden arvioinnista mm. siten, että käytetyt esteettömyyden tarkistuslistat eroavat käytettävyyden heuristiikkalistoista. Itse arviointi on kuitenkin hyvin samankaltaista. Tärkeimpiä esteettömyysohjeita: Rakenne: tee sivu sellaiseksi, että se alusta loppuun luettuna on toimiva, mm. tärkeimmät asiat ovat ensin. Kieli: käytä yksinkertaisinta kieltä, jonka sisällön luonne sallii. Tekniikat: käytä yksinkertaista ja loogista HTML merkkausta, ja virittele ja sommittele ulkoasu ensisijaisesti CSS:llä. Pidä huolta, että tekniikat ovat standaradinmukaisia. Linkit: nimeä linkit sisältöä kuvaaviksi, ei esimerkiksi "klikkaa tästä". Multimedia: tarjoa kaikelle kuva, ääni, video yms. aineistolle tekstivaihtoehto. Taulukot: huolehdi, että taulukot ovat mielekkäitä myös riveittäin luettuina. Ohitettavuus: tarjoa mahdollisuus ohittaa ne aineistot, jotka voivat olla esteellisiä, kuten isot taulukot. Huomionarvoista on myös se, että erilaisilla erityisryhmillä ja eri käyttötilanteissa on myös erilaisia tarpeita: Sokeat (tai heikkonäköiset) voivat käyttää Internetiä esimerkiksi ruudunlukuohjelman avulla tai erityisellä laitteella (pistenäyttö) joka muuttaa tekstin pistekirjoitukseksi. Jos sivua ei ole vähintäänkin tehty HTML suositusten mukaisesti validiksi, ei lukuohjelma osaa välttämättä lukea tietoa oikein. Tämän todentamiseen käytetään validaattoria. Myös web sivuihin upotetut kuvat ovat sokeille hankalia. Tämän takia kuvien tietosisältö tulisi ilmaista vaihtoehtoistekstien (käytännössä HTML:n alt attribuutti) avulla. Heikkonäköiset ihmiset saattavat käyttää sivustoa suurella tekstikoolla tai ruudunsuurennusohjelmaa käyttäen. Sivun on toimittava myös näissä tilanteissa. Monipalstaisen sivun seuraaminen voi olla ruudunsuurennusohjelmaa käyttävälle hankalaa. Kuurot tai huonokuuloiset ihmiset eivät välttämättä kykene havaitsemaan merkkiääniä tai kuulemaan videoiden ääniraitaa. Liikuntavammaiset eivät välttämättä kykene käyttämään hiirtä lainkaan. Siksi sivun on 28

29 oltava käytettävissä myös pelkällä näppäimistöllä. Ei toteuteta näin projektin aikana. Rinnakkaisen käyttöliittymän toteuttaminen vaatii toiminnallisuuksien muokkaamista esteettömiksi, tai kokonaan korvaavien toiminnallisuuksien suunnittelua. Työmäärä riippuu vahvasti korvattavien toimintojen monimutkaisuudesta. Varsinaisen ohjelmointityön määrä riippuu toteutettavista toiminnoista, mutta sen voi olettaa olevan alhaisempi kuin alkuperäisen käyttöliittymän vaatima, sillä esteetön käyttöliittymä on todennäköisesti paljon yksinkertaisempi. Kognitiivisista (ymmärrykseen ja oivaltamiseen liittyvistä) ongelmista kärsivät tarvitsevat selkeitä ja ytimekkäitä sivuja, joissa on paljon kuvia, kuvaajia ja listoja selkeyttämässä asiaa. Esteettömyyden arvioinnissa olisi edullista, mikäli käytettävissä olisi ainakin yleisimpien esteellisten käyttäjäryhmien edustajia. (Vastaavasti kuin käytettävyyden arvioinnissa.) Valitettavasti parhaallakaan esteettömyyssuunnittelulla ei voida ottaa huomioon yksilöllisiä esteellisyyden tasoja, eikä yhdellä versiolla voida kattaa jokaisen erikoisryhmän tarpeita, mutta täyttämällä eritasoisia vaatimuksia voidaan esteettömyyttä yleisellä tasolla merkittävästi lisätä. Projektissa olisi edullista toteuttaa ainakin W3 konsortion esteettömyysvaatimusten A taso, sillä jos tätä tasoa ei toteuteta, joidenkin ryhmien on mahdotonta käyttää sivua. Seuraavassa on lyhyesti esitelty kyseinen vaatimuslista: 4.2 A tason esteettömyysvaatimukset (WCAG 2.0) 1 Havaittavuus 1.1 Tekstivastineet: Tarjoa tekstivastineet kaikelle ei tekstuaaliselle sisällölle siten, että sisältö voidaan muuttaa muihin tarvittaviin muotoihin, kuten isokokoiseksi tekstiksi, pistekirjoitukseksi, puheeksi, symboleiksi tai yksinkertaisemmaksi kieleksi. 1.2 Aikasidonnainen media: Tarjoa vastine aikasidonnaiselle medialle. 1.3 Mukautuvuus: Tuota sisältöä, joka voidaan esittää eri tavoin (esimerkiksi yksinkertaisemman asettelun avulla) informaatiota tai rakennetta menettämättä. 1.4 Erottuvuus: Helpota käyttäjiä näkemään ja kuulemaan sisältö lisäämällä taustasta erottuva etuala. 2 Hallittavuus 29

30 2.1 Saavutettavuus näppäimistöllä: Toteuta kaikki toiminnallisuus siten, että se on käytettävissä näppäimistöltä. 2.2 Tarpeeksi aikaa: Anna käyttäjille tarpeeksi aikaa lukea ja käyttää sisältöä. 2.3 Kohtaukset: Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan sairauskohtauksia. 2.4 Navigoitavuus: Tarjoa käyttäjille tapoja navigoida, etsiä sisältöä ja määrittää sijaintinsa. 3 Ymmärrettävyys 3.1 Luettavuus: Tee tekstisisällöstä luettavaa ja ymmärrettävää. 3.2 Ennakoitavuus: Tee verkkosivuista sellaisia, että niiden ilmiasu ja toiminta ovat ennakoitavissa. 3.3 Avustetut syötteet: Auta käyttäjiä välttämään ja korjaamaan virheitä. 4 Lujatekoisuus 4.1 Yhteensopivuus: Maksimoi yhteensopivuus nykyisten ja tulevien asiakasohjelmien kanssa, mukaan lukien avustavat teknologiat. 4.3 Ohitettavuus Mikäli esteetöntä vaihtoehtoa ei ole mahdollista tarjota, on esteettömän sisällön oltava ohitettavaa. Sisällön yhteyteen on kuitenkin syytä kirjoittaa kuvaus siitä, mistä esteellinen käyttäjä on jäänyt paitsi, sekä mahdollisuuksien mukaan pääsy mahdollisimman samankaltaiseen esteetömään sisältöön (esim. ruuhkakameran kuvan sijasta linkki liikennemäärätietoon tai tekstimuotoiseen ruuhkatiedotteeseen). 4.4 WAI ARIA WAI julkaisi kokoelman ohjeita aria/index.html jotka tukevat saavutettavien dynaamisten verkkopalveluiden suunnittelua. Ohjeet kulkevat nimikkeellä Accessible Rich Internet Applications (WAI ARIA). ARIA HTML:n validoinnissa (HTML 4.01 ja 5.0, XHMTL 1.0 ja 1.1) on toistaiseksi hieman ongelmia, joten WAI ARIA on nykyisellään lähinnä hyvä tietää materiaalia. 30

31 5 Lomakkeiden suunnittelu Lomakkeita suunniteltaessa tulee ottaa huomioon se, että kentät ovat loogisessa järjestyksessä ja lomake tulee voida täyttää pelkkää näppäimistöä käyttäen. Käytännössä tämä tarkoittaa sitä, että tab näppäimellä tulee voida siirtyä kentästä toiseen loogisessa järjestyksessä. Kunkin kentän yhteydessä tulee esiintyä sitä kuvaava nimi tai muu selite. Paras ratkaisu esteettömyyden kannalta on se, että yhdellä rivillä on vain yksi asia: seliteteksti ja sen perässä syöttökenttä. Tästä voidaan kuitenkin poiketa, jos se on perusteltua esimerkiksi sillä, että lomakkeen visuaalinen sommittelu parantuu. Ennen lomaketta on annettava riittävät ohjeet sen täyttämisestä. Lomakkeiden suunnittelussa esteettömin vaihtoehto on se, että kenttien selitetekstit tulevat kenttien vasemmalle puolelle, eivätkä kenttien päälle. Selitetekstit tasataan niin että niiden oikeat laidat ovat linjassa toistensa kanssa (eng. align right). Mikäli lomakkeeseen tuleva kenttä on leveä, eikä seliteteksti mahdu samalle riville, se tulee sijoittaa heti edelliselle riville kentän päälle (katso Lomake AHOT hakemuksesta kuva alla). Lomakkeen muotoilu Lomake AHOT hakemuksesta 31

32 Lomakkeita suunniteltaessa on hyvä käyttää apuna sommitteluruudukkoa. Sen avulla voidaan tasata kentät linjoihin horisontaalisesti ja vertikaalisesti. Sommitteluruudukon yhden sarakkeen leveys on sellainen, että siihen mahtuu päivämäärän (muodossa pp.kk.vvvv) esittävä syöttökenttä ja kalenteri painike vierekkäin. Kunkin kentän pituus näytöllä määritellään siten, että se on yksi sommitteluruudukon sarake tai sen monikerta. Voidaan myös käyttää puolittaisia ruudunpituuksia sen ollessa tilankäytöllisesti perusteltua. Sommitteluruudukon rivin korkeus on sen mittainen, että siihen mahtuu yksirivinen tekstikenttä. 5.1 Visuaalinen sommittelu Kentät pyritään asemoimaan aina kun mahdollista sellaiseen järjestykseen, että toisiinsa asiayhteydellisesti liittyvät kentät ovat toisiaan lähellä ja samoissa kenttäryhmissä. Tarvittaessa vaihdetaan kenttien järjestystä ja/tai säädetään kenttien leveyksiä, jotta tyhjiltä tiloilta vältytään. Pakolliset kentät sijoitetaan lomakkeen alkuun, ellei tämä riko kenttien merkityksellistä yhteenkuuluvuutta. Pakolliset kentät on ilmaistava visuaalisella vihjeellä, esimerkiksi tähtimerkillä. Pakollisen kentän merkitseminen Lomakenäytöistä toteutetaan sen kokoisiksi, että määritellyllä minimiresoluutiolla ei ilmesty vaakasuuntaisia vierityspalkkeja Kenttäryhmät Lomake voidaan jakaa kenttäryhmiksi, jotka sisältävät semanttisesti eri kategoriaan kuuluvia kenttiä. Kenttäryhmällä on otsikko ja kehysviiva, joka erottaa sen kentät muista. Kun lomakenäytön kenttiä on tarve ryhmitellä kenttäryhmäksi, jaetaan koko lomakenäyttö kenttäryhmiksi siten, että kaikki sen kentät ovat jonkin kenttäryhmän sisällä, eli siinä ei ole yksittäisiä kenttiä kenttäryhmien ulkopuolella. 32

33 Kenttäryhmät 33

34 6 Taulukoiden suunnittelu Taulukko on tapa jäsennellä tietoa ja lisäksi se on tietorakenne itsessään. Sen mentaalimalli on esimerkiksi hyllykkö, jossa eri pysty ja vaakariveissä on tavaraa tietyn järjestelmän mukaisesti. Taulukko koostuu pystyriveistä, joita kutsutaan sarakkeiksi, sekä vaakariveistä, joita kutsutaan yksinkertaisesti riveiksi. Taulukko on hyvä tapa jäsennellä suuria määriä tietoa, mutta ollakseen mahdollisimman tehokas ja käytettävä on sen noudatettava tiettyjä sääntöjä. Tiptop projektissa käytetään taulukoita tarvittaessa raporttien sekä erilaisten listojen yhteydessä, kuten listattaessa HOPS ohjattavia. Taulukoiden visuaalinen ulkoasu fonttien ja värien osalta on esitetty tarkemmin luvuissa ja Ohjaaja, HOPS ryhmänäkymä 6.1 Sarakkeet Sarakkeet tulee otsikoida lyhyesti ja ytimekkäästi, mutta otsikoiden tulee olla myös kuvaavia ja yleiskielellä ymmärrettäviä. Jos sarakkeen otsikko on pitkä, se voidaan katkaista, jolloin katkaisu osoitetaan kolmella pisteellä katkaistun sanan perässä. Etenkin tällöin on käytettävää leijuvaa otsikkoa, tooltippiä, selventämään otsikkoa. Tooltip tulee esiin, kun kursori viedään katkaistun sanan päälle. 34

35 Tooltip Usein taulukoissa on tarjolla enemmän dataa kuin käyttäjän on mielekästä tarkastella. Tällöin tulee käyttää sarakkeiden valintaa. Sarakkeen lisääminen valitaan sarakkeen lähistöllä olevasta valinnasta, rasti ruutuun periaatteella. Mikäli sarakkeita on paljon, voidaan samaan yhdistää hakutoiminnallisuus. Sarakkeiden lisääminen Sarakkeiden leveys annetaan käyttäjän säädettävissä silloin kun se on mahdollista. Tällöin kursori muuttuu sarakkeiden väliin vietäessä symboliksi, joka ilmaisee kenttien leveyden olevan säädettävissä. Sarakkeen leveyden muuttaminen Aktiivinen järjestely ilmaistaan selkeällä, riittävän suurella ikonilla sarakkeen otsikon jälkeen. Aktiivinen järjestely tarkoittaa sitä, että käyttäjä voi itse määritellä minkä sarakkeen mukaan tiedot taulukossa järjestetään. Aktiivisen järjestelyn mahdollisuudesta sarakkeessa kertoo tyypillisesti kolmio; ylöspäin osoittava kolmio tarkoittaa nousevaa järjestystä ja alaspäin osoittava kolmio laskevaa järjestystä. Ilmaisimia on vain yksi koko taulukossa kerrallaan ja sen paikka siirtyy valitun sarakkeen mukana. Taustavärin käyttö järjestysilmaisimen ohella on suositeltavaa. Myös se, kumpi on oletuksena, nouseva vai laskeva, on tapauskohtaista. Järjestys vaihtuu sarakkeen otsikkoa klikkaamalla. 35

36 Aktiivinen järjestely Myös sarakkeiden järjestys voi olla käyttäjän säädettävissä jos sille on toiminnallinen tarve. Tämä osoitetaan symbolilla, josta tarttumalla ja raahaamalla voidaan säätää yksittäisen kentän paikka taulukossa. Näkymä päivittyy pudotettaessa kenttä haluttuun kohtaan. Sarakkeen kehys tulee näyttää siirrettäessä. Vietäessä hiiri otsikon kohdalle alleviivataan otsikko indikoimaan järjestelytoiminnallisuutta, eli klikkaamalla otsikkoa järjestely vaihtuu Rivit Korostamalla rivejä voidaan taulukoiden luettavuutta parantaa. Korostusvärin tulee olla sellainen, että sen ja tekstin värinen kontrasti on hyvä. Korostusvärin tulee myös poiketa riittävästi taustaväristä. Korostustapoja on käytännössä kaksi; dynaaminen ja staattinen. Dynaaminen tapa korostaa osoittimen alla olevan aktiivisen rivin kun taas staattinen esimerkiksi joka toisen rivin. Tavat voi myös yhdistää. Dynaaminen (vas.) ja staattinen (oik.) korostustapa Tiptop projektissa käytetään näiden kahden tavan yhdistelmää, koska staattinen korostustapa helpottaa taulukon tarkastelua ja dynaaminen sen selaamista. Jos käyttäjä poistaa rivin staattisesti korostetusta taulukosta, rivien värien täytyy muokkautua siten, että värien vuorottelu rivien välillä säilyy. 6.3 Taulukkodatan muokkaus Mikäli tarvitaan taulukko, jonka dataa käyttäjä voi muokata, on suositeltavaa käyttää 36

37 suoramuokkausta. Suoramuokkaus tarkoittaa sitä, että dataa voidaan muokata suoraan solusta ilman että tarvitsee siirtyä erikseen muokkaustilaan. Tietyt järjestelmät asettavat kuitenkin tälle rajoituksia. Osassa Tiptop projektissa toteutettavista palveluista suoramuokkaus ei todennäköisesti ole optimaalinen toimintatapa (esim. arviointipalvelu tehokäyttäjän näkökulmasta). Toteutustapaa tulee arvioida tilannekohtaisesti. Kasvava solu ja puhekupla ovat muokkauselementtejä, joiden käyttö on mahdollista kun tarkoituksena on muokata vain muutamia yksittäisiä kenttiä. Kasvava solu tarkoittaa sitä, että solua klikatessa se laajenee ja esiin tulee toimintoja, joita kyseisessä solussa voi tehdä. Puhekupla puolestaan tuo muokkauselementit esille erilliseen puhekuplaan kun kursorin vie solun päälle. Suurien tietomäärien käsittelyyn kumpikaan niistä ei sovellu, sillä yksittäisten solujen valitseminen ja muokkaus on liian hidasta. Tiptop projektissa käytetään kasvavaa solua silloin, kun kentän arvoon vaikuttavia määreitä on vähän, 1 3 (ks. alla olevan kuvan vasen puoli). Silloin kun kenttään vaikuttavia määreitä on useita, käytetään puhekuplaa. Tämä siksi, että jos määreille aukeavia pudotusvalikoita ja tekstikenttiä on useita, solu venyy korkeussuunnassa liikaa jos käytetään kasvavaa solua. Kasvava solu (vas.) ja puhekupla (oik.) 37

38 7 Käyttöliittymäelementtien ohjeistus 7.1 Navigaatio Navigaatio on usein tärkein osa verkkosovellusta, joten sen toteutukseen on syytä panostaa ja sen rakenne tulee olla huolellisesti suunniteltu. Käyttäjä muodostaa navigaation avulla mentaalimallin päässään sivustosta, jonka avulla hän hahmottaa sisältöä ja toimintoja. Otsikoiden on oltava mahdollisimman kuvaavia ja lyhyitä. Esimerkkinavigaatio: Ei aktiivinen (vas.), fokustilassa oleva (kesk.) ja valittu (oik.) Navigaation painikkeiden tulee ilmaista fokustilansa hiiren osoittimen ollessa elementin päällä (väri), sekä elementtien tulisi ilmaista selkeästi kun ne ovat valittuina Tekstilinkit Tekstilinkit tulee erottaa selvästi muusta leipätekstistä. Linkeissä tulee olla eri väri avaamattomalle, fokustilassa olevalle ja vierailulle linkille. Linkkien kirjaisintyyppi ja värikoodit on esitelty luvuissa ja Murupolku Murupolkua käytetään selkeyttämään navigaatiota, mikäli siinä on yli kaksi tasoa. Murupolussa alemmat tasot toimivat linkkeinä, kun taas käyttäjän aktiivinen taso näytetään ainoastaan tekstinä. Esimerkkimurupolku, alemmat tasot toimivat linkkeinä, aktiivinen taso vain tekstiä Tiptop projektissa murupolkua käytetään AHOT hakemuksien yhteydessä. Kun käsittelijä avaa yksittäisen hakemuksen, aukeaa hakemus käyttöliittymän päälle, jolloin takaisin hakemusten listanäkymään pääsee murupolun alkuosasta. Murupolun alkuosa on linkki, joten se muotoillaan tekstilinkkimääritysten mukaisesti. Loppuosa toimii sivun otsikkona, joten koko murupolku on kokoa H1, mutta vain loppuosa on muotoiltu kuten H1. Tiptop muotoiltu murupolku. 38

39 7.1.3 Välilehdet Välilehdet ovat tapa jakaa tietoa erilaisten tietueiden alle, ryhmittää samaan aihealueeseen kuuluvaa tietoa yhteen osioon käyttöliittymässä. Välilehtien käyttö edellyttää sitä, että navigaatio niiden avulla on selkeää. Tätä auttaa esimerkiksi se, että valitun välilehden taustaväri liittyy selkeästi sen ilmaiseman sisällön taustaväriin (ks. kuva alla). Värin avulla assosioidaan sisältö otsikon alle, eli avattuna olevan välilehden taustaväri on sama tai lähes sama kuin sisällön taustaväri. Muut välilehdet ovat tällöin selkeästi eri värisiä, esimerkiksi vaaleampia ja voivat sulautua yhdeksi alueeksi, jäädä taustalle. Välilehdet toimivat parhaiten yhdessä rivissä, jos valintoja on enemmän, käytetään painikkeita välilehtien sijaan. Välilehdet Tiptopissa: valittu välilehti vasemmalla, seuraavat kaksi oikealle ovat ei aktiivisia, äärimmäisenä oikealla fokustilassa oleva välilehti Alaosioissa on mahdollista käyttää painikkeita navigoimiseen alla olevan esimerkkikuvan mukaisesti. Ohjaajan näkymä yksittäisen opiskelijan HOPSiin. Ohjaaja voi navigoida napeista HOPS, ROS ja AHOT sen mukaan mitä aihepiiriä hän haluaa tarkastella. Lisäksi oikeassa yläkulmassa ohjaaja voi myös vaihtaa tarkasteltavaa kyseisen oppijan tutkintoa. 39

40 7.2 Painikkeet ja niiden asemointi Painiketta käytetään sellaisissa tilanteissa, joissa järjestelmä tekee jotain järjestelmässä olevalle tiedolle esim. tallentaa, poistaa, kopioi tai tyhjentää. Painiketekstin tilalla voi olla myös kuvake. Linkkiä käytetään viemään käyttäjä toiseen kohtaan sovelluksessa tai mahdollisesti jollekin toiselle Internet sivustolle. Linkkiä voidaan käyttää esimerkiksi silloin, kun ollaan siirtymässä palvelusta toiseen tai palvelun toiminnosta toiseen. Kun halutaan käynnistää jokin dialogi esim. muistiinpanon lisääminen hopsiin tai velho, käytetään kontekstista riippuen joko linkkiä tai painiketta. Dialogin sisällä tapahtuvassa tiedonkäsittelyssä (tallentaminen, poistaminen jne.) käytetään aina painikkeita. Muissa tilanteissa voidaan käyttää joko painiketta tai linkkiä tapauksesta riippuen. Suuri määrä painikkeita yhdessä näkymässä tekee siitä sekavan. Tämän vuoksi yhdessä näkymässä ei tule käyttää yli viittä painiketta, mikäli toiminnalliset vaatimukset eivät tätä edellytä. Lomakkeiden asemointi tehdään aina tapauskohtaisesti, mutta kuitenkin seuraavia periaatteita noudattaen: Painikkeet sijoitetaan vasempaan reunaan Painikkeiden järjestys vasemmalta oikealle: Tallenna, Peruuta Painikkeiden asemointi Näin parannetaan käytettävyyttä niiden osalta, jotka käyttävät tab näppäintä lomakkeen navigoimisessa: Tallenna painike tulee ennen Peruuta painiketta kun taulukko on täytetty. Tyhjennä painike on yleensä tarpeeton ja jopa haitallinen, mutta jos se halutaan sijoittaa lomakkeeseen, tulee sen selkeästi olla erillään Tallenna painikkeesta. 40

41 Mikäli lomakkeessa edetään prosessimaisesti eteenpäin, kuten velhossa, tulee painikkeet sijoittaa niin, että vasemmalta oikealle ensin on Edellinen sitten mahdollisesti Keskeytä ja viimeisenä oikealla Seuraava. Keskeytä painike keskeyttää käsillä olevan prosessin, ja sen käyttöä on harkittava tapauskohtaisesti. Painikkeet prosessilomakkeessa Tiptop projektissa tarvittavat painikkeet Standardiin tuotetaan projektin edistyessä painikkeille suositeltavat nimet. Alla on lueteltu toistaiseksi tunnistetut tarvittavat nimet. Lista täydentyy projektin edetessä. Kirjaudu, Kirjaudu ulos, Tallenna, Tallenna ja julkaise oppijalle, Peruuta, Lisää suoritus, Poista, Poista suoritus, Poista hyväksilukumerkintä, Poista lisätieto, Poista palaute, Edellinen, Seuraava, Keskeytä, Vaihda, Ajoita opintoja, Hae, Valitse, Valittu, Poista valinta, Anna valitulle ryhmälle palautetta, Korosta pakolliset opinnot, Korosta valinnaisuudet, Ilmoittaudu. Tallenna alkuisten tai sisältöisten nappien, sekä Lähetä, Ilmoittaudu, OK, Hae ja Lisää tyyppisten painikkeiden ulkoasu: Pyöristetyt reunat, väri #F8DB030, Drop Shadow (Blend Mode Multiply, Opacity 55%, Angle 120, Distance 3, Spread 0, Size 4), Gradient Overlay (Blend Mode Screen, Opacity 30%). Fontti Arial, 12, väri #001A21. Muiden painikkeiden, kuten Lisää liite, Peruuta ja Piilota, ulkoasu: 41

42 Pyöristetyt reunat, väri #CCCEC8, Drop Shadow (Blend Mode Multiply, Opacity 55%, Angle 120, Distance 3, Spread 0, Size 4), Gradient Overlay (Blend Mode Screen, Opacity 30%). Fontti Arial, 12, väri #001A21. Painiketekstin tilalla voi olla myös kuvake. Kuvaketta käytetään esimerkiksi silloin, jos sama painike toistuu sivulla useita kertoja, esim. poista painike listan jokaisella rivillä. Mikäli painikkeessa käytetään kuvaketta, tulee kuvakkeella olla määriteltynä alt tekstiksi kuvaketta vastaava painiketeksti. Sekä tekstiä että kuvaketta ei käytetä samassa painikkeessa. Tiptop projektissa tuotetaan palveluita oppijoille ja ohjaajille. Suunnittelupuolella on osassa palveluita tarve tarjota tehokäyttäjälle nopeampia keinoja suorittaa asioita, jotka muuten vaatisivat monta toistoa. Tällainen on esimerkiksi arviointipalvelussa arvosanojen antaminen. Tällaisessa tilanteessa tarjotaan valintaruutu, jonka valitsemalla käyttäjä siirtyy automaattisesti Tallenna painikkeen painamisen jälkeen seuraavaan opiskelijaan. Tästä tulee tiedottaa käyttäjää selkeästi, esimerkiksi lyhyen tekstin sekä tiedoteikkunan avulla. Valintoihin liittyvät painikkeet: Merkinnän tai yhteydenoton kirjoittamisen valinta, opiskelijaryhmän valinta (ohjaajalla), HOPS/AHOT/ROS (ohjaajalla): Valittu/painettu: väri #E56924, Gradient Overlay (Blend Mode Screen, Opacity 30%), fontti Arial, 11, valkoinen, bold. Valitsematon/passiivinen: väri #FC9B34, Gradient Overlay (Blend Mode Screen, Opacity 30%), fontti Arial, 11, valkoinen Tiptop projektissa tarvittavat tagit Tiptop projektissa käytetään Viestit välilehdellä sekä HOPSin alla Avoimessa HOPSissa tageja. Tagit toimivat suodattimina viestimassalle. Käyttäjät pääsevät luomaan omia tagejaan esim. uuden merkinnän tai yhteydenoton yhteydessä. 42

43 Valittu/painettu: väri #00689C, fontti Arial, 9, valkoinen. Valitsematon/passiivinen: väri #008BC6, fontti Arial, 9, valkoinen. 7.3 Kuvakkeet Tiptop projektissa hyödynnetään kuvakekirjastoa, koska tämä on työajallisesti järkevää. Projektissa ei ole tarvetta luoda kokonaan uutta, omaa kirjastoa, vaan jo olemassa olevista löytyy projektin tarpeisiin sopivat kuvakkeet. Projektissa käytetään Font Awesomen kuvakekirjastoa ( Awesome/). Alla on lueteltu projektissa käytettävät kuvakkeet. Lista täydentyy projektin edistyessä. icon warning sign kuvaketta käytetään tilanteissa, joissa halutaan herättää käyttäjän huomio tai varoittaa käyttäjää. Kun kyseistä kuvaketta käytetään Hälytys tyyppisten viestien kuvakkeena, mustan värin korvaa kirkas punaoranssi: #FF4300. Punaoranssi versio löytyy myös listan alla olevan DropBox linkin takaa. icon exclamation sign kuvaketta käytetään tilanteissa, joissa halutaan herättää käyttäjän huomio, mutta kyse ei ole varoituksesta. icon info sign kuvaketta käytetään Etusivulla, Avoimessa HOPSissa ja Viestit välilehdellä kuvaamaan saapunutta ilmoitusta. icon question sign kuvaketta käytetään, kun jollekin elementille pitää lisätä ohjetekstiä (joka sijoitetaan pikkuikkunaan tai tooltippiin; aukeaa tästä kuvakkeesta). icon plus kuvaketta käytetään esimerkiksi HOPSissa kuvaamaan muistilappujen lisäämistä. icon search kuvaketta voidaan käyttää hakutoiminnoissa. icon calendar kuvaketta käytetään päivämäärän valinnannassa (ks. 7.6 Päivämäärän ja ajan valinta). icon caret down kuvaketta käytetään puumaisessa navigoinnissa näyttämään, että elementti on avattu. Käytetään HOPSin tutkintorakennepuussa, valkoisena. icon caret right kuvaketta käytetään puumaisessa navigoinnissa näyttämään, että 43

44 elementti on suljettu. Käytetään HOPSin tutkintorakennepuussa, valkoisena. icon chevron left kuvaketta käytetään painikkeessa, josta oikean puolen tiedot saa piilotettua sekä siirtymälinkkinä edelliseen näkymään (esim. edelliseen lukukauteen siirtyminen HOPS näkymässä). icon chevron right kuvaketta käytetään painikkeesta, josta saa avattua lisää tietoa oikealle puolelle käyttöliittymää sekä siirtymälinkkinä seuraavaan näkymään (esim. seuraavaan lukukauteen siirtyminen HOPS näkymässä). icon remove kuvaketta voidaan käyttää Poista painikkeessa painiketekstin sijasta, lisäksi kuvaketta käyteään pikkuikkunan sulkemisen merkkinä niiden oikeassa yläkulmassa. icon check kuvaketta käytetään näyttämään, että elementti on valittu (itse muokattu vihreäksi). icon check empty kuvaketta käytetään näyttämään, että elementti on valittavissa. icon edit kuvaketta voidaan käyttää painikkeessa, josta siirrytään muokkaustilaan. icon paper clip kuvaketta käytetään Lisää liite painikkeissa ennen tekstiä. icon file kuvaketta voidaan käyttää liitteen tiedostonaukaisulinkin yhteydessä mikäli tiedostotyypin kuvaketta ei ole saatavana. icon ok kuvaketta voidaan käyttää esimerkiksi suoritetun kurssin tai käsitellyn tehtävän yhteydessä tai opintojaksolle ilmoittautumisen yhteydessä. Suoritetun kurssin yhteydessä kuvake on vihreä, ilmoittautumista kuvattaessa keltainen. icon zoom in kuvaketta voidaan käyttää toiminnossa, jossa on mahdollista siirtyä tarkastelemaan tietoja lähempää esim. siirryttäessä hopsin koko tutkinnon tasolta lukuvuositasolle. icon zoom out kuvaketta voidaan käyttää toiminnossa, jossa on mahdollista siirtyä tarkastelemaan tietoja kauempaa, esim. siirryttäessä hopsin lukuvuositasolta koko tutkinnon tasolle. icon signin kuvaketta käytetään hopsissa ilmaisemaan, että kurssin ilmoittautumisaika on käynnissä. icon pencil kuvaketta voidaan käyttää Lisää merkintä linkin yhteydessä. icon book kuvaketta sinisenä (#167D97) käytetään hops käyttöliittymissä linkkinä 44

45 opinto oppaaseen. icon book kuvaketta oranssina (#F8A64D) käytetään hops käyttöliittymissä linkkinä opetusohjelmaan. icon eye open kuvaketta käytetään viestitoiminnossa kuvaamaan omaa jaettua merkintä. icon eye close kuvaketta käytetään viestitoiminnossa kuvaamaan omaa merkintää, joka ei näy muille. icon group kuvaketta käytetään viestitoiminnossa kuvaamaan ryhmän keskustelua icon envelope kuvaketta voidaan käyttää linkkinä yhteydenottoon tai Lisää yhteydenotto linkin yhteydessä. itse piirretty kirjekuorikuvake, jota voidaan käyttää, kun elementtiin liittyy lukematon viesti tai lukemattomia viestejä tai lukemattoman viestin otsikon yhteydessä. itse piirretty kirjekuorikuvake, jota voidaan käyttää, kun elementtiin liittyy vastaamaton viesti tai viestejä tai sellaisen viestin viestin otsikon yhteydessä, joka on luettu, mutta johon ei ole vastattu. itse piirretty kirjekuorikuvake, jota voidaan käyttää, kun elementtiin liittyvään viestiin tai viesteihin on vastattu tai sellaisen viestin otsikon yhteydessä, johon on vastattu. itse piirretty nuolikuvake, jota voidaan käyttää drag & drop toiminnon ohessa havainnollistamaan sitä, että elementti on siirrettävissä. Tätä käytetään esimerkiksi AHOTissa opintoelementtien raahaamisessa hakemukseen ja HOPSissa tutkinnon toteutusten näyttämiseen aikajanalla (oikealle osoittava nuoli), ja aikajanalta poistamiseen (vasemmalle osoittava nuoli, mutta vaaleampana). Lisäksi myös raahaaminen on HOPSissa mahdollista. Kyseinen nuoli muuttuu HOPSissa valkoiseksi silloin, kun opiskelija vie kursorin tutkinnon kehikon päälle. Itse piirretty kuvake, käytetään HOPSissa kuvaamaan tilannetta, jossa opiskelija ei ole päässyt tietyn opintojakson toteutukselle. Huom: Font Awesomessa on hyvin lähellä tätä oleva kuvake, icon minus sign. Sitä voi käyttää, kunhan muuttaa koodauksen kautta väriksi #E65656 ja laittaa mustan reunaviivan. HUOM: Ikonit/kuvakkeet ovat ladattavissa DropBoxista: (.png muodossa) 45

46 7.4 Leijukkeet Tiptop projektissa oppijan HOPSissa käytetään leijukkeita lisätietojen esittämiseen. Alla esimerkit käytettävistä leijukkeista. Opintojaksotason leijuke Opintokokonaisuustason leijuke, tässä valinnaisten opintojen haku 7.5 Automaattitäydentävä kenttä Käyttäjän kirjoittaessa tekstikenttään automaattinen toiminto ehdottaa mitä sanaa käyttäjä mahdollisesti tarkoittaa. Sanaehdotukset on oltava kontekstiin sopivia. Automaattitäydentävää kenttää käytetään esimerkiksi hopsin vapaavalinnaisten opintojen haussa. 7.6 Drag & Drop Drag & Drop toiminnot ovat sellaisia, joissa käyttäjä voi hiiren kursorilla raahata 46

47 käyttöliittymässä erilaisia elementtejä tai objekteja paikasta toiseen. Tyypillisesti se, mitä voidaan raahata ja mihin, on tarkoin rajattua. Tiptop projektissa käyttöliittymissä voidaan käyttää drag and drop toimintoja. Vapaavalintaisia opintoja pystyy tietyissä raameissa ajoittamaan aikajanalle, samoin kuin niihin liittyviä osasuorituksia, esimerkiksi tenttejä. Opintojakson ajoittaminen voidaan toteutetaan raahaamalla opintojakso (tai sen osasuoritus) Ajoittamattomat laatikosta aikajanalle tai opintojakson leijukkeelta. Muuten opintojaksoihin liittyviä toimintoja suoritetaan opintojakson leijukkeelta. AHOT toiminnossa opiskelija pystyy AHOT hakemusta tehdessään raahaamaan osaamispankin opintoja ja tutkinto ohjelman opintoja hakemukseensa. Opintojen lisääminen onnistuu vaihtoehtoisesti myös nuolikuvaketta klikkaamalla. AHOT, opiskelijan hakemusnäkymä 7.7 Päivämäärän ja ajan valinta Tiptop projektissa käytetään pikkukalenteria päivämäärän valinnan selkeyttämiseen. Pikkukalenteri sijoitetaan päivämääräkentän oikealle puolelle. Kalenterinäkymä aukeaa käyttäjän klikatessa pikkukalenteria. Tämän jälkeen käyttäjä voi valita kalenterinäkymästä haluamansa päivämäärän hiiren klikkauksella. Kalenterikuvakkeena käytetään Font Awesome ikonikirjastosta löytyvää icon calendar kuvaketta. 7.8 Käyttöliittymän osien koon muuttamiseen liittyvät elementit Käyttöliittymässä voi olla elementtejä, joiden kokoa käyttäjien annetaan muuttaa. Tällaisia 47

48 ovat esimerkiksi ns. leijuvat korit. Lisäksi joidenkin alueiden ympärille voidaan laittaa kehys, joka indikoi käyttäjälle kyseisen alueen skaalausmahdollisuutta. Arviointipalvelussa käyttäjä voi myös piilottaa oikean puolen käyttöliittymästä kokonaan. 7.9 Henkilön ja opintojakson valinta Henkilön valinta voi Tiptop toiminnoissa tapahtua kahdella erilaisella tavalla. Arviointipalvelussa henkilö haetaan edistyneellä hakutoiminnolla ja hakutuloksista klikkaamalla saa kyseisen henkilön mukaan arvioitavien listaan. Toisaalta henkilön valinta voi tapahtua myös siten, että henkilöitä valittaessa, tulee henkilön nimen viereen painike Valitse. Kun käyttäjä on painanut tätä painiketta, siihen tulee teksti Valittu. Kun käyttäjä vie kursorin Valittu painikkeen päälle, tarjotaan vaihtoehto Poista valinta. Oppija valitsee Tiptop toiminnoissa opintojaksoja HOPSiaan muokatessaan ja siellä nimenomaan vapaavalintaisia ja valinnaisia opintoja lisätessään. Tällöin valinta tehdään opintokokonaisuuden leijukkeelta, opintojakson nimen vieressä olevasta valintaruudusta. Opintojakson poistaminen opintosuunnitelmasta onnistuu poistamalla valinta valintaruudusta Radiopainikkeet Radiopainikkeita käytetään kun valinnat ovat toisensa poissulkevia. Radiopainikkeessa voi olla vain yksi valinta kerrallaan; aiemmin tehty valinta poistuu käytöstä, kun käyttäjä tekee uuden valinnan. Tiptopissa käytetään radiopainikkeita tarpeen mukaan ja ne sijoitellaan allekkain. Radiopainikkeet Tiptopissa Käyttöliittymässä tulee ilmaista myös sanallisesti minkälaisesta valinnasta on kyse, kehottaa siis esimerkiksi Valitse vain yksi. Samassa ryhmässä on oltava vähintään kaksi valintamahdollisuutta ja enintään viisi 48

49 valintamahdollisuutta. Jos valintamahdollisuuksia on enemmän, käytetään mieluummin pudotusvalikkoa. Radiopainikkeen valinta ei koskaan aloita tehtävää (radiopainikkeen klikkaus ei aiheuta muutoksia, vaan käyttäjän pitää hyväksyä valinta vielä erikseen), koska se poikkeaisi yleisestä käytännöstä ja hämmentäisi käyttäjiä. Radiopainikkeen valinta tyypillisesti pitää vielä varmistaa painikkeella Valintaruutu Valintaruutuja käytetään näyttämään ja vaihtamaan asetuksia päälle ja pois päältä. Valintaruutu, kuten radiopainike, ei koskaan aloita tehtävää. Syy on sama: koska se poikkeaisi yleisestä käytännöstä ja hämmentäisi käyttäjiä. Valintaruutuja käytetään tyypillisesti useamman valinnan tekemiseen ja sen jälkeen hyväksytään valinnat painikkeella. Valintaruudussa voi olla useita vaihtoehtoja yhtä aikaa valittuna. Valintaruudun teksti tulee olla huolella valittu, jotta käyttäjä ymmärtää mitä tarkoitetaan kun ruutu on valittu ja kun se ei ole valittu. Jos otsikointi ei ole yksiselitteinen, vaihtoehtona on kahden radiopainikkeen käyttö, jotta molemmille elementeille voi kirjoittaa (radiopainikkeelle) oman selitystekstin. Opintokokonaisuuksien leijukkeilla opiskelija voi mm. valita opintoja HOPSiinsa. Tällöin hän tekee valinnat valintaruutujen avulla, kyseisen opintojakson fontin muuttuessa harmaaksi (#808080) kun valinta tehdään. Valintaruudut Tiptopissa 7.12 Pudotusvalikko Pudotusvalikoita käytetään tilanteissa, joissa valintamahdollisuuksia on tarjolla paljon, mutta ruututilaa vähän. Valikon valintojen tulee olla kontekstillisesti samanarvoisia, kuten kaupunki, automerkki tai nimi. Tilanteen mukaan valikon ensimmäinen valinta voi olla joko listan ensimmäinen valittava vaihtoehto, eniten käytetty valinta tai teksti valitse keskitettynä ja ajatusviivoilla ympäröityinä: ( Valitse ). Tiptop projektissa käytetään oletuksena eniten käytettyä valintaa. Pudotusvalikon valinta voi aloittaa toiminnon. Toiminto voi käynnistyä joko suoraan 49

50 valitsemalla valikosta sopiva kohta tai valitsemalla kohta, ja painamalla valikon vieressä olevaa painiketta. Kun toiminto käynnistyy suoraan valinnasta, ja valinta on esimerkiksi Tietojenkäsittelytieteen kandi, muuttuvat esimerkiksi lomakkeen kentät ja sisältö tämän valinnan mukaiseksi. Näistä kahdesta toiminnon aloittavasta vaihtoehdosta ensimmäinen on yleensä suositeltavampi, ja tätä käytetään myös Tiptop projektissa. Pudotusvalikko Valikon vaihtoehdot voidaan ryhmitellä seuraavin tavoin: Aakkosjärjestys Numerojärjestys (luvut kirjoitetaan aina numeroilla) Perustelluissa tapauksissa vaihtoehdot voivat olla aihealueittain järjesteltynä, esim. kolmen ryhmissä aihealueen mukaan. Jokin muu looginen järjestys on myös mahdollinen, mutta vaihtoehtojen ei tule ikinä olla sattumanvaraisesti järjesteltyjä. Mikäli listassa on sekä kirjaimia että numeroita, listataan ensin numerot numerojärjestyksessä, ja sen jälkeen kirjaimet aakkosjärjestyksessä Listavalikko Listavalikkoja käytetään tilanteissa, joissa valintamahdollisuuksia on tarjolla paljon, ja on tehtävä useita samanaikaisia valintoja. Valikon valintojen on oltava kontekstillisesti samanarvoisia, kuten "Valitse automerkki". Listavalikko voi muodostua: Yhdestä laatikosta, jossa on useita vaihtoehtoja Kahdesta laatikosta, jossa vasemmanpuoleisesta siirretään valittavat oikeanpuoleiseen laatikkoon 50

51 Yhden laatikon listavalikko (Huom: ulkoasu ei Tiptopin mukainen) Kahden laatikon listavalikko (Huom: ulkoasu ei Tiptopin mukainen) Listavalikon valinta ei voi aloittaa tehtävää, koska oletuksena valitaan useampi vaihtoehto listalta eikä tällöin ole välttämättä selkeää jatkumoa toiminnalle. Esimerkiksi jos käyttäjä valitsee useampia koulutusohjelmia tutkintorakenteeseensa, ei sovellus voi jatkaa toimintaa. Sovellus ei myöskään voi jatkaa toimintaa pelkän ensimmäisen valitun koulutusohjelman perusteella. Lisäksi tämä poikkeaisi yleisestä käytännöstä ja hämmentäisi käyttäjiä. Tiptop projektissa käytetään kahden laatikon listavalikkoa. Tämä siksi, että listat ovat todennäköisesti niin pitkiä, että käyttäjän on hankala yhtä aikaa skrollata ja poimia listalta kohteita jos käytetään yhden laatikon listavalikkoa. Listavalikossa toimivat seuraavat pikanäppäinkomennot: Ctrl+klikkaus, jonka avulla voidaan poimia yksi tai useampia listavalikon valintoja Shift+klikkaus/maalaus, jonka avulla voidaan valita kaikki kahden valitun otsikon välissä olevat valinnat Mikäli valittavien pituus on huomattava, tulee käyttää vierityspalkkia listavalikon oikeassa reunassa, sillä näkyvissä ei tule olla yli yli 10 valittavaa vaihtoehtoa. Valikon vaihtoehdot voidaan ryhmitellä seuraavin tavoin: Aakkosjärjestys Numerojärjestys (luvut kirjoitetaan aina numeroilla) 51

52 Vaihtoehdot voivat myös olla aihealueittain järjesteltynä tai muussa loogisessa järjestyksessä, mutta ei ikinä sattumanvaraisesti. Mikäli listassa on sekä kirjaimia että numeroita, listataan ensin numerot numerojärjestyksessä, ja sen jälkeen kirjaimet aakkosjärjestyksessä. Lisäksi tarpeen vaatiessa voidaan käyttää hierarkisia listavalikoita. Tällöin ensimmäisestä listasta valitaan ylätaso, jonka valinta tuottaa seuraavaan listavalikkoon valittuun aiheeseen liittyviä alavalintoja. Tästä uudesta listavalikosta tehty valinta puolestaan tuottaa taas seuraavaan listavalikkoon erilaisia valintavaihtoehtoja, jotka ovat alisteisia 7.14 Varoitusikkuna Varoitusikkuna on käyttöliittymäelementti, jonka tehtävä on antaa käyttäjälle tietoa sovelluksen tilasta tai kysyä käyttäjältä miten tehtävässä edetään. Varoitusikkuna ilmestyy yleensä käyttäjän pyytämättä ja keskeyttää tämän toiminnan. Varoitusikkunaa ei tule käyttää ellei se ole välttämätöntä. Välttämätön tilanne on esimerkiksi tiedon menettämisen mahdollisuus. Varoitusikkunoiden tausta on valkoinen, jossa on läpinäkyvyysasteena 70%. Otsikko on tasoa H2, pienempi teksti leipätekstiä. Varoitusikkuna Tiptopissa Varoitusikkuna ilmestyy sovelluksen päälle, eikä sovelluksen muita ikkunoita voi käyttää ennen kuin varoitusikkuna on suljettu. Varoitusikkunan kokoa ei voi muuttaa. Varoitusikkunan teksti on jaettu kahteen osaan: selitysteksti ja lisätietoteksti. Selitysteksti vastaa kysymykseen: Mikä tilanne tai ongelma on kyseessä? Lisätietoteksti vastaa kysymyksiin: Mistä tilanne tai ongelma johtuu? Miten tilanteen tai ongelman voi 52

53 ratkaista? Lisätietoteksti voi olla useamman lauseen pituinen. Selitysteksti selittää yhdellä lauseella ongelman tai tilanteen luonteen. Edistynyt sovelluksen käyttäjä lukee ainoastaan selitystekstin (ei lisätietotekstiä), joten selitysteksti pitää muotoilla niin, että sen perusteella käyttäjä pystyy valitsemaan miten hän toimii valintatilanteessa. Hyvän varoitusikkunan teksti koostuu seuraavista asioita: Ongelma tai tilanne selostetaan käyttäjälle tutulla kielellä ja käyttämällä selkokielisiä termejä. Käyttäjälle kerrotaan mistä ongelma johtuu. Tekstissä ehdotetaan tapoja ratkaista ongelma. Varoitusikkunan painikkeet riippuvat siitä, minkä tyyppisestä varoitusikkunasta on kysymys. Esimerkiksi Tiedoteikkuna sisältää vain yhden painikkeen ("OK") ja Tallennuksen varmennus useampia painikkeita Tiedote Tiedoteikkuna on varoitusikkunantyyppi, jota käytetään kun käyttäjän on saatava tietää ikkunassa annettu informaatio. Tiedotetta voidaan käyttää, kun käyttäjää on muistutettava tärkeästä asiasta sovelluksessa tai kun käyttäjä itse pyytää informaatiota. Tiedoteikkuna Tiptopissa Tiedoteikkunoita on hyvä käyttää aina vastineena esimerkiksi sille, että käyttäjä on onnistuneesti tallentanut jotakin. Tällöin tiedote Tallennus onnistui parantaa tuotteen käyttömukavuutta. Tiedoteikkunoita ei kuitenkaan ole syytä käyttää joka ikiseen asiaan, koska liian suuri määrä häiritsee käyttäjää ja lisäksi hän saattaa herpaantua niin, että häneltä jää huomaamatta jokin oleellisempi tiedote. Tiedoteikkuna ilmestyy esiin käyttöliittymän oikeasta alakulmasta, on esillä tiedotteen sisällön pituudesta 3 10 sekuntia ja menee pois itsestään, jos käyttäjä ei sulje sitä itse (ks. kuva yllä). Tiedotetta käytetään Tiptop projektissa esimerkiksi AHOTissa. Opiskelijan lähettäessä 53

54 AHOT hakemuksensa käsiteltäväksi tulee opiskelijalle tiedote Hakemuksen lähettäminen onnistui. Samalla kun tiedoteikkuna on näkyvissä, siirtyy näkymä kaikki hakemukset listaavalle sivulle. Tiedoteikkunoita käytetään Tiptop projektissa myös Avoimen HOPSin viestinnässä ja Viestit välilehdellä. Tällöin alla olevan kuvan kaltainen tiedoteikkuna kertoo uusista saapuneista viesteistä. Viestin tiedoteikkuna Tiptopissa Virheilmoitus Virheilmoitusta käytetään kun järjestelmä ei pysty suorittamaan käyttäjän antamaa tehtävää. Sitä ei kuitenkaan tule käyttää jos ongelma johtuu sovelluksesta ja virheellä ei ole merkittävää vaikutusta käyttäjän toimintaan. Virheilmoitus Tiptopissa Varmennus Varmennusikkunaa käytetään kun käyttäjän toiminta on vaarassa tuhota olemassa olevaa tietoa tai hänen tekemiään muutoksia. Sitä voidaan myös käyttää, jos toiminto aiheuttaa turvallisuusriskin, tai kun toiminnasta elpyminen kestää yli 30 sekuntia tilanteessa, jossa varmennusikkuna on ilmestynyt käyttäjälle virhevalinnan seurauksena. Varmennusikkunassa on kaksi tai useampaa toimintoa. Vasemmalle sijoitetaan painike, jolla hyväksytään varmennuksen toiminta esimerkiksi "Hyväksy ehdotus". Hyväksy painikkeen jälkeen sijoitetaan vaihtoehtoiset toimintapainikkeet ja oikeaan laitaan "Peruuta" painike. 54

55 Varmennus Tiptopissa Mikäli toimintoja on enemmän kuin kolme, tai niiden selitekuvaukset ovat erittäin pitkiä, voidaan vaihtoehdot ilmaista myös radiopainikkeella. Käyttäessä radiopainiketta listataan vaihtoehdot allekkain. Painikkeina ovat tällöin OK ja Peruuta tässä järjestyksessä Sisäänkirjautuminen Sisäänkirjautumisikkunaa käytetään silloin, kun sovellus vaatii sisäänkirjautumista. Se sisältää selitystekstin, lisätietotekstin sekä jokaiselle kentälle omat tunnistetekstit. Ikkunassa on kaksi tai useampaa toimintoa. Vasemmalle sijoitetaan painike, jolla hyväksytään varmennuksen syöte esimerkiksi "Kirjaudu". Hyväksy painikkeen jälkeen sijoitetaan vaihtoehtoiset toimintapainikkeet ja oikeaan laitaan "Peruuta" painike. Ikkunan tausta on valkoinen, jossa on läpinäkyvyysasteena 70%. Otsikko on tasoa H1, harmaat tekstit hakukenttien markkeriväriä (koko 12), vaalea sininen on linkki (koko 10) ja tummempi sininen leipätekstiä (koko 10). Sisäänkirjautuminen Tiptopissa 55

56 7.16 Sivutus Jos listassa tai taulukossa esiintyy paljon tietoja, ne tulee sivuttaa tiedon selaamisen helpottamiseksi. Tehdessä sivutusta on syytä ottaa huomioon seuraavat asiat: Painettavan alueen (sivulinkin) koko tulee olla riittävä Alleviivauksen käyttö jokaisessa painikkeessa on turhaa, sillä käyttäjä tietää, että sivunumero on vuorovaikutteinen alue. Alleviivaus on kuitenkin hyvä olla valitun sivun numeron alla. Käyttäjälle on ilmaistava selkeästi millä sivulla hän on. toiminnot. Sivutuksessa on hyvä olla "Edellinen sivu" ja "Seuraava sivu" toiminnot, jos sivujaon enemmän kuin 10. Sivutus 7.17 Edistymisen ilmaisimet Edistymispalkki on tyypillinen visuaalinen ilmaisin, joka ilmaisee että sovellus suorittaa tehtävää. Sitä tai vastaavaa ilmaisinta tulee käyttää aina kun sovelluksen tehtävän suorittaminen vie 3 sekuntia tai enemmän. Käyttäjän toiminnot estetään tarpeen vaatiessa siksi aikaa, kun edistymispalkki on näkyvissä. Näin toimitaan, kun käyttäjä voisi toiminnoillaan sotkea sovelluksen suorittamaa tehtävää. Jos käynnissä oleva tehtävä on mahdollista keskeyttää, sijoitetaan edistymisikkunaan "Peruuta" painike. Painikkeen painaminen peruuttaa tehtävän kokonaisuudessaan. Jos tehtävän keskeyttäminen saattaa tuoda mukanaan epätoivottuja seurauksia, painikkeen tekstinä on "Keskeytä". Painikkeiden sijainnit on esitetty osiossa 7.2. Automaattisia, selaimen generoimia edistymispalkkeja ovat tyypillisesti sellaiset, jotka tulevat esiin kun käyttäjä esimerkiksi lataa jotain tiedostoa sovelluksesta itselleen. Sovellukselle tarvitaan omia edistymispalkkeja lähinnä ilmaisemaan jonkin näkymän tai uuden osion latausta. Sivut on mahdollista suunnitella siten, että sivujen osat aukeavat vähittäin, jolloin erillistä odota ikkunaa ei tarvitse käyttää. Toteutuksessa tulee tällöin huomioida mahdollinen tarve estää aktiivisten elementtien toiminta ennen kuin sivu tai toiminto on kokonaan 56

57 latautunut. Tiptop projektissa käytetään pääsääntöisesti tätä toimintatapaa. Mikäli osittain lataaminen ei ole mahdollista, projektissa käytetään yksinkertaisia edistymisikkunoita. Ikkunassa on teksti Odota, ole hyvä sekä kevyt animaatio. Yksinkertainen editymisikkuna Tiimalasi Tiimalasia käytetään kun tehtävän pituutta ei voi määritellä, mutta se on oletettavasti alle 5 sekuntia tai kun tilaa ilmaisimen esittämiselle on vähän. Tiimalasi korvaa kursorin silloin, kun käyttäjä on klikannut jotain kohdetta, jonka lataaminen vie aikaa enemmän kuin 0,2 sekuntia. Tiimalasi tai muu vastaava ikoni on tyypillisesti selaimesta riippuvainen. Tiptop projektissa ei luoda omia ikoneita, vaan annetaan selainten muuttaa kursori sen mukaan, mitä niiden asetuksissa on määritelty Vierityspalkit Sisällön ollessa liian pitkää tai leveää ruudulle käytetään vierityspalkkia ruudun reunalla. Pitkittäisten (vertikaalisten) vierityspalkkien käyttöä ei tule pelätä sovelluksessa: nykypäivänä sisällön vieritys etenkin hiiren rullalla on vaivatonta. Kuitenkin sovelluksen sisällön juuri ylittäessä ruudun rajat on syytä miettiä, voiko sisällön saada tiiviimmin mahdutettua yhteen ruutuun. Sivuttaissuuntaista (horisontaalista) vierityspalkkia ei tule käyttää, mikäli se on mahdollista. Vierityspalkin ulkoasu tulee olla yksinkertainen ja noudattaa seuraavia periaatteita. Vierityspalkin molemmissa päissä tulee olla nuolet, joita käyttäjä voi painaa Palkkiosan tulee muuttua koossa sisällön mukaan, jotta käyttäjä saa käsityksen sisällön todellisesta mitasta. Palkin tulee erottua taustaväristä riittävän hyvin. Käyttäjien tulee voida ohjata sivun vieritystä Painamalla aluetta vierityspalkissa Painamalla nuolia Raahaamalla palkkiosaa Käyttämällä hiiren rullaa (ylös ja alas) 57

58 Vierityspalkki Tiptopissa 7.19 Velhot Velho on sarja toisiaan seuraavia ruutuja tai dialogeja, jotka auttavat käyttäjää suoriutumaan tehtävästä. Jokaisessa vaiheessa käyttäjää pyydetään antamaan tietoja tai täyttämään kenttiä, jonka jälkeen hän voi siirtyä seuraavaan vaiheeseen velhossa. Käyttäjä voi myös usein navigoida taaksepäin velhossa "edellinen" painikkeella. Velhon viimeisessä vaiheessa käyttäjälle näytetään "Valmis" tai vastaava painike, joka kertoo käyttäjälle velhon päättymisestä. Velho Velhoa tulee käyttää seuraavissa tilanteissa: Käyttäjän täytyy suoriutua monivaiheisesta tehtävästä 58

59 Tehtävä suorittaminen vaatii tiettyä vaiheittaista järjestystä Asioita joita tulee huomioida velhossa: Jokaisessa vaiheessa tulee käyttäjälle näyttää ohjeteksti, joka kertoo miten hän voi siirtyä velhossa eteenpäin. Ohjetekstin tulee olla selkokielinen ja ei liian pitkä. Käyttäjälle tulee näkyä velhon jokaisessa ruudussa hänen vaiheensa suhteessa kokonaispituuteen. Esimerkiksi "3/5" tai jokainen vaihe tekstinä. Pakolliset kentät tulee ilmaista esimerkiksi tähti merkillä tai poistamalla "Seuraava" painikkeen käytöstä kunnes pakolliset kentät ovat täytetty. Velhosta ei voi poistua kesken muulla tavalla kuin "Keskeytä" painikkeella. Painikkeen tulee olla näkyvillä koko prosessin ajan. Velhon viimeisessä vaihe tulee olla "Valmis" painike, joka kertoo käyttäjälle velhon päätöksestä. Velhon pituus tulee olla noin kolmesta viiteen ruutuun. Liian pitkä velho turhauttaa käyttäjää. "Keskeytä" painikkeen tulee informoida käyttäjää keskeytyksen seuraamuksista. Velhon painikkeet tulee sijoittaa seuraavassa järjestyksessä: Takaisin, Keskeytä, Seuraava 7.20 Tulostus Tietokoneen näytöllä pätevät eri säännöt luettavuudessa kuin paperilta luettaessa. Palveluissa on hyvä huomioida tyylitiedostoissa eri asetukset tekstille käyttäjän tulostaessa sivuja. Tiptop projektissa ei ole tarpeen tarjota varsinaista tulostusversiota jokaisesta eri sovelluksen sivusta. Erilliset tulostusversiot tarjotaan tapauskohtaisesti ja niistä kerrotaan käyttäjälle selkeästi esimerkiksi tulostimen ikonilla ja tarvittaessa selitetekstillä. Tulostusversiossa turhat kuvat ja navigaatioelementit on syytä karsia pois ja kirjasintyyppi tulee valita tukemaan parempaa luettavuutta paperilta. Vaikka kaikista sivuista ei tarjotakaan erillistä tulostusversiota, on tyylitiedostoon hyvä kirjata esimerkiksi navigaatioelementtien not printed tagi (tai vastaava) siltä varalta, että joku käyttäjistä haluaa tulostaa muun sivun kuin sellaisen, josta on tarjottu tulostusversio. Kirjasintyypit voidaan jakaa kahteen ryhmään niiden pääteviivallisuuden mukaan. Pääteviivallisia kirjasintyyppejä kutsutaan antiikva tai serif tyyppisiksi, pääteviivattomia groteski tai sans serif tyyppisiksi. Pääteviivattomat kirjasintyypit ovat helpompia lukea tietokoneen näytöllä kuin pääteviivalliset, mutta paperilla päinvastoin. 59

60 Tulostusversiossa tulee huomioida seuraavia asioita: Taustakuvaa eikä turhia kuvia tulosteta tekstin mukana. Kirjasintyyppi tulee muuttaa antiikva eli serif tyyppiseksi. Kirjasinkoko muutetaan 12 pt kokoon tai suuremmaksi. Tekstin linkit merkitään alleviivauksella. Navigaatiota ja mainoksia ei tulosteta. Animaatiot, java ja flash elementit poistetaan. Tulostusversioon liitetään tulostuksen URL osoite. Mahdollinen copyright tieto liitetään mukaan Haku ja hakutulosten esitys Hakutoiminto löytyy lähes jokaisesta sovelluksesta. Se on yksinkertaisemmillaan hakukenttä ja "Hae" painike. Hakutulosten esittelysivulla tulee esittää seuraavat asiat aina kun ne hakukohteesta riippuen on mahdollista esittää: Hakulaatikko, jossa näkyy myös käyttäjän tekemä haku Mahdollisuus tarkennettuun hakuun Hakutulosten kokonaismäärä Sivutus, mikäli tuloksia on enemmän Hakutulosten otsikot, jotka toimivat linkkeinä Ingressi hakutuloksesta, jossa hakusanat ovat korostettuna värillä, kursiivilla tai lihavoinnilla Hakutulosten osoitteet Hakutuloksissa voi myös sovelluksen luonteesta ja käyttötarkoituksesta riippuen olla eri tietoja näkyvillä hakutulosten yhteydessä, esimerkiksi lisäyspäivä, artikkelin kirjoittaja tai asiakirjan tyyppi. Hakutulosten määrä sivulla vaihtelee ingressin pituuden myötä sovelluksien välillä. Suositeltava määrä hakutuloksia sivua kohti on Tiptop projektissa hakutoimintoa tarvitaan esimerkiksi valinnaisten opintojen haussa. Tällöin tuloslistalla näkyvät alla olevan kuvan mukaiset tiedot. Opintojaksokoodi (ensimmäinen vasemmalla) toimii linkkinä. 60

61 Hakutulosten esittäminen 7.22 Liitteiden lisääminen ja näyttäminen Tiptop projektin käyttöliittymissä kohdissa joissa liitteitä pystyy lisäämään on Lisää liite painike, jossa on tekstin lisäksi icon paper clip kuvake. Painikkeen tarkat ulkoasumääritykset löytyvät luvusta Jos esimerkiksi AHOT hakemukseen on liitetty dokumentteja, liitteen avauslinkin yhteydessä on tiedostotyypin kuvake. Mikäli tiedostotyypin kuvaketta ei ole saatavilla, käytetään icon file kuvaketta. Liitteiden näyttäminen käyttöliittymässä sekä liitteiden lisäyspainike 61