Hahmolait käyttöliittymässä

Kirjoittanut Hannu Julkaistu 3.4.2009

Onko ohjelmasi käyttäjillä kummallisia tulkintoja siitä mikä label kuuluu mihinkin radiobuttoniin tai checkboxiin, tai siitä kuinka web sivun layout kuuluu ymmärtää?

Käyttöliittymistä puhuttaessa viljellään sanaa intuitiivinen. Kaikkia teknologiatuotteita mainostetaan intuitiivisiksi (ja samalla interaktiivisiksi innovaatioiksi). Raadollisesti sanottuna intuitio on kuitenkin samassa kategoriassa selvänäkemisen kanssa. Tieto siitä kuinka esim. ohjelmaa käytetään ei voi syntyä spontaanisti käyttäjän aivoissa. Käyttöliittymissä kysymys onkin ennen kaikkea konventioista, eli opitusta ja totutusta, mutta siinä ei ole kaikki.

Hahmolakien (ns. Gestalt periaatteet) hyväksi käyttäminen tuo käyttöliittymään jotakin todella intuitiivisen tuntuista. Nämä lait kuvaavat sitä miten nähdyt kohteet ymmärretään kuuluviksi yhteen tai erilleen. Asiaa esitellään kirjallisuudessa jonkin verran, mutta yleensä turhan teoreettisesti.

Läheisyys / Etäisyys

Toisiaan lähellä olevat kohteet oletetaan kuuluviksi yhteen. Aina. Tämän lain merkitys näkyy selvästi alla olevassa esimerkissä.

Ylemässä ryhmässä labelit ovat lähes yhtä kaukana kahdesta radiobuttonista ja vain ensimmäisen ja viimesen kohdalla on selvää mikä label kuuluu mihinkin radiobuttoniin. Hyvän tyylin mukaista olisi tietysti yhdistää labelin klikkaus vastaamaan ko. radiobuttonin klikkausta, mutta suurin osa käyttäjistä ei tiedä, että labelin klikkaaminenkin toimii.

Alempi ryhmä on vähän parempi. Pidempi väli saa radiobuttonit ja labelit näyttämään selvästi pareittain yhteenkuuluvilta. Mikä parasta, tätä ryhmittelyä ei tarvitse miettiä ollenkaan. Jokainen label ja radiobutton -pari vain luonnollisesti kuuluu yhteen.

Molemmissa esimerkkiryhmissä on kuitenkin se ongelma, että radiobuttonit loogisesti kuuluvat yhteen, mutta ovat kaukana toisistaan läheisyys/etäisyys lain vastaisesti. Oleellisen hahmolain rikkomisen lisäksi tässä on se ongema, että täplän siirtyminen radiobuttonista toisee on hankala huomata (ihmisen "todellinen" näkökenttä on näytöllä noin peukalonpään kokoinen ja muu näkymästä on enimmäseen cachesta).

Parhaalta vaihtoehdolta vaikuttaa radiobuttonien asettelu allekkain. Silloin label-radiobutton -parit ovat ehdottoman selkeitä, radiobuttonit muodostavat ryhmän ja täplä liikkuu sujuvasti valitusta toiseen. Checkboxeilla ei ole vastaavaa selvästi toisiinsa kuulumisen vaatimusta, mutta muuten samat vinkit pätevät niihinkin.

Sulkeutuvuus

Saman alueen sisällä olevat kohteet kuuluvat yhteen. Alueen rajoina voivat toimia:

• Ympäröivä viiva.
• Yhtenästä aluetta rajaava pysty tai vaakaviiva.
• Sama taustaväri.
• Sama taso (esim. upotettu/korotettu efekti).

Käyttöliittymien standardia nappia on mahdoton ymmärtää samalla tavalla väärin kuin radiobuttoneita tai checkboxia. Nappi sulkee labelin sisäänsä rajaviivalla, korotuksella ja joskus taustavärillä.

Yllä esimerkki komponenteista, jotka on rajattu ympäroivällä viivalla ryhmäksi. Ryhmän sisällä olevalla napilla ja checkboxeilla on nyt selvästi yhteys toisiinsa.

Periaatteessa yhden komponentin ryhmiä ei saisi tehdä, mutta tästäkin periaatteesta voi joustaa, jos se parantaa käyttöliittymän ymmärrettävyyttä. Esimerkiksi erityisen oleellisen komponentin voi rajata muista erilleen ja varustaa ylimääräisellä ohje-labelilla.

Yllä varoittava esimerkkitapaus erään blogin kommenttien layoutist. Sivun tekijä oli tarkoittanut asetella kommentit siten että kirjoittajan nimi on kommentin alla ja hento vaakaviiva kirjoittajan nimen päällä. Päivittäin blogin kommenteissa oli uusien kommentoijien valitusta siitä, että heidän kommenttinsa tuli jonkun muun nimellä. Heidän tulkintansa oli ymmärrettävästi se, että kommentit kirjoittajan nimineen on eroteltu vaakaviivoilla.

Valiomuotoisuus

Valiomuotoisuuden laki tarkoittaa sitä että kuviot tulkitaan mahdollisimman yksinkertaisina, säännönmukaisina ja hyvämuotoisina. Käyttöliittymissä yksinkertaisin tulkinta näkyy esimerkiksi siinä, kuinka osittain toisen ikkunan alla oleva ikkunan ymmärretään pysyvän kokonaisena ja suorakaiteen muotoisena.

def foo(): print "Sisennys säännöt koodissa" print "ovat esimerkki säännönmukaisuuden käytöstä" for bar in listOfBars: print "bar: "+bar

Säännönmukaisuutta koodaajat käyttävät (toivottavasti) jatkuvasti sisentämällä koodinsa lohkoihin. Samalla tavalla tarkka asettelu ja säännönmukaisuus on oleellista käyttöliittymässä.

Onko ylläolevassa kuvassa neljä tekstikenttää vai kaksi kahden tekstikentän ryhmää?

Yhteen kiinnittyminen

Vieri vieressä tai toisissaa viivalla kiinni olevat kohteet kuuluvat yhteen.

Välilehdissä lehden nimiläppä rikkoo valiomuotoisuutta, koska muodon yksikertaisempi tulkinta olisi kaksi päällekäistä suorakaidetta. Nimiläppä kuitenkin liittyy sivuun olemalla aivan sen vieressä (ja samalla tasolla, ja saman reunaviivan sisällä).

Tässä ei ole kaikki hahmolaeista, mutta toivottavasti hyödyllisin osuus, jonka soisi kaikkien käyttöliittymien toteuttajien/suunnittelijoiden tietävän. Käyttöliittymän käytännön toteuttajan on erityisen vaikea ajatella tuotostaan käyttäjän kannalta, koska ratkaisuja tulee ajetelleeksi koodin kautta. Hahmolakeja voisikin helposti soveltaa käytettäväksi eräänlaisena katselmoinnin tarkastuslistana. Jos hahmolain mukainen tulkinta antaa mahdollisuuden vääriin tulkintoihin, niin joku melko varmasti tulkitsee niin. Järkeä ei kuitenkaan saa hahmolakien tulkinnoissa unohtaa. Hahmolait ovat peräsin taiteen alalta ja perustuvat kokemukseen, eikä niistä kaikkea ole tieteellisellä tarkkuudella perusteltu.