Hyvin suunniteltu on puoliksi tehty – näin kuuluisa viisaus kuuluu. Kun projektia varten laadittu suunnitelma on toteutettu oikeaoppisesti ja se sisältää kaikki työn tarpeellistamat asiat, säästyy aikaa turhista varmistuskyselyistä ja jatkopalavereista. Tämä pätee myös verkkosivuston suunnittelussa ja sen jälkeisessä teknisessä toteutuksessa.
Tässä artikkelissa perehdymme verkkosivuston suunnitteluun tarkemmin. Käymme läpi perusteita kuten verkkosivustojen suunnittelun sisältämät asiat, mihin kannattaa käyttää huomiota suunnittelutyön aikana, ja mitä kaikkea verkkosivuihin tulee lisätä.
Mitä on verkkosivujen suunnittelu?
Kansainvälinen termi ‘Web Design’ pitää sisällään paljon muutakin kuin visuaalisen suunnittelutyön. Tosiasiassa verkkosivujen suunnittelu on myös teknistä suunnittelua, jolla varmistetaan verkkosivuston optimaali toiminnallisuus loppukäyttäjälle. On totta, että visuaalinen puoli suunnittelusta on merkittävä, mutta enemmän ratkaisee sivujen yleinen käytettävyys ja toimivuus; sivu voi näyttää vaikka kuinka hienolta, mutta jos käyttäjä ei löydä navigaatiopalkkia mistään, ei sillä ole mitään merkitystä.
Verkkosivujen suunnittelusta vastaa UX/UI-kehittäjä (User Experience/User Interface), Front End -kehittäjä tai käyttöliittymäsuunnittelija. Suunnitteluun voidaan toki ottaa mukaan muitakin kehittäjiä, mutta pääasiassa vastuu on jollakulla näistä kolmesta.
Ennen aloitusta
Ennen kuin päästään varsinaiseen suunnittelutyöhön, on hyvä miettiä tiettyjä asioita jotka määräävät kehityksen suunnan. Jotta sivun designista saadaan mahdollisimman optimaali, nämä asiat on määriteltävä:
- Loppukäyttäjä. Kuka on sivustojen keskivertokäyttäjä, minkä ikäinen hän on, minkälaisia kiinnostuksia hänellä on, mitä tarpeita hänellä saattaa olla sivun sisällön suhteen ja sen ulkopuolella?
- Loppukäyttäjän erityistarpeet. Edustaako loppukäyttäjä jotain ihmisryhmää jolla on sivuston toimivuuden tai sisällön kannalta erityistarpeita?
- Imago. Minkälainen sivuston edustama brändi on? Minkälainen viesti brändistä tai henkilöstä halutaan välittää käyttäjäkunnalle?
- Alusta. Mitä teknologioita sivustossa halutaan hyödyntää? Mille alustalle sivusto tullaan kasaamaan?
Kun suunnittelijoilla on tiedossa kuka sivuston loppukäyttäjä on, osataan paremmin mukauttaa sivujen käyttökokemus juuri hänelle sopivaksi. Käytännössä tämä tarkoittaa esimerkiksi tarvittavien erikoispainikeiden sijoittamista sivuille, oikeiden sisältöjen korostamista, ja niin edelleen. Jos sivuston omistavalla taholla on olemassa valmiita tyyliohjeistuksia, logoja tai väripaletteja, on ne tässä vaiheessa myös hyvä tuoda esiin.
Rautalankamallia toteuttaessa on hyvä käyttää huomiota sivujen skaalautuvuuteen. Kannettavien älylaitteiden yleistymisen myötä responsiiviset sivut ovat tätä nykyä vakio web-suunnittelussa. On syytä varmistaa, että sivut mukautuvat oikein erilaisia näyttöpäätteitä varten.
Sivuston rakenne
Kun sivuston kriteerit on laadittu ennakkoon, on helpompi siirtyä varsinaisen sivun suunnitteluun. Tämä vaihe alkaa sivuston rakenteen laatimisesta, joka toteutetaan luomalla sivustosta kartta sekä liuta niin sanottuja rautalankamalleja, kansainvälisesti wireframeja. Ne ovat hyvin raakoja visuaalisia vedoksia jotka määräävät mihin sivujen ensisijaiset elementit tulevat asettumaan. Wireframeista rakennetaan myöhemmin korkealaatuisempia vedoksia, joita hyödynnetään sen jälkeen sivustojen teknisessä toteutuksessa.
Sivuston kartta puolestaan kertoo minkälaiseen järjestykseen sivuston eri sivu ja sen sisällöt asetetaan, jotta sivuilla olisi mahdollisimman loogista navigoida. On esimerkiksi helpompi löytää verkkosivuston blogiartikkelit, kun ne sisällytetään blogisivun alle.
Oikeaoppisesti luoduilla sivuilla olisi varsinaisen sisällön lisäksi hyvä olla ainakin nämä asiat:
- Header. Sivuston ylälaidassa oleva tila, johon voidaan asettaa muun muassa logo, sekä linkkejä sivuston sisältöön.
- Navigaatio. Yleensä vaaka- tai pystysuora rivi joka sisältää sivuston tärkeimmät linkit. Verkkosivun mobiiliversiossa navigaatio pienentyy yleensä valikkonapin sisään.
- Haku. Painike tai hakukenttä jota voidaan käyttää sisällön etsintään sivustolta. Usein sisällytetty navigaatioon.
- Footer. Sivuston alaosaan asetettu tila johon voidaan sisällyttää yhteystietoja, sivuston navigaatio, muita hyödyllisiä linkkejä sekä linkki tietosuojaselosteeseen.
Mikäli halutaan että sivut luovat ammattimaisen kuvan niiden omistajasta, on sivustolla hyvä olla niiden oma räätälöity 404-sivu. Se on eräänlainen virhesivu joka näytetään käyttäjälle mikäli sivun osoitteessa ilmenee kirjoitusvirhe, tai haettua sivuston sisältöä ei syystä tai toisesta löydy.
Muita lisättäviä elementtejä ovat esimerkiksi evästeilmoitus, joka tietosuojalausunnon lisäksi sivustolta täytyy löytyä mikäli se niitä hyödyntää. Asiasta lisää tietoa löytyy meidän palvelusivulta.
Saavutettavuus
Verkkosivuston suunnittelussa on hyvä ottaa huomioon sivujen käytettävyys ja helppokäyttöisyys. Tämä ei näy ainoastaan verkkosivuston rakenteen laadinnassa vaan myös siinä miten sivun sisältö esitetään käyttäjille. Tähän on olemassa WCAG-kriteerit, jotka on luonut kansainvälinen Web Accessibility Initiative tarkoituksenaan standardisoida sitä miten verkkosivustojen tekstien, värien ja kuvien esitys sekä sivustojen toimivuus toteutetaan. Kun verkkosivuston suunnittelussa noudatetaan WCAG:n kriteerejä, sivut ovat helposti käytettäviä, sen sisältö helposti löydettävissä sekä käyttäjäystävällisesti katsottavissa.
Sivujen keskeisiä WCAG-kriteerien käsittelemiä asioita ovat:
- Fontti. Sivujen teksti ei saa olla liian iso, eikä myöskään liian pieni. Tekstin fontti pitää olla riittävän selkeä luettavaksi (esimerkiksi leipäteksteissä hyödynnetty sans serif -fontti, ei serif). Suosi tekstin sijoittamista vasempaan laitaan – vältä tekstin keskittämistä.
- Väri. Sivuston värit eivät saa olla liian kirkkaita. Sivuston värien kontrasti ei saa olla liian jyrkkä, eikä liian pehmeä. Jos sivun tekstien lukeminen pistää silmiin, on syytä korjata sivujen värejä.
- Sisältö. Varmista, että sivuston käyttäjillä on riittävästi aikaa nähdä sivujen sisältö. Laadi sivuston ei-tekstisisällölle tekstilliset vaihtoehdot, jotta erityistarpeita omaavat käyttäjät voivat myös kokea sisällön. Varmista, ettei sisältö aiheuta epileptisiä kohtauksia käyttäjille (esim. vältä välkkyviä valoja).
- Käytettävyys. Varmista, että sivustolla voi navigoida vain näppäimistön varassa. Varmista että käyttäjä voi poistua sivuilta selaimen Takaisin-napilla, eikä käyttäjä jää sivuille jumiin.
Tämä ei ole täysin kokonaisvaltainen lista kriteereistä, joten asiaan on syytä tutustua tarkemmin täällä. WCAG ei ole lakikirja, vaan ohjesääntö: aivan kaikkien sääntöjen noudattaminen ei ole pakollista, vaan kriteereille on olemassa omat luokituksensa – A, AA sekä AAA. Mitä enemmän ja korkeamman luokan kriteerejä noudatetaan, sitä tehokkaammin sivustosta tulee käyttäjäystävällisempi ja helpommin käytettävä.
Poikkeuksena on julkisen puolen, vahvaa tunnistautumista käyttävien sekä viranomaisten tahojen verkkosivustot joiden käytettävyys tulee olla myös erityistarpeisille henkilöille mahdollistettu, esimerkiksi sokeille tai huononäköisille henkilöille. Tämä on muun muassa Suomen laissa määritelty vaatimus.
WCAG-kriteerien noudattaminen ei ainoastaan paranna käyttökokemusta loppukäyttäjille, vaan se myös tehostaa sivuston näkyvyyttä hakukoneissa. Käytettävyys ei siis ole vain trendi, vaan siitä on myös konkreettista hyötyä sivuston omistajalle.
Muista testata
Kuten kaikessa teknisessä kehityksessä, myös verkkosivuston suunnittelussa on hyvä suorittaa ajoittaista testausta. Loppukäyttäjälle laadittujen sivujen käytössä voi ilmetä jälkikäteen poikkeamia siitä miten sivujen käyttö alunperin suunniteltiin. Hyödyntäen käyttäjien dataa muun muassa sivuilla navigoinnista, voi sivujen julkaisun jälkeen ilmetä esimerkiksi ns. pullonkauloja joissa käyttäjien eteneminen sivuilla pysähtyy. Näitä ongelmakohtia voidaan ennaltaehkäistä riittävän hyvällä testauksella, tosin ei ole tavatonta jatkokehittää sivustoa pienkehityksen avulla.
Yhteenveto
Vaikka tässä artikkelissa listattiin kaikenlaista tehtävää hyvän verkkosivujen suunnittelun toteuttamiseksi, ei kannata ahdistua liikaa. Loppujen lopuksi näistä ohjeista suuri osa ei ole täysin pakollisia, pois lukien käyttäjätietojen käsittelyyn liittyvät asiat ja saavutettavuuden kriteerit julkisen puolen tahojen verkkosivuilla. Nämä asiat ovat ohjenuora jota konsultoiden sivujen designia voidaan parantaa asia kerrallaan. Mitä enemmän näitä asioita sivuston kehityksessä ottaa huomioon, sitä parempi kokemus loppukäyttäjälle saadaan aikaiseksi, ja sitä korkeammalle verkkosivustosi ilmestyy ihmisten hakutuloksiin Googlessa.
Mikäli verkkosivujesi sisältö tai rakenne mietityttää, tai etsit itsellesi alan ammattilaisia rakentamaan kokonaan uutta verkkosivustoa, ota meihin reippaasti yhteyttä! Olemme vuosien aikana toteuttaneet useita verkkosivustoja, joissa myös olemme hyödyntäneet näitä kriteerejä kattavasti.
Varaa ilmainen tapaamisaika jo tänään, ja keskustellaan lisää.
