Máte funkční e-shop, produkty jsou nahrané, ale něco prostě nesedí. Návštěvníci odcházejí během několika sekund a konverze jsou tristní. Problém často nespočívá v ceně ani v sortimentu, ale v tom, jak váš obchod vypadá a jak je obsah vizuálně zpracovaný. V šestém díle našeho seriálu o tvorbě e-shopu se podíváme na to, jak správně formátovat obsah a vizuálně upravit internetový obchod tak, aby zákazníky neodradil, ale naopak je přesvědčil ke koupi.
Proč je vizuální úprava tak důležitá
Představte si, že vstoupíte do kamenného obchodu, kde je špatné osvětlení, zboží chaoticky poházené a cenovky nečitelné. Pravděpodobně byste okamžitě odešli. Online je to stejné, jen máte ještě méně času zaujmout. Studie ukazují, že uživatelé si vytvoří názor na web během pouhých padesáti milisekund. To je doba kratší, než trvá mrknutí oka.
Kvalitní vizuální zpracování e-shopu není jen o estetice. Jde o budování důvěry, zvyšování konverzí a vytváření příjemného nákupního zážitku. Zákazník, který se na vašem webu cítí dobře a snadno najde, co hledá, se s mnohem vyšší pravděpodobností stane opakovaným kupujícím.
Typografie: Základ čitelnosti
Výběr správného písma a jeho formátování může zásadně ovlivnit, jak dlouho návštěvníci na vašem e-shopu vydrží. Špatná typografie unavuje oči a odrazuje od čtení.
Výběr fontů pro e-shop
Pro e-shop doporučujeme kombinaci maximálně dvou až tří fontů. Jeden pro nadpisy, druhý pro běžný text a případně třetí pro zvýraznění speciálních prvků jako jsou ceny nebo call-to-action tlačítka.
- Sans-serif fonty jako Open Sans, Roboto nebo Lato jsou ideální pro běžný text – jsou čitelné i na menších displejích
- Serif fonty můžete využít pro nadpisy, pokud chcete působit elegantněji a prestižněji
- Displayové fonty používejte velmi opatrně a jen pro speciální účely – většinou více ruší než pomáhají
Velikost a řádkování textu
Základní text by měl mít minimálně šestnáct pixelů, ideálně osmnáct pixelů. Menší písmo působí neprofesionálně a nutí uživatele přimhouřit oči. Řádkování nastavte na sto padesát až sto sedmdesát procent velikosti písma – text tak bude lépe čitelný a vzdušnější.
Nadpisy strukturujte hierarchicky. Hlavní nadpis (H1) by měl být výrazně větší než podnadpisy (H2, H3). Typické velikosti jsou třicet šest až čtyřicet osm pixelů pro H1, dvacet čtyři až třicet dva pixelů pro H2 a osmnáct až dvacet čtyři pixelů pro H3.
Barevné schéma: Psychologie a praxe
Barvy v e-shopu nejsou jen otázkou vkusu. Mají obrovský psychologický vliv na rozhodování zákazníků a mohou zvýšit nebo snížit konverze o desítky procent.
Základní barevná paleta
Vytvořte si konzistentní barevnou paletu skládající se z těchto prvků:
- Primární barva – hlavní barva vašeho brandu, používejte ji pro loga, hlavní tlačítka a důležité prvky
- Sekundární barva – doplňková barva pro méně důležité prvky a variace
- Neutrální barvy – šedé odstíny pro pozadí, texty a rámečky
- Akcentová barva – výrazná barva pro call-to-action prvky a upozornění
Barvy a jejich vliv na nákupní chování
Modrá vzbuzuje důvěru a je oblíbená u technologických e-shopů. Zelená asociuje ekologii, zdraví a často funguje dobře pro bio produkty. Červená vytváří pocit naléhavosti a je efektivní pro výprodeje a akce. Oranžová je přátelská a energická, hodí se pro mladší publikum. Černá a zlatá působí luxusně a prestižně.
Nejdůležitější je však kontrast mezi textem a pozadím. Minimální doporučený kontrast je čtyři a půl ku jedné pro běžný text a tři ku jedné pro velké texty. To zajistí čitelnost i pro uživatele se zrakovým postižením.
Formátování produktových stránek
Produktová stránka je srdcem každého e-shopu. Její správné formátování může být rozdílem mezi opuštěným košíkem a dokončenou objednávkou.
Struktura popisu produktu
Dlouhé souvislé texty nikdo nečte. Rozdělte informace do snadno stravitelných bloků:
- Krátký úvodní odstavec se stručným popisem produktu a jeho hlavními výhodami
- Odrážkový seznam klíčových vlastností a specifikací
- Detailnější popis rozdělený do sekcí s podnadpisy
- Technické parametry v přehledné tabulce
- Sekce s často kladenými otázkami
Zvýraznění důležitých informací
Využívejte vizuální hierarchii k upoutání pozornosti na klíčové prvky. Cenu zobrazte výrazně a dobře viditelně. Pokud je produkt ve slevě, ukažte původní cenu přeškrtnutou a úsporu zvýrazněte barevně. Dostupnost zboží by měla být okamžitě patrná – zelená pro skladem, oranžová pro poslední kusy, červená pro vyprodáno.
Call-to-action tlačítka jako „Přidat do košíku“ musí být největšími a nejviditelnějšími prvky na stránce. Používejte kontrastní barvy a dostatečnou velikost – minimálně čtyřicet čtyři pixelů na výšku pro snadné kliknutí i na mobilních zařízeních.
Práce s bílým prostorem
Jeden z nejčastějších začátečnických prohřešků je přeplnění stránky obsahem. Bílý prostor (negative space) není plýtvání místem, ale naopak jeden z nejdůležitějších designových prvků.
Kolem důležitých prvků jako jsou tlačítka, nadpisy nebo ceny nechávejte dostatek volného místa. To přitahuje pozornost a usnadňuje orientaci. Mezi jednotlivými sekcemi používejte konzistentní odsazení – například šedesát až osmdesát pixelů mezi hlavními bloky a třicet až čtyřicet pixelů mezi menšími prvky.
Šířka textového sloupce by neměla přesáhnout šest set až sedm set padesát pixelů. Širší texty jsou obtížně čitelné, protože oko musí dělat příliš dlouhé pohyby. Na velkých monitorech je lepší využít prostor pro postranní prvky než roztahovat text přes celou šířku.
Responzivní design a mobilní zobrazení
Více než polovina návštěvníků e-shopů přichází z mobilních zařízení. Pokud váš obchod na mobilu nefunguje perfektně, přicházíte o obrovskou část potenciálních zákazníků.
Priorita mobilního zobrazení
Moderní přístup „mobile-first“ znamená navrhovat nejprve pro mobily a pak škálovat na větší obrazovky. To zajišťuje, že nejdůležitější obsah a funkce budou fungovat i na nejmenších displejích.
- Tlačítka musí být dostatečně velká pro pohodlné kliknutí prstem – minimálně čtyřicet čtyři krát čtyřicet čtyři pixelů
- Formuláře by měly být jednoduché s minimem povinných polí
- Menu musí být přehledné a snadno ovladatelné jednou rukou
- Obrázky se musí přizpůsobit šířce displeje bez horizontálního scrollování
Testování na různých zařízeních
Nestačí jen zmenšit okno prohlížeče. Otestujte váš e-shop na skutečných mobilních zařízeních různých velikostí. iPhone má jiné proporce než Android telefony, tablety zase úplně jiné. Co funguje na jednom zařízení, může být nečitelné na druhém.
Obrázky a jejich optimalizace
Kvalitní produktové fotografie jsou základ, ale jejich správné formátování a optimalizace je stejně důležitá.
Technické parametry obrázků
Velikost souborů je kritická pro rychlost načítání. Cílte na maximálně sto až sto padesát kilobajtů na obrázek. Využívejte moderní formáty jako WebP, které nabízejí lepší kompresi než klasické JPG. Pro obrázky s průhledností použijte PNG, ale jen tam, kde je to opravdu nutné.
Rozlišení obrázků by mělo být optimalizováno pro různá zařízení. Hlavní produktové fotografie nastavte na minimálně tisíc dvě stě pixelů na šířku pro možnost přiblížení. Miniatury stačí tři sta až čtyři sta pixelů. Využívejte responzivní obrázky s různými velikostmi pro mobily a desktopy.
Konzistence vizuálního stylu
Všechny produktové fotografie by měly mít jednotný styl. To znamená stejné pozadí (ideálně bílé nebo světle šedé), konzistentní osvětlení a podobné úhly pohledu. Zákazník by měl mít pocit, že prohlíží jeden profesionální katalog, ne sbírku obrázků z různých zdrojů.
Typografická hierarchie v praxi
Správná hierarchie vede oko návštěvníka přirozenou cestou od nejdůležitějších informací k detailům.
Úrovně důležitosti
Na každé stránce by měl být jasně dominantní prvek – většinou název produktu nebo hlavní nadpis. Pod ním následují sekundární informace jako cena a dostupnost. Teprve pak přichází popis a další detaily.
Používejte vizuální váhu k rozlišení důležitosti. Důležité prvky dělejte větší, tučnější nebo barevně odlišené. Méně důležité informace mohou být menší, světlejší nebo v neutrálních barvách.
Konzistence napříč e-shopem
Stejné typy informací formátujte vždy stejně. Pokud jsou ceny na jedné stránce tučně a červeně, musí být stejné všude. Tlačítka by měla mít konzistentní vzhled a chování. To vytváří předvídatelnost a uživatelé se ve vašem e-shopu snadněji orientují.
Formuláře a jejich čitelnost
Registrace, přihlášení a především objednávkový formulář jsou kritická místa, kde zákazníci často odpadávají.
Zjednodušení formulářů
Požadujte pouze nezbytně nutné informace. Každé další pole snižuje pravděpodobnost dokončení objednávky. Pokud nějakou informaci nepotřebujete okamžitě, neptejte se na ni.
- Popisky polí umístěte nad vstupní pole, ne dovnitř – to zajistí, že zůstanou viditelné i při vyplňování
- Používejte správné typy inputů – pro email emailové pole, pro telefon číselné pole s odpovídající klávesnicí na mobilu
- Chybové hlášky zobrazujte jasně a konstruktivně – ne jen „Chyba“, ale „Email musí obsahovat @“
- Indikujte pokrok při vícekrokových formulářích – uživatel musí vidět, kolik kroků ho ještě čeká
Vizuální zpětná vazba
Formulářová pole by měla reagovat na interakci uživatele. Aktivní pole zvýrazněte barevným rámečkem. Správ