ohjeistoilla arviointi

Transkriptio

1 Käyttöliittymä- ohjeistoilla arviointi Tommi Ahonen

2 Ohjeisto (Guideline( Guideline) HelMet- aineistohakujärjestelm rjestelmän n uuden käyttöliittymän n suunnittelua varten

3 Ohjeistus koskee: 1. Asemointi näytn ytöllä 2. Tiedon esitystavat 3. Lomakkeet 4. Toiminnallisuus (esim. hakutoiminnot) 5. Visuaalinen suunnittelu

4 1. Asemointi näytn ytöllä

5 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

6 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

7 Missä kielivalinta?

8 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ä

9 1. Asemointi näytn ytöllä, työskentelyalue Sisält ltää: : tekstiä,, lomakkeita, hakutuloksia Alueet jaettu asemointiruudukolla, yhdenmukainen asettelu Toimintapainikkeet yleensä ala-oikealla

10 2. Tiedon esitystavat

11 2. Tiedon esitystavat, ryhmittely Oleellinen tieto ensin Tiedot ryhmitellää ään n (asiakokonaisuuksia) Selkeä otsikointi Pitkät t hakutulokset usealle näytn ytölle

12 Hakukriteerit Hakutulokset Hakukriteerit

13 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

14 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

15 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 >> >> )

16 2. Tiedon esitystavat, työkaluvihjeet Lyhyt aputeksti Napit (toiminnot), kuvakkeet, kuvat, linkit Pidemmät t tekstit ohjeisiin Käynnistä haku

17 2. Tiedon esitystavat, julkisuus Käyttäjän n henkilökohtaisista kohtaisista tietoihin merkintä siitä mikä julkista ja mikä ei

18 3. Lomakkeet

19 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

20 3. Lomakkeet, visuaalinen tasapaino

21 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

22 3. Lomakkeet, syötekent tekentät Kentän koko oletusvalinta radionappi

23 3. Lomakkeet, syötekent tekentät Kalenterikontrolli Välilehdet (ryhmittely)

24 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)

25 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

26 4. Toiminnallisuus

27 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ä

28 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)

29 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.

30 4. Toiminnallisuus, tiedon käsittelyk Poisto: varmistetaan (esim. oletko varma) Monivalinta suurten tietojen käsittelyssk sittelyssä

31 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

32 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ä)

33

34 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

35 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).

36 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ä.

37 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

38 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

39 Yhteenveto

40 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

41 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

42 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)

43 Lähteet

44 Lähteet [Nielsen05] Nielsen J. Durability of Usability Guidelines, Alertbox: : Current Issues in Web usability, Januari , [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 ,

45 Lähteet II [VNKrap05] Valtioneuvoston kanslia Käyttöliittymäsuunnittelun tyyliopas, Valtioneuvoston yhteiset verkkopalvelut, Valtioneuvoston Kanslian raportti 1/2005, Helmikuu 2005,