Culture Amp

Platforma pro zlepšování zaměstnanecké kultury.

🧭 V prezentaci se posouvejte se šipkami ↑ nahoru a ↓ dolů​ 

Landing page odshora až dolů™

Prohlédněte si stránku živě—

a pak pokračujte v rozboru

💪🏻 Pojďme na rozbor…

Culture Amp—Platforma pro zlepšování zaměstnanecké kultury. Napomáhá a vede kroky
k tomu, aby si firma zaměstnance udržela, zvýšila jejich výkon a více je zapojila do aktivit.

Pojďme si zhodnotit vizuál webu

Barevný web plný pestrých odstínů. Co všechno ho dělá zajímavým? Jaké detaily pomáhají k tomu, že je web pro oko atraktivní?

Určitě první věc je barevná paleta složená ze sytějších barev. Takovou paletu si snadno namícháte v nástroji Coolors (vyberte si hlavní barvu
a k té si nechte přimíchat další).

 

Zajímavá kombinace barev je jedním z prvků, který definuje značku. Snadněji si ji zapamatujete…

…dalším výrazným znakem jsou ilustrace. Jejich charakter ovlivňují:

  • Pestré jednolité barvy bez dalších odstínů.
  • Černé obrysy objektů.
  • Stínování černou barvou navazující na obrysy.
  • Realistická podoba postav.
  • Zachycení emocí.
  • Znázornění pohybu a akce pomocí černých linek.
  • Zdůraznění 3D efektu tím, že objekty z ilustrace „přetékají“.

Typografie—je základ každého webu. Správnou volbou písma podtrhnete značku.

 

Co je důležité? Kontrast. Pravidlo číslo jedna. Pokud používáte
2 fonty (jeden pro nadpisy a druhý pro běžný text), musí být od sebe na první pohled dostatečně odlišné. Jen tak dosáhnete skvělého kontrastu a web se stane živějším a zábavnějším…

👍 Navíc—části nadpisů jsou zvýrazněné zcela jiným fontem navozující efekt ručního písma. A ten je zase kontrastní vůči patkovému písmu.

✅ Patkové písmo pro nadpisy je zcela odlišné od písma pro odstavcový text.

Tip: Pro nadpisy a běžný text je vcelku jedno, jaká písma zvolíte. Důležité je, aby byla v dostatečném kontrastu. Příklady:

  • Patkové písmo vs. bezpatkové,
  • tučný řez písma vs. tenký řez písma,
  • malá vs. velká velikost písma,
  • jednoduché geometrické vs. členitější a komplikovanější písmo,
  • apod.

Kulatost prvků—toho, jakou atmosféru web navodí, dosáhnete
i vhodnou volbou zakulacení rohů různých prvků. Čím více kulatější prvky, tím více působí rozhraní přátelsky a neformálně. Avšak…

…často se setkáte s informací, že všechny prvky musí být zakulacené stejně a že byste neměli kombinovat kulaté a hranaté prvky.

 

V ideálním případě to dává smysl. Ale je dobré znát pravidla a cíleně je porušovat, když je třeba.

 

Pokud totiž usoudíte, že je po zakulacení všech prvků rozhraní až moc příliš „kulaté“, můžete některé prvky udělat hranaté
a vizuálně celé rozhraní vybalancovat

…i na tomto webu se kombinují kulaté prvky s hranatými. Podívejte se…

Na webu se hodně pracuje
s linkami. Ty mají 2 funkce:

 

  1. Navádí uživatelovy oči tam, kam potřebujete.
  2. Vyhrazují prostor mřížky, která by měla být základem každého designu.
  3. Propojují, spojují a oddělují prvky…

Linka navádí uživatelovy oči tam, kam potřebujete. O tom mluví Princip jednotného propojení
→ 🎁 Více v bonusu.

Díky lince přeskočí oči níž na další obrázek = cílené vedení pozornosti.

Linka vyhrazuje prostor mřížky, která by měla být základem každého designu.

Linka kopíruje mřížku webu. Dotváří i pomyslnou „kartu“, ve které je text
a tlačítko odsazený zleva.

Linka propojuje prvky…

Linka vizuálně spojí 2 prvky nebo skupiny prvků, u kterých by vám jinak nedošlo, že patří k sobě.

Linka odděluje prvky…

Linka vizuálně odděluje bloky prvků, které jsou blízko k sobě.

Pojďme projít strukturu stránky

Vysvětlete, o čem produkt je, pro koho je a co umí.

Ukažte, kdo jsou vaši zákazníci.

Popište, co produkt umí.

Pojďme projít strukturu stránky

Co říkají o produktu zákazníci?

Odkažte na další zdroje.

Vyzvěte zákazníky
k akci.

V patičce zkuste nalákat na newsletter.

Než se pustíme do jednotlivých sekcí podrobně—krátké rychle hodnocení webu.

 

Vizuál ⭐️⭐️⭐️⭐️⭐️
 

Struktura ⭐️⭐️⭐️
 

Prodejní prvky a taktiky ⭐️⭐️⭐️
 

Znění textů ⭐️⭐️

💁‍♂️ Stránka musí být komplexní. Pěkný design musí podtrhnout kvalitní obsah.

 

👎 Na stránce chybí více prodejních prvků. Jde spíše o informativní stránku. Dostatečně nemotivuje.

→ Přidat např. výhody produktu, transformace zákazníka, vypíchnutí problému a jeho řešení, sociální důkazy, urgence, strach ze ztráty, …

 

👎 Hlavní problém vidím
v copywritingu. Textace nejsou dostatečně výstižné a pochopitelné.

 

Znáte poučku: „Don't be clever, be clear“? Tak ta při navrhování tohoto webu chyběla jako sůl…

 

Pojďme stránku projít podrobněji…

„Speak to our team“

✅—perfektní výzva k akci. Jasné akční sloveso a konkrétní fráze.

 

Určitě lepší výzva k akci než klasické „Contact us“.

To stejné se podařilo i s dalšími akcemi. Buďte maximálně jasní.

👎 Hlavní textace už podle mého zdařilé nejsou.

 

„An emplyee experience that people love“.

 

Zopakuji: „Nesnažte se být příliš chytří. Raději buďte jasní!

 

Po přečtení nadpisu nevím nic. Co je to za produkt? V jaké formě? Co umí? Snad jen klíčové slovo „zaměstnanec“ mi naznačí, o jakém okruhu se budeme bavit…

I po přečtení doplňkového textu nejsem chytřejší.

 

Jak by šel text zlepšit?

 

  • Použijte kratší a jednodušší slova.
  • Vyjádřete myšlenku jasně.
  • Zkuste nepoužívat „buzzwords“ a cizí slova (engagement, performance, development,  category-defining product, apod.). Opište je jednoduchým jazykem. Když to jde.
  • Nepoužívejte souvětí. Zkuste jednoduché věty. Změňte slovosled.

🤔 „Get the employee engagement, performance and development tools and insights you need to build a category-defining culture.“

👍 „A platform for building a great company culture. Tools and insights for employee engagement, performance, and development.“

vs.

Hlavní navigace. Na první pohled pouze odkazy. Sice nejsou podtržené, takže to odkazy evokuje méně, ale tak nějak předpokládáme, že se po kliknutí někam dostaneme.

 

Avšak po kliknutí se rozjede další nabídka?

Úprava: U každého odkazu bych přidal šipku, která znázorní rozjíždějící nabídku

✅ Ukažte v podobě čísel (přitahují pozornost), kolik zákazníků využilo vaše řešení.

 

✅ Podpořte tato čísla vizuálně. Loga společností mozek rychleji zpracuje. A působí důvěryhodně.

 

✅ Ukažte případové studie
a příběhy zákazníků.

 

✅ Vše podložte výsledky a čeho může zákazník dosáhnout. Používejte k tomu čísla.

Nadpis i podnadpis zabíjí potenciál.

 

❌ Nadpis je opět moc chytrý. Chápete ho? Já ne. 🤦‍♂️

❌ Podnadpis zabíjí prostor. Opakuje slova, která už byla zmíněna (engagement, development, …).

❌ Fráze „Ready to go deeper?“

Naprosto zbytečné. Dá se zcela vynechat a sdělení bude dávat stále smysl. Co nepřidává hodnotu, smažte.

 

Tip: Nepoužívejte otázky, na které se dá odpovědět „ano“ či „ne“.

—Potřebujete uživatele dávkovat přímými větami a vést ho za ruku. Neptejte se ho na nic. Ukažte mu rovnou směr.

Vcelku šikovně řešená sekce
s výhodami a funkcemi produktu.

 

✅ Každá podsekce obsahuje kreslený vizuál, který podporuje danou myšlenku.

 

✅ Pod každým obrázkem jsou vždy 3 podkategorie, které se dají přepínat, čímž se změní obrázek.

 

🤔 U těchto přepínačů bych se více snažil, aby bylo více zřejmé, že na ně lze kliknout a získat nový obsah.

 

Celkově tedy sekci tvoří 3x3 matice.

—3 podsekce a v každé 3 podkategorie. Že by Pravidlo tří?

Ukažte hodnocení, kdo je
s produktem spokojený. Snažte se o maximální důvěryhodnost hodnotitele:

  • Jméno a příjmení,
  • pracovní pozice
  • fotografie,
  • název firmy
  • logo firmy.

 

Uvozovky evokují přímou řeč. Určitě je použijte pro autentičnost.

Jak ještě vylepšit hodnocení?

 

  • Vizuálně zvýrazněte důležité pasáže.
  • Přidejte počet hvězdiček,
    u kterých mozek jasně vyhodnotí, že jde nejspíš
    o kvalitní hodnocení.

❌ Další sekce je za mě zbytečná. Plácá páté přes deváté. Příliš mnoho nezáživného textu. Téměř nulová motivace číst dál.

 

Zakončeno věčnou klasikou „Learn more“. Jak jsem výzvy k akci vychválil, tak tady naopak velké mínus…

Na konci hlavních stránek bývá zvykem mít odkazy na další zdroje. Často to bývá nějaký blog nebo odkazy na další stránky webu.

 

Je na zvážení a na cílech webu, zda takovou sekci přidávat.

 

Pokud je cílem stránky prodávat, doporučil bych se dalším zdrojům vyhnout, protože tříštíte uživatelovu pozornost. Snažte se raději prodávat fakta o produktu
a dokazovat, proč je dobrý.

 

Informace o dalších aktivitách prezentujte v jiné fázi cyklu zákazníka. Třeba na jiné stránce. Až projeví trochu zájmu.

Výzva k akci? Ideálně jedna akce. Avšak máte-li akcí víc, které se navzájem doplňují a mohou pomoct zákazníkovi rozhodnout se nakoupit, určitě je ukažte všechny.

 

Např.

  • Prohlédnout si demo
  • Kontaktovat někoho z týmu

 

✅ Dobrá textace v tlačítku „Watch a 5-minute demo“. Perfektně výslovně říkáte, že proces zabere 5 minut a tím více motivujete zákazníka demo vyzkoušet…

Všimněte si slovíčka „today“. 

 

Jasně a konkrétně lidem řekněte, co mají udělat, kam mají kliknout
a kdy mají akci provést. Lidé potřebují ukazovat směr. Ideálně přidejte i důvody.

❌ V rámci celé stránky je nepořádek v tlačítkách. Každá stránka webu by měla směřovat
k 1 hlavnímu cíli
, který odpovídá jednomu hlavnímu tlačítku.

 

Na této stránce se střídají hlavní akce jako ponožky. Černé (hlavní) tlačítko by mělo být určené vždy pro jednu akci.

Newsletter—všichni ho na webu chtějí mít, ale málokdy se lidé
k odběru přihlásí…

 

Jednoduchá rovnice:

 

Dostatečná hodnota = odběr

 

Položte si vždy tuto otázku…

 

Opravdu zákazníkům z vaší cílové skupiny přinese přihlášení k odběru newsletteru nějakou hodnotu?
Má pro ně přínos?

Jaká je motivace k přihlášení newsletteru tady?

 

❌ „Get our newsletter“ = Ne, díky. Další odběr novinek nepotřebuji.

 

❌  „event invites“ = Pokud společnost neznám a nikdy jsem se nějaké akce neúčastnil, tak ne, díky.

 

❌ „product insights“ = Spíš ne.

 

🤔 „research“ = to by mohlo být zajímavé. Výsledky z výzkumu třeba? Co mohu čekat? Tento bod, kdyby se lépe rozepsal a motivoval, tak by mohl fungovat.

Výborně! Dokončili jste rozbor! 🎉​

Co si z něho odnést? (pokračujte 👉)

🎉

🎉

🎉

🎉

🎉

🎉

  • Pro zajímavý a atraktivní web vytvořte pestrou barevnou paletu.
  • „Namixujte“ si styl ilustrací. Definujte si jejich vlastnosti a dodržujte je napříč celým webem.
  • Myslete na maximální kontrast a odlišnost nadpisů a běžného textu. Kontrast mezi písmy = zajímavé a atraktivní uživatelské rozhraní.
  • Vybalancujte „kulatost“ v celém designu tak, aby navozovalo patřičnou atmosféru (přátelská vs. vážná).
  • Používejte čáry/linie k navádění uživatelových očí správným směrem, vyhrazení prostoru mřížky, propojování, spojování nebo oddělování prvků.
  • Kvalitní grafika k úspěchu nestačí. Důležitá je struktura stránky, prodejní prvky nebo znění textů.
  • V akčních tlačítkách používejte akční slovesa a velmi konkrétní fráze.
  • Nesnažte se být příliš kreativní. Pište jasně a pochopitelně. Upravte slovosled. Nepoužívejte cizí slova a buzzwords. Vyhněte se souvětím.
  • Používejte sociální důkaz: Čísla a data, loga společností, případové studie a příběhy, výsledky, hodnocení zákazníků, …
  • Odrazuje prvek/sekce stránky uživatele od plnění cíle? → Odstranit.
  • Udělejte si pořádek v tlačítkách. 1 hlavní tlačítko = 1 hlavní akce.
  • Chcete sbírat e-mailové adresy? Pamatujte, že e-mail získáte pouze výměnou za opravdovou hodnotu.

Klíčové shrnutí

Co jste se dozvěděli? Tipy pro návrh prodejní stránky

👍 Jako předplatitelé rozborů dnes získáváte bonusový obsah, který se vám bude hodit při návrhu webu…

…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á…

…v každém rozboru najdete nový materiál… Tak si ho nenechte utéct…

—tady je…👉

2

3

Bonus

Hodnocení

Příště…

Bonus

Mohu vás poprosit o laskavost? Dejte mi, prosím, ⭐️hodnocení na rozbory…

 

Pomůžete mi tím udržet se

v sedle a pokračovat ve tvorbě

Princip jednotného propojení

P.S. Pro designéry a grafiky nabízím konzultace. Rád vám osobně ukážu, jak navrhovat weby a aplikace sebevědomě.

  • Probereme oblasti tvorby mřížky (gridu) a její používání,
  • jak tvořit typografické a velikostní stupnice,
  • jak prvky navrhnout, aby vypadaly dobře,
  • co dělat, když není inspirace,

Případně se ozvěte https://www.designui.cz/mentoring.

Zpětná vazba

Hodnocení

Jak se vám rozbory líbí? Co byste udělali jinak? Dejte mi zpětnou, abych věděl, co zlepšit. Budu vám opravdu vděčný.

3

Bonus

Hodnocení

Příště…

Klik 👉

👋 Uvidíme se za 2 týdny

V záloze mám spoustu výborných webů

a bonusů, o které se s vámi chci podělit.

Jsem vděčný každému, kdo sdílí myšlenku rozborů na svých sociálních sítích nebo blogu.

Získejte 25% slevu pro vaše předplatné—Jako odměnu za doporučení…

Bonus

Hodnocení

Příště…

(Odesílám 1. a 15. v měsíci)

Rozbor hlavní stránky - cultureamp.com

By Lukáš Augusta

Rozbor hlavní stránky - cultureamp.com

Platforma pro zlepšování zaměstnanecké kultury.

  • 5