Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto 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 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 Saila.Ovaska@uta.fi 4
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 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 Saila.Ovaska@uta.fi 5
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ä 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) Saila.Ovaska@uta.fi 6
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 Esimerkki: Plan-kummiksi Ruudunkaappaus huonosta WWW-lomakkeesta, mitä huonoa? Saila.Ovaska@uta.fi 7
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 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 Saila.Ovaska@uta.fi 8
Yhteenveto: muista 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 9