Kódování je jistá forma oživování grafického návrhu do interaktivní verze, ve které si můžeme osahat, jak se design bude chovat. Od testování hooverů (efekty po najetí myši na prvky), dropdown menu (horizontální plachta kategorií), po celkové chování na mobilu, tabletu a v různých rozlišeních. Samotný proces testování je poměrně náročný a vyžaduje detailistické oko, proto si v tomto díle ukážeme, jak probíhalo kódování na Dudlu a dáme vám menší checklist toho, co jsme v betě ladili.
Redesign e-shopu Dudlu.cz — Kódování webu
Checklist kontroly kódování:
Samotné testování probíhá na beta verzi, která může být jednorázově sehraným klonem 1:1 s vaší aktuální verzí, nebo jen beta s pár produkty na ukázku. Opět záleží, jaký máte rozpočet. Čím méně si toho necháte do bety nahrát, tím více budete muset zapojit představivost a hrozí, že do ostré verze vypustíte chyby. My jsme si nechali udělat hodně lite verzi, která obsahovala pár ilustrativní produktů a zároveň jsme jeli i bez externích doplňků, takže u řady věcí jsme netušili jak ve výsledku dopadnou.
Je třeba mít na paměti, že wireframy, návrh designu a samotné kódování dělají často zcela jiné osoby, tedy i pokud si o designu říkáte, jak jste se skvěle s dodavatelem pochopili, tak u kódování sedí jiný člověk, který si výsledný obraz bude interpretovat po svém. Jen pro představu jsme si okolo redesignu vyměnili přes 60 e-mailů, z toho 20 bylo k designu a 40 pro kódování, kde bylo třeba důkladně projít jak na mobilu, tak na desktopu řadu elementů a dotáhnout šablonu k maximální spokojenosti:
- Odkontrolovat prázdná místa a zbytečně velká odsazení
- Odkontrolovat parametrické filtry a jejich zobrazení
- Odkontrolovat dropdown menu a humber menu
- Odkontrolovat vizualizaci interních linků
- Odkontrolovat ikonky dárků a dopravy zdarma
- Odkontrolovat recenze obchodu v kartě produktu
- Odkontrolovat zobrazení podobných a souvisejících produktů
- Odkontrolovat jazykovou sadu textů včetně microcopy
- Odkontrolovat přidání zboží do košíku a celý košík
- Odkontrolovat shopping bar do dopravy zdarma zbývá XY Kč
- Odkontrolovat zobrazení USP a jejich responzivitu
- Odkontrolovat zobrazení podkategorií a jejich responzivitu
- Odkontrolovat články a jejich formátování
- Odkontrolovat nadpisy, odrážky a číslování skrz celý web
- Odkontrolovat informační proužek při aktivaci
A bylo toho samozřejmě více, ale před spuštěním jsme se nejvíce točili okolo těchto detailů, které prostě při tom množství změn utečou a ne vždy se v nich pochopíte na první dobrou.
Finální verze redesignu Dudlu po nasazení na ostrou
A co očekávat po nasazení z bety na ostrou?
Největším rizikem pro nás jsou externí doplňky, které jsme si pro betu nechtěli platit a to byla jediná neznámá proměnná, která nám přidělávala vrásky. Naštěstí tým z eGuru jich drtivou většinu dokázal nahradit vlastním kódem a my se tak očistili od spoléhání se na kompatibilitu třetích stran. I tak pár složitějších doplňků jako Rozbalené dárky v košíku, Product widgets a Poznámka k produktu jsme si nechali a naštěstí vše do designu perfektně zapadlo. Nový design je venku a je třeba ho ověřit mezi zákazníky, ale o tom až v další díle, tak nás sdílejte, lajkujte a ať i vám e-shopy rostou.
Hlavní partneři projektu Dudlu.cz
[logo-showcase id=“5325″ title=“Dudlu“]
[supsystic-price-table id=24]
Klikněte na CHCI VÍCE a ponořte se do četby celého našeho seriálu
0 komentářů