Celý náš tým, který se v Shockworks věnuje vývoji e-commerce řešení, se snaží ke všem projektům přistupovat efektivními a především moderními metodami. Díky individuálnímu přístupu ke každému projektu máme možnost moderní metody vývoje různě kombinovat a doplňovat našimi vlastními. Naše znalosti a poznatky dále diskutujeme s širokou komunitou vývojářů na různých konferencích a setkáních. Právě proto jsou naše výstupy moderní a každý náš projekt něčím specifický. Blíže o tom, jak pracujeme v Shockworks, se dočtete v článku od Zuzky.

O zajímavých novinkách z různých oblastí tvorby e-shopu se můžete dočíst níže, kde každý z našich profesionálů vybral projekt z posledního půl roku jeho práce.

Zuzana Drápalová
UX Designer

„Mobile first“ vývoj e-shopů a práce s uživateli

Koncem minulého roku jsme začali více testovat novou metodu návrhu architektury e-shopu. Jedná se o velmi diskutovaný postup, který má mnoho svých zastánců i odpůrců. My jsme jej chtěli již dlouho vyzkoušet, abychom si mohli vytvořit vlastní názor. Metoda „Mobile first“ spočívá v návrhu architektury tak nějak pozpátku. Dříve se začínalo s návrhem pro stolní počítače a notebooky a postupně se ubíraly a přeskládávaly prvky, čímž vznikala responzivní a mobilní verze nového e-shopu. Se vzrůstajícím procentem návštěvníků z mobilních telefonů a tabletů jsme však začali přemýšlet, jestli by nebylo lepší tento postup obrátit. Nejprve jsme tedy vytvořili návrh pro mobilní telefon, od kterého se pak odvíjelo rozložení a obsah všech větších zařízení. Díky tomuto postupu si dokážeme skvěle uvědomit priority obsahu – často zjišťujeme, že to, co není potřeba zobrazovat na mobilu, nemusí být nutně ani na desktopu. Řešení vznikající tímto postupem jsou mnohem přehlednější a čistější.

clanek-novinky-mobile-first

Kontextový obsah a menu

S novým postupem souvisí i tvorba kontextového obsahu. To, co zákazníka zajímá ve výpisu produktů, již nebude hledat v detailu produktu a podobně. Jdeme ještě více do hloubi zákazníkovy mysli a snažíme se obsah každé stránky přizpůsobit přesně jeho aktuálním potřebám. Dnes se již obloukem vyhýbáme stále stejným bannerům napříč celým e-shopem a umístěním registrace k newsletteru do patičky stránky.

Uživatelské testování prototypu a databáze testerů

Zaměřili jsme se také na zintenzivnění našich uživatelských testování. Jak známo, uživatelské testování by se mělo provádět co nejčastěji a již od raných fází vývoje nového projektu. Zavedli jsme tedy uživatelská testování prototypů. Bylo to pro nás i pro samotné testery velkou výzvou, ale tento postup nám nyní šetří mnoho času a problémů při dokončování projektů. Čím dříve totiž najdeme nesrovnalosti v použitelnosti e-shopu, tím jednodušeji a rychleji se dají opravit. Abychom mohli provádět vyšší počet testování, vytvořili jsme si vlastní databázi testerů. Nyní máme k dispozici široký seznam kontaktů na osoby z nejrůznějších cílových skupin, s různými zájmy, profesemi a nákupními zvyklostmi. Nic nám tak nebrání projekty před spuštěním řádně otestovat.

Petr Kulich
Web Designer

Styleguides a práce s fotkami

Velkým přínosem při práci na grafických návrzích byl přechod na novou fotobanku. Z původního Shutterstock jsme přešli na Adobe Stock, který je přes cloudové služby provázaný přímo se všemi programy rodiny Adobe. Umožňuje mnohem jednodušší práci s náhledy fotografií, které je možné jedním kliknutím licencovat přímo z grafického editoru.

Další krok jsme také udělali v práci se styleguidy. Grafický styl všech tlačítek, karet produktů, hlaviček a dalších prvků e-shopu jsme postupně přestali navrhovat pouze v grafickém editoru, ale implementujeme ho přímo do stránek e-shopu ve funkční podobě, což usnadňuje a zrychluje týmovou komunikaci. Místo hledání poslední verze PSD souboru s grafickými prvky, se stačí podívat na odkaz se styleguidem, kde jsou pohromadě všechny prvky, které jsou aktuálně použité na e-shopu . Více o nových trendech ve využívání styleguidů se můžete dočíst v článku od Petra Křížana.

Ján Opavský
Web Developer

Responzivní obrázky – snížení datové náročnosti

Větší zaměření na mobilní vývoj nás motivovalo k důraznější optimalizaci našich řešení. Požadavky v oblasti rychlosti a datové velikosti jsou na mobilních telefonech vyšší než pro desktopové verze. Je to samozřejmě z důvodů výkonu zařízení a rychlosti internetu. Do vývoje jsme tak začlenili metodu responzivních obrázků, kdy se pro různé typy zařízení generují obrázky v různých velikostech a tedy s různou datovou náročností. Na mobilních telefonech tak uživatel stahuje menší objemy dat než na desktopu, a to celé v rámci responzivního projektu (není potřeba odlišovat desktopovou a mobilní verzi).

Michal Horáček
Web Developer

Live coding, rychlejší a kvalitnější testování

Za mě byl nejvýraznější změnou posledního roku určitě přechod na tzv. „live coding“. Jedná se o využití metody, kdy se po uložení napsaného kódu nebo scriptu v editoru automaticky obnoví prohlížeče, ve kterých se vyvíjený e-shop testuje. Není potřeba si ho vždy ručně obnovovat, což dobře urychluje práci.

Díky této metodě je mnohem jednodušší také testování na různých zařízeních zároveň. Při vyvíjení mohu mít kolem sebe mnoho různých zařízení (mobil, tablet, notebook apod.) s tím, že po uložení kódu se mi změny okamžitě všude projeví a já hned vidím, kde vznikly problémy a kde naopak vše proběhlo správně.

clanek-novinky-livecoding

Já osobně pak největší změny vidím především ve způsobu práce jako takové. K tvorbě nových projektů se snažíme přistupovat stále více agilně a s větším zapojením všech Shockworkerů z různých oblastí. Do vývoje integrujeme i samotné klienty, kteří se tak stávají našimi plnohodnotnými členy týmu. Tato integrace je sice teprve v začátcích, ale chceme na ní určitě dále pracovat.

Do popředí našeho směřování se také více dostala mobilní řešení – ať se jedná o zpětné dílčí redesignování starších projektů do responzivní formy nebo o vývoj zcela nových projektů (které nově navrhujeme nejprve pro mobilní telefony a až poté pro velké nedotykové zobrazovače). Moderními postupy a naším know-how dokážeme dnes tvořit velmi povedené a funkční responzivní projekty.

Kamil Hamerník

Author Kamil Hamerník

Kamil řídí a organizuje práci lidí, kteří vytvářejí fungující projekty. Podílí se na optimalizaci vnitrofiremních procesů a velké množství času také věnuje našim klientům v rámci prezentací a konzultací.

More posts by Kamil Hamerník