verkkosivujen-suunnittelu

Ohjeita verkkosivujen tekemiseen

Käytettävyys, käyttökokemus, saavutettavuus ja näkyvyys ovat ydin asiat verkkopalveluja suunniteltaessa. Ihmiset haluavat löytää etsimänsä vaivattomasti, myös erityisryhmät. Sivuston tulisi olla selkeä, helppo ja sisältää vain välttämätön. Kaikki ylimääräinen kilpailee oleellisen kanssa. Minimalistisella suunnittelulla minimoidaan myös käyttäjän kognitiivinen kuorma. Voisin jakaa tässä muutaman vinkin ja ohjeen, kuinka saat tehtyä paremmat nettisivut.

 

Käytettävyys ja käyttökokemus

Webdesignissa puhutaan UI/UX designista. UI tarkoittaa user interface (käyttöliittymä) ja UX tarkoittaa user experience (käyttökokemus). Käyttöliittymä on se mikä näkyy käyttäjälle, kun taas käyttökokemus on käyttöliittymästä tuleva kokemus. Yleisesti ajatellaan, että käyttökokemus on tärkeämpi ja se edellä suunnitellaan. Nettisivujen rakenteellinen tekeminenhän on tuota UI:tä, eli se mitä käyttäjälle näkyy. Aika moni osaa tehdä rakenteellisesti nettisivut ja kirjoittaa sinne yhteystiedot, yrityksen nimen, laittaa logon ja muutamia kuvia. Riittääkö se? Ei se välttämättä riitä. Sivusto tulisi olla suunniteltu käytettävyyden kannalta hyvin. Värit, koot, tila, oikeat elementit, selkeys, helppous, tuttuus, jne. Jos nämä ovat väärin tehty, voi käyttökokemus jäädä huonoksi, ja henkilö poistuu sivuiltasi hetkessä. Käytännön esimerkkinä käyttökokemuksesta voisi toimia kynttiläillallinen. Illallinen voi olla koottu parhaista luomu- ja lähiaineksista, ja katettu hienoille astioille, mutta se kynttilä puuttuu. Juuri se ydinasia, joka luo kokemuksen kynttiläillallisesta. Miten käy tunnelman? Se lässähtää ja seuralainen karkaa ennen aikojaan.

Käyttökokemus tulee sivujen ulkonäöstä ja käytettävyydestä. Alussa täytyy määritellä kohderyhmä, mitä palveluja tarjoat, mitä asiakkaan ongelmia ratkaiset, mitä he hyötyvät ja kuinka he käyttäytyvät sivustolla. Asiat kannattaa kirjoittaa muistiin ja piirtää paperille sivuston luonnos. Kun olet listannut kaikki oleelliset ja tärkeät asiat, jätä kaikki ylimääräinen pois. Less is more! Voit tehdä myös käyttökokemuskartan. Profiloi käyttäjä, ja mieti kuinka hän todennäköisesti sivustollasi etenisi, että oleellinen löytyisi vaivattomasti.

kayttokokemuskartta-sosiaalinen-media
Tässä yksi käyttökokemuskartta

 

 

verkkosivujen-luonnos
Twitterin luonnos vuodelta 2000

Saavutettavuus

Verkkopalvelujen saavutettavuus on sama asia kuin ympäristön esteettömyys. Jokaisella on oikeus, erityistarpeistaan huolimatta, käyttää palveluja. On paljon erityisryhmiä, kuten näkövammaisia, lukihäiriötä, värisokeutta, autismia, putkinäköä, jne. Saavutettavuuden kolme keskeisintä osa-aluetta on tekninen toteutus, helppokäyttöisyys sekä selkeä ja ymmärrettävä sisältö. Listat, ryhmittely, tila, selkeys, helppous ja riittävät kontrastit jo auttavat näitä erityisryhmiä. Kuinka moni teistä tiesi, että kuvien alt-tekstit ovat tärkeitä ruudunlukijoita käyttäville? Ruudunlukija lukee kuvauksen käyttäjälle ja olisi aika ikävää, jos siinä lukisi vain ”untitled-13”. Se ei kerro kuvasta mitään.

Verkkopalvelujen saavutettavuudesta on tehty kansainväliset saavutettavuusohjeet ja digipalvelulaissa säädetään, että julkisen hallinnon organisaatioiden tulee täyttää saavutettavuuden minimivaatimukset.

Lue lisää saavutettavuudesta:

https://vm.fi/digipalvelulaki

https://www.saavutettavuusvaatimukset.fi/

 

Avainsanat

Jo alkuvaiheessa kannattaa myös kartoittaa sivustosi avainsanat. Sanat, joilla oletat ihmisten hakevan sinun palvelujasi hakukoneista (esim. Google). Minun yritykseni tarjoaa verkkosivuja, valokuvausta ja graafista suunnittelua, joten jokaisesta aihealueesta täytyy kartoittaa avainsanat. Minun tapauksessani valokuvauksen avainsanat voisivat olla vaikka: valokuvaus, hääkuvaus, lapsikuvaus, henkilökuvaus, valokuvaaja, valokuvat blogiin, valokuvat someen, jne. Ne kannattaa listata ihan ”kansan kielellä”, koska niillä hakuja todennäköisesti tehdään. No mihin näitä avainsanoja tarvitaan? Niitä tarvitaan mm. verkkosivujesi optimointiin.

Lue lisää hakukoneoptimoinnista

Sisältö

Ensimmäisen kahden kappaleen sisältö on tärkein. Se tulisi olla mahdollisimman informatiivinen, arvokas ja houkutteleva. Kappaletta ei ehkä kannata aloittaa, että: ”Olen 40-vuotias ahkera ja sosiaalinen yrittäjä iloisesta Pohjois-Karjalasta….”. Ennemminkin kannattaa mennä suoraan asiaan. Kertoa mitä palveluja tarjoat ja mitä kävijä hyötyy niistä. Sisällön pitäisi olla kävijälle hyödyllistä ja arvokasta. Luonnollista sisältöä tulisi olla riittävästi ja niissä tulisi esiintyä avainsanoja. Sisältöä ei kannata kopioida muilta eikä toistaa sivustosi muilla sivuilla. Kannattaa myös miettiä sisällön oikoluettamista ammattilaisella, jos ei itse hallitse kielioppia.

 

Fontti

Verkkosivuilla suositaan groteskeja eli pääteviivattomia fontteja, myös leipätekstissä. Ohjelmoinnissa ne tunnetaan paremmin sans-serif sukuisina fontteina. Pääteviivattomat fontit ovat selkeitä. Esimerkiksi Arial, calibri ja verdana ovat pääteviivattomia fontteja.

 

Värit

Lyhyesti voisin kertoa väreistä. Muutamissa web design opuksissa on määritelty, että optimaalinen määrä värejä olisi 4 ja maksimi 7. Mustaa ja valkoista ei lasketa väreiksi.  Sivustolla tulisi olla vähintään yksi pääväri ja yksi tehosteväri. Tekstin väreinä ei tulisi käyttää punaista tai vihreää. Ne ovat vaikeasti luettavia värejä kaikille ihmisille, mutta ennen kaikkea erityisryhmille. Parhaita värejä ovat tummat värit, kuten musta, tummanharmaa, tummansininen, jne. Musta on yleisin.

 

vari-ympyra
Hakusanalla “colorwheel” löytyy paljon tietoa värien valitsemisesta

 

Pääväri tulee yleensä yrityksen logon tai visuaalisen ilmeen mukaan. Vaikka se on pääväri, niin sitä tulisi käyttää kuitenkin harkiten. Jos yrityksen pääväri on vaikka punainen, niin en laittaisi punaista taustaväriä sivustolle. Punainen väri painikkeissakin luo helposti ”kielletyn” mielikuvan. Yleisestihän punaisella painikkeella peruutetaan tai kielletään jotain. Tehosteväriksi kannattaa yleensä valita joku aika erottuva lämminsävy. Lämpimiä sävyjä ovat mm. punainen, oranssi ja keltainen. Miksi sitten lämmin sävy? Tiedetään, että ihmisen näköaisti on nopein ja ensisijainen. Ihminen ”skannaa” näköaistilla sivuston läpi etsien jotain mielenkiintoista. Ihmisen katse kiinnittyy ensisijaisesti lämpimiin väreihin. Tehostevärejä käytetään mm. ”call to action”-painikkeissa, joita painamalla käyttäjää ohjataan loogisesti tärkeisiin kohteisiin. Tärkeiden elementtien, kuten painikkeiden, tulisi olla riittävän isoja, niiden ympärillä tulisi olla tilaa ja kontrastin pitäisi olla hyvä.

Lue lisää väreistä: värien valitseminen nettisivuille

Mobile first -ajattelu

Käyttöliittymien suunnittelussa meille opetettiin koulussa heti alkumetreillä termi: mobilefirst. Mobile first design tarkoittaa, että suunnittelu aloitetaan mobiililaitteelle. Netti ei ole enää paikkariippuvainen, vaan nykyisin ihmiset käyttävät internetiä ihan missä vain mobiililaitteilla. Erilaisten tutkimusten mukaan yli puolet käyttäjistä käyttää nettiä mobiililaiteella. Google Analytics näyttää myös, millä laitteella sivustolla on käyty. Näitä tuloksia selatessa näkyy myös tuo sama tulos, että yli puolet on mobiililaitteen käyttäjiä. On siis tärkeää, että sivut skaalautuvat oikein kaikille laitteille. WordPressissä verkkosivuja tehdessä pystyt vaihtamaan näkymään mobiililaitteeseen tai tablettiin. Suosittelenkin verkkosivuja tehdessä valitsemaan skaalautuvan templaten ja tekemään sivuston mobilefirst ajatuksella. Bootstrap on myös oiva apu skaalautuvien sovellusten tekoon, jos osaa ohjelmoida.

 

Share on facebook
Share on twitter
Share on linkedin