Seitsemän parasta käytäntöä verkkokaupan sivuston suunnittelussa

Kuluttajilta kestää noin 50–100 millisekuntia muodostaa mielipiteensä verkkosivusta.

Ensivaikutelma verkkokaupassa on äärimmäisen tärkeää.

Square-verkkopalveluyhtiön taannoisen tutkimuksen mukaan 85 % kuluttajista pitää yrityksen verkkokaupan sivustoa tärkeänä asiana. Ja jos verkkokaupan kohderyhmään sattuu kuulumaan milleniaaleja tai Sukupolvi Z:n edustajia, verkkosivuston oleellisuus nousee jopa 91 %:n tasolle.

On tärkeää varmistaa, että asiakkaiden käyttökokemus verkkosivusta on hyvä. Tätä tarkoitusta varten olemme keränneet tähän seitsemän parasta käytäntöä verkkosivujen designista. Nämä on hyvä ottaa huomioon, kun suunnittelee verkkosivua – erityisesti, jos kyseessä on verkkokaupan kotisivu.

1. Yhtenäinen kuluttajakokemus

Jos asiakkailla on jo jonkinasteinen käsitys tuote§merkistäsi, he odottavat, että verkkosivut seuraavat tätä brändäystä. Sivuston look & feelin tulee olla yhtenäinen yrityksen yleisen tyylin kanssa. Et todellakaan halua, että vierailijat saapuvat verkkosivustolle ja alkavat ihmetellä, ovatko he saapuneet oikeaan paikkaan.

Verkkosivujen ulkonäön ja toiminnallisuuden suunnittelun täytyy noudattaa markkinoiden monikanavaisuuden periaatteita. Asiakkaan vierailunsa aikaisen kokemuksen täytyy olla konsistenttiä niin kaikissa digitaalisen maailman kuin myös fyysisen maailman kanavissa.

Esimerkiksi niinkin yksinkertaisen asian kuin yrityksen logon täytyy olla selvästi näkyvillä sivustolla. Verkkokauppoja, joissa firman logo on piilossa, on aivan liian monta. Ja vaalien alla löytyy taatusti useita ehdokkaita, jotka eivät ymmärrä puolueensa logon esilletuontia.

Sivuston värimaailman täytyy olla yhtenäinen ja noudattaa tuotemerkkiin suunniteltua värimaailmaa. Mikäli tuotemerkille ei ole vielä saatu muodostettua omaa väripalettia, sellaisen voi luoda helposti esimerkiksi Coolors-palvelussa (https://coolors.co/).

Monikanavamarkkinoinnin strategiaa on hyvä noudattaa myös muutenkin verkkosivustolla. verkkosivustolla täytyy esimerkiksi noudattaa samaa tekstin tuottamisen tyyliä kuin muussa viestinnässä. Jos brändin filis on rento, samaa on hyvä noudattaa myös verkkosivustolla. Jos taas ollaan asiaan keskittyneitä, ei verkkosivustolla kannata irrotella. Kun linja on yhtenäinen, sitä on helppo noudattaa myös sosiaalisessa mediassa, asiakaspalvelussa, chatissa ja videotyökaluissa.

2. Siisti ja yksinkertainen design

Verkkosivuston designissa yksi sääntö on ylivoimainen: yksinkertainen on kaunista. Adoben tuoreen tutkimuksen mukaan mitä yksinkertaisempi ja selkeämpi on kotisivu, sitä paremmin käyttäjät viihtyvät siellä. Sivuston luojille tulee helposti kiusaus lisätä tekstiä, kuvia, faktalaatikoita ja muita elementtejä ympäri sivustoa. Tämä menettely kuitenkin ylikuormittaa hyvin helposti vierailijat.

Verkkokaupan kotisivun suunnittelussa on hyvä noudattaa samaa periaatetta kuin fyysisen kaupan suunnittelussa. Vaikka näyteikkunaa tarvitaan, ei aivan kaikkea parasta materiaalia kannata tunkea asiakkaiden näkyville saman tien. Asiakkaat pystyvät keskittymään parhaiten Kolmeen pointtiin – tämä tarkoittaa kolmea viestiä. Kun nämä yhdistää tätä tukevaan grafiikkaan, ollaan jo pitkällä.

Älä myöskään unohda taukojen merkitystä. Tauot verkkosivun designissa tarkoittavat tyhjää (ts. negatiivista) tilaa. Tämä tasapainottaa verkkosivua ja minimoi häiriöitä. Näin sivustolla vierailevat asiakkaat pystyvät omaksumaan paremmin viestintääsi. Helppo temppu on myös tuoda tuotteiden ominaisuudet esille ranskalaisilla viivoilla.

3. Korkeatasoiset valokuvat

Vanha sanonta siitä, että yksi kuva kertoo enemmän kuin tuhat sanaa pitää täysin paikkaansa. Alalta löytyy lukuisia tutkimuksia, jotka kertovat kaikki samaa: valtaosa kuluttajista pitää sivustolta löytyviä kuvia tärkeinä ja myöntää suoraan, että ne vaikuttivat ostopäätöksen tekemiseen.

Kuvia kannattaa käyttää noudattae ”näytä, älä kerro” -periaatetta. Jos asiakas harkitsee vakavissaan tuotteen hankkimista, häntä palvelee erinomaisesti se, että tuotteesta on tarjolla kuvia useista kuvakulmista. Näiden tekeminen voi olla hieman työlästä, mutta tulokset ovat ehdottomasti vaivan väärtejä.

Tuotteiden kuvaamisessa kannattaa ottaa huomioon pelkkien kuvakulmaerojen lisäksi myös yksityiskohtien korostaminen. Nämä auttavat asiakasta kiinnittymään henkisesti tuotteeseen.

Valokuvien laadussa ei kannata säästellä. Freelancer-valokuvaajia saa nykyään palkattua sen verran halvalla, että tämä on ehdottomasti parempi vaihtoehto kuin alkaa investoida omaan digitaaliseen valokuvauslaitteistoon. Semminkin kun valokuvauksessa valaistus merkitsee lopputuloksen kannalta paljon enemmän kuin kamera.

Verkkokaupan kannalta kuvilla on myös yksi yllättävä merkitys: hyvät ja rehelliset kuvat auttavat vähentämään tuotepalautuksia. Adoben tutkimuksen mukaan jopa viidesosa tuotepalautuksista tehdään sen takia, että tuote on käytännössä erilainen kuin miltä se näytti kuvissa.

4. Tekijänoikeuksina Creative Commons

Valokuvaajan kanssa kannattaa solmia myös hyvä tekijänoikeussopimus. Esimerkiksi Creative Commons Attribution mahdollistaa kaikkia osapuolia tyydyttävän lopputuloksen.

Creative Commons -lisenssillä sekä asiakkaalla, että verkkokaupan ylläpitäjällä on oikeus käyttää kuvia haluamallaan tavalla ilman rajoituksia. Valokuvaajalle on arvokas asia, että hän pystyy pitämään ottamiaan kuvia portfoliossaan.

Creative Commons Attribution tarkoittaa myös sitä, että halutessaan kummatkin osapuolet pystyvät käyttämään kuvia muiden teosten osina. Tämä saattaa nopeasti kuullen kuulostaa huolestuttavalta, mutta asian suhteen ei kannata olla mustasukkainen. Jos oma tuote on visuaalisesti hyvä, on verkkokauppiaalle itse asiassa vain eduksi, jos se esiintyy myös muissa yhteyksissä.

”There is no such thing as bad publicity” – huonoa julkisuutta ei ole olemassakaan.

5. Helppo navigointi

Jos kuvat ovat tärkeitä verkkokaupan ja verkkosivuston suunnittelussa, ne jäävät kuitenkin kakkossijalle kaikkein tärkeimmälle asialle: navigaatiolle. Hubspot-markkinointityökaluyhtiön mukaan kolme neljännestä asiakkaista pitää verkkosivuston käytettävyyttä kaikkein tärkeimpänä asiana. He haluavat, että sivustolta on helppo löytää se, mitä sieltä tultiin hakemaan.

Sivuston suunnittelijan kannalta navigaatio tarkoittaa yksinkertaisimmillaan sitä, että asiat löytyvät sieltä, mistä asiakas olettaa niiden löytyvän. Näin verkkokaupan asiakkaat eivät eksy siirtyessään sivulta toiselle.

Oleellinen osa navigaatiota on navigaatiopalkki. Sen suhteen ei kannata lähteä kikkailemaan. Navigaatiovalikon on löydyttävä luontevalta paikalta sivustoa. Esimerkiksi ylälaidasta, jommastakummasta yläkulmasta tai sivupalkista. Ei ole myöskään liioiteltua käyttää navigointipalkissa selkeitä värejä ja suuria kontrasteja.

Jos ja kun verkkokaupan sivuston pohjana käyttää jotain valmista pohjaa, näissä navigaatiopalkki on yleensä hyvin suunniteltu. Ja vielä parempi on se, jos navigaatiopalkki on aina näkyvissä, kun asiakas kelaa sivua ylös- ja alaspäin.

Toki navigaation saa myös rikki kikkailemalla termeillä. Näin ei kannata tehdä, ei vaikka hipsteridesigneri-ideologiasta miten innostuisi. Eli puhu reilusti tuotteista tai ratkaisuista, älä kehittele luovia termejä kuten ”avarakatseisten valikoimat”.

Sivuston navigatiossa ei kannata myöskään aliarvioida hakutoiminnon tarvetta. Jos sivuston asiakas äityy kirjoittamaan sinne hakusanan, se kertoo sivuston ylläpitäjälle paljon. Ensinnäkin varsinaisen tekstimuotoisesti haettavan asian. Toiseksi tämä ilmaisee sen, että kyseistä asiaa ei sivulta löydy riittävän selkeästi ilman hakutoimintoa.

6. Kehotus toimintaan

Markkinoinnissa ei turhan takia kehoteta asiakkaita toimintaan ja tekemään päätöksiä ilman viiveitä. Taktiikka yksinkertaisesti toimii. Samaa kannattaa noudattaa myös verkkosivulla. Toimintakehotusten tulee olla selkeitä ja yksinkertaisia. Ne voivat olla esimerkiksi ostokehotuksia, markkinakampanjan hyödyntämiseen kutsuja tai ajan varausta demoon.

Toimintakehotusten suhteen kannattaa seurata ostamisen psykologiaa ja värejä. Erityisesti oranssit ja punaiset värit tehoavat toimintakehotuksissa hyvin.

Värien lisäksi myös kontrastin miettiminen on tärkeää. On oleellista, että toimintakehotuksien napit ja muut elementit erottuvat sivustosta ja kiinnittävät verkkokaupan asiakkaan huomion. Käytä siis luonnollisia vastavärejä ja varmista, että elementtien tekstit ovat selkeästi luettavissa.

Tekstit luonnollisesti täytyy miettiä tarkasti. Niiden tulee olla sellaisia, että asiakkaat saavat näistä nopeasti kiinni ja pystyvät hyödyntämään niitä. Tekstien tulee vastata kysymyksiin kuten ”missä on asia X?”, ”Miten teen X:n?”. Hyviksi koettuja toimintakehotuksien tekstejä ovat esimerkiksi ”tilaa uutiskirje” ja ”lisää ostoskoriin”.

7. Responsiivinen design

Vuonna 2020 jo puolet internet-liikenteestä on mobiilia ja vuonna 2021 tämän osuuden odotetaan vain nousevan. Verkkokaupan on aivan välttämätöntä tukea mobiilia käyttöliittymää käyttäviä asiakkaita hyvin. Avainsana tähän on responsiivinen desing.

Responsiivinen design tarkoittaa sitä, että verkkosivusto mukautuu automaattisesti selailijan päätelaitteen mukaan. Isolla tietokonenäytöllä voidaan esittää paljon tavaraa kerralla. Pienellä kännykällä sivustoa selaavalle puolestaan esitettään vähemmän elementtejä ja sivustoa voi joutua rullaamaan enemmän ylös ja alaspäin. Oleellista on se, että lukeminen on helppoa, eikä asiakas joudu manuaalisesti suurentelemaan tai pienentämään sivustoa, jotta pystyisi näkemään sen sisällön.

Suurin osa valmiista sivupohjista tukee onneksi responsiivista designiä jo luonnostaan. Tähän kannattaa noudattaa Ronald Reaganin periaatetta: usko, mutta testaa.

Mobiilikäyttäjiä kannattaa myös pitää mielessä siinä, että pitää sivuston graafiset elementit järkevän kokoisina. Kissmetricsin tutkimuksen mukaan sivuston käyttäjät tyypillisesti odottavat, että sivusto latautuu alle kolmessa sekunnissa. Google puolestaan opastaa meitä kertomalla, että asiakkaat kaikkoavat hyvin nopeasti sivustoilta, joitten lataaminen kestää yli kymmenen sekuntia.