Basecamp

Platforma pro řízení projektů.

🧭 V prezentaci se posouvejte se šipkaminahoru a ↓ dolů​ 

Landing page odshora až dolů™

Rozbor hlavní stránky

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

a pak pokračujte v rozboru

💪🏻 Pojďme si stránku rozebrat…

Basecamp. Asi všichni znáte. Je to nástroj pro řízení projektů. Ukažme si, jak tvůrci přistoupili k prezentaci produktu na hlavní stránce webu.

Web Basecampu je jiný, než na které jste zvyklí. Na první pohled nudný web…Ale po jeho prozkoumaní zjistíte, že má promyšlený obsah

Basecamp má trochu jiný přístup—snaží se jít „lidskou cestou“. Mluví k zákzníkovi. Používá „dopisovou“ formu. Využívá skvělého copywritingu. Sděluje fakta, předvádí výsledky a tím skvěle přesvědčuje. Na grafické parádičky ho moc neužije.

Hmm, když se podíváte na stránku, není to nějak extra vizuálně povedený designový kousek… Možná dost přeplácané? Hodně textu? Málo prázdného místa?

???

Basecamp vsadil především na sdělení textem, což je jeden z hlavních prvků stránky. Podrobněji se na něj podíváme za chvíli…

První sekce stránky—obrovský důraz je kladen na to, aby hlavní sdělení a výzva k akci byly vždy nad ohybem stránky—tedy na jedné obrazovce, aniž byste museli skrolovat dolů…

  • Nadpis,
  • vysvětlující text
  • a tlačítko

=cílem je, aby byly prvky vidět „na první dobrou“…

Tyto 3 prvky se soustředí na představení produktu přesvědčení zákazníků.

 

Hmm… Jsou na sebe ale dost namačkané… Graficky by šly zlepšit. Co s tím?

Ukažme si, jak by sekce vypadala, kdybychom ji chtěli udělat více „graficky“ správně.

  • Zúžili bychom vysvětlující text, abychom zkrátili délku řádků
    —Získáme 3 řádky, které se nejen lépe čtou (snáž najdete začátek následujícího řádku), ale i vypadají.
  • Zvětšíme mezery mezi nadpisem, textem a tlačítkem.

Když to uděláme, co se stane? Sekce se natáhne příliš na výšku.

A my potřebujeme při zobrazení vidět všechny informace najednou.—Je to proto, abychom během pár sekund sdělili myšlenku a abychom zaujali viz 5vteřinový test.

Proto tady musíme udělat vizuální kompromis. Důležitější je prodat, než aby sekce vypadala dobře.

Možná si řeknete, že by šlo zmenšit písmo… Ano, to je taky cesta… Ale ztratili bychom apel na nadpis…

Raději sekci v tomto případě nechme tak, jak je. Čím výš prvky dostanete, tím větší jistota, že je uvidíte všechny i na menších obrazovkách.

Pojďme se podívat na hlavní prvky sekce…

Nadpis—není to jen pár slov. Je to něco, čemu tvůrci věnovali extra pozornost. V českém překladu trochu krkolomné:

 

„Osvěžujíce jednoduchá a pozoruhodně efektivní platforma pro řízení projektů.“

 

  • Jasné sdělení, co produkt je.
  • Přidaná 2 nevšední příslovce.

Osobně bych tato příslovce nepoužil a držel bych se více jednodušších frází.

Vysvětlující text

 

„Řízení lidí a projektů pod tlakem je dost náročné. Bohužel hodně softwarových řešení to zhoršuje tím, že věci příliš komplikují. Basecamp je jiný.“

 

  • Jednoduchý a neokecávající text.
  • Když si text přečtete nahlas, uslyšíte rytmus. Různé délky vět, pauza v podobě čárky apod. Text není monotónní…

🎵🎵🎵

Důležité je sdělení textu—první 2 věty popisují a vypichují

problém, který existuje. Poslední věta nabízí ✅ řešení.

To je známá prodejní formule—Zdůrazněte problém a pak ukažte, že máte řešení. Bingo!

Problém

Řešení

Tlačítko, jehož cílem je—Vyzkoušet produkt. Co je na tlačítku zajímavé?

Přestože to není úplně barva značky Basecamp, je použitá zelená barva.

Striktní pravidlo, které by říkalo, jaká barva je pro zvyšování konverzí nejlepší, neexistuje.

Je ale známo, že zelená, červená nebo  oranžová barva funguje velmi dobře. Jsou to hodně kontrastní barvy a jsme zvyklí na ně reagovat (např. semafory).

„Try Basecamp for free“— vyzkoušej Basecamp zdarma.

Vyvracíte obavu něco platit. Navíc, když si zákazníci produkt vyzkouší, spouští se psychologický efektAverze ke ztrátě (Loss Aversion). Lidé po ukončení zkušební doby totiž neradi přijdou o výhody produktu. Jsou zaháčkovaní a nakloněni k tomu produkt zakoupit a používat dál…

Netradiční a efektivní je i vysvětlovací text v tlačítku pod hlavní výzvou. Málokdo používá 2 řádky v tlačítku

„No credit card required“ a „Cancel anytime“vyvracíte 2 obavy:

  1. Zadávání platební karty předem.
  2. Zavázání se na určité období (kdykoliv zkoušku zrušíte).

Znáte psychologický efektSklon vůbec neriskovat (Zero-risk bias)?—Obecně máme tendenci se rozhodovat pro situace, kdy můžeme zcela eliminovat riziko. Snížení rizika nás uklidňuje.

Od zeleného tlačítka se dostaneme k oranžové barvě…

 

Všimněte si útržku hodnocení produktu, a to přímo u loga Basecamp—jde o krátkou a výstižnou část hodnocení podpořenou 5 hvězdičkami.

Je to zajímavý prvek, protože…

…Je to výborný efekt sociálního důkazu. Tvrzení snadno uvěříte, že ano? A to dokonce v případě, že není uveden ani zdroj, ani autor.

Text v uvozovkách jednoduše vypadá, jako by ho někdo prohlásil… No a když vidíte, že někdo jiný kladně ohodnotil produkt, budete mít o dost větší tendenci také jej vyzkoušet.

Pozor, texty si nevymýšlejte. Efektu nezneužívejte. Vždy používejte poctivé a ověřené zdroje.

…Aby štítek ještě více zachytil vaše oko, je použitá oranžová barva včetně barevného přechodu, který mu přidává hloubku a 3D efekt…

 

🚦 Nejdříve zelná, teď oranžová. Náhoda?

 

Abychom ještě přitopili pod kotlem, můžeme na štítek ještě víc upozornit. Zvýrazněný prvek nakloňte o několik stupňů. Bude vyčnívat. Skvělý způsob, jak na něj upozornit.

Schválně srovnejte rozdíly, kdyby nebyl použit barevný přechod a naklonění prvku…

👍

👍👍👍

Hmm, odkazy… Proč jsou v modré barvě a podtržené? Nešly by udělat moderněji a „hezčeji“?

Možná… ale takto zvýšíte šance, že uživatel pozná, že jde o odkaz.

—Divili byste se, ale mnoho lidí odkazy, které nejsou standardní, mají různé barvy nebo nemají podtržení, nerozezná.

Při vzniku internetu byly modré podtržené odkazy všude. Lidé si na to zvykli a formu velmi dobře znají. Proto jsou modré podtržené odkazy nejrozeznatelnější. To je skvělá ukázka Jakobova zákona (Jakob’s Law).

👍

👍👍👍

Druhá sekce webu se věnuje vysvětlení produktu. A jak jinak než videem. Video je nejlepší formát jak vysvětlit komplexní problém. Prvek s videem je velký a vystínovaný, aby se opticky dostal do popředí.

Klikni a přehraj

Další sekce vypadá možná nudně. je to obyčejná kupa textu? Záměrně.

Designéři mají běžně potřebu formátovat texty a dělat kreativní rozložení obsahu. To ale není vždy nutné…

Klidně si vystačíte jen s textem. Obsah je totiž to nejdůležitější na webu—Textem sdělujete myšlenky a prodáváte.

Ovšem, abyste přiměli zákazníka větší množství textu přečíst, musí být obsahově atraktivní a vizuálně se musí dobře číst.

Ukažme se, co vše je možné řešit:

Členění obsahu

Všimněte si, že text je členěn na menší celky tj. odstavce. Mezery jsou pauzy pro oči. Motivuje nás to číst dál. Snadněji texty skenujeme. Nejsme zahlceni jedním dlouhým textem.

Dobré vodítko? 3–5 řádků na odstavec.

Kontrast

Cílem je udržet čtenářovu pozornost. Toho docílíte tím, že text nebude monotónní.

Používejte:

  • tučné texty,
  • střídejte délky vět,
  • dělejte odstavce,
  • používejte číslice, mezery, pomlčky, zvýraznění, apod. …

Obsah textu

—Sdělení myšlenky je gró. Nejdůležitější část při prodeji…

První odstavec

Basecamp říká, na čem téměř dvě dekády pracoval, aby udělal řízení projektů jednodušší.

Snaží se být konkrétní a používá čísla (two decades, hundres of thousands of teams on millions of projects) = sociální důkaz, že řešení lidé používají.

…tím, že Basecamp říká, že dvě dekády pracuje na nástrojích a metodách—tím dává najevo, že vyvinout produkt zabralo nějaký čas. Tím se to pro nás stává důvěryhodné.

Přichází na scénu psychologický efekt Iluze práce (The Labour Illusion)—Když transparentně ukážete, co, jak a jak dlouho jste dělali, zvýšíte hodnotu produktu.

Více o Iluzi práce se dočtete v bonusu 🎁

Druhý odstavec

CEO Shopify zdůrazňuje a poukazuje na svoji zkušenost s Basecamp nástrojem.

  • Sociální důkaz a poslušnost k autoritě—tvrzení se stává důvěryhodné. Nástroj používá někdo jiný. A dokonce známá osoba.

Třetí odstavec

Vysvětluje pro koho, co a proč. Zdůrazňuje problém a následně řešení či výhodu produktu.

  • Pro koho—„…the easiest place for everyone in every role…
  • Co—„…to put the stuff, work on the stuff, discuss the stuff, decide on the stuff, and deliver the stuff that makes up every project.“
  • Problém—„Not on separate platforms scattered in various places…“
  • Výhoda/řešení—„…all intuitively organized in one centralized place where everyone can work together.“

Čtvrtý odstavec

Basecamp popisuje, proč týmy selhávají. Ukazuje charakter svého produktu a proč se k němu lidé vrací.

Opět jsme u vzorce—

 Problém vs. řešení

Pátý odstavec

Basecamp popisuje, pro koho produkt je. Jednoduchý výčet položek s použitím konkrétních čísel, které nejen zaujmou, ale zvýší důvěryhodnost.

Šestý odstavec

Ukažte situaci „před“. Navrhněte řešení a ukažte, jak může vypadat situace „po“. Do jakého stavu se můžete dostat a co získáte, když produkt využijete?

A co říkají o produktu zákazníci? Hodně specifická sekce, kterou jsem nikde jinde neviděl. Zajímavě seskládaná „zeď“ výtržků hodnocení zákazníků se zvýrazněnými částmi…

 

Uvěříte tak krátkým referencím???

Pokud ne, po kliknutí na odkaz „Show more…“ se dostanete na stránku, kde uvidíte všechna hodnocení v celé své kráse… A že jich není málo. O pravosti referencí se jednoznačně přesvědčíte.

Podívejme se na sociální důkaz v patičce—na své výsledky buďte pyšní… Ukažte, že jste získali dobrá hodnocení napříč různými platformami v podobě log nebo certifikátů.

Basecamp si zakládá na osobním přístupu. Nejde o korporát. Tvůrci se snaží zůstat tak malí, aby byli schopni udržovat styk se zákazníky.

  • Zdůrazněte, že nepoužíváte chatboty, ale komunikujete vždy osobně.
  • Vyvraťte obavy a pochybnosti. Umožněte zákazníkům se zeptat na cokoliv, co jim pomůže se rozhodnout produkt zakoupit.
  • Řekněte výslovně, kdy jim odpovíte. 1 hodina už je pěkný příslib, nemyslíte?—V bonusu se dozvíte, proč je lepší tuto dobu mít delší.

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

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

🎉

🎉

🎉

🎉

🎉

🎉

  • Nebojte se pouze psaného obsahu bez vizuálů.
  • Snažte se, aby nadpis, text a případně výzva k akci byly vidět ihned při načtení stránky—tj. nad ohybem (ještě než začnete skrolovat).
  • Pro akce dobře fungují barvy, jako jsou zelená, červená nebo oranžová.
  • Vyvracejte obavy. Dejte možnost produkt nebo službu bez závazků vyzkoušet. Dejte pocit žádného rizika (Sklon vůbec neriskovat).
  • Zaháčkujte si zákazníka. Snažte se, aby si na produkt zvyknul a chtěl si ho nadále zaplatit (Averze ke ztrátě).
  • Pro zvýraznění prvků používejte barevné přechody a naklánění objektů.
  • Modré a podtržené odkazy jsou na webu hodně funkční (Jakobův zákon).
  • Vysvětlujte komplexní problémy videem.
  • Čleňte texty do odstavců (3–5 řádků) oddělené mezerami.
  • Používejte: tučné zvýraznění, různé délky vět, číslice, znaky, pomlčky, …
  • Při psaní textů se snažte o rytmus. Používejte různé délky vět, pauzy v podobě čárek, pomlček, apod.
  • 3 obsahové strategie pro ovlivnění zákazníka:
    • Vysvětlete problém a navrhněte řešení.
    • Představte stav „před“ a „po“.
    • Ukažte, že jste nějakou dobu na produktu pracovali (Iluze práce).

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

A nezapomeňte rozbory ohodnotit (dál) 👉

Zpětná vazba

Hodnocení

Jak se vám rozbor líbil? 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 14 dní

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

Rozbor prodejní stránky - basecamp.com

By Lukáš Augusta

Rozbor prodejní stránky - basecamp.com

Platforma pro řízení projektů.

  • 2