Inspiraatiota verkkosivujen suunnitteluun: referensseistä parempaan briefiin
Inspiraatiosta on hyötyä vasta, kun siitä tulee päätös
Kauniiden verkkosivustojen selaaminen on helppoa. Niiden muuttaminen paremmiksi tuotepäätöksiksi on vaikeampaa. Vahva verkkosivuston brief ei sano ”tehdään samanlainen kuin tämä palkittu sivusto”. Se kertoo, mitkä osat ovat oikeasti olennaisia: navigoinnin selkeys, tuotetarinan kerronta, luottamusta rakentavat elementit, taiton rytmi, kassaprosessi, typografia tai liike.
Kun inspiraatio jää moodboardin tasolle, lopputuloksena on usein kallista makua ilman selkeää liiketoiminnallista perustetta. Kun se muutetaan päätöksiksi, tiimi pystyy rakentamaan sivuston, joka erottuu ja toimii silti myynnin, hakukoneiden ja mobiilikäyttäjien kannalta.
Aloita liiketoiminnan ongelmasta
Ennen kuin tallennat yhtään referenssiä, määrittele, mitä verkkosivuston pitää parantaa. Palveluyritys saattaa tarvita selkeämmän asemoinnin ja laadukkaampia yhteydenottoja. Verkkokauppabrändi voi tarvita parempaa tuotteiden löydettävyyttä, vahvempaa luottamusta ja mobiilissa toimivan kassan. SaaS- tai sovellusprojekti voi kaivata selkeämpää käyttöönottoa ja suoraviivaisempaa polkua demoon.
Tämä fokus muuttaa sitä, mitä keräät. Verkkokaupassa tutki tuotesivuja, suodattimia, toimitusviestintää ja mobiilikassaa. Palvelusivuilla tarkastele näyttöä tuovia osioita, hinnoittelun selityksiä, usein kysyttyjen kysymysten rakennetta ja yhteydenottolomakkeita. Jos projekti on laajempi, vertaa tarpeitasi verkkosivujen kehityksen ja UI/UX-suunnittelun palvelumalleihin.
Erota visuaalinen maku UX-näytöstä
Referenssi voi olla visuaalisesti vahva ja kaupallisesti heikko. Ennen kuin kopioit taiton, kysy, mikä sen tehtävä on. Kertooko hero-osio, mitä tarjotaan? Näkyykö CTA ilman painostusta? Ovatko asiakastapaukset helppoja silmäillä? Säilyykö mobiilinäkymässä sama argumentti? Ovatko kuvat koristeita vai selventävätkö ne tarjousta?
Käytä yksinkertaista referenssitaulukkoa: mikä toimii, miksi se toimii, missä se voisi epäonnistua ja sopiiko se sinun kohdeyleisöllesi. Näin keskustelu pysyy poissa henkilökohtaisista mieltymyksistä ja lähempänä mitattavia päätöksiä.
Käytä referenssejä rajoitteiden määrittelyyn
Paras inspiraatio paljastaa usein rajoitteita, ei koristeita. Ehkä sivusto tarvitsee vähemmän valikkokohtia. Ehkä typografian on taivuttava pitkiin viron- tai venäjänkielisiin sanoihin. Ehkä tuotekorteissa tarvitaan enemmän tilaa toimitus- ja maksutiedoille. Ehkä animaatioita kannattaa rajoittaa, koska nopeus on tärkeämpää kuin näyttävyys.
Nämä rajoitteet kannattaa kirjata briefiin ennen suunnittelun alkua. Ne auttavat suunnittelijaa valitsemaan visuaalisen järjestelmän, joka skaalautuu laskeutumissivuille, blogiartikkeleihin, palvelusivuille ja tuleviin kampanjoihin.
Kokoa referenssisarja, älä kollaasia
Hyödyllinen sarja sisältää yleensä viidestä kymmeneen esimerkkiä, joilla kullakin on oma roolinsa: yksi rakenteelle, yksi sävylle, yksi typografialle, yksi näytölle, yksi mobiilipolulle ja yksi konversiolle. Älä sekoita liian monta toisiinsa liittymätöntä tyyliä. Asianajotoimisto, muotiliike ja kryptovaluutan laskeutumissivu voivat kaikki näyttää vaikuttavilta, mutta yhdessä ne johtavat usein sekavaan suuntaan.
Paikallisille yrityksille kannattaa ottaa mukaan myös käytännön referenssejä omalta toimialalta. Visuaalisesti hillitympi kilpailija voi silti ratkaista luottamuksen, toimitukset, kielivalinnan tai hinnoittelun paremmin kuin kansainvälinen palkittu sivusto.
Muuta inspiraatio briefiksi
Lopputuloksen pitäisi olla lyhyt luova ja UX-brief: kohdeyleisö, ensisijainen konversio, tarvittavat sivut, tarvittava näyttö, sisältöaukot, visuaalinen suunta, tekniset rajoitteet ja analytiikkasuunnitelma. Tällainen brief on arvokkaampi kuin kansiollinen kuvakaappauksia.
Major Source käyttää referenssejä yhteisen näkemyksen nopeuttamiseen, ei oikotienä kopiointiin. Jos sinulla on jo esimerkkejä, joista pidät, ota ne mukaan ensimmäiseen keskusteluun. Erotamme maun toiminnallisuudesta ja muutamme hyödylliset osat verkkosivuston suunnaksi, jonka voi suunnitella, rakentaa ja mitata.
Jotta referenssit pysyvät todellisuudessa, vertaa briefiä referensseihimme ennen visuaalisen suunnan lukitsemista.
Miten arvioida, onko referenssi relevantti
Hyödyllisen referenssin pitäisi vastata käytännön kysymykseen. Ratkaiseeko se navigoinnin laajassa palveluvalikossa? Tekeekö se teknisestä tarjouksesta helposti ymmärrettävän? Näyttääkö se näyttöä hidastamatta sivua? Pysyykö CTA näkyvissä mobiilissa? Jos referenssi näyttää vaikuttavalta vain työpöydän kuvakaappauksessa, siitä ei välttämättä ole apua varsinaisessa projektissa.
Ennen suunnan hyväksymistä katso sama referenssi mobiilissa, tarkista, kuinka nopeasti ensimmäinen näkymä selittää tarjouksen, ja merkitse, mitkä osat vaativat räätälöityä sisältöä tai valokuvausta. Näin visuaalinen suunta ei ole riippuvainen materiaaleista, joita yrityksellä ei ole.
Muuta referenssit briefiksi
- Listaa UX-malli, jonka haluat lainata – älä pelkkää visuaalista tyyliä.
- Määrittele, mitkä osiot tarvitsevat todellista projektinäyttöä tai kuvakaappauksia.
- Päätä, minkä elementtien on pysyttävä nopeina ja helposti muokattavina sisällönhallintajärjestelmässä.
- Yhdistä visuaalinen suunta verkkosuunnittelun Tallinnassa tavoitteisiin ja mitattaviin konversioaskeliin.
Käyttöliittymäpainotteisissa tuotteissa referensseistä kannattaa tehdä jäsennelty UI/UX-suunnittelutoimiston brief: käyttäjäpolut, rautalankamallit, prototyyppipäätökset ja luovutussäännöt.
Jos referenssit koskevat kaupallista paikallista verkkosivustoa, yhdistä moodboard konkreettiseen verkkosuunnittelu Tallinnassa -briefiin: tarjous, näyttö, mobiilipolku, SEO-sivut ja CTA:iden mittaaminen.
