86
Diplomsko delo visokošolskega strokovnega študija Informatika v organizaciji in managementu IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH SLOVENSKIH ŠIVANIH IZDELKOV Mentor: doc. dr. Branislav Šmitek Kandidat: Alenka Jezeršek Kranj, november 2012

IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Page 1: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Diplomsko delo visokošolskega strokovnega študija Informatika v organizaciji in managementu

IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH SLOVENSKIH

ŠIVANIH IZDELKOV Mentor: doc. dr. Branislav Šmitek Kandidat: Alenka Jezeršek

Kranj, november 2012

Page 2: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

ZAHVALA Za pomoč in svetovanje pri izdelavi diplomske naloge se zahvaljujem mentorju, doc. dr. Branislavu Šmitku. Zahvaljujem se tudi podjetju Dotkomp d.o.o. za vso strokovno pomoč in svetovanje pri izdelavi diplomske naloge. Nenazadnje pa se za največjo podporo zahvaljujem svojim domačim, ki so mi stali ob strani, me podpirali, ter mi omogočili študij in opravljanje drugih dejavnosti.

Page 3: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

POVZETEK V diplomskem delu je zajet celoten postopek izdelave spletne trgovine za prodajo unikatnih šivanih izdelkov. S pomočjo podjetja Dotkomp d.o.o. smo ustvarili novo blagovno znamko, za katero smo izdelali spletno trgovino. Na samem začetku smo podrobno raziskali trg ter tako dobili veliko koristnih informacij za naše izdelke, ki jih bomo ponudili v spletni trgovini. V nalogi je predstavljen celoten postopek izdelave spletne trgovine. Pred izborom pravega trgovinskega sistema smo raziskali štiri trgovinske sisteme, ki jih v nalogi tudi podrobneje predstavljam. Predstavljen je postopek grafične izdelave spletne trgovine, izbira barvne kombinacije, logotipa blagovne znamke ter različni plačilni sistemi, ki bodo delovali v spletni trgovini. Za boljše spoznavanje kupcev smo sestavili tudi elektronsko spletno anketo. Anketa nam je dala koristne podatke o tem, kaj kupci želijo in pričakujejo ob nakupu na spletu ter kako marketinško izdelati spletno trgovino. Rezultate smo porabili ob sami izdelavi spletne trgovine in upoštevali njihove želje pri poslovanju. Namen diplomskega dela je ustvariti spletno trgovino za kvalitetno blagovno znamko unikatnih šivanih izdelkov, ki se bodo prodajali samo na spletu, na Slovenskem, predvsem pa na tujem trgu. Ker smo tudi sami proizvajalci unikatnih šivanih izdelkov, smo si s spletno trgovino odprli novo prodajno pot. KLJUČNE BESEDE:

- Spletna trgovina, - Spletno oglaševanje, - Barvna lestvica, - Blagovna znamka, - Prodaja.

Page 4: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

ABSTRACT The diploma thesis encompasses the whole procedure of the making of an online unique sewn products store. With the assistance of the company Dotkomp d.o.o. we created a new brand and for it we created an online store. In the beginning we did a thorough market research and thus obtained a lot of valuable information regarding the products we intend to offer to our online customers. The whole process of creation of the online store is presented in the thesis. Before choosing a suitable trading system we researched four trading systems which are presented in the paper. The graphic design of the online store, the choice of the color combination and logo and various payment systems, which will be used in the online store are also presented. In order to get to know our potential customers better, we also did a web survey. It provided us with useful information about what customers want and expect from online shopping and how to create an online store from the marketing point of view. We used the results of the survey in the implementation phase and also took the respondents´ preferences into account in the business process itself. The purpose of the diploma thesis was to create an online store for unique sewn products, which will be sold only online, be it in the Slovenian or foreign markets. Since we manufacture unique sewn products ourselves, we also opened new sales possibilities for ourselves. KEYWORDS

- Web store - Online advertising - Flush - Brand - Marketing

Page 5: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

KAZALO 1. UVOD…………………………………………………………………………….. 1 1.1. Predstavitev problema………………………………………………………………..

1.2. Predstavitev podjetja…………………………………………………………………. 1.3. Metode dela…………………………………………………………………………....

1 1 2

2. SPLETNA TRGOVINA………………………………………………………….. 2 2.1. Kaj je spletna trgovina……………………………………………………………….

2.2. Prednosti in pomanjkljivosti spletne trgovine…………………………………… 2.3. Varnost spletnega nakupovanja…………………………………………………….. 2.4. Spletno nakupovanje v Sloveniji in tujini…………………………………………..

2 3 4 5

3. SPLETNI TRGOVINSKI SISTEMI………………………………………………. 7 3.1. Trgovinski sistem Prestashop……………………………………………………….

3.2. Trgovinski sistem OXID………………………………………………………………. 3.3. Trgovinski sistem Magento………………………………………………………….. 3.4. Trgovinski sistem CS-Card…………………………………………………………..

10 12 13 16

4. IZDELAVA SPLETNE TRGOVINE…………………………………………….. 23 4.1. Izbor primernega trgovinskega sistema…………………………………………..

4.2. Izbor vsebine, informacij in storitev………………………………………………. 4.3. Grafika spletne trgovine…………………………………………………………….. 4.4. Barve in njihov pomen….…………………………………………………………….. 4.5. Izbira barve za spletno trgovino …………………………………………………….

4.5.1. Kako nastaviti ton in razpoloženje oz. občutek? Kaj izdelek projicira?.....................................................................................................

4.6. Izbira logotipa…………………………………………………………………………. 4.7. Izbira pisave………………………………………………………………………….... 4.8. Izdelava grafične podobe in prenos v HTML in v trgovinsko platformo…… 4.9. Plačevanje v spletni trgovini……………………………………………………….. 4.9.1 Plačevanje po povzetju..........................................................................

23 25 28 32 36 41 44 51 56 58 58

5. OPTIMIZACIJA SPLETNE TRGOVINE ZA ISKALNIKE……………………... 58 5.1. Optimizacija spletne trgovine……………………………………………………….

5.1.1. Metatags, Title, H1, H2, opis………………………………………………. 58 60

5.2. Analiza iskanih besed…………………………………………………………………. 63 6. VZDRŽEVANJE SPLETNE TRGOVINE……………………………………….. 65 6.1. Vzdrževanje spletne trgovine…………………………………………………………

6.2. Posodabljanje spletne trgovine……………………………………………………. 6.2.1. Vnos novega artikla…………………………………………………………… 6.2.2. Vnos novih besedil……………………………………………………………...

65 66 66 66

7. ELEKTRONSKA ANKETA O SPLETNEM NAKUPOVANJU OBLAČIL……. 69 7.1. Pregled rezultatov ankete…………………………………………………………… 69 8. MOJA VLOGA PRI REŠEVANJU PROBLEMA...………………………………. 76 8.1. Bodoči razvoj………………………………………………………………….. 76 9. ZAKLJUČEK………………………………………………………………………. 77 Literatura in viri………………………………………………………………………. Kazalo slik…………………………………………………………………………….. Kazalo tabel…………………………………………………………………………….. Kratice…………………………………………………………………………….........

78 79 81 81

Page 6: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 1

1. UVOD 1.1. PREDSTAVITEV PROBLEMA Po nekajletnih izkušnjah, ki jih imamo na področju izdelave spletnih strani in na področju izdelave unikatnih šivanih izdelkov, smo se odločili, da ustvarimo blagovno znamko otroških unikatnih oblačil ter stopimo na slovenski in tuji trg. Statistike namreč kažejo, da se vedno več ljudi odloča za spletno nakupovanje. V letu 2011 je spletno nakupovanje opravilo 39 % oseb, starih 10–74 let. Naši izdelki bodo dosegljivi samo v spletni trgovini. Izdelki so unikatni, izdelani v Sloveniji, ter so kvalitetni in praktični. Ponudba zajema določena otroška oblačila od drugega do šestega leta starosti. Izdelki so namenjeni zahtevnejšim kupcem, saj bodo unikatni, kvalitetni ter višjega cenovnega razreda. Spletna trgovina nam omogoči hitrejše in enostavnejše prodiranje na tuje trge. Problem, s katerim smo se srečali, je, kako preko kvalitetne spletne trgovine marketinško izpostaviti slovenski proizvod in v morju konkurence na spletu predstaviti izdelek svetovnemu trgu. Poseben izziv nam predstavlja tudi, kako ustvariti artikel z dodano vrednostjo, kakšni so možni marketinški prijemi ter sama izvedba in praksa. Pred začetkom nastajanja diplomskega dela smo opravili analizo iskanih ključnih besed, opravili smo pregled konkurence na spletu in raziskali cene. Želeli smo, da je spletna trgovina pregledna, atraktivna, enostavna za uporabo, zanesljiva ter varna za poslovanje.

1.2. PREDSTAVITEV PODJETJA Podjetje Dotkomp d.o.o. je prisotno že od leta 2004. Je zasebno podjetje, specializirano za spletne rešitve, in sicer za vse vrste podjetij, od majhnih do velikih. Glavni cilj specializacije je spletni marketing; preko optimizacije, vizualnih rešitev, e-poštnega oglaševanja in iskalnega rankinga. Delo v podjetju je usmerjeno v uspeh podjetij na spletu. Pri tem nam pomaga visoka tehnologija (PHP, MySql, Ajax, JavaScript). Tehnologija nam služi, da lažje in učinkovito dosežemo končne kupce. Naše znanje redno dopolnjujemo in nadgrajujemo ter tako sledimo smernicam, ki jih narekuje zahtevni trg. Jedro podjetja je skupina mladih strokovnjakov z nekajletnimi izkušnjami na področju spletnih rešitev in spletnega oglaševanja. V dosedanjem obdobju smo si nabrali ogromno izkušenj pri izdelavi in optimizaciji spletnih strani, ki so bile namenjene tako domači kot svetovni javnosti. V podjetju imamo postopek dela, ki se opravi za vsako izdelano spletno stran:

1.) Raziskava, Arhitektura Strani in Primarni Cilj Strani, 2.) Skelet (skica na papirju), 3.) Izdelava Persone & Priprava Besedila, 4.) Oblikovanje (besedilo, slike),

Page 7: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 2

Oblikovanje ima naslednje faze:

o 1. Beta Design 1 o 2. Beta Design 2 o 3. Beta Design 3 o 4. Final Beta Design o 5. Final Design

(od prve oblike do končne oblike je lahko do 12 faz oblikovanja)

5.) Kodiranje (implementacija v HTML & CSS), 6.) Razvoj Aplikacije in vnos v CMS ali Web Trgovino, 7.) Testiranje & Popravki, 9.) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email

marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza Prometa, 10.) Zaključek & popravki na podlagi merjenja, 11.) Pomoč (prodajna pisma, email marketing, prodaja).

Vsi postopki potekajo preko CRM aplikacije (Customer Relationship Management), tako zagotovimo transparentnost dela (kaj, koliko in kdaj bo narejeno itd.) in boljšo efektivno komunikacijo.

Vir: Dotkomp, kdo in kje smo. http://www.woglasevanje.si

1.3. METODE DELA

Na trgu je veliko različnih trgovinskih sistemov. Podrobno smo pregledali trgovinske sisteme in izbrali štiri glavne, nam najboljše trgovinske sisteme. Trgovinske sisteme smo predstavili in podrobno raziskali. Iz dobljenih rezultatov smo izbrali najbolj primeren trgovinski sistem za našo spletno trgovino. Pred začetkom nastajanja diplomskega dela smo že opravili analizo iskanih ključnih besed, opravili smo pregled konkurence na spletu in raziskali cene. V praktičnem delu smo s pomočjo spletne ankete pridobili nekaj zelo koristnih informacij o naših bodočih kupcih, njihove želje in navade ljudi. Tako smo še lažje oblikovali spletno trgovino in njeno ponudbo.

2. SPLETNA TRGOVINA

2.1. KAJ JE SPLETNA TRGOVINA Spletna trgovina je trgovina na spletu, ko kupec lahko kupi produkt, servis ali storitev na internetu. Za razliko od fizične trgovine se v spletni trgovini premikamo z miško ter gibljemo po artiklih ali kategorijah s kliki na miško. Za razliko od fizičnih trgovin lahko kupec kupi produkte v digitalni obliki (e-knjige, slike, programsko opremo) ali digitalno storitev.

Page 8: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 3

Poenostavljeno lahko spletne trgovine delimo na tri dele: trgovine, kjer prodajajo samo fizične produkte, trgovine, kjer se prodajajo samo digitalni produkti ali digitalne storitve, trgovine, kjer prodajajo tako digitalne produkte kot fizične produkte. Dober primer je

največja spletna trgovina Amazon. Če strnemo v eno poved, kaj je spletna trgovina, lahko zapišemo takole: “Spletna trgovina je trgovina na internetu”. Da bi lahko stranke kupovale v spletni trgovini, morajo dostopati do interneta oz. imeti do njega dostop, imeti morajo računalnik, tablico ali zmogljiv prenosni telefon, priključen na omrežje interneta. Poznati morajo osnovne zakonitosti interneta in pridobiti občutek virtualnosti. Spletne trgovine prikazujejo produkte preko grafičnega vmesnika, ki ga poganja programska oprema, namensko narejena za spletne trgovine. Če potegnemo vzporednico med fizičnimi trgovinami in spletnimi trgovinami, med njima ni kaj dosti razlik. Spletna trgovina deluje oz. je zasnovana na podobnosti fizičnih trgovin. Njen namen je približati kupcu, kar nam je poznano, in tako omogočiti nakup brez truda. Spletne trgovine so razdeljene na kategorije, pod-kategorije in na koncu na police z artikli, opisom in ceno. S klikom na miško dodamo izdelek v košarico, s klikom na košarico “zapeljemo” artikel do blagajne. Na blagajni nakup zaključimo. Za razliko od fizične trgovine nam mora spletna trgovina kupljen artikel še dostaviti ali digitalni produkt poslati na kupčev elektronski poštni naslov. Na blagajni nam napredne trgovine omogočajo več načinov plačevanja:

Plačilo ob dostavi blaga, Plačilo s kreditno kartico (MasterCard, Visa, American Express ...), Moneta (plačilo s telefonom), Plačilo preko TRR računa.

Pred nekaj leti, ko ljudje še niso povsem zaupali plačevanju s kreditnimi karticami, je bilo možno telefonsko naročanje ali pa preko faxa s podatki kartice in lastnika. Danes je ta metoda povsem opuščena. Trgovec je imel ob takem nakupu podatke in s tem je bila možnost zlorabe toliko večja, kot je to danes, ko se ne vidi vseh podatkov oz. številke kartice v celoti. 2.2. PREDNOSTI IN POMANJKLJIVOSTI SPLETNE TRGOVINE Ko govorimo o prednosti spletne trgovine, hkrati lahko govorimo tudi o prednosti interneta. Spletna trgovina ni fizično vezana na lokacijo, dosegljiva je kjerkoli, kadarkoli in komurkoli po vsem svetu. Nima delovnika oz. ni časovno omejena. Kupec lahko izvrši nakup ob katerikoli uri in kadarkoli. Pred nakupom lahko artikel dá med priljubljene in nakup brez truda opravi kasneje. Pri tem so tudi manjši stroški vzdrževanja. Prednosti spletne trgovine za ponudnika kot kupca:

Ni vezana na fizično lokacijo in delovnik, manjši so stroški vzdrževanja, vedno je dosegljiva kupcu, zagotavlja možnost nakupa 24 ur, brez čakalnih

vrst, stranka ima manjše stroške in porabi manj časa (prihranek denarja in časa),

Page 9: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 4

večja je izbira artiklov, opisi so na voljo na uradnih straneh proizvajalcev (boljše informacije), kupec lahko prebere mnenja drugih, nakup brez pritiska, udobno nakupovanje za kupca.

Pomanjkljivosti spletne trgovine:

Kupec ne more pomeriti artikla (obutve, oblačil, očal, čelade, kape), ni osebnega fizičnega kontakta s kupci, težko izvemo za njegove ovire in

probleme, zahteva veliko dela s posodabljanji artiklov in opisi, nekateri kupci so skeptični do varnega nakupa, zato podatkov ne želijo

vpisovati, kupec artikla ne dobi takoj, ampak mora počakati na dostavo, dodatni so stroški z dostavo in pakiranjem za ponudnika, vzdrževanje in posodabljanje programske trgovine je odvisno od tretje osebe

ali podjetja, prodajalec mora biti vešč dela s programom in grafiko, velika konkurenca (predvsem z navalom kitajskih trgovin), spletna trgovina je neosebna in “hladna”, zato se kupci odločajo racionalno in

premišljeno, cena določa nakup, trgovina je ranljiva na napade in odvisna od vzdrževanje strežnika, nekatere od nakupa odvrne dolgo izpolnjevanje obrazcev oz. prijava v

trgovino (računalniško nepismeni), vračilo artikla oz. zamenjava je dolgotrajna, kupec nima 100 % zasebnosti oz. ne more ostati anonimen, to pa za nekatere

predstavlja velik problem (znane osebe, osebe na visokih položajih, diplomati ...)

stroški vzdrževanja rastejo, oglaševanje je lahko za nekatere izdelke drago (Google ads zaračuna na klik

od 0.60 € do nekaj evrov), zahteva minimalno enega človeka za marketing, traja lahko tudi do enega leta, da Google uvrsti spletno trgovino med višje

rezultate (pred tem je prodaja lahko nična).

2.3. VARNOST SPLETNEGA NAKUPOVANJA Varnost spletnega nakupovanja je mogoče ena izmed slabosti nakupovanja. Sicer nas spletne strani prepričujejo, da imajo varno SSL povezavo in 256-bitni algoritem, a kljub temu moramo vedeti, da je tudi tega mogoče razbiti. 100 % varne povezave na internetu ni, kljub trditvam nekaterih strani. Pa vendar večini zadostuje znak oz. logo varne povezave. SSL je kriptografski protokol, ki zagotavlja zaščiteno komunikacijo med dvema napravama na internetu. Je neke vrste digitalni potni list, ki preveri oz. verificira verodostojnost na strani uporabnikovega brskalnika in serverja. Namen varne povezave je, da tretja neznana in nepovabljena oz. nezaželena naprava ne more prisluškovati oz. pridobivati neavtoriziranih

Page 10: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 5

podatkov, kot so osebni podatki, predvsem pa podatki kreditnih kartic. Iz strani uporabnika ni bolj problematično to, da nekdo pridobi njegove osebne podatke, kot to, da na škodljiv način zlorabi njegovo kreditno kartico in izprazni uporabnikov bančni račun. Na strani uporabnika se prikaže, da povezava oz. pretok podatkov poteka zaščiteno s enkripcijo. Uporabnik to vidi v svojem brskalniku, kjer se mu prikaže kratica https. Na koncu dodani S pomeni Secure (varovano). Spletna trgovina pridobi varno povezavo tako, da kupi certifikat, ki se ga namesti na strežnik gostujoče domene. Certifikat se lahko kupi pri različnih ponudnikih. Med najbolj znanimi so:

Geotrust.com, Verisign.com, Thawte.com.

Certifikat, ki se ga kupi pri enem izmed ponudnikov, vsebuje naslednje podatke:

Podatki lastnika (ime domene, IP naslov), serijska številka certifikata za identifikacijo, datum izteka veljavnosti, javni ključ za enkripcijo, privatni ključ za dekripcijo.

Ko gre kupec na blagajno, ga preusmerimo na varno povezavo https in brez poseganja uporabnika se v ozadju vzpostavi varna enkriptana povezava. 2.4. SPLETNO NAKUPOVANJE V SLOVENIJI IN TUJINI

78% populacije uporablja internet v USA, v Evropi 64 %, v Aziji 22 % in v Afriki 11 % 2010 so Američani opravili za 186 milijard nakupov na spletu, v letu 2011 je bilo za 202 milijarde nakupov, v letu 2012 bo številka prišla do 226 milijard, do leta 2014 bo številka skočila na 250 milijard, do leta 2016 pa do 327 milijard

nakupov, od tega jih na spletu kupuje 66 %, v letu 2011 so povprečno kupili 39 stvari.

Letni porast v obdobju petih let bo 10.1 % za vsako leto. Za porast prodaje na spletu je krivo tudi to, da so spletne prodajalne postale bolj dovršene, izboljšala se je tudi podpora uporabnikom. Vir tudi navaja, da bo v letu 2016 192 milijonov Američanov kupovalo na spletu, 10 % več kot v letu 2012 s 167 milijoni potrošnikov. Povprečen nakup Američana v letu 2012 na spletu bo 926.7 €, v letu 2016 pa predvidevajo, da se bo povečala prodaja za 44 %, tako bo povprečen nakup leta 2016 znašal 1.333 €. Za porast nakupov in uporabnikov interneta je kriva tudi vse večja uporaba pametnih telefonov in tablic. Statistika tudi govori, da so celo tisti, ki uporabljajo oz. so lastniki tablic, večji potrošniki. Za tem stoji logika, da lastnik tablice spada med bolj vešče uporabnike tehnologije in ima ekonomsko boljši standard.

Page 11: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 6

Kot glavni razlog za nakupovanje na internetu kupci navajajo, da je cena tista, ki vpliva na njihovo odločitev. Internet je tako za mnoge postal vir cenejših nakupov, vsekakor pa nudi tudi hitro in dokaj enostavno iskanje, pregledovanje za nižjimi cenami različnih ponudnikov spletnih trgovin. V nekaj sekundah si na drugi spletni trgovini ali zaženeš iskanje na Googlu. Cena premaga še tako dobro spletno trgovino, podporo ali celo varnost nakupa. Glede na izkušnje pri nas s spletno trgovino, si upam trditi, da uporabnik ne gleda na kakovost spletne trgovine, ne na varnost nakupa (večinoma jim ta pojem ni povsem jasen), tudi podpora ni tako pomembna, ampak je cena tista bistvena, ki odloča o tem, ali bo uporabnik postal kupec. Znamka oz. poznanost spletne trgovine na internetu ne igra bistvene vloge, ni namreč pomembno, koliko časa si prisoten ali kako dobro si poznan med uporabniki. Odločitev za nakup je odvisna od:

cene artikla, cene poštnine, hitrosti dobave, načina plačila.

Prav tako tudi varnost, vizualno privlačna grafika ali marketinška besedila ne vplivajo na nakup oz. igrajo zelo majhno vlogo pri odločitvi nakupa. Govorimo o trgovinah, kjer se prodajajo različni izdelki drugih znamk in proizvajalcev. Vir: Spletno nakupovanje v Sloveniji in tujini - Forrester Research. http://www.forrester.com

Page 12: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 7

3. SPLATNI TRGOVINSKI SISTEMI Raziskali smo štiri različne trgovinske sisteme oz. platforme. Podrobno smo pogledali prednosti in slabosti ter jih predstavili na primerjalni tabeli. Lastnosti: OXID CE OXID PE

SEO (prilagojeno iskalniku): Search engine friendly URL DA DA RDF (Resource Description Framework) DA DA URL re-writes DA DA Canonical URL DA DA Integrirana plačevanja: Paypal NE (vtičnik) NE (vtičnik) Google Checkout NE (vtičnik) NE (vtičnik) Amazon Payments NE (vtičnik) NE (vtičnik) Število podprtih prehodov plačevanja Ni podatka Ni podatka Dokumentacija:

Dokumentacija na spletu Skupno čez 300 strani (v nemščini)

Skupno čez 300 strani (v nemščini)

Dokumentirana koda 5 (5) 5 (5) Napisanih knjig 1 (v nemščini) 1 (v nemščini) Lastnosti trgovine za sprednji del Ajax za dodajanje v košarico DA DA SEO url DA DA Prijava preko socialnega omrežja (Facebook, Twitter) DA (Facebook) DA (Facebook) Pomoč v živo NE NE Možnost mnenja kot gost Facebook Facebook Podobni artikli (related products) DA DA Dodatki (accesories) DA DA Stranke, ki so kupile ta produkt so tudi kupile (cross-sells) DA DA Ponudba artiklov na blagajni Slojna navigacija DA DA

Podprti jeziki Nemščina, Angleščina

Nemščina, Angleščina

Konfiguracija produkta po meri DA DA Facebook comments DA DA Facebook I like DA DA Twitter integracija NE Ne Blagajna na 1-strani NE NE Podora za različne denarne enote DA DA Nakup digitalnega izdelka DA DA Možnost predogleda izdelka na kategoriji NE NE Lastnosti trgovine v nadzorniku Pošiljanje e-novičk NE NE RSS vir (za novice, izdelke) DA DA Točkovanje zvestobe NE NE Integriran CMS NE DA

Page 13: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 8

Statistika in analiza NE NE Skupno spreminjanje cen NE NE Nastavitve nivo dostopa za nadzornika NE DA Dodajanje neomejeno število kategorij in artiklov DA DA Posodabljanje artiklov: Uvoz/Izvoz artiklov NE (modul) NE (modul) Hitro spreminjanje lastnosti artikla NE NE Tip programiranja, jezik in način DIV Layout - CSS based design CSS Layout CSS Layout Sistem predlog Smarty 2.6.26 Smarty 2.6.26 MVC (Model–view–controller) DA DA Tip programiranja (Procedural, OOP) OOP OOP Web Application Framework Front End Java jQuery (ver. 1.5.1) jQuery (ver. 1.5.1) Dodaj v košarico AJAX DA DA SOAP API (Simple Object Access Protocol) NE DA Windows aplikacija za opravljanje z trgovino NE NE Število MySQL tabel 135 135 Ostale lastnosti: Trgovina prirejena za mobilnike NE DA B2B NE DA Integriran affiliate program NE NE Integriran caching - predpomnilnik DA DA

Cikli posodabljanja 16 ciklov; 2012 / 15 ciklov; 2011 /

Število članov na forumu (popularnost) 21.603 (101.337 objav) /

Aktivnost članov na forumu 4,69 Število predlog (themes, templates) 10+ 10+ Število vtičnikov na trgu (plug-ins) 300 300

Optimizirano za trg Nemčija, Avstrija, Švica (Francija)

Nemčija, Avstrija, Švica (Francija)

Leto pričetka 2003 2003 Verzija trgovine 4,6 4,6 Izvor Nemčija (Freiburg) Nemčija (Freiburg) Število zaposlenih 60 60

Cena Brezplačen 3.588,00 € + davek

Lastnosti: Prestashop Magento CE CS-Cart Pro

SEO (prilagojeno iskalniku): Search engine friendly URL DA DA DA RDF (Resource Description Framework) NE NE NE URL re-writes DA NE NE Canonical URL DA NE NE Integrirana plačevanja: Paypal NE (vtičnik) DA Google Checkout DA NE DA Amazon Payments NE NE DA

Page 14: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 9

Število podprtih prehodov plačevanja 10 13 (ni točnega podatka) 70

Dokumentacija:

Dokumentacija na spletu 20+ 50+ Osnovna dokumentacija

Dokumentirana koda 4 (5) Namerno izbrisana 0 (5) 4 (5)

Napisanih knjig 1 10+ (v angleščini) 0

Lastnosti trgovine za sprednji del Ajax za dodajanje v košarico DA NE DA SEO url DA DA DA Prijava preko socialnega omrežja (Facebook, Twitter) NE NE DA Pomoč v živo NE NE DA Možnost mnenja kot gost DA DA DA Podobni artikli (related products) DA DA NE Dodatki (accesories) DA DA NE Stranke, ki so kupile ta produkt so tudi kupile (cross-sells) DA DA DA

Ponudba artiklov na blagajni

NE (z bloki DA)

Slojna navigacija DA DA DA

Podprti jeziki

Prevedeno v večino EU jezikov

Prevedeno v vse večje jezike

Delni prevod v nekatere večje jezike

Konfiguracija produkta po meri DA DA DA Facebook comments NE (vtičnik) NE (vtičnik) NE Facebook I like NE NE (vtičnik) NE Twitter integracija Ne Ne Ne Blagajna na 1-strani DA DA DA Podora za različne denarne enote DA NE DA Nakup digitalnega izdelka DA DA DA Možnost predogleda izdelka na kategoriji NE NE DA Lastnosti trgovine v nadzorniku Pošiljanje e-novičk NE NE DA RSS vir (za novice, izdelke) DA NE DA Točkovanje zvestobe DA NE DA Integriran CMS DA Delno Delno Statistika in analiza DA Delno Delno Skupno spreminjanje cen NE NE DA Nastavitve nivo dostopa za nadzornika DA DA DA Dodajanje neomejeno število kategorij in artiklov DA DA DA Posodabljanje artiklov: Uvoz/Izvoz artiklov CSV CSV, XML CSV Hitro spreminjanje lastnosti artikla NE NE NE Tip programiranja, jezik in način

DIV Layout - CSS based design CSS Layout CSS Layout

CSS Layout, 960 grid system

Page 15: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 10

Sistem predlog Smarty 3.1.8 PHP template Smarty 2.6.18

MVC (Model–view–controller) DA DA (Zend Framework) NO (delno)

Tip programiranja (Procedural, OOP) OOP OOP Proceduralno (linearno)

Web Application Framework

Zend framework NO

Front End Java jQuery (ver. 1.7.2)

Prototypejs (ver. 1.7)

jQuery (ver.1.5.2)

Dodaj v košarico AJAX DA NE

SOAP API (Simple Object Access Protocol)

NE (delno razvit iz skupnosti) DA NE

Windows aplikacija za opravljanje z trgovino DA DA V delu Število MySQL tabel 235 350 118 Ostale lastnosti:

Trgovina prirejena za mobilnike NE NE (samo enterprise) DA (Twigmo)

B2B NE NE NE Integriran affiliate program NE NE DA

Integriran caching - predpomnilnik NE NE DELNO (ga je treba vključiti)

Cikli posodabljanja 12 ciklov; 2012 6 ciklov; 2012, 11 ciklov 2011 6 ciklov; 2012

Število članov na forumu (popularnost) 357.435 (912.132 objav)

985.554 (541.637 objav)

11.426 (140,791 objav)

Aktivnost članov na forumu 2,55 0,54 12,3 Število predlog (themes, templates) 700+ 1000+ pod 50 Število vtičnikov na trgu (plug-ins) 2000 3,226 10+

Optimizirano za trg Globalno / Francija Globalno / ZDA

Rusija / EU / Globalno

Leto pričetka 2007 2008 2005 Verzija trgovine 1,5 ver 1.7.0.2 3.0.1

Izvor Francija Ukrajina (Kijev) Rusija (Ulyanovsk)

Število zaposlenih 250 do 300 10 ali več (ni podatka)

Cena Brezplačen Brezplačen 262,81 €

Tabela 1: Primerjave spletnih trgovinskih sistemov

3.1. TRGOVINSKI SISTEM PRESTASHOP Ena izmed glavnih prednosti je, da ima trgovina močno skupnost (forum), podatki v tabelici kažejo, da so uporabniki zelo aktivni. Zelo obsežna je izbira predlog (1000+) in različnih dodatkov oz. vtičnikov. Skoraj da ni vmesnika ali predloge, ki ne bi reševala uporabnikovega problema. Koda je dokaj solidno dokumentirana, vendar je za povprečnega uporabnika prezahtevna in zahteva kar nekaj truda za minimalne spremembe. Izgled strani določamo s tako imenovanimi “hooksi” (kljukami). Predloge so razdeljene na domačo stran, kategorijo, stran z izdelkom, blagajno, levi blok, desni blok, nogo, glavo … S “kljuko” določimo, kje se

Page 16: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 11

moduli na spletni strani nahajajo. Nadzornik je oblikovalsko privlačen, vendar z novo verzijo podoben trgovini Magento. Trgovina vključuje vse pomembne sisteme plačevanja (z dodatkom tudi Slovenski EON).

Slika 1 : Noga spletne strani (www.prestashop.com)

Slika 1. prikazuje, da smo v nogo spletne strani vnesli kljuko modula Newsletter. Z izbiro predloge in hitro namestitvijo imamo trgovino v delujočem načinu postavljeno v nekaj urah. Prednosti trgovine:

● Velika izbira predlog, ● velika izbira vtičnikov in dodatkov, ● zelo aktiven forum (veliko članov), ● ne zahteva veliko učenja za osnovno postavitev, ● prevedena je v veliko tujih jezikov, ● »Ajax« dodajanje izdelka v košarico, ● velika izbira plačilnih sredstev.

Slabosti trgovine Prestashop: Dobro poznavanje objektnega programiranja, površno dokumentirana koda, vzdrževanje in nadgraditev zahtevajo veliko truda. Zaradi prehajanja v povsem nove prenovljene verzije je nadgraditev zelo zahtevna. Moduli niso standardizirani in ne zahteva se minimalnih standardov varnosti, zato je trgovina lahko ranljiva na napade. Zelo težko je narediti povsem novo predlogo (themes). Običajna praksa spreminjanja oblike predloge se opravlja na način spreminjanja Cascading Style Sheets (CSS). Zahteva neprestano posodabljanje in vzdrževanje. Hitro spreminjanje cen in opis produkta je počasen. V nadzorniku ni

Page 17: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 12

omogočeno skupno spreminjanje cen, vsakemu izdelku posebej je potrebno spreminjati ceno. Trgovina daje občutek nedovršenosti. Slabosti:

● Predloge in vtičniki so plačljivi (v osnovi se lahko zapravi čez 200 €), ● smarty template, ● zapleteno je spreminjanje predloge, ● slaba dokumentacija, ● nadgraditve so težke, ● koda ni dovršena.

3.2. TRGOVINSKI SISTEM OXID Prednosti trgovine OXID CE (community edition): Prednost OXID-a leži v dovršeni sofisticirani kodi, to je zelo natančno dokumentirana koda. MySQL tabel je samo 135, kar kaže na zelo dobro premišljen sistem standardizirane (časovno določene nadgraditve) in predhodno preverjene nadgraditve. Z OXID-om je nadgraditev enostavna in brez dodatnih zapletov. Zelo malo je ključnih popravkov, koda je dokaj preverjena, testirana, napisana inteligentno. Pri ostalih trgovinah deluje sistem nadgraditve tako, da objavijo novejšo verzijo, potem pa skupnost prijavi napake in popravki se naredijo za naslednjo verzijo trgovine (nočna mora za vsakega skrbnika strani). Trgovina je namenjena za resna, velika podjetja, ki jim izpad zaradi površno spisane kode lahko prinese veliko poslovne škode. Večinoma imajo vtičniki certifikat. Trgovina je hitra, odzivna in optimizirana za velik promet obiskovalcev. OXID je primeren predvsem za velike trgovine. Prednost je tudi integracija s socialnim omrežjem Facebook. Vsekakor resna dovršena trgovinska platforma za resne velike trgovine, z možnostjo nadgraditve na PE verzijo, ki vključuje tudi SOAP (Simple Object Access Protocol) in B2B trgovanje. Direktor Roland Fesenmayr, CEO of OXID, je v nekaj povedih povzel, katere so največje prednosti OXID-a: “Some of its strengths are complete functionality for B2C [business-to-consumer], B2B [business-to-business] and social commerce scenarios, as well as sophisticated, server resource-friendly performance. We offer search engine optimization based on the latest technological standards and high quality software, due to our development process with unit testing. We use a SOAP/CSV interface for integration of third party systems.“ -- Roland Fesenmayr Vir: Cart of the Week OXID –eShop. http://www.practicalecommerce.com/articles/989-Cart-of-the-Week-OXID-eShop Slabosti OXID-a: Večina pomoči in dokumentacije na spletu je v nemščini. Nadzornik je nepregleden, neprivlačen in v seznamu artiklov ni hitrega pregleda cen. Trgovina je narejena predvsem za nemško govoreči trg. Plačljiva profesionalna verzija OXID-a je 3.500 €. Brezplačnih ali plačljivih predlog na trgu ni, tako da si jo primoran izdelati sam. Namestitev je hitra in enostavna, vendar lahko minejo tedni ali meseci, preden trgovino predelamo, spremenimo obliko (design) in priredimo za resno prodajo na spletu. Člani na forumu so dokaj aktivni, vendar bolj na nemškem delu foruma.

Page 18: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 13

Slika 2: OXID spletna trgovina (www.oxid-esales.com)

3.3. TRGOVINSKI SISTEM MAGENTO Prednosti trgovine Magento: Prednosti trgovine Magento so v ogromni izbiri predlog, dodatkov, vtičnikov. Trgovino lahko postavimo v nekaj urah. Nadzornik je grafično zelo dodelan in dovršen. Podprti so vsi plačilni sistemi. Izdanih je preko deset knjig. Ena izmed prednosti Magenta, vsaj po mojem mnenju, je, da ima PHP template sistem in ne Smarty. Prednosti Magenta so:

● Veliko predlog, ● ogromna izbira vtičnikov in dodatkov, ● podprti vsi plačilni sistemi, ● dokaj solidni prevodi v različne tuje jezike, ● nadzornik je vizualno privlačen, ● PHP template sistem.

Page 19: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 14

Slika 3: Spletna trgovina Magento (www.magentocommerce.com)

Slabosti Magenta: Trgovina je izredno počasna, deluje težko in obsežno. Samo pri izvršitvi strani z izdelkom je SQL izvršil za 12 MB veliko datoteko z arrayem. Zahteva močno pravilno nastavljen strežnik za optimalno delovanje. Podatkovni model je zasnovan na Entity-Attribute-Value (EAV). To zahteva veliko SQL tabel in veliko SQL poizvedovanj (Magento ima 350 MySQL tabel). Namerno so odstranili komentarje v kodi, da je delo programerja oteženo tako za popravke ali kakšne nadgraditve. Njihov začetni poslovni model je slonel na pomoči. Koda je obsežna (več milijonov vrstic), nepregledna. Trgovina deluje na ZendFrameworku, ki je po mojem mnenju popolnoma zgrešeno in za programerja zahteva še dodatno učenje. Posodobitve so prava mora in velik riziko, trgovina se lahko popolnoma podre. Podpore na forumu praktični ni, statistika pa kaže, da je večino uporabnikov neaktivnih. Na kratko, Magento je počasen, okoren, težak za popravljanje, navodil ni, podpora na forumu je slaba, na zunaj pa je vizualno privlačen. Magenta ne priporočam manjšim podjetjem, ki si ne morejo privoščiti ekipe programerjev za vzdrževanje in razvijanje orodij, specifičnih za njihovo trgovino. Cena zmogljivejše trgovine Magneto Enterprise na letni ravni je 11.136 €.

Page 20: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 15

Postavitve strani (layout) se upravlja z XML layout datotekami:

Slika 4: XML layout datoteka, kje se nahaja

Slika 5: XML layout datoteka

Page 21: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 16

Layout (postavitev) so virtualne komponente Magento aplikacije. Z XML bloki določamo izgled strani, glavo strani (<head>), pod strani, artikel strani in blagajno. Določamo, kateri modul se bo naložil, kakšna je glava strani (java script, css), razrez strani, levi in desni del predloge, vsebino strani in nogo predloge itd. Z Layout XML imamo nadzor tako nad vizualno podobo strani kot nad komponentami in html glavo strani (<head></head>). Layout se nahaja v direktoriju, kjer imamo svojo temo: app/design/frontend/your_interface/your_theme/layout/ Slabosti Magenta:

● JavaScript Prototype, ● neodzivni oz. neaktivni člani na forumu, ● ZendFramework zahteva dodatno učenje, novejše verzije je nemogoče nadgraditi, ● zelo počasna platforma, ● nadgraditve na novejšo verzijo so težke, nočna mora vzdrževalca, ● profesionalna pomoč je plačljiva, ● vtičniki ne delujejo po posodobitvi oz. niso podprti, ● težko upravljanje s postavitvijo strani, potrebno je dodatno znanje z XMLji (Layout), ● veliko zasede, ogromna koda in ver 1.7 ima že 350 MySQL tabel, ● programska koda nima komentarjev (so namerno izbrisani), ● zahteva mesece učenja, preden se programer nauči upravljati s sistemom, ● programska koda ni organizirana, slaba praksa objektnega programiranja.

Slabost Magenta je tudi uporaba JaveScript Prototype namesto bolj razširjene, podprte in dokumentirane knjižnice jQuery. 3.4. TRGOVINSKI SISTEM CS-CART Prednosti CS-Carta: Prednosti se kažejo v enostavni, jasni, dokumentirani programski kodi. Programiranje je proceduralno (linearno) in omogoča tudi začetniku, da poseže v kodo. Ena od prednosti je tudi dobra pomoč tako iz strani izdelovalcev kot dobra pomoč na forumu iz strani uporabnikov. Ostale prednosti so še: zelo enostavna lahka platforma z vsemi ključnimi dodatki in vtičniki, hitro lahko priredimo osnovno obliko trgovine po lastnih željah in napišemo vtičnik. Nadzornik je zelo enostaven za uporabo in omogoča hitro spreminjanje cen artiklom (pomanjkljivost pri ostalih sistemih). Moč CS-Carta leži v blokih, ki jih lahko dodajamo v različne lokacije. Hitro, z nekaj kliki, lahko popolnoma spremenimo videz trgovine, brez poseganja v kodo oz. znanja programskega jezika ali učenja trgovine.

Page 22: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 17

Osnovne lokacije: Bloki:

- Default - 404 eror - Auth - Košarica - Kategorije - Blagajna - Domača stran - Naročilo - Strani - Izdelek - Profili

- Logo - Moj račun - Jezik - Glavna vsebina - Hitri linki - Iskalnik - Vrhnji meni - Zadnji izdelki - Plačilne ikone - Informacije o naročilu - 404 eror - Socialni linki - Denarne valute, ...

Tabela 2: Lokacije in bloki

Sistem upravljanja je razdeljen na različne lokacije, lokacija oz. stran pa je razdeljena na dve različni mreži. Prva vertikalna mreža strani vsebuje: vrh strani, glavo (top), sredino strani, telo (centralno) in nogo strani (foter). Druga mreža je razdeljena horizontalno. Horizontalna mreža (grid) ima 100 % širino 960px, od te enote je 960px razdeljenih v 16 majhnih mrež, zasnovana po sitemu strani http://960.gs. Bloke ali vtičnike lahko dodajamo v vertikalno mrežo (glava, telo in v nogo) in v horizontalno mrežo (16). Bloke lahko dodajamo poljubno v katerokoli mrežo ali spišemo svoj blok in ga dodamo na določeno lokacijo. Prednost CS-carta je tudi dodajanje artikla v košarico z AJAX-om in hiter predogled izdelka na straneh kategorije. Slabosti CS-Carta: Namenjen je za majhne, nezahtevne strani. Brezplačnih ali plačljivih predlog (them) ni, obsojen si na osnovno predlogo. Če želiš spremeniti celoten design (obliko), ti to lahko vzame mesec ali več mesecev dela. Posodobitve so lahko zahtevne in dolgotrajne (odvisno koliko smo spreminjali osnovno predlogo). Predhodno je treba zadevo testirati, kar ponovno zahteva nekaj truda in časa. V osnovi trgovina deluje zelo hitro, strani se odpirajo lahkotno. Ena izmed slabosti, ki jo vidim pri CS-Cartu kot tudi pri ostalih trgovinah (Oxid, Prestashop), je, da vsi delajo na sistemu predlog Smarty (template engine) tpl., razen Magenta, ki ima direktno PHP template engine (.phtml). Zunanje tretje knjižnice v CS-Cartu niso redno posodobljene (še zmeraj uporablja staro verzijo Smarty 2.6.18 namesto novejše ver. 2.6.26 ali nove generacije Smarty ver. 3.1.11).

Page 23: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 18

Upravljanje z bloki:

Slika 6: Upravljanje z bloki

Page 24: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 19

Nadzornik CS-Carta:

Slika 7: Nadzornik Motor predloge (Smarty template engine) se uporablja z namenom, da ločimo prezentacijo od kode. Povedano enostavneje, programerji so ločeni od oblikovalcev. Tako lahko programer in oblikovalec neodvisno razvijata oz. delata na sistemu, brez da bi bilo potrebno medsebojno komunicirati. Programer dela na sistemu in oblikovalec neodvisno od tega, kaj bo naredil programer dela na sprednjemu delu, obliki strani. Druga prednost je boljša varnost. Vir: When to use php template engines. http://stackoverflow.com/questions/5888089/when-to-use-php-template-engines Slabosti Smarty predloge:

Poveča se obremenitev strežnika, koda je težje berljiva, dodatno se je treba naučiti jezika Smarty, redno je treba posodabljati.

OXID, Prestashop, CS-Cart uporablja Smarty motor za predloge oz. themo, obliko strani. Magento pa uporablja PHP template engine. Kakšna je razlika med PHP template, ki ga uporablja MAGNETO, in Smarty motorjem so naslednji:

Page 25: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 20

PHP:

Code:

<?=$foo?>

Smarty:

Code:

{$foo}

------------------------------------------------------- PHP:

Code:

<?=$foo['bar']?>

Smarty:

Code:

{$foo.bar}

------------------------------------------------------- PHP:

Code:

<?php foreach($foo as $bar): ?>

Smarty:

Code:

{foreach $foo as $bar}

PHP:

Code:

<?php if(!empty($foo)): ?> <?php foreach($foo as $bar): ?>

<a href="<?=$bar['zig']?>"><?=$bar['zag']?></a> <a href="<?=$bar['zig2']?>"><?=$bar['zag2']?></a> <a href="<?=$bar['zig3']?>"><?=$bar['zag3']?></a>

<?php endforeach; ?> <?php else: ?>

There were no rows found. <?php endif; ?>

Page 26: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 21

Smarty:

Code:

{foreach $foo as $bar} <a href="{$bar.zig}">{$bar.zag}</a>

<a href="{$bar.zig2}">{$bar.zag2}</a> <a href="{$bar.zig3}">{$bar.zag3}</a>

{foreachelse} There were no rows found.

{/foreach}

------------------------------------------------------- PHP:

Code:

<?php echo $foo; ?>

Smarty:

Code:

{$foo}

------------------------------------------------------- PHP:

Code:

<a href="<?php echo $bar['zig']; ?>"><?php echo $bar['zag']; ?></a> <a href="<?php echo $bar['zig2']; ?>"><?php echo $bar['zag2']; ?></a> <a href="<?php echo $bar['zig3']; ?>"><?php echo $bar['zag3']; ?></a>

Smarty:

Code:

<a href="{$bar.zig}">{$bar.zag}</a> <a href="{$bar.zig2}">{$bar.zag2}</a> <a href="{$bar.zig3}">{$bar.zag3}</a>

------------------------------------------------------- PHP may write:

Code:

<?php echo(smarty_modifier_name(5)); ?>

Smarty:

Code:

{5|name}

Page 27: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 22

Primer OXID Header predloge:

Slika 8: OXID predloge

Magento predloga Poll:

Slika 9: Magento predloge

Page 28: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 23

Kontrola nad izgledom strani, moduli in motor predloge (template enginee): MAGENTO OXID CS-CART Prestashop

Layout (postavitev)

XML datoteke: catalog.xml page.xml checkout.xml sales.xml review.xml payment.xml

Predloge: base.tpl footer.tpl header.tpl page.tpl sidebar.tpl popup.tpl

S lokacijami in bloke v nadzorniku.

S Hooks pripenjamo module v nadzorniku.

Motor predloge PHP template .phtml

Smarty ver. 2.6.26

Smarty ver. 2.6.18

Smarty ver. 3.1.8

Enostavnost (od 1 do 5)

2 1 5 4

Tabela 3: Pregled na stran, moduli in motor predloge

4. IZDELAVA SPLETNE TRGOVINE Odločila sem se, da na podlagi naslednjih dejstev uporabimo sistem CS-Cart pri izdelavi spletne trgovine za naše izdelke. Trgovina bo specializirana za otroška oblačila od 1 do 6 leta starosti in ne bo obsegala v kasnejši fazi več kot 1.000 oblačil. Promet trgovine bo v začetku na slovenskem tržišču majhen, kasneje pa trgovina lahko tudi servira večje število prometa oz. obiska zaradi določene rešitve predpomnilnika, ki jih ima cs-cart.

4.1. IZBOR PRIMERNEGA TRGOVINESKEGA SISTEMA Glede na to da je pri večjih sistem potrebno redno vzdrževanje, veliko truda za posodabljanje in sama kompleksnost velikih sistemov, ki presegajo moje znanje, je CS-cart s proceduralnim načinom programiranja ravno kot na mestu. Ne zahteva poglobljenega OO programiranja, postavitev strani se dá brez poglabljanja v sistem prirediti po svojih željah v nekaj dneh. Skratka, je enostaven za uporabo, programska koda je razumljiva, posodobitve so redne in tudi sistem daje občutek lahkotnosti. Ena od prednosti CS-Carta je, da je delno preveden tudi v slovenski jezik. Podprte ima tudi ostale večje svetovne jezike, tako da ni omejitev za nadaljnjo širitev na ostale bolj zahtevne trge. Na CS-Cart forumu so uporabniki zelo aktivni, najbolj od vseh ostalih sistemov. Po podatkih vsak uporabnik povprečno naredi 12 objav. Glede na mojo specifiko izdelkov ima CS-Cart predhodno že privzeto obliko, kakršno si želim imeti, tako da ni potrebno posebej posegati v predlogo in globinsko spreminjati css nastavitev in predloge sistema. Prednost je tudi v tem, da bodo kasnejše posodobitve enostavnejše, ker globljih posebnih nastavitev v sistemu ne bo. Problem pri večjih sistemih

Page 29: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 24

in specifičnih predlogah je, da se z vsako nadgraditvijo pojavijo zapleti ter za sabo potegnejo veliko časa in denarja, kar pa v teh razmerah ni priporočljivo. Všečna je tudi uporabniku enostavna rešitev dodajanja izdelka v košarico s pomočjo »Ajax« funkcije. S prenosom izdelka v košarico namreč ni potrebno, da se brskalnik osveži, ampak se na zaslonu prikaže okno z vsebino košarice in ponudi možnost “nadaljevanja kupovanja” ali “pojdi na blagajno”. Od ostalih trgovinskih sistemov ima že implementiran pridružitveni program (affiliate program). Pridružitveni program omogoča, da lastniki spletnih strani oglašujejo ali kako drugače preko povezave promovirajo trgovino. S tem neposredno od nakupa izdelka iztržijo svoj delež zaslužka. Skrbniki spletnih strani se prijavijo v pridružitveni program, nakar dobijo specifičen url naslov, ki ga objavijo na svoji spletni strani. S tem ko uporabnik, ki na njihovi spletni stran s klikom na povezavo prispe na trgovino in kupi izdelek, se od tega nakupa njim šteje določen procent od zneska. Zadeva v osnovi deluje podobno kot google ads oglaševanje, s tem da se tam štejejo kliki na povezavo, tukaj pa od samega nakupa izdelka. Za ostale trgovinske sisteme so razviti vtičniki, vendar jih je potrebno dokupiti in tudi kasneje se pojavlja vprašanje vzdrževanja, posodabljanja in pomoči. CS-Cart ima pridružitveni program že dodan v samem paketu trgovine. Pri izbiri mi je bilo pomembno tudi to, da ima možnost dodatka Twigmo, grafični vmesnik za mobilne telefone (iPhone, iPod Touch, iPad and Android devices). Twigmo ugotovi napravo na strani uporabnika in ga preusmeri na specialno oblikovano spletno stran za mobilnike. Tako zajamemo širši krog uporabnikov, tistih, ki specifično uporabljajo mobilne naprave za deskanje po spletnem omrežju. CS-Cart ima dobro podprt SEO (search engine optimization) in kot dodatek se da dokupiti Rich snippets (microdata, microformats, and RDFa) vtičnik: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170. To je nekaj dodanega besedila, ki se prikaže pri rezultatih na Googlu, namenjenih za uporabnika, da dobi občutek, zakaj je pomembno za njihovo poizvedbo. Gre za zapis HTML5 microdata formata in je način zapisa specifične informacije za vsebine, kot so mnenje, osebne informacije, dogodki, ocene itd. Google, ki obišče spletno stran z zapisom RDF, zapiše informacije, ki jih kasneje pri iskanju uporabniku prikaže.

Slika 10: Prikaz dodatnih informacij pod rezultatom (www.google.com) Običajen zapis v HTMLju na spletni strani: <div> Sem elektro inženir Janez Novak in delam posebne sisteme in tukaj je moja stran <a href=”http://www.kurjava.com”>www.kurjava.si</a>. Moja naslov podjetja je Trčarjeva 14a Ljubljana</div>

Page 30: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 25

Isti HTML zapis z zapisom HTML5 microdata: <div xmlns:v=”http://rdf.data-vocabulary.org/#” typeof=”v:Person”> Sem <span property=”v:title”>elektro inženir</span> <span property=”v:name”>Janez Novak</span>, in delam poseben sistem kurjave <div itemscope itemtype="http://kurjava.si/Izdelek"> <span itemprop="name">Power Fire Iron </span> </div> Naslov spletne strain: <a href=”http://www.kurjava.si” rel=”v:url”>www.kurjava.si</a>. <div itemprop="address" itemscope itemtype="http://kurjava.si/Naslov"> <span itemprop="streetAddress">Trčarjeva 14a</span> <span itemprop="addressLocality">Ljubljana</span>, </div> Telefon: <span itemprop="telephone">040 100 000</span> HTML5: http://dev.w3.org/html5/md/ RDF zapis bomo uporabili pri izdelkih z naslednjo vsebino:

Slika izdelka, mnenja izdelka in kategorije, število mnenj za izdelek, ocene izdelka.

CS-Cart ima tudi bonus sitem oz. program zvestobe. Stranka pri vsakem nakupu dobi točko za zvestobo, ob naslednjem nakupu lahko te točke tudi koristi (podobno kot Mercator pike). Ena od naslednjih odločitev, zakaj smo se odločili za CS-Cart, ki je edinstveni dodatek v paketu cs-Carta, je registracija za darilni bon. Cs-Cart omogoča, da se uporabnik registrira in ustvari seznam željenih izdelkov. Ta seznam lahko vidijo samo povabljeni oz. uporabnik lahko omogoči, da je seznam javno dostopen. Uporabnik lahko povabljenim pošlje obvestilo, v katerem sta dve povezavi: prva je povezava do željenih artiklov, druga pa je povezava za odjavo od obvestil. Uporabnik lahko tudi omogoči objavljanje komentarjev na seznamu želja. Ko mu nekdo kupi željen izdelek, se ta avtomatično odstrani iz seznama želja. Na ta način se lahko trgovini tudi poveča obiskanost in prepoznavnost. 4.2. IZBOR VSEBINE, INFORMACIJ IN STORITEV Spletna trgovina bo ponujala unikatna otroška oblačila za najmlajše. Oblačila bodo domača, posebna in unikatna. Pred izdelavo vsake trgovine smo skupaj s podjetjem Dotkomp d.o.o izdelali persono. To je neka namišljena idealna oseba, ki namišljeno sedi pred teboj, ko se oblikuje ali načrtuje. Na podlagi izdelane persone je izdelan cel koncept strani. Na podlagi persone so izbrane barve, besedila in prodajna pisma. Podatki persone zajemajo vse, od starosti, značaja, v kaj verjame, kakšna so prepričanja, motivacije, želje …. S persono je lažje, točneje in usmerjeno narediti koncept strani, je kot smerokaz pri izdelavi strani. V primeru da vemo, kdo je naša stranka, vemo tudi, kako postaviti spletno stran. Brez poznavanja ciljne skupine strank ni fokusa, posledično pravega oglaševanja in ni uspešne prodaje.

Page 31: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 26

Kako izdelati persono: Pri izdelavi persone je treba odgovoriti na nekaj vprašanj. Na spletni strani smo dobili tri fotografije oseb, ki so ustrezale idealni stranki. Naredili smo tri namišljene persone, ki namišljeno sedijo nasproti mize.

VPRAŠALNIK Persona 1 Persona 2 Persona 3

Ime Jana Nina Bela

Koliko so stari 44 36 33

Koliko imajo otrok 1 1 2

Kaj jih zanima (hobiji) Golf, gledanje športa na Tv-ju.

Mestne čenče, status, denar, prestiž

Šport, gibanje

Kaj jim je všeč in kaj sovražijo?

Ne prenese neodgovornosti, je skeptičen in premišljen, analitičen

Ne mara, da so otroci zanemarjeni, jim kupuje rač. igrice, da se jim ni treba ukvarjati z otroki.

Posedati doma in gledati TV.

Izobrazba Višja Višja Srednja

Dohodki Visoki Srednji Srednji nizko

Kaj si želijo za otroke? Da se otrok veliko giblje na prostem, športa, potuje.

Da so vedno vizualno urejeni.

Mirno družinsko življenje, druženje v naravi, gibanje, toplina.

Kaj mu je pomembno za otroka?

Da ne bo predebel, da ga ne zebe, da preživlja dneve zunaj med vrstniki in da se mu vedno nekaj dogaja

Da se bodo ustrezno obnašali v družbi in imeli nek status.

Toplina, druženje na prostem z vrstniki.

Karakter Analitičen, racionalen, močan ego, siten

Čustvena, socialno naravnana, hinavsko prijazna

Mirna, zadržana

Kaj morajo vedeti, preden kupijo artikel?

Vse prednosti in veliko podkrepljenih podatkov

Da mu obleka pristaja in da je modno privlačna.

Da se otrok dobro počuti v obleki, udobnost, da obleka diha

Imajo družino Ločen Ločena / Poročena DA

Tabela 4: Izdelava persone za spletno stran

Page 32: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 27

Persona 2: Nina je stara 36 let, dobro izobražena, situirana, srednje visoki dohodki in dokaj informirana in načitana. Ima enega otroka po imenu Patrik, star je 3 leta. Zna uporabljati internet in tudi nakupovalne navade na internetu so dobro ustaljene. Na spletu išče informacije po forumih (materinstvo, šola, vzgoja) ali se giblje na socialnih omrežjih. Google iskalnik uporablja poredko, razen kadar išče rešitev problema, večinoma pa hodi na poznane novičarske portale, forume in socialna omrežja. Čez vikend hodi ven, na razne izlete, večinoma pa zaradi časovne stiske malo časa porabi doma pred internetom (nekaj ur tedensko). Zaposlena je v pisarni in od tam, ko imajo čas, skoči na svetovni splet. Za komunikacijo uporablja Live Messenger, kot glavno komunikacijsko orodje pa uporablja @gmail.com. Veliko ji pomenijo priporočilo prijateljice ali mnenja na forumu, nekako je bolj dovzetna za vplive iz okolja. Da bi kupila nek izdelek, mora biti najprej privlačen, nato praktičen ter dovolj unikaten, da izdelek projicira skrbnost, prestiž (status) in pritegne hvalo. Rada se druži v skupinah na javnih mestih, hodi na kave v velike nakupovalne centre, je mestna ženska. Kupuje boljše blagovne znamke, gleda Sex v mestu in je navdušena nad velikimi mesti (Bruselj, NY, Paris, LA itd). Druženje jo dela tisto, kar je, zato daje veliko na mnenje drugih in je nekako zelo močno vpeta v socialno matrico. Hoče biti del množice, del mesta in sistema, pa vendar drugačna in posebna. Veliko ji pomeni zunanjost in to tudi rada pokaže. Pri nakupu ne gleda na ceno, četudi denarja ne bi imela. Gleda skozi oči potrošništva, nakupovanje v centrih ji predstavlja del navad. Če gre Slovenec v nedeljo v hribe ali k maši, gre ona v nedeljo v “shoping center”, na druženje, to je njen običaj. Persona 3: Bela je stara 33 let, zaposlena, srednje nizko plačano delo. Je predmestno dekle, njeni starši so bili delavskega stanu, stari starši pa imajo manjšo kmetijo, kjer stric skrbi za nasledstvo. Je bolj športno naravnana, rada hodi v hribe, blizu sta ji pilates in yoga.. Vendar pa sedaj zaradi dela, z dvema otrokoma (Matic, 5 let, Klara, 2 leti) nima časa za dodatne športne aktivnosti. Njen način oblačenja je preprost, ne nosi dragih oblek, kupuje srednje kakovostne znamke. Uvoženih oblačil ne mara in tudi v nizke cenovne butike ne mara zahajati. Ded jo je vseskozi opozarjal, da so največja grožnja Kitajci. Živi v montažni hiši, z lepo travnato gredico, za katero skrbi mož. Vrta nimata, saj vse kupujeta v trgovini. Mož je prodajalec v salonu. Čez vikende se veliko gibljejo na zvežem zraku. Veliko dajo na športne aktivnosti, tudi stil oblačenja je bolj elegantno športen. Pozimi hodijo smučat, skozi leto pa hodijo na kakšne manjše hribe ali po gozdu. V mesta ne zahaja veliko in tudi modnim trendom ne sledi. Je bolj dekle gibanja, karakterno mirne narave, ki nikoli ni bralo Cosmopolitana. Velikokrat gredo na obisk k dediju in babici, da se lahko oba otroka gibljeta na zraku in norita na kmetiji, ta svoboda gibanja ji je všeč. Verjame, da mora otrok preživeti otroštvo zunaj, stran od računalnika, igric, se družiti z vrstniki na prostem. Otroška oblačila so športna, praktična za gibanje in dovolj kakovostna, da vzdržijo vsaj nekaj pranj. Internet uporablja poredko, sama zase pravi, da ni tehnično nadarjena, od elektronike beži. Če kaj potrebujeta, na internetu pogleda mož, sama pa sem in tja skoči na svoj gmail.com račun, da plača mesečne položnice. Prijateljice se včasih pogovarjajo o internetu (o facebook-u), pa kar presliši debato. Če že kaj išče na spletu, uporabi znane iskalnike. Skupne točke persone: Naša glavna ciljna skupina so ženske, starosti od 25 do 38 let. Njihov življenjski stil je srednje visok, pri izbiri oblek gledajo na kroj, udobnost, praktičnost in barve. Cilj je narediti dovolj močno znamko, ki bo prepoznavna, močna, prestižna in posebna, pa vendar strogo atraktivna tako s pridihom mestne elegance kot s športno oblikovanimi kroji.

Page 33: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 28

Pri oglaševanju se uporablja materinske forume, google oglaševanje v @gmailu, kanale za nego otroka. 4.3. GRAFIKA SPLETNE TRGOVINE Vrstni red pri grafičnem oblikovanju:

Določitev barve na podlagi persone, izbira imena, znamke, domene, izdelava ožičenega modela, prototip (wireframe), grafično oblikovanje, prenos grafike v HTML kodo in v predlogo trgovine, revizija in popravki.

Teorija barve Barve na spletni strani so pomembne in določijo ton, občutke in zaznamujejo ime podjetja. Barve povečajo fokus, poudarijo elemente, obogatijo izkušnjo ali vplivajo na odločitve. Večina spletnih oblikovalcev ne pozna teorij barv, zato dandanes poredko vidimo lepo barvno usklajeno spletno stran. Z izbiro prave barve lahko vplivajo na prodajo pozitivno ali negativno oz. povzročijo nezaželene učinke. Zato je prava premišljena izbira barv zelo pomembna, saj vpliva na naše občutke. V praksi lahko trdimo, da če v začetni fazi ne izberemo prave kombinacije barv, lahko še kako dobra spletna stran izpade nedodelano, amatersko in neprivlačno. V podjetju se vedno vprašamo, kakšne občutke želimo projicirati oz kakšne občutke naj stran na nezaznavnem nivoju oddaja, katera barva naj bo v ospredju (foreground), katera v ozadju (background). Zato v podjetju vedno namenimo 40 % do 50 % časa ravno barvam. Barve na nas vplivajo psihično in telesno. Lahko nas pomirijo ali razdražijo (povečajo srčni pulz). Barvno kolo je osnovno orodje pri določanju barve. Prvega je zasnoval že Isaac Newton leta 1666.

Slika 11: Barvno kolo (www.tigercolor.com) Barvno kolo ločimo na tri dele:

Primarne barve, sekundarne barve, terciarne barve .

Page 34: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 29

Naše oko ima tri različne tipe barvnih receptorjev, ki se odzivajo povsem drugače na vsako barvo posebej. Te barve so modra, rdeča in rumena. Rdeča barva vpliva na receptorje v možganih povsem drugače kot modra barva. Primarne barve so sestavljene iz treh osnovnih barv, to so: rdeča, modra, rumena. Z mešanjem primarnih barv dobimo sekundarne barve, zeleno, oranžno, vijolično. Z mešanjem sekundarnih in primarnih barv dobimo šest terciarnih barv: rdeče-vijolično, rdeče-oranžno, modro-zeleno, rumeno-zeleno, modro-vijolično in rumeno-oranžno.

Slika 12: Barvna kolesa (www.slikarskimaterial.si/barvna-teorija, www.en.wikipedia.org/wiki/RYB_color_model)

Barve ločimo na tople in hladne barve: Tople barve so bolj živahne in energične, prostor naredijo večji, ga optično povečajo. Hladne barve dajejo vtis pomirjenosti, prostor zožijo, skrčijo. Črna, siva in bela so nevtralne barve. Odvisno je tudi, s katero barvo se kombinira.

Page 35: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 30

Barvna harmonija – tehnika, kako narediti barvno shemo Pri izbiri barve je pomembna tudi količina določene barve. V podjetju Dotkomp se držimo pravil deleža posameznih barv:

Primarna barva: 40 % do 70 %, sekundarna barva: 20 % do 40 %, tretja barva: 10 % do 20 %.

Delež je odvisen tudi od tematike.

Slika 13: Tople in hladne barve

Kombinacije barvnih shem:

Komplementarne barve: Barve so si nasprotujoče, na barvnem kolesu vidimo pink barvo in nasprotujočo barvo zeleno. Barvi si nista v harmoniji in se med seboj “tepeta”. Pri uporabi te barvne sheme je treba biti previden, ker barvi sami po sebi ne sodita skupaj. To shemo uporabimo na spletnih straneh takrat, kadar želimo, da določen element ali blok izrazito izstopa.

Page 36: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 31

Podobna barvna shema: Barve so si v harmoniji, med seboj sorodne. Na barvnem kolesu vidimo med seboj povezane barve, kot so zelena, temno zelena in svetlo zelena/rumena. Harmonične barve najdemo v naravi in so prijetne za oči. Oblikovana spletna stran s to barvno kombinacijo je prijetnejša in za oči skladna. Ta način oz. ta barvna shema kombinacije izbire je primerna za začetnike. Izbere se glavno primarno barvo, sekundarno in tretjo barvo za poudarke.

Triadna barvna shema: Barve so enakomerno porazdeljene okoli barvnega kolesca. Pri uporabi te sheme naj se izbere glavno barvo, ostali dve sta za odtenek oz. poudarek in ne smeta biti prevladujoči barvi. Ta shema je priljubljena med umetniki, saj ponuja močan vizualni kontrast, medtem ko ohranja ravnotežje in barvno bogastvo.

Komplementarno razdeljeni barvi: Ta shema je podobna barvni shemi komplementarne barve z več odtenki. Ponuja močan kontrast, vendar z manj napetosti. Izbere se glavno barvo in dva nasprotujoča si barvna odtenka. Slabost je v tem, da je ta način sheme težje uskladiti kot podobno barvno shemo.

Pravokotna barvna shema: Pri pravokotni barvni shemi ima vsaka barva nasprotujočo si barvo. Je najbolj barvita barvna shema od vseh, saj uporablja kar štiri barve. Shemo je težko harmonizirati. Če so vse barve uporabljene v enakih odmerkih, deluje zelo neuravnoteženo, zato naj se izbere samo eno barvo za dominantno. Pozornost je treba nameniti tudi ravnovesju med toplimi in hladnimi barvami.

Page 37: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 32

Kvadratna barvna shema: Ta shema je podobna shemi pravokotnika. Pravila so ista kot pri pravokotni shemi. Izbere se glavno dominantno barvo, ostale barve naj se uporabljajo samo za odtenek in v majhnih dozah.

Vir: Barvne sheme. www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm 4.4. BARVE IN NJIHOV POMEN Rdeča: Rdeča je močna barva, je barva ognja, strasti, ljubezni. Je barva krvi, vojne, moči. Dviguje krvni pritisk, krepi človekovo presnovo in ima zelo visoko prepoznavnost, zato se na spletni strani uporablja rdeča za gumbe, oglase ali opozorila. Rdeča se uporablja tudi za visoke nevarnosti ali hitre avtomobile (Ferrari).

Svetlo rdeča: predstavlja veselje, strast, ljubezen …, roza-rdeča: predstavlja romanco, prijateljstvo, ljubezen, je barva ženskosti, temno rdeča je povezana z besom, vojno, krvjo, pogumom, hrepenenja ali s solzami

in srdom, rdeče-rjava je barva jeseni, rjava predstavlja moškost, stabilnost.

Oranžna: Oranžna združuje energijo rdeče barve in veselje rumene. Povezana je z veseljem, soncem in tropi. Oranžna predstavlja navdušenje, fascinacijo, srečo, kreativnost, odločnost, privlačnost, uspeh, spodbudo in stimulacijo. Za človeško oko je oranžna barva zelo vroča in daje občutek topline. Oranžna poveča dovod kisika v možgane in spodbuja mentalno aktivnost. Simbolizira moč in vzdržljivost. Ima visoko vidljivost, zato jo je lahko prepoznati in pritegne, poudari najpomembnejše elemente na spletni strani. Je zelo učinkovita za promocijo hrane in igrače.

Temno oranžna lahko pomeni prevaro in nezaupanje, rdeče-oranžna lahko predstavlja strast, užitek, dominacijo, agresivnost in željo po

ukrepanju, zlato-oranžna lahko prikliče občutek prestiža.

Rumena: Rumena je barva sonca. Predstavlja veselje, srečo, intelekt in energijo. Ustvarja učinek razigranosti, spodbuja mentalno aktivnost in ustvarja mišično energijo. Če se uporablja prekomerno, deluje moteče; znano je, da dojenčki mnogo več jokajo ravno v rumeni sobi. Pogosto se uporablja za nasprotje črni barvi, zato jo vidimo na nekaterih opozorilnih znakih.

Page 38: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 33

Rumena prikliče v spomin prijetne vesele občutke. Lahko se uporablja za promocijo otroških izdelkov in predmetov. Je barva, ki pritegne pozornost. Moški običajno vidijo rumeno kot otroško bravo, zato je ni priporočljivo uporabljati na prestižnih dragih produktih. Rumena je spontana, nestabilna barva.

Temno rumena barva predstavlja previdnost, bolezen, ljubosumnost, razpadanje, svetlo rumena je povezana z intelektom, svežino in veseljem.

Zelena: Zelena je barva narave. Simbolizira rast, harmonijo, svežino in plodnost. Zelena se čustveno močno navezuje na varnost. Temno zelena je tudi pogosto povezana z denarjem (dolar je zelen). Denar lahko predstavlja tudi rast. Zelena ima veliko zdravilno moč. Je prijetna, spokojna barva za človeško oko, lahko izboljša vid. Je barva varnega prehoda v cestnem prometu. Je direktno povezana z naravo, zato jo je logično uporabiti za ekološke izdelke.

Temno zelena se uporablja za vse, kar je povezano z denarjem, bankami itd., povezana pa je z ambicijo, pohlepom, ljubosumnostjo,

svetlo rumeno zelena: strahopetnost, bolezen, nestrinjanje, petrolej zelena: povezana je z zdravljenjem in zaščito, olivno zelena je tradicionalna barva miru.

Modra: Modra je barva neba in morja. Je pogosto povezana z globino in stabilnostjo. Simbolizira zaupanje, lojalnost, modrost, samozavest, inteligenco, vero, resnico in nebesa. Modra se šteje koristno za telo in duha. Upočasni metabolizem in ustvari pomirjujoči učinek. Na internetu se pogosto uporablja modra barva, skoraj da ni spletne strani, ki ne bi imela delček modre barve. Tudi Picasso je imel “modra leta” ustvarjanja, in sicer od leta 1901 do leta 1904. Modra barva naj bi bila moška barva, glede na študije naj bi bila dobro sprejeta. Temno modra je povezana z globino, strokovnostjo in stabilnostjo. Modra naj bi zavirala apetit.

Svetlo modra je povezana z zdravjem, mirom, razumevanjem in mehkobo, temno modra predstavlja znanje, moč, celovitost in resnost.

Vijolična: Vijolična barva združuje stabilno modro barvo in energijo rdeče barve. Simbolizira moč, bogastvo, razkošje in ambicije, bogastvo in ekstravaganco. Vijolična je povezana z modrostjo, dostojanstvom, kreativnostjo, mistiko in magijo. Po neki študiji se je 75 % mladih odločilo, da je to njihova prva izbira med barvami.

Svetlo vijolična je dobra izbira za ženske izdelke, lahko se jo uporabi za promocijo otroških izdelkov. Svetla vijolična prikliče romantična in nostalgična čustva,

temno vijolična prikliče otožnost in žalostna čustva. Bela: Bela je povezana s svetlobo, nedolžnostjo, čistostjo.. Je barva popolnosti. Bela pomeni varnost, čistost, lahko tudi pomeni prestiž. Je univerzalna barva. Nekateri jo povezujejo tudi z bolnico, zdravniki, sterilnostjo …

Page 39: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 34

Črna: Črna je povezana z močjo, eleganco, formalnostjo, smrtjo, zlom in skrivnostnostjo. Črna je barva skrivnosti, označuje moč, oblast ali pa je kot elegantna večerna obleka prestižna barva. Daje občutek perspektive in globine.

Barve v naravi:

Slika 14: Barve v naravi (http://www.sur-realphotography.com/)

Page 40: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 35

Slika 15: Barve v naravi (http://www.sur-realphotography.com/)

Slika 16: Barve v naravi (http://www.flickr.com/photos/34654941@N02/5523287271/)

Page 41: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 36

4.5. IZBIRA BARVE ZA SPLETNO TRGOVINO Ker so naša ciljna skupina predvsem ženske in ker gre za unikatna otroška oblačila, smo se odločili, da bo primarna barva ženskam všečna in njim prijazna barva. Izbrali smo toplo barvo pink, ki ravno meji s hladnimi barvami. Dodali smo malo rdeče in dobili lepo rdečo-pink barvo. Barvno shemo smo vzeli komplementarno, to je v tem primeru nežno svetlo zelena, ki je hladna barva in je tudi na meji s toplimi barvami.

Slika 17:Izbor barv za spletno trgovino

Za uravnoteženje med barvama smo izbrali nevtralno barvo, in sicer sivo. Barvi nikoli ne nastopata skupaj, ker sta si nasprotni, ampak smo vedno kombinirali skupaj vijolično-sivo ali zeleno-sivo. Poglejmo primer te kombinacije:

Slika 18: Izbor barv za spletno trgovino

Page 42: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 37

Vijolično-rdeča barva Nežno sveže zelena barva

Tip barve Topla barva Hladna barva

Shema barve

Komplementarna zeleni Komplementarna vijolični

Pomen: Romantika, ljubezen, prijateljstvo, ženskost, resnica, dobra volja, mirnost, naklonjenost, čustvena zrelost, skrb, vzgoja, sladek okus, sladek vonj, eterično, poslastica. Živahna barva: razigranost, energija, mladost

Mladost, svežina, narava, okolje, mirnost, osvežujoč, upanje, nesmrtnost, rast, harmonija, odzivnost, velikodušnost, mirnost, veselje, ljubezen,

Odtenek: Svetlo rdeča Svetlo rumena

Pomen odtenka

Veselje, spolnost, strast, občutljivost, ljubezen

Intelekt, svežina in radost, prijetnost, mirnost, podcenjeni elegance, čistost, mehkoba,

Tabela 5: Pomen barve

Pomen sive barve: Strokovno, prefinjeno, trajnostno, kakovostno, zanesljivost, inteligenca, uravnoteženost, skromnost, dostojanstvo, zrelost, trden, konzervativno, praktična.

Skupni imenovalci

Ljubezen Mirnost Veselje

Ljubezen Mirnost, Veselje

Otroška trgovina:

Skrb, vzgoja, čustvena zrelost, ljubezen Siva: strokovno, kakovostno, praktično, prefinjeno

Rast, veselje, mladost, harmonija, osvežujoče (svežina). Siva: strokovno, kakovostno, praktično, prefinjeno

Tabela 6: Pomen barve

S kombinacijo treh barv smo ustvarili poseben občutek na spletni strani. Kombinacije sive dajejo občutek dovršenosti, elegance, prefinjenosti strani, vijolična je tipično ženska in otroška barva, ki prikliče občutke ljubezni do otroka, vzgojo, skrb za otroka, zelena pa rast otroka, mladost, harmonijo in spletno stran poživi, ji daje osvežujoč učinek. Z uporabo zelene smo se znebili občutka monotonosti in pustosti strani (zelena vnese svežino, pomlajuje). Nekaj podobnih primerov te kombinacije v naravi in kako vplivajo na naše zaznavanje in občutke.

Page 43: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 38

Primeri iz narave:

Slika 19: Prevladujoča vijolična zgoraj, spodaj svetlo zelena in temna spodaj(http://www.fanpop.com/spots/pink-color/images/23859302/title/pink-trees-photo)

Slika 20: Modra pomirja, zelena daje občutek svežine, pomladi in komplementarna barva vijolična pa v sredini izrazito izstopa (http://www.flickr.com/photos/stanzim/5730988789/)

Page 44: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 39

Slika 21: Izrazito vijolično-rdeča, ki vznemirja čutila in belo-modra, ki lahko nevtralizira in

pomirja (http://www.flickr.com/photos/bartceuppens/5639992528/)

Slika 22: Močna poudarjena svetlo-vijolična izrazito izstopa v kombinaciji s komplementarno zeleno bravo (http://www.flickr.com/photos/nondesigner/5610040196)

Page 45: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 40

Razporeditev oz. postavitev zaporedja barve na spletni strani bo posnemala zakonitosti narave. V glavi in rahlo srednjem delu bo vijolično-rdeča, na sredini bela z odtenki sive, temno sive, spodaj pa odtenki zelene barve. Približna uporabljena količina barve na spletni strani:

Vijolična: 10 %, odtenki sive, črne in bele barve: 60 %, odtenki zelene: 30 %.

Slika 23: Količina izbranih barv

Na slikah iz narave vidimo, kako zelena barva daje občutek harmonije, svežine, vijolična (pink) pa izrazito izstopa in dá barvitost celotni sliki. Zato smo v logu uporabili izstopajočo barvo, saj je to barva kjer se oko ustavi, je barva postanka, na spodnjem delu pa smo uporabili pomirjujočo zeleno (harmonična barva) in fanta v gibanju, ki projicira veselje, mladost, rast. Z natančno določenimi barvami in prefinjeno dodelanim oblikovanjem smo ustvarili občutek glamurja in dodelanosti trgovine. Obiskovalec podzavestno zazna, da gre za dovršeno trgovino. V samem začetku smo se držali principa oblikovanja »manj je več« (less is more), zato se lahko vidi, da v zgornjem delu nismo pretiravali z grafiko kot tudi ne v sredini spletne trgovine. V tem delu segmenta se je grafika uporabljala minimalno (logo in gumb dodaj v košarico) ali skoraj nično, barve v tem delu pa so dokaj nevtralne (siva, siva-črna). S tem smo ustvarili, da se je oko centrično usmerilo na sam izdelek, grafika okoli pa ni bila moteča in ni odtegnila pozornosti. Sam poudarek je na izdelku in ne na motečih grafičnih elementih z izrazitimi barvami. Da smo še dodatno poudarili izdelek, smo v kategoriji s seznamom izdelkov in na posamezni strani izdelka povečali osnovno primarno sliko izdelka na 440 px, kar poredko vidimo na ostalih straneh. Da smo izdelek še bolj izpostavili, smo ga umestili v siv odtenek, ki je na robu okvirja slike. Bistvo je izdelek in ne trgovina, grafika naj samo projicira kvaliteto in vzpostavi določen željen občutek. Ker proces oblikovanja nikoli ni dokončan, se fine, natančne kirurške popravke še vedno dela. Tak proces lahko traja nekaj mesecev in to je tisto, kar loči dobro stran od množice ostalih trgovin. Precizna nedokončana evolucija popravkov, pixel za pixlom nastavitve, ki so prostemu očesu nevidne in ki jih zazna samo nižji podzavestni del možganov, ki je odgovoren za zaznavanje občutkov.

Page 46: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 41

4.5.1. KAKO NASTAVITI TON IN RAZPOLOŽENJE OZ. OBČUTEK? KAJ IZDELEK PROJICIRA? Večino kupcev trdi, da se za nakup odločajo izključno na podlagi logike, da jih emocije in občutki ne vodijo pri nakupu, vendar ta trditev ne drži povsem. Treba je poudariti, da večino ljudi ni v stiku z notranjimi hotenji, skritimi željami in občutki, zato je zgornja trditev kupcev povsem logična. Vendar, za vsakim nakupom oz. izdelkom se skriva čustvena korist. Kupec se interno, miselno skrito vpraša, kaj bom jaz imel od tega z nakupom izdelka, kaj bom jaz pridobil, kakšne prednosti bom jaz imel od tega, kakšne občutke mi izdelek projicira. Smo sebična egoistična bitja, ki večino časa mislimo samo nase. Če bi plezali po mentalni lestvi navzgor oz. v globino, vsak izdelek vodi do neke vrste samopodobe oz samospoštovanja (self-esteem). Če podamo kot primer da nekdo kupi drago uro, lahko rečemo, da ura sama po sebi nič ne pomeni in je kot izdelek je prazna, lahko bi rekli, da je izdelek mrtev. S pravilnim tonom dodanih čustev lahko ura projicira prestiž, eleganco, spoštovanje itd. Ravno zaradi dodane percepcije ima kupec občutek, da je več vreden, se spoštuje, ima dober občutek o sebi, počuti se odlično in to mu daje neke vrste samospoštovanje, lepšo samopodobo. Nekateri skeptiki bi oporekali in rekli, da so ljudje, ki kupujejo poceni ure tudi za 5 €. Kje je tukaj samospoštovanje? Povsem logično, tukaj kupca pritegne nizka cena in to vodi ravno tako do občutka, da je odgovoren, moder, pameten, ker se je odločil premišljeno. Dandanes, ko je nad nami recesija, mu nizka cena daje občutek varnosti in prihranka. Tukaj lahko razberemo, da z nakupom poceni ure kupec privede do lepše samopodobo (sem pameten, ker kupujem poceni, premišljen, počutim se varnega, sem tudi moder). Ne glede na to, kdo smo, kje smo se rodili in kakšna je naša izobrazba, nas do neke mere vodijo skriti občutki, ki vplivajo na naše vedenje. Še preden se odločimo na zavestnem nivoju, je bila odločitev že podana na nižjem čustvenem nivoju ne da bi se tega zavedali, zato se tudi smatramo, da smo racionalna bitja. Pri izdelku smo in bomo projicirali več različnih občutkov na nezaznavnem nivoju in to ustvarili s pomočjo fotografij. Preko izdelka se bo asociacija občutkov prenesla na otroka. Občutki, ki jih bomo poskušali prikazati s fotografijami:

Atraktiven (lepi kroji in barve; slikanje izdelka), pustolovski (raziskovanje v naravi), navdušenje (smeh, veselje; igranje), atletski, živ, fleksibilen (športni kroj, ki omogoča prosto gibanje rok; slike med

športno aktivnostjo), sprejet v družbi (unikatnosti izdelka; igranje z vrstniki).

Projekcija občutkov za starše na spletni strani:

Kontrola (možnost nakupa po meri, popolna svoboda pri barvah in specifikacijah, direktna komunikacija, možnost enostavnega vračila),

priznanje in spoštovanje (unikaten drag izdelek, okolica bo opazila), občutek prihranka in premišljenosti (poceni poštnina, direktna prodaja, občutek da

več dobi glede na vložek), ljubeč, skrben in odgovoren starš (zelo praktičen izdelek, koristna uporaba; praktičen

prikaz izdelka). Občutki se sovpadajo s personami, ki smo jih predhodno že opisali. Vendar za to, da nekdo kupi izdelek, ni dovolj samo dobra fotografija ali ustvarjanje občutkov. Samo po sebi se občutki ne prodajajo, ampak mora biti zadovoljen tudi racionalni del možganov, ker v

Page 47: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 42

nasprotnem primeru pride do praznih emocionalnih obljub. To lahko vodi tudi do občutka manipulacij, ki pa povsem odbijejo potencialnega kupca oz. obiskovalca. Da se temu izognemo, mora biti vsak prikaz emocij močno podkrepljen z logiko. Predložen mora biti prikazan dokaz. Da pa prodaja dobro steče, mora kupec videti veliko čustveno korist oz. mora izdelek reševati njegov problem, ki odtehta vrednost izdelka. Drugi faktor, ki igra vlogo pri prodaji, je specifično povsem drugačen izdelek od konkurence. Če to zapišemo s povsem enostavno formulo za vrednost izdelka:

Problem; kako pereč, urgenten in obupan je problem? Kako močna je želja, intenziteta, potreba, da se problem reši? (od 1 do 10).

Diferenciator; specifična lastnost izdelka, kako izdelek na svoj način rešuje problem. Kako se loči od konkurence, na podlagi katerih prednosti (od 1 do 5).

Čustvena korist; kakšno čustveno korist ima izdelek, kakšne notranje potrebe zadovolji (prihrani denar, prisluži denar, daje o sebi boljši občutek, ekskluzivnosti ...) Kako močna je stopnja potrebe za zadovoljitev? Število točk od 1 do 10.

Negativne emocije: kako močni so negativni občutki (jeza, strah, trpljenje, pohlep, krivda). Kateri so skupni sovražniki? Koliko čustvene energije bo stranka izgubila, v primeru da tega izdelka/storitev ne bo imela? Kakšna je stopnja ponavljanja zaradi nezmožnosti zadovoljitve trenutkih artiklov na trgu (frustracija). Število točk od 1 do 10.

Faktor kredibilnosti; kako kredibilna je storitev, kako zanesljiva je informacija. Kako visoko je zaupanje v podjetje, izdelek ali storitev? Kredibilnost je odvisna tudi od tega, kako močan in drugačen je element dokaza. Kredibilnost se nanaša na čustveno korist in negativne emocije. Če zaznamo, da je kredibilnost 90 %, to zapišemo s številko 0.9 (od 0.1 do 1).

Konkurenca; kako močno je na trgu prisotna konkurenca, koliko je že sorodnih izdelkov. Faktor za 0.1 točk.

Vrednost; psihična vrednost izdelka ali storitve na prostem trgu. Višja, kot je vrednost, več nam izdelek ali storitev pomeni in večja je verjetnost, da bomo izdelek prodali.

Maksimalna vrednost je 104 točk. Takrat lahko govorimo, da je vrednost izdelka ali storitve več kot 100 % pomembna. 1. Primer scenarija: Sredi divjine v Keniji se nam pokvari tovornjak, jermen na stroju se je pretrgal. Do prvega večjega mesta je 300 km. Toyoto lahko popravi samo specializirani mehanik.

Problem je zelo urgenten; 10 točk Jermen je specifičen in namenski samo za to vrsto stroja in ga je težko dobiti; 5 točk. Občutki (prihrani nam čas in hojo, velika čustvena korist. Negativna emocije so jeza,

strah, da bomo obstali v divjini in krivda, zakaj smo najeli star kamion.) Obstaja strah, da bomo obstali sredi noči v divjini med nevarnimi živali. Poskrbeti moramo za svojo družino. Obstaja strah, da bomo zaradi dehidracije oslabeli.

Page 48: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 43

Kredibilnost mehanika v mestu je velika, ker ima 10-letne izkušnje in pooblaščeni servis Toyota, zapišemo št. 1.

Prva konkurenca je oddaljena 400 km proč, zato bomo dodali 0.1.

Izračunana vrednost po formuli je 95 točk. Lahko bi govorili, da gre za 95% vrednost in pripravljeni smo storiti vse, da se problem takoj odpravi. Cena ne igra bistvene vloge, ker so naši občutki močnejši od posega v denarnico. Kot vidimo v izračunu, je konkurenca samo ena in je vrednost za kanček znižala. Mehanik bi nam lahko sredi divjine za zamenjavo jermena zaračunal bajne vsote in bili bi mu zelo hvaležni, verjetno bi mu ponudili še veliko napitnino. 2. Primer scenarija: Na jesen trka že prva zima z zapadlim snegom. Nekako potreba nakazuje, da moramo kupiti otroško bundo tako za zimske radosti kot za smučanje s šolo v januarju. Odpravimo se po trgovinah. V trgovini naletimo na neko bundo Winter Snow Protection Pro.

Problem ni tako nujen, ker je do prvega resnega snega in mraza še en mesec; 4 točke.

Bunda sama po sebi ni tako drugačna od ostalih, ima pa dodatno obložena mesta pred mrazom, zaščito pred vodo in obloženo kapuco; 3 točke.

Občutki: je lepa in zelo atraktivna in lahko jo bo imel otrok za v nedeljo k maši, tudi za smučanje. Otrok se bo tudi lahko svobodno gibal v snegu, št točk 7. Odpravlja občutek krivde, ker otrok ne bo bolan, zato ker je dodatno obložena na določenih mestih. V službi ne bodo jezni zaradi zaostanka dela bolnega otroka, število točk 8.

Kredibilnost: bunda vzbuja kanček nezaupanja, ker je Kitajske izdelave in pojavlja se vprašanje kvalitete, nekako verjamemo 60 %, št. točk je 0.6.

Konkurenca je velika in na vsakem vogalu se prodajajo azijski izdelki. Samo v tem mestu so štiri podobne trgovine z otroškimi oblačili, 1.1 + 0.4 = 1.5.

Izračunana vrednost po formuli je 11 točk. Psihična vrednost takega izdelka je zelo majhna in edini faktor, ki igra zelo močno vlogo pri nakupu, je cena izdelka. Trgovina verjetno na prvi obisk ne bo zabeležila prodaje, ker bo potencialni kupec obiskal še ostale trgovine in primerjal lastnosti izdelka in ceno. Prodajalec bo moral biti zelo ustrežljiv, prijazen in na koncu hvaležen, če stranka kupi izdelek. 3. Primer scenarija Ženska srednjih let ima ponavljajoče glavobole. Glava jo je začela boleti konec tedna v petek zvečer po napornemu tednu v službi. Intenziteta glavobola je velika. Majhne lekarne so že zaprte, zato se mora odpraviti v mesto v glavno lekarno. Izbira med tremi različnimi znamkami. Izračun:

Page 49: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 44

Izračunana vrednost po formuli je 74 točk. PRIBLIŽEN IZRAČUN ZA SPLETNO TRGOVINO:

Obrazložitev:

Kako močan je problem? Kaj izdelek rešuje? Zelo dobro rešuje problem gibalnosti, potenja in daje večjo prožnost telesnim aktivnostim. Ker na splošno veliko bolje rešuje težavo kot ostali izdelki na trgu, je vrednost točk 4 od 10.

Izdelek je povsem drugačen od ostalih, je unikaten po barvi, kroju, izdelavi in ima še dodane nekatere rešitve, število točk je 5 od 5.

Srednja čustvena korist (ekskluzivnost, unikatnost, status, prestiž, dobro počutje otroka, odgovoren starš). Ker so občutki za otroka zelo močni, smo dali 5 točk od 10.

Kaj bo stranka izgubila, če ne bo imela tega izdelka? Otrok bo manjkrat bolan, saj izdelek rešuje otrokovo telo pred zunanjimi vplivi in potenjem. Stranka bo izgubila zdravje otroka. Gre za dokaj močan faktor, ker nihče od staršev ne želi imeti bolnega otroka, sploh pa ne zaradi krivde starša (občutki krivde in jeze). Dali smo faktor 7 od 10.

Kredibilnost: ker je kredibilnost zelo težko prikazati in neposredno povezati izdelek z prednostmi (da otrok ne bo bolan zaradi nošenja izdelka) smo v začetni fazi namenili 70 % kredibilnost.

Konkurence na temu področju skoraj ni, nekaj zanemarljivega obstaja samo onkraj luže.

Izračunana vrednost po formuli za spletno trgovino je 30 točk. Številka je zadovoljiva, kupci pa bodo pokazali, ali je izračunana vrednost dejansko prava. Opomba: formula ne vključuje tudi druge faktorje, ampak smo zaradi enostavnosti zapisali povsem enostavno formulo. Izračunane vrednosti so tako približne. 4.6. IZBIRA LOGOTIPA Nekaj pravil za kreiranje logotipa: 1. Logotip naj bo enostaven

Enostaven logo je lažje natisniti, ima manj barv in zato je kasneje tisk cenejši. Lahko ga uporabimo v kateremkoli mediju. Enostaven je za zapomnitev in lažje ga je prepoznati.

Page 50: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 45

Slika 24: Prikaz logotipa Mercedes. Lepo prikazani koraki razvijanja logotipa od večih

elementov v grafiki do enostavnega končnega logotipa tri-krake zvezde. (http://www.emercedesbenz.com/Apr08/17_001109_The_History_Behind_The_Mercedes_Be

nz_Brand_And_The_Three_Pointed_Star.html)

2. Logotip na bo lahek za zapomniti Prvo pravilo gre z drugim pravilom. Logo naj bo enostaven, z manj elementi, da ga v trenutku ko ga zagledamo, ne pozabimo. 3. Logotip naj bo brezčasen IBM, BMW, Adidas, Nike logoti so enostavni, brezčasni in preprosti. Ni potrebe po spreminjanju. Treba je dodati, da naj logo ne bo modern, ampak tradicionalen, večen. Kar je moderno, pride in gre, kar je tradicionalno, ostane, je brezčasno. 4. Logotip naj bo relevanten in ustrezen podjetju Oblika logota mora biti ustrezna podjetju in poslu, ki ga podjetje opravlja. Če podjetje goji jagode, naj bo logo variacija jagode. Če je podjetje letalska družba, naj bo logotip narejen v tej smeri. Apple ni ravno odličen primer, vendar je znamka zelo močno uveljavljena. Primer Pipistrel:

Slika 25: Primer logotipa (www.pipistrel.si)

Page 51: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 46

4. Logotip naj bo drugačen Logotip naj se razlikuje od konkurence. Naj bo povsem drugačen, unikaten, tako po stilu kot po barvi itd. 5. Logotip naj bo majhen Logotip naj bo viden, prepoznaven, berljiv tudi v majhnem formatu. 6. Logotip naj bo osredotočen samo na eno stvar Oblikovanje naj bo osredotočeno samo na eno stvar. En element naj izstopa, naj bo drugačen, tako se ljudje tudi lažje zapomnimo. Izstopa naj samo ena stvar. Podjetje Apple ima en element, ki v oblikovanju izstopa, in sicer odgriznjeno jabolko. Mercedes ima tri-krako zvezdo, IBM ima pisavo v modro beli barvi itd.

Slika 26: Primer logotipa (www.apple.com) 7. Logotip naj bo prepoznaven v črni ali beli barvi Logotipa je potrebnonarediti v črni ali beli (in v belo-črni) variaciji. Nekateri oblikovalci najprej začnejo oblikovati v črno-beli barvi oz v črni barvi na beli podlagi, šele nato dodajajo barve. 8. Če je logotip napis, naj bo dobro berljiv Ljudje se ne bodo ustavljali in poizkušali prepoznati napis in črke. Berljiv naj bo v sekundi. 9. Logotip naj bo konsistenten Logotip naj bo konsistenten s celotno grafično podobo podjetja. 10. Logotip ne rabi imeti ikono, sliko karakterja ali nekega simbola Logotip je lahko že napis podjetja, posebna pisava ali črka. 11. Logotip naj bo izviren Logo naj bo izviren, unikaten, poseben. Pri oblikovanju dobrega logotipa je zaželena kreativnost.

Page 52: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 47

Slika 27: Nekaj primerov dobrega oblikovanja logotipa (www.logopond.com)

Logo je nekaj, po čemer si prepoznaven, je znamka, je kot nacionalna zastava, kot podpis podjetja. Tako kot sama beseda je tudi logo simbol, ki na začetku ne pomeni ničesar, je simbol brez pomena (kot npr. v otroštvu, ko nismo vedeli pomena besede drevo, cesta ...) Kasneje so se ustvarile povezave v možganih. Logo ni nekaj, kar bi se prodajalo samo po sebi, ampak predstavlja le podpis podjetja. Oblikovanje loga ni enostaven proces, čeprav ko pogledamo okoli sebe, vidimo popolnoma enostavne logotipe, samoumevne, pa vendar se v enostavnosti skriva kompleksen razvoj. Iz izkušenj lahko podjetje pove, da ni težko narediti kompleksnega loga, težje je narediti enostavnega, takega, ki pusti vtis v naših možganih, ki ga ne pozabiš. Je proces in nikoli dokončano delo. Proces in kreiranje logotipa je dolgotrajen in zapleten proces in poteka po naslednjem modelu: 3. Dobro razumevanje, kaj podjetje dela, zastopa, 4. kakšne so vrednote podjetja, 5. poznavanje njihove ciljne stranke, skupine, 6. raziskava trga, 7. skiciranje idej na papirju, 8. kreiranje in povezovanje oblakov v skupine (mind-maping), 9. asociacije na logo.

Page 53: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 48

10. začetek oblikovanja v črno/beli verziji, 11. revizija logotipa (popravki, spreminjanje, re-design), 12. popravki, 13. dodajanje barv, 14. finaliziranje. Pri kreiranju loga je dobro imeti v mislih persono ali stranke. Tako si lažje ustvarimo občutke, ki vodijo do izdelave logotipa. Pri izdelavi podobe logotipa in imena znamke smo v podjetju imeli nekaj smernic, po katerih smo se ravnali pri izdelavi, te so:

Ime naj ima otroški pridih, ime podjetja naj odraža, da gre za otroško trgovino, logotip naj bo preprost, enostaven za zapomnitev, ime podjetja naj bo zabavno in obenem resno (ne zabavamo, ampak prodajamo), naj odraža unikatnost in stil, domena mora biti prosta, projicirati mora določeno mero občutka ekstravagance.

Med samim izborom je nastalo nekaj predlog:

Slika 28: Prvi osnutki oblikovanja loga za spletno trgovino Do končne podobe trenutnega logotipa je nastalo preko 60 faz različnega oblikovanja, preučevanja kombinacij z barvami, pisavami in imeni. Izdelava ožičenega modela Ožičeni model je prototip oblikovanja in sistem načrtovanja, preden se oblikuje in prenese obliko v HTML kodo. Prihrani veliko kasnejšega truda in oblikovalec ima jasne smernice in cilje, kakšna bo arhitektura strani. Z ožičenim modelom, prototipom, postavimo postavitev strani (layout), pozicija besedilo, gumba, artikla itd. Je vmesna faza med idejo in designom. Običajno se proces začne z idejo in skicami na papirju. Prve skice na papirju nam pomagajo hitro osnovati prvi model in preizkušati različne ideje. Tako se lahko riše, razmišlja in raziskuje možnosti. Risanje skic je odlično tudi za diskutiranje idej z ostalimi udeleženci v projektu. Proces skiciranja in diskutiranja idej lahko traja nekaj dni ali nekaj tednov (odvisno od vložka v projekt). Bistveno pri snovanju in skiciranju je, da skupina ostane fokusirana na bistvene stvari. Upoštevati se mora uporabniško izkušnjo (user interface), postavitev (layout) in ustaljeno prakso vzorcev oblikovanja, ki so se izkazale za dobre rešitve. Ko je enkrat proces skiciranja končan, se skicirane ideje prenese v ožičen model, to je skelet designa. Ožičeni model je bolj dodelan in natančen od skiciranja in vsebuje osnovne elemente oblikovanja (gumbe, tipografijo, vsebino, širino postavitve, ostale grafične elemente, slike, navigacije, strani, logo ...)

Page 54: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 49

V podjetju Dotkomp uporabljajo ožičen model tudi zaradi strank. Zmanjša boleč proces kasnejših popravkov v oblikovanju. Tako se lahko predhodno predstavi ožičen model in upošteva še dodatne želje stranke in njihove specifične zahteve. Na željo stranke se lahko ožičen model naredi tudi z barvami in bolj dodelano grafiko, tako da ima popoln predogled pred procesom oblikovanja. Na tak način se izognemo nadaljnjim zapletom, potrebe in želje strank pa so tako bolj zadovoljene. Zato je ožičen model odlično komunikacijsko orodje med naročnikom in izvajalcem. Za bolj profesionalen pristop in kasnejše testiranje prototipa se uporablja orodje FlairBuilder. Posebnost tega orodja je, da je poleg enostavnega vmesnika z izdelano grafiko prototip delujoč. Ožičen model je interaktiven, deluje podobno kot spletna stran. Tako lahko bolje testiramo uporabniški vmesnik in prikažemo funkcionalnost. Url: http://flairbuilder.com Pri izdelavi ožičenega modela smo uporabili enostavno orodje Webalys user Interface design framework, ki ima knjižnico z že izdelanimi grafikami in ikonami. Grafični nabor za izdelavo ožičenega modela:

Slika 29: Izbor grafike za ožičen model

Page 55: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 50

Kot vidimo na sliki, imamo že pripravljene grafične elemente, ki jih pri sestavljanju poljubno izbiramo. Grafični elementi so narejeni vektorsko, kar za oblikovalca pomeni prednost, saj lahko hitro, na klik, premika elemente, višino, širino in postavitev ožičenega modela. Prihrani se veliko časa s popravki in revizijami. Grob prikaz postavitve določenih blokov grafike, slike in besedila smo sestavili z osnovnimi elemente grafike. Kasneje smo analizirali in popravljali. Pri kreiranju smo upoštevali uporabniške izkušnje in zasnovali zelo enostaven uporabniški vmesnik. Ožičen model je sestavljen s čim manj motečimi elementi in jasnim linearnim fokusom v vertikali.

Slika 30: Ožičen model, skelet spletne strani

Page 56: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 51

4.7. IZBIRA PISAVE Ključno pri oblikovanju je poznavanje tipografije in to ne samo poznavanje pisave, ampak so pri tipografiji bistveni ostali faktorji. Pomembni so razmiki, prazne vrstice, linije, točke, barva pisave in nenazadnje tudi spletu prijazna pisava. Informacijsko oblikovanje oz oblikovanje spletne vsebine zajema večji del spletnega oblikovanja. Bralec mora čutiti lahkotnost branja, brez naprezanja, enostavno preskakovanje besedila itd. Večina spletnih oblikovalcev teh faktorjev za boljšo branost ne upošteva oz. jih zanemarja. Odličen oblikovalec razume besedilo kot UI (user interface) uporabniški vmesnik oz. razume besedilo podobno kot grafične elemente, ki ravno tako rabijo nego in čut. Treba je poudariti da je več kot 90 % informacij na internetu v obliki jezika.

Nekaj pravil za izboljšanje tipografije 1. Število znakov v vrstici Predolgo ali prekratko besedilo je moteče za bralca. Pravilo pravi, da je optimalno število znakov, vključno s presledki, od 40 do 80 znakov. Za enojni stolpec naj bi bilo 65 znakov idealno.

Slika 31:Lorem Ipsum – slepi tekst (http://sl.lipsum.com)

Po metodi Robert Bringhurst je najenostavnejša metoda merjenja, da velikost pisave pomnožimo s številom 30. Če imamo velikost pisave 14 px to pomnožimo s 30 in rezultat je širina stolpca 420 px. Če to zapišemo v css kodo, to izgleda takole:

Slika 32:Css funkcija za paragraph - maksimalna širina stolpca za velikost pisave 14 px

2. Razmiki med vrsticami Za dobro branost in preskakovanje na novo vrstico je pomembna višina razmika med vrsticama. Višina razmika je odvisna od velikosti, debeline pisave itd. Pri podjetju Dotkomp uporabljamo pravilo, da velikost pisave pomnožimo z 1.5. Tako dobimo dokaj velik razmik, ker je izkušnja pokazala, da je branost na to nastavitev optimalna.

Page 57: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 52

Če je velikost pisave 12 px x faktor 1.5, je razmik 18 px. V kodo css se to lahko zapiše tudi s procenti:

Slika 33: Css funkcija za paragraf – dodana je višina razmika med vrstico besedila Lahko se uporabi še večji razmik, in sicer 160 %, ki počasi prihaja vse bolj v uporabo. 3. Viseči narekovaji in alineje Pri nekaterih nastavitvah narekovaji in alineje (<li> blockquote) niso poravnane horizontalno z besedilom, štrlijo ven. Če hočemo doseči lepo branost, moramo horizontalno na levi strani poravnati kompletno besedilo, tudi narekovaje in alineje. Koda zgleda takole:

Slika 34: Css funkcija za paragraph Številčno naštevanje mora biti pomaknjeno na levo, ločeno stran od besedila. 4. Poudarek v besedilu Poudarek mora biti napisan tako, da ne moti tekočega branja. Najbolj idealni poudarki naj bi bili poševno besedilo. Nekateri uporabljajo poudarjeno besedilo (bold), poševno in poudarjeno, velike črke, podčrtano besedilo ... Ne glede na to, katero od teh uporabljamo, pomembno je, da uporabimo samo eno poudarek. Podjetje Dotkomp uporablja krepko besedilo, pisava je iste velikosti.

Page 58: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 53

Slika 35: Css funkcija za paragraph 5. Sorazmerje z naslovi Sorazmerje je pomembno, ker ustvari hierarhijo, izboljša branost, preglednost in harmonijo v besedilu. Sorazmerje je glede velikosti osnovne pisave. Uporabili smo Mark Boulton hierarhično lestvico: body { font: normal 13px 'Open Sans', sans-serif; } h1 { font-size: 218 %; } h2 { font-size: 164 %; } h3 { font-size: 145 %; } h4 { font-size: 118 %; } Velikost pisave za glavni naslov H1 je 41 px. 6. Leva in desna poravnava Zelo pomembna je leva horizontalna poravnava besedila v stolpcu. Tako oko lepo brez iskanja začetka nove vrstice nadaljuje branje. Tako leva kot desna poravnava morata biti poravnani, to dosežemo z ukazom “text-align:justify;” ali z javascript hyphenator: http://code.google.com/p/hyphenator/ 7. Manj je več Pri uporabi spleta je pravilo, da se uporabi čim manjše število različnih pisav. Pri podjetju uporabljamo največ dve različni pisavi, redko tri, tako dosežemo večjo konsistentnost na spletni strani.

Page 59: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 54

8. Prazni prostori so pomembni Zelo pomembno je, da besedilo ni videti kot dolga kača, ki se vleče. Take vsebine nihče ne bere, ali pa se izgubi v besedilu, oko težko sledi. Pravilo v podjetju je, da vsake 3 do 4 vrstice naredimo en prazen presledek. Berljivost je veliko boljša in oči lažje počijejo. Pri uporabi pisave smo uporabili Google Fonts servis (http://www.google.com/webfonts). Servis omogoča, da preko css implementirate pisavo v spletno stran ne da bi plačali licenco za posamezno pisavo. Trenutno je na voljo okoli 540 pisav. Potrebno je poudariti, da je vzorec branja na internetu povsem drugačen od vzorca branja knjige. Bralec na internetu ne bere, ampak skenira in dokaj hitro pregleduje vsebino. Pri izbiri pisave za spletno trgovino smo uporabili pisavo Ubuntu (opomba: kasneje se je pisava spremenila). Preko servisa smo izbrali tip pisave in kodo implementirali v glavo dokumenta: <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'> Pri izbiri pisave ima Google na desni strani indikator, ki pokaže, za koliko pisava oteži nalaganje spletne strani.

Slika 36: Izbor pisave (www.google.com)

Page 60: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 55

Google pisavo smo vstavili v glavo dokumenta, v CS-Cart predlogo: (/Cofek.si/cs-cart/skins/basic/customer/common_templates/styles.tpl) {* $Id *} {capture name="styles"} <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600|Open+Sans+Condensed:300,700&subset=latin-ext,latin' rel='stylesheet' type='text/css'> <link href="{$config.skin_path}/css/960/reset.css" rel="stylesheet" type="text/css"/> <link href="{$config.skin_path}/css/ui/jqueryui.css" rel="stylesheet" type="text/css"/> <link href="{$config.skin_path}/css/960/960.css" rel="stylesheet" type="text/css"/> <link href="{$config.skin_path}/base.css" rel="stylesheet" type="text/css" /> <link href="{$config.skin_path}/styles.css" rel="stylesheet" type="text/css" /> <link href="{$config.skin_path}/print.css" rel="stylesheet" media="print" type="text/css" /> <link href="{$config.skin_path}/cofek.css" rel="stylesheet" type="text/css" /> {if "TRANSLATION_MODE"|defined || "CUSTOMIZATION_MODE"|defined} <link href="{$config.skin_path}/design_mode.css" rel="stylesheet" type="text/css" /> {/if} {if $include_dropdown} <link href="{$config.skin_path}/dropdown.css" rel="stylesheet" type="text/css" /> {/if} <!--[if lte IE 7]> <link href="{$config.skin_path}/styles_ie.css" rel="stylesheet" type="text/css" /> <![endif]--> {hook name="index:styles"}{/hook} {/capture} {join_css content=$smarty.capture.styles}

V css smo nastavili tip pisave, velikost, razmike: /*** h1: font-size: 218%; h2: font-size: 164%; h3: font-size: 145%; h4: font-size: 118%; **/ .product-main-info h1.mainbox-title { color: #3c2c34; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 270%; line-height: 120%; } .price-num { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 12px; } .product-main-info .price-num { font-size: 186%; color: #503c46; } .in-stock { } .main, .header {

Page 61: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 56

background: #fff url(images/imgbg.png) repeat; } h1.mainbox-title { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 11px; } h1.mainbox-title span, .homepage-hotdeals .mainbox-title span, .homepage-vendors .mainbox-title span { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; color: #4c4046; font-size: 200%; text-transform: uppercase; } .checkout-login-form h2, .register-content h2 { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; color: #4c4046; font-size: 150%; }

4.8. IZDELAVA GRAFIČNE PODOBE, PRENOS V HTML IN V TRGOVINSKO PLATFORMO Po izdelavi ožičenega modela se je začel proces oblikovanja. Zamisli smo začeli prenašati v grafični program. Skrbno oblikovanje na podlagi vseh informacij persone, izbira barv, ožičenega modela in imena trgovine je trajalo več kot en mesec. Po končanem oblikovanju smo naredi razrez grafike in vstavili dele grafike na splet v obliki HTML jezika. Kakor pri sestavljanki smo grafiko razrezali in s spletnim jezikom HTML in CSS grafiko sestavili v prejšnjo obliko. Pri razrezu in sestavljanju je potrebno dobro poznavanje CSS jezika. Največji problem predstavlja, ker CSS ni povsem enako podprt v vseh brskalnikih. IE7.0 povsem drugače interpretira določene dele kode CSS kot njegov naslednik IE 8.0. Zato je bilo potrebno vložiti nekaj truda v kompatibilnost. Pri kompatibilnosti smo izpustili brskalnik IE6.0, ki je star že več kot 10 let. Trgovina ima tako podprte novejše brskalnike (IE7.0 navzgor, FF4.0 navzgor, Opera 10 in Google Crome). Za testiranje s starejšimi različicami brskalnika IE smo uporabili orodje IETester, ki emolira različne verzije (IE 7.0, IE 8.0 ...) in funkcijo v IE Compatibility View. V glavi dokumenta HTML-ja ima CS-Cart CSS datoteko styles_ie.css, ki je namenjena ravno zaradi kompatibilnosti z brskalnikom IE 7.0. Koda [if lte IE 7] ima funkcijo pogojnega stylesheeta. To pomeni, da samo IE7.0 prebere ta del CSSa stysles_ie.css. Kar nismo mogli doseči s primarnim CSS-om,smo to zaradi kompatibilnost z IE7 zapisali v stysles_ie.css. <!--[if lte IE 7]> <link href="{$config.skin_path}/styles_ie.css" rel="stylesheet" type="text/css" /> <![endif]-->

Page 62: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 57

Prikaz v oblakih - proces izdelave spletne trgovine:

Slika 37: Proces izdelave spletne trgovine. Od ideje do končnega izdelka.

Page 63: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 58

4.9. PLAČEVANJE V SPLETNI TRGOVINI 4.9.1. Plačilo po povzetju CS-Cart omogoča, da nastavimo plačilo po povzetju pri naslovniku stranke. V slovenskem prostoru je to še vedno najbolj uporabljena metoda plačevanja in tudi s strani plačnika najbolj enostavna, saj mnogi tudi nimajo kreditne kartice. Kupec se izogne izpolnjevanju še dodatnih obrazcev in vnosu številke kreditne kartice. Slabost takega načina je v tem, da Pošta Slovenije v primeru da plačnika ni doma, pusti obvestilo, ki pa se velikokrat izgubi ali pa ga naslovnik spregleda. Pošta Slovenije tako po 14-ih dneh vrne paket pošiljatelju, to pa ustvari dodaten strošek. Da se izognemo takšnim napakam, se v času pošiljanja paketa pošlje kupcu elektronsko sporočilo,, da bo paket v x času na njegovem naslovu. V primeru da v temu roku kupec ni dobil paketa, naj nemudoma obišče pošto. Pošta Slovenije tako nakaže znesek odkupnine na račun podjetja.

5. OPTIMIZACIJA SPLETNE TRGOVINE ZA ISKALNIKE 5.1. OPTIMIZACIJA SPLETNE TRGOVINE Po privzetem načinu ima trgovina neprijazen in iskalnikom težko berljive url naslove: Url naslovi za kategorije in pod-kategorije: http://www.cs-cart.com/index.php?dispatch=categories.view&category_id=80 http://www.cs-cart.com/index.php?dispatch=categories.view&category_id=81 ... Url naslovi za artikle: http://demo.cs-cart.com/index.php?dispatch=products.view&product_id=821 http://www.cs-cart.com/index.php?dispatch=products.view&product_id=821 ... Če klikamo po različnih kategorijah, se spreminja samo ID številka kategorije, ki je enaka številki, zapisani v MySQL tabeli. Če pogledamo samo goli url naslov, ne moremo ugotoviti, za katero kategorijo gre. V preteklosti se je dogajalo, da se je iskalni robot “zaplezal” oz. izgubil v teh številkah in tudi indexiranje v bazi iskalnika je bilo slabše. Zato smo v trgovini, ki ima SEO vtičnik, aktivirali (Administracija > add-ons) url naslove, prijazne iskalnikom:

Page 64: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 59

Slika 38: Aktivacija SEO url naslova

Product/page SEF URL format; Tukaj imamo možnost izbire med dvema različnima url naslovoma za izdelke. Lahko izberemo med: 1. product_name.html To pomeni, da je naslov artikla na korenu (rootu), tudi če klikamo na izdelke, ki so v strukturi nižje v pod-kategorijah. Primer: http://www.cs-cart.com/smucarske_palice_elan_t2.html http://www.cs-cart.com/bela_jakna_outwet_pro.html 2. category_name/[subcategory_name/]product_name.html Tukaj url naslov izdelka ni na korenu (root), ampak v pod-kategoriji. Primer: http://www.cs-cart.com/smucarske-palice/smucarske_palice_elan_t2.html http://www.cs-cart.com/zimske-roba/jakne/bela_jakna_outwet_pro.html Z aktivacijo SEO vtičnika za “Product/page SEF URL formata” dobimo prijazen in berljiv url naslov za izdelke. Podjetje Dotkomp je izbralo prvo možnost product_name.html, in sicer, da je url naslov na korenu. Ta možnost je boljša, saj kasneje prihrani težave, če je izdelek označen v več kategorijah, ker lahko dobimo podvojene strani. To zna pri googlu povzročiti alarm za duplicate (duplicate content alarm). Da to rešimo, je potrebno v glavo HTML dokumenta zapisati kodo za canonical url: <link rel="canonical" href="naslov_produkta.html" /> Izdelek bi se pojavljal na več pod-straneh: http://www.cs-cart.com/smucarske-palice/smucarske_palice_elan_t2.html http://www.cs-cart.com/zimska-oprema/smucarske_palice_elan_t2.html http://www.cs-cart.com/zimska-oprema/palice/smucarske_palice_elan_t2.html

Page 65: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 60

Ker pa smo označili možnost priduct_name.html, je url naslov izdelka vedno na korenu, ne glede na to, pod katero kategorijo smo produkt vnesli. Prijazen url naslov za kategorije Categories SEF URL format:

Tukaj imamo tri možnosti za izbiro url naslova za kategorije. 1. Prva možnost (item_name[-page2].html) ima sledeč url naslov za kategorijo (primer): http://www.cofek.si/si/apparel/mens-clothing.html Kategorija ima html končnico. 2. Druga možnost (item_name/[page2/]), ki smo jo izbrali, ima sledeč url naslov (primer): http://www.cofek.si/si/apparel/mens-clothing/ 3. Tretja možnost (item_name/[page2/]) pa ima url naslov kategorije na korenu, primer: http://www.cofek.si/si/mens-clothing 5.1.1. Metatags, Title, H1, H2, opis CS-Cart omogoča tudi, da podatke zapišemo v meta tags. To je glava dokumenta v HTML kodi. Najbolj pomemben podatek v meta tagu za iskalnike je title tag. Keyword tag in meta description so za današnje iskalnike nepomembni. V HTMLju meta title izgleda takole: <title>Otroško oblačilo ODLO</title> V CS-Cartu ga zapišemo v page title:

Page 66: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 61

Elementi, ki so pomembni za optimizacijo spletne strani za iskalnike so: 1. HTML header tags <title> 2. Zelo pomemben je url naslov strani in ime domene, ki zelo vplivata na uvrstitev v

iskalnikih 3. Povezave (url povezave s ključi) 4. H1 tag (naslovi, glava) 5. Slike (alt oznake in title oznake v tagu img) 6. Vsebina v html oznakah <p>, <strong> 7. Besedilo v html oznakah <li>besedilo</li> 8. Podnaslovi H2, H3 …

Optimizacija spletnih strani za iskalnike je prikazana v sliki za spletno trgovino:

Slika 39: Prikaz optimizacije spletne trgovine

Page 67: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 62

Rich snippets (microdata, microformats, and RDFa) zapis Pomemben je tudi zapis v microformatu ali rich snippet. Iskalnikom pomaga dodatno razumeti, kaj stran vsebuje. Uporabniku se pri iskanemu zapisu pojavijo dodatne informacije o vsebini strani. Rich snipet pomaga uporabniku odkriti, katera stran je relevantna njegovemu iskanju. Lastnikom spletnih strani omogoča, da prikažejo dodatne informacije o specifični vsebini. V Rich snipet lahko zapišemo informacije o vsebini spletne strani. Katere informacije lahko zapišemo, vidimo v tabelici:

Restavracija: mnenja, cena, ocene Ljudje: tel. številka, fotografija

Podjetje: lokacija, mnenja Avtor: fotografija, ime, ...

Izdelek: mnenja, ocene, slika izdelka, cena Dogodek: lokacija, čas, datum dogodka,

Tabela 7: Zapis informacij

Zapis v rich snipet je lahko v Microdata, Microformats ali RDFju. Primer običajnega zapisa v HTMLju za mnenje izdelka je sledeč: <div class="hreview"> <span class="item"> <span class="fn">Otroško oblačilo Body Care VL</span> </span> <span class="rating">3.5</span> <span class="reviewer">Janez Novak</span> <span class="dtreviewed">2012-10-12</span> <span class="summary">"Zelo lepo se prilega našemu malčku in pozimi ga ni zeblo"</span> </div> Isti primer zapisa v rich snipetu: <span class="hreview"> <span class="item vcard"> <span class="fn org">Cofek oblačila</span> (<span class="category">Otroška oblačila</span>) </span> <span class="reviewer vcard"> <a class="fn url" href="http://cofek.si/avatar/janez-novak">Janez Novak</a> </span> <span class="rating">3.5</span> <span class="dtreviewed">2012-10-12</span> <span class="summary">"Zelo lepo se prilega našemu malčku in pozimi ga ni zeblo"</span> </span> Primer zapisa za artikel: <div class="hproduct"> <span class="brand">Cofek</span> <span class="category">Oblačila za dojenčke</span>

Page 68: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 63

<span class="fn">Otroško oblačilo Body Care VL</span> <span class="description"> Oblačilo je namenjeno za zimske dni, ker ima dodatno našite podloge na kritičnih točkah. </span> <span class="url">http://www.cofek.si/oblacila-za-dojencke/body_care_vl.html</span> </div> Pravilnost zapisa Rich Snipeta se preveri v Google orodju: http://www.google.com/webmasters/tools/richsnippets

Slika 40: Prikaz zapisa rich snipeta v Google orodju (www.google.com)

Na sliki zgoraj smo z Google orodjem preverili zapis. Vidi se, da je zapisano ime strani, kategorije (breadcrums), ocena izdelka, število mnenj, cena izdelka in zaloga. To so dodatne informacije, ki se prikažejo pri izpisu iskanih poizvedb v Google iskalniku. Statistika podjetij govori, da se je število klikov na njihovi spletni strani povečalo od 20 do 30 %. Tisti, ki so kliknili, so tudi ostali na spletni strani dlje, ker so uporabniki vedeli, kaj lahko pričakujejo. Da se je povečalo število klikov, gre tudi na račun prikazanih slik oz. fotografij, ki se prikažejo pri iskanih zadetkih zaradi zapisa slik v rich snipetu. Vir: A visual guide to rich snippets. http://www.seomoz.org/blog/a-visual-guide-to-rich-snippets 5.2. ANALIZA ISKANIH BESED Za analizo iskanih besed smo uporabili orodje v Google AdsWords. Bistvo glavnega koncepta je iskanje glavne iskane besede in ne nabiranje splošnih iskalnih besed. Z lasersko preciznostjo je treba iskati oz. poiskati samo eno iskano besedo in ne dve ali tri. Gre za točno relevantno iskano besedo, ki odraža naše rešitve. Z natančno fokusirano iskano besedo

Page 69: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 64

povečamo kredibilnost, poudarimo pomen strani in vzamemo moč konkurenci. Gre za točno specializiran set besed, kjer se v glavi iskalca ravno ta stran ujema z njegovim iskanim. Tako zmanjšamo nerelevantne zadetke oz. zmanjšamo obiskanost strani, vendar pa zadovoljimo zelo ozek del obiskovalcev.

Slika 41: Primer uporabe orodja za iskane besede v GoogleAdWords

Težko je zadovoljiti 50 % ljudi in tudi težko je zadovoljiti 20 % ljudi. Zato je pomemben ozek fokus in fokusirati edinstveno prodajno prednost (USP), ki prinese več nakupov kot splošni USP. Če navedemo primer, je splošno iskana beseda »otroška oblačila«, ki ima na mesečni ravni 4.400 iskanj. Takšna stran bi, če bi kotirala na prvem mestu, beležila odličen obisk, vendar bi bila glede na konverzijo prodaja slaba in oglaševanje drago. Če gremo še malo v globino, bi bila bolj natančno iskana beseda »športna otroška oblačila«. Vendar je še vedno dovolj široka beseda in oglaševanje bi bilo na Google Ads precej drago. Bolj fokusirana beseda bi bila »športna otroška oblačila Nike«. Gremo lahko še bolj v globino: »športna otroška oblačila trenirke Nike«. Tukaj smo dosegli zelo prefinjen, dokaj natančn set iskane besede. Lasersko fokusiran mikro set iskanih besed bi bil: »Športna otroška oblačila trenirke Nike Breakline«. Če spletno stran optimizirano z mikro-iskano besedo (Športna otroška oblačila trenirke Nike Breakline) bo obiskovalec po vsej verjetnosti postal tudi kupec tega izdelka. Naše oglaševanje v Google Ads smo omejili na ozek fokus in obiskovalcu postregli z relevantno vsebino. Bounce Rate v Google Analytics se bo zmanjšal tudi pod 10 % in Google bo zaradi

Page 70: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 65

relevantnosti zmanjšal tudi posledično ceno na klik. Spletna stran bo imela zelo dober ROI (return of investment) oz. donos investicije. Pri vsem tem je zelo pomembno, da znamo skozi množico iskanih besed poiskati tisto, ki nam bo doprinesla največ oz. bo konverzija optimalna. Pri vsem tem je to toliko bolj pomembno, ker kasneje lahko iskana beseda postane ime naše domene. Če nadaljujemo s prvim primerom, bi bila zelo slaba izbira domene otroskaoblacila.si, ampak bi po tej logiki izbrali SportnaOblacilaNike.si tudi zaradi dejstva, da uporabnik preko seznama iskanja opazi domeno hitreje, ker je daleč najbolj relevantna njegovi poizvedbi iskanj. Zelo dober primer je ime domene pocenielektrika.si podjetja GEN-I. Za slovenska iskanja ni potrebno toliko natančnosti, ker tudi na 2 milj prebivalcev ni veliko konkurence. Pomen natančnega fokusiranja je pomemben na angleško govorečem trgu (500 milj). Znanosti je tukaj kar nekaj, vendar se zaradi intelektualne zaščite podjetja Dotkomp ne bom spuščala v podrobnosti.

6. VZDRŽEVANJE SPLETNE TRGOVINE 6.1. VZDRŽEVANJE SPLETNE TRGOVINE Nekajkrat na leto se naredijo popravki in posodobitve trgovinskega sistema CS-Cart. Posodobitev se izvrši v nadzorni konzoli v CS-Cartu v Settings > Upgrade Center. V centru za nadgraditev nastavimo FTP nastavitve (ftp uporabniško ime, geslo in naslov strežnika) in aktiviramo posodobitveni proces. Po končanem procesu namestimo novo posodobljeno različico CS-Carta in s funkcijo Check preverimo, katere datoteke so bile spremenjene. CS-Cart nam spremenjene stare datoteke shrani oz. ustvari kopijo datotek v primeru da imamo po posodobitvah težave. V podjetju smo pred samo izdelavo vodili točno evidenco, katere datoteke smo spreminjali in kaj se je spreminjalo v predlogi. Po končanem procesu posodobitve te datoteke pregledamo in primerjamo spremembe. Evidenca spremenjenih datotek v CS-Cartu za spletno trgovino: Spremenjene datoteke v predlogi: /skins/basic/customer/common_templates/style.tpl /skins/basic/customer/views/block_manager/render/location.tpl /skins/basic/customer/index.tpl Predloga za prikaz slik: /skins/basic/customer/views/products/components/product_images.tpl /skins/basic/customer/blocks/product_templates/default_template.tpl -------------------------------- CSS: /skins/basic/customer/dropdown.css -------------------------------- Za namenom da zmanjšamo boleč proces vsakokratnega popravljanja po posodobitvah, smo ustvarili cofek.css datoteko in jo umestili v glavo predloge oz strukture HTML-ja. Tako z vsakim procesom nadgraditve glava ostane nespremenjena in neodvisna od notranjih sprememb sistema.

Page 71: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 66

Da prepišemo zapisane css datoteke, smo datoteko umestili na konec css datotek (reset.css, basic.css, styles.css ...). Če imamo dve isti css funkciji, brskalnik prikaže zadnjo zapisano vrednost, primer: @CSS .product-main-info h1.mainbox-title { color: #555 } .product-main-info h1.mainbox-title { color: #111 } Prikazana vrednost za H1 oznako je zadnja zapisana vrednost, color: #111. Vir: Kako nadgraditi CS-card. http://kb.cs-cart.com/how-to-upgrade 6.2. POSODABLJANJE SPLETNE TRGOVINE Posebno vzdrževanje trgovine ni potrebno. Zaloga se vodi avtomatično, tako da ni potrebno skrbeti za osvežitev izdelkov. CS-Cart sistem omogoča, da lastnika opozori o nizki zalogi, vendar v našem primeru ta funkcija ni izkoriščena, saj gre za unikatne artikle z omejeno količino. Edino potrebno vzdrževanje je, da se vsako leto podaljša lastništvo domene, SSL certifikat in redno vzdrževanje strežnika (zaradi varnosti) na strani sistemskega administratorja. 6.2.1. Vnos novega artikla Vnos artikla je enostaven in hiter. Kliknemo na Products > Add Products in odpre se okno New Product. 6.2.2. Vnos novih besedil

Ime izdelka Kategorija Cena Kratek opis in polen opis Status Aktiven Naložimo sliko iz lokalnega PC-ja EAN kodo Zaloga SEO Meta podatke

Na koncu shranimo in izdelek se prikaže na strani.

Page 72: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 67

Slika 42: Prikaz shranjevanja vnosov novega produkta

Page 73: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 68

Celoten proces od nastajanja izdelka v glavi, modeliranja, slikanja na terenu in do vnosa v spletno trgovino:

Slika 43: Prikaz procesa od nastajanja izdelka do vnosa v spletno trgovino

Vsak korak je pomemben, biti mora vrhunsko dodelan, ker tudi majhne podrobnosti vplivajo na končno prodajo. Slab kroj, neposrečeno izbrane barve, površno slikanje lahko privedejo do nezaželene prodaje.

Page 74: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 69

7. ELEKTRONSKA ANKETA O SPLETNEM NAKUPOVANJU OBLAČIL Z anketo, ki smo jo pripravili, smo želeli prejeti čim več podatkov od naključnih anketirancev o njihovih navadah, ter odločitvah o nakupu oblačil na spletu. Posebej nas je zanimalo, kakšne so navade nakupovanja otroških oblačil na spletu. Elektronsko anketo smo naredili s pomočjo Googla Form, ki se nahaja v Googlovih dokumentih (ang. Google Docs). Skupno smo prejeli 321 odgovorov naključnih anketirancev. Naša ciljna skupina anketirancev je bila skupina ljudi, ki so že nakupovali na spletu. 7.1. PREGLED REZULTATOV ANKETE Podrobno z grafi in opisom predstavljamo rezultate ankete. V oglatih oklepajih ([xy]) je predstavljeno število anketirancev za posamezno vprašanje. 1. Kaj vpliva na vašo odločitev za nakupovanja oblačil na spletu?

Slika 44: Frekvenca odgovorov na 1. vprašanje

Anketiranci so lahko izbrali več vplivov, zato je skupni odstotek večji od 100 %. Iz slike 41 jasno vidimo, kaj je tisto najbolj pomembno, da se odločijo za nakup oblačil na spletu. Kot smo predvidevali, je to cena izdelka (51 %), takoj nato sledi udobno nakupovanje (50 %) in

Page 75: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 70

brezplačna dostava (33 %). Dokaj pomemben dejavnik je tudi ta, da je izdelek dosegljiv samo na spletu (30 %), za tem pa veliko informacij (29 %). Manj pomemben vpliv je hitra dostava (25 %) in mnenje kupcev (13 %). Priporočilo drugih (7 %) in unikatnost izdelka (5 %) ni pogost vpliv. Dokaj velik odstotek anketirancev pa se ne odloča za nakup oblačil na spletu, teh je 24%. Majhen odstotek anketirancev (2 %) se za nakup odloči zaradi drugih vplivov. 2. Za spletno nakupovanje oblačil se ne odločam, ker:

Slika 45: Frekvenca odgovorov na 2. vprašanje

Več kot 50 % vprašanih se odloča za nakup oblačil na spletu. Najbolj pogost vzrok za nenakup oblačil na spletu je, da si želijo izdelek pomeriti (26 %), sledi strah, da izdelek ne bo prave velikosti in ga bo potrebno vračati (13 %), nato slab opis in predstavitev izdelka (4 %). Majhen odstotek ljudi je kot razlog, zakaj se ne odločajo za spletno nakupovanje oblačil navedlo tudi, da izdelek morajo potipati v roki (2 %) ali pa raje nakupujejo v fizični trgovini (2 %).

Page 76: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 71

3. Če bi se odločali za nakup otroškega oblačila, kaj je za vas najbolj pomembno:

Slika 46: Frekvenca odgovorov na 3. Vprašanje

Ker je trgovina namenjena otroški konfekciji, smo želeli izvedeti, kaj je najbolj pomembno pri odločitvi za nakup otroškega oblačila na spletu. Izvedeli smo, da je najbolj pomembno, da sta material in izdelava izdelka dobre kvalitete (62 %), sledi udoben in praktičen izdelek (53 %), nato pa je že cena (51 %). Vprašanim je nekoliko manj pomembno, da se izdelek lahko enostavno zamenja (49 %), brezplačna dostava (31 %) ter barva in vzorci (25 %). Najmanj pomembno pa je, da je izdelek izdelan v Sloveniji (12 %) , ter da je unikaten (5 %). 4. Vaš spol!

Slika 47: Frekvenca odgovorov na 4. vprašanje

Anketo smo razposlali na več kot 3000 različnih elektronskih naslovov, predvsem ljudem, ki so že nakupovali na spletu (različne artikle). Prejeli smo 321 odgovorov. Od tega je glasovalo 62 % moških in 38 % žensk. Presenetljivo je, da se je za anketo o nakupu oblačil na spletu odzvalo več moških kot žensk.

Page 77: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 72

5. Pri nakupu otroških oblačil na spletu se odločate med naslednjimi kriteriji?

Slika 48: Frekvenca odgovorov na 5. vprašanje

Velik odstotek vprašanih se ne odloča za nakup oblačil na spletu. Kdor pa se odloči za nakup oblačil na spletu, se najprej odloči za priznane tuje znamke, takoj za tem pa priznane domače blagovne znamke. Zanimivo je, da se dokaj velik odstotek ljudi odloča za nakup cenenih oblačil. Sledijo domača kvalitetna oblačila ter oblačila, izdelana po meri. Nekaj se jih odloča tudi za druga oblačila. 6. Katera oblika oglaševanja vam je najbližja, oz., kaj vas najbolj prepriča, da se odločite za obisk spletne trgovine? Iz ankete, ki smo jo opravili, je razvidno, da največ ljudi za obisk spletne trgovine ne pritegne oglaševanje, temveč jih za to prepriča priporočilo in mnenje drugih.

Oglaševanje na spletnih portalih

Slika 49: Frekvenca odgovorov na 6. vprašanje

Page 78: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 73

Oglaševanje na spletnih portalih se anketirancem zdi srednje efektivno 27 %, kar vidimo tudi na sliki.

Oglaševanje preko socialnih omrežij (Facebook)

Slika 50: Frekvenca odgovorov na 6. vprašanje

Zanimivo je, da je najmanj anketirancem najbližje oglaševanje v socialnih medijih, kar 45% (slika).

Oglaševanje po tiskanih medijih (časopisi, revije, letaki)

Slika 51: Frekvenca odgovorov na 6. vprašanje

Oglaševanje v tiskanih medijih je za anketirance srednje efektivno (32 %), kar je razvidno s slike .

Page 79: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 74

Oglaševanje me ne pritegne, prepričajo me priporočila in mnenja

Slika 52: Frekvenca odgovorov na 6. vprašanje

Zelo pomembno dejstvo je, da se za obisk spletne trgovine anketiranci odločijo zaradi priporočila drugih (22 %). (slika)

Google oglaševanje (Google ads)

Slika 53: Frekvenca odgovorov na 6. vprašanje

Iz slike 50 je razvidno, da se anketirancem tudi ta način oglaševanja ne zdi dovolj blizu, da bi jih prepričal za obisk spletne trgovine (kot nam to kaže rezultat, kar 31 %). Nasprotnega mnenja je samo 4 % anketirancev.

Page 80: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 75

7. Na kaj ste pozorni pri nakupu oblačila:

Slika 54: Frekvenca odgovorov na 7. vprašanje

To je bilo za nas eno najbolj pomembnih vprašanj, saj nam v času, v katerem se trenutno nahajamo, pokaže, da anketirancem še vedno pomeni kvaliteta več kot cenenost izdelka. Kot je razvidno iz slike, se odloči za nakup izdelka boljše kvalitete kar 48 %. Za anketirance je pomembna tudi unikatnost izdelka (34 %). Najmanj pa se jih odloča za cenene izdelke (14 %) (npr. izdelki iz Kitajske).

Page 81: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 76

8. MOJA VLOGA PRI REŠEVANJU PROBLEMA Pri projektu sem bila vodja od začetka do konca. Odločala in sodelovala sem pri vsakem koraku, vendar pa v določeni področji dela, kot sta programiranje in razrez v HTML-ju, nisem bila vpletena, pri tem je imelo glavno vlogo podjetje Dotkomp. Imam kar dober smisel za grafiko, risanje, barve, prav tako so izdelki v celoti moje delo, modeliranje, razrez krojev, izbira barvnih kombinacij in šivanje. Izdelke sem na koncu tudi slikala in vnašala v trgovinsko platformo. Bistveno pri tem je bilo moje poznavanje trga z otroškimi oblačili in analiza ponudbe. Videla sem, da na trgu manjka določen segment izdelkov in v tem odlično priložnost, da to vrzel zapolnimo. To je pripeljalo do odločitve, da naredimo spletno trgovino in tako izkoristim poslovno idejo. Skupaj s podjetjem smo analizirali ključne iskane besede in razvijali strategijo za boljšo uvrstitev v iskalnikih. Zaradi boljšega razumevanja ljudi glede problematike kupovanja oblačil na spletu sem naredila obširno spletno anketo na to temo. Podjetje mi je s svojo strokovnostjo pomagalo tudi pri težavnih temah in me pravilno usmerjalo.

8.1. BODOČI RAZVOJ Prihodnost bo usmerjena v večji izbor izdelkov z različnimi variacijami. Trenutni izdelki se bodo dograjevali z več možnostmi in proizvajalo se bo različne kroje. Spletna trgovina bo obdržala ozek fokus in zavezo za to, za kar je namenjena. Pomembno je, da obdrži jasno smer in tam poizkuša prodreti na trg. Nesmiselno bi bilo proizvajati ogromno različnih izdelkov in konkurirati ostalim, temveč se je potrebno osredotočiti na en sam izdelek z več variacijami in preko marketinških kanalov nase pritegniti pozornost. Prvo pravilo govori: »Bodi odličen samo v eni stvari in po tem boš poznan!«. Pri razvoju bomo večino časa namenili praktičnosti izdelkov in skrbeli za to, da smo povsem drugačni od konkurence. Še več, naš cilj je, da nas stranke prepoznajo kot svojevrstno podjetje, saj v tem segmentu ni podjetja ali konkurenta s podobnimi izdelki. Poleg dodane vrednosti želimo ustvariti svojo nišo in poskrbeti za to, da znamka počasi utrdi svoj položaj na trgu. Vsekakor je najtežja pot šele pred nami. Podjetje bo moralo z agresivno taktiko prodreti na trg in ravno pri eskalaciji se rabi veliko vloženih sredstev. Potrebno se je zavedati, da na tej točki 90 % podjetij propade ne glede na to, kakšno idejo in inovativnost nosi izdelek. Izdelani izračuni so pokazali, da vložek v oglaševanje na internetu kot na ostalih kanalih ne doprinese pozitivnega poslovanja. Povrnjenih se dobi od 5 do 15 % vloženih sredstev v marketing. Naj na kratko postrežem s številkami; ravno za to kategorijo izdelkov (otroška oblačila) je za Google Ads oglaševanje cena za enklik 3.85 € (5 $), to velja za ameriški trg, zelo podobne številke veljajo so tudi za Evropo. Prvošolček z narejeno matematiko z zadostno oceno bi znal izračunati, da za 100 klikov na Google Ads plačamo 385 €, in s ceno artikla ccl 40 € je potrebno za pozitivno poslovanje minimalno prodati vsaj 15 izdelkov. Skoraj vsak sedmi obiskovalec strani bi se moral odločiti za nakup, to je pa tudi »znanstvena fantastika v zvezdnih stezah«. V najboljših časih pred recesijo je bila hvalevredna statistika konverzije od 4 do 7 %, nekateri so s filtriranjem dosegli tudi več. Na 100 obiska 7 želenih akcij. Dandanes, če dosežeš 1 % konverzijo, si podjetje zasluži krono. Prodajna mesta (stojnice, sejmi), zavzemajo nekje od 100 € do 300 € na kvadratni meter. Velik izziv bo podjetju predstavljalo iskanje marketinških kanalov, neposredno trženje, skrb za ROI (Return On Investment - donosnost naložbe) in ustvarjanje dovolj »nore zgodbe« (v sliki in besedi), ki bo navdušila kupca, da bo hvalil izdelke. Počasi in vztrajno bomo gradili na doseganju višje pozicije na ključnih iskanih besedah v Googlu.

Page 82: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 77

9. ZAKLJUČEK V diplomskem delu smo izdelali spletno trgovino, ki bo služila za prodajo unikatnih šivanih izdelkov in je namenjena predvsem otroški konfekciji. Pred pričetkom izdelave spletne trgovine smo podrobno pregledali trg ter konkurenco. Na podlagi rezultatov smo se odločali med štirimi spletnimi trgovinskimi platformami, in sicer na podtagi tega, katera nam nudi najboljše poslovanje za našo ponudbo. Zaradi njene popolnosti in hkrati enostavnosti smo se odločili za CS-Cart platformo. Nudi nam vse, kar smo želeli in potrebujemo. Z anketo, ki smo jo izvedli pred začetkom, smo dobili koristne informacije, kaj si ljudje želijo ter na podlagi česa se odločajo za obisk spletne trgovine. Ker bomo ponujali kvalitetne šivane izdelke, predvsem oblačila, je zelo pomembno, da bodo izdelki zelo dobro predstavljeni. Zelo pomembne so fotografije in kvaliteten opis izdelka. V prihodnosti si želimo uveljaviti blagovno znamko in jo narediti prepoznavno v Sloveniji in širši okolici, onstran meja. Nove izdelke bomo tedensko objavljali v spletni trgovini.

Page 83: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 78

LITERATURA IN VIRI Airey D., Logo Design Love: A Guide to Creating Iconic Brand Identities, Berkeley, USA (2010) Cattaneo A., Maier A., Spooner C., The Smashing Book #1, Smasing Media GmbH, Luebeck, Nemčija (2009). Ward M., Charchar A., Inchauste F., Smashing Book #2, Smasing Media GmbH, Freiburg, Nemčija (2011). A visual Guide to Rich Snippets (29. 5. 2012) http://www.seomoz.org/blog/a-visual-guide-to-rich-snippets Barvno kolo (04. 9. 2012 ) http://mayburilova.files.wordpress.com/2010/11/colour-wheel3.jpg Barvna teorija (01. 8. 2012) http://www.slikarskimaterial.si/barvna-teorija Barvna teorija (01. 9. 2012 ) http://www.sensationalcolor.com/color-theory/color-temperature-if-a-color-is-warm-or-cool-may-be-relative.html Barvne palete (29. 8. 2012) http://design-seeds.com/index.php/search  Barvne palete (30. 8. 2012) http://www.boutiquedesignblog.com/ Cart of the Week OXID –eShop. (05. 3. 2012) http://www.practicalecommerce.com/articles/989-Cart-of-the-Week-OXID-eShop CS-card (2. 7. 2011) http://www.cs-cart.com/ Donosnost naložbe (20. 10. 2012 ) http://support.google.com/adwords/bin/answer.py?hl=sl&answer=14090 Dotkomp, kdo in kje smo (05. 4. 2011 ) http://www.woglasevanje.si/  Design tutorials top 10 logo design tips (27. 9. 2012) http://www.designingtips.com/2011/08/11/design-tutorials-top-10-logo-design-tips/ Fotografije (15. 9. 2012 ) http://weheartit.com/katieflorida Kako nadgraditi CS-card (17. 9. 2012) http://kb.cs-cart.com/how-to-upgrade

Page 84: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 79

Kombinacija barvnih shem (15. 8. 2012) http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm  Magento (1. 6. 2011) http://www.magentocommerce.com/ Oxid (9.6.2011) http://www.oxid-esales.com/ PrestaShop (12. 6. 2011 ) http://www.prestashop.com/  Pomen barv - teorija (30. 8. 2012) http://www.color-wheel-pro.com/color-meaning.html Pomen barv (30. 8. 2012) http://www.sibagraphics.com/colour.php Spletno nakupovanje v Slovniji in tujini- Forrester Research (23. 7. 2012 ) http://www.forrester.com Vital tips for effective logo design (29. 9. 2012 ) http://www.smashingmagazine.com/2009/08/26/vital-tips-for-effective-logo-design/ When to use php template engines (10. 9. 2012) http://stackoverflow.com/questions/5888089/when-to-use-php-template-engines KAZALO SLIK Slika 1: Noga spletne strani (www.prestashop.com) ……………………….…… 11 Slika 2: OXID spletna trgovina (www. oxid-esales.com ) ……………………… 13 Slika 3: Spletna trgovina Magento (www.magentocommerce.com) ……….…… 14 Slika 4: XML layout datoteka, kje se nahaja .…………………………………… 15 Slika 5: XML layout datoteka ………….……………………………………… 15 Slika 6: Upravljanje z bloki ……………...…………………………………………….. 18 Slika 7: Nadzornik …………………….………………………………………… 19 Slika 8: OXID predloge ………………………………………………………… 22 Slika 9: Magento predloge ………………………………………………….…… 22 Slika 10: Prikaz dodatnih informacij pod rezultatom (www.google.com) ….……. 24 Slika 11: Barvno kolo (www.tigercolor.com) …………………………………….. 28 Slika 12: Barvna kolesa(www.slikarskimaterial.si/barvna-teorija,

www.en.wikipedia.org/wiki/RYB_color_model) ………….………..….. 29

Slika 13: Tople in hladne barve ……………………………………………….….. 30 Slika 14: Barve v naravi (http://www.sur-realphotography.com/)……..……….… 34 Slika 15: Barve v naravi (http://www.sur-realphotography.com/)………....……... 35 Slika 16: Barve v naravi

Page 85: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 80

(http://www.flickr.com/photos/34654941@N02/5523287271/)........…... 35 Slika 17: Izbor barv za spletno trgovino ………………………………………….. 36 Slika 18: Izbor barv za spletno trgovino ………………………………………….. 36 Slika 19: Prevladujoča vijolična zgoraj, spodaj svetlo zelena in temna

spodaj(http://www.fanpop.com/spots/pink-color/images/23859302/title/pink-trees-photo) …………………………

38

Slika 20: Modra pomirja, zelena daje občutek svežine, pomladi in komplementarna barva vijolična pa v sredini izrazito izstopa (http://www.flickr.com/photos/stanzim/5730988789) ……... ………….

38

Slika 21: Izrazito vijolično-rdeča, ki vznemirja čutila in bela-modra, ki lahko nevtralizira in pomirja (http://www.flickr.com/photos/bartceuppens/5639992528/)…………….

39

Slika 22: Močna poudarjena svetlo-vijolična izrazito izstopa v kombinaciji s komplementarno zeleno bravo (http://www.flickr.com/photos/nondesigner/5610040196) ……………..

39

Slika 23: Količina izbranih barv ………………………………………………….. 40 Slika 24: Prikaz logotipa Mercedes. Lepo prikazani koraki razvijanja logotipa od

večjih elementov v grafiki do enostavnega končnega logotipa tri-krake zvezde (www.emercedes-benz.com) ……………………………………

45

Slika 25: Primer logotipa (www.pipistrel.si) ……………………………………... 45 Slika 26: Primer logotipa (www.apple.com) ……………………………………….…. 46 Slika 27: Nekaj primerov dobrega oblikovanja logotipa (www.logopond.com). … 47 Slika 28: Prvi osnutki oblikovanja logota za spletno trgovino ………………….... 48 Slika 29: Izbor grafike za ožičen model ………………………………………….. 49 Slika 30: Ožičen model, skelet spletne strani ……………………………………. 50 Slika 31: Lorem Ipsum – slepi tekst (http://sl.lipsum.com) ………………………. 51 Slika 32: Css funkcija za paragraph - maksimalna širina stolpca za velikost

pisave 14 px …………………………………………………………….. 51

Slika 33: Css funkcija za paragraf – dodana je višina razmika med vrstico besedila ……………………………………………………………….…

52

Slika 34: Css funkcija za paragraph …………………………………………….… 52 Slika 35: Css funkcija za paragraph …………………………………………….… 53 Slika 36: Izbor pisave (www.google.com) …………………………………….… 54 Slika 37: Proces izdelave spletne trgovine. Od ideje do končnega izdelka…….…. 57 Slika 38: Aktivacija SEO url naslova ………………………………………….…. 59 Slika 39: Prikaz optimizacije spletne trgovine ………………………………….... 61 Slika 40: Prikaz zapisa rich snipeta v Google orodju (www.google.com) ……….. 63 Slika 41: Primer uporabe orodja za iskane besede v GoogleAdWords ................... 64 Slika 42: Prikaz shranjevanja vnosov novega produkta ………………………….. 67 Slika 43: Prikaz procesa od nastajanja izdelka do vnosa v spletno trgovino ……... 68 Slika 44: Frekvenca odgovorov na 1. vprašanje ………………………….………. 69 Slika 45: Frekvenca odgovorov na 2. vprašanje ………………………….………. 70 Slika 46: Frekvenca odgovorov na 3. vprašanje ………………………….………. 71 Slika 47: Frekvenca odgovorov na 4. vprašanje …………………………..……… 71 Slika 48: Frekvenca odgovorov na 5. vprašanje …………………………………. 72 Slika 49: Frekvenca odgovorov na 6. vprašanje …………………………………. 72 Slika 50: Frekvenca odgovorov na 6. vprašanje …………………………………. 73 Slika 51: Frekvenca odgovorov na 6. vprašanje …………………………………. 73 Slika 52: Frekvenca odgovorov na 6. vprašanje ………………………….………. 74 Slika 53: Frekvenca odgovorov na 6. vprašanje …………………………..……… 74 Slika 54: Frekvenca odgovorov na 7. vprašanje …………………………..……… 75

Page 86: IZDELAVA SPLETNE TRGOVINE ZA PRODAJO UNIKATNIH … · ) Online Marketing (Google, Najdi, Yahoo, Ads, Social Marketing, Email marketing), 9.) Merjenje Uporabnosti (heatmap) & Analiza

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Alenka Jezeršek: Izdelava spletne trgovine za prodajo unikatnih slovenskih šivanih izdelkov stran 81

KAZALO TABEL Tabela 1: Primerjave spletnih trgovinskih sistemov ............................................... 10 Tabela 2: Lokacije in bloke ………………………………………………………. 17 Tabela 3: Pregled na stran, moduli in motor …………………………...………… 23 Tabela 4: Izdelava persone za spletno stran ……………………………………... 26 Tabela 5: Pomen barve …………………………………………………………… 37 Tabela 6: Pomen barve …………………………………………………………… 37 Tabela 7: Zapis informacij ……………………………………………...………. 62

KRATICE B2B Business-to-business: poslovanje med podjetji B2C Business-to-consumer: poslovanje s strankami CMS Content Management System: sistem za upravljanje vsebin CRM Customer relationship management: spletna aplikacija za spremljanje strank

in vodenje projektov CSS Cascading Style Sheets: kaskadne stilske podloge EAN European Article Number oz International Article Number: mednarodna

številka artikla EON Elektronsko trgovanje HTML Hyper Text Markup Language: jezik za označevanje nadbesedila IP Internet Protocol: številka računalnika v omrežju MySQL Sistem za upravljanje s podatkovnimi bazami SQL OO Object-oriented: objektno orientirano programiranje PC personal computer: osebni računalnik PHP Personal Home Page Tools: orodja za osebno spletno stran RDF Resource Description Framework: z virom opisana delovna konstrukcija RDF Resource Description Framework: sistem za opis izvora ROI Return on investment: donosnost naložbe SEO Search engine optimization: optimizacija spletnih strani za iskalnike SOAP Simple Object Access Protocol: protokol za izmenjavo informacij v

porazdeljenem okolju SQL Standard query language: standardni povpraševalni jezik SSL Secure Sockets Layer: kriptografski protokol TRR Transakcijski račun UI user interface: uporabniški vmesnik URL Uniform Resource Locator: naslov spletnih strani na svetovnem spletu WWW World Wide Web: svetovni splet XML Extensible Markup Languag: razširljiv označevalni jezik