Verkkosivujen design, konseptisuunnittelu ja käyttöliittymäsuunnittelu
Tämä on verkkosivuston ostamista käsittelevän sisällön 3. osa. Lue koko blogisarja yhdestä oppaasta: Lataa verkkosivuston ostajan opas
Edellisissä blogisarjan vaiheissa tutustuimme tarjouspyynnön laatimiseen verkkosivuista sekä sopivan toteuttajan valintaan. Tässä osassa käymme läpi verkkosivuston suunnitteluvaihetta.
Samalle sivulle tavoitteissa ja viestissä
Jokaisella toimistolla oma prosessi verkkosivustoprojektille, ja sinun tehtäväsi on pyytää toimistoa kuvailemaan kehitysprosessinsa jo tarjousvaiheessa. Tällä tavoin tiedät etukäteen, miten projekti etenee ja kuinka paljon resursseja sinulta ja organisaatioltasi vaaditaan missäkin kehitysvaiheessa.
Oleellista aloitusvaiheessa (sprintti, workshop tai aloituspalaveri), on kirkastaa visio ja tavoitteet. Tarjousvaiheessa mietitty visio tarkentuu yleensä heti, kun yhteistyö ammattimaisen toimiston kanssa on aloitettu. Riippuen siitä millaisia brändimateriaaleja sinulla on käytössäsi, tehdään aloitusvaiheessa yleensä brändityötä: brändiin, viestintään, ja myyntiin liittyvää ajatustyötä.
Ennen kuin edetään sivuston rakenteen hahmotteluun ja ulkoasun suunnitteluun, tulee sivustoa toteuttavien huolehtia kanssasi siitä, että seuraavat asiat on selvitetty:
- yrityksesi ja tuotteesi positiointi markkinoilla ja kilpailuetusi
- mikä nykyisillä verkkosivuilla on toimivaa ja mikä ei
- yrityksen sisältöstrategia ja viestinnälliset tavoitteet
- verkkosivujen laajuus
- yrityksen eri osastojen tarpeet verkkosivuihin liittyen (HR, talous, IT jne.)
- verkkosivuston käyttäjäpersoonat
- verkkosivuston käyttöskenaariot
Verkkosivujen käyttöliittymäsuunnittelu ja sivuston hahmottelu
Sketching, wireframing, prototyping, papertesting – vision kirkastamista seuraavalla vaiheella on monta nimeä. Sivuston wireframet hahmottelemalla, eli piirtämällä palvelun käyttöliittymästä yksinkertainen rautalankamalli, voidaan sivuston toiminnallisuutta ja logiikkaa testata ennen kuin muutoksia lähdetään toteuttamaan.
Huomioithan, että rautalankavaiheessa ei oteta kantaa esimerkiksi sivuston visuaalisiin elementteihin, kuten väreihin ja kuviin, vaan oleellisempaa on suunnitella sivuston hierarkia ja priorisoida sisältöä.
Annetaan esimerkki.
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 rautalankamallin hierarkiassa alemmaksi, ja paukkuja käytetään enemmän kesämökkien ja maansiirtopalveluiden tuotesivuihin.
Verkkosivujen visuaalinen suunnittelu
Rautalankamallien jälkeen aloitetaan sivuston visuaalinen suunnittelu. 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 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ä taide 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.
“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
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.
Palautteen antaminen verkkosivuston 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 aikaan riittävän laimea ja mauton kompromissi vähiten ärsyttämään kaikkia osallistujia.
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ä näkyvyytesi verkossa pitäisi olla. Niinpä designer pystyy tekemään perusteltuja visuaalisia ratkaisuja.
Antaessasi palautetta 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 olemme erittäin energistä porukkaa. Voisiko sama energisyys välittyä 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 voidaan arvioida kohderyhmän tunnetason reaktiota designiin. Toisin sanoen, emotionaalisen testauksen avulla saadaan tietoa siitä, kuinka hyvin tai huonosti design tuottaa käyttäjässä halutun reaktion. Testihenkilöitä voidaan esimerkiksi pyytää sanallisesti arvioimaan ulkoasun herättämää luottamusta asteikolla yhdestä kymmeneen.
Käytettävyystestaus on 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öä.
Suunnitteluvaiheen kanssa samanaikaisesti tehdään verkkosivujen sisällöntuotantoa, jota tarkastellaan seuraavaksi.
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: Blogisarja verkkosivuston ostamista suunnitteleville
Osa 1: Tarjouspyyntö verkkosivuston suunnittelusta ja toteutuksesta
Osa 2: Verkkosivuprojektin tarjousten vertailu ja toimittajan valinta
Osa 3: Verkkosivujen design, konseptisuunnittelu ja käyttöliittymäsuunnittelu
Osa 4: Verkkosivujen sisällöntuotanto
Osa 5: Verkkosivujen tekninen kehitys ja testaaminen