« PedaPro-projektin etusivu
Logo

Prototypointiraportti

Tämä raportti pitää sisällään PedaPro-projektiryhmän ehdottamat prototyypit Peda.net-kouluverkon käyttökokemuksen parantamiseksi. Dokumentti kehitysehdotuksista löytyy Peda.netistä. Prototyypeillä tarkoitetaan sekä toiminnallisuuksia sisältäviä HTML-prototyyppejä että kehitysehdotukset sisältäviä kuvia.

Muutosloki

19.4.2017 Prototypointiraportin runko valmis
20.4.2017 Lisätty prototyyppejä
24.4.2017 Lisätty prototyyppejä
26.4.2017
versio 0.1
  • Parannuksia kuvakarusellin toiminnallisuuteen
  • Lisätty prototyyppejä, joita ei ole erikseen mainittu kehitysraportissa kohtaan "Muut sisäisen testauksen perusteella tehdyt prototyypit"
2.5.2017
  • Lisätty muutosloki
  • Lisätty kuvaustekstejä
3.5.2017
  • Lisätty kuvaustekstejä ja prototyyppien kuvia
  • Virhekorjauksia
4.5.2017
versio 0.2
  • Lisätty loput prototyyppien kuvat
  • Muutettu toiminnalliset prototyypit aukeamaan samassa välilehdessä
  • Optimoitu raporttisivua ja prototyyppien kuvia
11.5.2017
versio 0.3
  • Muokattu julkisuusasetukset-, elementtien uudelleenjärjestely- ja kalenterin viikkonumerot -prototyyppejä
  • Lisätty versionumerointi muutoslokiin
16.5.2017
versio 1.0
  • Prototypointiraportin versio 1.0

Sisältö

Kehitysehdotusdokumenttiin liittyvät prototyypit

Alla listatut prototyypit on tehty kehitysehdotusdokumentin perusteella. Kehitysehdotukset on luotu Peda.net-testauksen sekä kyselyiden ja haastatteluiden perusteella.

Työvälineiden ohjeistustekstit

Prototyypissä on kuvattu tapa, jolla työvälineiden ohjeistus saadaan selkeämmäksi ja tasapuoliseksi kaikkien työvälineiden kohdalla. Lisäksi jokaiselle työvälineelle, mistä lyhyt kuvaus puuttuu, on kirjoitettu sellainen.

Avaa prototyypin kuvat »

Teksti-työväline

HTML-prototyyppiin on toteutettu mahdollisuus sisentää ja loitontaa tekstiä käyttämällä tabulaattoria. Lisäksi TinyMCE:ssä on otettu käyttöön fontin koon ja värin muokkaamisen sekä mahdollisuus Iframe-videoiden esikatselemiseen liittämällä ne suoraan tekstieditoriin.

Linkki prototyyppiin »

Lomake-työväline

Ehdotukseen on lisätty malli lomake-työvälineen lomakekenttien ohjeistuksesta, joka näytetään vietäessä hiiri lomakekentän vieressä sijaitsevan kysymysmerkkikuvakkeen päälle. Kosketusnäytöllä vastaava onnistuu painamalla kysymysmerkkikuvaketta. Ehdotetussa mallissa on käytetty HTML5:tä,CSS-muotoiluja ja Javascriptiä.

Linkki prototyyppiin »

Sisäänkirjautuminen

Prototyypissä on pyritty selkeyttämään kirjautumissivua. Lisäksi kirjautumislomakkeeseen on lisätty paranneltu toiminnallisuus kirjautumiseen pelkästään näppäimistöä käyttämällä. Ehdotukseen on lisätty myös Javascript-toiminnallisuus, joka aktivoi submit-painikkeen vasta, kun molemmissa kirjautumiskentissä (käyttäjätunnus, salasana) on tekstiä. Tämän jälkeen Enter-näppäimellä lähetetään lomake. Ehdotuksen toiminnallisuuteen on otettu mallia tunnetuista verkkopalveluista, esimerkkeinä Google ja Facebook.

Linkki prototyyppiin »

Uudelleenohjaus kirjautumisen jälkeen

Prototyypissä on lisätty virheviestin yhteyteen kehotus sisäänkirjautumisesta ja sen alapuolelle kirjautumiskenttä.

Avaa prototyypin kuva »

Hakutoiminnallisuus

Prototyypeissä etusivun hakutoiminnallisuutta ehdotetaan sijoitettavaksi joko Peda.netin logon alle tai yläpalkkiin. Alasivuilla hieman pienennetty hakukenttä olisi sijoitettuna yläpalkkiin. Hakukenttä tulisi uudessa ehdotuksessa näkyviin kokonaan ja hakua pystyisi rajaamaan eri perustein.

Avaa prototyyppien kuvat »

Ulkoasun muokkaaminen

OmaTilan teeman muokkausvaihtoehtoihin on lisätty prototyypissä mahdollisuus esikatsella väriteeman vaihtamista reaaliajassa ilman välitallennusta sekä valintaruutu Peda.netin teeman oletusvärien palauttamiseksi. Muut prototyypissä näkyvät toiminnallisuudet (yläpalkin tyylin ja otsikon taustakuvan vaihtaminen) eivät toimi.

Linkki prototyyppiin »

Julkisuusasetukset

Prototyypissä on kerrottu, mitä uusi julkisuusasetusvalikko voisi pitää sisällään. Prototyypissä ehdotetaan selkeämpiä termejä ja pientä selittävää tekstiä asetuksen kohdalle, jotta käyttäjä tietää, mitä mikäkin kohta tarkemmin tekee.

Avaa prototyypin kuva »

Muut sisäisen testauksen perusteella tehdyt prototyypit

Alla listatut prototyypit on tehty projektin aikana, mutta ne eivät kuulu kehitysehdotusraportissa nostettuihin ehdotuksiin käyttökokemuksen parantamisesta.

Elementtien uudelleenjärjestely

Prototyypissä Peda.net-alasivujen elementtien uudelleenjärjestely on toteutettu käyttäen GitHub-käyttäjän sunpietro kehittämää dragster.js-kirjastoa. Elementtien siirteleminen toimii raahaustilan ollessa aktiivisena joko hiirellä raahaamalla tai kosketusnäytöillä kosketuksen avulla niiden elementtien kohdalla, jotka kuuluvat muokattaviin alueisiin.

Linkki prototyyppiin »

Kuvakoon muuttaminen

Prototyypissä on lisätty mahdollisuuksia kuvan koon muokkaukseen. Kuvan kokoa valittaessa valikossa näkyy, minkä kokoinen on suuri, keskisuuri tai pieni kuva. Itse määriteltäessä kuvan kokoa voidaan muuttaa prosenttien tai pikselien avulla.

Avaa prototyypin kuva »

Kielivalinnan kuvake

Prototyypissä iso A on vaihdettu maapalloksi, koska se kuvaa kielivalintaa paremmin. Lisäksi välistä on poistettu yksi ylimääräinen sivulataus, kun kielivalikko on pudotusvalikko eikä erillinen sivu.

Avaa prototyypin kuva »

Kalenterin viikkonumerot

Prototyypin kalenteriin on lisätty viikkonumerot näkyviin. Ne helpottavat esimerkiksi tapaamisten sopimista tai koulujen viikkosuunnittelua.

Avaa prototyypin kuva »

Tehtävien palautus

Tehtävien palautukset on tehty prototyypissä näkyvämmäksi. Uudet palautukset on helpompi huomata prototyypissä näkyvän muutoksen ansiosta.

Avaa prototyypin kuvat »

Liitteiden aukeaminen ja listaus

Prototyypissä liitteiden listaus on tehty selkeämmäksi ja siihen on tuotu suora latausmahdollisuus näkyville. Näin ollen liitettä ei tarvitse turhaan klikata useampaa kertaa, että sen saa kokonaisuudessaan auki tai ladattua koneelle.

Avaa prototyypin kuva »

Viimeksi päivitetty 16.5.2017