Visuaaliset valinnat ja käyttäjäkokemus verkkosivusuunnittelussa

Abstract

Tämän toiminnallisen opinnäytetyön tavoitteena oli suunnitella käyttäjäystävällinen ja vaikuttava verkkosivujen visuaalinen asetelma toimeksiantajalleni Webilist Oy:lle, ja tutkia miten visuaaliset valinnat vaikuttavat käyttäjäkokemukseen. Lisäksi työssä tarkasteltiin miten muut yritykset ohjaavat näillä valinnoilla asiakkaiden huomion haluttuihin toimintoihin. Koska yrityksellä ei ollut ennestään verkkosivuja, tarvitsi se itselleen visuaalisen asetelman, jonka pohjalta se lähti työstämään niitä. Tietoperustassa käsiteltiin miten verkkosivujen visuaalisia osa-alueita tulisi toteuttaa käyttäjäkokemusta ajatellen. Käsiteltyjä visuaalisia osa-alueita olivat värien käyttö, typografia, kuvasisällöt sekä elementtien asettelu ja hierarkia. Tietoperustassa syvennyttiin myös käyttäjäkokemuksen osalta sivujen saavutettavuuteen, käytettävyyteen sekä responsiivisuuteen. Tutkimusosioon valittiin seitsemän eri alojen verkkosivua tarkasteltavaksi. Verkkosivuja analysoitiin osa-alueittain ennalta määritettyjen kysymysmuotoisten kriteerien avulla, jonka jälkeen ne pisteytettiin keskenään vertailua varten. Analyysi toteutettiin erilliseen liitteeseen ja tulokset raportoitiin opinnäytetyöhön. Tutkimusosiossa tärkeimmiksi käyttäjäystävällisen suunnittelun osa-alueiksi nousivat typografia, toimintakehotteet sekä tärkeiden elementtien asettelu ja hierarkia. Vaikka edellä mainitut osa-alueet osoittautuivat tärkeimmiksi, vaikuttavat silti värien käyttö sekä muu asettelu käyttäjäkokemukseen huomattavasti. Tärkeimpiä tutkimustuloksista selvinneitä yksittäisiä asioita on selkeä typografia, tarpeeksi suuret kontrastit elementtien välillä sekä loogiset toimintakehotteet ja painikkeet. Toiminnallisessa suunnitteluosiossa verkkosivujen visuaalinen asetelma toteutettiin Figmalla. Asetelma keskittyi verkkosivujen etusivuun sekä mobiilinäkymään. Suunnitteluosiossa laadittiin verkkosivuille yhtenäinen väripaletti ja fonttikokonaisuus sekä toteutettiin verkkosivujen eri visuaaliset osa-alueet tietoperustan sekä verkkosivuanalyysin pohjalta. Verkkosivuston etusivun asetelman eri osioiksi muodostui yläpalkki, hero-osio, eli sivun yläosan pääosio, pakettiosio, asiakasosio, asiakaspolun osio, ominaisuudet-osio, yhteydenotto-osio sekä footer-osio, eli sivun alaosa. Mobiilinäkymään sisällettiin myös edellä mainitut osiot, kuitenkin muokaten niitä vastaamaan mobiililaitteiden näyttökokoja. Tutkimus- ja suunnitteluosioissa tuli eteen monia tärkeitä asioita, joita prosessissa tulisi huomioida. Tärkeimpänä näistä korostui ajankäytön hallinta sekä johdonmukainen suunnitteluprosessi, jossa on tärkeää, että edetään ensin suunnittelemaan perusrakenteita kuten asettelua ja värejä ennen yksittäisiä elementtejä.