Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite: JoVuoTin jälkeen opiskelija Pystyy soveltamaan hahmolakeja ja visuaalisen suunnittelun alkeita lomakkeiden arvioimiseen Ymmärtää peruskontrollien (radiopainike, valintaruutu, valintalista) logiikan Tunnistaa suunnitteluvirheitä lomakkeilta Käyttöliittymien perusteet kurssilla aihetta jatketaan Saila.Ovaska@uta.fi 1
Lomakkeet käyttöliittymänä Lomakkeita tarvitaan www-sivuilla osana graafista käyttöliittymää paperillakin! Lomakkeet tärkeitä käyttöliittymissä tiedon syöttämiseen hakujen käynnistämiseen jne Esimerkkejä lomakkeista www.google.fi Saila.Ovaska@uta.fi 2
Esimerkkejä lomakkeista www.kela.fi www.facebook.com Esimerkkejä lomakkeista Tamcat - https://tamcat.linneanet.fi/ www.sskk.fi Saila.Ovaska@uta.fi 3
Lomakkeiden peruskontrollit Syötekentät Tekstikenttä (text box) Valintojen tekeminen Radiopainike (radio button) Valintaruutu (check box) Valintalista (selection list, list box) Komentopainikkeet Komentopainike (command button) on kontrolli, jonka painamisesta sovellus suorittaa jonkin toiminnon Saila.Ovaska@uta.fi 4
Valintojen tekeminen Radiopainikkeet Vaihtoehtojen joukosta voi valita vain yhden Toisensa poissulkevat vaihtoehdot Oletusarvo valittuna nopeuttaa mutta voi johtaa virhevalintoihin Valintaruudut Vaihtoehdoista voi tehdä yhden tai useamman valinnan Valinnat eivät riipu toisistaan Valintojen tekeminen Valintalistat usein käytetään tilanteissa, joissa valitaan vain yksi vaihtoehto ja vaihtoehtoja on tarjolla monta (>5) valittu vaihtoehto jää näkyviin vie vähemmän tilaa kuin radiopainikkeet Saila.Ovaska@uta.fi 5
Valintalistat Listatyyppinen valinta voidaan toteuttaa eri tavoilla Perusvalintalista joskus useamman valinnan tekeminen listalta on mahdollista (esim. Ctrl-näppäimen avulla) mutta silloin listan alkiot pitää nähdä kaikki; miten muuten käyttäjä muistaisi mitä on valinnut? tällainen käyttö on monelle käyttäjälle vaikeaa Pieneen tilaan sopii avattava valintalista (drop-down list / menu) Yksi valittavissa Listojen suunnittelu Ota huomioon aloittelevat ja kokeneemmat käyttäjät Aloittelijaa auttaa listan vieritysmahdollisuus Mutta vieritys ei ole tehokasta eikä lista ole aina aakkosissa Näppäimistöoikotiet lista vierittyy kun käyttäjä kirjoittaa haetun sanan ensimmäisen kirjaimen Kirjoitusmahdollisuus kenttään (ns. drop down combo box) Lista ja tekstikenttä yhdessä Saila.Ovaska@uta.fi 6
Komentopainikkeet Komentopainike on kontrolli, jonka painamisesta sovellus suorittaa jonkin toiminnon Esim. tietojen tallennus, dialogin sulkeminen, toiminnon peruuttaminen Myös Enterin painaminen näppäimistöltä voi käynnistää toiminnon esimerkiksi hakukoneissa Monikenttäisissä lomakkeissa toiminto tulee käynnistää vasta käyttäjän painettua siihen tarkoitettua painiketta (jotta estetään käyttäjän virheet ja lomakkeen lähetys ennen aikojaan) Lomakkeen peruskontrollit Peruskontrollien toimintalogiikka on suunniteltava Kuvissa saman lomakkeen kaksi eri tilaa, jotka riippuvat tehdystä radiopainikevalinnasta Kontrollit aktivoituvat vasta kun alempi radiopainike tulee valituksi Tietyssä tilassa tarpeettomat valinnat eivät vie käyttäjän huomiota Saila.Ovaska@uta.fi 7
Esimerkki: Plan-kummiksi Ruudunkaappaus huonosta WWW-lomakkeesta, mitä huonoa? Lomakesuunnittelu: kultaiset säännöt (1) Lomakkeiden täyttö on usein tylsää puuhaa Minimoi tuska! Suunnittele lomake tukemaan loogista etenemisjärjestystä Kuinka lomaketta tullaan käyttämään (tunne käyttäjät ja konteksti ) Tee käyttäjälle selkeäksi, kuinka lomake tulee täyttää Käytä otsikoinneissa ja kenttien nimissä käyttäjän käsitteitä ja kieltä Oikeiden kontrollien käyttö helpottaa käyttäjän tehtävää Visuaalinen suunnittelu Saila.Ovaska@uta.fi 8
Lomakesuunnittelu: kultaiset säännöt (2) Tee lomakkeen täytöstä joustavaa Käyttäjän tulee voida edetä lomakkeella valitsemassaan järjestyksessä Tarjoa mahdollisuus virheenkorjaukseen Käyttäjät tekevät virheitä ja voivat haluta peruuttaa Jos teknisesti mahdollista, tarkista virhesyötteet heti ja tarjoa täyttöapua Anna palautetta, kun käyttäjä on lähettänyt lomakkeen Lisäksi ohjelmointiympäristön standardeja ja suosituksia tulisi noudattaa Tästä lisää Käyttöliittymien perusteet -kurssilla Nimiökenttien sijoittelu tyyliohjeissa Kumpikin asettelutapa on mahdollinen Tyyliohjeissa kuitenkin eroja! Vanha OpenLook-tyyliohje Lähde: Mullet & Sano, Designing visual interfaces, 1995. Saila.Ovaska@uta.fi 9
Pohdintaa: nimiökenttien sijoittelu? Lähteenä: http://www.lukew.com/resources/articles/web_forms.html Katseenseurannan avulla tutkittu Luettavuustutkimus: katsepolut eri asetteluilla Paras sijoituspaikka kentän yläpuolella Visuaalisesti erillään edellisestä Kentännimeä ei kannata tummentaa Valintalistat vievät huomiota http://www.uxmatters.com/mt/archives/000107.php Saila.Ovaska@uta.fi 10
Yhteenveto: visuaalisen asettelun ohjeita Älä ahda lomaketta liian täyteen Jaa sisältö loogisiin osiin, ja käytä ristikkomallia palstoihin jaossa Tutustu tyylioppaisiin ja pyri yhtenäisyyteen Käytä tyhjää tilaa erottimena Varo sisäkkäisten ryhmien raamitusta Miellyttävät suhteet ovat tärkeämpiä kuin pinta alan minimointi Varo liioittelua! Yhteenveto Lomake tulee tehdä helpoksi täyttää Miten? Lomakkeen tulee noudattaa yleisiä käytäntöjä Peruskontrollit ja painikkeet kunnossa Huomioi visuaalisen suunnittelun ohjeet Saila.Ovaska@uta.fi 11