Käyttöliittymä- ohjeistoilla arviointi Tommi Ahonen 29.3.2006
Ohjeisto (Guideline( Guideline) HelMet- aineistohakujärjestelm rjestelmän n uuden käyttöliittymän n suunnittelua varten
Ohjeistus koskee: 1. Asemointi näytn ytöllä 2. Tiedon esitystavat 3. Lomakkeet 4. Toiminnallisuus (esim. hakutoiminnot) 5. Visuaalinen suunnittelu
1. Asemointi näytn ytöllä
1. Asemointi näytn ytöllä, alueet Tärkeät toiminnot Aineistohaku Kirjastot ja aukiolo Omat tiedot Varaa tietokone Kysy henkilökunnalta Harvemmin tarvitut Organisaation nimi Tietoa sivelluksesta Mobiiliversio Järjestelmä Sovelluksen nimi Kielivalinta sisäänkirjautuminen Haku HelMet-sivuilta Ohjeet Toimintojen tarkennus Esim. Aineistohaku (nav. 1) Aineiston selailu: Lapsille Aiheen mukaan Kirjastoluokittain Uutuusluettelo
1. Asemointi näytn ytöllä, alueet Sivu koko ajan jaettu alueisiin: Ylä- ja alatunnisteet (header( & footer) Navigointipalkit (vaaka ja sivuvalikot) Työskentelyalue: varsinainen sisält ltö Muuta: Navigointipalkkien: hierarkia, tiputusvalikot, murupolut/navigaatiopolut
Missä kielivalinta?
1. Asemointi näytn ytöllä, mittasuhteet Oletusleveys:noin 870 px tai 760 px Oletuskorkeus: noin 560 px tai 400 px 80% sivun leveydestä Tyhjää tilaa 100% sivun leveydestä
1. Asemointi näytn ytöllä, työskentelyalue Sisält ltää: : tekstiä,, lomakkeita, hakutuloksia Alueet jaettu asemointiruudukolla, yhdenmukainen asettelu Toimintapainikkeet yleensä ala-oikealla
2. Tiedon esitystavat
2. Tiedon esitystavat, ryhmittely Oleellinen tieto ensin Tiedot ryhmitellää ään n (asiakokonaisuuksia) Selkeä otsikointi Pitkät t hakutulokset usealle näytn ytölle
Hakukriteerit Hakutulokset Hakukriteerit
2. Tiedon esitystavat, kieli Tehdää ään n listat käytetyistk ytetyistä termeistä ja lyhenteistä Ei pääp äällekkäisyyksiä Terminologia ja lyhenteet tuttuja käyttk yttäjälle Eri kieliä ei sekoiteta käyttk yttöliittymässä Tarkistetaan toimivuus eri kieliversioilla Suomi Eräpäiv ivä Julkaisutiedot Luokka Matkalla Nide Saatavuus Ruotsi Förfallodag Uppgifter om utgivaren av verket Klass På väg in Exemplar Beståndsuppgifter Englanti Expiry date Publisher information Class Enroute Volume Availability
2. Tiedon esitystavat, numeerinen tieto Sovitaan numeroiden ja yksiköiden iden esitystavat Eri kielillä voi olla eri esitystavat Taulukoissa tasaus oikealle Päivämäärät ilman etunollia erotinmerkkinä piste vuosilukuna neljänä numerona lyhenne: pvm Kellonajat 24-tunnin kello, ei etunollia erotinmerkkinä piste tai kaksoispiste lyhenne: klo. klo. ei sekunteja, paitsi erityistapauksissa
2. Tiedon esitystavat, linkit Vältetään n tekstin seassa olevia linkkejä Linkit tekstikappaleen perää ään Nimettävä selkeästi sti Lyhyt työkaluvihje (HTML) Erotellaan ulkoiset ja sisäiset iset linkit (ulkoisten linkkien edessä linkki-ikoni ikoni tai >> >> )
2. Tiedon esitystavat, työkaluvihjeet Lyhyt aputeksti Napit (toiminnot), kuvakkeet, kuvat, linkit Pidemmät t tekstit ohjeisiin Käynnistä haku
2. Tiedon esitystavat, julkisuus Käyttäjän n henkilökohtaisista kohtaisista tietoihin merkintä siitä mikä julkista ja mikä ei
3. Lomakkeet
3. Lomakkeet, syötekent tekentät Kentät t samassa järjestyksessj rjestyksessä kuin tekstiä luettaessa Kenttien koko vastattava syötett tettävän n tekstin määm äärää Ei liian monta eri kokoista kenttää per näyttn yttö (visuaalinen tasapaino) Usean rivin syötekentti tekenttiä vältettävä Ohjeet ja esimerkki jos syöteformaatti rajattu (formaatti, pituus) Useampia syöteformaatteja tuettava (esim. päivp ivämäärät) Tasaus vasemmalle (numeeriset mahd. oikealle) Tabulointi: sama järjestys j kuin luettaessa
3. Lomakkeet, visuaalinen tasapaino
3. Lomakkeet, syötekent tekentät Tiputus- ja monivalintavalikot: Kun pitää valita yksi/useampi arvo monesta Sisält ltö järjestetty (esim. aakkosjärjestykseen) Oletusarvo valittuna jos mahdollista Valintaruutu ja radio-nappi: Arvot aina napin oikealle puolelle Todennäköisin valinta ensin Oletusarvo valittuna jos mahdollista
3. Lomakkeet, syötekent tekentät Kentän koko oletusvalinta radionappi
3. Lomakkeet, syötekent tekentät Kalenterikontrolli Välilehdet (ryhmittely)
3. Lomakkeet, toimintopainikkeet toimintoihin jotka vaikuttavat järjestelmj rjestelmän n tilaan (navigointiin: linkkejä ja valikkoja) Sijoitus erilleen muusta sisäll llöstä Vaakariviin sivun alalaitaan tai pystyriviin oikeaan laitaan Yks nappi oletuspainikkeena, aktivoituu Enteristä (ei koskaan tiedon tuhoamispainike)
3. Lomakkeet, toimintopainikkeet Nappien koko ja järjestys j aina sama Nappi ei käytk ytössä: : harmaannutetaan & estetää ään Napit nimetää ään verbein(esim.. Peruuta), iso alkukirjain Selkokielinen työkaluvihjeet Suorittava toiminto edeltää ei suorittavaa toimintoa Wizardin napit
4. Toiminnallisuus
4. Toiminnallisuus, ikkunat Otsikoidaan kuvaavasti Uusien ikkunoiden avaamista vältetv ltetään Uusi ikkuna voidaan avata ohje-sivua tai ulkoista linkkiä varten Selaimen ominaisuuksia ei poisteta käytk ytöstä (back) Vaakavieritystä ja HTML-kehyksi kehyksiä vältettävä
4. Toiminnallisuus, valikot Päävalikoita ja alavalikoita alavalikkojen syvyys <= 3 taso Yhdessä valikossa <= 7 elementtiä enemmän n jos käytetk ytetään n jakoa asiakokonaisuuksiin (esim. tynittelyä väliviivojen avulla)
4. Toiminnallisuus, tiedon käsittelyk Selaus: ei muuta tilaa Lisäys: tyhjä lomake jossa oletusarvot täytetty. t Tallennuksen jälkeen j käyttk yttäjälle näytetn ytetään n valmiit tiedot. Muokkaus: lomake johon täytetty t vanhat tiedot. Tallennuksen ja muokkauksen jälkeen j käyttk yttäjälle näytetään n valmiit tiedot.
4. Toiminnallisuus, tiedon käsittelyk Poisto: varmistetaan (esim. oletko varma) Monivalinta suurten tietojen käsittelyssk sittelyssä
4. Toiminnallisuus, tiedon käsittelyk Syötteiden tarkistus: Pakolliset tiedot Oikeellisuus (formaatti) Tarkistus selaimessa jos mahdollista (JavaScript) Virheellisiä tietoja ei tallenneta Jos syötteiss tteissä puutteita: Merkataan kohta selkeästi sti (syötekentt tekenttä) Virheilmoitus: mikä vialla ja miten korjataan
4. Toiminnallisuus, tiedon käsittelyk Hakutoiminnot: Pyritää ään n käyttk yttämään n pikahakua (hakukenttä koko ajan näkyvilln kyvillä) Myös s tarkennettu haku tarjotaan (omalla sivulla) Oletuksena JA-haku (AND) OR sanalla voidaan tehdä mikä tahansa sana -hakuja *-merkki korvaa yhden tai useamman merkin?-merkki korvaa yhden merkin (myös s tyhjä) -merkeill merkeillä etsitää ään n täsmt smällistä ilmaisua Rajaus uudella haulla Hakutuloksen järjestj rjestäminen otsikkoa klikkaamalla Muita hakukriteerejä: : nidetyyppi, julkaisuaika, kieli Haku voi koskea vain tiettyä kenttää (esim. kirjasto, teoksen nimi, tekijä)
4. Toiminnallisuus, virheilmoitukset Virheet ilmoitetaan työskentelyalueen yläreunassa mahdollisesti myös s kohdassa jota virhe koskee Vältetään n uusien ikkunoiden avaamista Selkokielinen ilmoitus: kuvaus, syy, ratkaisu
4. Toiminnallisuus, kieliversiot Kieli voidaan vaihtaa koska vaan Jos sivu tai elementtia ei ole valitulla kielellä tulee siitä olla maininta (suomenkielinen kappale ruotsinkielisen käytk ytön n aikana).
4. Visuaalinen suunnittelu oma ilme ja selkeästi sti tunnistettava ulkoasu (käytt yttäjä tunnistaa sovelluksen) Graaffinen suunnitelija toteuttaa ulkoasun Värien valinta: luettavuus, väritasapaino v ja merkitys (punainen = varoitus) Värisokeat huomioitava Linkkien värit: v sininen jos aktiivinen, linkit harmaa ja estetty jos tilapäisesti isesti poissa käytk ytöstä. Käydyt linkit erotetaan valinnaisella värillv rillä.
4. Visuaalinen suunnittelu, typografia Typografia: pääasialliestu Sans-serif serif tyyleillä (esim. tahoma, arial, verdana, helvetica) vaihtoehtona myös geneerisiä kirjasintyylejä (esim. monospace, serif) Omat typografia seuraaville elementeille: leipäteksi teksi,, eritasoiset otsikot, valikot, lomakkeiden syött ttökentät, t, syött ttökenttien otsikot
4. Visuaalinen suunnittelu, tyylit Otsikot ja tekstit tasataan vasemmalle Korostukseen ei käytetk ytetä alleviivausta eikä kursiivia Leipäteksti riittävän n suurta luettavaksi Otsikot: korostetaan koolla/lihavoinnilla Ohjetekstit: yksi leipätekstist tekstistä erottuvaa tyyli
Yhteenveto
Ohjeiston kattamat käli komponentit Graafiset komponentit: värit, v mittasuhteet, sijoittelu, ryhmittely Tekstit: tyylit, typografiat Toiminnot (korkealla tasolla) Syöteformaatit Kielen käyttk yttö,, terminologia, lyhenteet
Ohjeiston edut Helpottaa suunnittelua (puoliksi tehty) Kokenut käyttk yttöliittymäsuunnittelija välittv littää kokemustaan kokemattomammille (toteuttajat, suunnittelijat) Korkean tason suunnittelu yhtenäisempi lopputulos Dokumentti jolla käytettk ytettävyys voidaan arvioida varhaisessa vaiheessa Korkean abstraktiotason ohjeistus käytettk ytettävissä monen sovelluksen tai sovellusalueen suunnittelussa
Ohjeiston ongelmat Ohjeiston tulkinnanvaraisuus (eri ihmiset toteuttavat eri tavalla) Kattavan ohjeiston seuraaminen työläist istä Ristiriitaiset ohjeet Tarkka ohjeistus -> > dokumentista tulee pitkä Lyhyempi ohjeistus -> > tulkinnanvaraisuus kasvaa Ratkaisut eivät t välttv lttämätt toimi käytk ytännössä Käsittelee vain yksittäisi isiä näyttöjä (ei navigointipolkuja)
Lähteet
Lähteet [Nielsen05] Nielsen J. Durability of Usability Guidelines, Alertbox: : Current Issues in Web usability, Januari 17 2005, http://www.useit.com/alertbox/20050117.html [Nielsen05] Nielsen J. Sixty Guilines from 1986 Revisited (Sidebar to Jakob Nielsen's column "Durability of Usability Guidelines.") Alertbox: : Current Issues in Web usability, Januari 17 2005, http://www.useit.com/alertbox/20050117_guidelines.html
Lähteet II [VNKrap05] Valtioneuvoston kanslia Käyttöliittymäsuunnittelun tyyliopas, Valtioneuvoston yhteiset verkkopalvelut, Valtioneuvoston Kanslian raportti 1/2005, Helmikuu 2005, http://vnk.fi/julkaisut/listaus/julkaisu/fi.jsp?oid=149579