C. STRÁNKA SEZNAMU PRODUKTŮ

Stránka seznamu produktů je katalogem e-shopu a vstupní branou k detailním informacím o vybraném produktu. Zobrazuje produkty zvolené kategorie z menu produktů, případně výsledky fulltextového vyhledávání, s možností prokliku na detailní informace. Jelikož zobrazených produktů může být velké množství, měl by mít návštěvník webu možnost dalšího filtrování podle vhodných parametrů pro danou kategorii produktů. Také mu může být nabídnuta možnost řazení produktů v seznamu podle různých priorit. Dále návštěvník webu již na této stránce očekává dostatek informací, podle kterých se rozhoduje o zobrazení detailu produktu. V tomto ohledu opět mohou mít návštěvníci různé požadavky, a tak může být na e-shop vložen nástroj pro úpravu podrobnosti zobrazených informací.

Vzhledem k uvedenému je tato kapitola rozdělena do 4 částí:

• seznam produktů,
• filtrování,
• řazení,
• zobrazení.

C.1 Seznam produktů

Seznam produktů musí být přehledný a pro návštěvníka webu zajímavý. Měl by obsahovat dostatečné informace, podle kterých se návštěvník může rozhodovat o zobrazení podrobností o vybraném produktu. Proto jsou důležitá jasně viditelná tlačítka s výzvou k akci. Neexistují jednotná pravidla pro vzhled a informace na stránce seznamu produktů, vždy záleží na konkrétních produktech e-shopu a cílové skupině zákazníků. Jiný vzhled a funkce zvolí velký e-shop s elektronikou v porovnání s e-shopem s nízkonákladovou módou, nábytkem nebo šperky. Je tedy nutné zvážit všechny možnosti a případně i přistoupit k testování, aby byla zvolena ta nejvhodnější varianta.

C.1.1 Vzhled stránky seznamu produktů

Čím atraktivnější a poutavější bude pro návštěvníka webu stránka seznamu produktů, tím spíše bude klikat na detail produktu a bude tedy pravděpodobnější, že dokončí nákupní proces. Pro zobrazení přehledu produktů by měl být optimálně využit celý dostupný prostor stránky. Základní zobrazení produktů může mít podobu:

• seznamu (tabulky) – případ, kdy jsou informace o jednom produktu uvedeny na jednom řádku (co produkt, to řádek), toto zobrazení většinou upřednostňují velkoobchody, jelikož se v něm přehledně zobrazují specifické parametry produktů (je vhodnější pro ty případy, kdy je třeba návštěvníkovi webu podat rozsáhlé informace),
• dlaždic – jde o mřížku (matici), ve které jsou zobrazené informace o produktech vedle sebe, na jeden řádek se umísťuje 3 – 5 produktů, toto zobrazení většinou upřednostňují maloobchody, je vhodné především pro takové produkty, které návštěvníka webu přesvědčují svým obrázkem,
• slideru – produkty jsou zobrazeny v jednom řádku, který návštěvník webu posouvá, používá se především pro mobilní zařízení.

Dále může být stránka seznamu produktů upravena podle podrobnosti zobrazených informací (možnosti úpravy zobrazených informací jsou popsány dále v kapitole C.4 Zobrazení).

Příklad – stránka seznamu produktů v podobě seznamu (tabulky) – nejzákladnější varianta
Zdroj: https://shop.vrabecavrabec.cz/katalog/zbozi/zbozi.asp?skup=101 (vid. 27. 7. 2022)

Příklad – stránka seznamu produktů v podobě seznamu (tabulky) – varianta s podrobnostmi o produktu
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 27. 7. 2022)

Příklad – stránka seznamu produktů v podobě dlaždic – nejzákladnější varianta
Zdroj: https://shop.vrabecavrabec.cz/katalog/zbozi/katalog.asp?skup=101 (vid. 27. 7. 2022)

Příklad – stránka seznamu produktů v podobě dlaždic – varianta s podrobnostmi o produktu
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 27. 7. 2022)

Příklad – stránka seznamu produktů v podobě slideru – nabídka novinek ve spodní části seznamu produktů (posouvání modrými šipkami)
Zdroj: https://www.alza.cz/notebooky/18842920.htm (vid. 27. 7. 2022)

Vedle základní nabídky zvolené kategorie produktů se na stránce seznamu produktů mohou objevovat i různé doplňující nabídky, které mohou návštěvníka webu oslovit. V první části stránky je důležité zobrazovat nejprodávanější produkty, protože ty nejpravděpodobněji přesvědčí i návštěvníka webu ke koupi. Následovat mohou např.:

• doporučované produkty,
• aktuální produkty a novinky,
• produkty ve slevě,
• akční nabídky – balíčky, 1 + 1 apod.,
• související produkty – příslušenství, doplňkové a navazující produkty,
• naposledy navštívené produkty
• apod.

Příklad – novinky pod základním seznamem produktů
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 27. 7. 2022)

Příklad – nabídka souvisejících kategorií produktů pod základním seznamem produktů
Zdroj: https://www.ikea.com/… (vid. 27. 7. 2022)

Stránka seznamu produktů by měla mít vlastní vhodný název, nejčastěji půjde o název zvolené kategorie produktů. K názvu může být připojen i stručný vysvětlující text. Pro upoutání pozornosti návštěvníka webu zde může mít umístěn i banner, který je vlastní reklamou e-shopu a upozorňuje např. na akční nabídky. Banner však musí být připraven tak, aby neodváděl pozornost návštěvníka webu od procházení nabídky produktů. Na banner může a nemusí být možné kliknout. Pokud na něj kliknout nelze, má e-shop jistotu, že se návštěvník webu nedostane na novou stránku a neztratí zájem o původně prohlížené produkty. Pokud na něj kliknout lze, měla by nová stránka obsahovat neodolatelnou nabídku se všemi potřebnými informacemi. Možnost kliknutí na banner by navíc měla být zcela zřejmá, např. díky tlačítku s výzvou k akci.

Příklad – název stránky seznamu produktů se stručným textem o kategorii produktů
Zdroj: https://www.ikea.com/… (vid. 27. 7. 2022)

Příklad – banner s akční nabídkou na stránce seznamu produktů s tlačítkem pro výzvu k akci “Prozkoumat”
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 27. 7. 2022)

C.1.2 Informace na stránce seznamu produktů

Na stránce seznamu produktů je nezbytné, aby bylo pro jednotlivé produkty uvedeno dostatek informací, které pomáhají v rozhodování návštěvníkovi webu. Mezi hlavní údaje patří:

• název,
• obrázek,
• cena,
• popis,
• dostupné varianty (barva, velikost, materiál, výbava apod.),
• dostupnost produktu (skladem, na objednání, u dodavatele, výroba na zakázku apod.),
• slevy a akce.

Mezi přesvědčovací informace dále patří marketingové štítky a stavové údaje, hodnocení zákazníků a značka nebo výrobce produktu. Především hodnocení zákazníků je velmi důležité, protože mnoho návštěvníků webu se rozhoduje podle již získaných zkušeností ostatních (alespoň souhrnné hodnocení by měl být na stránce seznamu produktů, podrobné informace o hodnocení zákazníků se uvádějí na stránce konkrétního produktu). Zmíněny mohou být i další údaje, např. dodavatel produktů, doba záruky, stav produktu (nový, bazarový, rozbalený, vystavený apod.).

Jednoznačný název informuje návštěvníka webu o konkrétním produktu. Tento název by měl být vhodně zvolen, jelikož většinou půjde i o název stránky detailu produktu. Zvolený název může být použit v URL adrese konkrétní stránky. Název se propisuje i do vyhledávačů a je tedy jedním z klíčových prvků, které ovlivňují pozice v SEO (optimalizaci pro vyhledávače).

Příklad – jednoznačný název produktu na stránce seznamu produktů
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 27. 7. 2022)

Přesvědčivé obrázky a fotografie produktů jsou klíčem k tomu, aby návštěvník rozklikl detailní informace o produktu. Při volbě obrázků produktu je nutné přemýšlet nad tím, v jaké podobě si bude chtít návštěvník webu produkt prohlédnout. Pro drobnější produkty je důležité jejich detailní zobrazení. U velkých produktů je naopak vhodné jejich zachycení z dálky. Především je důležitá kvalita obrázků. Mohou být použity fotografie, které produkt zobrazují ze všech stran (tzv. 360° fotografie), ty jsou však běžnější až na stránce konkrétního produktu. Pro některé e-shopy je vhodné zobrazovat i více obrázků najednou.

Důležité je zachovávat jednotnost obrázků, to znamená, že produkty by měly být foceny ze shodného úhlu a jejich pozadí by mělo být univerzální a jednotné, aby nerušilo návštěvníka při prohlížení samotného produktu. To nemusí platit vždy, např. pro e-shopy s módou je pro návštěvníka inspirativní, když jsou uvedeny obrázky produktů na modelech a modelkách v různých postaveních. To může dotvářet image e-shopu. Také nemusí vždy platit, že bílé pozadí obrázků je nejvhodnější, v některých případech produkty více vyniknou např. na šedém pozadí (např. bílé svatební šaty na bílém pozadí nebo šedivá peněženka na šedém pozadí nebudou nejvhodnější volbou).

Obrázky produktů by neměly obsahovat vodoznak, jelikož může rušit návštěvníka webu. V některých případech ani nelze jednoduše poznat, že jde právě o vodoznak a návštěvník si tak může myslet, že jde o součást produktu. Pokud už je vodoznak uveden, měl by být v místech mimo produkt, aby měl návštěvník webu jasnou představu o podobě produktu.

V seznamu produktů se často používá také změna fotografie při umístění kurzoru myši do oblasti informací o konkrétním produktu. Mohou být uvedeny obrázky během používání produktu, obrázky z jiného úhlů, pro jinou variantu apod. Hlavní obrázek pro běžné zobrazení produktu na stránce seznamu produktů by měl být shodný jako hlavní obrázek pro stránku konkrétního produktu. Pokud by byl použit jiný, návštěvník webu může tzv. ztratit nit a myslet si, že klikl na jiný produkt než chtěl.

Příklad – jednotné obrázky na stránce seznamu produktů (shodný úhel pohledu na produkt a pozadí produktů)
Zdroj: https://www.sportica.eu/sandale-slingback (vid. 27. 7. 2022)

Příklad – více obrázků pro jeden produkt na stránce seznamu produktů
Zdroj: https://www.vapp.cz/privesy-k-odberu (vid. 28. 7. 2022)

Příklad – různé obrázky na stránce seznamu produktů pro jednotlivé produkty (samostatné produkty nebo na modelkách v různých pózách) – dotváří image e-shopu
Zdroj: https://www.zoot.cz/kategorie/17525/zeny/topy-tricka-kosile (vid. 27. 7. 2022)

Příklad – změna fotografie při umístění kurzoru myši (nalevo původní fotografie, napravo změněná) – náhled vnitřku produktu
Zdroj: https://www.spongr.cz/panske-kozene-penezenky/ (vid. 27. 7. 2022)

Příklad – změna fotografie při umístění kurzoru myši (nalevo původní fotografie, napravo změněná) – produkt při používání
Zdroj: https://www.aboutyou.cz/c/muzi/obleceni/tricka-20324 (vid. 27. 7. 2022)

Mnoho návštěvníků webu se v rámci nákupního procesu konkrétního produktu rozhoduje předně podle ceny, slevy nebo další výhodné akce. Spolu s názvem produktu je tedy cena druhým údajem, který musí být uveden vždy. Pokud není možné cenu přesně určit, měla by být uvedena alespoň orientační cena (cena od, cena od – do) nebo parametry, na základě kterých lze cenu spočítat (např. cena za měrnou jednotku). Informace o ceně mohou zahrnovat:

• cenu s DPH (daň z přidané hodnoty, může být uvedena i částka, častěji procento sazby DPH),
• cenu bez DPH (důležitá především pro obchodní vztahy mezi firmami – B2B),
• cenu podle variant produktů,
• sleva – vyčíslená v procentech, konkrétní částkou, se zvýrazněním slevy,
• cena před a po slevě – se zvýrazněním konečné částky po slevě (od počátku roku 2023 je třeba slevu a konečnou částku po slevě uvádět a počítat z nejnižší ceny obecně za posledních 30 dnů, podrobnosti k tomu shrnuje audit základní legislativy a v něm kapitola přímo věnovaná slevám),
• s nabídkou dalších výhod (balíčky, akce, sady apod.) – podporují zvýšení hodnoty objednávky a další prodeje.

Sleva a akce musí být jasně zviditelněny oproti původní ceně. Při nabídce zlevněného zboží nebo zvýhodněných akcí je třeba dobře myslet na potenciální návštěvníky webu. Pokud jde o e-shop s nízkonákladovou módou, každý slevy a akce ocení a rád využije. Když však půjde o e-shop s luxusním zbožím, mohou na návštěvníka webu akce a slevy působit méně efektivně.

E-shop může také nabízet zobrazení informací o cenách produktů v různých měnách. To je vhodné především pro e-shopy běžně doručující produkty do více zemí světa. Někdy to může být přínosné pro návštěvníka, který hledá produkt na více místech, najde ho na stránkách e-shopů v různých zemích a potřebuje nabídky porovnat.

Příklad – uvedení ceny produktu (s DPH)
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 27. 7. 2022)

Příklad – uvedení ceny (bez DPH) s počtem kusů v balení
Zdroj: https://shop.vrabecavrabec.cz/katalog/zbozi/zbozi.asp?skup=101 (vid. 27. 7. 2022)

Příklad – uvedení původní ceny a ceny po slevě (původní cena přeškrtnutá, cena po slevě zvýrazněná) s procentuálním vyčíslením slevy v levém horním rohu
Zdroj: https://www.glami.cz/damske-topy-tricka-tilka/ (vid. 27. 7. 2022)

Příklad – uvedení původní ceny a ceny po slevě (původní cena přeškrtnutá, cena po slevě zvýrazněná pod obrázkem produktu) s procentuálním i peněžním vyčíslením slevy v pravém horním rohu
Zdroj: https://savicki.cz/prsteny-s-bilym-safirem (vid. 27. 7. 2022)

Příklad – uvedení základní ceny a odkaz na další varianty produktu s cenou od
Zdroj: https://www.mall.cz/mobilni-telefony (vid. 27. 7. 2022)

Příklad – cena pro zvýhodněný balíček produktů
Zdroj: https://www.cityzenwear.cz/tricka/ (vid. 27. 7. 2022)

Spolu s cenou a vyčíslenou slevou jsou dalšími běžnými nástroji pro přesvědčení návštěvníka webu ke koupi tzv. marketingové štítky a stavové informace (někdy se také nazývají jako přesvědčovací štítky nebo příznaky). Na stránce seznamu produktů jsou důležitější marketingové štítky (stavové informace, tj. například dostupnost produktu, počet zbývajících kusů apod., se používají spíše na stránce konkrétního produktu, proto je jim věnován text v kapitole D.2.4 Marketingové štítky a stavové informace). Marketingové štítky návštěvníka webu přesvědčují hlavně o výhodnosti nákupu a urychlují tak jeho rozhodovací proces. Pokud je nějaký produkt označený jako nejprodávanější, má návštěvník webu tendenci myslet si, že produkt již hodně osob spokojeně používá. Jde o tzv. sociální důkaz, který směřuje návštěvníka webu k rychlejšímu rozhodování. Obvykle bývají marketingové štítky umístěny k obrázku produktu, do některého z rohů. Měly by ale být umístěny tak, aby nezakrývaly produkt, to totiž může na návštěvníka působit negativně. V rámci jednoho produktu může být uvedeno i více štítků, na různých místech a lze je kombinovat se stavovými informacemi. Nesmějí však příliš odvracet pozornost od nabídky samotného produktu.

Mezi marketingové štítky nejčastěji patří upozornění na akci, slevu, top produkty (nejprodávanější, nejoblíbenější), doporučené produkty, novinky, cenové hity, výprodej, trendy a módní hity, dárek k produktu, prodlouženou záruku, dopravu zdarma apod. Tyto štítky mohou být dále doplněny o tzv. emotikony (smajlíky a další obrázky). V rámci marketingových štítků může být použita téměř jakákoliv hláška nebo znak (emotikon), které přesvědčí návštěvníka webu k neodkladné koupi produktu. Úkolem je vzbudit v návštěvníkovi webu naléhavost a potřebu vlastnit právě daný produkt. Štítky pomáhají nalákat návštěvníky na stránky s podrobnostmi o konkrétním produktu a zvyšují tak pravděpodobnost nákupu. Na stránce konkrétního produktu mohou být uvedeny stejné i další štítky. Musí však být použity takové štítky, jejichž význam je návštěvníkovi webu na první pohled a bez většího přemýšlení ihned jasný.

Příklad – základní marketingový štítek – sleva (v procentech i peněžní hodnotou)
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 27. 7. 2022)

Příklad – základní marketingové štítky o doporučení produktu e-shopem a dopravě zdarma
Zdroj: https://www.czc.cz/iphone-mobilni-telefony/produkty (vid. 27. 7. 2022)

Příklad – základní marketingový štítek v levém horním rohu (označení BIO produktu) s dalších štítků vedle informace o gramáži (zde země původu, vhodnost pro vegany, bio produkt a produkt bez palmového oleje)
Zdroj: https://www.kosik.cz/pekarna-a-cukrarna/chleb (vid. 27. 7. 2022)

Příklad – 3 marketingové štítky u jednoho produktu – označení slevy dne, možnosti zakoupit celý outfit zachycený na obrázku a novinky v produktech
Zdroj: https://www.zoot.cz/kategorie/17525/zeny/topy-tricka-kosile (vid. 27. 7. 2022)

Příklad – marketingový štítek včetně emotikonu – označení cenové bomby
Zdroj: https://www.alza.cz/xxl-tydny (vid. 28. 7. 2022)

Mezi další přínosné informace na stránce seznamu produktů může patřit údaj o počtu zobrazených produktů podle zvolené kategorie. Návštěvník tak získá představu, jak velká je nabídka e-shopu. Pokud je značná, může jednoduše a hned přistoupit k dalšímu zpřesnění zobrazených produktů pomocí připravených filtrů na e-shopu. To návštěvníkovi webu usnadní práci s dohledáním pro něj ideálního produktu.

Příklad – informace o počtu zobrazených produktů v seznamu produktů
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 27. 7. 2022)

Pro návštěvníka webu, který v seznamu produktů nenašel ten, který očekával, je vhodné přímo na stránce tohoto seznamu uvést nějaký kontakt. Může se jednat o zveřejnění telefonního čísla nebo e-mailu. Pokud je uveden kontakt na konkrétní osobu, na návštěvníka webu to působí příjemněji a důvěryhodněji. Nebo může být k dispozici chat (ideálně s odpovědí v reálném čase a konkrétní osobou odpovídající v chatu) nebo kontaktní formulář, kdy ale návštěvník webu musí čekat na odpověď (podrobné hodnocení kontaktů i nástroje chatu je součástí auditu důvěryhodnosti webu).

Kontaktní údaje by měly být návštěvníkovi webu dostupné v závěru stránky, jelikož tam se dostal a potřebuje poradit, jak dále postupovat. Mohou tedy být součástí stránky seznamu produktů. Často se kontakt uvádí v zápatí webu, jelikož pak je dostupný na všech stránkách e-shopu. Stejnou funkci může plnit i kontakt zveřejněný v záhlaví, zde však ideálně s nástrojem/tlačítkem pro návrat do horní části stránky. Může se totiž stát, že návštěvník webu spíše odejde, než aby se vracel do úvodu e-shopu a zjišťoval kontakt, když nenašel to, co hledal.

Velmi často se ve spodní části stránky seznamu produktů objevuje formulář pro přihlášení k odběru informací. Častěji však bývá v zápatí, které je vidět na všech stránkách e-shopu. Tento formulář je určen opačné skupině návštěvníků, než kontakt. Jde především o návštěvníky, kteří pořídili, co chtěli, a nadále požadují informování o novinkách a akcích e-shopu, aby se na něj mohli vrátit při nabídce, která je pro ně žádoucí.

Příklad – kontakty v zápatí e-shopu (dostupné na všech stránkách webu)
Zdroj: https://www.kosik.cz/pekarna-a-cukrarna/chleb (vid. 27. 7. 2022)

Příklad – kontakty v záhlaví e-shopu (dostupné na všech stránkách webu)
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 27. 7. 2022)

Příklad – přihlášení k odběru informací v zápatí e-shopu
Zdroj: https://www.botyluks.cz/panske-barefoot-polobotky/ (vid. 27. 7. 2022)

C.1.3 Tlačítka s výzvou k akci a další navigační nástroje na stránce seznamu produktů

Nejpodstatnějším tlačítkem s výzvou k akci (tzv. Call To Action tlačítkem, CTA) je na stránce seznamu produktů tlačítko pro koupi konkrétního produktu. To je obecně nejdůležitější CTA tlačítko každého e-shopu. Proto by toto tlačítko mělo být dostatečně výrazné, a to na všech místech webu, odkud může návštěvník přidat produkt do košíku. Tlačítko pro koupi produktu může mít různé označení (textové i obrázkové), např.:

• ikona košíku,
• koupit,
• do košíku,
• vložit/přidat do košíku,
• objednat.

CTA tlačítko může být na stránce seznamu produktů umístěno tak, že se zobrazí až po umístění kurzoru myši do oblasti konkrétního produktu. Při vložení produktu do košíku je vhodné návštěvníka webu informovat o tom, že byla akce úspěšně provedena (např. hláškou ve vyskakovacím okně, zvýrazněním nebo změnou barvy tlačítka košíku, případně i tlačítka pro vložení produktu do košíku apod.).

Některé e-shopy umožňují volbu koupit zrychleně. S tou je ale třeba nakládat obezřetně. Při volbě koupit zrychleně s daným produktem návštěvník webu ihned přechází k dokončování nákupního procesu (volbě dopravy a platby a zadávání údajů pro doručení objednávky). Může tedy docházet k tomu, že hodnota objednávky bude nižší, než kdyby zvolil vložení produktu do košíku a web dále procházel nebo mu košík nabídnul další vhodné produkty nebo služby. U některých (spíše drahých) produktů většinou možnost zrychleného nákupu není vhodná a téměř nikdo ji nevyužije, protože chce prozkoumat podrobnosti na stránce konkrétního produktu.

Při vkládání produktu do košíku rovnou ze stránky seznamu produktů je důležité návštěvníkovi webu umožnit upřesnění jeho volby, pokud je produkt nabízen ve více variantách nebo velikostech apod. Také by měl mít možnost volby počtu kusů, a to především u produktů, které se objednávají hromadně. Vzhledem k těmto potřebným volbám ze strany návštěvníka webu některé e-shopy na stránku seznamu produktů přímé tlačítko pro koupi neumísťují. Návštěvník pak může produkt objednat až ze stránky konkrétního produktu, kde provádí potřebná upřesnění objednávky.

Někdy e-shopy používají tlačítko pro vložení do košíku k zobrazení podrobných informací o produktu. Jde především o takové produkty, které potřebují specifikovat nákup od návštěvníka webu, zvolit varianty, další nastavení apod.

Příklad – tlačítko pro vložení produktu do košíku se zobrazí po umístění kurzoru myši do oblasti konkrétního produktu
Zdroj: https://www.sephora.cz/… (vid. 28. 7. 2022)

Příklad – ikona košíku (při umístění kurzoru myši na tlačítko se zobrazí informace “do košíku”)
Zdroj: https://www.electroworld.cz/iphone (vid. 28. 7. 2022)

Příklad – ikona košíku s textem “koupit” u produktů na stránce seznamu produktů
Zdroj: https://www.alza.cz/iphone/18851638.htm (vid. 28. 7. 2022)

Příklad – ikona košíku s textem “do košíku” u produktů na stránce seznamu produktů
Zdroj: https://www.czc.cz/iphone-mobilni-telefony/produkty (vid. 28. 7. 2022)

Příklad – ikona košíku s textem “přidat do košíku” u produktů na stránce seznamu produktů
Zdroj: https://www.mall.cz/chytre-telefony (vid. 28. 7. 2022)

Příklad – možnost produkt koupit zrychleně na stránce seznamu produktů
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 3. 5. 2022)

Příklad – možnost koupit produkt a zvolit počet kusů produktu na stránce seznamu produktů
Zdroj: https://shop.vrabecavrabec.cz/katalog/zbozi/zbozi.asp?skup=101 (vid. 28. 7. 2022)

Příklad – stránka seznamu produktů bez tlačítka pro koupi produktu
Zdroj: https://www.zoot.cz/… (vid. 28. 7. 2022)

Pro stránku seznamu produktů existují i další velmi podstatná tlačítka s výzvou k akci, mezi která patří:

• zobrazení detailní informace o konkrétním produktu,
• přidání produktu do oblíbených,
• přidání produktu do nákupního seznamu,
• vložení produktu do srovnávače,
• sdílení informací o produktu,
• hlídání produktu,
• vložení produktu a úprava v konfigurátoru,
• zobrazení podobných produktů
• apod.

Pro zobrazení detailní informace o produktu může být na stránce seznamu produktů umístěno tlačítko s názvem detail, více informací, podrobnosti apod. Běžněji se však používá proklik z obrázku (někdy názvu produktu) na stránce seznamu produktů, bez konkrétního tlačítka. Některé e-shopy používají i tzv. rychlý náhled, kdy kliknutím na produkt (většinou obrázek nebo název) dochází k otevření podrobných informací v pop-up okně (tzv. vyskakovací okno, které se zobrazí nad obsahem stránky e-shopu). V některých případech je to i jediná možnost pro získání více informací o produktu. Takový postup má však omezené využití, je vhodný např. pro e-shopové prodejny běžných potravin, které každý návštěvník dobře zná a nepotřebuje o nich zjišťovat mnoho dalších informací. Vždy je vhodné návštěvníka webu upozornit, že jde o rychlý náhled a nově otevřené informace nejsou umístěny na jiném webu. Pro některé návštěvníky totiž může být matoucí otevírání dalších oken nad stránkou e-shopu (pletou si rychlý náhled s celou stránkou produktu). Pro jiné to však může být velmi užitečné, šetří jim to čas a nemusí odcházet na stránku konkrétního produktu, ale dál mohou procházet celou nabídku produktů i při získání dodatečných informací. Odborníci se neshodnou, zda převažují pozitiva nebo negativa rychlého náhledu, je to tedy vždy na uvážení majitele e-shopu. Pro rozhodnutí může být využito tzv. A/B testování, kdy pro některé návštěvníky bude rychlý náhled k dispozici a pro jiné ne, podle výsledků se pak vyhodnotí přínos.

Příklad – zobrazení informací o konkrétním produktu kliknutím na tlačítko “detail”
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 28. 7. 2022)

Příklad – seznam produktů bez tlačítka pro zobrazení detailu – jako proklik slouží obrázek i název produktu
Zdroj: https://www.alza.cz/iphone/18851638.htm (vid. 28. 7. 2022)

Příklad – informace o zobrazení rychlého náhledu v pop-up okně u obrázku produktu (po umístění kurzoru myši do oblasti obrázku)
Zdroj: https://shop.miele.cz/… (vid. 28. 7. 2022)

Příklad – podrobné informace o produktu pouze v rychlém náhledu
Zdroj: https://www.kosik.cz/… (vid. 28. 7. 2022)

Tlačítka pro přidání produktu do oblíbených nebo do hlídače produktu mohou mít své klady i zápory. Návštěvníkovi umožňují jednoduše se k produktu vrátit i při dalších návštěvách webu, případně ho mohou upozornit na produkt, který byl opět přidán do nabídky. Na druhou stranu snižují pocit naléhavosti a nezbytnosti produkt objednat. Tato tlačítka se mohou používat pro personalizaci obsahu webu nebo pro zasílání informací o konkrétních produktech formou newsletteru. Pokud e-shop nepřivádí návštěvníka webu zpět k jeho oblíbeným nebo uloženým položkám (pomocí různých marketingových nástrojů), je třeba pečlivě zvážit umístění těchto tlačítek. E-shopu totiž mohou i uškodit, pokud nemají žádné zásadnější funkce.

Příklad – možnost přidání produktu mezi oblíbené a do srovnávače produktů
Zdroj: https://www.alza.cz/iphone/18851638.htm (vid. 28. 7. 2022)

Příklad – informace, že tlačítko pro přidání do košíku funguje i jako tlačítko pro přidání do nákupního seznamu
Zdroj: https://www.rohlik.cz/c300102000-ovoce-a-zelenina (vid. 28. 7. 2022)

Příklad – možnost hlídání dostupnosti produktu
Zdroj: https://www.datart.cz/… (vid. 28. 7. 2022)

Dalším důležitým tlačítkem na stránce seznamu produktů je možnost vrátit se na začátek seznamu. Na začátku bývají uvedené ty nejrelevantnější produkty ať už podle nastavení e-shopu, nebo podle volby návštěvníka webu na úpravu řazení, např. od nejlevnějších. Pokud se návštěvník dostává na další stránky seznamu nebo do spodní části seznamu a stále nenachází požadovaný produkt, měl by mít možnost rychlého návratu do přední části nabídky. Může se totiž rozhodnout pro prostudování nabídky jiného produktu, který právě podle relevance bude spíše na začátku seznamu. Pro tyto pohyby na stránkách e-shopu může být umístěno tlačítko:

• nahoru,
• zpět,
• listování s možností volby první stránky, případně s použitím znaku pro návrat (často |< nebo <<)
• apod.

Případně může být použito běžné tlačítko pro návrat do horní stránky webu, které bývá většinou umístěno v pravém dolním rohu stránky a pohybuje se po stránce dolů s pohybem návštěvníka webu.

Příklad – tlačítko nahoru pro návrat do horní části seznamu produktů
Zdroj: https://www.alza.cz/iphone/18851638.htm (vid. 28. 7. 2022)

Příklad – použití listování (kliknutí na stránku 1) pro návrat do přední části seznamu produktů
Zdroj: https://www.czc.cz/… (vid. 28. 7. 2022)

Příklad – použití listování (první znak na obrázku, |<) pro návrat do přední části seznamu produktů
Zdroj: https://www.pvmodel.cz/… (vid. 28. 7. 2022)

Příklad – běžná šipka pro návrat do horní části webu (umístěná na všech stránkách e-shopu v pravém dolním rohu)
Zdroj: https://www.brzak.cz/elektrokola-69 (vid. 28. 7. 2022)

C.2 Filtrování

Filtrování slouží k třídění obsahu ve zvolené kategorii produktů. Podle zvolených parametrů se zužuje počet zobrazených produktů. Na stránce seznamu produktů se pak objevují pouze takové produkty, které vybraným filtrům odpovídají. Filtry jsou tedy dalším nástrojem, který usnadňuje navigaci a orientaci návštěvníka webu na stránkách e-shopu. Základním rozdílem mezi kategoriemi a filtry je ten, že kategorie se vzájemně vylučují, filtry nikoliv.

Dobře připravené a odpovídající filtry šetří návštěvníkovi webu čas při hledání požadovaného produktu. Nemusí totiž procházet produkty, které neodpovídají jeho představám. Důležité jsou i z pohledu vyhledávačů, protože ty pak umí rozeznat různé stránky podle filtrů a zobrazovat je ve výsledcích vyhledávání (zobrazí přímo definované produkty, např. modrá pánská trička s límečkem).

C.2.1 Umístění a vzhled filtrů

Umístění a vzhled filtrů závisí zejména na jejich množství, rozložení stránky a zařízení, které je použito pro procházení e-shopu (PC nebo mobilní zařízení). Nástroj pro filtrování nebývá umístěn na homepage e-shopu (vhodné to může být jen pro velmi malé e-shopy), měl by být uveden na stránce seznamu produktů, a to hned od první kategorie (nikoliv až u podkategorií). Filtry by měly být dostupné v každé kategorii i všech následujících podkategoriích produktů e-shopu. Běžně bývají filtry umístěny:

• horizontálně (většinou hned pod menu nebo nad seznamem produktů) – horizontální filtry jsou vhodnější pro menší množství parametrů, ze kterých návštěvník webu vybírá. V takovém případě jsou i poměrně často používané. Případně mohou být použity jako základní filtry (nebo rozšířená možnost volby podkategorií produktů), kde další podrobné filtry jsou uvedeny vertikálně (některé e-shopy používají i obrácenou verzi). Horizontální filtry nesmějí zabírat příliš mnoho prostoru a odsouvat tak nabídku produktů e-shopu, ta je totiž důležitější než filtry.
• vertikálně (v tzv. sidebaru) – umístění na levé straně stránek používá většina e-shopů. Vertikální filtry mohou být i na pravé straně e-shopu. Tyto filtry neomezují návštěvníka webu v procházení seznamu produktů, který je umístěn v hlavní středové části stránek. Vertikálně umístěné filtry mohou zahrnovat více parametrů, než horizontální, jelikož mohou pokračovat i dále po stránce, kam v první chvíli návštěvník webu nevidí (pod hranu obrazovky). Filtry by ale měly být voleny tak, aby jejich nabídka nebyla mnohem delší než seznam produktů (alespoň při vypnutí všech filtrů a zobrazení kompletní nabídky produktů). Tam, kde již nebudou vidět žádné produkty, již návštěvník webu pravděpodobně pokračovat nebude a spodní filtry tedy nebude využívat.
• v pop-up okně (vyskakovací okno, které se po kliknutí zobrazuje nad obsahem stránky e-shopu) – na stránce seznamu produktů, většinou v blízkosti menu, bývá umístěno tlačítko, na které návštěvník klikne a tím zobrazí nabídku filtrů. Filtry v pop-up okně umožňují využití většího prostoru monitoru nebo displeje a mohou tak být obsáhlejší. Nevýhodou ale může být, že návštěvník vždy musí otevřít celé vyskakovací okno pro úpravu jakéhokoliv filtru.

Příklad – horizontální umístění filtrů
Zdroj: https://www.kosik.cz/pekarna-a-cukrarna/chleb (vid. 28. 7. 2022)

Příklad – horizontální umístění filtrů – tlačítko pro rozbalení nabídky filtrů
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 28. 7. 2022)

Příklad – horizontální umístění filtrů – rozbalené filtry kliknutím na tlačítko (k předchozímu příkladu)
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 28. 7. 2022)

Příklad – vertikální umístění filtrů
Zdroj: https://www.brzak.cz/elektrokola-69 (vid. 28. 7. 2022)

Příklad – vertikální umístění filtrů – s možností schovat filtry
Zdroj: https://www.zoot.cz/… (vid. 28. 7. 2022)

Příklad – kombinace – základní filtry (zde spíše podkategorie produktů) umístěny horizontálně, další podrobné filtry vertikálně (uvedeno jako příklad, jelikož i kategorie mají umístěné přímo do nabídky filtrů), vertikální filtry lze i skrýt
Zdroj: https://www.sephora.cz/… (vid. 28. 7. 2022)

Příklad – kombinace – základní filtry (zde skutečně filtry) umístěny horizontálně, další podrobné filtry vertikálně
Zdroj: https://www.datart.cz/… (vid. 28. 7. 2022)

Příklad – filtry umístěné do pop-up okna (horizontálně umístěné filtry zobrazují pop-up okno, na e-shopu jsou filtry umístěny i vertikálně)
Zdroj: https://www.bonami.cz/c/jidelni-zidle (vid. 28. 7. 2022)

V případě mobilních zařízení (tabletů, ale především mobilních telefonů) musí být filtry připraveny s ohledem na velmi omezený prostor displeje. Vertikální zobrazení, které je stále viditelné, se proto spíše nepoužívá. Pro mobilní zařízení je vhodné použít rolovací nebo rozbalovací prvky na jednom až dvou řádcích v horní nebo spodní části displeje (horizontální filtry – rolovací do strany, vertikální filtry – rozbalovací dolů; filtrování může být umístěno i do spodní části displeje, jelikož to je nejpřístupnější část mobilního telefonu, která se návštěvníkovi webu jednoduše ovládá, v horní části webu očekává spíše konkrétní informace o produktech). Dále mohou být použity rozbalovací prvky ze stran displeje, které filtry zobrazí v pravé nebo levé části e-shopu (viditelná je stále i nabídka produktů). Pro mobilní zařízení je vhodné také pop-up okno (překryvná vrstva stránky), což je asi nejpoužívanější postup, nebo zobrazování filtrů na nové stránce, ze které se přechází na vyfiltrovaný seznam produktů (nová stránka se však příliš nedoporučuje). Méně obvyklé je zařazení filtrů přímo do menu produktů. Filtry pro mobilní zařízení musí být připraveny tak, aby byly pro návštěvníka webu snadno dohledatelné a jednoduše použitelné. Nikdy ho však nesmí rušit při procházení seznamu produktů.

Příklad – rozbalovací filtry v horní části displeje mobilního zařízení
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 28. 7. 2022)

Příklad – rozbalování filtrů přímo na stránce seznamu produktů mezi informacemi o produktech – mobilní zařízení
Zdroj: https://www.datart.cz/… (vid. 28. 7. 2022)

Příklad – filtry umístění do pop-up okna na mobilním zařízení – tlačítko pro zobrazení filtrů
Zdroj: https://www.kosik.cz/pekarna-a-cukrarna/chleb (vid. 28. 7. 2022)

Příklad – filtry umístění do pop-up okna na mobilním zařízení – zobrazené filtry
Zdroj: https://www.kosik.cz/pekarna-a-cukrarna/chleb (vid. 28. 7. 2022)

Dostupné filtry e-shopu mohou mít různý vzhled, který navíc může být přizpůsoben podle použitého zařízení pro procházení webu. Běžně se používají:

• textové filtry – např. pro označení značky produktu, místa původu apod., tyto filtry navíc mohou být doplněny obrázky a piktogramy,
• klikací filtry – návštěvník webu klikne na jeden požadovaný filtr (např. pro zobrazení zlevněných produktů); možnost volby pouze jednoho filtru musí být dobře promyšlena, jelikož pro návštěvníka webu může být omezující zvolit pouze jeden nebo druhý filtr – pokud chce např. označit 2 ze 3 filtrů a je umožněno kliknout pouze na jeden požadovaný filtr, musí filtrování provést dvakrát, což ho může odradit od vyhledávání i nákupu,
• přepínací filtry – návštěvník z uvedených variant volí jednu z možností (např. muž/žena),
• zaškrtávací filtry – návštěvník webu zaklikne požadované možnosti pro výběr, volí více filtrů najednou (běžné např. pro značky produktů),
• posuvné filtry – návštěvník webu volí rozmezí na posuvné lince (typické pro cenu),
• vyplňovací filtry – návštěvník sám vkládá text, podle kterého má proběhnout filtrování.

Možné je použít i negativní filtry, kdy se zobrazí všechny produkty kromě těch, které odpovídají vybranému filtru. Návštěvník např. zvolí, že chce zobrazit všechny produkty kromě bazarových.

Příklad – textové filtry
Zdroj: https://www.alza.cz/… (vid. 28. 7. 2022)

Příklad – textové filtry s ilustračním obrázkem produktů
Zdroj: https://www.alza.cz/… (vid. 28. 7. 2022)

Příklad – klikací filtry
Zdroj: https://www.alza.cz/… (vid. 28. 7. 2022)

Příklad – přepínací filtry
Zdroj: https://www.alza.cz/… (vid. 28. 7. 2022)

Příklad – zaškrtávací filtry
Zdroj: https://www.alza.cz/… (vid. 28. 7. 2022)

Příklad – posuvný filtr
Zdroj: https://www.alza.cz/… (vid. 28. 7. 2022)

C.2.2 Druhy filtrů

Druhy a množství filtrů se liší podle konkrétní kategorie produktů.  Filtry musí odpovídat tomu, jak je skutečně možné produkty v kategorii třídit. Některé produkty si vystačí s jednotkami filtrů, jiné jich mohou nabízet i desítky. Většinou (téměř vždy) není vhodné, aby všechny kategorie jednoho e-shopu obsahovaly stejné filtry, např. pro e-shop s horskými koly bude nutné připravit různé druhy filtrů pro běžná kola, elektrokola nebo příslušenství ke kolům. Zjednodušeně lze filtry, které mohou být umístěny na e-shop, rozdělit na základní a doplňkové.

Vždy se nejprve uvádějí ty filtry, které jsou nejdůležitější, a to z pohledu návštěvníka webu (nikoliv podle pocitu majitele e-shopu). Nelze tedy říci, že obecně bývají první základní a pak až doplňkové filtry. Pro každý e-shop může být funkční jiné nastavení. Na předních místech by se ale vždy měl objevovat filtr podle ceny, protože cena je zásadní pro většinu návštěvníků na všech e-shopech. Nelze však říci, že by cena měla být prvním filtrem, to spíše platit nebude. Filtry je dobré řadit podle získaných poznatků z chování návštěvníků na e-shopu, což je možné po získání dostatečného množství dat.

Mezi základní filtry lze zařadit ty, které se běžně objevují na každém webu, a to je cena a značka produktu. Hlavně ale do této skupiny filtrů patří ty filtry, které jsou specifické pro konkrétní kategorii produktu. Může se tedy jednat o:

• konkrétnější označení produktů (např. pro iPhone 13 mohou být verze Pro Max, Pro, běžný a mini, pro dámské svršky běžně trička, tílka, topy, halenky atd.),
• druh produktu (pro boty mohou být použity např. filtry pro běžecké, turistické, polobotky, otevřené boty, pantofle atd.),
• parametry produktu (pro mobilní zařízení např. velikost displeje nebo úložné kapacity),
• varianty produktu (třeba pro začátečníky, běžné uživatele a pokročilé),
• velikost (běžně např. u oblečení, může jít ale i o velikost displeje mobilního zařízení),
• rozměry (např. pro nábytek),
• barva (tradičně pro automobily, nábytek, oblečení apod.),
• pohlaví (dítě, muž, žena, senior),
• materiál (přírodní, recyklovaný, nebo přímo složky použitého materiálu, např. s elastanem),
• tvar (např. stoly mohou mít filtr pro hranaté a zaoblené),
• nosnost (může být rozhodujícím parametrem např. pro matrace nebo celé postele)
• apod.

Jako základní filtry se běžně používají vlastnosti produktu, které je obecně možné uvést v popisu produktu.

Příklad – základní filtry specifické pro nabízené produkty (ráfky značky Fondmetal)
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 28. 7. 2022)

Cena, často i značka, bývá pro hodně návštěvníků rozhodujícím parametrem produktu. Značek jednoho druhu produktu může být na e-shopu mnoho, proto je vhodné umístit cca 5 nejžádanějších značek jako první volby filtrů a další značky případně schovat pod volbu pro rozbalení dalších filtrů. Filtr bude mít vždy podobu názvu značky s možností jejího zaškrtnutí (mělo by být možné zvolit více značek najednou). Určování ceny produktu jako filtr může mít různou podobu:

• posuvník – zde může být umožněno určovat pouze maximální cenu, případně může návštěvník webu určovat i minimální hodnotu,
• číselná volba ceny od-do – návštěvník webu vyplňuje nebo vybírá z definovaných hodnot konkrétní ceny,
• cenové skupiny – předem definované cenové skupiny, u kterých však nesmí být cenové rozmezí příliš malé ani příliš velké, filtrování může být umožněno pouze pro jednu skupinu nebo i pro více cenových skupin najednou,
• zadávání konkrétních hodnot – návštěvník webu sám zadává konkrétní orientační cenu produktu nebo sám definuje cenové rozmezí.

Jsou však i e-shopy, na kterých není možné nebo vhodné používat filtry na základě značky a ceny. V případě značky může jít o e-shop, který nabízí pouze jednu značku produktů. Pro cenu se může jednat např. o e-shopy s potravinami, kde se mohou ceny měnit velmi často.

Příklad – filtr pro cenu – posuvník
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 1. 8. 2022)

Příklad – filtr pro cenu – hodnoty od-do (zde návštěvník webu zadává konkrétní hodnoty)
Zdroj: https://www.datart.cz/mobilni-telefony.html (vid. 1. 8. 2022)

Příklad – filtr pro cenu – cenové skupiny s možností označit pouze jednu skupinu
Zdroj: https://www.mall.cz/mobilni-telefony (vid. 1. 8. 2022)

Další filtry lze shrnout pod druh nazvaný doplňkové. Lze je označit různými jinými výrazy, např. stavové filtry, tematické filtry, variační filtry, filtry pro kompatibilní produkty apod. Pro některé návštěvníky mohou být doplňkové filtry důležitější než základní. Do této skupiny filtrů lze zařadit:

• dostupnost produktu (skladem, na objednávku, u dodavatele, s možností vyzvednutí na konkrétní pobočce apod.),
• stav produktu (např. nový, rozbalený, vystavovaný, repasovaný),
• nové a výhodné nabídky – novinky, akce, slevy, výprodej (toto třídějí produktů může být nabídnuto také formou úpravy řazení zobrazených produktů na stránce, návštěvník webu může např. zvolit řazení od nejvyšší slevy),
• sezónní filtry (kolekce podle sezóny – jarní, letní, atd., případně sezóna uvedení produktu na trh),
• hodnocení zákazníků (velmi důležité především pro první návštěvy e-shopu),
• příležitosti (jubilea, výročí, narozeniny, promoce apod.),
• technické požadavky na produkt (např. paměť, integrované systémy, kompatibilita s jiným zařízením)
• a další (např. podle stylu, střihu, vzoru, použití nebo rozdělení pomocí štítků definovaných e-shopem atd.),
• extra tipem může být zařazení filtru pro produkty, které jsou kompatibilní s obsahem košíku nebo předchozími nákupy na e-shopu (zobrazuje se např. příslušenství, dodatečné produkty nebo náhradní díly k produktům určeným k objednání).

Doplňkové filtry musí být pojmenovány tak, aby návštěvník webu přesně věděl, podle jakého parametru určuje zobrazení produktů.

Příklad – filtry podle dostupnosti produktu
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 1. 8. 2022)

 
Příklad – filtry podle stavu produktu
Zdroj: https://www.czc.cz/mobilni-telefony/produkty (vid. 1. 8. 2022)

Příklad – filtry pro speciální nabídky e-shopu
Zdroj: https://www.sportica.eu/gumbies-modni-zabky (vid. 1. 8. 2022)

Příklad – filtry podle hodnocení dalších zákazníků – možnost označení jednoho filtru
Zdroj: https://www.scuk.cz/pekarna-a-cukrarna (vid. 1. 8. 2022)

Příklad – filtry podle hodnocení dalších zákazníků – podle udělených hvězdiček 4 filtry
Zdroj: https://www.czc.cz/telefony-apple-iphone-13/produkty (vid. 1. 8. 2022)

Příklad – filtry pro štítky konkrétního e-shopu
Zdroj: https://www.czc.cz/telefony-apple-iphone-13/produkty (vid. 1. 8. 2022)

Pro všechny použité filtry je důležité, aby vždy souvisely s kategorií produktů, které návštěvník webu prochází. Pokud např. e-shop prodává jízdní kola i oblečení k tomu určené, měl by mít nastavené filtry tak, aby se zobrazovaly podle kategorií – pro jízdní kola např. velikost rámu a průměr kol, pro oblečení pak velikost oblečení, barva, potisk apod. To platí i pro filtry pro různé akce – pokud např. mezi produkty nebývá žádná akční nabídka v podobě např. 1 + 1, neměla by daná kategorie obsahovat ani filtr pro tyto možnosti. Jiné to může být u filtrů, které mimořádně neobsahují žádný produkt, viz následující text.

C.2.3 Informace u filtrů

Při filtrování produktů je vhodné návštěvníka webu informovat o počtu produktů, které odpovídají danému filtru. Návštěvník webu má poté představu, kolik produktů se mu může zobrazit na stránce seznamu produktů. Když návštěvník označí jeden filtry ve vybrané skupině, např. označí konkrétní značku produktu, pro další filtry může být uvedena informace, o kolik produktů se nabídka rozšíří při volbě dalšího filtru skupiny, tedy další značky. Obvykle se tato informace označuje číslicí se znakem plus. Pokud pro nějaký konkrétní filtr nejsou dostupné žádné produkty, neměl by mít návštěvník webu možnost tento filtr označit. Vhodné je tento filtr ukázat, ale nastavit ho bez možnosti označení. Pro návštěvníka webu může být totiž zrovna daná vlastnost rozhodující a důležitější než dříve označené filtry, a díky tomu může své filtrování upravit. Kdyby filtr nebyl uveden vůbec, mohl by si návštěvník webu myslet, že produkt s danou vlastností není na e-shopu dostupný vůbec.

Příklad – informace o počtu produktů odpovídající filtru v závorce za názvem filtru
Zdroj: https://www.scuk.cz/pekarna-a-cukrarna (vid. 1. 8. 2022)

Příklad – informace o počtu dalších produktů, které se zobrazí při volbě dalšího filtru jedné kategorie (zahrnutí další značky do výběru)
Zdroj: https://www.czc.cz/notebooky/produkty?vyrobce=acer (vid. 1. 8. 2022)

Příklad – neaktivní filtry, které neobsahují žádné produkty (uvedeny bez možnosti označení)
Zdroj: https://www.alza.cz/… (vid. 1. 8. 2022)

Návštěvníka webu je dobré informovat i o počtu produktů, které odpovídají všem zadaným filtrům najednou. To je důležité především pro e-shopy, které nabízejí velké množství zboží. Návštěvník dostane zprávu o tom, kolik produktů se mu zobrazí nebo zobrazilo. Jestliže je pro něj počet stále moc velký, může přistoupit k označení dalších filtrů. Naopak, pokud by bylo produktů málo a měl by pocit, že nemá z čeho vybírat, může některé vybrané filtry zrušit a zobrazit tak širší nabídku e-shopu.

Příklad – informace o počtu produktů zobrazených na základě zvolených filtrů (včetně jednoduché možnosti filtry zrušit)
Zdroj: https://www.scuk.cz/… (vid. 1. 8. 2022)

C.2.4 Funkce u filtrů

Filtrování, které má být pro návštěvníka webu přínosné a použitelné, musí být na první pohled viditelně a přehledné a mělo by nabízet relevantní volby filtrů podle kategorií produktů. Po označení vybraných filtrů musí zobrazovat pouze výsledky, které se s filtry shodují. Filtrování může být nastaveno tak, že probíhá v reálném čase a je tedy jednokrokové – ihned po označení zvoleného filtru dochází k úpravě seznamu produktů. V takovém případě by ale web neměl automaticky návštěvníka vracet na začátek stránky, protože může chtít vybírat další, následující filtry. Musel by pak hledat, kde ve výběru filtrů skončil, a pokračovat takto vždy s návratem do horní části e-shopu. To je pro něj nepřehledné a především zdlouhavé. Další možností je, že návštěvník vybere a označí požadované filtry a poté sám klikne na tlačítko filtrování. Až po potvrzení se zobrazí vybrané produkty. Jde o dvoukrokovou variantu, v případě nástroje pro filtrování v pop-up okně dokonce o tříkrokovou (otevření pop-up okna, volba filtrů, potvrzení volby). V tomto případě musí být e-shop nastaven tak, aby návštěvník na první pohled věděl, že musí filtry potvrdit. Z pohledu návštěvníka webu je nejpříjemnější, když filtrování probíhá v reálném čase a návštěvník po načtení označeného filtru zůstává na stejném místě stránek, aby mohl případně vybírat další, následující filtry.

Filtry, ať již jsou horizontální, vertikální nebo v pop-up okně, by měl mít návštěvník webu vždy dostupné. Horizontální filtry mohou být umístěny do tzv. statické linky, která zůstává v horní části stránek stále viditelná i při pohybu webem směrem dolů. Vertikální filtry mohou být nastaveny tak, že se na straně pohybují s pohybem návštěvníka po webu. Filtry umístění do pop-up okna mohou mít stále zobrazené tlačítko pro jejich otevření.

Příklad – horizontální filtry ve statické lince
Zdroj: https://savicki.cz/prsteny-s-bileho-zlata (vid. 1. 8. 2022)

Příklad – vertikální filtry, které se pohybují po stránce směrem dolů s pohybem návštěvníka po webu
Zdroj: https://www.zoot.cz/kategorie/17574/muzi/tricka (vid. 1. 8. 2022)

Příklad – tlačítko pro zobrazení filtrů v pop-up okně (zde umístěné do statické linky)
Zdroj: https://www.bonami.cz/c/sedaci-soupravy (vid. 1. 8. 2022)

Filtry slouží k tomu, aby návštěvník webu jednoduše našel přesně ten produkt, který hledá. Při procházení e-shopu však filtry nesmí návštěvníka webu rušit a odvádět jeho pozornost jinam. Je jedno, zda jsou filtry umístěny horizontálně, vertikálně nebo v pop-up okně, ale nikdy by se neměly zobrazovat a dále rozbalovat při náhodném najetí kurzoru myši do oblasti filtrů. To právě může odvádět návštěvníkovu pozornost a rušit ho a obtěžovat při zkoumání seznamu produktů.

Aby měl návštěvník webu představu o tom, které filtry již použil, měly by být zvolené filtry jasně označené. Pro přehlednost je dobré uvést všechny vybrané filtry také souhrnně na jednom místě, např. nad nabídkou filtrů nebo nad nabídkou filtrovaných produktů (uvádění zvolených filtrů až pod jejich nabídkou nebo nabídkou produktů není dobré řešení, jelikož tam nemusí být pro návštěvníka webu viditelné).

Příklad – jasné označení vybraných filtrů
Zdroj: https://www.brzak.cz/obleceni-7?vyrobce=100,fox (vid. 1. 8. 2022)

Příklad – uvedení zvolených filtrů nad seznamem produktů
Zdroj: https://www.zoot.cz/kategorie/17574/muzi/tricka/velikost/429/barva/modra/kategorie2/26426/potisk/bez-potisku/ (vid. 1. 8. 2022)

Pro přehlednost je dále důležité dbát na počet zobrazených skupin filtrů v nástroji pro filtrování, ale i na počet možných filtrů v jednotlivých skupinách filtrů. Některé produkty je vhodné členit pouze podle malého počtu základních filtrů, ty pak mohou být zobrazeny všechny najednou. Častěji ale dochází k tomu, že skupin filtrů, případně jednotlivých filtrů v dané skupině, je větší množství. V takovém případě je vhodné zobrazovat nejdříve ty nejdůležitějších a nejpoužívanější skupiny filtrů a následně až ty dále upřesňující (pro filtry uvnitř skupiny se může někdy hodit i řazení podle abecedy, např. pro značky). Pokud je skupin filtrů mnoho, mohou být tzv. zabaleny, a zobrazovat se až po volbě návštěvníka webu k zobrazení dalších skupin filtrů. Případně může být u konce nástroje filtrování tlačítko pro otevření dalších (nebo všech) filtrů pro produkty (zde může být uvedena také informace o počtu dalších filtrů, které se zobrazí). Umístěn může být i posuvník – rolování jen v místě filtrů (ten není vždy vhodný, jelikož návštěvníkovi webu nemusí být jasné, zda se pohybuje směrem dolů po celém webu nebo pouze ve filtrování). Totéž platí pro jednotlivé filtry uvnitř skupiny. Pro velmi obsáhlé skupiny filtrů může být dále zařazen vyhledávač nebo našeptávač, to je typické např. pro zemi původu, kde může mít seznam i desítky možností.

Příklad – velké množství skupin filtrů, které je možné dále zobrazovat kliknutím
Zdroj: https://www.megapixel.cz/digitalni-bezzrcadlovky/canon?n=1 (vid. 1. 8. 2022)

Příklad – velké množství skupin filtrů, které je možné najednou všechny zobrazit v pop-up okně
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 1. 8. 2022)

Příklad – velké množství filtrů uvnitř skupiny, které je možné dále zobrazovat kliknutím
Zdroj: https://www.mall.cz/mobilni-telefony (vid. 1. 8. 2022)

Příklad – velké množství filtrů uvnitř skupiny, s nástrojem pro vyhledávání
Zdroj: https://www.kosik.cz/maso-drubez-a-ryby (vid. 1. 8. 2022)

Návštěvník webu by měl mít i možnost kombinovat více filtrů najednou. To platí pro skupiny filtrů i obecně pro jednotlivé filtry ve skupině. Není vhodné návštěvníka webu svazovat pouze výběrem jedné možnosti, u některých filtrů to ale jinak nemusí jít. Kombinovat návštěvník webu tedy může:

• všechny nabídnuté filtry – pro toto kombinování filtrů je důležité, aby jejich kombinace fungovaly správně. Měly by se zobrazovat pouze takové filtry, které odpovídají všem zadaným. Pokud návštěvník webu zvolí, že chce zobrazit keramické červené hrníčky, v seznamu produktů by se neměly zobrazovat např. modré porcelánové konvice (ty mohou být zobrazeny např. na konci stránky seznamu produktů mezi nabídkou, která by dále mohla návštěvníka webu zajímat).
• filtry v jedné skupině – pokud je pro jednu skupinu filtrů (např. podle značky) nabídka více filtrů, měl by mít návštěvník webu možnost označit jich více najednou (skupina filtrů může mít i jen jeden filtr, např. označení produktů v akci). V případě filtru podle značky nemusí mít návštěvník webu ve značce prioritu a může chtít porovnat produkty právě od různých výrobců. Proto by měl mít možnost volby více filtrů v jedné skupině.

Samozřejmě není možné nabízet kombinaci filtrů, které se vzájemně vylučují nebo např. nesouvisí s konkrétním produktem.

Příklad – možnost označení více filtrů v různých skupinách najednou
Zdroj: https://www.datart.cz/dotykove-telefony.html (vid. 1. 8. 2022)

Příklad – možnost označení více filtrů v jedné skupině filtrů
Zdroj: https://www.czc.cz/notebooky/produkty (vid. 1. 8. 2022)

Příklad – možnost označit pouze jeden filtr ve skupině, jelikož se filtry skupiny navzájem vylučují
Zdroj: https://www.alza.cz/mobily/18843445.htm (vid. 1. 8. 2022)

Nezbytnou funkcí nástroje pro filtrování je také možnost filtry zrušit. Návštěvník webu by měl mít možnost zrušit všechny filtry najednou a zahájit třídění produktů znovu. Důležité je také umožnit rušit pouze jednotlivé filtry. To může návštěvník webu provádět zrušením označení filtru na stejném místě, jako filtr označil. Přehlednější a jednodušší pro návštěvníka ale je rušit jednotlivé filtry na místě, kde se zobrazují všechny filtry, které doposud označil. I proto je vhodné uvádět návštěvníkem vybrané filtry nad nástrojem filtrování nebo nad seznamem zobrazených produktů. Některé weby nabízejí i možnost u výpisu označených filtrů otevřít všechny filtry pro přidání dalších v pop-up okně. S odstraňováním filtrů se musí měnit i zobrazená nabídka produktů tak, aby stále odpovídala zůstávajícím filtrům (nabídka produktů se tedy zpětně rozšiřuje).

Příklad – možnost zrušit všechny i jednotlivé filtry nad seznamem zobrazených produktů
Zdroj: https://www.alza.cz/mobily/18843445.htm#f&cst=null&cud=0&pg=1&prod=1627&par13172=13172-37907&par13175=13175-219732338&sc=1400 (vid. 1. 8. 2022)

Příklad – možnost zrušit všechny i jednotlivé filtry nad seznamem zobrazených produktů, včetně možnosti přidávat další filtry (nástroj pro filtrování se zobrazí v pop-up okně)
Zdroj: https://www.czc.cz/notebooky/produkty?vyrobce=acer,dell&uhlopricka-displeje=14-15-4&velikost-operacni-pameti-gb=8.0-8.0 (vid. 1. 8. 2022)

C.2.5 Výsledky filtrování

Výsledky filtrování musí odpovídat zadaným filtrům. Pokud by se v nabídce objevovaly i produkty, které zúženému výběru návštěvníka webu neodpovídají, mohlo by ho to odradit od dalšího procházení e-shopu. Mohl by mít pocit, že mu e-shop nenabízí to, co právě požaduje.

Pokud návštěvník webu otevře stránku konkrétního produktu a chce se vrátit zpět na seznam produktů (jedno zda tlačítkem prohlížeče nebo tlačítkem přímo na e-shopu), měly by být zachovány filtry, které zvolil. Měl by se tedy vrátit zpět na již filtrovanou nabídku produktů. Když se po kroku zpět objeví opět základní nabídka e-shopu, musí návštěvník označovat filtry znovu, což ho otráví a z webu odejde jinam.

Výsledkem filtrování by také neměla být úplně prázdná stránka. I ta může zapříčinit pocit návštěvníka, že e-shop neuspokojí jeho poptávku a tak z něj odejde a bude hledat jinde. Filtry, kterým neodpovídá žádný produkt, by ideálně neměly být v nabídce filtrování aktivní, případně mohou být z nabídky filtrů odstraněny. Odstranění filtrů, kterým neodpovídá žádný produkt, ale nemusí být vždy vhodné. Může docházet např. k situacím, kdy produkt podle daného konkrétního filtru je dostupný, pouze pro jinou značku (která byla označena jako předchozí filtr). Tím, že bude filtr pouze neaktivní, ale stále uveden, dává e-shop návštěvníkovi informaci, že jiné takové produkty nabízí. Pokud nastane situace, že by se měla zobrazit prázdná stránka, měla by i tato stránka obsahovat nějaké informace, např. nabídku podobných produktů, nabídku příslušenství, odkazy na informační články apod.

Příklad – zadaným filtrům neodpovídá žádný produkt, zobrazeny jsou doplňkové informace a odkazy
Zdroj: https://www.alza.cz/iphone-13-mini/18892050.htm#f&limit=-1–17848&cst=null&cud=0&pg=1&prod=&sc=100 (vid. 1. 8. 2022)

Špatný příklad – prázdná stránka jako výsledek filtrování bez dalších informací
Zdroj: https://www.sportica.eu/sandale-slingback#attrCh-18-417=1&attrCh-91-1322=1 (vid. 1. 8. 2022)

C.3 Řazení

Řazení je nástroj pro změnu pořadí produktů na stránce seznamu produktů. Každý e-shop má nastavené základní řazení produktů. To ale nemusí odpovídat požadavkům návštěvníka webu. Proto může být nabídnut nástroj řazení, kterým návštěvník upraví zobrazení produktů podle vlastních priorit. Řazení produktů na rozdíl od filtrů neomezuje výběr produktů, ale řadí je pod sebou v seznamu produktů podle určeného parametru.

Základní (výchozí) řazení by měl mít e-shop nastavené tak, aby se na předních pozicích zobrazovaly nejprodávanější produkty, novinky, akce apod. Naopak produkty, které e-shop nemá skladem a nemůže je při objednávce obratem dodat, by měly být zařazeny až ke konci seznamu produktů.

C.3.1 Umístění a vzhled řazení

Umístění a vzhled nástroje pro řazení produktů se odvíjí od designu celého webu, umístění dalších nástrojů e-shopu a zařízení, na kterém je e-shop procházen (PC nebo mobilní zařízení). Záleží také na počtu druhů řazení, které má návštěvník webu k dispozici. Volba úpravy řazení může být umístěna již na homepage e-shopu, pokud tato stránka obsahuje nabídku konkrétních produktů. Nástroj pro řazení by ale vždy měl být dostupný na jakékoliv stránce seznamu produktů. Nástroj pro řazení může být umístěn:

• horizontálně, nad seznamem produktů – jde o nejčastější použití. Možnosti úpravy řazení jsou uvedeny hned nad seznamem produktů zvolené kategorie. Horizontálně mohou být umístěny i filtry. V takovém případě mohou být nástroje nad sebou (filtrování bývá pro tento případ prvním nástrojem) nebo vedle sebe (zde je častější umístění nejprve řazení a následně filtrování). Možnosti horizontálního řazení bývají viditelné všechny najednou.
• vertikálně – nad seznamem produktů může být umístěno tlačítko pro rozbalení vertikální nabídky možností řazení. V tomto případě je vidět pouze zvolené řazení, ostatní možnosti se zobrazí kliknutím na tlačítko. Nebo může být řazení v tzv. sidebaru, což není příliš běžné. Vertikální řazení v sidebaru bývá součástí nástroje pro filtrování. Umístěno bývá před nebo za nabídku filtrů a možnosti řazení jsou v něm všechny viditelné.
• v pop-up okně – po kliknutí na tlačítko pro úpravu řazení se zobrazí všechny možnosti v překryvném vyskakovacím okně nad obsahem stránky e-shopu.
• podle záhlaví tabulky – v případě, že je seznam produktů poskytnut v podobě tabulky, která obsahuje vlastní záhlaví (názvy sloupců tabulky), může návštěvník webu provádět úpravu řazení kliknutím na daný sloupec tabulky. Pokud např. tabulka obsahuje sloupce název, dostupnost a cena, může návštěvník webu volit řazení podle názvu (abecední seřazení), dostupnosti (skladem a následně produkty na objednávku), nebo ceny (od nejnižší nebo od nejvyšší).

E-shop však nemusí nabízet žádné možnosti řazení – to je ale vhodné pouze pro e-shopy s velmi omezenou nabídkou produktů, případně pro e-shopy s velmi rozsáhlými možnostmi filtrování, které do jisté míry úpravu řazení mohou nahradit.

Příklad – horizontální umístění řazení
Zdroj: https://www.sportica.eu/ (vid. 2. 8. 2022)

Příklad – vertikální umístění řazení – tlačítko s vertikálním zobrazením možností řazení
Zdroj: https://www.decathlon.cz/browse/c0-vsechny-sporty/c1-cyklistika/c3-elektrokola/_/N-18190wk (vid. 2. 8. 2022)

Příklad – vertikální umístění řazení – v sidebaru nad filtrováním
Zdroj: https://prodejkavy.cz/zrnkova-kava/175/kategorie/ (vid. 2. 8. 2022)

Příklad – řazení umístěné v pop-up okně (na e-shopu je řazení umístěno i horizontálně)
Zdroj: https://www.bonami.cz/c/zrcadla (vid. 2. 8. 2022)

Příklad – e-shop bez možnosti úpravy řazení
Zdroj: https://www.vapp.cz/privesy-k-odberu (vid. 2. 8. 2022)

U mobilních zařízení, především mobilních telefonů, je třeba brát ohled na velikost displeje a tím omezený prostor pro sdělování informací. Pro návštěvníka webu jsou samozřejmě nejdůležitější informace o produktech. Nástroje jako je řazení jim pouze usnadňují dohledat požadovaný produkt. Proto bývá tento nástroj umístěn do rolovacích nebo rozbalovacích prvků e-shopu, často společně s filtrováním produktů. Řazení může být umístěno horizontálně, vertikálně, v pop-up okně, podle záhlaví tabulky, v horní nebo i spodní části displeje. Platí, že pro mobilní telefony je ovládací plocha spodní část displeje, proto je zde dobré umístit ovládací prvky řazení (i filtrování a další nástroje). Možnosti řazení se mohou také zobrazovat v rozbalovací nabídce nebo na nové stránce (nová stránka však není úplně vhodná, protože návštěvník webu může ztratit představu o tom, kde se právě nachází). Pokud mají být volby řazení pro návštěvníka přínosné, musí být snadno dohledatelné, aby je mohl jednoduše použít.

Příklad – úprava řazení v horní části displeje v posuvné lince nad seznamem produktů – mobilní zařízení
Zdroj: https://www.datart.cz/mobilni-telefony.html (vid. 2. 8. 2022)

Příklad – rozbalovací nástroj pro řazení – mobilní zařízení
Zdroj: https://shop.fondmetal.cz/style-in-motion/ (vid. 2. 8. 2022)

Příklad – řazení umístěné v pop-up okně na mobilním zařízení – tlačítko pro zobrazení řazení
Zdroj: https://www.bonami.cz/c/zrcadla (vid. 2. 8. 2022)

Příklad – řazení umístěné v pop-up okně na mobilním zařízení – zobrazené řazení
Zdroj: https://www.bonami.cz/c/zrcadla (vid. 2. 8. 2022)

Možnosti řazení bývají vždy označeny textem. Obrázky a piktogramy se pro řazení nepoužívají. Z nabídky řazení návštěvník webu vždy kliknutím vybírá požadovanou možnost. Zvolený styl řazení by měl být v nabídce označen, aby návštěvník webu věděl, jak jsou produkty seřazeny a případně mohl toto řazení upravit. Pro řazené, které bývá rozbalováno kliknutím na tlačítko je zvolená možnost viditelná vedle tlačítka.

Příklad – označení zvolené možnosti řazení
Zdroj: https://www.mall.cz/mobilni-telefony (vid. 2. 8. 2022)

Příklad – uvedení zvolené možnosti řazení u rozbalovací nabídky
Zdroj: https://www.decathlon.cz/browse/c0-vsechny-sporty/c1-cyklistika/c3-elektrokola/_/N-18190wk (vid. 2. 8. 2022)

C.3.2 Druhy řazení

Každý e-shop má nastavené vlastní výchozí řazení produktů. To by mělo být stejné pro všechny kategorie produktů, aby návštěvník webu nemusel u jednotlivých kategorií přemýšlet a zkoumat, jaké produkty mu jsou nabízeny jako první. Pokud by bylo pro každou kategorii použito jiné výchozí řazení, návštěvník webu by se mohl v informacích ztrácet. Mezi výchozí řazení produktů patří:

• náhodné řazení,
• řazení podle abecedy,
• od nejvýhodnější nabídky,
• od nejlevnější nabídky – jako výchozí nastavení se příliš nedoporučuje (příklad, který mluví za vše: web, který nabízí motorky včetně oblečení a příslušenství, nastaví výchozí řazení od nejlevnějšího produktu – na prvních stránkách se tedy budou zobrazovat drobnosti v podobě náhradních dílů za pár korun, následovat bude oblečení a motorky, na kterých e-shop především vydělává, budou umístěny až v závěru seznamu produktů, což je nežádoucí),
• v závislosti na výši slevy,
• od nejprodávanějších produktů,
• podle algoritmu určeného e-shopem – v rámci nabídky e-shopu mohou být zahrnuty do výpočtu různé parametry, podle kterých se určí pořadí produktů; váhu jednotlivým parametrům určuje e-shop (zahrnuta bývá cena, dostupnost, prodeje, výše marže, hodnocení zákazníků atd.)
• apod.

Důležité je myslet na to, že většina návštěvníků si dělá obrázek o nabídce e-shopu již z několika prvních řádků seznamu produktů. Proto musí být na prvních místech takové produkty, které jednoznačně návštěvníka webu zaujmou a bude tak mít chuť procházet i další stránky nabídky. Nejprodávanější jsou ty produkty, které se objeví na první až přibližně páté pozici seznamu produktů.

Návštěvníkovi webu může být k dispozici nástroj pro úpravu řazení podle jeho priorit. Možnosti řazení lze rozdělit na základní a speciální pro konkrétní e-shop. V dnešní době se používá kombinace obou druhů řazení. Vždy záleží na konkrétním e-shopu, množství nabízených produktů a četnosti prezentace nových produktů. Na rozdíl od filtrování, které je zvláštní pro jednotlivé kategorie produktů, možnosti řazení by měly být pro e-shop na všech stránkách se seznamem produktů shodné. Mezi základní druhy lze zahrnout řazení podle:

• abecedy od A po Z (název produktu),
• abecedy od Z po A (název produktu),
• ceny od nejlevnějších produktů,
• ceny od nejdražších produktů,
• od nejrelevantnějších výsledků – v závislosti na zadaných filtrech nebo vyhledávání,
• stáří produktu od nejnovějších,
• stáří produktu od nejstarších,
• sloupci v záhlaví tabulky se seznamem produktů – vzestupně nebo sestupně,
• náhodné řazení.

Tyto druhy řazení jsou použitelné pro všechny e-shopy. Nezáleží na tom, jaké produkty e-shop nabízí nebo jak dlouho na trhu působí. K uvedeným možnostem řazení nejsou potřebné žádné informace na základě prodeje.

Speciální druhy řazení může používat e-shop, pokud k tomu již získal podkladová data.  Některé je možné využívat, stejně jako základní, od počátku provozu e-shopu a data k nim nejsou potřeba. Do druhu speciálního řazení jsou zařazeny spíše proto, že nejsou úplně obvyklé. E-shop může nabízet tyto další druhy řazení podle:

• prodeje produktů od nejprodávanějších,
• dostupnosti produktů – s upřednostněním ihned dostupných, dostupných na konkrétní pobočce apod.,
• nabídky e-shopu od zvýhodněné nabídky – nabídky balíčků, akcí 1 + 1 apod.,
• nabídky e-shopu s prvními produkty ve výprodeji (případně volba pro bazarové, použité nebo vystavované produkty),
• hodnocení zákazníků od nejlépe hodnocených produktů – k tomu je třeba opravdu dostatek dat,
• výše slevy od nejvyšší,
• značky s volbou určité značky jako první, nebo abecedním řazení značek (od A po Z i od Z po A),
• speciálních znaků a předností produktu (např. pro oblečení na sjezdové lyže podle voděodolnosti materiálu, pro automobily podle objemu motoru apod.),
• personalizace – naposledy zobrazené produkty, naposledy zakoupené produkty nebo produkty vložené do oblíbených či hlídání uvedené v seznamu jako první
• apod.

Při navrhování možností řazení je důležité myslet na to, že návštěvník, kterého první zobrazené produkty nezaujmou, nebude ochotný procházet ani další nabídku produktů e-shopu.

Pro nástroj řazení je dobré vyhnout se pojmům, které nelze blíže specifikovat. Pokud by byla uvedena možnost řazení od nejlepších produktů, muselo by být vysvětleno, co určuje, jaký produkt je lepší než jiný. Pro každého návštěvníka to může znamenat něco jiného, stejně tak, jako pro každý e-shop nebo kategorii produktů. Nejlepší produkt nemusí být zároveň nejnovější, nejlevnější nebo nejdražší. Je tedy třeba druhy řazení označovat jednoznačně.

Příklad – e-shop se základní nabídkou řazení produktů
Zdroj: https://www.czc.cz/mobilni-telefony/produkty (vid. 2. 8. 2022)

Příklad – e-shop se základní nabídkou řazení produktů – více možností
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 2. 8. 2022)

Příklad – e-shop se základní i speciální nabídkou řazení produktů (podle procenta nejvyšší slevy)
Zdroj: https://www.zoot.cz/kategorie/17584/muzi/kalhoty-a-kratasy (vid. 2. 8. 2022)

Příklad – e-shop se základní i speciální nabídkou řazení produktů (s cenou za jednotku, která je pro e-shop s potravinami velmi důležitá)
Zdroj: https://www.kosik.cz/ovoce-a-zelenina (vid. 2. 8. 2022)

Příklad – e-shop se speciální nabídkou řazení produktů (podle slevy, hodnocení zákazníků, doprodej a novinky)
Zdroj: https://www.decathlon.cz/browse/c0-vsechny-sporty/c1-cyklistika/c3-elektrokola/_/N-18190wk (vid. 2. 8. 2022)

Příklad – e-shop se speciální nabídkou řazení produktů (speciální znak produktu – velikost drahokamu na prstenu)
Zdroj: https://savicki.cz/prsteny-se-zirkony (vid. 2. 8. 2022)

Příklad – e-shop se dvěma nabídkami pro úpravu řazení produktů (pro doporučované produkty a pro další produkty – vždy nad seznamem produktů)
Zdroj: https://www.czc.cz/mobilni-telefony/produkty (vid. 2. 8. 2022)

C.3.3 Funkce u řazení

Aby bylo řazení přínosné pro návštěvníka webu, musí být na první pohled viditelné, musí nabízet srozumitelné varianty a produkty skutečně musí řadit podle zvolené priority. Pokud tedy chce návštěvník webu nejprve zobrazit produkty s nejvyšší slevou, neměla by nabídka začínat např. nejprodávanějšími produkty, které v dané době nejsou zlevněné.

Úprava řazení nejčastěji probíhá v reálném čase. To znamená, že ihned po zvolení varianty řazení se produkty automaticky seřadí dle volby. Pokud je ale nástroj pro úpravu řazení umístěn např. do pop-up okna, musí návštěvník webu svou volbu nejprve potvrdit. S tím souvisí i další dvě zásady pro řazení produktů:

• úprava řazení může být jedno nebo dvou kroková – při jednokrokové úpravě dochází k řazení v reálném čase. Při dvoukrokovém postupu musí návštěvník webu svou volbu potvrdit kliknutím na tlačítko, případně nejprve volí, že chce řazení podle abecedy a v druhém kroku vybírá řazení od A po Z nebo od Z po A. Při volbě řazení v pop-up okně musí návštěvník učinit dokonce tři kroky (otevřít nástroj pro řazení, vybrat možnost řazení a tu pak ještě potvrdit), proto se pop-up okno (především pro PC) nedoporučuje – návštěvníka tato volba může zdržovat.
• úprava řazení by se neměla zobrazovat při náhodném najetí kurzoru myši do oblasti řazení – možnosti řazení mohou být tzv. zabaleny a zobrazovány až při aktivitě návštěvníka webu, proto by zde měla být nastavena prodleva, která zabrání náhodnému zobrazování možností řazení. Lepší způsob je, když se možnosti řazení zobrazí až kliknutím myši do oblastí tohoto nástroje.

Možnost, kterou návštěvník webu pro řazení zvolí, by měla být zvýrazněna oproti ostatním. Při procházení e-shopu může návštěvník dojít k závěru, že pro něj bude vhodné jiné řazení, a proto potřebuje vědět, jaké původně zvolil nebo jaké je nastaveno e-shopem.

Příklad – jednokroková volba řazení (kliknutím na jednu z možností se upraví řazení)
Zdroj: https://www.scuk.cz/pekarna-a-cukrarna (vid. 2. 8. 2022)

Příklad – dvoukroková volba řazení (otevření nabídky možností a zvolení požadovaného řazení)
Zdroj: https://www.glami.cz/damske-tenisky/ (vid. 2. 8. 2022)

Příklad – jednoznačně označená zvolená možnost řazení produktů
Zdroj: https://www.sportica.eu/ (vid. 2. 8. 2022)

Nástroj pro úpravu řazení produktů může být dostupný v horní části, nejběžněji nad seznamem produktů. Při procházení e-shopu však může být návštěvníkovi stále dostupný i ve spodních částech stránek. Tato funkce však není tak podstatná jako u filtrů a proto ji většina e-shopu nepoužívá. Horizontální řazení může být umístěno ve statické lince, která je v horní části stránek stále viditelná i při pohybu po stránkách dolů. Vertikální řazení se po straně může pohybovat směrem dolů. Pop-up okno může být možné otevřít z jakékoliv části stránek. Záhlaví tabulky může být ukotveno a stále zobrazeno v horní části nabídky produktů apod.

Příklad – horizontální řazení ve statické lince (zobrazení pop-up okna při kliknutí)
Zdroj: https://www.bonami.cz/c/zrcadla (vid. 2. 8. 2022)

C.4 Zobrazení

Zobrazení určuje, jakou podobu mají informace poskytnuté návštěvníkovi webu i kolik najednou se dozví údajů. Neslouží k třídění obsahu (k tomu slouží filtrování) ani k úpravě řazení produktů v zobrazeném seznamu produktů (k tomu je řazení). Pomocí nástrojů zobrazení návštěvník webu určuje, jakou podobu má výpis seznamu produktů a jaké údaje v sobě obsahuje. V seznamu produktů totiž některé návštěvníky zajímají především obrázky, jiné zase technické parametry produktů.

Dobře připravené zobrazování je nastaveno pro všechny stránky kategorií produktů původně ve stejné podobě. Až návštěvník webu rozhoduje o případné změně. Návštěvník může upravovat více druhů zobrazení na e-shopu:

• seznamu produktů,
• podrobnosti o produktu,
• počet produktů na stránce seznamu produktů.

C.4.1 Umístění a vzhled zobrazení

Stejně jako předchozí nástroje (filtrování a řazení), také pro zobrazení je umístění a vzhled určen designem e-shopu, množstvím produktů i kategoriemi nabízených produktů. Nástroj pro úpravu zobrazení informací v seznamu produktu může být umístěn již na homepage, pokud obsahuje nabídku konkrétních produktů. Možnost úpravy zobrazení bývá umístěna na stránku seznamu produktů. E-shop může nabízet možnost pro zobrazení seznamu produktů i podrobností o produktu v jedné volbě. Nabízet může i samostatné určení podoby seznamu produktů a odděleně podrobností o produktu. Nástroj pro úpravu zobrazených informací může být umístěn:

• horizontálně, nad seznamem produktů – to je nejčastější umístění, které obvykle nabízí volbu pro podobu seznamu i s podrobnostmi o produktu. Možnosti pro zobrazení bývají všechny najednou viditelné.
• vertikálně – nad seznamem produktů může být umístěno tlačítko pro rozbalení vertikální nabídky možností zobrazení. V takovém případě je vidět zvolené zobrazení a další možnosti se zobrazují kliknutím na tlačítko. Úprava zobrazení může být umístěna i do tzv. sidebaru, což není příliš běžné. V takovém případě bývá často součástí nástroje pro filtrování.
• v pop-up okně – po kliknutí na tlačítko pro úpravu zobrazení se objeví všechny možnosti v překryvném vyskakovacím okně nad obsahem stránky e-shopu.

Pro mobilní zařízení se zohledňuje také velikost displeje. Nástroj pro úpravu zobrazení může být v rozbalovací liště, na nové stránce, v horní nebo spodní části displeje. Stránky e-shopu musí být navrženy tak, aby byly přehledné i na malých zařízeních. Proto nemusí být k dispozici možnost úpravy zobrazení. E-shop obecně nemusí nabízet možnosti pro úpravu zobrazení seznamu produktů a informací o nich. I velké e-shopy fungují bez tohoto nástroje. Pokud je ale možné tento nástroj návštěvníkovi webu nabídnout, měl by být uveden – e-shop je pak pro své návštěvníky přívětivější.

Příklad – horizontální umístění zobrazení
Zdroj: https://prodejkavy.cz/zrnkova-kava/175/kategorie/# (vid. 2. 8. 2022)

Příklad – vertikální umístění zobrazení – tlačítko s vertikálním výpisem možností zobrazení
Zdroj: https://www.aboutyou.cz/c/zeny/obleceni/halenky-tuniky-22798 (vid. 2. 8. 2022)

Příklad – e-shop bez možnosti úpravy zobrazení
Zdroj: https://www.decathlon.cz/browse/c0-vsechny-sporty/c1-cyklistika/c3-elektrokola/_/N-18190wk (vid. 2. 8. 2022)

Příklad – možnost úpravy zobrazení na mobilním zařízení
Zdroj: https://www.czc.cz/notebooky/produkty (vid. 2. 8. 2022)

Pro úpravu počtu zobrazených produktů, načítání dalších produktů a listování mezi stránkami bývá nástroj umístěn ve spodní části stránky seznamu produktů, která se načetla po výběru kategorie, filtrování nebo vyhledávání. Některé e-shopy listování umísťují i do horní části seznamu produktů, není to ale příliš obvyklé.

Příklad – možnost zobrazení dalších produktů v závěru stránky
Zdroj: https://www.alza.cz/luxusni-nejdrazsi-mobily/18843445.htm (vid. 2. 8. 2022)

Příklad – listování seznamem produktů v horní části seznamu produktů
Zdroj: https://savicki.cz/prsteny-se-zirkony?f[type][]=ring&f[stone][]=cubiczirconia&sorting=price-desc (vid. 2. 8. 2022)

Nástroj pro úpravu seznamu produktů a v něm obsažených informací má téměř vždy podobu piktogramu. Pro specifické e-shopy může být i textový, např. pro módu jde o zobrazení produktů a zobrazení na modelce. V případě zobrazování dalších stránek jde o běžné číslování. Pro zobrazení dalších produktů na navštívené stránce se používá např. tlačítko “Zobrazit další” nebo “Načíst další” apod. U takové tlačítka je vhodné uvést i číslovku, která informuje návštěvníka webu o tom, kolik dalších produktů se zobrazí.

C.4.2 Druhy zobrazení

Každý e-shop má nastavené vlastní výchozí zobrazování seznamu produktů, informací o produktech v seznamu i počet zobrazených produktů na stránce. Toto výchozí nastavení by mělo být pro všechny kategorie produktů stejné, aby návštěvník neztrácel orientaci v informacích uváděných e-shopem. Kdyby byly poskytované informace pro jednotlivé kategorie nebo podkategorie produktů různé, mohl by se v nich návštěvník webu ztrácet.

Pro zobrazovaní informací (nejen na stránce seznamu produktů, ale případně i na homepage nebo stránce s výsledky vyhledávání) může návštěvník webu určovat:

• podobu seznamu produktů – stránka seznamu produktů má nejčastěji na výběr ze zobrazení formou seznamu (tabulky) nebo dlaždic (mřížky). Produkty jsou tedy seřazeny pod sebou (seznam – běžnější pro velkoobchody) nebo vedle sebe (dlaždice – používanější pro maloobchody). Některé nástroje pro tvorbu e-shopu nabízejí tři možnosti zobrazování seznamu produktů – mřížka, seznam a tabulka, kde mřížka je totéž, co dlaždice a seznam s tabulkou se liší pouze podrobností informací o konkrétních produktech (pro tabulku jde vlastně o kombinaci úpravy seznamu produktů a zároveň podrobných informací o jednotlivých produktech).
• podrobnost informací o jednotlivých produktech – návštěvník webu může v některých případech volit také (nebo pouze) podrobnost informací o jednotlivých produktech, v takovém případě bývá na výběr základní popis, detailní popis nebo obrázek. V takovém případě zůstává podoba seznamu stále stejná, např. formou dlaždic, a mění se pouze rozsah informací uvedených o jednotlivých produktech. Dále může e-shop nabídnout tzv. rychlý náhled – podrobnosti o produktu se zobrazí v pop-up okně (s touto variantou je nutné nakládat obezřetně, aby návštěvník webu věděl, že z e-shopu neodešel, ale pouze zobrazil další informace ve vyskakovacím okně).
• počet zobrazených produktů – návštěvník webu může mít možnost zvolit, kolik produktů se má zobrazit na jedné stránce, nebo může být použito tlačítko pro načtení dalších produktů.

Příklad – seznam (tabulka) a dlaždice (mřížka) pro zobrazení seznamu produktů (zobrazený seznam produktů v dalších dvou příkladech)
Zdroj: https://www.brzak.cz/jizdni-kola-11 (vid. 2. 8. 2022)

Příklad – volba tabulky pro zobrazení seznamu produktů
Zdroj: https://www.brzak.cz/jizdni-kola-11 (2. 8. 2022)

Příklad – volba dlaždic pro zobrazení seznamu produktů
Zdroj: https://www.brzak.cz/jizdni-kola-11 (2. 8. 2022)

Příklad – základní popis, popis s parametry a obrázek pro zobrazení informací o jednotlivých produktech (zobrazené informace o jednotlivých produktech v dalších třech příkladech)
Zdroj: https://www.czc.cz/notebooky/produkty (2. 8. 2022)

Příklad – volba základního popisu pro zobrazení informací o jednotlivých produktech
Zdroj: https://www.czc.cz/notebooky/produkty (2. 8. 2022)

Příklad – volba detailního popisu pro zobrazení informací o jednotlivých produktech
Zdroj: https://www.czc.cz/notebooky/produkty (2. 8. 2022)

Příklad – volba obrázku pro zobrazení informací o jednotlivých produktech
Zdroj: https://www.czc.cz/notebooky/produkty (2. 8. 2022)

Příklad – tlačítko rychlého náhledu u informací o produktu
Zdroj: https://www.kompletkeramika.cz/4-sklo (vid. 2. 8. 2022)

Příklad – zobrazené informace v rychlém náhledu
Zdroj: https://www.kompletkeramika.cz/4-sklo (vid. 2. 8. 2022)

Příklad – možnost úpravy počtu zobrazených produktů na stránce
Zdroj: https://www.datart.cz/mobilni-telefony.html (vid. 2. 8. 2022)

Příklad – tlačítko pro zobrazení dalších produktů na stránce (včetně možnosti listování)
Zdroj: https://www.zoot.cz/kategorie/17584/muzi/kalhoty-a-kratasy (vid. 2. 8. 2022)

Dalším nástrojem pro zobrazování informací o produktu může být volba pro otevření stránky konkrétního produktu na nové kartě prohlížeče nebo v jeho novém okně. To je poměrně používaný nástroj pro e-shopy s velkou nabídkou produktů nebo s nabídkou produktů, u kterých má návštěvník webu delší rozhodovací proces (jsou dražší, mají sloužit delší dobu apod.). Návštěvník tak nemusí používat volby zpět pro opětovné zobrazení seznamu produktů. V nových kartách si zobrazí jím vybrané produkty a podrobnosti pak může jednoduše procházet.

Příklad – možnost zobrazení stránky konkrétního produktu na nové kartě (záložce) prohlížeče
Zdroj: https://www.aaaauto.cz/skoda/ (vid. 2. 8. 2022)

C.4.3 Funkce u zobrazení

Pokud má být úprava zobrazování nápomocná pro návštěvníka webu, musí být na první pohled viditelná a srozumitelná. Z možností úprav zobrazení by návštěvníkovi webu mělo být jasné, zda se upraví celý seznam nabízených produktů nebo pouze informace pro jednotlivé produkty. Když návštěvník webu zvolí změnu zobrazování informací, seznamu produktů nebo podrobností o produktech, měla by skutečně proběhnout. To znamená například, že seznam produktů se při volbě změní na dlaždice, podrobnost informací o produktech se změní ze základního na detailní popis. V případě, že by zobrazování zůstalo beze změny, působilo by to na návštěvníka webu neprofesionálně a mohlo by to zapříčinit jeho odchod z e-shopu.

Příklad – nástroj pro úpravu zobrazených podrobností o produktech s popisným vysvětlením jednotlivých piktogramů, aby byly piktogramy pro návštěvníka webu srozumitelné
Zdroj: https://www.czc.cz/notebooky/produkty (vid. 3. 8. 2022)

Příklad – nástroj pro úpravu zobrazovaných obrázků produktů v textovém vyjádření (piktogramy by byly pro návštěvníka webu pravděpodobně nesrozumitelné)
Zdroj: https://www.aboutyou.cz/c/zeny/obleceni/halenky-tuniky-22798 (vid. 3. 8. 2022)

Úprava zobrazování může být nastavena tak, že probíhá v reálném čase (jednokroková úprava) – ihned po označení zvolené varianty zobrazování dochází k úpravě seznamu produktů a informací o nich. Nebo může být nástroj nastaven tak, že návštěvník webu zvolí požadované zobrazování a pak musí ještě potvrdit svojí volbu (nebo musí varianty zobrazování otevřít a kliknutím na vybranou volbu potvrdit nastavení). Na základě tohoto potvrzení dojde k úpravě zobrazovaných informací (dvoukroková úprava, v případě pop-up okna tříkroková – otevření pop-up okna, volba typu zobrazování, potvrzení volby). V tomto případě musí být nástroj pro úpravu zobrazování připraven tak, aby bylo návštěvníkovi webu zcela jasné, že musí svou volbu potvrdit. Pro návštěvníka webu je příjemnější a především rychlejší, když úprava zobrazování probíhá v reálném čase (s každým kliknutím navíc a prodlužováním tak nákupního procesu se může snižovat pravděpodobnost, že návštěvník webu nákup dokončí).

Příklad – jednokroková úprava zobrazení seznamu produktů (kliknutím na jednu z možností se upraví zobrazování)
Zdroj: https://www.aaaauto.cz/skoda/ (vid. 3. 8. 2022)

Příklad – dvoukroková úprava zobrazení seznamu produktů (otevření nabídky možností a zvolení požadovaného zobrazování)
Zdroj: https://www.aboutyou.cz/c/zeny/obleceni/halenky-tuniky-22798 (vid. 3. 8. 2022)

Ohledně funkcí nástroje pro úpravu zobrazování informací na e-shopu je možné dále uvést:

• pokud je na e-shopu dostupný, může být umístěn tak, aby byl pro návštěvníka webu k dispozici z každé části stránky seznamu produktů – pro nástroj umístěný horizontálně může volba uvedena ve statické lince (linka, která zůstává v horní části e-shopu viditelná při pohybu návštěvníka webem směrem dolů), pro vertikální nástroj může být nastaven pohyb nástroje směrem dolů s pohybem návštěvníka webu a tlačítko pro otevření pop-up okna může být umístěno tak, aby bylo z každé části e-shopu dostupné. Dostatečné je i umístění nástroje pouze nad seznam produktů. Stále je však poměrně běžné, že e-shopy možnost úpravy zobrazovaných informací o produktech vůbec neobsahují, a to ani ty velké. Pokud jsou v základu uvedené informace o produktech dostatečné a přehledné, není to takový problém, jako kdyby e-shop neobsahoval filtrování nebo řazení.
• nástroj pro úpravu zobrazování (a nezáleží na tom, zda horizontální, vertikální nebo v pop-up okně) by se v žádném případě neměl rozbalovat a překrývat informace o produktech při náhodném najetí kurzoru myši do oblasti tohoto nástroje. Pro návštěvníka webu by to byl velmi rušivý prvek, který by odváděl jeho pozornost. Pokud by ho to obtěžovalo nad jeho únosnou míru, mohlo by se také stát, že z e-shopu bez dalšího odejde.
• aby měl návštěvník webu stále přehled o tom, jaký typ zobrazení zvolil, měl by být použitý typ zobrazení zvýrazněn. Usnadňuje to orientaci návštěvníka webu a jednoduchou možnost rozhodování při uvažování o změně nastavení.

Příklad – úprava zobrazování umístěná pouze nad seznamem produktů (není dostupná z každé části stránky seznamu produktů), s jasným zvýrazněním použitého druhu zobrazení
Zdroj: https://prodejkavy.cz/kava/20/kategorie/ (vid. 3. 8. 2022)

Pro zobrazování informací o produktech může být možné nastavovat zobrazení detailních informací o konkrétním produktu při kliknutí levým tlačítkem myši:

• na nové kartě prohlížeče,
• v novém okně prohlížeče,
• v rychlém náhledu (pop-up okno).

Důležité je, aby tyto nástroje, pokud je návštěvník webu použije, byly zcela funkční a zobrazovaly informace tak, jak mají. Pokud by nástroje byly k dispozici, ale nebyly by funkční, návštěvníka webu to spíše odradí od dalšího procházení e-shopu. Může totiž mít pocit, že pokud nefunguje e-shop tak, jak má, nebude fungovat ani nákupní proces a doručování produktů.

Příklad – aktivní volba pro zobrazování detailních informací o produktech na nové kartě prohlížeče
Zdroj: https://www.aaaauto.cz/skoda/ (vid. 3. 8. 2022)

Příklad – otevření rychlého náhledu s detaily o produktu v pop-up okně (pro tento e-shop je to jediná možnost otevření detailních informací o produktu)
Zdroj: https://www.kosik.cz/produkt/meloun-vodni-bezsemenny-mini#productDescription (vid. 3. 8. 2022)

Výše uvedené informace o funkcích u nástroje pro úpravu zobrazování platí i pro počet produktů zobrazených na stránce a listování v nabídce produktů. Počet produktů na stránce je většinou možné upravit pouze podle předem definovaných možností e-shopem. Tento počet se odvíjí i od zvoleného druhu zobrazování informací – pokud jsou např. použité 4 dlaždice vedle sebe, bude možné zobrazovat produkty po 16, 32, 48, ale ne po 20, 30, 50, protože poslední řádek s dlaždicemi by nebyl celý obsazen produkty. Podle zvoleného počtu produktů na stránce se skutečně musí upravit i jejich zobrazení.

Příklad – úprava počtu zobrazených produktů na stránce seznamu produktů (pro zobrazení formou dlaždic e-shop tuto funkci neobsahuje)
Zdroj: https://www.aaaauto.cz/skoda/ (vid. 3. 8. 2022)

S počtem produktů na stránce souvisí i možnosti procházení stránek produktů, načítání dalších produktů a návrat na začátek nabídky produktů. Všechny tyto postupy návštěvníka webu by měly být intuitivní a funkční. Bývají umístěny pod seznamem načtených produktů, v některých případech i nad ním. Pro procházení stránek a načítání dalších produktů mohou být k dispozici nástroje listování:

• s tlačítky pro předchozí a následující stránku, případně mohou být uvedena tlačítka pro přechod na první nebo poslední stránku seznamu,
• zkrácené listování s čísly stránek – nejsou uvedena všechna čísla stránek, návštěvník webu tak nemůže přejít na libovolnou stránku produktů, ale pouze na ty, pro které jsou čísla uvedená (1, 2, 3, …, 9, 10); aby se návštěvník mohl pohybovat na konec a zpět na začátek seznamu, mělo by být vždy viditelné první a poslední číslo listování,
• úplné listování s čísly stránek – v listování jsou stále viditelná všechna čísla stránek, návštěvník webu tak může přecházet na libovolnou stránku,
• pomocí šipek – nejsou uvedená čísla stránek, pouze znaky šipek, pomocí kterých je možné listovat v nabídce produktů,
• tlačítkem pro načtení dalších produktů na stránce – návštěvník webu nepřechází na další stránku, ale na jedné straně seznamu produktů volí načítání dalších produktů v seznamu; u tlačítka je vhodné uvádět počet produktů, které se dále načtou, aby měl návštěvník webu představu, jak se seznam produktů prodlouží,
• kombinace různých uvedených variant – často je připravena možnost listování s čísly stránek spolu s tlačítkem pro načtení dalších produktů – návštěvník webu si tak může zvolit, jestli chce přecházet na další stránku nebo zůstat na původní a načíst produkty dále v seznamu nabídky.

Základní tlačítka pro návrat na začátek seznamu produktů jsou popsány výše v závěru podkapitoly C.1.3 Tlačítka s výzvou k akci a další navigační nástroje na stránce seznamu produktů).

Příklad – kombinace – zkrácené listování s čísly stránek včetně listování pomocí šipek umístěné nad seznamem produktů
Zdroj: https://prodejkavy.cz/kava/20/kategorie/ (vid. 3. 8. 2022)

Příklad – kombinace – zkrácené listování s čísly stránek včetně listování pomocí tlačítek předchozí a další umístěné pod seznamem produktů
Zdroj: https://www.decathlon.cz/browse/c0-muzi/c1-panske-obleceni/_/N-1f1w8ud (vid. 3. 8. 2022)

Příklad – tlačítko pro načtení dalších produktů s uvedením počtu již zobrazených produktů z celkové nabídky kategorie produktů e-shopu
Zdroj: https://www.scuk.cz/pekarna-a-cukrarna (vid. 3. 8. 2022)

Příklad – kombinace – listování s úplnými čísly stránek a tlačítka pro načtení dalších produktů, včetně informace o počtu produktů, které se dále načtou
Zdroj: https://www.czc.cz/iphone-mobilni-telefony/produkty (vid. 3. 8. 2022)

Příklad – kombinace – šipky s tlačítky pro předchozí a další stránky, zkrácené listování s čísly stránek a tlačítko pro načtení dalších produktů
Zdroj: https://www.electroworld.cz/iphone (vid. 3. 8. 2022)

Postup, který se nedoporučuje, ale stále je poměrně často využíván (především u velkých e-shopů s módou, domácím vybavením nebo základními potravinami), je automatické načítání dalších produktů na stránce. Tato funkce zobrazování produktů může omezovat návštěvníka webu při procházení e-shopu. Jednak se může návštěvník v nabídce ztrácet a může mít problém dohledat produkt, který již viděl, ale např. si ho neotevřel v novém okně prohlížeče. Především ho však může omezovat v zobrazení informací, které jsou uvedené v zápatí e-shopu, kde často bývají důležité dokumenty pro nákupní proces, např. všeobecné obchodní podmínky, informace o dopravě a platbě nebo reklamační řád.

Příklad – e-shop s automatickým načítáním dalších produktů na stránce seznamu produktů
Zdroj: https://www.bonami.cz/c/zrcadla?p=4 (vid. 3. 8. 2022)