Ohjeet MyCashflow-teeman suunnitteluun teemakauppaan

Alkusanat

MyCashflown tavoitteena on olla mahdollisimman helppokäyttöinen ja korkeatasoinen verkkokauppaohjelma. Sama tavoite on asetettu myös teemoille, joita myydään MyCashflown teemakaupassa.

Meidän mielestämme hyvä käytettävyys tulee aina ennen näyttävää ulkoasua. Haluamme, että verkkokauppaa on asiakkaan helppo ja vaivaton käyttää. Arvostamme myös suuresti hienoa ulkoasua, mutta tässä tärkeysjärjestyksessä.

Tämän dokumentin tarkoitus helpottaa teeman suunnittelijaa sen teossa. Teemaan liitty paljon pieniä yksityiskohtia joita tulee ottaa huomioon. Kun teema on tehty oikein, se toimii vielä useammankin vuoden kuluttua ja tukee tällöin uusia ominaisuuksia. Oletamme myös, että teeman suunnittelija ei ole noviisi websuunnittelussa. Tämän takia emme keskity perusasioihin.

Teeman suunnittelu teemakauppaan

Kohderyhmän valinta

Ensimmäisenä kannattaa pysähtyä miettimään mille kohderyhmälle haluat suunnitella kaupan, valokuvaliikkeelle, vaatekaupalle, autotarvikkeille, musiikille vai ehkä taiteelle? Mitä tuotteita myydään paljon verkossa, mitä ei vielä myydä paljon mutta olisi ehkä myyntipotentiaalia?

Onko kohderyhmä pääasiassa nais- tai miesasiakkaita vai ehkä molempia? Minkä ikäisiä asiakkaat ovat? Tulevatko asiakkaat Suomesta tai joltain muulta melko tarkalta maantieteelliseltä alueelta? Haluatko tehdä hyvin neutraalin yleisteeman vai tarkkaan tietylle asiakasryhmälle kohdennetun? Oma kokemuksemme on, että tarkemmin kohdennetut teemat myyvät paremmin.

Kaupan sisällön jäsentely ja rakenne

Verrattuna nettisivujen suunnitteluun, verkkokaupassa on paljon enemmän eri näkymiä ja elementtejä joille kannattaa miettiä paikat jo suunnittelun alkuvaiheessa. Luonnostelua kannattaa tehdä vaikka wireframien avulla.

Kaupassa on pakollisia sivuja, joille täytyy tehdä omat pohjat teemaan. Ne voivat olla enemmät tai vähemmän samanlaisia ilmeeltään, mutta nämä pitää löytyä.

  • Etusivu (homepage.html)
  • Näyteikkuna (category-front.html)
  • Tuotelista (product-list.html)
  • Tuotekortti (product.html)
  • Sisältönäkymä (template.html)
  • Hakunäkymä (search.html)

Kaupassa on paljon valinnaisia näkymiä joita kannattaa myös kustomoida. Näitä on mm. ostoskori, kassa, uutiset, infosivu, tuotemerkkisivu ja 404-virhesivu. Voit lukea tarkemmin sivupohjista MyCashflown interface-oppaasta.

Alla on listattuna esimerkkinä mitä kaupan etusivulla voisi olla. Samaa pohjaa voi käyttää pitkälle muillakin sivuilla.

  • Sivujen yläosassa
    • Kaupan logo
    • Hakukenttä
    • Ostoskori
    • Kielivalikko
  • Sivupalkissa
    • Päävalikko
    • Asiakastilin navigaatio
  • Keskiosassa
    • Ylhäällä banneripaikka kampanjoille
    • Mainostettavia tuotetta
    • Uusia tuotteita
  • Sivujen alaosassa
    • Infosivujen ensimmäisen tason listaus
    • Viisi uusinta uutisotsikkoa
    • Toinen banneripaikka
    • Copyright-tekstit

Tätä pohjaa voidaan sitten soveltaa vaikka tuotesivuun. Etusivusta poiketen tuotesivulla voisi näkyä keskiosassa tuotteen tiedot. Sen alapuolelle sopisi yhteensopivat ja samankaltaiset tuotteet.

Tekniset vaatimukset

Sivujen ulkoasun suunnittelun voi toteuttaa haluamallaan tavalla ja ohjelmalla. Lopputuloksen on oltava toimiva HTML-sivu, joka täyttää tekniset vaatimukset. Voit katso mallia oletusteemasta tai jo aiemmin tehdyistä kaupoista. Myös kilpailijoiden teemakauppoja kannattaa vakoilla.

Oletusteema ja sen eri variaatioit löytyvät GitHubista. Sieltä löytyy yleensä myös uusimmat versiot JavaScripteistä ja niiden eri toteutuksista.

Koodi validia

HTML-koodin on oltava validia. HTML merkkausversion voit valita itse. Myöskään CSS-tiedostossa ei saa olla kriittisiä virheitä. Selaintoimittajien etuliitteet ja yleisesti tunnetut selainfiltterit sallitaan.

Koodin on oltava yleisesti ottaen siistiä ja rakenteeltaan selkeää. Koodi tulee kommentoida hyvin jotta sitä on helppo muokata. Käytä kommentoinnissa englantia ja yleisesti käytössä olevia termejä kuten header, sidebar ja footer.

JavaScript pitää toimi virheittä. Koodi pitää tarkistaa JavaScript Lintin avulla, joka tarkistaa koodin hieman perusteellisimmin. Koodi pitää olla yleisesti selkeää ja johdonmukaista. Suositeltavaa on, että noudatetaa esimerkiksi jQueryn style guidea.

Yleisimmät muotoilutagit

Varmista, että kaikki yleisimmät muotoilutagit on määriteltynä tyylitiedostossa. Näitä ovat mm. h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset ja address. Tällä varmistetaan se, että tekstit ja eri elementit näyttävät samalta koko teemassa.

Lomakkeet

Kaikki verkkokaupassa tulostettavat lomakkeet noudattavat MyCashflown lomakesääntöjä. Jos muokkaat lomakkeita niiden oletustulostuksesta teemassasi, niin varmista että ne tulostuvat sääntöjen mukaisesti. Lomakkeiden toiminta halutaan pitää mahdollisimman universaalina, jotta ne toimivat hyvin myös tulevilla päivityksillä.

Bannerit

Banneripaikkoja pitää löytyä teemasta vähintään yksi koska monet haluavat näyttä bannerissa maksutapapainikkeita. Useammasta banneripaikasta ei ole haittaa, päin vastoin. Se antaa teeman käyttäjälle lisää kustomointimahdollisuuksia. Bannereissa pitää käyttää banners-tagia, koska se tulostaa banneriryhmän kaikki bannerit. Huomioi että banneri toimii pelkkänä tekstinäkin jos siinä ei ole kuvaa.

Minifyt

JavaScript- ja CSS-tiedostot laitetaan toimimaan minifyn kautta. Minify optimoi koodin ja poistaa siitä turhat välimerkit. Tämä pienentää tiedoston kokoa ja nopeuttaa latautumista. Alla on esimerkki Minifyn käytöstä. Minifyn voi aktivoida vasta lopuksi koska voi vaikeuttaa teeman kehittämistä.

{MinifyCSS(files:'css/base.css|css/base.forms.css|css/tb.css|css/master.css')}

Helperit

Koodin staattiset osat sijoitetaan helper-tiedostoihin. Helper-tiedostot sijoitetaan oman helper-kansion alle. Helper-tiedostojen käytöstä on lisää interface-oppaassa.

Selaintuki

Teeman täytyy olla visuaalisesti yhtenäinen seuraavilla selaimilla: Firefox, Chrome, Safari ja Internet Explorer alkaen versiosta 8. Modernit selaimet voivat hyödyntää CSS3-tekniikkaa siirtymisissä ja visuaalisissa efekteissä. Internet Explorer 7 -selaimella teeman pitää olla toimiva, mutta se voi olla ulkoisesti riisutumpi.

Tarkista pitkät tekstit

Testaa kaikki tekstikentät läpi pitkillä teksteillä.

Tee päävalikosta todella laaja, kirjoita pitkiä otsikoiden nimiä siten että ne rivittyvät, luo valikkoon alatasoja ainakin neljännelle tasolle asti. Katso että valikko ei silti hajoa ja kaikki teksti on luettavissa. Tee sama testaus myös infovalikolle.

Testaa tuotteet pitkillä tuotenimillä, miten nimi käyttäytyy tuotelistauksessa ja itse tuotesivulla, entä ostoskorissa? Mitä jos tuote maksaa paljon, 12 000,00€? Ota myös huomioon hinnan desimaaliosan vaatima tila. Laita tuote alennukseen, jolloin sille tulee kaksi hintaa. Tuotteen voi maksaa myös osamaksulla, jolloin hinnan lisäksi tulee vielä uusi vaihtoehto kuukausisummasta. Miltä tämä nämä kolme hintaa näyttävät tuotelistauksessa ja tuotekortissa?

Tuotekortissa tuotteelle voi antaa tuotekuvauksen ja vielä tarkan tuotetiedon. Kokeile näitä hyvin laajoilla teksteillä.

Vähän tai ei ollenkaan sisältöä

Samalla kun teemaa testataan pitkillä teksteillä, on hyvä kokeilla myös tosi lyhyitä tekstejä. Mitä jos teemassa on todella vähän sisältö, tai paikoitellen ei ollenkaan. Testaa, että teeman toimii hyvin jos uutisia ei ole yhtään, infosivuja vain yksi ja brändejä nolla.

Käytä before- ja after-attribuutteja. Niiden avulla saat esim. yhteensopivien tuotteiden otsikon piiloon jos sellaisia tuotteita ei ole ollenkaan. Alla on tästä malli.

{CategoryHotPicks(before:’
< h2 >Kuumat tuotteet tästä tuoteryhmästä< / h2 >’,after:’
’)}

Tarkista suuret kuvat

Kaikille kuville asetetaan maksimikoot teemaan käyttäen height ja width attribuutteja. Näin varmistetaan, että teeman käyttäjä ei pääse hajottamaan teeman ulkoasua ja kuvat skaalautuvat sopivan kokoisiksi teemassa. Koko asetetaan mm. logolle, bannereille, tuotekuville, tuoteryhmän kuvalle ja tuotemerkeille. Alla on esimerkki height ja width attribuuteista.

{Logo(width:170,height:170)}

Muistithan suunnitella kaikki näkymät

Kaupassa annetaan virheilmoituksia ja varoituksia monessa paikassa. Ilmoitus tulee kun yhteydenottolomake tai asiakastiedot kassalla on täytetty väärin, tuotteita ei ole ostoskorissa tai tuote poistetaan sieltä, salasana on väärin kun kirjaudutaan tilausseurantaan jne...

Tarkista myös asiakkaan tilinhallintasivut, että ne toimivat ja näyttävät hyvältä.

Tilauksen yhteydessä verkkokaupasta lähetetään asiakkaille kuitti ja useita sähköposteja. Näiden rakennetta ja ulkoasua hallitaan omista pohjista, joka pitäisi vastata teeman muuta ulkoasua. Lisätietoa pohjista löytyy täällä.

URL osoitteet

Käytä suhteellisia osoitteita teemassa. Teeman tulee toimia itsenäisesti eri palvelimella eikä siinä voi olla viittauksia ulkopuolisiin tiedostoihin. Myös teeman nimi voi vaihtua, joten sen tilalta käytetään {Theme} tagia, joka tulostaa teeman nimen. Style.css tiedostoon voitaisiin viitata teemassa näin:

/files/{Theme}/css/style.css

Resoluutiot ja skaalautuvuus

Teema pitää toimia minimissään 960 pikselin ja sitä suuremmilla leveyksillä. Teeman ei tarvitse olla skaalautuva, mutta sen avulla teemaa voi kohdentaa kapeammille ja leveämmille näytöille.

Footerin pakolliset tiedot

Sivuille tulee suunnitella footer, mielellään sivujen alaosaan, jossa esitetään kaupan nimi ja MyCashflown tekstimainos. Kaupan nimi tulostetaan tagilla {ShopName} ja MyCashflown tekstimainos tagilla {MyCashflowTextAd}. Footer voi olla hyvinkin pienellä ja huomaamattomasti tehty.

Halutessaan suunnittelija saa lisätä oman krediittinsä footerin tekstimainoksen perään. Krediitti voi olla muotoa ”Suunnitellut Mainostoimisto Oy” tai englanniksi ”Designed by Comany Ltd”. Tekstin voi laittaa linkiksi omalle nettisivulle. Footer voi olla alla olevan kaltainen.

{ShopName} | {MyCashflowTextAd} | Suunnitellut < a href="http://www.mainostoimisto.fi" > Mainostoimisto Oy< /a >

Logo

Logo tulee toimia myös ilman kuvaa. Kun teema asennetaan ensimmäistä kertaa, ei logoa ole vielä välttämättä asennettu. Tällöin logon paikalla näkyy yrityksen nimi.

Tekijänoikeudet

Älä käytä tekijänoikeuksien alaista materiaalia teemassa. Sinun täytyy varmistaa että grafiikka, fontit, koodi-kirjastot yms. sallivat edelleen myynnin osana teemaa.

Fontit

Teemassa on käytettävä fontteja jotka toimivat kaikilla laitteilla ongelmitta. Leipätekstinä suositellaan käytettävän web safe -fontteja. Tämä tarkoittaa perusfontteja jotka löytyvät kaikilta käyttöjärjestelmiltä ja toimivat siis myös kaikilla selaimilla. Näitä on mm. Arial, Georgia, Times New Roman ja Verdana.

Erikoisfontteja voi käyttää kunhan niiden lisenssiehdot ovat kunnossa. Varma valinta on Google Web Fonts, joka tarjoaa fontteja käytettäväksi ilmaiseksi. Erikoisfontteja ei kannata käyttää liikaa, koska niiden liiallinen viljely syö käytettävyyttä ja hidastaa sivua.

Tekstiä ei pidä mennä muuttamaan missään tilanteessa kuvaksi. Teeman tulee tukea monikielisyyttä, joten kaikille kielille, saatikka sitten tuleville kielille, ei voida tehdä tällöin omia tekstejä.

Monikielisyys

Kaikille teemassa oleville staattisille teksteille asennetaan kielitagit. Esimerkiksi sana ostoskori korvataan tagilla {%ShoppingCart}. Tämän avulla teema näyttää kielivalinnan mukaisen sanan kaupassa. Oikean kielitagin voi tarkistaa hallintapaneelista.

Sivuille pitää myös tehdä paikka kielivalikolle. Useita kieliä ei tarvitse välttämättä testata, vaan valikon toiminnan voi testata suoraan lisäämällä alla olevan koodin kielivalikon paikalle.

<ul class="NavigationList LanguageNavigation"><li><a href="< a href="http://kauppa.mycashflow.fi" >http://kauppa.mycashflow.fi< /a > ">Suomeksi</a></li><li><a href="< a href="http://se.kauppa.mycashflow.fi">http://kauppa.gefoto.mycashflow.fi< /a > ">Svenska</a></li></ul>

Analytics-tagi

Analytics-tagi mahdollistaa kaikkien laajennusten seurantaskriptien ja -kuvien tulostamisen yhden tagin kautta. Käytännössä sinun täytyy lisätä {Analytics(for:’head’)} tagi jokaisen sivun yläosaan (helpers/header.html tai vastaava) head-tagien väliin. Vastaavasti {Analytics(for:’body’)} tagi tulee lisätä jokaisen sivun loppuun (helpers/footer.html). Nämä tagit huolehtivat konversiotietojen tulostamisesta lähdekoodiin.

Teeman asetustiedosto

Teemakohtaiseen theme.xml tiedostoon tallennetaan teeman asetukset. Tässä vaiheessa vielä tallennetaan vain kuvien koot. Theme.xml tiedostoa tullaan laajentamaan tulevaisuudessa kattamaan muitakin teeman asetuksia. Mallintiedoston löydät täältä.

Readme-tiedosto

Teeman mukana toimitetaan readme.html tiedosto. Siinä kerrotaan lyhyesti teeman ominaisuuksista, mainitaan keskeiset teemakohtaiset asiat kuten banneripaikat ja ohjeistetaan teeman käyttöön.

Demokaupan luonti

Jokaisesta teemasta luodaan yksi demokauppa, jotta ostaja pääsee kokeilemaan sen toimintaa ennen ostoa. Demokauppaa tarvitaan myös kaupan kehityksessä. Demokauppaa luodessa sinun tulee olla yhteydessä meihin, niin poistamme demokaupasta ilmaisen version 10:n tuotteen tuoterajoituksen.

Demokauppa luodaan aivan kuin luotaisiin oikea kauppaa. Sille annetaan mahdollisimman laajat tiedot, jotta kauppa toimisi kuten normaali, toiminnassa oleva verkkokauppa.

Ensimmäisen kaupalle annetaan nimi ja yhteystiedot asetukset-sivulla hallintapaneelissa.

Kaupan nimi: Teeman nimi - Demokauppa
Logo: Ladataan kauppaan oma logo
Yritys: Demokauppa Oy
Y-tunnus: 1234567-1
Katuosoite: Syväojankatu 3A
Sijainti: 87700 Kajaani, Finland
Puhelin: 040 - 123 4567
Sähköposti: yhteys@demokauppa.fi
Internet: Demokaupan www-osoite

Toimitusehtoihin liitetään toimitusehtopohja, joka löytyy täältä.

Toimitustavat

Toimitustapoihin lisätään muutama mahdollinen toimitustapa. Näitä voi olla postipaketti, ovelle paketti ja kirje. Näille lisätään myös lyhyt kuvaus.

Maksutavat

Maksutapaan lisätään myös muutama vaihtoehto. Eri maksutavoilla on omat testitunnuksensa jotka löytyvät alta. Klarna tili on erityisen tärkeä testata, koska se mahdollistaa osamaksulla maksun. Osamaksu tieto näkyy kaupassa tuotteen hinnan alapuolella. Muista lisätä maksutavoille myös lyhyt testikuvaus.

Suomen verkkomaksut
Kauppiasnumero: 13466
Salainen avain: 6pKF4jkv97zmqBJ3ZL8gUw5DfT2NMQ

Klarna tili
Kauppiasnumero: 2503
Salainen avain: CkTpNBml73UIVkM

Checkout
Kauppiasnumero: 375917
Salainen avain: SAIPPUAKAUPPIAS

SmartPOST
Ei tarvitse tunnuksia

Tekstisivut

Infosivuja tehdään myös useita. Hyviä mallisivuja voisi olla yritysesittely, toimitusehdot, rekisteriseloste ja ota yhteyttä. Jollekin infosivulle voidaan luoda myös muutama alasivu, jotta nähdään sen toiminta.

Uutisia luodaan malliksi sen verran, että ulkoasun toiminta nähdään hyvin. Jos etusivulla näytetään kolme uusinta uutisotsikkoa, on tällöin hyvä luoda ainakin neljä uutista. Uutisille asetetaan eri julkaisupäivä manuaalisesti. Kannattaa kokeilla lyhyen ja pitkän uutisen toimivuutta.

Bannereita luodaan malliksi niille paikoille, jotka on teemassa määritelty. Jos teemassa on bannerikaruselli, pitää banneripaikkaan luoda useampi banneri.

Tuotteet

Demokaupan tärkein sisältö on tietenkin tuotteet. Tuotteita luodaan teemalle ihanteellinen määrä. Jos teema on luotu pienelle määrälle tuotteita, tällöin myös demokaupassa esitetään pieni määrä tuotteita. Päävalikkoon luodaan sille ihanteellinen määrä tuotekategorioita ja alakategorioita.

Esimerkkituotteiden on tärkeä olla oikeita. Kaikille tuotteille annetaan todellisen nimet ja kattavat oikeat kuvaukset. Ei käytetä lorem ipsum -täytetekstejä. Tuotteelle annetaan järkevä hinta ja osalle merkataan alennushinta. Tuotteille kirjoitetaan kuvaus ja ainakin osalle tarjotaan vielä tarkat tuotetiedot. Tuotteelle annetaan ainakin yksi tuotekuva. Muutamalle tuotteelle pitää antaa useampi kuva ja ainakin yhdellä tuotteella pitää testata toiminta jossa tuotekuvia on paljon.

Muutamilla tuotteilla pitää testata myös erilaisia räätälöintivaihtoehtoja. Kokeillaan alasvetovalikkoa, valintanappeja, monivalintanappeja ja tiedoston liittämistä.

Erilaiset tuotteiden nostot kokeillaan myös tuotteiden asetuksista. Lisätään tuotteille yhteensopivia ja samankaltaisia tuotteita ja asetetaan osa tuotteista mainostettavaksi.

Loppuviilaus

Checklist

Käy vielä nämä kohdat läpi, ennen kuin lähetät teeman tarkistettavaksi.

  • Koodi on validia.
  • Siivoa koodista turhat pois ja lisää puutuvat kommentit.
  • Poista turhat kuvat ja JavaScript-tiedostot.
  • Laita minifyt päälle.
  • Pitkät tekstit ja laajat navigaatio eivät hajoile.
  • Suuret kuvat eivät hajoita ulkoasua.
  • Asiakastilin navigaatio on hyvin esillä.
  • Readme.html -tiedosto on mukana.

Teeman tarkistus

Ennen teeman julkaisua, se lähetetään MyCashflowlle tarkistettavaksi. Tarkistusprosessi vie noin viikon aikaa. Voit nopeuttaa tarkistusprosessia merkittävästi, kun käyt huolella läpi tämän ohjeiston.

Voit myös lähettää jo suunnitteluvaiheessa teemasta luonnoksen nopeaa kommentointia varten osoitteeseen teemat@mycashflow.fi. Pitää kuitenkin muistaa, että hyvännäköisestä luonnoksesta on vielä pitkä matkaa käyttäjäystävälliseen ja toimivaan teemaan.

Teeman hylkääminen

Teeman voidaan hylätä monesta syystä. Suurin osa hylkäyksistä johtuu seuraavista syistä:

  • Liian samankaltainen teema jo olemassa olevan teeman tai kaupan kanssa.
  • Teema on vaikeakäyttöinen ja epäselvä.
  • Teemassa ilmenee pieniä teknisiä puutteita.

Pitää muistaa, että hylkääminen ei tarkoita sitä että teema pitäisi heittä roskiin. Hylkäämisen yhteydessä annetaan yleensä vinkkejä teeman korjaamiseksi ja parantamiseksi. Kannattaakin lähettä luonnoksia nopeaa arviointia varten jo teeman suunnitteluvaiheessa. Näin tiedetään ollaanko oikeilla jäljillä.

Tuki ja myynti

Hinnoittelu ja maksuohjeet

Voit itse määritellä hinnan myytävälle teemalle. Hinta tulee olla alimmillaan 50 €. Hinnan on oltava pöyristetty lähimpään kymmeneen euroon, esim. 120 € ja 200 € ovat oikein, mutta 129 € ei ole. Hinnat sisältävät aina arvonlisäveron. Suunnittelija voi myös määrittää saako teeman ostaa pois kokonaan teemakaupasta ja millä hinnalla.

Teeman tekijä saa myyntihinnasta aina 70 %. Maksu välitetään suunnittelijalle kerran kuukaudessa kuukauden ensimmäinen päivä.

Virhevastuu

Jos teemassa ilmenee virheitä sen jälkeen kun se on laitettu myyntiin, vastaa virheiden korjaamisesta teeman suunnittelija. Virheitä voi olla mm. rikkoontunut linkki, hajonnut layout, skripti-virhe tai muu vastaava. Teeman ostaja vastaa itse omasta toiminnastaan aiheutuneista virheistä teemaan.

Pyydetyt muokkaukset

Jos suunnittelija haluaa, saa häneen ottaa yhteyttä jatkomuokkauksia varten. Teeman oston jälkeen annetaan ostajalle suorat yhteystiedot suunnittelijalle.

Teeman päivittäminen

Kun teema on julkaistu teemakaupassa, voit päivittää sitä kirjautumalla MyCashflown kumppanitilillesi. Voit päivittää teemasi hintaa, kuvakaappauksia teemasta, teeman demokauppaa ja itse teemaa. Teemaa varten voit ladata uuden zip-tiedoston ja korvata aiemman sillä.

Yhteydenotto

Kaikissa teemakauppaan liittyvissä asioissa voit olla yhteydessä meihin sähköpostilla osoitteessa info@mycashflow.fi.