Shopio Weblog

Nečekané SEO překvapení

Po 24 hodinách od spuštění demo verze Shopia nás čekalo malé, ale milé překvapení. Jeden z produktů – notebook HP Pavilion dv6750ec se objevuje při vyhledávání v Google na druhém místě přímo za oficiálními stránky českého Hewlett-Packard.

HP Pavilion dv6750ec v vyhledávači Google.com

Pro plnění demo e-shopu jsme vůbec nezohledňovali žádné SEO faktory. Nedělali jsme analýzu klíčových slov, neoptimalizovali jsme texty, ani žádné další optimalizační techniky. U HP Pavilion dv6750ec jsme pouze vyplnili maximální počet možných polí a využili možnosti variant zboží. Pojali jsme ho jako jakýsi „ukázkový“ produkt.

Než jsme se rozhodli s tímto úspěchem pochlubit na našem blogu, ověřili jsme si, že výsledky nesouvisí s personalizovaným vyhledáváním Google. To by totiž demo.www.shopio.cz mohlo pro naši potřebu posouvat výše.

Je několik způsobů jak se dá personalizované vyhledávání Google zrušit a získat pozice nezávislé na profilu uživatele:

  • Přidáním &pws=0 na konec URL vyhledávacího dotazu.
  • Použitím vyhledávacího pluginu, který tento výše uvedený řetězec dodává automaticky.
  • Použitím SEO nástrojů jako je např. http://pozice-ve-vyhledavacich.cz. Zde se mohou výsledky mírně lišit, závisí vždy na kódu vyhledávacího dotazu, který nástroje používají.

Potěšilo nás, že všechny tyto způsoby potvrdily druhou pozici HP Pavilion na demoverzi Shopia (v případě anglické jazykové specifikace se nacházíme na 6. pozici).

Shopio nabízí možnost ovlivnit celou řadu SEO faktorů:

  • Podporuje sémanticky správný zápis (X)HTML kódu.
  • Generuje „čistá“ URL, která je možno libovolně měnit.
  • Umožňuje editovat automaticky generované META informace jako je titulek, popis „METAdescription“ a klíčová slova „METAkeywords„, jejichž správné zvolení hraje z hlediska SEO důležitou roli.
  • Podporuje generování mapy stránek (sitemap.xml), která zajistí indexování celého a aktuálního obsahu stránek.
  • Podporuje generování XML exportů pro vyhledávače zboží.

V rámci plnění demoverze jsme však těchto nástrojů využili minimálně. Výslednou pozici ve vyhledávání tedy považujeme za velmi překvapivou, ale i velmi příjemnou…

Víme, že měřit úspěšnost SEO podle pozice jednoho výrobku ve vyhledavači je nesmysl. Ovšem i tak nás toto zjištění utvrzuje v tom, že čas strávený na podpoře SEO faktorů se vyplatil.

Do konce týdne doplníme do demo databáze některé další výrobky a budeme zjišťovat, zda i ty se prosadí v konkurenci jiných e-shopů. Pokud ano, asi začneme na demo e-shopu i prodávat :)

Shopio je tady!

Neskutečné se stalo skutečností – Shopio je tady! V sobotu 21. 6. 2008 v 13:33 se zrodila první verze e-shopu Shopio.

Jak tedy vypadá? Podívejte se na demo obchod nebo do administrace.

Jako ukázku e-shopu jsme zvolili obchod s počítači a elektronikou. Tento sortiment jsme volili hlavně z důvodu velké rozličnosti výrobků, na kterém je možné dobře předvést funkčnosti Shopia.

Při tvorbě grafického designu pro první e-shop na Shopiu, jsme design vymýšleli na základě znalostí, co Shopio umí.
Pro demo e-shop jsme zkusili jít opačnou cestou. Koupili jsme již hotový design, který neměl žádnou spojitost se Shopiem a na něj jsme Shopio implementovali. Díky tomu jsme si ověřili možnost nasazení unikátního designu.

Dále jsme také spustili nové Shopio stránky, kde můžete nalézt více informací.

Co plánujeme do budoucna?

Vývoj Shopia tímto zdaleka nekončí. Plánujeme postupně přidávat celou řadu dalších funkcí. Budou to jednak funkce známé již z jiných e-shopů, plánujeme i několik nových funkcí, které budou doufáme příjemným překvapením. Na vývoj těchto nových funkcí se obzvlášť těšíme a jsme zvědaví na jejich úspěch.

Připravujeme také instruktážní video, jak pracovat se Shopiem, které usnadní uživatelům začátky práce se Shopiem.

V případě jakýchkoli dotazů, návrhů na vylepšení, nápadů na nové funkce, zájmu o Shopio nebo spolupráci nás prosím neváhejte kontaktovat.

Sledování návštěvnosti

V několika dalších článcích se budeme zabývat možnostmi pro zvyšování návštěvnosti e-shopu. Popíši také, jaké kroky jsme udělali pro zvyšování návštěvnosti na Medievum Marketu a jaké další kroky plánujeme do budoucna.
Prvním krokem pro zvyšování návštěvnosti je začít návštěvnost vůbec sledovat. Nástrojů na sledování návštěvnosti existuje celá řada. Dají se rozdělit na dvě základní skupiny.

Nástroje analyzující log soubory

  • Awstat – jednodušší nástroj, jehož hlavní výhodou je cena – je zdarma. Je podporován na velkém množství hostingů.
  • Lyris HQ – jeden z nejpropracovanějších nástrojů pro analýzu log souborů. Nevýhodou je jeho poměrně vysoká pořizovací cena.
  • Smarter stats

Online měřící nástroje

  • Google Analytics – Jednoznačně nejznámější nástroj. V současné době již téměř standardem. Pro naprostou většinu webů je zcela dostačující a je zdarma.
  • Navrcholu – Výhoda je provázání s katalogem stránek, který slouží jako zpětný odkaz.
  • Toplist – Velmi jednoduché počítadlo. Výhodou je také napojení na katalog stránek.
  • CrazyEgg – Ve „w3w“ ho používáme pro měření „klikavosti“, které má lépe zpracované než Google Analytics.

Pokud si nevíte rady, jaký nástroj použít, použijte Google Analytics. Google Analytics je pro naprostou většinu webových prezentací a e-shopů naprosto dostačující. Pokročilejší nástroje jako např. Lyris HQ mají své výhody, které ale ocení pouze odborníci. Těm však tento článek není určen.

Sledování návštěvnosti Medievum Marketu

Pro sledování návštěvnosti Medievum Marketu používáme Google Analytics a CrazyEgg. CrazyEgg máme nainstalovaný jako doplněk, kterým sledujeme, jak lidé klikají na úvodní stránce. O CrazyEgg jsme se v této souvislosti zmiňovali již v předchozím článku.

Ukázka z Google Analytics pro Medievum Market.

Pomohou Vám se sledováním návštěvnosti:

Aktualizace k 7. 5. 2015: E-shop Medievum Market jsme se rozhodli uzavřít a věnovat se novému „referenčnímu“ e-shopu Pivní dárky, kterému se komerčně daří výrazně lépe.

Nový platební nástroj – SuperCash

Na serveru Lupa dnes vyšel zajímavý článek SuperCash: rozhýbe platby na českých e-shopech?
popisující novou platební metodu pro české internetové obchody a pro poskytovatelé online obsahu.

Jak platba funguje?

  1. Zákazník si při placení vybere platbu SuperCash.
  2. Obdrží 24 místný číselný kód (možno i v kombinaci s čárovým kódem).
  3. Tento číselný kód předloží na online terminálu Sazky a zaplatí příslušnou cenu.
  4. Obdrží potvrzení o uskutečněné platbě.
  5. Obchodník by měl být do 10 minut informován o transakci a může zpracovat zakázku.

Podrobněji popsáno na stránkách SuperCash.

Kolik to stojí?

  • Zákazník za uskutečněnou platbu zaplatí 10 Kč.
  • Limit pro jednotlivé platby je 99.999 Kč

Kde se dá touto metodou zaplatit?

V současné době je existují pouze 3 obchody, které tuto platbu podporují.

Jejich počet se ale zcela jistě bude postupně rozšiřovat.

Bude Shopio podporovat SuperCash?

Podporu této platební metody pro e-shopy postavené na Shopiu plánujeme implementovat během tohoto léta.

Další informace k tomuto tématu:

Výběr vhodného řešení e-shopu

V současné době existuje velké množství různých řešení pro tvorbu e-shopu. Vybrat si z tohoto dlouhého seznamu opravdu není jednoduché. V tomto článku se pokusím stručně popsat, jaké v této oblasti máme možnosti a dále odkázat na několik článků, které by Vám v rozhodování mohly pomoci.

Máme na výběr z těchto možností:

  • Použití opensource řešení.
  • Pronájem / zakoupení komerčního řešení.
  • Vytvoření vlastního řešení.

Opensource řešení

Opensource řešení je jistě ideální volbou pro menší, začínající e-shopy. Za poměrně nízkou cenu si provozovatel může jednoduše vyzkoušet, zda jeho e-shop může mít úspěch nebo ne.
Výhodou je jistě také rychlost, z jakou můžeme začít prodávat. Instalace e-shopu je obvykle velice jednoduchá. Pokud si vystačíme s výchozím designem, můžete po technické stránce začít prodávat za několik hodin. Možností je také využít služeb některých webhostingových společností, které nabízejí balíčky přímo s některým opensource e-shopem.
Z nejznámějších a nejkvalitnějších bych jmenoval např.:

Diskusí o vhodnosti výběru opensource e-shopu existuje mnoho, např. na webtrhu.

Pronájem / zakoupení licence komerčního řešení

Komerčních řešení e-shopu různé kvality u nás existuje několik desítek. Výběr je zde podstatně složitější, než u opensource e-shopů. Projít nabídky všech firem poskytující řešení e-shopů je úkol na dlouhou dobu. Navíc na části webových stránek popisující řešení e-shopu se nedozvíte, co všechno nabízené řešení umí a kolik Vás e-shop bude stát. Velká část prezentací e-shopů také neobsahuje veřejné demo, kde byste si mohli řešení vyzkoušet.
Velkým pomocníkem při výběru vhodného kandidáta Vám jistě bude článek se seznamem hotových řešení e-shopů a jeho aktualizová verze. V tomto článku také autor zniňuje, že ve svém bádání pokračuje a bude se snažit e-shopy rozdělit podle kvality do třech částí: vyšší liga – 15%, první liga – 30%, druhá liga – 55%. Vzhledem k tomu, že srovnání v takovémto rozsahu neexistuje, bude jistě velice zajímavé. Společnostem, které hledají vhodné řešení e-shopu jistě mnoho napoví, kterým směrem se v hledání mají vydat. Tvůrcům e-shopů naopak ukáže, jak na tom jsou oproti konkurenci. V jednom z dalších článků také autor popisuje, podle jakých kritérií můžeme e-shop vybírat. Při výběru dodavatele Vám jistě také může být užitečný jeden z dílů seriálu firemní webjak vybírat dodavatele.

Vytvoření vlastního řešení

Toto varianta má obvykle smysl pouze pro opravdu velké obchody, které potřebují svůj systém na míru napojený na všechny firemní procesy a systémy. Avšak i zde bude obvykle levnější nechat si již některý hotový e-shop dle potřeb upravit či rozšířit. Vývoj vlastního, kvalitního e-shopu je vždy v řádu od stovek tisíc korun výše. Najdou se i nabídky na vytvoření e-shopů na míru za cca 10.000 kč, ale ty bych určitě doporučoval nebrat:).

Další články na toto téma:

Jak rozpoznat kvalitní e-shop

Na serveru Měšec.cz vyšel článek Jak na internetu rozpoznat kvalitní e-shop. Autor se v něm zabývá několika ukazateli, které mohou s předstihem naznačit, zda je daný e-shop spolehlivý či nikoliv a doplňuje je komentáři dvou zástupců provozovatelů předních českých internetových obchodů. Některé z těchto ukazatelů, jako je přehledná a kvalitní grafika, otevřenost, jasné definování obchodních a reklamačních podmínek jsou poměrně známé a našem blogu jsme je již zmiňovali.

Jiné jsou specifické. Poměrně obsáhlý je oddíl věnovaný certifikátům asociace APEK, v němž se podrobněji zabývá fungováním této organizace.

Za velmi zajímavé pak považuji tvrzení, že dostupnost typů plateb není pro hodnocení e-shop podstatná. Důležité je prý, aby podporoval dobírku, což je v České republice absolutně nejvyužívanější způsob platby. S převahou doručování „na dobírku“ nelze než souhlasit, ovšem dle mého názoru se počet alternativních plateb (platba kartou, PayPal, PaySec či další) bude do budoucna zvyšovat právě na úkor dobírky.

Přečtěte si celý článek: Jak na internetu rozpoznat kvalitní e-shop.

Ukázka administrace

Rád bych Vás seznámil s novinkami ve vývoji Shopia. Dnešním dnem jsme plánovali představit veřejnou demoverzi Shopia. Na demoverzi však ještě probíhá intenzivní testování a dolaďování některých drobných nedostatků. Proto jsme se rozhodli představení veřejného dema odložit, za což se všem zájemcům omlouváme. Veřejné demo představíme těsně před uvedením Shopia do prodeje.
Toto demo bude ukázka obchodu s počítači. Pro sortiment počítačů jsme se rozhodli hlavně z důvodů velkého množství parametrů těchto výrobků, na nichž bude možné dobře demonstrovat parametrické vyhledávání.

Shopio po technické stránce

Jak je na tom Shopio po technické stránce? Čím se odlišuje od e-shopů jiných firem? A pro koho je řešení určeno? Tyto a další otázky budou zodpovězeny v dnešním článku věnovaném technické stránce našeho řešení.

Cíle

Když jsme před několika měsíci navrhovali analýzu Shopia, prvním úkolem bylo stanovení technických cílů, které musíme dosáhnout:

Snadná a rychlá možnost konfigurace obchodu

Ač bychom chtěli, není možné naprogramovat takové řešení, aby pokrylo 100% klientových požadavků, proto jsme připraveni implementovat různá nadstandardní přání na funkčnost obchodu. Ještě než jsme začali s výstavbou vlastního řešení, vybrali jsme přibližně 10 nejlepších českých internetových obchodů s různým sortimentem (knihy, PC technika, oblečení, digitální fotoaparáty, suplementy pro kulturistiku, …) a podle toho navrhovali dostatečně univerzální řešení jednotlivých komponent obchodu.

Snadná implementace unikátního designu

Počítáme s tím, že klient bude požadovat unikátní design pro svůj obchod. Design si můžete nechat navrhnout u nás, můžete si také projít různé obchody se šablonami webových stránek a pokud vás nějaká zaujme, není problém implementovat ji do Shopia. Plánujeme také sami vytvořit několik grafických šablon, které budou již v základní ceně.

Rychlost načítání stránek

Uvědomujeme si, že rychlost procházení katalogu stránek je velmi důležitá a často rozhoduje o tom, zda je obchod označen zákazníkem za přívětivý. Pro Shopio bude připraven propracovaný systém cachování (ukládání vygenerovaných stránek tak, aby se při příštím nahrání nemusely vytvářet znova), který umožní přizpůsobit se konkrétnímu typu obchodu a předpokládanému zatížení.

Cíle to tedy nejsou malé.

Technologie

Abychom předepsané cíle splnili, bylo nutné vybrat kvalitní výrobní prostředky. Celé Shopio je napsáno v skriptovacím jazyce PHP v jeho nejnovější verzi, minimální verze pro bezproblémový běh je PHP 5.2. Ačkoliv jsme před začátkem programovací části uvažovali o Javě nebo moderním Ruby, nakonec jsme zůstali u PHP, které je pro nás dobře osvědčené, je po něm vysoká poptávka, dobrá nabídka hostingů a pro naše cíle je naprosto ideální.

V programování celého e-shopu je nám velkým pomocníkem Zend Framework vyvíjen firmou Zend. S jeho pomocí je vývoj webu mnohem rychlejší než vývoj většiny PHP projektů bez frameworků. Opět používáme jeho aktuální verzi 1.5.1. a využíváme naplno jeho možností. Právě díky tomu je možné Shopio lokalizovat do 170 různých jazykových podob vč. přizpůsobení formátu data či ceny ap.

Pro provoz je také nutná novější databáze MySQL 5, což je místo, kde jsou fyzicky uloženy všechna data z eshopu. Dostupná je na většině hostingů. Pro generování PDF dokumentů používáme knihovnu TCPDF, pro ošetření komentářů uživatelů a pro editaci textů je možné použít převaděč Texy! či TinyMCE, což je jednodušší náhrada známeho programu Word z Windows pro webové stránky.

Administrace obchodu používá různé ajaxové vychytávky pro snadnější práci s administrací, přičemž jako framework používáme oblíbené jQuery a YUI vyvíjené známou firmou YAHOO! pro složité aplikace.

Jak jsme dělali grafiku pro Medievum Market II.

V minulém článku jsme se věnovali problematice poměru inovativního a tradičního ztvárnění webových prvků a jejich rozložení. V tomto díle si ukážeme konkrétní prvky Medievum Marketu a poodhalíme vám, s jakými otázkami jsme se při jejich ztvárnění potýkali.

Rozvržení jednotlivých prvků

Hlavička stránek

Hlavička stránek obsahuje logo e-shopu, menší logo provozovatele, které slouží jako odkaz na firemní web Medieva. Tento odkaz je zvláště důležitý pro ty návštěvníky, kteří si z firemního webu na e-shop pouze „odskočili“. Budeme proto také zjišťovat, zda je význam tohoto odkazu pro návštěvníky dostatečně zřejmý.

V pravé části hlavičky se nachází soubor prvků, které vytváří jakousi „zákaznickou sekci“. Umístění této sekce bylo dáno tradičním místem pro nákupní košík. Ten jsou totiž uživatelé zvyklí hledat v pravé horní části obrazovky. My jsme nákupní košík doplnili odkazem na oblíbené položky a formulářem pro přihlášení do systému, místo kterého po přihlášení zákazník nalezne možnost změny přihlašovacích a osobních údajů, nahlížet do svých starších objednávek a samozřejmě se odhlásit. Odkaz na košík jsme však opticky zvýraznili a barevně odlišili od ostatních prvků, které jsou v rámci nákupního procesu méně významné. Do tohoto prostoru ještě uvažujeme přesunout odkaz na porovnávané produkty, zde však trochu bojujeme s nedostatkem místa.

V hlavičce nalezneme také horizontální menu s informacemi o e-shopu a jeho obchodních podmínkách. Velkou část pak představuje prostor pro stylový grafický baner, který vychází z návrhu firemní prezentace Medievum.cz.

Levý sloupec

V rámci dvousloupcového layoutu Medievum Market jsme do levého sloupce (opět tradičně) umístili produktovou navigaci s kategoriemi zboží. Vzhledem k nevelkému počtu kategorií a jejich poměrně jednoduché struktuře jsme se rozhodli nechat všechny kategorie i podkategorie rozbalené a viditelné. Spodní část levého sloupce pak slouží na pro zobrazení náhledů zajímavých produktů, případné grafické banery či tipy a doporučení. Nad samotné kategorie jsme umístili výrazné okno pro vyhledávání zboží, které tak dostalo poměrně prestižní místo mezi jednotlivými prvky stránek. Na e-shopu s tímto sortimentem sice příliš časté vyhledávání nepředpokládáme, ale chceme je v rámci vývoje Shopia testovat a doufáme, že tomu tato pozice vyhledávacího okna pomůže.

Obsahový sloupec – Hlavní stránka

Hlavní stránka většiny webových stránek bývá do určité míry výjimečná. Je třeba, aby co nejpřehledněji ukázala hlavní oblasti, kterým se stránky věnují, upozornila na novinky či zajímavé nabídky. Některé e-shopy (např. Alza.cz ) na hlavní stránce dokonce neukazují vlastní zboží a nechávají ji pouze pro zobrazení banerů či výhod. V případě Medievum Marketu jsme vrchní část obsahového sloupce hlavní stránky věnovali výrazným odkazům na hlavní kategorie e-shopu. To jsme si mohli dovolit vzhledem k tomu, že jsou zatím pouze čtyři. V případě již zmíněné Alzy bychom tento nápad použít jistě nemohli. Hned pod kategoriemi je prostor pro široký baner, který směřuje na preferovanou kategorii či konkrétní produkt. Dále následují novinky či akční nabídky zboží, které jsou řazeny již standardně ve formátu společnému pro výpis kategorie produktů.

Obsahový sloupec – Výpis zboží v kategorii

Zobrazení kategorie zboží uvozuje drobečková navigace, po níž následuje výpis pěti nejprodávanějších produktů. Pak už přichází samotný výpis produktů s navigační lištou, na které lze nastavit řazení produktů, počet jejich zobrazení či volit stránku výpisu.

Vzhledem k charakteru zboží, které je zajímavé zejména svým vzhledem, rozhodli jsme se věnovat velký prostor jeho fotografiím. Proto je základní výpis kategorie poměrně jednoduchý a vzdušný, jednotlivé produkty zobrazují jen obrázek zboží, název, cenu a možnost vložit zboží do košíku. Po najetí na produkt kurzorem se přidá ještě možnosti vložit produkt do oblíbených či k porovnávání. V případě, že by byl e-shop věnován např. výpočetní technice, určitě bychom již ve výpisu kategorie zobrazovali u zboží jeho hlavní parametry, základní popis a cenu. Tyto informace jsou v daném oboru daleko podstatnější než vzhled výrobku. Jen málokterý počítačový fanda se totiž při koupi grafické karty rozhoduje podle jejího vzhledu…

Obsahový sloupec – Detail zboží

Detail zboží zobrazuje všechny podstatné informace o konkrétním artiklu: jeho název, perex, popis, základní charakteristiku a dostupné fotografie. Vložení do košíku je zde oproti výpisu v kategorii rozšířeno o možnost nastavení počtu zboží. Dále je zde možnost zboží ohodnotit či přečíst si komentáře předchozích zákazníků. U některých produktů navíc zobrazujeme další alternativní či doporučené produkty.
Vzhledem k tomu, že se jednotlivé zboží může vyskytovat ve více kategoriích, museli jsme v detailu zboží opustit klasické zobrazení drobečkové navigace. Odkazy na vyšší úrovně kategorií, v do nichž je konkrétní artikl zařazen jsme tedy umístili do jeho specifikace.

Patička

Patička e-shopu nevybočuje z obecných zvyklostí či standardů webů tvořených ve [w3w]. Je členěna do dvou částí, přičemž první obsahuje odkazy na tvůrce a vlastníky webu, druhá pak uživatelské navigační odkazy jako jsou návrat na titulní stránku, prohlášení o přístupnosti, tisk stránek za pomocí vlastních tiskových stylů a přechod na vrchol samotné stránky. Do budoucna zvažujeme ještě přidání log certifikátů e-shopu, které mají velmi dobrý vliv na důvěryhodnost webu. Zda půjdou do patičky nebo do levého sloupce, ještě uvidíme…

Stylování formulářů

Na stránkách typu e-shopu se s formuláři potkáváme téměř na každém kroku. Zejména na každém kroku objednávky. Stylování formulářů je poměrně problematické z hlediska jejich zobrazení v různých prohlížečích a my se ztotožňujeme s názory Víta Dlouhého nebo Plaváčka, že optimální je formuláře nestylovat. Proto jsme ponechali formulářová okna a tlačítka v jejich výchozím formátu. Výjimku tvoří orámování polí pro vyhledávání a přihlašování, které jsme vhledem k menšímu prostoru ohraničili jeden pixel širokou linkou. To je minimální změna, která se v testovaných prohlížečích negativně neprojeví. Výraznější výjimku pak tvoří všechna potvrzující tlačítka nákupního procesu, jako je tlačítko vložit do košíku v detailu a následná tlačítka v jednotlivých krocích objednávky. Tato tlačítka jsou větší a výraznější než ostatní, čímž upoutávají pozornost návštěvníka stránek. Mohou tím v určitých případech přispět ke zvýšení konverzního poměru celého e-shopu. Takto zvýrazněna jsou pouze ta tlačítka, která vedou v rámci nákupního procesu kupředu. Věříme, že to má výrazný vliv na použitelnost a následnou úspěšnost stránek. Hladký průběh procesu od vložení zboží do košíku po odeslání objednávky je totiž jedním z klíčových požadavků na úspěšné řešení internetového obchodu. Pro hodnocení úspěšnosti objednávkového procesu je ideální vizualizace cílové cesty v Google Analytics. Jsme dost zvědaví na výsledky po shromáždění více dat, zatím to vypadá velice dobře…

Testování

Pro testování chování uživatelů na webu používáme kromě uživatelského testování, zejména dva nástroje. Google Analytics, pomocí nichž sledujeme pohyb uživatelů v rámci celého webu a Crazy Egg, který máme nainstalovaný pouze na úvodní stránce. Crazy Egg nám oproti Google Analytics dokáže zjistit přesné oblasti (i části obrázků či banerů), kam návštěvníci na hlavní stránce klikají. Tento nástroj je natolik zajímavý, že jeho výsledkům chceme v budoucnu chceme věnovat v samostatném článku. Pro inspiraci přikládáme screenshot s mapou hustoty kliků – tzv. heatmap.

crazyegg-medievummarket-hea

Závěr

Vzhledem k tomu, že Medievum Market je pilotním projektem postaveným na systému Shopio, sledujeme jej velmi pozorně a snažíme se odhalit všechny nedostatky, které unikly internímu testování. Z analýz chování jeho návštěvníků i z ohlasů na vzhled i funkcionalitu e-shopu pak budeme do velké míry vycházet při úpravách universální šablony Shopia. Uvítáme proto jakékoliv připomínky, konstruktivní kritiku, doporučení a nápady, které se grafiky i rozložení prvků Medievum Marketu budou týkat.

Aktualizace k 7. 5. 2015: E-shop Medievum Market jsme se rozhodli uzavřít a věnovat se novému „referenčnímu“ e-shopu Pivní dárky, kterému se komerčně daří výrazně lépe.

Jak jsme dělali grafiku pro Medievum Market I.

V tomto článku a jeho dalším díle se budeme věnovat rozvržení a grafickému ztvárnění prvků na e-shopu Medievum Market. První část je věnovaná otázce do jaké míry je dobré být inovátorský a originální a do jaké míry respektovat tradiční zásady. V druhé části se budeme věnovat konkrétním prvkům Medievum Marketu.

Originalita či prověřený způsob?

Být originální. Zaujmout. Nezapadnout do šedého průměru. To vše jsou cíle, které by měl grafický design webových stránek plnit. Současně by měl být srozumitelný a umožnit uživateli snadnou orientaci na stránkách. Často se stává, že pokud se tvůrci webových stránek nechají unést touhou po originalitě a opustí tradiční rozložení webových prvků, nesetká se jejich výtvor všeobecným úspěchem. Naopak – netradiční rozložení i vzhled jednotlivých prvků může působit zmatečně a tedy nedůvěryhodně, což se negativně projeví na obchodní úspěšnosti webu. Čím je to způsobeno?

Jedním z nejdůležitějším faktorů úspěšnosti webových stránek je jejich důvěryhodnost. Grafický návrh patří mezi hlavní kritéria, která o důvěryhodnosti rozhodují. Inovace a zajímavé vizuální ztvárnění webových stránek dokáží být pro úspěch webu velkým přínosem. Na druhé straně však člověk podvědomě více důvěřuje věcem, které jsou známé a prověřené. Tvorba grafického vzhledu stránek je tedy neustálým hledáním zlaté střední cesty na pomezí mezi originalitou a respektováním tradičních zvyklostí. Hranice je to tenká, často proměnlivá a pro každý typ webových stránek je jiná. Kreativní agentura si může dovolit plně flashové stránky s opravdu netradiční navigací jakou má např. Leo Burnet, informační web či e-shop by již s takovou navigací nejspíše neuspěl. Světově nejúspěšnější e-shopy typu Amazon, mají grafiku a navigaci velmi jednoduchou, na první pohled až chudou.

Shrňme si výhody obou pólů – originality a tradice:

Originalita:

  • Dokáže zaujmout.
  • Dokáže nalákat.
  • Odlišuje od konkurence.
  • Podporuje linkbaiting.

Dodržování tradičních zásad:

  • Zlepšuje použitelnost webu.
  • Podporuje v návštěvníkovi pocit jistoty a důvěry.
  • Zlepšuje orientaci v rámci stránek.

Úspěšný web musí mít od každého trochu. Být originální a přitom působit na návštěvníka povědomě. Výhody každého „extrému“ je dobré využívat v určitých prvcích webových stránek.

Pro originální a inovativní ztvárnění jsou vhodné zejména:

  • vizuální styl stránek, jejich pozadí či orámování
  • grafické banery
  • netradičně pojaté obrázky zboží či vlastní fotogalerie

Tradiční by měly naopak zůstat navigační prvky jako jsou:

  • menu
  • drobečková navigace
  • logo jako odkaz na úvodní stránku
  • nákupní košík
  • stránkování a řazení produktů

Je třeba si však uvědomit, že výše popsané dělení není dogmatem a jistě není ani vyčerpávající. I navigace prochází vývojem a není vyloučeno, že se objeví radikální inovace, která se rychle stane standardem. Je však pravděpodobnější, že vývoj navigačních prvků bude pozvolný a evoluční. Příkladem mohou být javascriptové horizontálně posuvné nabídky, které lze spatřit například na webu Apple či Abercrombie. Předpokládáme, že v budoucnu budeme tyto efektní a přitom uživatelsky použitelné prvky spatřovat stále častěji.

Při tvorbě grafického návrhu pro e-shop Medievum Market jsme se také pokoušeli o optimální poměr originality a tradice. Naše počáteční návrhy byly velmi kreativní. S postupem času a s ohledem na použitelnost však začaly být více konzervativní. Výsledkem je současný grafický vzhled Medievum Marketu. S jakým úspěchem se nám návrh podařil, to ukáže budoucnost… Popřípadě vaše reakce :)

Aktualizace k 7. 5. 2015: E-shop Medievum Market jsme se rozhodli uzavřít a věnovat se novému „referenčnímu“ e-shopu Pivní dárky, kterému se komerčně daří výrazně lépe.