Verkkosivujen ostaminen osa 3

Verkkosivujen design, konseptisuunnittelu ja käyttöliittymäsuunnittelu

Lue koko blogisarja yhdestä oppaasta: Lataa ilmainen verkkosivun ostajan opas

Edellisissä blogisarjan vaiheissa tutustuimme tarjouspyynnön laatimiseen verkkosivuista sekä sopivan toteuttajan valintaan. Tässä osassa käymme läpi verkkosivuston suunnitteluvaihetta.

Kuten aiemmissa postauksissa on mainittu, on jokaisella toimistolla toisistaan poikkeava prosessi verkkosivuprojektille. Verkkosivujen ostajana sinun tehtäväsi on pyytää toimistoa kuvailemaan heidän kehitysprosessinsa jo tarjousvaiheessa. Tällä tavoin tiedät etukäteen miten kehitys etenee, ja kuinka paljon resursseja sinulta ja organisaatioltasi vaaditaan missäkin kehitysvaiheessa.

Oleellista tuotannon aloitusvaiheessa, kutsutaan sitä sitten muodikkaasti sprintiksi, perinteisemmin workshopiksi tai vaikka aloituspalaveriksi, on kirkastaa visio sekä tavoitteet. Tarjousvaiheessa mietitty visio tarkentuu yleensä heti, kun yhteistyö ammattimaisen toimiston kanssa on aloitettu ja ensimmäiset palaverit pidetty.

Riippuen siitä millaisia brändiassetteja sinulla on käytössäsi, tehdään aloitusvaiheessa yleensä brändiin, viestintään, ja myyntiin liittyvää ajatustyötä.  Ennen varsinaisen prototyyppauksen ja ulkoasun suunnittelun aloittamista sinun tulisi valveutuneena asiakkaana huolehtia siitä, että suunnittelutoimistolla olla käsitys muun muassa:

  • Yrityksesi ja tuotteesi positioinnista markkinoilla ja kilpailuedustasi
  • Siitä, mikä nykyisillä verkkosivuilla on toimivaa ja mikä ei
  • Yrityksen sisältöstrategiasta ja viestinnällisistä tavoitteista
  • Verkkosivujen laajuudesta
  • Yrityksen eri osastojen tarpeista verkkosivuihin liittyen (HR, Talous, IT jne.)
  • Verkkosivuston käyttäjäpersoonista
  • Verkkosivuston käyttöskenaarioista

Verkkosivujen käyttöliittymäsuunnittelu ja prototyyppaus

Sketching, prototyping, papertesting – vision kirkastamista seuraavalla vaiheella on monta nimeä. Prototyyppaamalla, eli piirtämällä palvelun käyttöliittymästä yksinkertainen rautalankamalli, voidaan sivuston toiminnallisuutta ja logiikkaa testata ennen kuin muutoksia pitää tehdä koodiin tai Photoshop-tiedostoihin.

Huomioithan, että prototyyppivaiheessa ei oteta kantaa esimerkiksi sivuston visuaalisiin elementteihin, kuten väreihin ja kuviin, vaan oleellisempaa on suunnitella sivuston hierarkia ja priorisoida sisältöä.

Annan esimerkin. Myyt kolmea asiaa: koirankoppeja, kesämökkejä ja maansiirtopalvelua. Konseptointivaiheessa sivuston rakenne suunnitellaan vastaamaan näitä kolmea tuoteryhmää niin, että kesämökkejä etsivä asiakas päätyy googlailun jälkeen kesämökkejä käsittelevälle sivulle, eikä joudu katselemaan kuvia koirankopeista. Jos koirankopit ovat sinulle vain pieni sivubisnes, priorisoidaan ne prototyypin hierarkiassa koirankoppeja alemmaksi, ja paukkuja käytetään enemmän kesämökkien ja maansiirtopalveluiden tuotesivuihin.

Verkkosivujen visuaalinen suunnittelu

Rautalankamallien valmistuttua aloitetaan sivuston visuaalinen suunnittelu. Visuaalinen suunnittelu on viestintää. Toimiston tavoitteena on suunnitella jotain, joka on esteettistä, helppokäyttöistä ja toimii linjassa brändiviestintäsi kanssa. Visuaalisen toteutuksen tulisi olla silta käyttäjän ja heidän tarvitsemansa sisällön välillä. Tässä vaiheessa suunnittelutyö sisältää yleensä eniten taiteellisia piirteitä.

Designtyö ei kuitenkaan ole taidetta sanan varsinaisessa merkityksessä. Jos tavoitteena on kaupallinen verkkosivusto, ei visuaalista suunnittelua voi tehdä taiteellinen lähtökohta edellä. Taiteilija laittaa työhönsä oman persoonansa ja visionsa, ja voi periaatteessa tehdä suunnittelutyötä “tyhjiössä”, kun taas kaupallista verkkosivustoa suunniteltaessa designtyötä ohjaavat asiakkaan tavoitteet.

Asiakkaan ja toimittajan yhteinen vastuu on pitää huoli siitä, ettei maailmaan synny jälleen yhtä verkkosivustoa joka näyttää upealta, mutta jonka ymmärtämiseen tarvitaan tohtoriopintoja.

"Art is like masturbation.
It is selfish and introverted and done for you and you alone.
Design is like sex.
There is someone else involved, their needs are just as important as your own, and if everything goes right,
both parties are happy in the end.”
– Colin Wright.

Palautteen antaminen verkkosivun layoutista

Tässä vaiheessa prototyypit on herätetty eloon, ja asiakas saa ensimakua tulevasta ilmeestä. Jos asiakas ja suunnittelijat ovat tehneet työtä aktiivisesti yhdessä, ei ehdotuksen visuaalisesta ilmeestä pitäisi olla järin suuri yllätys projektissa mukana olleille asiakkaan edustajille. Ongelmaksi muodostuukin monesti se, että tässä vaiheessa asiakkaan puolelta osallistetaan projektin ulkopuolisia henkilöitä.

Projektin ulkopuolisten henkilöiden on yleensä vaikea antaa sivuston suunnitelmasta rakentavaa palautetta, sillä he eivät ole olleet mukana tekemässä valintoja, eivätkä he välttämättä tunne projektin tavoitteita. Ulkopuolisten henkilöiden antama palaute on siten monesti subjektiivista ja perustuu ainoastaan heidän henkilökohtaisiin mieltymyksiinsä tyyliin: “En oikeen pidä vihreästä, sillä se tuo mieleen kaalikeiton, joka on inhokkiruokani”.

Asiakkaan edustajalla on tässä kohdassa tärkeä rooli: hänen pitäisi pystyä saamaan taakseen yrityksen luottamus, jottei jokaista suunnitteluvaihetta tarvitse käyttää hallituksen hyväksyttävänä. Liian monta kokkia, tai niin kuin mainosmaailmassa tavataan sanoa, “Design by committee”, on varma tapa saada koko projektiryhmän aivot riekaleiksi.

Miten designista sitten kannattaa antaa palautetta?

Hyvä palaute on perusteltua. Jos pohjatyö on tehty kunnolla, on designerilla tässä vaiheessa hyvä käsitys yrityksestäsi, brändisi luonteesta ja siitä, mitä webbinäkyvyytesi pitäisi olla. Niinpä designer pystyy tekemään perusteltuja visuaalisia ratkaisuja. Antaessasi palauttetta suunnittelijan työstä sinun pitäisi pystyä perustelemaan loogisin argumentein, miksi toivoisit jonkun asian olevan toisella tavalla, tai mihin suuntaan designia pitäisi viedä. Hyvä palaute on konkreettinen ja helposti ymmärrettävä. Seuraavassa muutama esimerkki:

Esimerkki huonosta palautteesta:

Suunnittelija: “Miltä sivusto vaikuttaa?"

Asiakas: “Joo tämä on kyllä hyvä, mutta jotain tästä uupuu. Näytin kuvaa siskolleni, joka työskentelee sisustussuunnittelijana, ja hän oli samaa mieltä. Jotenkin tämä tulisi saada vietyä nextille levelille"

Esimerkki hyvästä palautteesta:

Suunnittelija: “Käydään ensiksi läpi sivuston ensivaikutelmaa, uskotko että sivusto viestii sitä tunnetta, jota olemme halunneet välittää?"

Asiakas: “Mielestäni alasivuilla kuvamaailma on liian synkkä ja konservatiivinen. Olemme nuori ja eteenpäin menevä organisaatio ja työntekijämme ovat kaikki erittäin energista porukkaa. Haluaisin saman energisyyden välittyvän myös alasivuilla"

Verkkosivujen designin testaaminen

Kun verkkosivujen ensimmäiset leiskat alkavat olla valmiita, kannattaa niitä näyttää myös projektin ulkopuolisille henkilöille. Verkkosivujen ulkoasun testaaminen voidaan jakaa karkeasti kahteen osaan: 1) Emotionaaliseen testaamiseen ja 2) Käytettävyystestaukseen.

Emotionaalisella testauksella tarkoitetaan metodia, jonka avulla voidaan arvioida kohderyhmän tunnetason reaktiota desingniin. Toisin sanoen, emotionaalisen testauksen avulla saadaan tietoa siitä, kuinka hyvin tai huonosti design tuottaa käyttäjässä halutun tunnetason reaktion. Testihenkilöitä voidaan esimerkiksi pyytää sanallisesti arvioimaan ulkoasun herättämää luottamusta asteikolla yhdestä kymmeneen.

Käytettävyystestauksella tarkoitetaan verkkopalvelun käytettävyyden arviointia. Käytettävyystestauksessa ei oteta kantaa palvelun estetiikkaan, vaan etsitään tekijöitä, jotka haittaavat palvelun tavoitteiden mukaista käyttöä.

Tässä blogisarjan osassa käsitellyn suunnitteluvaiheen kanssa päällekkäin tehdään verkkosivujen sisällöntuontantoa, jota tarkastellaan blogisarjan seuraavassa osassa.

Blogisarjan muut osat:

Alkusanat

Osa 1: Tarjouspyynnön tekeminen verkkosivuista & toimijoiden valinta.

Osa 2: Tarjousten vertailu

Osa 3: Konseptisuunnittelu & Käyttöliittymäsuunnittelu

Osa 4: Verkkosivujen sisällöntuotanto

Osa 5: Tekninen kehitys & Testaaminen

Osa 6:  Verkkosivujen julkaisu

Osa 7: Palautteen kerääminen ja verkkosivujen jatkuva kehittäminen

Osa 8: Verkkosivujen tietoturva

Osa 9: Kävijöiden hankkiminen ja digitaalinen markkinointi

Lataa markkinointistrategian opas

Lue seuraavaksi