Případová studie: Převod SvětBot.cz na responzivní design

Před více než dvěma a půl lety jsem publikoval případovou studii, jak jsme upravili designově a po stránce SEO náš obchod SvětBot.cz a co to přineslo (celý článek zde). Od té doby ale uplynulo mnoho času, prodali jsme mnoho desítek tisíc párů bot a e-shop pokročil zase o velký kus dopředu. I proto jsme začali před cca 2 lety připravovat převod stávajícího designu na responzivní. Nijak jsme nepospíchali, protože naše cílová skupina není primárně na mobilech, jako třeba teenageři, ale i tak bylo na čase postoupit a následovat trendy. Jak vypadá návštěvnost z jednotlivých zařízení Dlouhodobě se mluví o tom, že mobilní návštěvnost roste a dále poroste. V zahraničí se ukazují studie, kde dnes již 50 % a více nákupů je z mobilů. U nás na SvětBot.cz to zas tak extra vidět není, ale i tak je trend přibývajících mobilů a tabletů vidět. Pojďme se podívat na data. Vytáhl jsem procentuální zastoupení návštěv a tržeb za roky 2012, 2013, 2014, 2015 a prvních 7 měsíců 2016. Návštěvnost e-shopu rok vs. typ zařízení Mezitím, co jsme měli v roce 2012 více než 97 % přístupů ze stolních počítačů, postupem času se tato návštěvnost v poměru k ostatní snižuje až na aktuálních 74,27 % za prvních 7 měsíců roku 2016. Je tam vidět značný trend. Mobily za ty necelé 4 roky narostly z 1,5 % na 15,93 %, což je enormní. Obdobně jsou na tom tablety, které vzrostly z 1,16 % na 9,8 %. Ostatně podrobněji je to vidět v následující tabulce. Desktop Mobil Tablet 2012 97,34% 1,50% 1,16% 2013 92,67% 4,02% 3,31% 2014 85,43% 8,75% 5,82% 2015 78,73% 13,15% 8,12% do 7/2016 74,27% 15,93% 9,80% A máme-li data znázornit graficky, tak zde je graf. Tržby e-shopu rok vs. typ zařízení A jak to vypadá s tržbami? Následovně V roce 2012 jsme měli ze stolních počítačů 96,68 % tržeb a letos to bylo 87,46 %. Nárůst je vidět ale u mobilů, kde z 2,01 % narostl na 6,09 %, a tabletů, kde vzrostl poměr z 1,31 % na 6,45 %. Zde je opět tabulka tržeb v % zastoupení. Desktop Mobil Tablet 2012 96,68% 1,31% 2,01% 2013 94,64% 1,86% 3,50% 2014 89,03% 4,93% 6,04% 2015 88,42% 4,91% 6,66% do 7/2016 87,46% 6,45% 6,09% A opět pro lepší názornost i graf. Jak vypadá trend Jak už si ti pozornější z vás určitě všimli, tak poměr nárůstu návštěvnosti je mnohem vyšší, než nárůst poměru tržeb. Znamená to tedy, že lidé z mobilních zařízení na web chodí, ale nenakupují z nich tolik. Jsou tu dvě příčiny, kterými by se to dalo vysvětlit. Web nebyl doposud přizpůsoben mobilním zařízením a proto se na něm nedalo z těchto zařízení moc dobře nakupovat. Lidé na mobilních zařízení většinou jen koukají a nakupují následně na stolních počítačích. Podle mě se zde promítly obě příčiny. Nicméně pokud se podívám na data od 27.6. 2016 až 10.8.2016 (den po nasazení redesignu až den psaní článku), je zde vidět malinký posun k lepšímu, viz. následující tabulka. Desktop Mobil Tablet Návštěvy 71,38% 17,03% 11,58% Tržby 85,42% 7,12% 7,46% Je zde vyšší procento tržeb z mobilů i tabletů, ale ne o moc. Projevuje se tedy trend, že i přes optimalizaci lidé na mobilních zařízeních tolik nenakupují. Nicméně nutno říci, že tato data jsou statisticky ne zcela průkazná je to velmi krátký čas, malý vzorek uživatelů a větší vyhodnocení bude schopen udělat po nějakém delším čase. Tedy nedělat ukvapené závěry. Poměr návštěv a nákupů u jednotlivých mobilních zařízení Málokdo zveřejňuje data o tom, jaký byl poměr mobilních zařízení a jejich tržeb. Jen se obecně povídá, že lidé s iPhony a iPady, tedy majitelé značky Apple, nakupují více a jsou zajímavějšími zákazníky. To se potvrdilo i u nás, kdy sice nejsou nejčastějšími návštěvníky našeho webu, ale i přes to mají nejvyšší obrat. Celková hodnota na jednu návštěvu je tedy bezkonkurenčně nejlepší. Ukázka je v následující tabulce, které ukazuje 10 nejčastějších značek zařízení, které na web přišly. Poměr návštěv Poměr tržeb Samsung 26,50 % 21,50 % Apple 23,96 % 38,13 % (not set) 9,74 % 8,65 % Lenovo 8,04 % 6,70 % Sony 4,71 % 4,26 % Huawei 3,12 % 0,99 % Acer 2,85 % 3,00 % Asus 2,72 % 1,32 % HTC 2,48 % 1,52 % LG 2,45 % 0,99 % Z čísel vyplývá, že hodnota nákupu na návštěvu u zařízení značky Apple je o 59 % vyšší, než je průměr z mobilních zařízení. Naopak u zařízení LG je o 60 % nižší, než je průměr. Nechme ale počty a statistiky a pojďme se podívat na slibovaný redesign. Co jsme tedy na webu měnili a upravovali Jak už jsem napsal výše, celý proces neměl za cíl dělat nějaké zásadní změny, ale pouze přepsat stávající design do responzivní verze, tedy takové verze, která se přizpůsobí tabletům a mobilům. Práce začaly cca 2 roky zpět, kdy se začalo s návrhy wire-framů a jejich osazení grafikou. Vzala se aktuální grafika a dodělávaly se k ní responzivní verze. Po jejich osazení grafikou šly návrhy kodérovi, který postupně volným tempem kódoval a měnil. Nutno říci, že kdyby měl kódovat šablony na zelené louce, tak by to bylo poměrně jednoduché. Naším zadáním ale bylo, aby upravoval aktuální verzi, respektive její clon, a vše nasazoval rovnou na vývojovou verzi webu, kde se bude moci vše rovnou kontrolovat. Práce šly relativně pomalu, právě díky tomu, že se kodér musel prokousávat složitě aktuálním kódem, který není zrovna optimální. I proto se nám původní termín spuštění na konci roku 2015 postupně posouval. Nejprve na leden až únor, pak definitivně duben. Když jsem ale na hotový design nastoupil na testování a kontroly, našel jsem v něm za 6-7 týdnů, co jsem web průběžně testoval, přes 700 drobností a funkčních nedodělků. Je to zejména proto, že jsem detailista a přesně vím, co by jak mělo fungovat. A tak jsme zhruba 7-8 týdnů upravovali. Nakonec jsme se rozhodli nasadit redesign 26.6.2016 v noci. K nasazení došlo sice o skoro půl roku později, než byl plánovaný termín, ale já byl spokojen. Design byl otestovaný na mnoha zařízeních skrz na skrz a i proto jsem se rozhodl ho spustit pouhé 3 dny před odjezdem na dovolenou. Trochu kaskaderský kousek, ale vyšlo to Červenec je u nás navíc první 2-3 týdny zcela mrtvý a objednávky padají na cca 10-20% běžného normálu. I proto byl dobrý čas, kdyby se problém náhodou i tak objevil, ho řešit. Nakonec se žádný průšvih nekonal, vše nám funguje jak má. Pouze jedna agentura spravující web konkurenci, která se k nám přišla inspirovat, mě upozornila na 4 nefungující odkazy. Za to jim díky. Ale je vidět, že u nás inspirace je. Drobné změny a zapracování předchozího testování Je známé, že na webu neustále něco testuji. A nejen u sebe, ale i u klientů. O tom, co kdy a kde zjistím, pak píši tady na blogu případové studie. I v případě SvětBot.cz pravidelně a prakticky non-stop něco testuji. [wysija_form id=3] Testů je mnoho a aby se nezkreslovaly, musí běžet samostatně. Za dobu 2 let, než se design dotáhl k nasazení, jsem našel několik nových variant, které jsem do redesignu hned zapracoval a spustily se najednou. Postupně je v této studii také představím a to včetně výsledků, které jsem v A/B testování naměřil. Home page a patička S hlavní stránkou webu jsme prakticky nic nedělali, s výjimkou responzivity. Jak už jsem říkal při mnoha mých vystoupeních na konferencích, nedokáži home page více vyladit a protože mi nedělá aktuálně vrásky na čele, nechci na jejím testování ztrácet čas. Zkoušel jsem v minulosti několik variant a všechny měly mnohem horší výkon, než varianta, která je na webu nyní. Jediné co by se dalo považovat za změnu home page, tak dolní blok s novinkami, logy a seo text, který jsem dlouho sliboval, že zmizí, byl nahrazen štítky z vyhledávání. Stejně tak byla přeformátovaná patička a to na základě uživatelského testování s oční kamerou. Zjistil jsem z něj, že patička je až moc obsáhlá a některé bloky neplní svůj účel, jak jsme si ve firmě mylně mysleli. Na rozdílné návrhy patiček se můžete podívat zde: Nová patička 2. Stará patička A když jsme u toho porovnávání, můžete se podívat na původní a novou hlavní stránku. Hlavní stránka nová Hlavní stránka původní Výpis produktů Mezitím co jsme na home page moc změn nedělali, tak ve výpisu produktů to bylo už o něco zajímavější. Jak už jsem psal výše, za provozu běžně testují varianty a s redesignem jsem jejich větší balík nasazoval. Porovnání původního a nového designu je možno vidět zde: Nový design výpisu produktů Původní design výpisu produktů Na první pohled nejsou změny zcela znatelné a tak se na ně pojďme podívat jednotlivě. Nejprodávanější zboží První změnou na výpisu produktů bylo odstranění bloku Nejprodávanější v této kategorii. Ač mnoho lidí z branže automaticky tvrdí, že tenhle blok funguje, není to zase takové dogma. Například v módě nefunguje tento blok skoro vůbec. Naopak v elektronice funguje dobře. Zkoumal jsem to a měřil v průběhu cca 7 měsíců na několika e-shopech s různým zbožím a výsledkem bylo (dalo by se obecně takto shrnout), že u zboží, kde vše vypadá stejně a rozhodují např. jen technické parametry a ne vzhled, tak blok nejprodávanější funguje velmi dobře. Naopak tam, kde jde o unikátnost, vkus a originalitu, tak nefunguje vůbec. Příkladem kdy funguje je elektronika. Představte si, že si jdete vybrat TV a mimo toho, že chcete FullHD (protože to má i soused) a nějakou její velikost, popř. značku, už asi moc nevíte, co budete chtít. Začnete se prohrabávat nabídkou a během chvíle se v tom beznadějně ztratíte a přijdou vám všechny televize stejné. Aby ne A tady výborně funguje blok s nejprodávanějším zbožím. Proč? Protože vlastně nevíte úplně, co si vybrat a když máte nejprodávanější, tak je to něco jako doporučení. Když je ta televize nejprodávanější, tak přece asi bude dobrá, když ji kupuje tolik lidí A koupíte ji taky. Zhruba takto se dá vysvětlit, proč v těchto segmentech blok nejprodávanějších dobře funguje a zvyšuje konverze. Naopak u módy, tedy i u nás, je to hlavně o tom, že se bota (nebo všeobecně produkt) musí zákazníkovi líbit. Nepůjdete si koupit boty, které sice kupuje hodně lidí, ale vám se nelíbí. Pak je nebudete nosit. A přesně takto se dá tedy vysvětlit, proč u tohoto segmentu blok nejprodávanější nefunguje. Než tedy začnete nejprodávanější zboží zobrazovat na e-shopu, nevěřte všem UX mistrům světa, kteří hlásají, že to k něčemu je a zamyslete se nad svým sortimentem, jak se prodává, jak nad ním lidé přemýšlejí a až podle toho svůj shop dělejte. A nebo si to zkuste změřit. Abych nepsal jen obecně, přidávám i několik výsledků testů bloku nejprodávanější zboží v kategorii a verze bez něj Proklik do detailu produktu Proklik do podkategorie Nákupy Tržby Původní varianta Nová varianta -0,13 % +4,21 % +2,69 % +3,40 % Statistická přesnost testu > 99 % > 99 % 98 % 98 % Vyhodnocení a komentář k výsledkům: U testu jsme sledovali 4 cíle, které jsme si stanovili. První dva se týkají pohybu uživatelů po stránce. Zajímaly nás prokliky do detailu produktu, jak moc budou ovlivněny. Dále pak, kolik uživatelů se proklikne do další podkategorie, což je pro nás žádoucí. Z minulých testů víme, že ti, co se zanořují do podkategorií a používají filtry, tak u nás více nakupují (lépe konvertují) a proto je žádoucí zákazníka dostat na co nejspecifičtější výpis zboží, který odpovídá jeho požadavkům. Druhou skupinou cílů, které jsme měřili, byli čistě obchodní věci tedy počet nákupů a celkové hodnoty tržeb. U obou skupin cílů je v tabulce vidět statistická přesnost jednotlivých testů. U prokliku do detailu produktu se nám proklik snížil o 0,13 % při statistické přesnosti větší než 99 %. Lze tedy říci, že varianta je v pohledu prokliku do detailu produktu nulová a nemá prakticky vliv na proklik. Mnohem lépe pak vyšel proklik do podkategorie. (Pozn. To jsou ta tlačítka s ikonami původně pod blokem nejprodávanějších produktů) Ten zaznamenal nárůst o 4,21 % se statistickou přesností vyšší než 99 %. To je pro nás velmi příjemný fakt rozcestník v těle stránky byl více vnímán a lépe fungoval. Při uživatelském testování s oční kamerou se navíc ukázalo, že u původní varianty padl nejprve zrak na nejprodávanější a pak začali lidé scrollovat. Málokdy tak zaznamenali, že na webu rozcestník vůbec je. U varianty bez nejprodávanějších produktů pak padl zrak nejprve na podkategorie a až pak uživatelé začali scrollovat. I tak se dá vysvětlit, že prokliky do podkategorií vzrostly. Pokud se podíváme na druhou skupinu cílů, která zajímá každého majitele e-shopu nejvíce, tak počet nákupů u varianty bez nejprodávanějších produktů narostl o 2,69 % při 98 % statistické přesnosti. Tržby u této varianty vzrostly o + 3,4 % proti variantě s nejprodávanějšími produkty a to při 98 % statistické přesnosti. Celkově na SvětBot.cz přineslo odstranění prvku nejprodávanější v kategorii zajímavý obchodní přínos. Dále pak kdybych měl zmínit zajímavosti z testování, tak při uživatelském testování webu s uživatelkou (testování i s oční kamerou) si paní po načtení stránky myslela, že ty 4 boty co vidí v bloku nejprodávanější je celá nabídka z dané kategorie. Bylo to způsobeno tím, že nescrollovala dále a další výpis zboží nebyl na načtené části obrazovky vidět (byl pod scrollovatelnou částí stránky). I proto jsme se snažili horní část stránky zkrátit natolik, aby zboží bylo vidět při načtení stránky bez nutnosti scrollování níže. Zde ještě ukázka nového a starého designu s blokem a bez něj. Blok nejprodávanější původní verze Blok nejprodávanější nová verze Upozornění na filtry pokus o větší používání filtrace na webu uživateli Další částí, kterou jsme na výpisech produktů vyměnili, respektive doplnili, tak bylo upozornění na filtraci. Jako každý e-shop bojujeme s tím, že lidí nepoužívají filtraci, ač třeba vědí, co chtějí. Zároveň máme změřeno, že ti, co použijí filtraci (velikost, barva, značka, cena, apod.) pak nakupují asi o 13 % více. A i to je pro nás důvod, proč chceme, aby lidé filtrovali obuv. Přinese nám to více nákupů, peněz a hlavně spokojených zákazníků, kteří najdou vždy to, co hledají. I proto jsem před redesignem spustil další A/B test. Spočíval v tom, že nad blok filtrů v těle stránky jsme přidali pruh, který jsme doplnili textem. Když jsme přemýšleli, jak to celé pojmout, zvolili jsme modrou barvu. Důvodem bylo, že modrá není na našem webu prakticky vůbec zastoupena a přirozeně vystupuje ze stránky. Dále jsme použili úvahy, že sice je hezké něco napsat, ale když to podpoříme šipkami, bude jasnější, k čemu se to vztahuje a bude to mít větší efekt. Všimněte si tedy, že šipky najdeme jak v modrém pruhu po obou stranách, tak i z obdélníku uprostřed dole vykukuje jakoby šipka ukazující na blok s filtrací. Zde jsou 3 nové varianty, které jsme na webu k originálu (bez pruhu) použili: Nová varianta č. 1 Nová varianta č. 2 Nová varianta č. 3 A výsledky vypadaly následovně Nejprve je nutno říci, že jsme měřili celkem 2 cíle. První bylo použití filtrů. Druhým cílem, který se měřil více méně kontrolně, byly nákupy. Třetím, více méně nedůležitým (a kontrolním) cílem bylo, o kolik se liší proklik do detailu produktu z výpisu s filtrací a bez ní. U tohoto cíle se ukázal prakticky nulový efekt tedy že prokliky byly při všech variantách prakticky totožné a cíl se v žádné variantě nesnížil. Použití filtrace Nákupy Původní varianta Varianta č.1 +12,8 % +0,90 % Varianta č.2 +9,1 % +1,20 % Varianta č.3 +12,10 % +6,30 % Statistická přesnost > 99 % 98 % Vyhodnocení a komentář k výsledkům: Potvrdil se předpoklad, že pokud na filtry vhodně upozorníme, uživatelé si jich více všimnou a budou je používat. To se potvrdilo nejen A/B testem, ale i při testování s oční kamerou na živo s uživatelkami. Nejlépe nám čísly vyšla varianta č. 3, kterou nyní na webu používáme. Tedy spíše takto. Použití filtrace vzrostlo u varianty č. 1 o 12,8 %, u var. č. 2 o 9,1 % a u varianty č. 3 o 12,1%. Je tedy zřejmé, že u varianty č. 1 se filtry používaly o 0,7 % více, nicméně použití filtrace nebyl jediný měřený cíl. Druhým cílem byly nákupy, které u varianty č. 1 propadly s navýšením jen o 0,9 %. Naopak u vítězné varianty byl nárůst nákupů o 6,3 %. Tím se varianta č. 3 stala pro mě z obchodního hlediska tou nejlepší i přes to, že filtr paradoxně použije méně uživatelů, než u varianty č. 1. Změna řazení produktů Při redesignu jsem dělal i změny, které jsem neměl A/B testem předem ověřeny. Testoval jsem je opět pouze při testech s uživateli a s oční kamerou. Tam se ukazovalo, že předpoklad lepší funkčnosti uživatelé chápou a nebude na škodu takovou změnu nasadit. Zde je původní a nová varianta změny řazení produktů: Řazení produktů původní varianta Řazení produktů nová varianta Rozdíl mezi variantami je následující původní varianta byla řešena dvěma kombinovatelnými poli s výběrem (se seznamem). To bylo nepraktické a málo použitelné. Naopak nová varianta ponechala méně kombinací (dle statistik ty nejvíce používané) a udělala je jako 5 záložek, které se jednoduše překlikávají. Dále pak nahoře nad výpisem vpravo zmizelo stránkování, které se nyní nachází jen dole. O tom ale až za chvíli v této studii. Vyhodnocení a komentář k výsledkům: Sice jsem psal, že nemám tuto změnu ověřenu A/B testem, nicméně nějaká čísla k tomuto již mám. Po cca 7 týdnech od nasazení ukazují Google Analytics, že změnu výpisu zboží používají uživatelé o cca 32 % více, než tu původní. To považuji za slušné splnění cíle. Stránkování produktů Poslední větší a viditelnější změnou výpisu zboží byla úprava stránkování zboží. Jednak jsme stránkování kompletně udělali dynamické, takže se vše načítá AJAXově a nereloaduje se stránka. Zároveň je ale zachováno, aby se každá provedená změna ve výpise projevila bez reloadu i v URL stránky v prohlížeči. To z důvodu, že chcete-li jako uživatel někomu poslat to, na co koukáte, a není to propsané v URL, tak ten někdo si načte něco úplně jiného A to je bohužel problém velkého množství e-shopů. Zde je původní a nová verze stránkování: Stránkování původní verze Stránkování nová verze Na první pohled se moc neliší, pouze přibylo zelené tlačítko Načíst dalších 30 produktů. Tak jednoduché to ale není. Chtěl jsem zachovat původní stránkování, kdy část lidí používá na jeden klik zobrazit vše apod. Stejně tak klasické stránkování. To moderní na nakliknutí další produkty neumí část starší populace (což je naše cílovka) používat a dále pak není uživatelům jasné, kolik zboží za tlačítkem ještě může být. Stránkování jim to ale poví. Musím říci, že dynamické načítání vypadá na první pohled úplně jednoduše, ale zdání klame. Dostáváme se totiž do funkčně velmi složité logiky např. jak se má chovat tlačítko, když máte výpis po 60 položkách na stránku a jste na stránce č. 2? Na tomto jsme se zasekli na asi 2 týdny a řešili jsme ošetření všech možných variant, které mohou nastat. Nakonec myslím, že ač to bylo drahé, tak jsme je vyřešili. Nebudu zde všechny varianty a jejich logiku vypisovat, to vydá na samostatný článek nebo přednášku na konferenci. Takže se určitě někdy dočkáte buďto na živo, nebo zde jako článek. Nicméně po zmáčknutí tlačítka se načtou další produkty a vše se propíše do URL. Stejně tak upozorním na to, že se produkty záměrně nenačítají automaticky, jako je tomu jinde na e-shopech. Je to totiž nežádoucí. Pod výpisem je další obsah, patička atd. A automatickým načítáním produktů se prakticky skoro nikdy nedostanete dolů pod načítání, tedy dokud nedojdete na konec výpisu. To hodně lidí naštve a to my na SvětBot.cz nechceme. Detail produktu Dalším typem stránky, kterou jsme upravovali, byl detail produktu. Zde opět vidíte původní a novou variantu. Detail produktu původní varianta Detail produktu nová varianta Opět se design obou variant moc neliší, ale přece jen. [wysija_form id=3] Změny u fotek První z patrných změn je u fotek. Jednak jsme odstranili (z důvodu pročištění designu) všechny nesmyslné rámečky, ale to co je hlavnější, tak jsme začali zobrazovat všechny miniatury dalších fotek. Proč? Na mnoha konferencích už jsem od teoretických UXkáků slyšel, že postačí zobrazit prvních pár fotek a k tomu šipky na zobrazení dalších. A když tomu budete věřit jako já, budete velmi chybovat. Toto tvrzení zcela vyvrátilo testování s uživateli našeho webu, kdy v průměru 30 % z nich nepochopilo, že je na webu více fotek a že si je mohou zobrazit. Dalších cca 10 % sice pochopilo, že fotky další jsou, ale nevěděli, jak si je zobrazit. To, že fotky nejsou za šipečkami pro mnoho lidí viditelné nám delší dobu ukazoval i zákaznický servis, kdy chodily dotazy na to, jak vypadá podešev apod. A to podešev máme u všech bot nafocenou. Jen je na 6. pozici a ve starém designu se ukazovaly jen první 4 fotky a ostatní byly schované za šipkou. Od nasazení nového designu jsme podobný dotaz zatím nezaznamenali, takže to velmi pravděpodobně funguje lépe, ale to ukáže až čas. Zde ještě detaily stránky fotek pro porovnání: Původní verze Nová verze Sdílecí tlačítka Další změnou bylo odstranění sdílecích tlačítek, které jsme opět podle best practice doporučení měli u fotky. I přes to, že je zboží hezky nafocené, fotky vlastní a originální, nikdo je nesdílel. A já se vlastně ani moc nedivím. Na e-shop přece nechodíme nic sdílet, ale nakupovat a nefunkčnost sdílecích tlačítek na takových místech se dlouhodobě prokazuje. Nevypadalo vůbec hezky, když skoro všude svítilo v bublince s počtem sdílení 0, tak jsem rozhodl o odstranění tlačítek a nikomu to asi nevadí. Navíc se zkrátilo načítání stránky, protože tlačítka mají zbytečně velkou odezvu a i přes asynchronní načítání brzdí web. Jsou tedy také pryč. Blok s informacemi o produktu V původní verzi jsme byli inspirováni shopy mimo obor, což nebylo dobré. Ty mají produktové číslo a další podobné nesmysly přímo u názvu, ceny a dalších Po zralé úvaze jsem se rozhodl, že u boty to není vůbec důležité a tyto nesmysly jsem odstranil pryč respektive je přesunul dolů pod popis produktu to aby informace pro vyhledávače a další na webu byla, byla nalezitelná, ale neotravovala zákazníky, které nezajímá (a je jich většina). Zde je náhled na původní a novou verzi: Produkt původní verze Produkt nová verze Z původní verze se v nové ztratily odkazy pod nadpisem, který před několika lety navrhnul jeden ze SEO konzultantů. Odkazy mají nějaký drobný smysl, ale ne pod nadpisem přesunuly jsme je tedy na konec popisku a efekt udělají vlastně stejný. Dále jsme z bloku s hlavními informacemi o produktu přesunuli na konec popisku produktu označení výrobce. Zákazníky nezajímá a když někdo hledá přes označení na vyhledávači, tak údaj na stránce máme a je dohledatelný. Tímto čištěním se blok značně pročistil a stal se přehlednějším pro uživatele. To opět potvrdily živé testy s uživateli u webu. Detail produktu chápu jako jednu z nejdůležitějších stránek pro prodej zboží. I proto jsem ji za poslední více než rok obětoval hodně času a testoval jsem. Několika testy, které dopadly více či méně dobře, jsem se postupně dopracoval k variantě, kterou jsem testoval jako finální proti původnímu designu. O výsledky tohoto A/B testu se s vámi podělím. A/B testy na detailu produktu Nejprve jsem testoval textaci tlačítek na webu. Mezi variantami bylo Vložit do košíku, Přidat do košíku a Koupit. Nejlépe mi vyšla varianta Vložit do košíku a proto na webu zůstala a používá ji dodnes. Samotnou případovou mini-studii o testování textů tlačítek si můžete přečíst zde na mém blogu na tomto odkazu: https://www.eshopkonzultant.cz/blog/pripadova-studie-testovani-textu-tlacitek-na-svetbot-cz/ Pojďme ale dále. Když jsem zjistil, jaký je u nás nejlepší text tlačítka, zkusil jsem, jaký bude mít vliv, že je nyní tlačítko vlevo. Říkal jsem si Co kdybych ho umístil na střed? Nebo doprava? Bude to mít vliv?. A nebylo nic jednoduššího, než to vyzkoušet. Při A/B testu mi vyšla nejlépe varianta tlačítku uprostřed daného sloupce, kdy přidání do košíku bylo asi o 1,2 % více a nákupů o 1,3 % více, než u originální varianty vlevo. Naopak zarovnání doprava mělo o cca 2 % horší výkon. I proto je v novém designu tlačítko zarovnané na střed. U dalšího testu jsem vyšel z předpokladu, že výhody, které chceme zákazníkům nabídnout, zvyšují nákupy a konverzní poměr. Rozhodl jsem se prezentaci takových výhod posunout co nejvíce k tlačítku, které je vede k cíli nákupu tedy k tlačítku Vložit do košíku. Před tlačítkem nebylo vhodné místo a proto se výhody prezentovaly pod tlačítkem. Nasadil jsem A/B test, kdy k původní originální variantě přibyla varianta 1 s velkými ikonami 3 vedle sebe a varianta 2 s malými ikonami 3 pod sebou. Zde je náhled: Detail produktu varianta 1 Detail produktu varianta 2 U A/B testu jsem měřil zejména 2 hlavní cíle přidání do košíku a následný nákup. Výsledky vypadaly takto: Vložení do košíku Nákupy Původní varianta Varianta č.1 5,40% 13,60% Varianta č.2 3,20% 2,80% Statistická přesnost > 99 % 98% Vyhodnocení a komentář k výsledkům: Jednoznačně se ukázalo, že velké ikony a text pod nimi je lepším řešením. Nákupy vzrostly u této varianty o 13,6 %, na rozdíl od varianty s malými ikonami pod sebou, kde vzrostly nákupy jen o 2,8 %. Obdobně tomu bylo i u sekundárního cíle vložení do košíku. U varianty velkých ikon byl nárůst o 5,4 % a u malých ikon 3,2 %. Jako výslednou variantu, kterou jsme zapracovali do webu, jsme zvolili tu s velkými ikonami. Prezentace poukazu na další nákup #8211; jedna z výhod, kterou uživatelům dáváme 14 dnů po jejich nákupu se vygeneruje (pokud není obuv vrácena) poukaz na další nákup a pošle se zákazníkovi. Tím se dobře získávají vracející se zákazníci, ale o tom až někdy jindy. Měřil jsem opět A/B testem, zda prezentace poukazu má vliv na nákupy. Dříve jsem tuto informaci přidal v domnění, že to vliv mít bude. A/B test ukázal, že nárůst nákupů je jen 0,28 % při statistické přesnosti > 99 %, tedy prakticky nic taková prezentace poukazu nepřináší. Ve spojení se stížnostmi ze zákaznického servisu jsem rozhodl, že poukaz prezentovat nebudeme a je tedy z webu odstraněn. Když jsem nakousl zákaznický servis, tak cca 2-3x do měsíce jsme zaznamenali dotaz kdy dostanu ten poukaz, čekám na něj, abych si koupila další boty. Lidé místo toho, aby si koupili dvoje boty najednou, tak nakoupili jedny a čekali na poukaz na druhé Tím se nám snižovala hodnota průměrného nákupu, což není žádoucí. Toto čekání má za následek, že část lidí už druhé boty ani nenakoupí. Dále pak si část lidí myslí, že jsme podvodníci, když poukaz hned nedostali. A pak je třetí skupina, kdy si koupí boty, čekajíc na poukaz s plánem, že až ho obdrží, objednají si boty další a ty původní zdarma (na naše náklady u nás standardní služba) vrátí a tím ušetří od 50 do 150 Kč, kolik se poukazy na nákupy dávají. Pro mě osobně zbytečně moc práce, ale chápu, že někteří zákazníci udělají pro nižší cenu skoro cokoliv. Zde je jasný příklad. Zbylé části detailu produktu, které se měnily, nestojí přímo za řeč a není možné je podložit nějakými zajímavými čísly, proto je v této studii rozebírat nebudeme. Vyprodaný produkt SvětBot.cz je obchod s módní obuví. Ta funguje tak, že většina modelů je pouze jeden rok a další se již nevyrábí. Jsou buďto nástupnické (podobné, ale ne stejné) modely, nebo není náhrada také žádná. Všechny produkty z předchozích let tak jsou vyprodané. Ve výpisech produktů se již nezobrazují, jakmile se vyprodají, ale přesto se stránka s produktem (daná URL) nezruší. Nebylo by to dobře, protože na ni mohou vést externí odkazy, sdílení na sociálních sítích a také takové URL znají vyhledávače, které je mají indexované. Z těchto důvodů zůstává stránka na SvětBot.cz funkční, ale nikde se na ní od vyprodání (s výjimkou vyhledávání u vyprodaných produktů) neodkazuje a nejde se na ni prokliknout. I přes fakt, že se na stránku nejde prokliknout, dostávají se na ni stále návštěvníci (vyhledávače, odkazy, sdílení atd.). Těm musíme říci, že je produkt vyprodán a to musí být na první pohled jasné. Když jsem tuto problematiku v minulosti řešil a neměl s ní zkušenosti, prošel jsem obchody, kde jsem nic rozumného nenašel. Až na Heureka.cz jsem narazil na sdělení, kde se říká, že produkt už v nabídce není a asi nebude. Vše tam mají v červeném obdélníku bílým písmem. Zdálo se mi to na první pohled jasné, zřetelné a tak jsem se inspiroval. Do detailu produktu, do místa, kde byla cena a tlačítko na nákup, jsem nechal u vyprodaných produktů vložit červený obdélník a do něj napsat Tento produkt již není v prodeji, je vyprodán nebo byl z nabídky vyřazen.. A měl jsem za to, že je problém vyřešen. Bohužel problém vyřešen nebyl. Velká část uživatelů si toho všimla, nicméně byla tu pořád skupina, která psala maily (nebo na on-line chat) či telefonovala a ptala se, zda se dají dané boty koupit. Při komunikaci s takovými uživateli jsem zjišťoval, že červený obdélník nevidí. Jednoduše ho chápou jako reklamní banner a zcela podvědomě ho ignorují. To mě děsilo a zkoušel jsem to pak i při testování s uživateli naživo s oční kamerou a skutečně 30 % testujících červený blok přehlíželo a snažilo se boty koupit. Zlé zjištění. Jak jsme problém vyřešili o něco níže. Zde je k dispozici screen, jak vypadal původní návrh s červeným obdélníkem a infem, že produkt již není a nebude. Dále je pod ním možnost si všimnout, že pokud byl nastaven tzv. nástupnický model (tj. model, který je podobný či stejný), tak se pod tímto červeným blokem zobrazoval. Jeho proklik byl však mizerný, ač se postup na nový produkt zdá jako jediný logický následující. Zbytek stránky produktu zůstal bez změny včetně popisku atd. Vyprodaný produkt původní Řešení vyprodaných produktů Navrhnout řešení také nebylo lehké, ač se to na první pohled nemusí zdát. Jako první varianta bylo, že prostě nápis a červený blok zvětším a všechno ostatní dám odtud pryč. Tím se to celé zpřehlední a bude to lepší. Daný návrh vypadal následovně: Žádný A/B test, který by se nasadil do praxe, nepřipadal v úvahu. Důvodem bylo, že na stránku s vyprodaným produktem se dostane relativně malé množství uživatelů a nedává smysl na takový produkt posílat traffic z PPC či jiné reklamy jen proto, abychom si ověřili, co se bude dít. Navíc by ani takto kampaní nakoupený traffic nebyl velmi pravděpodobně relevantní, protože na vyprodaný produkt se dostávají zpravidla lidé z longtailového vyhledávání či z odkazů z různých článků. Mají tedy zcela jiný postup, jak se na web dostanou a jak na něm fungují. Bez testu jsem to ale nechat nechtěl, a proto jsem přistoupil opět k testu s uživateli na přímo. Ukázalo se, že je toto zpracování o něco málo lepší, ale stále zcela nedostatečné. Nezbývalo nic jiného, než zahodit dosavadní řešení a podívat se na to celé znovu. Začal jsem přemýšlet, co má člověk za možnosti a co mu vlastně můžu nabídnout, když přijde na vyprodaný produkt. A napadly mě následující možnosti: Zákazníka pošlu na podobný (nebo stejný) produkt, který je jako nástupnický model (nejoptimálnější varianta) Nabídnu mu stejný druh boty navíc stejné značky (pokud něco konkrétního člověk hledal, tak stejná kategorie např. kozačky a stejná značka např. Rieker je podle mě ta nejlepší náhrada) Nabídnout boty stejné značky (netrefím-li se předchozími, tak minimálně značka v módě hodně rozhoduje a je relevantní nabídnout boty stejné značky) Nabídnout boty ze stejné kategorie různých značek (tedy když člověk není zaměřen na konkrétní značku, ale chce např. jen zimní boty) Dále pak nedává velký smysl, aby se u vyprodaného produktu zobrazovalo 8 fotek + 360° pohled, protože boty stejně nejdou koupit. Obdobně nedává velký smysl, aby se zobrazoval popisek boty není v tu chvíli k ničemu. V neposlední řadě není potřeba ani extra velká fotka postačí menší, jen aby bylo vidět, která bota to byla. Detaily v tu chvíli nerozhodují nejde koupit. A když jsem si tyto předpoklady spojil dohromady, navrhl jsem vše následovně: Detail vyprodaného produktu kompletní zobrazení V první řadě jsem značně zmenšil fotku asi na 40-50 % původní šířky, což je asi 30 % původní plochy. Volné místo jsem zaplnil červeným sdělením o vyprodanosti. To se při testování ukázalo jako dobrý počin, protože díky velikosti a umístění přes 2/3 stránky v horní části již nebyl tento obdélník považován za banner a byl uživateli lépe registrován. Dále je zobrazen obrovský blok s nástupnickým modelem. Ten je v těle stránky pouze tehdy, když je nástupnický model nadefinován a není vyprodán. Pokud není, blok se nezobrazí a zobrazují se další, které jsou nadefinované pod ním. Ale zpět k nástupnickému modelu je v designu běžného detailu produktu fotky, náhled fotek, cena atd. Pouze velikosti chybí ty nechci nechat uživatele na stránce vyprodaného produktu vybírat. Nedává to na ní smysl. Na místo toho je tlačítko pro zobrazení nástupnického modelu a odvedení tak zákazníka na relevantní stránku. A pod tímto následuje výpis produktů příbuzných. A to podle klíče uvedeného výše nejprve boty stejné značky + kategorie, dále boty stejné značky a poslední boty stejné kategorie. Od každého až 8 druhů s možností zobrazení dalších. Podle testování s uživateli je tento detail vyprodaného produktu povedený a pochopitelný. Díky tomu na něm neplánuji dále pracovat problém byl vyřešen. Tedy až na jednu výjimku, kterou zpracovává programátor nyní na začátku tohoto bloku jsem psal, že nástupnický model je buďto podobný nebo zcela stejný. Ve chvíli, kdy je jen podobný, tak by se měl zobrazit detail tak, jak je navržen výše. Ve chvíli, kdy je model zcela stejný (někteří výrobci, ale málokteří, vyrábějí úspěšné modely několik let po sobě), tak mě osobně nedává smysl zobrazovat tento není, ale máme tu nástupnický. Je to pro mě zbytečný krok, proto pokud bude produkt zcela stejný, tak systém bude (již brzy) přesměrovávat na stejný nový produkt pomocí přesměrování 301, čímž se zákazník dostane vždy na botu, která je skladem a ne vyprodaná. Košík Košík je kapitola e-shopu sama pro sebe. Při redesignu jsme ho opět komplet přepsali do responzivu a pár drobností změnili. Ale nic zcela zásadního. I tak se podělím o změny a co přinesly. Na to, jak málo jsme udělali, to je docela finančně zajímavé 1. krok košíku Původní a nová verze se na první pohled moc neliší. Stále jsme zůstali u 4+1 krokového košíku bez menu a patičky aby uživatel nebyl moc rozptylován. Nový a starý design můžete porovnat, ale asi jediná na první pohled viditelná změna je velký telefonický kontakt v pravém horním rohu. To co není vidět, tak kompletní přepis logiky košíku a ajaxové aktualizace obsahu. Původní verze 1. kroku košíku Nová verze 1. kroku košíku 2. krok košíku O něco zajímavější je 2. krok košíku. Zde jsme udělali 2 zásadní změny. První byla, že u původní verze bylo pro uživatele neviditelné přepínání mezi zasláním do ČR, SR a osobními odběry. Mnoho SK zákazníků se nás ptalo, zda jim pošleme balíček i na Slovensko (a těch co se ani nezeptali, byla určitě taky hromada). Části stačilo říci, že v 2. kroku košíku si stačí nahoře přepnout na doručení na Slovensko. Některé jsme museli navést přímo, když volali po několikáté. Prostě problém s viditelností tohoto kroku (přepnutí na jiný stát) bylo značné. A proto jsme zvolili větší bloky a ikony republik + vlajek v nich. Dále pak pro osobní odběr ikonu, kterou ještě asi budeme měnit. Druhá změna, kterou jsme provedli, se může zdát zcela banální, ale měla svůj úspěch v průchodnosti tohoto kroku. Předvyplnili jsme dopravu a platbu na nejčastěji vybírané možnosti tj. na balík do ruky české pošty + dobírku. Čas strávený v průměru v tomto kroku díky tomu klesl na méně než polovinu, což je super! O pročištění designu není potřeba psát. Zde je screen původní a nové verze: Původní verze 2. krok košíku Nová verze 2. krok košíku Další kroky košíku V dalších krocích košíku jsme grafické ani funkční změny nedělali. Vše jsme pouze překódovali do responzivní verze. Vyhodnocení a komentář k výsledkům: Je sice teprve 7 týdnů po nasazení změn, ovšem při porovnávání dat průchodnosti košíkem to vypadá, že se průchodnost zlepšila o 2,31 % tj. máme o 2,31 % dokončených nákupů při stejné návštěvnosti navíc. A vynecháme-li první krok, který funguje pro mnoho lidí jako odkládací místo, tak je průchodnost lepší o 2,78 %. Data ještě bude chtít chvíli měřit, ale vypadá to velmi nadějně. Při obratu e-shopu jsou to reálně stovky tisíc ročně tržeb navíc. Jen tato změna zvládne zaplatit celý redesign do responzivu za cca 1 až 1,5 roku. Změny skrz celý web K redesignu jsem připojil i jednu změnu, kterou jsem již avizoval na svém blogu dříve. A to odstranění bloku Ověřeno zákazníky od Heureky. Po dlouhodobém měření se ukázalo, že nemá na konverze prakticky žádný kladný vliv a je na webu navíc. K tomu se mi vůbec nelíbí (hyzdí web) a ještě přes něj Heureka sbírala důvěrné informace. Prostě tohle na web nepatří a nikdy se tento blok na web nevrátí. Celou studii o Heureka bloku si můžete přečíst na mém blogu zde: https://www.eshopkonzultant.cz/blog/ma-smysl-blok-overeno-zakazniky-na-vasem-e-shopu-mytusnebopravda/ Závěrem k celému redesignu a studii Závěrem je potřeba říci, že to co popisuji v celé této studii, tak jsou práce, které probíhaly v uplynulých cca 2 až 2,5 letech. Vždy s pauzami na měření apod. Na realizaci se podílelo několik lidí já, grafička, kodér a programátor. Úpravy by nebylo velmi pravděpodobně možné realizovat, pokud by nebyl web stavěn přímo na míru. Nedokáži si představit, že takové zásadní změny zapracujeme na krabicové řešení, ale na druhou stranu si dokáži představit, že na krabicovém řešení také dokážeme zajímavé změny. Celou tuto studii berte prosím jako inspiraci pro své vlastní projekty. Jejím přímým kopírováním velmi pravděpodobně nedocílíte stejných výsledků. Je potřeba na to myslet. Pokud uvažujete, že byste chtěli i na svém e-shopu ladit konverze (tzn. ze stejné návštěvnosti udělat více nákupů), ozvěte se mi >> http://www.eshopkonzultant.cz/#contact << a uvidíme, co vymyslíme. Líbila-li se vám studie, nebo vám něco přinesla, sdílejte ji dále. Pomůžete tak i ostatním a mě dáte signál, že mám psát takové studie i nadále. Tuto studii povoluji dále využívat (citovat), ale pouze za podmínky, že na ni u citace bude jasně uvedený aktivní odkaz na tento zdroj. Tzn. že v případě výukové prezentace bude tento odkaz při projekci čitelný. Děkuji.

Web: Řízení projektů a nastavování procesů v e-commerce a on-line světě - Jan Kalianko | E-shop konzultan
Aktualizace: 23.5.2023

projít na článek

Případová studie: Převod SvětBot.cz na responzivní design

Případová studie: Jak pomáhá linkbuilding k novým zákazníkům z vyhledávačům

Případová studie nasazení pokladního systému Prodejna SQL

DMOTO jede díky SEO na plný plyn

Případová studie: Jak převést starý statický web na nové dynamické webové stránky bez ztráty návštěvnosti

Documents typing