Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra informačních technologií
TÉMA BAKALÁŘSKÉ PRÁCE
TVORBA E-SHOPU A PREZENTACE ZBOŽÍ
Student : Klára Náhlovská Vedoucí bakalářské práce : Ing. Zuzana Šedivá Oponent bakalářské práce : Ing. Miloš Maryška, PhD.
Rok: 2011
ČESTNÉ PROHLÁŠENÍ Prohlašuji, že jsem bakalářskou práci na téma „Tvorba e-shopu a prezentace zboží“ vypracovala samostatně. Uvedla jsem veškeré prameny, literaturu a další zdroje informací, ze kterých jsem čerpala.
V Praze dne 22.6.2011
............................. Klára Náhlovská
PODĚKOVÁNÍ Děkuji tímto vedoucí mé práce, paní Ing. Zuzaně Šedivé, za flexibilitu při volbě tématu, inspirativní a podnětné připomínky při tvorbě této práce a především za trpělivost, kterou se mnou po celou dobu naší spolupráce měla. Zvlášť bych chtěla poděkovat celé své rodině, především mamince za podporu a pochopení při celém bakalářském studiu. Dále pak všem těm, kdo se podíleli na testování elektronického obchodu a hlavně Lukáši Markovi za cenné rady a poskytnutí zázemí při tvorbě produktové fotografie.
Tvorba e-shopu a prezentace zboží ABSTRAKT Hlavním cílem této bakalářské práce je samotné vytvoření elektronického obchodu. Dalším cílem je představit čtenáři možnosti tvorby vlastního elektronického obchodu se zaměřením na open-source řešení. Posledním cílem je seznámit čtenáře se zásadami tvorby produktové fotografie nabízeného zboží v tomto elektronickém obchodě. Výběr způsobu řešení tvorby elektronického obchodu probíhal na základě konzultace se zástupci firmy implementující elektronický obchod, s odborníky zabývajícími se tvorbou elektronických obchodů a z informačních zdrojů z internetu. Tvorba produktové fotografie probíhala v ateliéru vytvořeném v domácích podmínkách pomocí vlastních sil. Nejdůležitějším přínosem práce je samotná implementace elektronického obchodu. Dále je to rozšíření obzorů pro čtenáře z oblasti tvorby elektronických obchodů i produktové fotografie. Práce je rozdělena do tří částí. V první části - teoretické se zabývám výběrem vhodného způsobu tvorby elektronického obchodu z možných řešení. Poté se zde věnuji pouze zvolené variantě a sice open-source řešení. Na základě zvolených kritérií vybírám nejvhodnější open-source redakční systém pro majitele implementujícího elektronického obchodu. Dále se zde zabývám grafikou a jejím vlivem na návrh webu a poté zásadami pro tvorbu produktové fotografie. Druhá část se věnuje samotné tvorbě elektronického obchodu. Zaměřuji se zde především na prezentaci zboží a její vliv na uživatele. Dále se zde věnuji tvorbě produktové fotografie. Třetí část je zaměřena na testování návrhu elektronického obchodu nezávislými uživateli. Ti by měli být schopni identifikovat další případné nekonzistence, které je nutné zapracovat pro zlepšení uživatelského rozhraní. Dále se tato část zabývá porovnáním konkurenceschopnosti prezentace zboží včetně jejího vlivu na uživatele tohoto elektronického obchodu vůči elektronickému obchodu konkurence. Výsledkem tvorby elektronického obchodu je doporučení, jak vytvořit kvalitní elektronický obchod s nízkými vstupními náklady.
KLÍČOVÁ SLOVA Open-source modul, redakční systém, PrestaShop, Magenta, Joomla – Virtuemart, elektronický obchod, uživatelské rozhraní, prezentace zboží, digitální fotografie, produktová fotografie, přidání produktu, přidání kategorie, kategorizace zboží, mapování obrázků, testování. Klára Náhlovská, červen 2011
Strana 1
Tvorba e-shopu a prezentace zboží
ABSTRACT The main goal of this bachelor thesis is the creation of e-commerce. Another objective is present to readers the possibility of making their own e-commerce focused on opensource solutions. The last objective is to familiarize readers with the principles of product photography of goods offered in this e-commerce. The choice of solution for creating e-commerce was conducted in cooperation with representatives of companies implementing e-commerce, with experts involved in creating e-commerce and information sources from the internet. Product photography took place at the home studio and was created by me. The most important assets of this thesis is the implementation of e-commerce. It is an extension of view for readers in the section of e-commerce and product photography. The thesis is divided into three parts. In the first part - I deal with theoretical way of choosing the best e-commerce possible solutions. Then I focus on the chosen option, open-source solutions. Based on selected criteria, I´m selecting the best open-source content management system implemented for the owners of e-commerce. Furthermore, I deal with graphics and its impact on web design and then about product photography principles. The second part describes actual creation of electronic commerce. I focus here mainly on presentation of the goods and its impact on users. It goes on with creation of product photography. The third section focuses on design testing by independent e-commerce users. Those should be able to identify other possible inconsistencies that must be implemented to improve the user interface. Furthermore, this section deals with comparing the competitiveness of goods, including its impact on users of electronic commerce to electronic commerce competition. The result of e-commerce creation is recommendation how to create quality e-commerce with low budget.
KEY WORDS Open-source module, CMS, PrestaShop, Magenta, Joomla – Virtuemart, e-commerce, user interface, product presentation, digital photos, product photos, add product, add categories, the categorization of goods, mapping files, testing.
Klára Náhlovská, červen 2011
Strana 2
Tvorba e-shopu a prezentace zboží
Obsah 1
Úvod ............................................................................................................................... 5
1.1
Cíl práce................................................................................................................... 6
1.2
Metody dosažení cíle .............................................................................................. 6
1.3
Struktura práce ....................................................................................................... 6
2
Výběr e-shopu ................................................................................................................ 7
2.1
Open-source řešení ................................................................................................. 7
2.2
Způsob hodnocení .................................................................................................. 9
2.3
Hodnotící kritéria .................................................................................................... 9
2.4
Vyhodnocení ......................................................................................................... 10
3
Grafika a její vliv na návrh webu .................................................................................. 12
3.1
Přístupnost a použitelnost webu .......................................................................... 12
3.2
Psychologie barev a jejich vliv na používání na webu .......................................... 12
3.3
Typy grafiky používané na webu........................................................................... 13
3.4
Typy navigace používané na webu ....................................................................... 14
3.5
Webové layouty .................................................................................................... 16
3.6
Přehled grafických formátů použitelných na webu .............................................. 17
3.7
Tvorba produktové fotografie .............................................................................. 21
4
3.7.1
Základy digitální fotografie ............................................................................ 21
3.7.2
Zásady focení produktů ................................................................................. 22
Tvorba e-shopu v praxi ................................................................................................. 23
4.1
Popis a obsah elektronického obchodu ................................................................ 23
4.2
Redakční systém PrestaShop ................................................................................ 24
4.3
Administrační prostředí PrestaShopu ................................................................... 24
4.4
Katalog produktů .................................................................................................. 26
4.5
4.4.1
Přidání nové kategorie................................................................................... 26
4.4.2
Přidání nového produktu ............................................................................... 27
4.4.3
Mapování obrázků ......................................................................................... 29
Nafocení produktů ................................................................................................ 30 4.5.1
Profesionální nafocení vs. vlastní tvorba....................................................... 30
Klára Náhlovská, červen 2011
Strana 3
Tvorba e-shopu a prezentace zboží 4.5.2 5
Focení produktů v praxi ................................................................................. 31
Testování e-shopu ........................................................................................................ 33
5.1
Zpětná vazba ......................................................................................................... 34
5.2
Zapracování připomínek do návrhu ...................................................................... 34
6
Porovnání s e-shopem konkurence .............................................................................. 35
6.1
Způsob výběru konkurenčního e-shopu ............................................................... 35
6.2
Způsob porovnání e-shopů ................................................................................... 35
6.3
Vlastní hodnocení ................................................................................................. 37
6.4
Celkové shrnutí komparace .................................................................................. 39
7
Závěr ............................................................................................................................. 40
8
Seznam obrázků a tabulek ........................................................................................... 41
8.1
Seznam obrázků .................................................................................................... 41
8.2
Seznam tabulek ..................................................................................................... 41
9
Literatura a informační zdroje...................................................................................... 42
10
Slovník použitých pojmů........................................................................................... 46
11
Přílohy ....................................................................................................................... 48
11.1
Příloha A - Funkcionalita open-source redakčních systémů ................................. 48
11.2
Příloha B – Typy navigace ..................................................................................... 56
Klára Náhlovská, červen 2011
Strana 4
Tvorba e-shopu a prezentace zboží
1 Úvod Nakupování v e-shopech1 se v posledních letech stává stále oblíbenější a právě to je důvod, proč se na trhu těchto obchodů objevuje čím dál tím více. Existuje celá řada výhod, které tyto obchody nabízejí, a právě díky nim dávají zákazníci přednost nákupu v těchto obchodech před kamennou prodejnou. Mezi tyto výhody patří nižší ceny zboží na internetu oproti kamenným prodejnám. Dále je to možnost pohodlného nákupu pro ty, kteří nemají čas nebo snad nemohou navštívit kamenný obchod. A v neposlední řadě je to doprava, kde nakoupené zboží doručí přímo do domu [1]. Hlavním důvodem proč jsem si vybrala právě toto téma, je skutečnost, že firmě Lukaservice s.r.o. by velice prospělo vlastnit elektronický obchod se zbožím, které prodává a vyrovnat se tak konkurenčním společnostem, které už tyto obchody provozují. Dále mě k tomu vedla zvědavost, jak náročná je tvorba a obsluha těchto obchodů. A také jsem si toto téma vybrala z důvodu rozšíření obzorů a získání nových znalostí v oblasti, ve které nemám zatím moc zkušeností. V rámci této práce zhodnotím výhody a nevýhody tvorby elektronických obchodů prostřednictvím open-source řešení a blíže se zaměřím na tři vybrané open-source redakční systémy. S ohledem na cíl práce, kterým je samotné vytvoření elektronického obchodu, se budu věnovat základním faktorům, které jsou spojené s jeho vytvořením. Mezi ně patří zejména:
jeho principy,
působení na zákazníka,
tvorba produktové fotografie,
prezentace zboží,
testování.
V první části práce se v rámci teoretického úvodu zaměřím na faktory, které ovlivňují vnímání webu zákazníky, jak je webem „motivovat“ k nákupu atp. V druhé části práce na základě teoretické zkušenosti web navrhnu.
1
Elektronický obchod je speciální webová aplikace, sloužící ke zprostředkování obchodních transakcí na internetu, většinou v oblasti B2C. Pro mě a tuto práci jsou e-shop, elektronický obchod a web synonyma.
Klára Náhlovská, červen 2011
Strana 5
Tvorba e-shopu a prezentace zboží
1.1 Cíl práce Hlavním cílem této bakalářské práce je vytvořit elektronický obchod, který bude sloužit k prodeji zboží již zmíněné firmy Lukaservice s.r.o.. Výsledkem práce pak bude plně funkční elektronický obchod pro firmu Lukaservice s.r.o., která ho využije k prodeji svého zboží na internetu. Dílčí cíle práce jsou:
Představit možnosti tvorby vlastního elektronického obchodu.
Tvorba produktové fotografie.
1.2 Metody dosažení cíle Postupy, které využívám k dosažení finálního výsledku, kombinují poznatky z odborné literatury s osobními zkušenostmi a také s aktuálními zdroji z internetu. Využívám zde analytický postup pro výběr vhodného open-source redakčního systému. Dále je zde použita komparativní metoda při porovnání prezentace zboží a jejího vlivu na uživatele s elektronickým obchodem konkurenční společnosti. A k tvorbě produktové fotografie je použita vlastní metoda, vycházející především z teoretické části práce.
1.3 Struktura práce První část – teoretická, se zabývá výběrem vhodného způsobu tvorby elektronického obchodu z možných řešení. Poté se zde věnuji pouze zvolené variantě a sice open-source řešení. Na základě zvolených kritérií vybírám nejvhodnější open-source redakční systém pro majitele implementujícího elektronického obchodu. Dále se zde zabývám grafikou a jejím vlivem na návrh webu a poté zásadami pro tvorbu produktové fotografie. Druhá část se věnuje samotné tvorbě elektronického obchodu. Zaměřuji se zde především na prezentaci zboží a její vliv na uživatele. Dále se zde věnuji tvorbě produktové fotografie. Třetí část je zaměřena na testování návrhu elektronického obchodu nezávislými uživateli. Ti by měli být schopni identifikovat další případné nekonzistence, které je nutné zapracovat pro zlepšení uživatelského rozhraní. Dále se tato část zabývá porovnáním konkurenceschopnosti prezentace zboží včetně jejího vlivu na uživatele tohoto elektronického obchodu vůči elektronickému obchodu konkurence. V poslední části shrnuji poznatky, které jsem během práce získala a uvádím přínosy, které práce jejím čtenářům, stejně jako samotné autorce, nabízí.
Klára Náhlovská, červen 2011
Strana 6
Tvorba e-shopu a prezentace zboží
2 Výběr e-shopu Cílem této kapitoly je identifikovat nejvhodnější způsob tvorby elektronického obchodu, na základě zvolených kritérií, které vycházejí především z požadavků budoucího majitele elektronického obchodu a obecných zásad pro tvorbu elektronických obchodů. Nejdříve se zaměřím na možnosti tvorby elektronického obchodu a poté se budu podrobněji věnovat vybrané variantě. Existuje mnoho variant, jak si elektronický obchod pořídit. Příkladem mohou být:
vlastní vývoj,
vývoj na zakázku,
nákup již hotového řešení,
open-source řešení.
Vlastní vývoj elektronického obchodu nepřichází v úvahu především kvůli nedostatečným znalostem potřebných programovacích jazyků především CSS2, HTML3 a PHP4, které je potřeba pro tvorbu elektronického obchodu znát. Mj. by byla tato varianta velice časově náročná. Vývoj na zakázku a nákup hotového řešení byly také zamítnuty a to z finančních důvodů. Majitel firmy implementující elektronický obchod je ochoten do něj investovat maximálně částku 5000 Kč. Posledním možným řešením tvorby elektronického obchodu je open-source řešení, které jako jediné přichází v úvahu. Vyhovuje jak požadavkům majitele firmy implementující elektronický obchod, tak požadavkům mým. Jedná se především o nízké počáteční náklady, zaručenou kvalitu, jednoduchou instalaci, přehlednou a snadno ovladatelnou administraci. V této práci se budu tedy zabývat pouze open-source řešením.
2.1 Open-source řešení Nejdříve se zaměřím na výhody a nevýhody open-source systémů obecně, a poté se budu věnovat třem vybraným open-source redakčním systémům. Výběr redakčních systémů proběhl po přečtení několika recenzí a na základě konzultace s lidmi, kteří se tvorbou elektronických obchodů zabývají. Pro tvorbu samotného elektronického obchodu vyberu na základě zvolených kritérií ten nejvhodnější redakční systém.
2
CSS je zkratka pro anglický název Cascading Style Sheets. Jedná se o jazyk umožňující při tvorbě webových stránek oddělit obsah stránky od její formy. 3 Základní a nejpoužívanější programovací jazyk určený k vytváření statických stránek. 4 Skriptovací jazyk vykonávaný na straně serveru určený především pro programování dynamických webových stránek.
Klára Náhlovská, červen 2011
Strana 7
Tvorba e-shopu a prezentace zboží Výhody open-source systémů Podle zdroje [2+ je tou nejdůležitější výhodou open-source systémů možnost vlastního rozhodování při úpravách a provozu. Nezávislost na jakékoliv třetí straně. Odpadá i řešení poplatků za aktualizace a provoz. Platí se pouze za webhosting5 popř. podporu ze strany tvůrce elektronického obchodu. Svoboda a zodpovědnost za provoz může být pro zkušené lidi velkou výhodou. Další výhodou jsou nízké vstupní i provozní náklady6. Při realizaci je elektronický obchod prakticky zdarma. Náklady v začátku podnikání jsou pouze za webhosting a čas strávený instalací obchodu. K nejpoužívanějším open-source redakčním systémům je k dispozici český překlad [3], [4] a [5]. A další výhodou open-source systémů je široká škála modulů a rozšíření, kterými lze elektronický obchod vylepšit. Tyto moduly jsou v drtivé většině také zdarma a jsou velmi užitečné. Další velká výhoda open-source spočívá v tom, že jej používá velké množství uživatelů (miliony) a velké množství uživatelů (statisíce) se též zabývá vývojem systému. Nevýhody open-source systémů Z informačního zdroje *6+ vyplývají následující nevýhody:
Systém je zdarma pouze ve volně šiřitelné verzi. V případě volby jiné varianty některé z upravených verzí je nutné si připlatit.
Grafické zpracování open-source systému je taktéž omezené. Většinou se nedá pracovat s neupravenými "šablonami" volně dostupnými na internetu. V případě kvalitně zpracované grafiky na míru, je opět nutné platit odborníkovi.
Množství doplňků a modulů zdarma je také omezené. Většinu sofistikovanějších funkcí pro open-source systémy totiž vyvíjí komerční firmy, které chtějí za svoji snahu peníze. Funkce na míru v základu také nenajdeme. Jediným možným řešením je naprogramovat si je, což jsou další náklady a bohužel může dojít ke zvýšení poruchovosti systému.
Shrnutí Open-source řešení je vhodné pro zkušené uživatele, kteří si s nutnými úpravami bez problému poradí nebo ho využije např. „fanda technologie“, který se chce učit nové věci a má čas na to si s tím „hrát“. Toto řešení umožňuje získat zcela profesionální elektronický obchod na vysoké úrovni s velmi nízkými počátečními náklady.
5 6
Pronájem prostoru na serveru poskytovatele, kam se umisťují webové stránky. V případě, že není nutné do kódu výrazně zasahovat.
Klára Náhlovská, červen 2011
Strana 8
Tvorba e-shopu a prezentace zboží
2.2 Způsob hodnocení Metoda způsobu hodnocení redakčních systémů vychází z požadavků majitele firmy Lukaservice s.r.o. a z mých požadavků, které mi co nejvíce usnadní tvorbu elektronického obchodu. Tyto požadavky jsem použila jako kritéria při hodnocení a přidělila jim váhy podle přikládaného významu. Poté tato kritéria bodově ohodnotím formou číselných hodnot, jejichž význam je zřejmý z následující tabulky.
Bodové hodnocení
Slovní význam
1
Výborné
2
Velmi dobré
3
Dobré
4
Dostatečné
5
Nedostatečné
Tabulka 1 Kritéria hodnocení, zdroj: autorka
2.3 Hodnotící kritéria Administrace Při hodnocení tohoto kritéria bude kladen důraz na přehlednost, intuitivnost a snadnou správu kategorií, produktů, objednávek, zákazníků, atp. Posledním bodem, který zde budu hodnotit, je český překlad administrace. Tomuto kritériu je přiřazena váha 20%. Dostupnost modulů V první řadě bych chtěla říct, že se jedná pouze o neplacené moduly. Bude kladen důraz na množství dostupných modulů, které umožňují kvalitnější nastavení redakčního systému. Zároveň do tohoto kritéria spadá množství volně stažitelných šablon pro snadnější úpravu designu webu. Váha tohoto kritéria je 10%. Náročnost na webhosting Bude kladen důraz na to, jak moc zatěžuje daný redakční systém server. Váha kritéria je 15%. Možnosti platby Bude kladen důraz na to, jestli redakční systém umožňuje nastavení těchto způsobů platby:
Osobní oděr
Dobírka
Bankovní převod
Tomuto kritériu je přiřazena váha 10%.
Klára Náhlovská, červen 2011
Strana 9
Tvorba e-shopu a prezentace zboží Možnosti nákupu V tomto kritériu bude kladen důraz na to, jestli redakční systém umožňuje nákup zboží bez registrace. Tomuto kritériu je přiřazena váha 10%. SEO optimalizace Je velice důležitá kvůli přitáhnutí a udržení návštěvníka (potenciálního zákazníka). Zde bude kladen důraz na to, zda redakční systém umožňuje SEO7 optimalizaci u CMS8 stránek, přidávání kategorií a přidávání produktů. Váha kritéria je 20%. Aktualizace Bude kladen důraz na vývoj systému, jak často probíhá aktualizace verzí, zda je systém vyvíjen a upravován na základě zákaznických požadavků. Kritérium má váhu 5%. WIKI Zde bude kladen důraz na dostupnost nápovědy. Množství diskusních fór atp. Váha kritéria je 10%.
Kritéria
PrestaShop
Administrace Dostupnost modulů Náročnost na webhosting Možnosti platby Možnosti nákupu SEO optimalizace Akualizace WIKI
Magento
Joomla - Virtuemart
1 3
1 2
2 1
1
3
2
1 1 1 1 1
1 1 1 1 1
1 1 1 3 1
Tabulka 2 Hodnocení kritérií, zdroj: autorka
Bodové ohodnocení vyplývá především z konzultace s lidmi zabývajícími se tvorbou elektronických obchodů, ale také z informačních zdrojů z internetu. Více informací o funkcionalitě redakčních systémů je 13.1 Příloha A - Funkcionalita open-source redakčních systémů.
k dispozici
v
příloze
2.4 Vyhodnocení PrestaShop Celkové hodnocení
1,2
Magento 1,4
Joomla - Virtuemart 1,45
Tabulka 3 Vyhodnocení analýzy redakčních systémů, zdroj: autorka
7
Je zkratka anglických slov Search Engine Optimalization. Český ekvivalent těchto slov je optimalizace pro vyhledávače. 8 Je zkratka anglických slov Content Management Systém. Jedná se o software umožňující kompletní správu obsahu webu.
Klára Náhlovská, červen 2011
Strana 10
Tvorba e-shopu a prezentace zboží Z provedené analýzy nejvíce vyhovuje stanoveným požadavkům redakční systém PrestaShop. Nejlépe splňuje všechna kritéria, ale i přesto má menší nedostatky. Jedná se například o dostupnost modulů resp. šablon. Bohužel se mi nepodařilo nalézt všechny aktuální moduly, které budu při tvorbě elektronického obchodu potřebovat. Množství zdarma dostupných grafických návrhů je u PrestaShopu velmi omezené. Redakční systém Magento nevyhovuje stanoveným kritériím především kvůli velké náročnosti na webhosting, jinak se jedná také o velmi povedený redakční systém. Poslední analyzovaný redakční systém Joomla – Virtuemart je oproti předchozím dvěma redakčním systémům technologicky i funkčně zastaralý. Jedná o nadstavbu jiného systému, a proto je poměrně náročný na zdroje. A právě z těchto důvodů není vhodný pro realizaci elektronického obchodu.
Klára Náhlovská, červen 2011
Strana 11
Tvorba e-shopu a prezentace zboží
3 Grafika a její vliv na návrh webu Grafika je první věc, kterou uživatel na webu vnímá. Tento prvek má vliv na první dojem, který si uživatel vytváří a který rozhoduje o tom, zda na webu zůstane. Dobře zvolené barvy, správně umístěné grafické prvky, dodržování zásad rozložení ovládacích prvků, správně použitá a umístěná navigace, tomu všemu je potřeba při návrhu webu věnovat velkou pozornost. Nelze opomenout ani správné použití grafických formátů, které s tím vším souvisí. To vše je úzce spjato s přístupností a použitelností webu, bez kterých by i sebelepší webdesign byl k ničemu. Proto se na jednotlivé faktory, ovlivňující působení grafiky na uživatele, podívám podrobněji.
3.1 Přístupnost a použitelnost webu Velice důležitá věc, která je nutná brát v potaz při navrhování webu, je použitelnost a přístupnost webových stránek. Použitelnost webu podle zdroje [7] zvyšuje jeho srozumitelnost a přehlednost. Zaručuje, že se na něm návštěvník snadno orientuje, velmi rychle pochopí jeho uspořádání a ovládání a dokáže se tak rychle dostat k požadovaným informacím. Použitelnost také umožňuje rychlejší vykonávání potřebných činností a snižuje množství uživatelských chyb. Značný význam pro použitelnost má intuitivnost ovládání, které umožní uživateli stránky procházet tak, aby nemusel přemýšlet o navigaci. Přístupnost webu je podle zdroje [8] soubor pravidel, která zajišťují jeho bezbariérovost. Informace obsažené na webu jsou dostupné nezávisle na zobrazovacím zařízení, jeho nastavení a na fyzickém stavu uživatele.
3.2 Psychologie barev a jejich vliv na používání na webu Stejně tak, jak na nás působí barvy v každodenním běžném životě, je tomu i v prostředí internetu i když si to nejspíš vůbec neuvědomujeme. Tyto barvy hrají velmi důležitou roli v případě stránek nabízejících nějaké zboží nebo služby. V souvislosti s vnímáním barev vznikla během minulého století celá řada výzkumů, které se snažily odhalit působení barev na lidskou psychiku. Výsledky těchto výzkumů ukázaly, že každý člověk má svoji stupnici barev, přičemž významy barev jsou stejné. Důvodem je to, že tyto významy jsou založeny na účincích barev (fyziologických i psychologických) a na jejich vlastnostech, které jsou jim historicky připisovány *9].
Klára Náhlovská, červen 2011
Strana 12
Tvorba e-shopu a prezentace zboží Barva Žlutá Oranžová Světle zelená Tmavě zelená Světle modrá Tmavě modrá Červená Purpur Fialová Světle fialová Hnědá Šedá Bílá Černá
Obecná asociace Povzbuzuje, osvobozuje, přináší uvolnění, pocit, souladu, harmonie, působí vesele a otevřeně Je slavnostní, vyvolává pocit radosti, je spojena s představou slunce, tepla, bohatství, zlata, úrody Působí přirozeně, ale někdy i jedovatě, je spojena s představou chladu, vlhka, tichosti, rostlin Uklidňuje a chrání, ale také omezuje, je přátelská, dává pocit bezpečí a naděje Působí přívětivě, vyvolává představu oblohy a vzduchu, ticha a touhy Klidná, vážná až skličující, barva dálek, hloubky, rozjímání a smutku Vzrušující, energetická, prudká až náruživá, silná, mocná, spojená s představami ohně, krve, nebezpečí, lásky, hluku Působí důstojně, hrdě, vznešeně, povzbudivě, je spojena s představou spravedlnosti a majestátu Neklidná, znepokojivá, melancholická, tajemná, osobitá, náročná Působí začarovaně, rozpolceně, slabošsky, je to barva magie, melancholie, opojení Střízlivá, mlčenlivá, solidní a vážná, realistická, spojena s představou jistoty a pořádku, domova, tradice, zdrženlivosti Netečná, smutná, spojená s představou chudoby a pokory Neurčitá, nejistá, spojená s představou nevinnosti a čistoty Barva vzdorného protestu, zlého tajemství, nicoty, smrti
Tabulka 4 Klíč k působení barev na lidskou psychiku *10]
3.3 Typy grafiky používané na webu Tato část pojednává o typech grafických prvků, které provází uživatele internetu na každém kroku. Na webu se lze setkat s několika typy grafiky, které jsou odvozeny od účelu, pro který byla vytvořena a lze ji rozdělit do následujících skupin [10]. Identifikační grafika Tento typ grafiky lze nalézt na všech webových stránkách v ideálním případě vždy na stejném místě a ve stejné velikosti. Jedná se o prvky, podle kterých uživatel identifikuje web, na kterém se právě nachází. Typickým příkladem je logo, které při umístění na každou stránku webu pomáhá udržovat jeho vizuální jednotnost. Strukturální grafika Jedná se o grafiku, která utváří strukturu stránky neboli celkový vzhled. Cílem této grafiky je vytvořit jednotný a přehledný vzhled stránek, kterého dosahuje pomocí dělení webu do jednotlivých sekcí a vytváří tak místa pro odkazy na další stránky. Navigační grafika Prvky této grafiky slouží ke zvýraznění té části webu, ve které je umístěna navigace. Jedná se o grafické prvky, které uživatele odkazují na další stránky webu. Do této kategorie se řadí i tlačítka sloužící jako odkazy.
Klára Náhlovská, červen 2011
Strana 13
Tvorba e-shopu a prezentace zboží Kontextová grafika Grafika doplňující text stránek o informace grafického rázu a váže se na obsah stránek. Jejím cílem je vizuální prezentace obsahu stránek. To může být v některých případech snazší než pomocí textu a pro uživatele mnohdy příjemnější. Dekorační grafika Cílem této grafiky je vylepšit vzhled stránek za pomoci estetického působení na člověka a to využitím psychologických efektů barev a tvarů. Přitáhnout tak pozornost požadované cílové skupiny k obsahu stránek.
3.4 Typy navigace používané na webu Z informačních zdrojů [11] je známo, že existují následující typy navigace. Hierarchická navigace Vychází z principu větvení struktury webu na nižší kategorie. Uživatel postupně prochází stromem shora dolů a v každém uzlu vybírá nejvhodnější podkategorii. Ze své podstaty se hierarchická navigace používá na velmi rozsáhlých webech. Je určena zejména pro katalogově uspořádaná data, v takovém případě jde o klasický seznam odkazů na další podkategorie. Dále se využívá v případě upřesnění volby uživateli na základě sady postupných otázek, jehož typickým příkladem může být nápověda. Další častou podobou hierarchické navigace může být uzlové stromové menu, se kterým je možné se setkat v rozsáhlých internetových obchodech. Největší výhodou hierarchické navigace je její intuitivnost a srozumitelnost. Naopak nevýhodami může být větší časová náročnost procházení a obtížnější přeskakování mezi větvemi. Globální navigace Zpřístupňuje všechny stránky webu naráz formou menu, které je stále viditelné. Mívá horizontální či vertikální podobu. Protože tato navigace prochází celým webem, souvisí velmi úzce s použitelností. Místo, kde se uživatel právě nachází, může být vyznačeno buď tím, že daná položka menu není v daném kontextu odkazem, nebo je nějak graficky zvýrazněna. Vzhledem k omezenému rozsahu stále viditelného menu se používá pouze pro malé weby (cca. do 10 stránek), což může být menší nevýhoda, avšak jednoznačně kraluje v přehlednosti. Lokální (kontextová) navigace Jedná se o krátký seznam odkazů, umístěný obvykle pod hlavním textem stránky. Odkazy mívají popisné titulky a nabízejí uživateli směr dalšího postupu. V některých případech může mít i podobu malého svislého či vodorovného menu kdesi nahoře na stránce.
Klára Náhlovská, červen 2011
Strana 14
Tvorba e-shopu a prezentace zboží Zvláštní variantou kontextové navigace jsou odkazy na další/předchozí stránku v určité pevně dané sekvenci. Používá se u delších vícestránkových článků, sekvenčních prezentací a dlouhých stránkovaných seznamů či tabulek. Kontextová navigace je ideální zejména pro nové návštěvníky, které tak lze provést "za ručičku" přímo k jejich cíli. Nevýhodou je nesystematičnost a nepřehlednost. Častým návštěvníkům tedy nijak výrazně nepomáhá k tomu, aby si web zapamatovali a dostali "do ruky". V úvahu je třeba vzít i pracnost návrhu — musíte velmi dobře vědět, co budou vaši návštěvníci hledat a jak to budou hledat. Perfektní je v kombinaci se systematičtějšími styly, zejména s hierarchickou navigací. Tímto způsobem lze vytvořit navigaci, která je paralelně vhodná jak pro nové, tak pro zkušené návštěvníky a navíc jí lze zkrátit některé často používané cesty napříč hierarchickou strukturou rozsáhlých webů. Odkazy v textu Odkazy volně roztroušené v textu jsou základem hypertextového konceptu a jako takové představují nejstarší model navigace na internetu. Dnes se ovšem již jednoznačně jedná o styl pouze doplňkový. Výhodou je přirozenost, s jakou lze uživateli nabídnout související či rozvíjející informace. Nevýhodou je anarchie a ztráta orientace, ke které vede nadměrné či nevhodné použití. Sama o sobě tato navigace nenabízí žádnou informaci o tom, kde se návštěvník nachází. Nemá-li se proto návštěvník zcela ztratit, musí být buď kombinována s dalšími styly, nebo použita jen pro ty nejmenší weby (do 3-4 stránek). Mapa webu Mapa webu, neboli "site map" není vlastně nic jiného, než seznam všech stránek. Podle dovednosti tvůrců její grafické uspořádání lépe či hůře vystihuje strukturu webu a významové souvislosti mezi stránkami. Nevýhodou je nepřehlednost a pro skutečnou navigaci nízká použitelnost. Výhodou je ovšem vyčerpávající pohled na celý obsah webu. Lokální vyhledávač Dalším modelem navigace je lokální (tj. omezený jen na daný web) vyhledávač. Obvykle funguje na principu fulltextového vyhledávání, tj. hledá stránky obsahující zadaný text. V takovém případě je vhodné, aby byly výsledky prezentovány setříděné podle relevance. U velkých webů pak je kvalita rozpoznání relevance alfou i omegou použitelnosti vyhledávače. Specifické postavení mají vyhledávače zpřístupňující obsah, který je jinými prostředky nedostupný. To je časté u webů operujících nad rozsáhlou databází, ze které si uživatel vyhledávačem data vybírá podle určitých kritérií.
Klára Náhlovská, červen 2011
Strana 15
Tvorba e-shopu a prezentace zboží Klasický lokální fulltextový vyhledávač stojí obvykle spíše stranou zájmu běžných uživatelů a slouží tedy spíše jako doplněk pro fajnšmekry. Jeho hlavní výhodou je tedy poskytnutí maximálního komfortu zkušeným uživatelům, kteří tak ze stránek získají dobrý dojem. Drobečková navigace Drobečková navigace je podle zdroje [12+ seznam odkazů na nadřazené sekce, odkazy jsou odděleny šipkou či lomítkem. Jak již bylo řečeno, drobečková navigace poskytuje odkazy na stránky umístěné výše v hierarchii webu. Úkolem drobečkové navigace je ukázat návštěvníkům, kde se v hierarchii webu právě nacházejí a částečně i kam ještě mohou jít. Význam drobečkové navigace proto stoupá s rostoucím rozsahem a složitostí webu. Aby drobečková navigace dobře plnila svou funkci (tj. zvyšovala použitelnost webu), musí mít web jasně definovanou strukturu. Měla by být umístěna v hlavičce stránky, nejlépe poblíž hlavního nadpisu. Důležité také je, aby poslední položka drobečkové navigace nebyla odkazem – stránka nemá nikdy odkazovat sama na sebe (uživatele to pouze mate). Ukázka jednotlivých typů navigace je k dispozici v příloze 13.2 Příloha B – Typy navigace.
3.5 Webové layouty Pro správné navržení webu je nutné dodržovat zásady rozložení ovládacích prvků na webu tzv. layoutů. Na webu lze nalézt několik způsobů rozložení obsahu stránek, přičemž jednotlivé typy layoutů jsou vhodné pro různé typy webů. Jak lze vidět na Obrázku 1, layout rozděluje web do několika pomyslných sekcí, přičemž každá má svůj účel. Tento obrázek ilustruje nejobvyklejší typ layoutu na webu, ale ne vždycky jsou všechny zobrazené prvky na obrázku v daném webu zastoupeny [10], [13].
Obrázek 1 Základní rozložení webového layoutu [14]
Klára Náhlovská, červen 2011
Strana 16
Tvorba e-shopu a prezentace zboží
Obrázek 2 Obvyklá řešení layoutů e-shopů [14]
Nejčastěji používaným layoutem elektronických obchodů je layout A, který využívá všechny prvky. Tento layout se používá obvykle v případě, kdy web obsahuje globální navigaci, která je umístěna v hlavičce stránky. Navigaci hierarchickou, která je umístěna v levém bočním sloupci a dále navigaci kontextovou, jejíž pozice na webu bývá obvykle v pravém bočním sloupci. V patičce stránky bývají obvykle informace o společnosti, obchodní podmínky, kontakt apod. Layout typu B používají elektronické obchody, které nepoužívají kontextovou navigaci nebo mají tuto navigaci umístěnou uvnitř hlavního obsahu stránky. Layout typu C je častý u elektronických obchodů, které nevyužívají hierarchickou navigaci. V pravém bočním sloupci je obvykle umístěna navigace kontextová. Poslední vyobrazený layout D používají weby, které nevyužívají hierarchickou ani kontextovou navigaci. Přičemž kontextová navigace je umístěna uvnitř hlavního obsahu stránky.
3.6 Přehled grafických formátů použitelných na webu Pro vytvoření vhodné grafiky webu je důležité znát grafické formáty, které web podporuje. V následujícím textu uvádím jejich základní charakteristiky, popisuji vhodnost užití a jejich výhody a nevýhody.
JPEG (Joint Photographics Experts Group) Charakteristika: Podle zdrojů *15] a [16+ je tento formát ideální pro ukládání fotografií. Stal se široce akceptovaným standardem právě v digitální fotografii a neexistuje fotoaparát, který by snímky neukládal právě ve formátu JPEG. JPEG používá ztrátovou kompresi, která z fotografie odstraňuje okem nepostižitelné detaily zejména v oblasti barev. Při kompresi je možné nastavit široký rozsah stupňů komprese, a tak se JPEG hodí jak pro poměrně náročné aplikace, kde záleží na kvalitě obrazu, tak i pro aplikace, kde je prioritní velikost souboru (web). Finální úspora velikosti souboru záleží nejen na nastaveném stupni komprese, ale i na obsahu fotografie. Ostré fotografie plné jemných detailů lze Klára Náhlovská, červen 2011
Strana 17
Tvorba e-shopu a prezentace zboží zkomprimovat mnohem méně než např. jemný portrét s rozostřeným pozadím. I když je JPEG komprese poměrně kvalitní, při vyšším kompresním poměru (nižší kvalitě) se projevuje celá řada artefaktů - umělých a nechtěných produktů komprese, které v původním obraze nebyly a obraz degradují. Jsou to:
Jemné a plynulé přechody, kde JPEG komprese pracující na principu malých čtvercových bloků obrazu vytváří nehezké a na první pohled viditelné čtverečky.
Jemné detaily (čáry, vlasy atp.), které má JPEG komprese jako "nepodstatné" tendenci likvidovat. To je mimo jiné i důvod, proč není JPEG vhodný na běžnou zejména technickou grafiku.
Pravidelná struktura - vzorek. JPEG komprese je schopná vymyslet prvky obrazu, které v originále vůbec nejsou.
Nedostatky JPEG Formát JPEG je velmi povedený, ale přesto není použitelný ve všech případech a vždy má několik významných omezení:
Formát JPEG nepodporuje barevnou hloubku 12 ani 16 bitů na kanál. Vždy pracuje s barevnou hloubkou "jen" 8 bitů. Pro finálně upravený obraz je to dostatečné, ale jako formát pro dočasné uložení fotografie před náročnou úpravou se díky neschopnosti udržet 12bitovou barevnou hloubku, získanou např. z RAW, nehodí.
JPEG nepodporuje průhlednost (Transparency) neboli nedokáže vytvářet obrázky na průhledném pozadí. Průhlednost je však při vytváření počítačové grafiky či koláže často potřeba a je tak třeba sáhnout k jiným formátům (TIFF, PNG, GIF, PSD atd.).
Díky použité metodě komprese není JPEG formát vhodný na ukládání grafiky (kresby, grafy, ikony atp.). Komprese má tendenci čáry a písmena zobrazovat "zubaté" a rozpít je a tím zhoršovat jejich vzhled a čitelnost.
JPEG nepodporuje animace (pohyblivé obrázky) a nehodí se tak na pohyblivé ikony ani bannery.
JPEG nepodporuje bezeztrátovou kompresi. Komprese je vždy ztrátová, i když v praxi je možné tvrdit, že velmi malý stupeň komprese je absolutně nerozeznatelný od bezeztrátového formátu.
Určité riziko ztráty kvality hrozí při opakovaném ukládání do JPEG.
Přípony souborů: *.jpg,*.jpeg,*.jpe Počet barev: až 24 bitů barev, až 256 odstínů šedi Typ formátu: rastrový Nevhodné pro: mnohonásobné zpracování a fotomontáže, perokresbu, text, ikonky
Klára Náhlovská, červen 2011
Strana 18
Tvorba e-shopu a prezentace zboží Vhodné užití: fotografie a obrazy, u nichž není nutné zobrazovat plné detaily a hladké přechody v tónu a barvě
GIF (Graphics Interchange Format) Charakteristika: Formát GIF je rastrový grafický formát, který využívá bezeztrátovou kompresi. To znamená, že kvalita obrázku při jeho opětovném ukládání zůstane pořád stejná a žádná data se z obrázku neztratí. Popularita tohoto formátu spočívá ve dvou základních vlastnostech, a to v průhlednosti pozadí a v práci s animacemi. Na druhou stranu má i nějaké nevýhody, přičemž tou největší je malá barevná hloubka. Přípona souborů: *.gif Počet barev: až 256 barev Typ formátu: rastrový Vhodné užití: archivace, webová grafika, nadpisy, plakáty, loga, animované obrázky Nevýhody: malá barevná hloubka, nevhodné pro barevné fotografie Výhody: může se na webové stránce začít zobrazovat dříve než je celý načtený, což je umožněno podporou prokládání obrázků
PNG (Portable Network Graphics Format) Charakteristika: Formát PNG je určený pro bezeztrátovou kompresi rastrové grafiky. Byl vyvinut jako zdokonalení formátu GIF. PNG zvládne dle zvolené palety až 48 bitové barvy, má lepší podporu transparence obrázku a nabízí více typů prokládání. Zvládá i složité obrázky, ale za cenu mnohonásobně vyšší velikosti souboru než je tomu u formátu JPEG. Bohužel nezvládá animaci obrázků, pro kterou existují návrhy, ale k většímu uplatnění zatím nedošlo. Přípona souborů: *.png Počet barev: až 24 bitů barev Typ formátu: rastrový Vhodné užití: archivace, text, čárová grafika, čisté barvené plochy a ostré rozhraní barev Nevýhody: velká datová náročnost u složitějších obrázků, nevhodné pro fotografie, neumožňuje animace
Klára Náhlovská, červen 2011
Strana 19
Tvorba e-shopu a prezentace zboží
TIFF (Tagged Image File Format) Charakteristika: Formát TIFF je standard pro vysoce kvalitní ukládání obrázků určených pro tisk. Je to složitější oproti jiným formátům pro ukládání rastrové grafiky. TIFF umožňuje jako jeden z mála grafických formátů vícestránkové soubory. Umí pracovat jak s 8bitovou tak s 16bitovou barevnou hloubkou na kanál a dokáže do jednoho souboru pojmout i více obrázků či vrstev. Používá se buď zcela bez komprese, nebo s bezeztrátovou kompresí. Nejnovější specifikace umožňují použít i ztrátovou kompresi, kde jsou ale problémy s kompatibilitou se staršími programy. Mnoho fotoaparátů nabízí možnost ukládat fotografie na paměťovou kartu ve formátu TIFF. Ten ale produkuje obrovské soubory na jednu fotografii [17]. Přípony souborů: *.tif Počet barev: až 24 bitů barev Typ formátu: rastrový Vhodné užití: tisk, archivace obrázků, fotografie Výhody: vysoká kvalita zachovaného obrazu Nevýhody: velký objem dat, kvůli kterému se na internetu nemůže prosadit
Přehled základních rastrových formátů Vlastnost
GIF
Model RGB
256 barev (8bitů)
Model CMYK Průhlednost
2 úrovně (1 bit)
Komprese
bezztrátová
JPEG
PNG
TIFF
16 milionů (24bitů) 4 miliardy (32 bitů)
16 milionů (24bitů)
256 úrovní (8bitů)
16 milionů (24bitů) 4 miliardy (32 bitů) 256 úrovní (8bitů)
bezztrátová
bezztrátová
ztrátová
Proklad Animace Vrstvy Tabulka 5 Přehled základních rastrových formátů *16]
Klára Náhlovská, červen 2011
Strana 20
Tvorba e-shopu a prezentace zboží
3.7 Tvorba produktové fotografie Stejně tak jako působí na návštěníky vhodná kompozice a barvy použité v elektronickém obchodu, ovlivňují jej možná ještě významněji obrázky (například fotografie prodávaného zboží). Ty je nutné nejen správně umístit do elektronického obchodu, ale zároveň – a to zejména, je správně připravit. V této části se zaměřím nejprve na základy digitální fotografie resp. na správné nastavení expozice a kompozice obrazu, což je klíč k pořízení kvalitní fotografie. Poté přiblížím zásady produktové fotografie, kde a jak tuto fotografii nejlépe pořídit a jaké komponenty jsou pro pořízení fotografie potřeba.
3.7.1 Základy digitální fotografie Jakým způsobem lze pořídit digitální fotografii? Průběh focení vypadá tak, že uzávěrka odkryje snímač, který zaznamenává scénu před objektivem. Tento záznam - expozici snímku - přístroj uloží jako soubor na paměťovou kartu. Snímač potřebuje přesné množství světla, jestliže je ho hodně, vznikají vypálená místa (bílé plochy bez kresby). V opačném případě je snímek hodně tmavý, nezřetelný. Toto množství zajišťuje správná kombinace clony a času [18]. Správné nastavení expozice [18]: Na správné nastavení expozice mají vliv: čas, clona, citlivost a vyvážení bílé.
Čas je doba, na kterou uzávěrka odkryje snímač. Čím delší čas, tím více světla může při expozici dopadnout na snímač. Rozumný čas pro udržení fotoaparátu v ruce je 1/100–1/60 sekundy. Nad 1/10 sekundy je třeba použít stativ, jinak dojde k rozmazání snímku.
Clona (f) je převrácené množství světla, které objektiv propustí na snímač. Slouží k zúžení otvoru objektivu, tedy k regulaci množství světla, které dopadá na snímač.
Clona a čas společně určují množství světla při expozici např. při čase 1/30 sekundy bude clona f16 naopak při čase 1/250 sekundy bude clona f5.6. S větší clonou roste hloubka ostrosti. Při malé hloubce ostrosti je popředí ostré, ale pozadí rozmazané. Naopak při velké hloubce ostrosti je celý snímek rovnoměrně ostrý.
Citlivost snímače se nastavuje v jednotkách ISO. Udává, jak bude fotoaparát citlivý na světlo. Základním pravidlem je udržet citlivost co nejmenší kvůli výsledné kvalitě snímku. S vyšší citlivostí stoupá digitální šum.
Vyvážení bílé rozhoduje, zda bude vyznění fotografie teplé, studené nebo neutrální. Správné nastavení má vliv na podobu snímku a na expoziční histogram.
Klára Náhlovská, červen 2011
Strana 21
Tvorba e-shopu a prezentace zboží Kompozice obrazu Kompozice je zjednodušeně řečeno poskládání prvků v obraze, kdy se obraz divákům líbí nejvíce a kdy z hlediska prvků v obraze působí vyváženě (harmonicky). Může být také chápána jako souhrn pravidel a doporučení pro vytvoření vizuálně kvalitní a vyvážené fotografie. Kompozici také do značné míry určí formát (poměr stran) a výsledná velikost fotografie. Hlavní motiv, který se chystáme vyfotit, zdůrazníme především jeho umístěním. Není vhodné ho umístit přímo doprostřed snímku. Nejlepší umístění je tzv. zlatý řez (přibližně 1/3). Měl by být jasně zřetelný a co největší. Na snímku by neměly být žádné rušivé prvky. Pozadí by také nemělo nijak rušit, může vypovídat o hlavním motivu a mělo by s ním ladit. Dominantní objekt by měl být osvětlen zepředu. Barva světla závisí na jeho zdroji, proto má fotoaparát funkci automatické vyvážení bílé [19].
3.7.2 Zásady focení produktů Pro tvorbu produktové fotografie je vhodné použít ateliér, který nám nabízí pohodlí a absolutní kontrolu nad scénou i světlem na rozdíl od exteriéru, kde se světlo často a rychle mění a fotografování komplikují klimatické podmínky. V ateliéru je nutné postarat se o pozadí za fotografovaným předmětem tvořící pouze kulisu, která nijak nezasahuje do produktu. Nejobvyklejší je tedy jednobarevné fotografické pozadí tvořené látkou nebo papírem. V tomto případě je typické tzv. nekonečné pozadí, kdy látka či papír plynule přechází ze svislé do vodorovné polohy. Díky plynulému přechodu není možné identifikovat zlom a pozadí tak budí dojem nekonečna. Fotografický stůl umožňuje pohodlnou manipulaci s předměty a díky pevné a prohnuté fólii realizuje nekonečné pozadí. Průhledná fólie umožňuje svícení zespoda stolu a vede tak ke zcela bezestínovému výsledku [20].
Obrázek 3 Ukázka fotografického stolu [17]
Další důležitou pomůckou jsou softboxy, které produkují měkké, difúzní světlo. Jejich velká plocha simuluje nepřímé (odrážené) světlo produkované například oknem. Čím je softbox větší, tím produkuje měkčí světlo. Tvar softboxu poté určí, co a jak bude nasvíceno a vytvoří stíny. Klára Náhlovská, červen 2011
Strana 22
Tvorba e-shopu a prezentace zboží
4 Tvorba e-shopu v praxi Cílem praktické části této práce je vytvořit funkční elektronický obchod resp. zaměřit se na možnosti prezentace prodávaného zboží a to včetně tvorby produktové fotografie. Dále otestovat funkčnost tohoto elektronického obchodu a zapracovat do původního návrhu připomínky ze zpětné vazby. Na závěr této práce provedu srovnání s konkurenčním elektronickým obchodem z pohledu způsobu prezentace zboží a jeho vlivu na uživatele. Z vyhodnocení analýzy open-source redakčních systémů v teoretické části této práce vyplynulo, že nejvhodnějším řešením pro tvorbu tohoto elektronického obchodu je redakční systém PrestaShop. Instalaci a nastavení PrestaShopu jsem provedla za pomoci anglického a českého diskusního fóra tohoto produktu, ve kterém lze najít téměř vše i ohledně dodatečných rozšíření. Dalším zdrojem informací pro mě byly internetové stránky http://www.prestashopcesky.cz, kde jsou návody na užitečné úpravy, skripty a moduly. Zboží je prezentováno na základě obecně platných pravidel pro elektronické obchody a podle možností nastavení, které tento redakční systém umožňuje. Nejdříve zmíním, co bude obsahem elektronického obchodu a pro jakou cílovou skupinu bude určen. Poté se zaměřím na vybraný redakční systém. Dále se přesunu do administračního prostředí tohoto redakčního systému a podrobněji popíšu katalog produktů, kde se budu věnovat možnostem při přidávání nové kategorie resp. produktu a prací s nimi.
4.1 Popis a obsah elektronického obchodu Elektronický obchod bude sloužit k prezentaci zboží firmy Lukaservice s.r.o., která se zabývá dovozem, prodejem a servisem zemědělských strojů TECNOMA. Konkrétně jde o náhradní díly na tyto stroje, jako jsou trysky, držáky trysek a příslušenství, filtry, čerpadla, počítače, GPS navigace atp. Finální verze elektronického obchodu bude obsahovat přibližně 200 položek, již zmíněných náhradních dílů. Nákup tohoto zboží bude určen především pro zemědělská družstva a soukromé zemědělce. Není vyloučeno, že zde budou nakupovat i ostatní lidé, kteří budou potřebovat některou z nabízených položek. U jednotlivých položek v elektronickém obchodě budou uvedeny tyto specifikace:
kód zboží,
množství,
dostupnost zboží,
cena,
doplňující atributy,
Klára Náhlovská, červen 2011
Strana 23
Tvorba e-shopu a prezentace zboží
fotografie,
informace k dané položce,
doplňující informace ke stažení.
4.2 Redakční systém PrestaShop Jedná se o jeden z nejmodernějších systémů pro online obchodování pod licencí opensource a zároveň o jeden z nejlepších volně dostupných elektronických obchodů na světě. Je dílem skupiny vývojářů z Francie. Umožňuje lokalizace do mnoha jazykových verzí, má velmi jednoduchou instalaci a skvělou administraci. [21] Použila jsem jeho nejnovější verzi, a sice 1.4.0.179. Nebudu se zde zabývat postupem instalace tohoto redakčního systému ani jeho nastavením, jelikož to není prioritní součástí této práce. Pouze pro představu zde zmíním, o jakou instalaci a nastavení se jedná:
nainstalování češtiny Prestashopu, nainstalování češtiny pro administraci Prestashopu – musí se instalovat samostatně, nastavení administrátorů a jejich přístupů, nastavení dopravců, nastavení možností platby, nastavení modulů, hezká URL adresa, natavení kontaktních informací, které jsou použity pro generování faktury.
4.3 Administrační prostředí PrestaShopu
Obrázek 4 Administrační prostředí PrestaShopu, zdroj: autorka
Na obrázku 4 je vidět administrační prostředí PrestaShopu, které se zobrazí ihned po přihlášení. Administrace je rozdělena do několika kategorií: Katalog Zde je vlastně vše, co se týká vkládání kategorií a zboží. Ke kategoriím je možné přidávat další podkategorie. Zboží je možné přidat do více kategorií i podkategorií zároveň. Při přidávání zboží stačí vložit minimum informací, ale je možné nastavit si i spoustu dalších 9
Nyní je už k dispozici verze 1.4.2.5.
Klára Náhlovská, červen 2011
Strana 24
Tvorba e-shopu a prezentace zboží věcí, které se hodí jako např. výrobce, dodavatel, nákupní cena, prodejní cena, cena s daní, množství, příslušenství ke zboží atd. PrestaShop nezapomíná ani na všudypřítomné SEO, takže je možné přiřadit vlastní titulek, napsat meta description a meta keywords a udělat zboží hezké URL. Ke zboží lze přiřazovat obrázky, z nichž jeden je použit jako “obal” neboli ten, který zboží reprezentuje. Podrobněji se této kategorii budu věnovat ještě v další části této práce. Zákazníci Tato sekce administrace ukazuje pouze zákazníky, kteří jsou v obchodě zaregistrováni. Objednávky V této části se monitorují objednávky resp. jejich stav, cena, datum atd. Je zde podkategorie, která se zabývá vrácenými objednávkami, kde je možné si nastavit, po jak dlouhé době lze zboží vrátit. V této kategorii je možné si stáhnout PDF fakturu. Platby PrestaShop nabízí několik platebních pluginů, dodávaných při základní verzi. Jsou zde platby bankovním převodem, Paypalem, dobírkou a pomocí šeku. Je zde možnost nastavit si několik verzí daní. Zákazníkům je možné nabídnout vouchery neboli slevové kupóny, opět s možností dalšího nastavení jako je např. hodnota, počet, platnost, (ne)sčitatelnost atd. Doprava To, jakým způsobem se zboží dostane k zákazníkovi, lze nastavit právě v této sekci. Dá se zde vytvořit více přepravců, u nichž lze nastavit cenu dopravy. Moduly Moduly jsou hlavní nástroj, pomocí něhož se určuje, co bude v obchodě fungovat. Jsou mezi nimi například moduly RSS, newsletter, komentáře a hlavně bloky. Tyto bloky určují, jak bude vypadat vzhled obchodu, jak ho vidí zákazníci. Jedná se o menu, navigace, panely a jiné. A právě tady je možné nastavit i jejich pozice. Nastavení Zde se nastavují další údaje, jako jsou kontaktní informace, volba vzhledu, zobrazování zboží, obrázky a miniatury, databáze, výkon, formát PDF a aliasy. Nástroje V nástrojích je možné si vyhrát s dalšími údaji, například kolem uživatelů a nastavení jejich oprávnění, kam mají přístup. Pak je zde nastavení používaných jazyků a překladů. Pokud někde nesedí český překlad, lze si ho upravit přímo v administraci. Dále je zde nastavení
Klára Náhlovská, červen 2011
Strana 25
Tvorba e-shopu a prezentace zboží rychlých přístupů, subdomén, možnost zálohy databáze, CMS stránek a generátoru, kde lze nastavit optimalizaci a přátelskou URL adresu.
4.4 Katalog produktů Možné úpravy a nastavení PrestaShopu jsou poměrně dost široké, a právě z tohoto důvodu se v této části zaměřím pouze na katalog produktů resp. produkty jako takové. Blíže se zaměřím na přidání nové kategorie, přidání nového produktu a nastavení funkce mapování obrázků.
4.4.1 Přidání nové kategorie Vytvoření nové kategorie je velice jednoduché. Stačí kliknout na tlačítko přidat novou podkategorii, a poté vyplnit požadované vlastnosti přidávané kategorie jako je název, nadřazenost, popis, obrázek, meta data, meta popis a meta klíčová slova. V kategotii Úvod jsem si tedy vytvořila novou podkategorii a sice Trysky, jak je vidět na Obrázku 5.
Obrázek 5 Vytvoření nové podkategorie, zdroj: autorka
Podle toho co jsem zmínila výše je možné do kategorie Trysky vytvořit nové a nové podkategorie. A to úplně stejným způsobem, jen je nutné být ve správné kategorii.
Klára Náhlovská, červen 2011
Strana 26
Tvorba e-shopu a prezentace zboží Návštěvník elektronického obchodu to poté vidí tak, jak je to zobrazeno na Obrázku 6.
Obrázek 6 Dělení kategorií, zdroj: autorka
4.4.2 Přidání nového produktu Pro přidání nového produktu je nutné být v záložce Katalog a opět stačí pouze kliknout na tlačítko přidat nové zboží viz.Obrázek 5. Poté se dostaneme do vlastností přidávaného produktu. Zpočátku jsou zde pouze dvě záložky Info a Obrázky po vyplnění informací o zboží a uložení se možnosti nastavení produktu rozšíří o záložky Ceny, Kombinace, Přizpůsobení a Přílohy. Nyní se pokusím blíže popsat možnosti nastavení vlastností nového produktu, se kterými jsem se během tvorby elektronického obchodu setkala. V záložce Info je možné nastavit globální informace o produktu jako je název produktu, kód zboží, rozměry a váha zboží. Dále se zde dá nastavit propojení s jiným zbožím, které zákazníkovi ulehčí práci při vyhledávání dalšího nakupovaného zboží. Nechybí zde ani nastavení nákupní ceny, maloobchodní ceny a daní, což je zase výhoda pro majitele elektronického obchodu, který tak má přehled o výši zisku. Zařazení do příslušné kategorie je rovněž v této záložce stejně jako popis zboží a SEO pro vylepšení vyhledávání zboží ve vyhledávačích. Záložka Obrázky umožňuje nahrát libovolný počet obrázků k danému zboží ve formátu JPG, GIF nebo PNG o maximální velikosti souboru 2000kB. Je možné nahrávat i ZIP soubory obsahující více obrázků, u kterých se náhled vytvoří automaticky. Ke každému nahranému obrázku je nutné přidat popisek.
Klára Náhlovská, červen 2011
Strana 27
Tvorba e-shopu a prezentace zboží V záložce Ceny se dají natavit ceny pro jednotlivé státy a jejich měny. Jelikož počítám pouze se zákazníky z ČR, tak jsem při tvorbě elektronického obchodu možnost tohoto nastavení vůbec nevyužila. Pro využití nastavení vlastností produktu v záložce Kombinace je nejprve nutné vytvořit nastavení pro nástroj Atributy a skupiny, který se nachází v záložce Katalog. Tento nástroj umožňuje pohodlně a rychle zadávat k prodeji více variací jednoho druhu zboží. Jde o prodej stejného druhu zboží ve více různých barvách, stačí jako nové zboží zadat pouze název zboží, a pak operativně vytvářet a přiřazovat barevné variace. Tento nástroj umožňuje také jeden druh zboží prodávat ve více různých velikostech balení a pomocí atributů nastavit za balení o více kusech slevu. Teprve poté je možné provést nastavení v záložce Kombinace jak je vidět z Obrázku 7.
Obrázek 7 Nastavení záložky Kombinace, zdroj: autorka
V záložce Přizpůsobení jde pouze o nastavení počtu zobrazovaných polí k nahrávání souborů a počtu zobrazovaných textových polí. Tuto možnost nastavení jsem také nevyužila. V záložce Přílohy je možné přidat doplňující informace ke zboží, které si může zákazník stáhnout. Příloha je omezena velikostí 2048kB.
Klára Náhlovská, červen 2011
Strana 28
Tvorba e-shopu a prezentace zboží Takto zpracované nastavení vidí zákazník stejně jako je tomu na Obrázku 8.
Obrázek 8 Ukázka produktu v e-shopu, zdroj: autorka
4.4.3 Mapování obrázků Mapování obrázků je jednou z vychytávek, které Prestashop nabízí. V podstatě se jedná o to, že když zákazník přejede myší přes obrázek, objeví se okénko se stručným popisem zboží. Zákazník se pak pouhým kliknutím může dostat na příslušnou stránku zboží. Tuto vlastnost je možné nastavit v záložce Katalog, kde je funkce Mapování obrázků. Nejprve je nutné si přidat obrázek, kterého se bude mapování týkat a vhodně si ho pojmenovat. Obrázek musí být ve formátu JPG, GIF nebo PNG. Velkost souboru je omezena na 1000kB. V případě, že je obrázek větší než nastavená velikost, dojde k automatickému zmenšení na 556x200px (šířka x výška). Pokud je naopak obrázek menší, dojde k vyplnění okolí obrázku bílou barvou tak, aby velikost obrázku odpovídala nastavení. Poté je potřeba v tomto obrázku nadefinovat tzv. "mapová zóna". Nejdříve je potřeba si vytvořit obrys zóny a to držením levého tlačítka myši a pohybem myší nad obrázkem, do
Klára Náhlovská, červen 2011
Strana 29
Tvorba e-shopu a prezentace zboží které je poté možné napsat název příslušného zboží. Systém zde automaticky nabízí seznam odpovídajících produktů v internetovém obchodě. Zákazník to vidí v té samé podobě, jako je tomu na 0brázku 9.
Obrázek 9 Mapování obrázku, zdroj: autorka
4.5 Nafocení produktů Hlavní náplní této části práce je pořídit fotografie nabízeného zboží v internetovém obchodě. Provedu zde finanční analýzu pořízení produktové fotografie, na základě které se poté rozhodnu, jak budu dále postupovat. Nejdříve si vyhledám potřebné informace k provedení finanční analýzy produktové fotografie, které budu čerpat ze zdrojů na internetu. Poté vyberu jedno z možných řešení způsobu tvorby produktové fotografie, které bude zároveň řešením nejlepším. Na základě tohoto výběru přiblížím postup při focení produktů v praxi a zmíním úpravy, které byly potřeba udělat před publikováním fotografií na webu.
4.5.1 Profesionální nafocení vs. vlastní tvorba Jestli si zákazník zboží koupí, může být do jisté míry ovlivněno kvalitou fotografií prodávaného zboží. Z tohoto důvodu bylo mým cílem pořídit, co nejkvalitnější fotografie produktů. Potřebovala jsem nafotit 10 různých produktů a jejich barevné kombinace, což je 45 fotografií. Chtěla jsem fotografie do internetového obchodu pořídit co nejkvalitněji, ale zároveň i cenově výhodně. Porovnala jsem výhody a nevýhody nafocení produktů od profesionálních agentur s vlastním nafocením a hledala kompromis mezi těmito dvěma variantami.
Klára Náhlovská, červen 2011
Strana 30
Tvorba e-shopu a prezentace zboží Profesionální nafocení V případě nafocení produktů u některé z profesionálních agentur je jistota kvality fotografií, za kterou se ale platí. Porovnávala jsem ceny pěti profesionálních agentur, které nabízejí fotografické služby. Ze získaných hodnot jsem zjistila průměrnou hodnotu, kterou považuji za referenční. Při množství 45 fotografií by byla cena jedné fotografie v průměru 110 Kč, to by znamenalo 4950 Kč. Pronájem ateliéru Kompromis, spočívající v pronájmu ateliéru včetně potřebné techniky, přináší výhodu v dostatečně kvalitním zázemí. Ovšem je nutné mít alespoň nějaké zkušenosti s fotografováním, aby bylo možné tento potenciál využít. V případě této varianty je nutné zaplatit cenu za pronájem ateliéru, kde jsem porovnávala ceny tří ateliérů a dospěla jsem k průměrné částce 2800 Kč za jeden den. Vlastní nafocení Posledním možným řešením je nafocení produktových fotografií vlastními silami v domácích podmínkách. Jedná se o nejlevnější způsob pořízení produktové fotografie, které je ovšem časově náročnější z důvodu přípravy ateliéru. O focení se sice zajímám, ale s produktovou fotografií dosud žádné zkušenosti nemám. Shrnutí První variantu, a to nafocení produktů od profesionální agentury, jsem na základě jednání s majitelem elektronického obchodu zamítla z důvodu vysoké ceny. Částka, kterou je ochoten uvolnit na implementaci elektronického obchodu, by byla skoro celá vyčerpána pouze na tvorbu produktové fotografie. Proto jsme po vzájemné dohodě zvolili alternativní řešení spočívající v pronájmu ateliéru. Bohužel se mi v termínu, kdy jsem potřebovala produkty nafotit, nepodařilo zajistit vhodný ateliér. Rozhodla jsem se tedy pro poslední možné řešení, a to, že si produkty nafotím sama.
4.5.2 Focení produktů v praxi Nejsložitější bylo vytvořit ateliér v domácích podmínkách. Díky konzultaci s odborníkem se mi podařilo vytvořit ateliér, který se přibližuje profesionálním nárokům, jak je možné vidět na Obrázku 10.
Klára Náhlovská, červen 2011
Strana 31
Tvorba e-shopu a prezentace zboží
Obrázek 10 Ateliér v domácích podmínkách, zdroj: autorka
Příprava ateliéru Na vytvoření tohoto ateliéru jsem použila bílé plátno, které jsem dala na stůl a vytvořila tak nekonečné pozadí. Pro lepší osvětlení produktu jsem využila stříbrné odrazové plochy. Nechyběl zde ani stativ, na který jsem umístila fotoaparát a ten propojila s notebookem, abych viděla kvalitu nafocených fotografií ihned v plném rozlišení. Samotné focení Za účelem dosažení nejvyšší kvality snímků a zamezení roztřesení fotoaparátu jsem použila trojí ochranu, a sice stativ, předsklopení zrcátka proti rozechvění a samospoušť na dálkové ovládání. Při stávajících světelných podmínkách jsem si nastavila vyvážení bílé na bílé destičce. Produkty jsem fotila na prioritu clony, protože mi šlo o hloubku ostrosti. Na detail produktů jsem použila mezikroužky, které snižují minimální zaostřovací vzdálenost. Příprava fotografií na web Připravit fotografii pro web znamená dodržet jistá pravidla a postupy. Nejprve je nutné provádět základní (globální) úpravy, a teprve potom upravovat drobnosti. Zmíním zde pouze úpravy, na které jsem během tvorby produktové fotografie narazila. Jedná se o základní ořez, retuš, tonální či barevné úpravy, zmenšení a doostření. Všechno jsou to základní úpravy digitální fotografie, které nevyžadují detailnější popis. Pro tyto úpravy je samozřejmě nutný software na úpravu fotografií. Využila jsem pro tyto potřeby Zoner Photo Studio 13 (ZPS), ale je možné je provádět v podstatě v jakémkoliv programu pro práci s fotografiemi.
Klára Náhlovská, červen 2011
Strana 32
Tvorba e-shopu a prezentace zboží
5 Testování e-shopu Cílem této části práce je provést testování vytvořeného elektronického obchodu a zjistit tak kvalitu uživatelského prostředí pro potencionálního zákazníka. Dále pak zapracovat připomínky ze zpětné vazby do původního návrhu elektronického obchodu. Po dokončení všech nastavení, úprav a přidání produktů tento elektronický obchod otestuji, abych zjistila nedostatky, které je potřeba před oficiálním spuštěním upravit. Testování elektronického obchodu provede deset nezávislých uživatelů, kteří by měli být schopni identifikovat další případné nekonzistence v návrhu elektronického obchodu, které jsem nemusela vnímat jako významné. Po obdržení zpětné vazby, zhodnotím relevantnost připomínek, které následně zapracuji do původního návrhu elektronického obchodu. Nejdříve si pečlivě vyberu skupinu potencionálních zákazníků, na kterých elektronický obchod otestuji. Výběr provedu tak, abych pokryla všechny věkové kategorie a dostalo se mi zpětné vazby od lidí, kteří dennodenně brouzdají elektronickými obchody i od těch, kteří navštívili elektronický obchod poprvé. Jejich připomínky ve zpětné vazbě pečlivě zhodnotím a zapracuji do původního návrhu. Na Obrázku 11 je vidět původní vzhled internetového obchodu.
Obrázek 11 Původní vzhled internetového obchodu, zdroj: autorka
Klára Náhlovská, červen 2011
Strana 33
Tvorba e-shopu a prezentace zboží
5.1 Zpětná vazba Zpětnou vazbu jsem dostala od všech 10 nezávislých uživatelů, které jsem o pomoc při testování tohoto elektronického obchodu požádala. Přestože se ve většině případů zpracování elektronického obchodu líbilo, našly se i nějaké chybičky, které bylo nutné zapracovat. Mezi ty nejdůležitější připomínky patří:
schéma pod internetovým obchodem – barevné oživení,
úprava hlavní nabídky – zmatenost v pravém horním rohu vyhledávací box, přihlášení apod.,
blok s informacemi přemístit do horizontálního menu,
doplnit u cen produktů, že jsou včetně DPH,
u zboží ukázat počet kusů k dispozici,
u delších textů na webu nastavit větší odsazení řádků mezi sebou popř. zvětšení písma,
rychlost webu – příliš pomalé,
zbytečnost dvojího výběru barvy u produktů v podobě políčka s barvou a dropdown menu,
u bloku Akční nabídka rozlišit vyškrtnutou cenu v bílé barvě od názvu produktu v bílé barvě,
na stránce Kontakt odlišit tučně Objednávky a Osobní odběr,
špatná kvalita loga (šum okolo písma).
5.2 Zapracování připomínek do návrhu Po obdržení zpětné vazby, jsem zmíněné připomínky zapracovala do původní verze elektronického obchodu, abych zvýšila kvalitu uživatelského rozhraní a pokusila se tak co nejvíce vyhovět všem návštěvníkům. Jestli se mi zmíněné připomínky podařily zapracovat v dostatečné míře, je možné posoudit po samotné návštěvě tohoto elektronického obchodu na adrese http://www.lukashop.cz.
Klára Náhlovská, červen 2011
Strana 34
Tvorba e-shopu a prezentace zboží
6 Porovnání s e-shopem konkurence Cílem této kapitoly je analyzovat konkurenceschopnost prezentace zboží včetně jejího vlivu na uživatele v předchozích kapitolách navrženého a vytvořeného elektronického obchodu, vůči elektronickému obchodu vybrané konkurenční firmy. Vyberu si elektronický obchod jedné konkurenční firmy a podle předem zvolených parametrů budu tyto obchody mezi sebou srovnávat. Tyto parametry vychází především z teoretické části práce, z vlastních postřehů a ze všeobecně respektovaných pravidel [22].
6.1 Způsob výběru konkurenčního e-shopu K porovnání s elektronickým obchodem Lukashop.cz jsem si vybrala elektronický obchod Akp.cz. Důvodem, proč jsem si vybrala právě tento elektronický obchod, je zejména skutečnost, že společnost AKP s.r.o. je největším konkurentem firmy Lukaservice s.r.o. v oblasti prodeje a servisu strojů TECNOMA. Elektronickým obchodem disponuje už delší dobu a tudíž má určitou konkurenční výhodu, kterou se pokusím kvalitním zpracování elektronického obchodu minimalizovat. U obou dvou elektronických obchodů je uvedena webová adresa, jeho majitel a stručná charakteristika.
6.2 Způsob porovnání e-shopů Způsob, který jsem k porovnání použila, vychází z předem zvolených kritérií souvisejících s prezentací zboží včetně jeho nákupu a vyhledávání. Na základě těchto kritérií jsem poté provedla finální komparaci konkurenceschopnosti prezentace zboží včetně vlivu na uživatele elektronického obchodu Lukashop.cz. Mezi tyto srovnávací kritéria patří: Kategorizace zboží Co bude pro kategorizaci výhodné, záleží čistě na povaze zboží. Dobře rozvržené kategorie jsou klíčem k přehlednosti a novým prodejům. Proto je dobré kategorizaci dobře promyslet nejen kvůli rozvržení, ale například i z důvodu SEO optimalizace. Srovnání se zabývá způsobem rozvržení a jeho přehledností. Konzistence napříč webem Srovnání je provedeno na základě způsobu prezentace zboží v rámci celého webu. Tedy, zda je struktura stránky, na které je zboží prezentováno, vždy stejná z hlediska obsahu a pořadí prezentovaných vlastností daného zboží. A také zda jsou grafické prvky použité k prezentaci zboží vždy ve stejném provedení (pozadí, velikost…).
Klára Náhlovská, červen 2011
Strana 35
Tvorba e-shopu a prezentace zboží Grafické prvky použité pro prezentaci zboží Jedná se o porovnání typu, vhodnosti a kvality grafických prvků použitých k prezentaci zboží. Doplňkové informace ke zboží Toto srovnání se týká odkazů, které vedou na stránky s doplňujícími informacemi o zboží, na související zboží, alternativní zboží či stránky výrobce. Dále se jedná o odkazy s možností stáhnutí doplňujících informací a spadají sem také komentáře a diskuze ke zboží. Srovnání zboží Velmi oblíbená položka, kterou disponuje řada elektronických obchodů. Tato možnost pomáhá uživatelům porovnat parametry zboží a ulehčí jim tak výběr. Porovnání se zabývá dostupností tohoto prvku na webu a možnostmi jeho personifikace. Blok se zbožím v akci Poměrně důležitá informace pro uživatele elektronického obchodu. Dozví se tak, co je pro něj výhodné nakoupit. Porovnání se bude zabývat přítomností tohoto bloku na webu včetně jeho zpracování. Blok s nejprodávanějším zbožím Opět důležitá informace pro uživatele, pomocí které snadno zjistí, jaké zboží se na daném elektronickém obchodě nejvíce prodává. Může ho ovlivnit při rozhodování v nakupování. Porovnání se bude zabývat přítomností tohoto bloku. Možnosti nákupu To, jakým způsobem lze zboží v daném elektronickém obchodě nakoupit, je jedna z velmi důležitých věcí. Možnost nákupu, způsoby platby a doručení jsou věci, které mohou uživatele velice ovlivnit při konečném rozhodnutí o nákupu zboží, a proto je třeba jim věnovat pozornost. Porovnání se bude zabývat právě zmíněnými možnostmi nákupu, způsoby platby a doručení. Nákupní košík Umístění, dobrá orientace a přehlednost nákupního košíku je další důležitou věcí, která rozhoduje o prodeji zboží. Právě proto zde budu porovnávat celkové zpracování nákupního košíku.
Klára Náhlovská, červen 2011
Strana 36
Tvorba e-shopu a prezentace zboží Vyhledávač na stránkách Určitě se na webu vyplatí. V případě, že se uživateli nedaří něco najít pomocí kategorizace zboží, sáhne právě po vyhledávači. Budu se zabývat jeho přítomností na stránkách a přesností vyhledávání.
6.3 Vlastní hodnocení Lukashop.cz
Akp.cz
www.lukashop.cz Lukaservice, spol. s.r.o., Kutná Hora
www.webareal.cz/akp AKP, spol. s.r.o., Brno
Oba elektronické obchody se zabývají pouze prodejem trysek. Jedná se o doplňkové zboží pro nesené, tažené a samojízdné postřikovače. Přičemž firma Lukaservice s.r.o. plánuje v blízké budoucnosti rozšíření o další sortiment, kterým disponuje.
Kritéria
Akp.cz
Lukashop.cz
Kategorizace zboží
Kategorizace je rozvržena správně. Je přehledná a dobře stanovená pro SEO optimalizaci.
Kategorizace je zde také správně rozvržena a to ještě o něco podrobněji než v obchodu Akp.cz.
Konzistence napříč webem
Způsob prezentace zboží je konzistentní napříč webem ve smyslu zobrazení informací na stránce a také ve smyslu typu a šíře poskytovaných informací o produktu. Tato konzistence je i ve zpracování fotografií k jednotlivým produktům.
Konzistence napříč webem je podobná jako u Akp.cz.
Kvalita a vhodnost grafických prvků použitých pro prezentaci zboží
Srovnání zboží
Klára Náhlovská, červen 2011
Všechno zboží, které je zde prezentováno, je většinou doplněno pouze jednou fotografií. Kvalita, velikost a grafická úprava těchto fotografií je vyhovující.
Možnost porovnání zboží se na Akp.cz nenachází.
Na Lukashop.cz je všechno zboží doplněno několika fotografiemi produktu. Velikost je vyhovující, na kvalitě a grafické úpravě těchto fotografií by se dalo ještě zapracovat. Uživatel má možnost porovnat jakékoliv zboží s jiným. Což není úplně vhodné. Nebylo by od věci umožnit pouze porovnání srovnatelných typů zboží (zboží z té samé kategorie). Strana 37
Tvorba e-shopu a prezentace zboží
Akp.cz nabízí možnost kompletní specifikace, tabulku trysek ke stažení a vyhledání souvisejícího zboží a příslušenství.
Lukashop.cz nabízí doplňující informace o daném produktu, možnosti stáhnutí dalších informací, přidávání komentářů k produktu, příslušenství ke zboží popř. propojení s jiným zbožím.
Web Akp.cz tímto blokem nedisponuje.
Na webu Lukashop.cz je tento blok umístěn. Zobrazuje jeden akční produkt s možností zobrazení všeho akčního zboží.
Blok s nejprodávanějším zbožím
Na webu Akp.cz není k dispozici.
Je na webu Lukashop.cz umístěn v podobě dvou nejprodávanějších produktů s možností rozšíření na TOP 10.
Možnosti nákupu
Před nákupem zboží je možné se zaregistrovat, ale nákup lze provést i bez registrace. Nabízí zde možnost přihlášení přes vlastní ID, zřejmě pro VIP zákazníky.
Zboží je možné nakoupit po registraci uživatele, ale funguje zde i nákup bez registrace.
Nákupní košík
Je na pozici standardního umístění v pravém horním rohu. Přehled o nakupovaném množství zboží, jeho cena bez DPH i s DPH, způsob dopravy a způsob platby jsou umístěné na jedné stránce a na další stránce jsou osobní údaje, dodací adresa a fakturační adresa.
Nákupní košík je umístěn v bloku v pravém layoutu. Nákup zboží je rozdělen na pět částí, a sice shrnutí o nakupovaném zboží (množství, cena), přihlášení (kde je možné vytvořit účet, přihlásit se či provést platbu bez registrace), adresa (dodací, fakturační), doprava, platba
Vyhledávač na stránkách
Je umístěn v bloku v levé části layoutu. Má standardní zobrazení. Funguje bez sebemenších problémů.
Je umístěn v pravém horním rohu. Jedná se o vyhledávací pole s tlačítkem „Hledej“.
Doplňkové informace ke zboží
Blok se zbožím v akci
Tabulka 6 Srovnání elektronických obchodů, zdroj: vlastní tvorba
Klára Náhlovská, červen 2011
Strana 38
Tvorba e-shopu a prezentace zboží
6.4 Celkové shrnutí komparace Ze srovnání s konkurenčním elektronickým obchodem Akp.cz vyplývá, že způsob prezentace zboží v tomto elektronickém obchodě je konkurenceschopný. Jsou zde samozřejmě věci, na kterých je třeba ještě zapracovat jako například zlepšit vyhledávání, upravit nastavení srovnávání zboží či vylepšit kvalitu fotografií zboží. Soudím tedy, že by mohl elektronický obchod Lukashop.cz prosperovat stejně dobře jako Akp.cz a stát se tak v blízké době jeho silným konkurentem.
Klára Náhlovská, červen 2011
Strana 39
Tvorba e-shopu a prezentace zboží
7 Závěr Zhodnocení stanovených cílů práce Cíle stanovené pro tuto práci byly splněny. Hlavním cílem této práce bylo vytvořit plně funkční elektronický obchod pro firmu Lukaservice s.r.o., a to s co nejnižšími finančními náklady. Dílčími cíly této práce bylo:
Provedení analýzy vybraných redakčních systémů. Na základě této analýzy byl vybrán ten nejvhodnější redakční systém.
Osvojení zásad a rad pro tvorbu produktové fotografie, na základě kterých bylo zboží do elektronického obchodu nafoceno.
Testování elektronického obchodu z důvodu zlepšení uživatelského rozhraní elektronického obchodu.
Zjištění konkurenceschopnosti tohoto elektronickému obchodu konkurenční firmy.
elektronického
obchodu
vůči
Výsledky tvorby elektronického obchodu Elektronický obchod byl uveden do provozu před několika měsíci, a proto mám k dispozici zpětnou vazbu od majitele tohoto elektronického obchodu. Poté, co byl elektronický obchod Lukashop.cz uveden do provozu, došlo k nárůstu návštěvnosti webových stránek samotné firmy Lukaservice.cz, které na tento elektronický obchod odkazují. Firma tak získala několik nových zákazníků, se kterými navázala obchodní spolupráci. Majitel firmy dále uvedl, že došlo ke zvýšení zisku firmy díky prodeji většího množství zboží nabízeného v elektronickém obchodě. Přínosy tvorby elektronického obchodu Tvorba elektronického obchodu pro mě byla velikým přínosem. Rozšířila jsem si obzory jak z oblasti tvorby elektronických obchodů, tak z oblasti tvorby produktové fotografie. Těchto znalostí si velice vážím a určitě je dále využiji. Pro čtenáře je ukázkou toho, jak lze pořídit kvalitní elektronický obchod s nízkými vstupními náklady. Závěr Tvorba elektronického obchodu včetně produktové fotografie pro mne byla zcela novou oblastí, kterou jsem dosud neznala. Zjistila jsem, že se jedná o velice zajímavou oblast a získala spoustu nových znalostí v tomto oboru. Podle zpětné vazby od majitele elektronického obchodu se dá říct, že byla splněna veškerá očekávání, která si od tvorby elektronického obchodu sliboval.
Klára Náhlovská, červen 2011
Strana 40
Tvorba e-shopu a prezentace zboží
8 Seznam obrázků a tabulek 8.1 Seznam obrázků Obrázek 1 Základní rozložení webového layoutu *14+ ........................................................ 16 Obrázek 2 Obvyklá řešení layoutů e-shopů *14+ ................................................................. 17 Obrázek 3 Ukázka fotografického stolu *17+ ....................................................................... 22 Obrázek 4 Administrační prostředí PrestaShopu, zdroj: autorka........................................ 24 Obrázek 5 Vytvoření nové podkategorie, zdroj: autorka .................................................... 26 Obrázek 6 Dělení kategorií, zdroj: autorka .......................................................................... 27 Obrázek 7 Nastavení záložky Kombinace, zdroj: autorka.................................................... 28 Obrázek 8 Ukázka produktu v e-shopu, zdroj: autorka ....................................................... 29 Obrázek 9 Mapování obrázku, zdroj: autorka ..................................................................... 30 Obrázek 10 Ateliér v domácích podmínkách, zdroj: autorka .............................................. 32 Obrázek 11 Původní vzhled internetového obchodu, zdroj: autorka ................................. 33 Obrázek 12 Typy navigace, zdroj: autorka .......................................................................... 56 Obrázek 13 Typy navigace - mapa webu, zdroj: autorka .................................................... 57
8.2 Seznam tabulek Tabulka 1 Kritéria hodnocení, zdroj: autorka ........................................................................ 9 Tabulka 2 Hodnocení kritérií, zdroj: autorka ....................................................................... 10 Tabulka 3 Vyhodnocení analýzy redakčních systémů, zdroj: autorka ................................. 10 Tabulka 4 Klíč k působení barev na lidskou psychiku [10] .................................................. 13 Tabulka 5 Přehled základních rastrových formátů *16+ ...................................................... 20 Tabulka 6 Srovnání elektronických obchodů, zdroj: vlastní tvorba .................................... 38
Klára Náhlovská, červen 2011
Strana 41
Tvorba e-shopu a prezentace zboží
9 Literatura a informační zdroje Citované zdroje: [1] APEK [online]. 20.04.2010 [cit. 2011-04-25+. Spokojenost s nakupováním na internetu. Dostupné
z
WWW:
nakupovanim-na-internetu-spokojeni-za-rok-%20utrati-i-%20desitky-tisic/>. [2] Internetový obchod [online]. 23.4.2011 [cit. 2011-04-25+. Plusy internetového obchodu na
Open
Source
řešení.
Dostupné
z
WWW:
obchod.cz/plusy-internetoveho-obchodu-na-open-source-reseni>. [3] Prestashop [online]. 28.3.2011 [cit. 2011-06-20+. Čeština pro Prestashop. Dostupné z WWW:
. [4] Magento [online]. 7.3.2011 [cit. 2011-06-20+. Čeština pro Magento. Dostupné z WWW: . [5] Obchod Virtuemart [online]. 2011 [cit. 2011-06-20+. Čeština pro Joomla. Dostupné z WWW:
2.html>. [6] CMS Publish [online]. 2011 [cit. 2011-02-12+. Nevýhody open source systémů. Dostupné z WWW: . [7] Adaptic [online]. 2011 [cit. 2011-03-20+. Použitelnost webu. Dostupné z WWW: . [8] Adaptic [online]. 2011 [cit. 2011-06-20+. Přístupnost webu. Dostupné z WWW: . [9] PLESKOTOVÁ, Petra. Svět barev. Praha: Albatros, 1987. 199 s. [10] GRAY, Daniel. Profesionální design na webu. Brno: SoftPress s.r.o., 2000. 223 s. ISBN 80-902824-1-5. [11] PROKOP, Marek. Sova v síti [online]. 3.12.2001 [cit. 2011-03-20+. 6 základních stylů navigace. Dostupné z WWW: . [12] Adaptic [online]. 2011 [cit. 2011-03-20+. Drobečková navigace. Dostupné z WWW: . [13] Joshis Pages [online]. 2011 [cit. 2011-03-07+. Layouty webových stránek. Dostupné z WWW: .
Klára Náhlovská, červen 2011
Strana 42
Tvorba e-shopu a prezentace zboží [14] BEDŘICHOVÁ, Jana. Využití grafiky v uživatelském rozhraní aplikací e-shopů. Praha, 2008. 92 s. Bakalářská práce. Vysoká škola ekonomická. Dostupné z WWW: . [15] PIHAN , Roman. Fotografování [online]. 19.07.2006 [cit. 2011-04-10+. Zpracování obrazu
-
grafické
formáty.
Dostupné
z
WWW:
. [16] Webové stránky [online]. 2011 [cit. 2011-04-10+. Grafické formáty. Dostupné z WWW: . [17] Microsoft office [online]. 2011 [cit. 2011-04-11+. Výběr nejvhodnějšího formátu grafiky pro daný úkol. Dostupné z WWW: . [18] Focení [online]. 2011 [cit. 2011-04-17+. Jak fotografovat. Dostupné z WWW: . [19] PIHAN, Roman. Fotografování [online]. 09.06.2008 [cit. 2011-04-17+. Základy kompozice.
Dostupné
z
WWW:
. [20] PIHAN, Roman. Fotografování [online]. 07.12.2007 [cit. 2011-04-18+. Zásady produktové
fotografie.
Dostupné
z
WWW:
. [21] GoPay [online]. 2011 [cit. 2011-06-11]. Info Prestashop. Dostupné z WWW: . [22] PETR, Zbyněk. Zbype [online]. 2010 [cit. 2011-06-20+. Zásady při tvorbě webových stránek. Dostupné z WWW: . [23]
Adaptic
[online].
2011
[cit.
2011-06-17].
E-shop.
Dostupné
z
WWW:
. [24] GÁLA, Libor; POUR, Jan; ŠEDIVÁ, Zuzana. Podniková informatika. Praha: Grada Publishing
a.s.,
03.09.2009.
496
s.
Dostupné
z
WWW:
. ISBN 978-80-247-2615-1. [25] Český hosting [online]. 2011 [cit. 2011-06-17+. Webhosting. Dostupné z WWW: . Klára Náhlovská, červen 2011
Strana 43
Tvorba e-shopu a prezentace zboží [26] Bestof [online]. 2011 [cit. 2011-06-17+. Redakční systém. Dostupné z WWW: . [27] Bestof [online]. 2011 [cit. 2011-06-17+. Optimalizace pro vyhledávače. Dostupné z WWW: . [28] Bestof [online]. 2011 [cit. 2011-06-17+. Uživatelské rozhraní. Dostupné z WWW: . [29] Český hosting [online]. 2011 [cit. 2011-06-17+. Open source. Dostupné z WWW: . [30] Wizards [online]. 2009 [cit. 2011-06-21+. Slovník pojmů. Dostupné z WWW: < www.wizards.cz/slovnicek-pojmu/>. [31] Global Business IT [online]. 2010 [cit. 2011-06-21+. HTML. Dostupné z WWW: <www.gbit.cz/cs/slovnicek-pojmu.qhtml>. [32] LAHVIČKA, Jiří. Interval [online]. 12.6.2000 [cit. 2011-06-22+. Základní informace PHP. Dostupné z WWW: .
Další zdroje: Ceny produktové fotografie http://www.foto-creative.cz/produktova-fotografie http://www.fotograf-moravec.cz/cenik http://www.juniorart.cz/cenik.html http://www.svida.cz/sluzby/graficke-studio/produktove-fotografie http://www.ateliersvoboda.cz/sluzby/reklamni-produktova-fotografie Ceny pronájmu ateliéru http://www.lokace.cz/index.php?k=5&pk=34&view=3535 http://www.idif.cz/cs/individualni_pronajem_atelieru.php http://www.studiopvm.com/atelier_pronajem.html Úprava fotografií http://www.fotoroman.cz/techniques2/processing1.htm http://www.hasala.cz/clanky/priprava-fotek-pro-web
Klára Náhlovská, červen 2011
Strana 44
Tvorba e-shopu a prezentace zboží Open source systémy http://www.vlastnieshop.cz/nase-shopy http://www.vlastnieshop.cz/magento http://www.shopdopohody.cz/faq/vyhody-propojeni/vyhody-open-source-systemjoomla-virtuemart-a-magento.html http://webtrh.cz/90864-prestashop-virtuemart-joomla Redakční systém PrestaShop http://www.prestahost.cz/forum/viewforum.php?f=3&sid=84cb5b5cb38fbe3acc4eba5c0 c746a03 http://www.prestashop.com/ http://www.prestashop-cesky.cz/ http://www.prestashop.com/forums/viewforum/90/instalace_konfigurace___aktualizace _upgrady http://www.prestashop.com/forums/viewforum/91/vvoj_a_moduly
Klára Náhlovská, červen 2011
Strana 45
Tvorba e-shopu a prezentace zboží
10 Slovník použitých pojmů Termín
Zkratka
E-shop
Business to Consumers
Význam [zdroj] Elektronický obchod, umožňující nákup zboží přes internet. [23]
B2C
Jedná se o jeden ze základních vztahů elektronického podnikání. Jde o způsob obchodního styku, který je téměř vždy kompletně realizovaný v prostředí internetu. Prodejcem je podnik a nakupujícím je jednotlivec, resp. konečný spotřebitel. Všechny činnosti související s nákupem resp. prodejem zboží se realizují bez přímého kontaktu zákazníka s prodejcem. [24]
Webhosting
Pronájem prostoru na serveru poskytovatele pro umístění webových stránek. Na tyto servery se přistupuje pomocí protokolu FTP. [25]
Layout
Grafické rozložení prvků na stránce.[autorka]
Plug-in
Vestavěná funkce programu.[autorka]
Redakční systém
CMS
CMS je zkratkou anglických slov Content Management Systém. Jedná se o software umožňující kompletní správu obsahu webu. Základní funkcí redakčních systémů je publikování textů, ale umí toho mnohem víc, obsahují nebo lze do nich doinstalovat celou řadu doplňků, např. diskuzní fóra, fotogalerie, internetový obchod atd. [26]
Search Engine Optimalization
SEO
SEO je zkratkou anglických slov Search Engine Optimalization. Český ekvivalent těchto slov je optimalizace pro vyhledávače. Jedná se o soubor úprav a úkonů, jejichž cílem je zajištění správného přečtení webu vyhledávači a následného nabídnutí webu mezi výsledky vyhledávání. [27]
Klára Náhlovská, červen 2011
Strana 46
Tvorba e-shopu a prezentace zboží
Uživatelské rozhraní
U webových stránek je uživatelským rozhraním grafický návrh www stránek, který definuje vzhled, ale i funkce www stránek. Dále definuje druh, polohu, velikost a vzájemné prostorové uspořádání jednotlivých prvků na www stránkách (navigační, obsahové, funkční a interaktivní prvky). [28]
Open-source
Open source s tzv. "otevřeným kódem" se označují aplikace jako redakční systém, e-shop nebo diskusní fórum, které jsou poskytovány zdarma. Jejich užití se řídí konkrétní licencí. [29]
Cascading Style Sheets
CSS
CSS je zkratka pro anglický název Cascading Style Sheets. Český ekvivalent těchto slov je tabulky kaskádových stylů. Jedná se o jazyk, který byl navržen a vytvořen mezinárodním konsorciem W3C a slouží k popisu formátování způsobu prezentace webových stránek napsaných v jazycích HTML, XHTML nebo XML. Umožňuje při tvorbě webových stránek oddělit obsah stránky od její formy.[30]
Hyper Text Markup Language
HTML
Jedná se o základní a nejpoužívanější programovací jazyk určený k vytváření statických stránek. *31]
Hypertext Preprocessor
PHP
PHP je skriptovací jazyk vykonávaný na straně serveru vkládaný do běžného HTML kódu. Je určený především pro programování dynamických webových stránek *32]
Klára Náhlovská, červen 2011
Strana 47
Tvorba e-shopu a prezentace zboží
11 Přílohy 11.1 Příloha A - Funkcionalita open-source redakčních systémů Redakční systém PrestaShop Analýza a reporty integrace Google Analytics, nástěnka v úvodu administračního prostředí, RSS čtečka, upozornění při nedostatku zboží na skladě, nedokončené objednávky, přehled daní, statistiky: o prodeje a objednávky, o zákaznické účty, o informace o klientech, o uživatelé on-line, o software našich uživatelů, o katalogové statistiky, o nejlepší zákazníci, o odkud přicházejí, o vyhledávání klíčových slov, o detaily o produktech, o nejlepší zboží, o nejlepší kategorie, o dopravci a objednávky, o co zákazníci vyhledávají, o katalogové soupisky, o návštěvy a hosté. Produkty a kategorie neomezené množství kategorií, podkategorií a produktů, může být použito jako obchod nebo jen jako katalog, bez možnosti nákupu, snadné vyhledávání produktů, kategorií a výrobců, obrázky s automatickou změnou velikosti, více obrázků k jednomu produktu, možnost přibližování, provázané zboží – příslušenství, komentáře k produktům,
Klára Náhlovská, červen 2011
Strana 48
Tvorba e-shopu a prezentace zboží
různé cenové kategorie produktů, neomezený počet atributů u zboží (barvy, velikosti), dostupnost zboží (skladem, vyprodáno atd.), možnost stažení dodatečných informací o produktu, označení produktu tagem (hodnocení), možnost objednat položky, které nejsou momentálně skladem, speciální nabídky (slevy, dárkové poukazy), čárové kódy, správa skladu, import zboží pomocí cvs souborů.
Prohlížení obchodu filtrování produktů dle jejich atributů, nástroj pro vkládání statických bloků na stránky, nedávno shlédnuté produkty, možnost porovnat produkty, navigace, vyhledávání, kontextová nápověda. Zákaznické účty sledování stavu a historie objednávek, možnost provést stejnou objednávku znovu přímo ze svého účtu, výchozí dodací a fakturovací adresy, možnost přidat komentář do své knihy přání, možnost přijímání mailů s novinkami, na své nástěnce zákazník vidí: historii objednávek, osobní údaje, adresy, knihu přání, nákupní košík. Správa objednávek náhled, editace a vytvoření objednávky z admina, faktury ve formátu PDF, tisk faktur, sledování zásilky – posílání informací e-mailem, minimální cena objednávky, nastavení daní, nastavení měn. Platba
integrovaný platební systém PayPal, integrovaný platební systém Authorize.net, integrovaný platební systém Google Checkout,
Klára Náhlovská, červen 2011
Strana 49
Tvorba e-shopu a prezentace zboží
integrovaný platební systém CashTicket, integrovaný platební systém HiPay, integrovaný platební systém DIBS, bankovní převod, dobírka, hotovost.
Doprava nastavení dopravy destinací, možnost poplatků za objednávku, doprava zdarma, integrovaná doprava přes dopravní společnosti: PPL, GLS, Česká pošta, možnost změny ceny v závislosti na destinaci, váze zboží, počtu položek, celkové ceně. Optimalizace pro vyhledavače přátelská URL adresa – bez session ID apod., Google site map, možnost editace meta-informací pro produkty a kategorie, automaticky generovaná mapa stránek. Mezinárodní podpora podpora e-shopu ve více jazycích, podpora různých měn, nastavení daní, konfigurovatelný seznam podporovaných zemí.
Redakční systém Magento Analýzy a reporty
integrace Google Analytics, nástěnka v admin prostředí, zobrazení základních reportů, soupis prodejů, RSS čtečka nových objednávek, přehled daní, nedokončené objednávky, seznam nejnavštěvovanějších produktů, seznam nejprodávanějších produktů, upozornění při nedostatku zboží na skladě, přehled hledaných výrazů, přehled komentářů k produktům, RSS čtečka nových komentářů,
Klára Náhlovská, červen 2011
Strana 50
Tvorba e-shopu a prezentace zboží
přehled štítků, RSS čtečka nových štítků, reporty o používání slevových kupónů, přehled a zobrazení celkové částky všech faktur, vyhodnocení nejlepšího zákazníka podle počtu a celkové ceny všech jeho objednávek.
Prohlížení produktů
více obrázků k jednomu produktu, možnost přibližování, komentáře k produktům, vazby mezi podobnými produkty, dostupnost zboží (skladem, vyprodáno atd.), různé cenové kategorie produktů, možnost několika druhů jednoho produktu (barvy, velikosti), skupiny produktů, možnost přidat produkt do seznamů přání či do košíku, e-mailem poslat odkaz na produkt kamarádovi.
Prohlížení obchodu
filtrováni produktů dle jejich atributů, nástroj pro vkládání statických bloků na stránky (obrázky, bannery, texty atd.), možnost nastavit unikátní design pro každý produkt, kategorii, e-shop, nastavitelné vyhledávání s našeptávačem, nedávno shlédnuté produkty, možnost porovnat produkty, nedávno porovnávané produkty, výprodej, slevy, seznam nejoblíbenějších hledaných výrazů, filtrování produktů dle štítků, komentáře k produktům, výpis a prohlížení produktů v tabulce nebo seznamu, navigace.
Správa obchodu
soupis produktů skladem, zpětné objednávky, minimální a maximální množství na skladě, hromadný import i export, hromadná aktualizace produktů (přecenění atd.), jednoduchý, konfigurovatelný (výběr barvy, velikosti atd.) produkt, skupiny produktů, daňové poplatky podle lokace, skupiny zákazníků a druhu produktu, skupiny atributů pro rychlé vytváření produktů, správa obrázků s automatickou změnou velikosti a vodotiskem, vyspělé nástroje pro správu cen a slev,
Klára Náhlovská, červen 2011
Strana 51
Tvorba e-shopu a prezentace zboží
přepis a přesměrování výsledků hledání, povolení, editace a mazání štítků a komentářů k produktům, RSS upozornění na nízký počet zboží skladem.
Zákaznické účty
sledování stavu a historie objednávek, možnost provést stejnou objednávku znovu přímo ze svého účtu, nedávno objednané produkty, seznam pro neomezený počet adres, výchozí dodací a fakturovací adresy, možnost přidat komentář do své knihy přání, knihu přání je možno poslat mailem nebo přes RSS, povolení / zakázání příjmu mailů s novinkami, komentáře k produktům, štítky k produktům, na své nástěnce zákazník vidí: nedávné objednávky, osobní údaje, odběr novinkových e-mailů, výchozí platební a dodací údaje, nákupní košík, kniha přání, nové komentáře a štítky.
Péče o zákazníka
kontaktní formulář, zákaznický účet se širokou škálou funkcí a nastavení, historie objednávek a přehled jejich stavů (odesláno, doručeno atd.), sledování stavu objednávky, možnost zaslání zapomenutého hesla z admina, objednávkové a zákaznické e-maily, snadno upravitelné šablony e-mailů, možnost vytvořit nebo změnit objednávku z admina,
Správa objednávek
náhled, editace a vytvoření objednávky z admina, vytvoření jedné nebo několika faktur a dodacích faktur, tisk faktur, call centrum pro zákazníky o zahrnuje možnost vytvořit nového nebo vybrat již existujícího zákazníka a nahlédnout do jeho košíku, knihy přání, seznamu posledních objednaných produktů, také vybrat adresy, poskytnout slevu a přiřadit do jiné cenové skupiny tvorba doobjednávek z admin prostředí, upozornění e-mailem o objednávce, RSS čtečka nových objednávek.
Klára Náhlovská, červen 2011
Strana 52
Tvorba e-shopu a prezentace zboží Platba
integrovaný platební systém PayPal - Standard, Pro UK (Expres, Direct), PayFlow Pro, integrovaný platební systém Authorize.net, integrovaný Google Checkout (Level 2), možnost uložit informace o platební kartě pro offline platbu, dobírka, hotovost.
Doprava
integrovaná doprava přes UPS, UPS XML, FedEx, USPS a DHL, doprava jedné objednávky na různé adresy, zákazník může sledovat stav své objednávky, seznam povolených doručovací zemí, možnost poplatků za objednávku nebo položku nebo doprava zdarma, tabulkové poplatky dle váhy zboží a destinace, tabulkové poplatky dle celkové ceny objednávky a destinace, tabulkové poplatky dle počtu položek a destinace.
Pokladna - proces objednávky
všechny potřebné údaje se vyplní na jedné stránce, tzn. že, odpadá složitý proces překlikávání na další stránky, podpora zabezpečovacího SSL protokolu jak na straně zákazníka, tak na straně admina, zboží z jedné objednávky lze doručit na více adres, objednávky pro registrované ale i neregistrované zákazníky (hosty), výpočet ceny poštovného na začátku objednávky, zákazník může využít seznam svých adres, možnost vytvoření účtu na začátku objednávky, dárkové a slevové poukázky, uložení nákupního košíku s možností nastavení časové platnosti,
Optimalizace pro vyhledávače (SEO)
hezká adresa, tzn. bez pro člověka nesmyslných znaků, Google Site Map, správa přepisu adres, možnost editace meta-informací pro produkty a kategorie, automaticky generovaná mapa stránek, automaticky generovaný seznam oblíbených výrazů ve vyhledávání.
Mezinárodní podpora
podpora e-shopu ve více jazycích, podpora různých měn, nastavení daní, konfigurovatelný seznam podporovaných zemí.
Klára Náhlovská, červen 2011
Strana 53
Tvorba e-shopu a prezentace zboží Marketingové akce a nástroje
různé druhy kupónů s možností omezit platnost pro daný obchod, skupinu zákazníků, časový interval, produkty a kategorie (procentuální slevy, fixní množstevní slevy, poštovné zdarma, kup A dostaneš B zdarma, kup A dostaneš procentuální nebo množstevní slevu na B, kup A dostaneš poštovné a balné zdarma), katalogové reklamní ceny s procentuální nebo množstevní slevou s možností omezit platnost pro obchod, kategorie nebo produkty, možnost poskytnout poštovné a balné zdarma, různé ceny produktů dle objednaného množství, možno vytvořit skupiny zákazníku a pro každou skupinu jiné ceny produktů, snadno lze vkládat reklamní bannery, ankety, reklamní texty, hezké adresy, správa přepisu adres, nedávno shlédnuté produkty, nedávno porovnávané produkty, propagační nástroje pro nové produkty, doobjednávky v nákupním košíku, možnost doporučit produkt kamarádovi pro všechny nebo pouze registrované zákazníky, zaslat knihu přání kamarádovi emailem nebo přes RSS, RSS čtečka nových produktů, nových slev a nových štítků, automaticky generovaná mapa stránek, Google Site Map, ankety, správa novinek zasílaných e-mailem.
Správa stránek
kontrola několika webů a obchodů z jednoho administračního prostředí s možností sdílet jakékoliv množství informací mezi jednotlivými weby / obchody, podpora více jazyků, podpora pro lokalizaci modulů, podpora různých měn, systém nastavení uživatelských rolí a práv, flexibilní správa poplatků, plně modifikovatelný design e-shopu, skupiny zákazníků, upgrade systému jedním klikem, systém pro správu obsahu informačních stránek (CMS).
Klára Náhlovská, červen 2011
Strana 54
Tvorba e-shopu a prezentace zboží
Redakční systém Joomla – Virtuemart Základní vlastnosti
umožňuje použití bezpečného SSL šifrování, zákazníci mohou spravovat své uživatelské účty, zákazníci si můžou kdykoliv změnit dodací adresu, historie objednávek: zákazník má přehled nad všemi dosud provedenými objednávkami, potvrzení objednávky je odesláno na e-mail zákazníka a vlastníka obchodu, více různých měn - zákazník si může vybrat, ve které měně bude platit, vícejazyčnost.
Produkty a kategorie
neomezené množství kategorií, podkategorií a produktů, může být použito jako obchod nebo jako jen katalog, bez možnosti nákupu, snadné vyhledávání produktů, kategorií a výrobců, hodnocení zboží, použití slevy (časově omezené, nebo neomezené, v procentech či v jednotkách.), dostupnost zboží - zákazník vidí, kdy mu bude zboží doručeno, automatické upozornění zákazníkovi, když se produkt objeví zpátky na skladě.
Administrace
možno vložit několik obrázků a souborů ke každému produktu, atributy produktů: velikost, barva atd., typy produktu pro klasifikaci: Kolo, Motorka, Hudba, nastavení různých cen pro různé skupiny zákazníků, několik cen ke každému produktu - mohou se odvíjet od množství, hmotnosti atd., flexibilní zobrazení ceny: s DPH, bez DPH, kontrolní panel se soupisem nových objednávek a zákazníků, kontrola množství zboží na skladě, správa objednávek: historie objednávek, kontaktování zákazníka atd., správa stavů objednávek.
Platba
schopen přijímat on-line platby kartou (zahraničí), platební brány" authorize.net®, PayPal, 2Checkout, eWay, Worldpay, PayMate and NoChex, další způsoby platby lze doinstalovat.
Doprava
flexibilní konfigurace dopravy, zákazníci mohou přidat adresu dodání, možno zahrnout poplatky za dopravu do faktury.
Klára Náhlovská, červen 2011
Strana 55
Tvorba e-shopu a prezentace zboží
11.2 Příloha B – Typy navigace Ukázka jednotlivých typů navigace
Obrázek 12 Typy navigace, zdroj: autorka
Klára Náhlovská, červen 2011
Strana 56
Tvorba e-shopu a prezentace zboží
Mapa webu
Obrázek 13 Typy navigace - mapa webu, zdroj: autorka
Klára Náhlovská, červen 2011
Strana 57