-
22. srpna 2023
Plánujete přejít z B2B trhu na B2C? Není to tak jednoduché, jak se zdá
Rubrika:
Autor: Andrea Krejčí -
29. června 2023
Vtipná i seriózní šablona pro vaši out of office zprávu
Všechny úkoly před dovolenou už máte hotové, teď zbývá to jediné – nastavit si out of office e-mail pro všechny, kdo vám budou během dovolené psát. Abyste s tím neztráceli čas, vymyslel náš content tým šablonu, kterou můžete ještě dnes použít. Stačí si vybrat, jestli chcete být vtipní, nebo seriózní.
-
17. dubna 2023
Krok za krokem: Na co si dát pozor, když nastavujete kampaň na YouTube
-
31. března 2023
Děti tady (ne)chceme aneb 3 rychlé copy lekce
-
1. března 2023
Co se stane, pokud nezakážete automatickou migraci Google Analytics
Firemní weblog poradenské společnosti H1.cz
Zobrazit všechny články
Zpět
Q/A: Jak prezentovat detailní informace o produktu
Spolužák z VŠE Jirka Baloun v komentářích pod posledním článkem Nahé jedničky využil nabízenou příležitost a položil nám všetečnou otázku. Jirka se ptá, jaký je podle nás ideální způsob prezentace většího množství informací na stránce produktu v elektronickém obchodě. Doporučuji vám přečíst si nejprve celý Jirkův dotaz, cituji alespoň z jeho úvodu:
Potýkám se momentálně s problémem uspořádání produktové stránky (detail produktu) našeho budoucího obchodu. Když už jste na začátku nakousli ten Megapixel, tak se to pokusím vysvětlit na něm. Na stránce detailu produktu jsou fotky, stručný popis, do košíku, cena, sklad apod. Potud všechno fajn. Pokud ovšem máme k produktu co říci (podrobné parametry, plusy, mínusy, hodnocení a komentáře k produktu). Otázka je, jak to vyřešit co nejlépe.
Jak už to tak bývá, možností je požehnaně. Pojďme si popsat ty smysluplné, přičemž se vždy zaměříme na hlavní výhody a nevýhody nabízeného řešení:
1. Záložky s vlastními stránkami
Tuhle možnost můžete vidět například na současné verzi webu Megapixel.cz nebo v obchodech patřících k Mall.cz. Používá se obvykle u výrobků, u nichž máte k dispozici velké množství informací, které chcete přehledně rozdělit do skupin a jednotně prezentovat napříč celým webem.
Výhody
- Každá skupina informací má vlastní stránku. Větší množství stránek může být výhodné z hlediska SEO – získáte větší kontrolu nad rozmístěním a hustotou klíčových slov a strukturou obsahu.
- Přehlednost. Vyšší přehlednost není jistá, nicméně ze zkušenosti vím, že při menším množství obsahu na stránce je nižší šance, že se designér dopustí závažných chyb.
- Rychlost načítání stránky. Tato vlastnost je v dnešní době spíše zanedbatelná.
Nevýhody
- Při každém přechodu mezi záložkami se znovu načte celá stránka. Obvykle přitom zobrazí web od vrchního okraje případně od pruhu se záložkami (pokud míří odkaz záložky na kotvu ve stránce), což většinou vede k většímu či menšímu „cuknutí“ stránky a následnému zmatení uživatele. Tohle je z hlediska použitelnosti dost nepříjemné.
- Hrozí vznik duplicitního obsahu. Pokud některé záložky obsahují jen malé množství unikátního obsahu, hrozí, že budou vyhledávače stránky záložek považovat za duplicitní.
2. Záložky přepínané JavaScriptem
Na pohled vypadá toto řešení úplně stejně jako předchozí, po technické stránce je ale zcela odlišné. K vidění je třeba v e-shopu Palm PC. Záložky tentokrát přepínáme JavaScriptem, takže veškerý obsah všech záložek máme pouze na jediné stránce. Přepínání mezi záložkami je rychlejší a nedochází při něm ke znovunačtení stránky.
Výhody
- Rychlost přepínání mezi záložkami.
- Žádné poskakování stránky při přepínání záložek.
- Hodně obsahu na jedné stránce. Ve vyhledávačích máte pro každý produkt jedinou stránku, na kterou můžete zaměřit veškerou svoji pozornost. Obsah se tak nedělí mezi větší množství velice podobných stránek.
Nevýhody
- Hodně obsahu na jedné stránce. Některý obsah, jako například hodnocení nebo diskuse, vám může stránku produktu obsahově neúměrně natáhnout, zaplevelit velkým množstvím balastu a vůbec nabourat vaše snahy o její optimalizaci pro vyhledávače.
- Vyšší doba načítání stránky. Všechny informace k produktu se nacházejí na jediné stránce, proto je vyšší její celkový objem, a tudíž i doba načítání.
- Větší zátěž databáze. Při otevření stránky produktu načítáte všechny informace (například včetně komentářů), což výrazně zvyšuje počet dotazů do databáze.
- Zmatení uživatele při příchodu z vyhledávačů. Vyhledávače indexují obsah všech záložek, nicméně při příchodu na stránku je otevřena jen jedna z nich. Uživatel na ní přitom vůbec nemusí najít obsah, který mu vyhledávač zobrazil ve výsledcích vyhledávání.
3. Vše na jedné stránce
V hlavě bohužel nemám žádný vhodný příklad, ale toto řešení spočívá jednoduše v tom, že všechny informace zobrazíte na jediné stránce bez jakýchkoliv záložek.Můžete je přitom rozdělit do sloupců, vypsat je pod sebe s nadpisy nebo využít jakékoliv jiné rozvržení stránky. Výhody i nevýhody ve vztahu k vyhledávačům jsou v tomto případě obdobné jako u záložek přepínaných JavaScriptem. Co se týče uživatelů, tam nese toto řešení velké riziko plynoucí z dlouhých a často nepřehledných stránek. Kromě toho klade zpracování velké nároky na správnou prioritizaci informací, nutí vás totiž obvykle některé údaje umísit výše a jiné až na konec stránky. Hrozí, že k některým z nich se uživatel vůbec nedoscrolluje.
4. Úryvky na jedné stránce
Světoznámým reprezentantem tohoto přístupu je Amazon. Všechny informace umisťuje na jedinou stránku, většinu z nich ale pouze ve formě „ochutnávky“ s odkazem na kompletní výpis.Přečíst si tu tak můžete například 3 z celkových 150 komentářů, vidíte jen přibližně první desítku z uživateli použitých štítků atd. Toto řešení je podobné výpisu všech informací na jediné stránce, obvykle ale bývá přehlednější, méně zatěžuje databázi a jeho výsledkem je kratší stránka. Stejně jako předchozí se hodí především v případech, kdy by už záložek u každého produktu bylo příliš. Tentokrát si ale musíte dát velký pozor při určování kritérií, podle kterých chcete „útržky“ z jednotlivých sekcí vybrat, a opět je důležité obsah na stránce logicky rozmístit a seřadit.
5. Kombinace výše uvedených řešení
Všechna výše uvedená řešení můžete samozřejmě podle libovůle kombinovat. Obecně však platí, že v takovém případě je dvojnásob důležité mít po ruce zkušeného designéra a provádět při vývoji testování chystaného rozvržení na uživatelích. Příkladem budiž dle mého názoru výborně navržený obchod NewEgg.com, který kombinuje výpis úryvků na jediné stránce s JavaScriptem přepínanými záložkami.
Doporučení na závěr
Asi už tušíte, že žádné z nabízených řešení nelze označit za nejlepší a univerzálně použitelné. Vždy musíte vycházet ze specifik vašeho oboru a sortimentu a v každém případě je při návrhu dobré zkoušet různé možnosti a testovat je na lidech. Přesto se pokusím uvést malý tahák, který by vám mohl při výběru pomoci: Záložky s vlastními stránkami se nejlépe hodí pro weby, které mají omezený počet typů obsahu (záložek), ale každý z nich je velice rozsáhlý a specifický. Je tedy žádoucí rozdělit obsah na více stránek a zabezpečit tak větší množství potravy pro vyhledávače a zrychlení načítání stránek při menší zátěži databáze. Záložky přepínané JavaScriptem bych doporučil pro většinu běžných případů. Vyhnete se s nimi zmatení uživatelů i riziku duplicitního obsahu, vše bude probíhat rychle a hladce. Pokud se bojíte načítání všech diskusních příspěvků na stránce produktu, můžete na jejich záložce vypsat jen část z nich a ostatní zobrazit až na zvláštní stránce. Vše na jedné stránce by měly zobrazovat jen obchody s menším množstvím informací a dobrým designérem (provádějícím uživatelské testování). V takovém případě uživatelům usnadníte skenování veškerého obsahu dostupného k vybranému produktu, jen si dejte pozor, ať si uživatel všimne, že stránka pokračuje i pod „přehybem“. Úryvky na jediné stráncekladou asi největší nároky na designéra i informačního architekta. Je potřeba dbát na kvalitní výběr a pořadí obsahu, proto bych je doporučil jen obsahově tak rozsáhlým obchodům, kde už záložky nemohou efektivně plnit svou funkci.
Máte také dotaz?
Napište nám ho na info@h1.cz nebo do komentářů pod článkem a my se vám pokusíme tady na blogu poradit.
Autor zcela pomíjí aktuální boom Webu 2.0 a úplně zapomněl na AJAX. Není třeba někde schované nějaké další řešení 6? Ale to již nechám na zítřejší předělávku spotu :)
ad [1] Mám ten pocit, že tyto buzz wordy jsou ukryty v možnosti číslo 2 a autor na asynchronní javascript nezapomněl. Navíc si ovšem nemyslím, že by dynamické inkludování textu nějak pomohlo stránce v rámci optimalizace pro vyhledávače.
Mne by však k tomuto bodu užití javascriptových záložek zajímala důležitost jednoho negativního důsledku – a to možného zmatení uživatele, který přišel z vyhledávače. Pokud se jeho klíčové slovo opravdu dotýká tematiky, kterou se stránka zabývá (dejme tomu fotoaparát Canon 350D) a ne např. parametru (citlivost ISO), bude pro návštěvníka velkou překážkou se dostat k obsahu, který hledal? Předpokládám tedy, že se ocitnul na správné stránce produktu, kde vidí svůj vysněný fotoaparát, jenom hledá určité vlastnosti, které jsou ukryty pod záložkou Podrobnější vlastnosti. Dá se to označit za uživatelskou nepřívětivost či podobný prohřešek?
[2] dynamickým natahováním potřebných částí by odpadly všechny nevýhody, zmíněné v bodu 2. Proč to autor nezmínil? A samozřejmě, vámi naznačený problém s přístupností lze snadno řešit kombinací s bodem 1. Pokud ovšem AJAX chápete jako buzzword a ne jako skvělou možnost ještě více vylepšit použitelnost obyčejných stránek, pak vám není pomoci.
[3]Jenže by se objevil problém, že by vyhledávače neindexovaly žádný AJAXem loadovaný obsah :) Čiliže přijdeme o všechny KW v detailech produktu, diskuzi atp.
Díky za komentáře.
Pokud se jeho klíčové slovo opravdu dotýká tematiky, kterou se stránka zabývá (dejme tomu fotoaparát Canon 350D) a ne např. parametru (citlivost ISO), bude pro návštěvníka velkou překážkou se dostat k obsahu, který hledal? Předpokládám tedy, že se ocitnul na správné stránce produktu, kde vidí svůj vysněný fotoaparát, jenom hledá určité vlastnosti, které jsou ukryty pod záložkou Podrobnější vlastnosti. Dá se to označit za uživatelskou nepřívětivost či podobný prohřešek?
Míra rizika samozřejmě závisí na konkrétní situaci a především záměru hledajícího člověka a z něj plynoucího dotazu.
Budu-li vycházet z Vašeho příkladu, opravdu se může stát, že člověk hledá (a najde) kýžený fotoaparát a bude spokojený. Na druhé straně se ale na stránce fotoaparátu nachází také spousta dalších slov, na která se web může objevit ve výsledcích vyhledávání (jako např. Vámi zmíněný výraz „citlivost ISO“), u nichž už ale není propojení s obsahem stránky tak zřejmé. Je totiž jen velice nepravděpodobné, že člověk, který se vyhledávače ptá na „citlivost ISO“, se bude shánět po Canonu 350D a byť by mu jedna ze záložek tohoto fotoaparátu mohla pomoci (např. na stránce specifikace by našel u zkratky „ISO“ odkaz do slovníku), on nikde na vstupní stránce hledaný výraz neuvidí.
Když k výše zmíněnému přidáme rychlost, s jakou lidé obvykle opuštějí vstupní stránky, pokud na nich na první pohled nenaleznou shodu s položeným dotazem, rýsuje se nám celkem slušné riziko, že o část potenciálních návštěvníků/zákazníků přijdeme. Můžete sice namítnout, že tenhle člověk stejně nepřišel nakupovat, ale já zastávám názor, že každý alespoň trochu relevantní návštěvník je lepší než žádný.
Díky za rychlou reakci na můj komentář.
Možná bych článek trochu doplnil. Obě záložkové varianty mají ještě jeden podstatný problém (netvrdím, že se jedná o nevýhodu). Zákazník nemusí pochopit, co jednotlivé záložky znamenají a co má očekávat od kliku na ně. To vede k tomu, že na odkazy v záložkách moc lidí nekliká, i když by možná klikat chtěli, ale odkazů si prostě nevšimnou. Toto se také potvrdilo při testování megapixelu, jedná se o závěr s nejvyšší prioritou. Zajímavé bude sledovat, jakých změn se na megapixelu v tomto směru dočkáme.
[1] Zakopaný pes nebude ani tak v použité technologii, ale v tom, jaký přínos a komfort nabídneme zákazníkovi. Ten je totiž vždy na prvním místě. To, že se někdo přestane orientovat na službu zákazníkovi, ale bude se orientovat na moderní trendy, se projeví. Zákazník prostě pude jinam (tam, kde svoji potřebu uspokojí). Ajax samotný tedy nijak nepřispěje ke zlepšení problému prezentace datailních informací o produktu. Příkladem budiž současný web Bati…
A jak se k problému detailní stránky produktu staví ostatní? Žádný problém nemáte, nevíte o něm, neřešíte ho, nechcete o něm vědět nebo řešíte ho jinak?
Díky za komentář, Jirko.
Zákazník nemusí pochopit, co jednotlivé záložky znamenají a co má očekávat od kliku na ně. To vede k tomu, že na odkazy v záložkách moc lidí nekliká, i když by možná klikat chtěli, ale odkazů si prostě nevšimnou. Toto se také potvrdilo při testování megapixelu, jedná se o závěr s nejvyšší prioritou.
U Megapixelu to je trošku jinak. Problém u něj netkví v tom, že by zákazníci nevěděli, co za záložkami očekávat a proto neklikali, ale v riziku, že si zákazníci záložek vůbec nevšimnou. Na vině tu ale není použití záložek jako takové, ale zvolená výrazná žlutá barva, šířka bloku se záložkami a jejich grafická podoba obecně.
Ze statistik naštěstí plyne, že na záložky u Megapixelu i přes jejich chyby kliká valná většina návštěvníků. Zajímavé přitom je, že například pořadí vůbec nehraje roli – nejčastěji otevíranou záložkou jsou komentáře, které se nacházejí až za poslední z nich.
„Ze statistik naštěstí plyne, že na záložky u Megapixelu i přes jejich chyby kliká valná většina návštěvníků.“
Vašku, v čem je tedy problém těch záložek, když na ně valná většina uživatelů kliká? Není to tak trochu v rozporu s výsledky uživatelského testování? Nebo ta valná většina není dost?
[4] opravdu si to myslíte? To snad ne!
Vašku, v čem je tedy problém těch záložek, když na ně valná většina uživatelů kliká? Není to tak trochu v rozporu s výsledky uživatelského testování? Nebo ta valná většina není dost?
V rozporu to není. U testování také záložky nakonec většina lidí objevila/pochopila, to ale neznamená, že je vše v pořádku. Ze statistik snadno nevyčteš, proč řekněme 10 % (čísla si teď vymýšlím) lidí na žádnou záložku nekliklo, nebo proč na stránce produktu strávili XYZ vteřin, než si některou ze záložek rozklikli. Právě proto se provádí uživatelské testování, abys viděl web „v akci“ a mohl tyhle neznámé rozklíčovat.
No, a u testování Megapixelu se ukázalo, že i když záložky většina lidí nakonec použije, jejich současná podoba skýtá potenciální riziko, že používání webu znesnadňují. Proto jsme se je rozhodli přepracovat do podoby, kterou sám dobře znáš. :-)
Díky za vysvětlení, zní to přesvědčivě (BTW: v nové podobě už moc zainteresovaný nejsem, takže na to koukám už trošku s odstupem).
[4]Záleží na tom jak a k čemu ten Ajax použijete. Nejdřív přeci nejdřív musíte zajistit použitelnost bez javascriptu pro uživatele i pro vyhledávače. Ajax je nadstavba zlepšující použitelnost a rychlost načítání a nemá mít vliv na to jestli stránka funguje pokud je js vypnutý, navíc spousta lidí používá prostřední kolečko myši pro otevření odkazu do nového okna, pak jsou tyhle polovičaté DOM řešení k ničemu. Bohužel ten AJAX přidělává trochu přáci, protože pak ten obsah vlastně musíte tvořit jakoby dvakrát. Tady je příklad, aby jsme si rozuměli o čem mluvím https://xy.wz.cz/…ace-include/
Ještě jsem zapomenul na to, že takové řešní má samozřejmě své mouchy, protože se vygenerovaný obsah nedá pohodlně ukládat k oblíbeným. To by asi šlo řešit kotvami. Chybějící historie takto řešených stránek se dá vytvořit javascriptovým přepsáním stránky po vygenerování vkládaného obsahu pomocí: document.write(document.documentElement.innerHTML);document.close(); pak k obsahu prohlížeč kupodivu přistupuje jako k nové stránce a má jí v historii. Nemám online příklad, pouze tady https://concer.to/lastfm-test/ kde je tohle řešení použité pouze pro MSIE, které nezvládá standardně generovat flash a tahle obezlička mu pomáhá. Když si to v něm zkusíte, uvidíte, že se historie normálně vytváří i když jste stále na jedné stránce.
Dle mého názoru má Amazon ukrutně dlouhé a nepřehledné stránky s detailem produktu. Příliš velké množství oddělených obsahových bloků. Jen přečíst nadpisy těchto bloků mi trvá pěknou chvíli :)
Megapixel je v tomto ohledu jednička! Je pro mně velkou inspirací.