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.
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.