Na našem nejvíce opečovávaném e-shopu Hanibal.cz jsme na základě požadavku klienta výrazně vylepšili průběh nákupního procesu – fázi košíku. Pro nakupující je připraveno mnohem příjemnější prostředí – jak graficky, tak funkčně.


Pojďme se nyní podívat na jednotlivé požadavky ze strany Hanibalu, a rozdíly původního a nového řešení. Na několika obrázcích uvidíte vždy černou čarou oddělené zobrazení, jaké bylo před úpravami a jaké po nich.

Zlepšení navigace v košíku

Cílem bylo zvýšení vizuální priority tlačítek jednotlivých kroků objednávky za účelem snazší navigace. Dříve byla tlačítka čtyř kroků objednávky nenápaditá a šedá. Náš nový návrh zobrazuje tlačítka mnohem atraktivněji, v jiných tvarech, s ikonkami a lepší funkcionalitou. Vylepšení si prohlédněte na obrázku:

Jak je vidět, výrazně jsme označili aktuální krok objednávky, přidali jsme ikony a po stranách přibyla tlačítka Zpět a Další krok. Na tato tlačítka nelze kliknout, dokud nejsou zvoleny všechny parametry zboží (Na Hanibalu lze vložit zboží do košíku již z domovské stránky bez upřesnění velikosti. Detaily lze tedy řešit až v košíku).

Stalo se zvykem, že ještě pod košíkem by měla být tlačítka Zpět a Další krok. Nicméně požadavkem klienta ze zřejmých důvodů bylo znevýraznit tlačítko Zpět, oproti tlačítku pokračujícímu. Výsledek vidíte opět na obrázku:

Aktualizace obsahu košíku

U zboží v košíku je nyní možnost úpravy barvy, velikosti a množství položek bez nutnosti obnovovat celou stránku – obnovuje se vždy jen část stránky, které se toto týká. S tímto nám pomohla technologie AJAX.

Vtipně jsme si poradili s prodlevou mezi aktualizací upravené části stránky – zobrazujeme animovaného slona Hanibala „šmátrajícího po datech“. Takže i to vteřinové čekání by mělo být příjemným zážitkem :)

Po provedené změně se vždy aktualizuje dostupnost počtu, velikosti i barvy a v případně nedostupnosti jsou zobrazena varování.

Další drobné změny

Za ukázku stály spíše změny přehledu zboží, ale menší úpravy se týkaly například i stránky Doprava a platba.

Vysvětlivky k jednotlivým způsobům dopravy a plateb se přemístily do tooltipů zobrazujících se až po najetí na ikonku otazníčku. Došlo tedy k výraznému zpřehlednění, což bylo i cílem.

Nakonec přikládáme ještě obrázek, na kterém jsou změny před a po zásahu vidět komplexně.