Käyttöliittymä on yleensä verkkosivuston huomaamattomin osa-alue. Toimivan käyttöliittymän ansiosta järjestelmä on “läpinäkyvä” ja helppo omaksua. Sivuston ei tarvitse selitellä; toiminnot ja sisällön ymmärtää yhdellä vilkaisulla. Kaiken lähtökohtana on, että verkossa käyttäjän tulee löytää tieto vaivattomasti ja nopeasti.

Tässä kahdeksan nyrkkisääntöä hyvän käyttäjäkokemuksen luomiseen.

1. Sijoita

Sijoita tärkeimmät elementit sivuston yläosaan. Suurin osa käyttäjistä ei rullaa sivua alas ensimmäisellä vierailukerralla. Vierailija poistuu, jos sivusto ei tarjoa heti mielenkiintoista informaatiota. Elementtien sijoittaminen on suunnittelun tärkein vaihe. Huomioi käyttäjien vaihtelevat näyttöresoluutiot ja päätelaitteet.

Hyvä esimerkki toimivasta sijoittelusta tyylikkäästi:

• http://www.divine-project.com/

2. Minimoi

Minimoi elementtien määrä sivustolla. Graafisen suunnittelun periaatteet pätevät myös verkossa: Tyhjä tila on tärkeä, käytä sitä! Tee suuria selkeitä kokonaisuuksia, jäsentele informaatio hyvin. Vältä turhaa kohinaa ja häiriötekijöitä sivustossa. Web-ympäristössä lukijan katseen liike ja kohdistuminen eroavat printtimaailman opeista. Hektisyys on osa verkkomaailman luonnetta.

Hyvä esimerkki elementtien minimoinnista sivustolla, vaikka informaatiota on paljon:

• http://www.diftype.com/

3. Ohjaa

Värien ja muotojen avulla voidaan sitoa sivuston osa-alueita yhteen. Väreillä saadaan nostettua myös tärkeitä alueita muusta sisällöstä. Verkkosivustoissa tietyt värit mielletään myös toimintoina, esim. linkin värinä tulisi säilyttää sininen, koska ihmiset ovat tottumuksen kautta sitoneet värin ja toiminnon toisiinsa.

Hyvä esimerkki toimivasta värien ja muotojen hallinnasta:

• http://goglamping.net/

4. Opasta

Luo aputoimintoja käyttäjille. Toimiva hakutoiminto on ehdottomasti tärkein apu. Myös selkeät linkit sivun tulostamiseen, sivukarttaan ja esim. yhteystietoihin tai eri kieliversioihin helpottavat sivustolla navigointia erityisesti vähemmän verkkoa käyttävien keskuudessa.

Hyvä esimerkki navigaatiosta ja selkeistä aputoiminnoista:

• http://www.umo.fi/

5. Korosta

Oikeaoppisen typografian käyttö edesauttaa luettavuutta. Tekstin koko ja muoto vaikuttavat siihen, miten asiat ymmärretään. Älä siis käytä kursiivia, lihavointia, alleviivausta tai muuta tehokeinoa väärin. Suunnittele otsikkotasot ja värit hyvin. Ihmisen silmä poimii korostetut osiot ensimmäisenä, joten mieti tarkkaan mitä nämä osiot sisältävät. Huomio myös, että liian leveä tekstipalsta on vaikealukuinen.

Hyvä esimerkki monipuolisesta räväkästä toteutuksesta, jossa eri elementtien korostaminen on kuitenkin mietitty tarkkaan:

• http://www.chris-wallace.com/

6. Visualisoi

Ikonit luovat graafisella muodolla merkityksen toiminnolle. Ikonien tulisi olla siis hyvin selkeitä ja ymmärrettäviä. Muista aina kohderyhmän kartoitus, sillä symboliikan metafora voi vaihdella kulttuurista riippuen. Napin tulee näyttää napilta. Napin muotoa voidaan korostaa valon ja varjon yhdistelmällä ja luoda illuusio korkeammasta pinnasta.

Hyvä esimerkki graafisten ikonien käytössä:

• http://ebiene.de/

7. Nimeä

Pidä nimeämisperiaatteista kiinni. Älä sekoita käyttäjää muuttamalla sivuston nimiä eri tasoilla. Hakukoneet arvostavat selkeää hierarkiaa ja toimivaa linkitystä.

Hyvä esimerkki toimivasta hierarkiasta uudenlaisella näkemyksellä:

• http://www.bk.com

8. Huomioi

Polut eivät ole lineaarisia. Sivustolle tuleva henkilö ei välttämättä saavu etuovesta, joten pyri ymmärtämään verkko mediana ja huomioi käyttäytyminen. Hypermedian monimuotoisuus on myös rasite suunnittelijalle. Pyri selkeyteen. Jos mahdollista, tee käyttöliittymätesti koeryhmällä. Saat siitä arvokasta palautetta.

Hyvä esimerkki toimivasta käyttöliittymästä portaalimaisessa verkkosivustossa:

• http://www.kontain.com

Muista aina!

Hyvin suunniteltu on puoliksi tehty. Kynä ja paperi ovat edelleen hyviä apuvälineitä suunnittelutyössä.

Sivuston hierarkian ja arkkitehtuurin määrittelee sivuston kohderyhmä, sisällön laajuus ja osa-alueiden painottaminen. Hyvän käyttöliittymän suunnittelu lähtee perusasioista, hyvistä käytänteistä, jotka ovat muovautuneet vuosien saatossa verkkosivustojen suunnittelussa.