Úvod této stránky se mi hodně líbí.  Ukažme si, proč první sekce stránky zaujme…

2) Jasná hierarchie informací – stránka vás vede. Říká vám, kam se dívat jako první a kam se posouvat očima.

Jedna z možných cest je:

1/ Podíváte se na přísně-sympatického postaršího pána.

2/ Točící kolečko vedle postavy zaujme pozornost.

3/ Přesunete se na hlavní nadpis.

…

…

4/ Po přečtení nadpisu prolítnete textový popis kurzu.

5/ Následuje výrazná výzva k akci.

6/ Přečtete si dodatečné informace o hlavním vystupujícím.

4) Vizuální kontrast = je základním kamenem při tvorbě perfektních webů.

Prvky musí být vůči sobě v kontrastu. Musí být na první pohled okem odlišitelné. Pokud ne, splynou dohromady a snadno je přejdeme. Dostatečný kontrast prvků zaručí, že na sebe vzájemně upozorní.

Co je v této sekci v kontrastu?

…

Písmo

Hlavní nadpis je vůči textu:

• několikanásobně větší,
• a tučnější,
• psaný velkými písmeny.

Barvy

• Tmavé písmo na světlém pozadí.
• Tmavá silueta pána na světlém pozadí.
• Oranžová tlačítka na světlém pozadí.

Prvky v popředí

Všimněte si bloku s popiskem osoby. Pozadí webu má lehce tmavší barvu. Blok je naopak bílý a má ohraničení. Obecně platí, že světlejší objekty působí, že jsou blíže k nám. Díky tomu blok nepřímo „vystoupí“ do popředí a odliší se od zbytku (je v kontrastu).

Kulaté vs. hranaté prvky

I tvary prvků jsou v rámci celého webu v určitém kontrastu. Kdo je pozorný, všimne si, že většina prvků na webu je zakulacená. Některé prvky naopak vyčnívají tím, že jsou hranaté (např. logo).

Prázdné místo vs. zaplněné

I prázdné místo si představte jako grafický prvek. Svým způsobem zabírá místo v prostoru. Díky němu přeostřujeme na jiné prvky.

Plochá grafika vs. struktura

„Kreslené“ jednolité prvky jsou rozbité fotografiemi, které mají strukturu a přináší do designu hloubku.

Stíny ve vizuálu

Na fotografii popředí vrhá stín na pozadí. Objekty jsou v kontrastu.

Na první pohled to není zřejmé, ale nadpis má zmenšené mezery mezi písmeny (konkrétně o 0.5px).

Víte, jaký to má důvod?

Když je zobrazovaný text na obrazovce příliš velký, opticky se zvětšují i mezery mezi písmeny. Slova se roztáhnou po větší části zorného pole. Skoky na jednotlivá písmena jsou o dost větší a trvá přečíst jednotlivá slova…

Přestože se záporné prostrkání písmen běžně nepoužívá, je dobré mezery mezi písmeny u velkých textů decentně zmenšit. Zvýšíte tím čitelnost textu, protože nebude pro oči tak náročné překonávat velké mezery mezi písmeny.

Nadpis

Executive director course = Kurz na výkonného ředitele

— nadpis je jasný jako facka. Na nic si nehraje. Jasně z něj pochopíte, o co jde.

Nesnažte se být za každou cenu kreativní. V první sekci webu musíte jasně sdělit, co nabízíte. A to velmi rychle.

Akční tlačítka

V rámci stránky se 1 hlavní akce vyjadřuje různými slovesy – „purchase“, „buy“, „enroll“. To je dobré, protože to vypadá, že se prvky jen slepě nekopírují. Pokud můžete, snažte se hlavní akce opisovat různými frázemi.

U každého akčního tlačítka je pak sloveso podpořeno slůvkem „now“. Tlačíme na zákazníka. Vzniká časová urgence. Snažíme se mu vnuknout myšlenku, že má nakoupit ihned a na nic nečekat.

Další – pouze textová – sekce navazuje na představení kurzu a snaží se namotivovat potenciální uchazeče na zápis do kurzu pomocí čísel a dat, sociálního důkazu a Stádového efektu.

Tuto sekci webu vyzdvihují 3 principy a praktiky:

1/ Kontrast - podívejte se na velikost nadpisu vůči hlavnímu textu. Velikost i tučnost je velmi dobře rozeznatelná. Čím větší rozdíl, tím větší kontrast, tím více zaujmete uživatelovou pozornost.

Stejně tak se to týká číselných hodnot. Jejich velikost je vůči doplňujícímu textu enormní.

3/ Gestalt princip blízkosti (Law of Proximity) – prvky, které jsou blízko k sobě, mají tendenci spolu nějakým způsobem souviset. Informace, které spolu souvisí shlukujte do menších skupin, díky čemuž dostane kompozice řád a stane se vizuálně atraktivní.

…Porovnejte tyto 2 varianty sekce:

Obě varianty sekce vypadají fajn. Na první pohled nic nevytknete ani jedné z nich—Rozdíl mezi nimi je pouze v oddělovací čáře u bloků informací—Přesto je jedna lepší a správnější…Víte, která?

Varianta A bez čáry

Pozorně vnímejte toto:

3 bloky informací—každý z nich je v reálu opticky jinak široký. Jeho šířku totiž určuje nejdelší řádek textu.

Pojďme přes sekci webu zobrazit sloupcový grid… 

Vidíte, kde je problém? Bloky do mřížky opticky nezapadají. Každý je opticky jinak široký…

Zkusme se podívat na druhou variantu…

Varianta B s čárou

Všimněte si rozdílu—Linie opticky definuje, vykresluje a vyplňuje prostor sloupcového gridu. Doplňuje tak opticky pomyslný blok—Design se stává jednotnější a provázanější.

Práce s kontrastem na této stránce je častá. Za povšimnutí stojí třeba text „Learn from the World's best“—textový blok je v kontrastu s prázdným prostorem vedle něj. To způsobí, že vizuálně vynikne.

V další sekci si napoprvé všimnete animovaných a měnících se tvarů s pojmy vystihující kurz. Že by opět kontrast? = Statická část vs. hýbající se část.

Při vysvětlování a představování produktu vypíchněte existující problém a pak popište, jak jste ho vyřešili.

Vytyčení cílové skupiny. Jasně řekněte, pro koho kurz je.

Co mi tady ještě chybí, je sekce, kde se naopak přímo sdělí, pro ❌koho kurz není. Snižte riziko toho, že si kurz koupí lidé, kteří ho neocení. Stanovte hranice z obou stran (pro koho ano vs. ne).

Hodnocení zákazníků = důležitý prvek. Čím více informací o zákazníkovi ukážete, tím je hodnocení důvěryhodnější.

• Jméno a příjmení,
• fotografie,
• datum a čas poskytnutí hodnocení
• výslovné sdělení, že zákazníci hodnotí společnost NEXT MBA Global.

Tip: V hodnocení bych navíc zvýraznil důležité a nejpřínosnější textové pasáže.

Video-hodnocení

Málo vídaný prvek—ale zatraceně silný. Není nic lepšího než ukázat reálnou osobu na videu, jak chválí produkt. Pokud máte možnost a chuť, směle do toho.

1/ Pro první zájemce je do určitého data nabídnuta nejnižší možná cena.

Už tady nastupuje psychologický tlak v podobě časové urgence.

Efekt je zesílen ještě tím, že je k jednomu „zápisnému“ do kurzu nabídnuto zdarma ještě jedno členství pro někoho dalšího.

Pokud se u toho bodu rozhodnete nakoupit, tak super. A když ne? Přichází na řadu bod 2…

2/ Další časovaná bomba. Výslovně je řečeno, že od určitého data se cena kurzu zvýší na dvojnásobnou částku (časová urgence)…

Uff, má to člověk riskovat? Máme riskovat ztrátu? (Averze ke ztrátě = pocit z toho, že něco ztratíme je mnohonásobně větší než pocit, kdybychom něco získali).

3/ V posledním kroku už jsme naprosto „zničení“. Přece nebudete platit za kurz tak vysokou částku? To by byl nesmysl.

Časová urgence zafunguje na plné čáře—A pokud jste doposud s nákupem váhali, je velká šance, že právě teď kliknete na tlačítko „koupit“.

Shrnutí a výzva k akci

Je běžnou praxí, že se často na prodejních stránkách některé klíčové informace opakují a připomínají. Ujišťujete tak zákazníka, co získá, a snáž na podmínky přistoupí.

Akční tlačítko je vizuálně vybalancováno štítkem, kolik ušetříte.

Bum! Kupuji…

A jsme na konci. Vím, je to dřina… Dnes to bylo spíše o designu.

Každý rozbor je obsahem jiný. Odvíjí se od náhodně vybraného webu. Co mě napadne, to zmíním.

Někdy je to více o designu, někdy o copywritingu a marketingu. Jindy se zase „šťouráme“ v psychologických principech…

Máte tip na skvělý web? Klidně mi ho pošlete a třeba jej zařadím do rozborů.

Kromě toho chci zkusit i jiný koncept rozborů. Chci vzít webovou stránku někoho z vás, projít a navrhnout možná řešení pro zlepšení designu, textů a jak zvýšit prodeje… Kdybyste měli někdo zájem, nechte mi odkaz tady.

…jde vždy o čerstvě napsaný obsah, který aktuálně tvořím pro své budoucí e-booky…

…k rozborům i bonusům mají přístup pouze předplatitelé. Nikdo další je nezíská…