6 prvků úspěšného web designu – jak vypadá web, který prodává

Pojďme probrat design webovek.

Dobrý design = dobrý první dojem... dál už to znáte

Situace je taková, že i copywriting od samotného reklamního boha může být doslova pohřben špatným webdesignem.

Pokud pro vás pracuje web designér nebo web agentura, je velká šance, že vám vytvoří design v souladu s nejlepší praxí a bude to fungovat.

Pokud si tvoříte web sami v jednom z web builderů nebo přemýšlíte a chystáte zadání pro marketingovou agenturu, myslím, že se vám bude hodit, když budete vědět, které designové prvky prodeji pomáhají a které mu naopak škodí.

V následujícím textu vám pomohu ujasnit si, jak by měl fungující web vypadat, a objevíte také designové perly, které jsou u tvůrců webů oblíbené, ale u platících zákazníků už tolik ne.

Pojďme na to!

Žádné překvapení se ani tady nekoná. V jednoduchosti je krása, opět a zase.

Pokud používáte webovku jako galerii toho, co jste kdy vymysleli, a od návštěvníků vašeho webu nic neočekáváte, nechcete nic prodat ani sdělit, pak si na web můžete dát doslova cokoliv. Váš web, vaše pravidla.

Jestli ale chcete, aby váš web prodával a pomohl vašemu byznysu růst, je třeba, aby podle toho vypadal a fungoval.

Základním stavebním kamenem prodejního webu je vždy text. Jasné sdělení, které chcete přesvědčivě předat a které je zakončeno výzvou k tomu, aby u vás zákazníci nakoupili.

Bez textu, který dává smysl a funguje, se vám nebude dařit prodávat dlouhodobě nic. Ani fotografie, kterými zaplníte celou vaši webovku, a ani design, který může být světový, vám bez textu úspěšně prodávat nedokáže.

Z toho vyplývá, že designem se budete zabývat až poté, co budete mít připraveno vaše přesvědčivé sdělení – prodejní text – copy – copywriting.

Ne naopak.

Úkolem designu je dodat vašemu sdělení podobu a maximálně tak podpořit vaše prodeje, o které jde především.

Aneb design vaší stránky nesmí soupeřit s textem o pozornost návštěvníků vašeho webu. Pokud soupeří, pak design prodejům na vašem webu škodí.

Je dobré zmínit, že webovky známých a zaběhnutých značek si mohou dovolit porušit veškerá pravidla, která zmíním. Jde o to, že velké značky s tisíci zákazníky si už povědomí ve společnosti vybudovaly. Zákazníci na jejich stránky často ani jít nepotřebují, a když jdou, je to většinou už rovnou do košíku.

Co to tedy znamená pro webovku vašeho menšího byznysu?

Především jedno – naplňte očekávání vašich zákazníků.

Přišli na váš web, první hurá.

Aby tam zůstali a přečetli si, co jim chcete sdělit, a vy se tak mohli radovat podruhé, je třeba, aby se tam cítili dobře. Aby si připadali jako na místě, kde jim rozumí a kde najdou informace, které hledají.

Jak na to?

1. Struktura

Základní prvky jsou umístěny tam, kde je lidé očekávají.

Logo a název vlevo nahoře, navigační lišta uprostřed nebo vpravo nahoře.

Vlevo, případně uprostřed uvítací obrazovky sdělení – čemu se věnujete, jak a kterým zákazníkům pomůžete.

Napravo, případně uprostřed fotka nebo ilustrace, která reprezentuje vaši značku a smysl vašeho podnikání. Více k výběru fotky za chvíli.

Na úvodní obrazovku je vhodné přidat náznak toho, kam se má zákazník dále vydat. Tlačítko, pokud chcete, aby zákazník přešel na některou konkrétní stranu, šipka směrem dolů, pokud chcete, aby návštěvník začal skrolovat.

Na úvodní straně není potřeba sdělovat víc. Příliš informací bude působit chaoticky a hlavně si jich návštěvníci nemusí všimnout nebo je nevstřebají správně.

Vzorový příklad. Jak na vás působí?

Zápatí, tedy nejspodnější část vašeho webu, je stejně důležité jako zbytek webu.

V případě, že šlo vše podle plánu, se právě tady váš čtenář ocitne, když si vaše sdělení dočte – pokud ještě není dostatečně přesvědčen kliknout na vaši výzvu k akci. Zápatí je místo, kde mu můžete nabídnout další možnosti, kam dál, a on je ochotně přijme.

Dobře strukturované zápatí je důležité. Je to také místo, kam automaticky sjíždíme, když hledáme určité odkazy nebo informace, kvůli kterým jsme možná přišli.

Je to nejen vaše IČO a odkaz na vaše sociální sítě.

Může to být kontakt, informace pro dodavatele, obchodní partnery a jiné.

Velmi užitečné je mít v záhlaví druhý navigační panel, odkud se mohou čtenáři plynule dostat do dalších částí vašeho webu.

Mějte na paměti, že se uživatelé internetu efektivně přesunuli k používání mobilních telefonů a jen málo jich ještě využívá počítače.

Je důležitější než kdy dřív, aby vaše stránka vypadala dobře hlavně na telefonu.

2. Formátování

To, jak text zapadá do designu, je stejně důležité jako obsah textu samotného.

Dobrý copywriter vám s tímto vždy pomůže, protože jen tak se ujistí, že jeho práce dosáhne očekávaných výsledků.

Pokud si text píšete sami, měli byste se opět držet jednoduchosti a přehlednosti.

Vaším prvním úkolem je přimět čtenáře, aby četli vaše sdělení postupně tak, jak dává smysl a působí nejvíc přesvědčivě.

Co a kdy čtenářům naservírovat si můžete přečíst tady – Co je AIDA a PAS?

Toho, aby se vaši čtenáři pročítali sdělením podle vašeho plánu, můžete docílit tak, že návštěvníkům omezíte možnosti, kam se mohou na vašem webu rozběhnout. Budou tak nuceni číst vaše sdělení nebo aspoň skimmovat v pořadí, které nejlépe svědčí vám a vašim prodejům.

Skimmovat = proletět stránku v rychlosti, prohlédnout si obrázky, přečíst maximálně nadpisy, možná tučné písmo a ten nejkratší odstavec.

Formát samotného textu

Prodáváte na webu. Není třeba znovu vynalézat kolo. I další prvky na vašem webu by měly být ve formátu, na který jsme všichni zvyklí, a můžeme se tak v klidu soustředit na nákup samotný. A to přece jako majitel webu chcete.

Odkazy jsou podtržené, tlačítka vypadají jako tlačítka a obvykle obsahují šipku, která značí přesun do jiné části webu. Odkazy v jiném formátu je až příliš snadné přehlédnout.

Pro stěžejní sdělení, tj. větu, která dává smysl celému odstavci a bude dávat smysl i v příběhu pro skimmery, použijte jednoduše B, Bold, tučné písmo.

Pro přímou řeč a další odlišení pojmů, které budou vysvětleny, nebo technických výrazů, na které odkazujete, použijte I, Italics, kurzívu.

Pro

• výčet možností

• seznam

• výhody

použijte odrážky.

Použijte velikost písma, která je přátelská. Lidé by neměli zvedat svůj telefon blíže k očím nebo přibližovat hlavu k obrazovce, aby váš text přečetli.

Je lepší, když bude vaše stránka delší, ale text bude jednoduše čitelný.

Vhodná velikost textu v odstavcích je mezi 12–16 pixely (podle druhu písma).

Ujistěte se, že každá část sdělení má svůj nadpis, který je dostatečně velký.

Capslock nepotřebujete. Není třeba na zákazníky křičet. Dostatečně velké tučné písmo je ideální volbou pro nadpisy.

3. Dostatek vzduchu

Nebezpečná věc, která se vašemu prodejnímu webu může jednoduše stát, je, že vaše návštěvníky udusíte informacemi. Samozřejmě délka textu, která je zapotřebí k přesvědčení, není a nemůže být omezena.

Ovšem servírování je kritické.

Smyslem vaší úvodní stránky je návštěvníky uvést do toho, co děláte a jak jim dokážete pomoci. Nastínit, co je s vámi čeká.

Smyslem není sdělit jim všechno, co považujete za důležité, na jednom místě.

“Hlavně abyste na nic nezapomněli, hlavně to tam někde nacpat.” Bohužel z takové tlačenky, i když si zákazník najde, co potřebuje, nemůže vzniknout přesvědčivá prezentace.

Jak jsem již zmínil, vaším úkolem je prezentovat celé své sdělení v pořadí, které dává smysl.

Důležitým místem vašeho sdělení je prostor, kde se čtenář nadechne. Kde vstřebá, co se právě dozvěděl. Dá své hlavě na vteřinu odpočinout a s čerstvou energií si přečte další nadpis, který ho vtáhne do další části.

Místo k nadechnutí může být ilustrační obrázek nebo grafika, tím nejdůležitějším je ovšem negativní pozadí – prázdné místo mezi prvky, tzv. “white space”.

Opět platí, že je lepší mít webovku delší, ale poskytnout dostatek místa mezi každým odstavcem, nadpisem, obrázkem tak, aby se čtenář cítil jako v otevřeném prostranství. V prostoru, kde se na něj netlačí. Kde se může svobodně nadechnout a rozhodovat.

Prostor, svoboda, žádný nátlak

Vhodnou pomůckou, jak zjistit, jestli máte na webu dostatek vzduchu, je projíždět kurzorem myši mezi jednotlivými prvky stále stejnou rychlostí. Pokud musíte zpomalit, abyste udrželi kurzor mezi prvky, pravděpodobně je váš obsah příliš nahusto.

4. Pořádek nade vše

Množství prostoru k nadechnutí je stejně důležité jako pořádek právě v tomto prostoru.

Základem pro čistý design je rovnoměrnost a konzistence ve white space. Nejedná se pouze o bílé prostředí, ale o všechen prostor mezi prvky nebo i v jednotlivých prvcích.

Může to být například text v tlačítku. Je důležité, aby text byl ze všech čtyř stran stejně daleko od jeho krajů. Aby všechna příbuzná tlačítka na jedné stránce byla stejně velká, měla stejné barvy a písmo. Konzistence je pořádek.

Rovnoměrné rozložení je základem

Stejně tak odstavce, nadpisy a fotografie jsou zarovnány v jedné linii. Prostor mezi jednotlivými sekcemi na webové stránce by měl být jednotně velký.

Rovnoměrný negativní prostor je pro design vašeho webu stěžejní.

5. Barvy

Ano, možná jedna z nejdůležitějších částí, o které se musíte rozhodnout.

Jaká barva bude specifická pro vaši značku. Je to vždy pouze na vás a vašem uvážení, avšak mějte na paměti, že barva může hrát ve vnímání vaší značky velkou roli.

Existuje řada veřejně dostupných studií o tom, jaké barvy vyvolávají v lidech jaké pocity a dojmy.

Pravděpodobně jste si všimli, že například většina bank s oblibou používá odstíny modré, zatímco ekologické organizace tíhnout k odstínům zelené a třeba bílá v nás evokuje čistotu, červená zase ostražitost.

Ať už se rozhodnete pro jakoukoliv barvu, obecně platí překvapivé – v jednoduchosti se toho skrývá nejvíc. Váš web by měl být místo, kde se lidé cítí dobře. Barvy a jejich kombinace, které zvolíte, by měly pomáhat naladit pocity, které jsou spojeny s vaším konkrétním produktem nebo službou.

Kdyby jen těch barev nebylo tolik...

Pro web si zvolte jednu hlavní barvu a pár jejich světlých a tmavých odstínů. Můžete mít kombinaci dvou hlavních barev. Vždy je důležité, aby spolu barvy tvořily příjemně vypadající celek.

Budete potřebovat také jednu nebo dvě kontrastní barvy ke zvýraznění tlačítek nebo důležitých textových boxů. Obvykle si na vašem webu vystačíte s 5–7 barvami.

Než se pro barvu rozhodnete, zjistěte si toho dostatek. Barva bude jedna z věcí, se kterou si váš byznys zákazníci spojí.

Pokud to se svým webem myslíte vážně, zvolte raději barvu, která na vaše zákazníky funguje, jak potřebujete, než tu, která je ta vaše oblíbená už od dětství.

Na začátek můžete vyzkoušet některý z generátorů barev pro webovky, například http://colormind.io.

6. Fotky a obrázky

Opět se dostáváme k tomu, jak vážně to se svým byznysem myslíte. Pokud chcete, aby vaše webovka prodávala, budete chtít působit důvěryhodně.

Věrohodné jsou kvalitní fotky vás, vaší firmy, vašich produktů, vašich zákazníků.

Ano, můžete použít některé z nekonečného množství obrázků a fotek online. Například z největší databáze médií online Shutterstock.com

Existuje také množství stránek s menším počtem fotek a videí, které jsou zdarma – například Pexels, Unsplash a jiné.

Co vaší stránce ale opravdu přidá na přesvědčivosti, je reálná fotka z vašeho prostředí, která je relevantní a podporuje sdělení, které komunikujete. Samozřejmě profesionálně pořízená a upravená.

Ruku na srdce – většinou poznáme, jestli je fotka obecná a ilustrační, nebo jestli jsou na ní opravdoví lidé, které můžeme kontaktovat a se kterými budeme spolupracovat.

Je pochopitelné, že šťastní lidé na fotkách jsou vždy pozitivními body pro vaše prodeje.

Designové prvky, které vaše prodeje ohrožují

Množství věcí, kterým byste se měli na vaší webovce vyhnout, jsme již probrali v předešlé sekci.

Další prvky, které kradou pozornost čtenáře a hlavní sdělení tak zaniká, jsou tyto:

Text, boxy, fotky – vše, co se automaticky pohybuje, aniž by čtenář akci vyvolal kliknutím nebo přejetím kurzoru.

Stejně tak automaticky spuštěné video nebo hudba na vašem webu hned poté, co zákazník na vaší stránce přistane nebo k videu přejde (ilustrační video bez zvuku na pozadí úvodní obrazovky je něco jiného a má zcela jiný efekt).

Návštěvník neočekává video, zvuky ani jiné pohyby a nejspíš se bude snažit je okamžitě vypnout a vrátí se k nim sám, až přijde jeho čas. Až zjistí, jestli váš web je to, co hledá.

Vyskakovací okna jsou stejně tak nežádoucí a většina návštěvníků je okamžitě zavře, protože je vyruší. Ano, existují výjimky, kde se vyskakovací okna hodí použít, jako například pro exkluzivní dočasné nabídky nebo upozornění na nějakou událost.

Tyto informace jsou ovšem vždy dostupné i na samotném webu a vyskakovací okno je jen otravným, někdy však účinným upozorněním.

Ve vyskakovacím okně by neměla být důležitá část vaší prezentace, něco, co opravdu chcete, aby si zákazník přečetl. Protože si to nepřečte. Je statisticky dokázáno, že návštěvníci webů nemají vyskakovací okna v lásce.

Pokud se rozhodnete umístit text do fotografie a text nebude čitelný, protože je kontrast příliš malý a bílá písmena splývají s bílým pozadím, váš design vaše sdělení nepodporuje, ale naopak mu překáží.

Text na pozadí z fotek je vždy důležité dobře umístit, a to tak, že se zobrazí jen tam, kde je vidět, a to na všech typech zařízení i různých velikostech monitorů nebo displejů.

Hrajte na jistotu. Text můžete podbarvit kontrastní barvou a pak jeho umístění na barevné pozadí nemusíte řešit.

Skrytá sdělení. Rozklikávací okénko, posouvací pás, text, který se zobrazuje pouze při přejetí kurzorem přes určitou část obrazovky. Toto a jiné jsou prvky, které nesmí obsahovat část vašeho prodejního sdělení. Existuje příliš velký risk, že si toho čtenář nevšimne, a tato část vám bude v přesvědčování chybět.

Můžete sem umístit dodatečné informace; informace, které prodeji přímo nepomáhají, jako jsou například rozměry, technické informace a jiné informace, které nejsou pro vaše sdělení klíčové.

Závěr

V jednoduchosti je nejen krása, ale také síla přesvědčit a komunikovat to, co chcete a jak chcete.