Domů > Grafika > Případová studie: Jak jsme upravili SvětBot.cz po grafické stránce + SEO a co to přineslo?

Případová studie: Jak jsme upravili SvětBot.cz po grafické stránce + SEO a co to přineslo?

Na podzim 2013 jsme po více než 4 měsících příprav konečně spustili změny internetového obchodu SvětBot.cz. Pracovali jsme dlouho a poctivě. Konkrétně jsme udělali kompletní redesign, který byl zpracováván s poznatky z problematiky UX, a dále jsme zapracovali kompletně na on-page SEO. Jak to celé dopadlo se podíváme v této případové studii…

Jak jsme „udělali to SEO“?

O samotných úpravách v oblasti SEO se zde bude psát špatně. Části kódů stránky zde dávat nebudu, ale všeobecně lze říci, že jsme „pouze“ důkladně propracovali odkazovou interní provázanost, doladili jsme automaticky generované nadpisy ve výpisech zboží a v neposlední řadě jsme dost razantně upravili přepisy parametrů na „hezké URL“ adresy.

Mezitím co jsme v původní verzi měli v URL adrese maximálně 3 textové části a zbytek už byly jen parametry (pozn. tedy ?prvniparametr=hodnota&druhyparametr=hodnota2…), tak nyní jsme do URL adres promítli vše potřebné. Pokud se nepletu, tak nyní máme 8 nebo 9 parametrů, které se přepisují do „hezkých URL“. Parametry, které se přepisují do „hezkých“ URL, jsme vybrali na základě zpracované klasifikační analýzy klíčových slov (pozn.: návod na ní najdete v této knize), kterou jsme pro celou „velkou změnovou akci“ velmi důkladně zpracovali.

V neposlední řadě, když už zde narážíme na klasifikační analýzu klíčových slov, tak jsme z ní navrhli mnoho změn v rozřazení kategorií menu – například u lodiček jsme seškrtali velké množství podkategorií a několik nových jsme jich přidali. Obdobně tomu bylo i například u kozaček. Díky nově přeřazeným produktům do nových kategorií s přizpůsobenými názvy jsme získali mnoho nových vstupních stránek, pro jejichž výrazy, na které jsou optimalizované, je vysoký počet hledání. Jednalo se tedy také v podstatě o SEO úpravy.

V neposlední řadě, když už jsme narazili na vstupní stránky, tak jsme v ten samý termín spustili i „obecné vstupní stránky“, tedy stránky typu „tenisky“. Měli jsme boty rozřazeny do hlavních kategorií: dámské, pánské, chlapecké, dívčí a dětské. V každé z těchto kategorií byla podkategorie tenisky. Měli jsme tedy dámské tenisky, pánské tenisky, dětské tenisky atd. To samo  o sobě není špatně, ale nyní se zamysleme a položme si otázku – Co když někdo vyhledává jen pojem TENISKY? Kam ho má vyhledávač poslat, aby byl výsledek relevantní? Do dámských? Pánských? A co když chce hledající dětské… Stručně řečeno – vyhledávače neměly vstupní stránku pro pojem tenisky… A tak jsme udělali výpisy produktů, které jsme pracovně nazvali „obecné vstupní stránky“. Jedna z obecných vstupních stránek je stránka tenisky, na které se vypisují všechny tenisky – jak dámské, pánské, dětské… A takových vstupních stránek máme více… I toto vedlo k zásadnímu zlepšení relevance odpovědí vyhledávačům, ale o tom až někdy jindy…

A jak to SEO dopadlo?

Ve výsledku velmi dobře. Za prvních 14 dnů po spuštění jsme na návštěvnosti udělali krát 3,8 nebo chcete-li, zvýšila se nám návštěvnost na 380 % té původní. Podívejte se sami na graf z Google analytics.

Screen z Google analytics - výsledky SEO

Screen z Google analytics – výsledky SEO

Osobně jsem nečekal tak silný výsledek pouhým doladěním nadpisů, URL a odkazovou provázaností webu, ale za překvapení jsem rád. Očekával jsem zvýšení návštěvnosti reálně někde mezi +30-50 %, ve vysněných hodnotách někde kolem +100%.

Více se k SEO asi rozepisovat nebudu, mnohem zajímavější bude další část, ve které jsme řešili redesign celého webu.

A co jsme provedli s tím re-designem, který kladl zejména důrazu na UX?

Nejprve je nutno říci, co je to „UX“. Nebude to přímo poučka, ale lze říci, že

UX design (User experience design) je design, který vychází ze základního porozumění koncových uživatelů, tedy v našem případě zákazníků eshopu s módní obuví. Je vždy zaměřen na jejich potřeby a cíle. Je navržen tak, aby uživatel vždy došel svého (i našeho) cíle, tedy zpravidla nákupu a zároveň aby z tohoto cíle měl kvalitní, silný a vždy jen pozitivní prožitek. Zároveň UX design webu odstraňuje všechny překážky, které mohou běžné e-shopy uživateli v nákupu klást.

Toto jsme měli při celé tvorbě na paměti a věřím, že se naše snaha usilovnou prací přenesla i do výsledné realizace, kterou můžete níže posoudit sami.

Na e-shopu jsme více méně graficky přepracovali snad skoro všechno – od úvodní stránky, přes výpisy produktů, náhledy produktů, menu až třeba po detaily produktů nebo statické stránky. Vzali jsme to prostě z jedné vody na čisto a výsledek se mě osobně velmi líbí, nebo spíše líbil a nyní cca půl roku poté už vidím další „chyby“, na kterých opět pracujeme a navrhujeme již jejich efektivní odstranění. O tom ale zase až někdy příště.

Hlavní strana obchodu

Nejprve si podíváme na hlavní stránku eshopu, která zaznamenala snad úplně nejméně změn z celého webu. Zde máte pro srovnání původní a novou verzi.

Hlavní stránka - původní design

Hlavní stránka – původní design

Hlavní stránka - nový design

Hlavní stránka – nový design

Že na první pohled změny nevidíte? Zkuste se podívat pořádně. Primárně jsme nahoře nad stránkou změnili „upozornění“ na výhody z šedých barev na zelenou a vytáhli jsme je z šedého pruhu. Je to spíše detail, který se ovšem nese skrz celý web.

V další části, kterou byly TOP produkty, nejnovější produkty a výprodeje, jsme udělali poměrně zásadní změnu, která se na první pohled nemusí zdát – snížili jsme počet položek na řádku z pěti na čtyři, čímž se zvětšili fotky a design se stal celkově čistším a přehlednějším. Tímto tématem se budu více zabývat u samotných výpisů zboží.

V neposlední řadě jsme udělali textové změny (související spíše se SEO) v dolní části stránky, kde jsme SEO text zasadili do rolovatelného rámečku (nezabírá tolik místa) a vedle něj jsme dali novinky z eshopu.

Celkově se na stránce udělal ještě pár drobností, jako změny barev a podobné ladění, které nebudu popisovat.

Výpisy produktů

U výpisů zboží se změnili zásadněji tři věci – levé menu, filtry a výpisy položek.

Výpis produktů - původní verze

Výpis produktů – původní verze

Výpis produktů - nová verze

Výpis produktů – nová verze

Levé menu – původní graficky ne zrovna dobře zpracované menu se zcela změnilo a lépe provedlo. Nejen že nyní vypadá lépe, ale hlavně se mnohem lépe používá.

Filtry zboží – filtry zboží byly v původní verzi velmi roztahané a méně přehledné. Pokusili jsme se je přepracovat (aktuálně máme opět novou a snad opět lepší verzi v přípravě) a méně používané možnosti přesunout „pod tlačítko“ rozšířené filtry. Bohužel se to ve výsledku u zákazníků moc nesetkalo s pochopením, a proto tento krok zpětně hodnotím jako ne zcela šťastný. I proto je nově v přípravě opětovná změna filtrů.

Grafické znázornění podkategorií pod filtry – absolutní novinkou nového designu byly grafické ikony a tlačítka, která zobrazovala podkategorie dané kategorie, ve které se uživatel nachází. Nápad to byl zajímavý a ukázalo se, že tyto prvky uživatelé poměrně používají, ovšem s odstupem času již sám vidím, že grafické zpracování nebylo nejšťastnější – tlačítka jsou straně velká a při větším množství položek (jako na přiloženém obrázku) je výpis spíše zmatečný. V nové verzi designu, který jsem již několikrát zmínil, tento problém již řešíme.

Výpis zboží – stejně jako na úvodní stránce jsme snížili počet položek na řádku – zde ze 4 na 3. Došlo tím nejen ke zvětšení fotek, které mají za následek jednodušší orientaci při výběru, ale i k pročištění designu.

Vodorovné menu

Vodorovné menu je jedna z věcí, o které si myslím, že se nám hodně povedla, tedy alespoň proti původní verzi.

Vodorovné menu - původní verze

Vodorovné menu – původní verze

Vodorovné menu - nová verze

Vodorovné menu – nová verze

Mezitím co původní menu bylo hodně šedé, až fádní, tak to nové je krásně čisté, grafické a přehledné. Prostě radost si kliknout 🙂

Přidali jsme k položkám ikony jednotlivých druhů bot, to proto, aby se zákazníci lépe orientovali i bez čtení. Dále jsme oddělili druhy bot a boty podle ročního období. Ty jsme dali do samostatného pravého sloupce.

Dále jsme přidali spodní řádku, ve které se zobrazují loga nejoblíbenějších značek. Zde na screenu jsme ještě neměli dotažený jejich počet, ale na webu již máme opět doladěné. Proklikem z loga se zákazník dostane například do dámských bot značky Tamaris, namísto toho, aby se do kategorie a značky proklikával na několikrát.

Náhled produktu ve výpisu zboží

Ve všech výpisech zboží, v souvisejících produktech a na dalších místech webu, nám při najetí myší na produkt vyskočí okénko, ve kterém je vidět detail produktu – konkrétně další fotografie a velikosti, které jsou k dispozici.

Náhled produktu - původní verze

Náhled produktu – původní verze

Náhled produktu - nová verze

Náhled produktu – nová verze

I v tomto směru jsme udělali velkou změnu. Hlavním krokem bylo zvětšení hlavní fotky, která je v nové verzi mnohem lépe vidět. Druhým poměrně zásadním krokem byla změna zobrazení velikostí k dispozici – mezitím co dříve jsme používali barvičky – zelená, modrá, červená…, tak nyní máme nedostupné velikosti jen přeškrtnuté a barvičky jsme zcela vypustili… Díky jejich vypuštění není na náhledu rušivý barevný produkt a vše je opět mnohem čistší.

V neposlední řadě jsme přidali ikonu dopravy zdarma u obuvi nad 1 000 Kč a ikonu 360° pohledu, tedy ikony, která říká, že v detailu zboží je náhled 360° k dispozici.

Detail produktu

Asi úplně nejzásadnější změnou byla úprava detailu produktu, která nás k celému redesignu přivedla. Všimněte si opět, že původní design používá zbytečně moc barev a to ať už v signalizaci, které velikosti jsou k dispozici, tak i v úplně pravém sloupci, kde je výrazně červeně podbarvena sleva a pod ní červené tlačítko „Vložit do košíku“, které někteří zákazníci pracně hledali. Stejně tak jsme se setkávali s tím, že lidé pravý sloupec zcela ignorovali, protože blok šedě ohraničený s cenou považovali za reklamu. Stávalo se nám, že občas i někdo zavolal, že tam nemáme ceny… Samozřejmě na webu byly, ale v pravém sloupci, kde je uživatelé přehlíželi…

Detail produktu - původní verze

Detail produktu – původní verze

Detail produktu - nová verze

Detail produktu – nová verze

Samotný redesign stránky detailu produktu má mnoho prvků, které se měnily a jejich popis do detailu by byl asi na samotný dlouhý článek. Popíši tedy jen to nejzásadnější.

V hodní části detailu jsme změnili strukturu z 3 sloupců na dva. V prvním je stále fotka, která se ovšem o mnoho zvětšila a je tedy mnohem viditelnější. Pod fotkou jsme snížili počet miniatur pouze na jednu řádku, která je posunovatelná. Dále jsme k fotce posunuli z pravého sloupce sdílecí tlačítko sociálních sítí.

V druhém sloupci jsme sloučili dva zbylé sloupce a barevně jsme je vyčistili. Je zde tedy velikostní dostupnost, cena a viditelné tlačítko na vložení do košíku.

V druhé části stránky zachováváme dva sloupce – první se věnuje detailu produktu, druhý pak zobrazování načtených recenzí spokojených zákazníků + informace o důvěryhodnosti obchodu, která je pro zákazníky rozhodující se nakoupit velmi důležitá.

Nákupní košík

V neposlední řadě jsem zkusil i takový drobný experiment, který se razí dost v zahraničí a většina obchodů jej chválí. Tím experimentem je úprava nákupního košíku, kdy se z něj odstraní všechny prvky, které mohou uživatele rozptylovat od dokončení nákupu… Tedy pryč se dává menu se zbožím, rozptylující bannery apod.

To jsme vyzkoušeli nasadit společně s redesignem (obrázky bohužel zde nepřidám, nemám screen původní verze) a výsledek byl velmi překvapující. Mezitím co jsme předpokládali, že se průchodnost košíku zvedne o několik procent, tak naopak průchodnost (procento dokončených nákupů) košíku o cca 4 % klesla. Neumím si to zcela vysvětlit, ale budeme při chvílích košík také ještě trochu vyhodnocovat a ladit. Aktuálně to však není priorita.

Pokud tedy plánujete takto předělat košík, tak za nás nemohu dát kladné doporučení, protože u nás se to i přes snahu prostě a jednoduše nepovedlo. Pokud se do budoucna povede, určitě zde o tom napíšu.

A jaký byl výsledek nového designu s důrazem na UX?

Jak už jsem napsal u košíku, tak průchodnost se nezvýšila. To byl ovšem takový drobný experiment, o kterém nikdo vlastně ani nevěděl, co přinese. Naopak u redesignu se čekalo, že by mohl vzrůst konverzní poměr obchodu až o několik desítek procent, proti původní hodnotě…

Očekávání bylo velké, ale v konverzním poměru se po redesignu více méně nic nepohnulo a zůstal stejný. To mi vůbec nedávalo smysl a nějaký čas jsem se trápil, proč to vlastně nefunguje. Po pár týdnech, kdy jsem se do webové analytiky při chvíli času ponořil více, jsem zjistil, že ono to tak špatné není.

Jak jsem napsal na začátku – změny designu jsme spouštěli 1.9.2013 a současně s redesignem jsme spouštěli i SEO úpravy. Ty se nám nad míru povedly a díky tomu, že je vyhledávače velmi rychle pochopili, tak jsme udělali skoro 4x větší návštěvnost. Značná část (cca 30 %) z této návštěvnosti se k nám začala dostávat z nových velmi obecných frází, např. „boty“.

Jak je všeobecně známo, obecné fráze mají velmi malou konverzi a tak shodou okolností díky vysokému souběžnému nárůstu návštěvnosti z obecných frází s nízkou konverzí, se zvýšení konverzí ze „shodné návštěvnosti“ před změnami proložilo právě nízkými konverzemi z obecných frází a vzhledem k tomu, že konverzní poměr je pořád jen POMĚR a ne absolutní číslo, tak zůstal konverzní poměr více méně bez změny.

Při hlubším studování metrik a větším omezení frází jsem došel k závěru, že kdyby redesing nebyl spojen se SEO a následným prudkým růstem návštěvnosti, tak by se konverzní poměr zvýšil někde v rozmezí 30-40 %. Takhle to nevypadá tak sexy, ale pozor! Eshopu se společně se zvýšením návštěvnosti krát 4 (při stejném konverzním poměru) zvýšil také počet objednávek krát 4. Bez designových změn by to při stejném zvýšení návštěvnosti mohlo být „jen“ cca 2,8 až 3x více objednávek.

Celkově SEO i redesign přinesli souhrnně velmi zajímavý efekt a velké navýšení objemů a to i přes to, že letošní zima byla velmi kritická (je polovina ledna a ještě nenapadl sníh, což dopadlo na veškeré prodejce obuvi). Díky změnám a úpravám obchodu jsme měli i v této pro běžné obchodníky velmi kritické zimní sezóně velmi vysoký meziroční růst a obchodu se daří stále lépe a lépe…

A co na redesign říkáte vy? Líbí se vám? Inspiroval vás k nějakým změnám? Napište to do komentářů…

A nebo pokud chcete pomoci s podobnými změnami a úpravami na svém e-shopu, kontaktujte mě a změny navrhneme…

Grafiku kreslila Swenia Toupalik.

Tato studie je z ledna 2014. Od té doby jsme postoupili dále v a srpnu 2016 jsem napsal další studii mapující další postup. Najdeš ji zde: https://www.eshopkonzultant.cz/blog/pripadova-studie-prevod-svetbot-cz-na-responzivni-design/

WordPress › Chyba