Miten verkkokauppaan saadaan tyylikäs ja helppokäyttöinen ulkoasu? Epages-verkkokaupassa on lukuisia valmiita ulkoasupohjia, joita on hyvä hyödyntää. Jos haluat sivustostasi yksilöllisen ja näyttävän, voidaan tämä tehdä pienillä muutoksilla. Tässä on muutamia vinkkejä ulkoasun suunnitteluun.
Hahmottele rakenne
Ulkoasun suunnittelussa auttaa paljon jos ensinnäkin tiedät, millaisen ulkoasun haluat. Aloita hahmottelemalla sivuston rakennetta ja ulkoasua ensin vaikka kynällä ja paperilla. Voit jatkaa kuvankäsittelyohjelmalla ja tehdä tarkan luonnoksen sivuston ulkoasusta. Fonttien värien ja asemoinnin muuttaminen onnistuu usein tällä keinolla helpommin ja nopeammin kun saat käsityksen, mikä näyttää mielestäsi hyvältä. Tämän jälkeen lähteä tutkimaan verkkokaupan hallinnasta miten mikäkin asia tehdään käytännössä. Yleensä teknisiä rajoituksia ei kovin helposti tule vastaan, vaan asia voidaan hoitaa jollain tavalla.
Ulkoasun suunnittelussa auttaa myös jos vertailee ensin vähän kilpailevia sivustoja. Eli voit hakea googlesta oman kauppasi tuotteita käsitteleviä verkkosivuja ja -kauppoja suomeksi ja englanniksi, ja poimia näistä hyviä ideoita ja miettiä mitkä niistä toimisi omassa kaupassasi.
- Selaile saman alan/aihepiirin verkkosivuja ja mieti mikä niiden ulkoasussa on hyvää
- Mitä ideoita voisit käyttää omalla sivustollasi?
- Mieti mitkä sivupalkit otat käyttöön (vasen, oikea, ylä ja ala)
Käytettävyys ensin!
On tärkeää ymmärtää, miten sivustolla olevat eri osat vaikuttaa kokonaisuuteen ja helppokäyttöisyyteen. Valitse värit siten, että ne sointuvat yhteen ja pidä värien määrä pienenä. Värityksellä voidaan korostaa jotain elementtiä (esim "Tilaa nyt" linkkiä) ja saada tällä tavalla asiakkaan huomio kiinnitetyksi tärkeisiin kohtiin. Jos samalla korostuksella on sivulla kymmeniä linkkejä eri paikoissa tehosteen huomioarvo pienenee olemattomaksi. Verkkokaupan ulkoasun suunnittelussa joutuu tasapainoilemaan näyttävän ulkoasun ja hyvän käytettävyyden kanssa. Jos tilaus-linkkiä ei huomaa koristeellisten kuvien seasta, on menty metsään.
- Asettele tuoteryhmät, navigointilinkit ja ostoskorilaatikko siten, että ne löytyy helposti. Jos jokin vähemmän tärkeä elementti häiritsee käytettävyyttä, siirrä se sivummalle tai poista kokonaan
- Muista, että kuitenkin tärkein asia on käytettävyys ja tärkeiden linkkien helppo löydettävyys. Päätä ensin sivuston rakenne ja ryhdy vasta sitten miettimään millä keinoilla siitä tehdään näyttävä.
- Testaa kaupan käytettävyyttä jollakin ulkopuolisella, joka ei vielä tunne kauppaasi. Katso osaako hän tehdä tilauksen ja löytääkö hän tarvittavat tiedot ja toiminnot. Kysele parannusehdotuksia testauksen jälkeen.
Valitse värit huolella
Värien määrä on syytä pitää pienenä sivun hahmottamisen ja selkeyden parantamiseksi. Sisältöalueen taustaväri voi hyvin olla valkoinen ja teksti saa olla mustaa. Tämä helpottaa lukemista ja asiallinen väritys lisää kaupan luotettavuutta. Tämä ei kuitenkaan tarkoita, että ulkoasun pitäisi olla tylsä; jo yksikin oikein valittu ja sijoitettu kuva voi tehdä sivusta ilmeikkään. Otsikot ja linkit saavat olla muunkin värisiä kuin mustia, näin niille voidaan saada lisää huomioarvoa.
Sivustolle voidaan valita 2-3 pääväriä joita käytetään. Mustaa ja valkoista ei lasketa näihin, eikä harmaan sävyjä. Päävärit voidaan valita esimerkiksi logossa käytetyistä väreistä, näin logo saadaan sulautumaan luontevasti sivulle. Päävärien lisäksi voit valita apuväreiksi haaleampia sävyjä, joita käytät laajemmilla pinnoilla, kuten taulukoiden taustaväreinä tms. Valitse apuväri värinvalitsimella ottamalla ensin pääväri ja sitten siirtämällä kursoria kohti valkoista kulmaa, kunnes lähtopisteestä valkoiseen on enää noin 1/5 välistä. Kuvankäsittelyohjelmalla saman voi tehdä tekemällä värikaadon 20% läpinäkyvyydellä.
Tallenna kaikki päävärit ja apuvärit värivalitsimen oletuksiin. Näin sinun ei tarvitse muistella niiden heksa-arvoja eikä sinulle tule isoa kirjoa "melkein samoista sävyistä". Värien tallentaminen tapahtuu valitsemalla värikartasta oikea sävy (tai syöttämällä värin heksa-arvo) ja raahaamalla värin esikatseluruudusta sen "Käyttäjän määrittelemät värit" otsikon alla oleviin laatikoihin.
- Valitse 2-3 pääväriä sekä tarvittaessa niille apuvärejä
- Talleta valitsemasi värit muistiin, että löydät myöhemmin oikean sävyn helposti
- Tee otsikot, linkit ja taustavärit käyttämällä tallettamiasi värejä
Fontit ja otsikot
WWW-sivustolla käytössä olevien fonttien määrä ei ole kovin suuri johtuen siitä, että fontti pitää olla kaikilla käyttöjärjestelmillä saatavilla. Kaupan hallinnassa valittavat fontit ovat siitä turvallisia, että ne löytyvät varmasti kaikilta sivulle tulijoista ja ne näkyy kaikilla samalla tavalla.
Valitse mitä fonttia käytät ja talleta ne ulkoasun hallinnassa. Kun teet tuotteen kuvaustekstejä, etusivun uutisia yms. tekstieditorissa on mahdollisuus valita oma fontti jokaiseen tekstikappaleeseen erikseen. Pyri kuitenkin välttämään tätä, vaan käytä vain globaaleja fontteja, jotka valitaan ulkoasun hallinnassa. Näin saat sivuista yhtenäisen, saat niistä helposti muokattavan (ei tarvitse muokata jokaista sivua erikseen) ja sivujen lähdekoodi pysyy parempana (sivut ovat kevyempiä ladata ja eri selainten välillä olevat eroavaisuudet vähenevät). Yleensä on hyvä käyttää samaa fonttia kaikissa sivupalkeissa, mutta oman harkinnan mukaan voit valita esimerkiksi sivupalkkiin eri fontin kuin sisältöalueelle. Valitse fontin kooksi riittävän iso kirjasin, että tekstiä on helppo lukea isojakin määriä.
Leipätekstin on siis hyvä olla väriltään musta. Otsikoille voit valita käytettäväksi muitakin värejä, mieluiten tietysti jokin valitsemistasi pää- tai apuväreistä yhtenäisyyden säilyttämiseksi. Myös harmaan sävyjä voi käyttää. Valitse otsikkotasoille 1,2 ja 3 eri värit, jotta niiden eron huomaa.
- Valitse fontit ja tallenna ne ulkoasun asetuksiin
- Vältä fonttien muokkausta eri tekstikappaleissa, vaan käytä globaaleja fonttiasetuksia
- Varmista, että pitkätkin tekstikappaleet ovat helppolukuisia
Linkit
Valitse keino jolla korostat linkkejä. Sivupalkeissa voidaan tarvittaessa käyttää erilaisia korostuksia kuin sisältöalueella. Alleviivaus on yleisesti käytössä oleva keino ja siksi alleviivatun tekstin huomaa helposti linkiksi. Myös värillä voi korostaa linkkiä, mutta vältä korostamasta linkkiä esimerkiksi otsikoissa käyttämälläsi värillä, jotta käyttäjä selvästi erottaa mikä teksti on linkki ja mikä ei. Aktiivisia linkkejä, eli kun käyttäjän kursori on linkin päällä, voi korostaa esimerkiksi hieman voimakkaalla värisävyllä kuin normaalit linkit. Tällä saadaan linkin painamisesta houkuttelevampaa. Älä tee aktiiviselle linkille lihavointia ilman, että myös ei-aktiivinen linkki olisi lihavoitu.
- Tee linkeille sopiva väritys tai alleviivaus, että käyttäjä huomaa sen linkiksi ilman erillistä hiiren päällevientiä
- Aseta tarvittaessa aktiiviselle linkille voimakkaampi väri, jotta linkistä tulee houkuttelevampi
Kuvat
Kuvat tekevät merkittävän osan sivun ulkoasusta. Pienelläkin fiiliskuvalla oikeassa paikassa voit tehdä sivusta hetkessä näyttävämmän. Kuvaa valitessa kannattaa huomioida siinä näkyvät värit ja niiden sopivuus sivuston värimaailmaan. Kuvankäsittelyohjelmalla voi kuvan värisävyjä jonkin verran muuttaa sivun värejä vastaavaksi. Kuvien hyviä sijoituspaikkoja ovat etusivun sisältöalueen ylälaita tai yläpalkki, jolloin kuva näkyy myös alasivuilla. Myös sivupalkit ovat joskus hyviä paikkoja, mutta silloin niihin on hyvä liittää toiminnallisuuksia. Kuva voi toimia esimerkiksi bannerina tarjoustuotteisiin, uutisiin tms.
Tuotekuvat ovat yksi merkittävä kaupan ulkoasun luoja. Lisää etusivulle muutamia suosituimpia tuotteita. Jos tuoteryhmiä on monessa tasossa, voi tuoteryhmäsivulla ennen alatuoteryhmiä olla pari-kolme tuotetta nostettuna esiin.
Fiiliskuvien ei tarvitse välttämättä liittyä kaupan aihepiiriin mitenkään, ne toimivat enemmänkin tunnelmanluojina. Kuvien valinta voi olla vaikeaa, mutta siihen kannattaa panostaa. Netissä on lukuisia kuvapankkeja, joista voi etsiä sopivaa kuvaa. Kuvat ovat yleensä maksullisia, mutta web-tasoisen kuvan saa yleensä jo parilla eurolla. Kuvien valinnassa kannattaa kiinnittää huomiota värien ja tunnelman lisäksi mittasuhteisiin. Jos lisäät kuvaa sivun yläpalkkiin, pitää kuva olla rajattuna - tai ainakin rajattavissa - riittävän leveään ja matalaan kuvasuhteeseen.