Todoist
Aplikace k organizaci práce
a života.
🧭 V prezentaci se posouvejte se šipkami ↑ nahoru 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 na rozbor…
Todoist používají lidé k organizaci pracovních i osobních záležitostí.
Podívejme se, jak nástroj tvůrci prezentují…
Tento web vás vtáhne ihned do děje. Představuje perfektní kombinaci minimalismu
a kreativního zpracování…
Podívejme se na designovou stránku…
Na webu se pracuje s menšími nadpisy. Poslední dobou jsem jejich fanda.
Lidé mají totiž tendence tvořit obrovské nadpisy. A výsledek? ❌ Zahlcené rozložení webu a špatná čitelnost, což vede
k přeskakování čtení textů…
Méně je více. Podívejte se, jak funguje menší velikost nadpisu, kterou vyzdvihuje pořádná dávka prázdného prostoru…
Uživatelovi oči ihned zamíří do středu a do zorného pole se dostane text, který velmi pohodlně přečte, aniž by musel kmitat hlavou tam a zpět. ✅
Soustředíte se tak na jeden celistvý blok. Jeho obsah pak krásně zkonzumujete.
Ještě by možná stálo zmínit, že prázdný prostor nahoře je příliš velký. Lehce by se dal zmenšit…
I samotný textový obsah je minimální.
Každé slovo musí přidávat hodnotu. Prázdná slova musela pryč. Není jednoduché takové texty napsat. Je potřeba škrtat, škrtat a škrtat…
Organize = konkrétní akční sloveso
Your = zaměření na zákazníka
work and life = „co“ - jádro věci
finally = příslib konečného řešení.
Become = ty se staň
focused, organized, and calm = benefit (stav), který zákazník získá
+ použití Pravidla tří
with Todoist = nabízené řešení
The world's #1 task manager and to-do list app = hlavní prodejní argument, číslovka #1 zachycuje pozornost.
Celý web je perfektně obohacen ilustracemi na míru.
Když jsou ilustrace propojené s celou značkou, vypadá to skvěle.
Důležitá je jednotnost a zachování stylu ilustrací na celém webu, což se tady podařilo.
Každá ilustrace respektuje barevnou paletu a je tvořena efektem „ručního“ stylu.
Sociální důkaz a Stádový efekt. Rovnou na zákazníky vybalte, kolik jste získali kladných hodnocení
a jaké společnosti produkt využívají.
Sekce s benefity aplikace. Každý benefit je v cik-cak rozložení. Text a vedle obrázek. Na střídačku je to dobré udělat, protože „změna“ rozložení zachytí lidské oko, zpozorníte a je větší šance, že si prohlédnete veškerý obsah.
Obrázky si pravděpodobně prohlédnete jako první, protože člověk rychleji zpracovává a preferuje vizuální obsah než text.
Porovnejte, jak by sekce vypadala, když by položky nebyly cik-cak…
Každý obrázek obsahuje ukázku funkce přímo z aplikace, která podporuje myšlenky obsaženou
v textu.
Obě podsekce v malém nadpisu zmiňují benefit.
Benefit je něco, co zákazník získá (nějaký stav), jakmile začne používat produkt…
Get more done = „Udělej toho víc“
Clear your mind = „Vyčisti svou mysl“
Add your tasks. Organize your life. Achieve more every day.
= Sledujte, jak nadpis
graduje. Nejen obsahem, ale i vizuálem…
Každá další věta v nadpisu se stupňuje délkou.
3 krátké věty, které když si přečtete nahlas, vytvoří rytmus.
Stejně tak se stupňuje i obsah nadpisu.
Add your tasks = udělej něco malého a konkrétního.
Organize your life = díky tomu se ti začne organizovat život.
Achieve more every day = výsledkem je, že se tvůj každý den stane produktivnější.
Je to ukázka → „transformace“ zákazníka. Ukažte cestu z bodu A do bodu B.
V hlavním textu je zpracována dobře jedna věc…
Add tasks like "Read work emails every day at 10am"
= Je použitý konkrétní příklad, jak aplikaci použít.
Vyhněte se obecným frázím. Buďte konkrétní. Zákazník si tak snadno dokáže představit a vykreslit danou situaci. Myšlenku pak lépe zpracuje a zapamatuje si ji.
Další sekce vysvětluje, že můžete aplikaci používat pro jednoduché plánování nebo ji pojmout komplexněji.
Místo nadpisu je použitá citace z médií. To zároveň slouží jako sociální důkaz a zvyšuje důvěryhodnost…
Na základě toho, jak se posouváte po stránce směrem dolů, se mění ilustrace a osa, která znázorňuje stupeň využití aplikace.
Postupně se přidává i výpis možností a funkcí, které při používání aplikace můžete využít…
Je to skvělý způsob, jak interaktivně odprezentovat myšlenku, která je abstraktní
a špatně se vysvětluje.
Postupné ukazování obsahu nebo funkcí v aplikaci vystihuje princip—Postupné odhalování (Progressive Disclosure) →🎁 Více v bonusu.
Sekce, která se zabývá funkcemi a tím, co nástroj umí…
„Delightfully simple…“ – „úžasně jednoduché…“ = pro navození emocí a zpestření strohého sdělení použijte nevšední přídavná jména a příslovce.
Jinak byste zkrátka napsali „Powerful task management“. Je to jednoduché, pochopitelné a není na tom nic špatně. Ale pokud si potrpíte na „okořenění“ a přidání emocí, zamyslete se, čím text „doladit“…
Tento přístup se hodí pouze
v případě, že pracujete
s jednoduchým, obecným a nudným spojením.
Pokud naopak máte hodně co říct, pracujete s velkou myšlenkou, která vyžaduje více slov, tak raději osekávejte a nic navíc nepřidávejte!
Sociální důkaz a schválení
„Více než 30 milionů lidí organizuje v Todoistu miliardy úkolů pro svou práci, vzdělávání a osobní život.“
- Kolik lidí produkt používá?
- Kolik úkolů v nich organizují?
- K čemu produkt využívají?
- V jakých sférách života?
Když to dělají ostatní, nejspíš to bude funkční řešení…
+ Opět tvůrci použili Pravidlo tří – „work, education, and personal life“
❌ Designová chybka?
Špatně nastavené šířky nadpisu, podnadpisu a dalších textových bloků.
Všimněte si, že u každého textového bloku je první řádek dlouhý a druhý je oproti němu krátký…
…řádky musí být podobně dlouhé. Vizuálně by měly dotvářet pomyslný obdélník.
Takto textový blok vnímáte jako dvě „nudle“– jedna krátká, druhá dlouhá. Pokud z řádků textu vytvoříte pomyslný obdélník, celý design se lépe propojí.
Jedním z řešení je zúžit textové bloky…
✨ Pro zájemce: V této lekci najdete na toto téma podrobnější vysvětlení. Celkem 5 postupů, jak si s touto situací poradit…
Každý blok s funkcí nebo přínosem produktu zahrnuje odkaz na vlastní stránku. Žádný se neopakuje a každý má konkrétní specifickou textaci: „Download apps“, „Start with templates“ nebo „Install integrations“.
Snažte se být přesní. Použijte sloveso pro konkrétní akci: „Download“, „Install“, …
Odkazy jsou modré, což částečně evokuje funkci odkazu…
UX tip: Vždy je lepší odkaz podtrhnout. Víc pak vypadá, že se na něj dá kliknout. Snížíte riziko, že uživatel odkaz nerozezná od běžného textu. Nespoléhejte se jen na barvu.
Tím se zabývá obor přístupnosti uživatelského rozhraní—např. lidé, kteří jsou barvoslepí, by měli problém nepodtržený odkaz rozpoznat.
Poslední „doklepnutí“ nerozhodného zákazníka.
Představte argumenty, data a čísla, proč by si zákazníci měli vybrat právě vaše řešení.
„Tvoříme Todoist 15 let a 346 dní“ = zajímavý prvek—číslo pravděpodobně automaticky roste a je konkrétní a aktuální. Zvyšuje vnímaní kvality produktu.
Číslovky nebo znaky „+“ přitahují pozornost a působí důvěryhodně.
„Dosáhněte klidu s Todoistem“ = trochu abstraktní nadpis, ale je kreativní a neurazí. Vše již bylo řečeno. Takže si to tvůrci webu mohou dovolit.
„Start for free“ = „Začněte zdarma“
— akční sloveso, a k tomu slovíčko „zdarma“ odbourává obavu platit cokoliv předem. Vyzkoušením nic neztratíte.
Ilustrace „přetéká“ přes pozadí. Působí to jako 2 vrstvy přes sebe. To dodává pozadí hloubku. Výsledkem je, že si prvku více všimnete a zaujme vás. A přilákání pozornosti k této sekci webu znamená větší šance prokliku akčního tlačítka.
„Join millions of people who organize work and life with Todoist.“
„Připojte se k lidem, kteří organizují práci a život
s Todoistem“
= Lidé chtějí někam patřit. Mají tendence se přidávat k určitým skupinám lidí. Proto je k tomu vyzvěte (připojte se/přidejte se).
Stejně tak tady zapůsobí Stádový efekt. Lidé následují většinu.
Výborně! Dokončili jste rozbor! 🎉
Co si z něho odnést? (pokračujte 👉)
🎉
🎉
🎉
🎉
🎉
🎉
- Kombinujte jednoduchost a kreativní grafiku. Zapomeňte na složitá rozložení stránek. Jednoduché prvky oživte něčím „navíc“.
- Použijte menší velikosti nadpisů. Velikost není jediná vlastnost, která zaujme pozornost. Zkuste třeba přidat více prázdného místa.
- Textový obsah se snažte tvořit krátký a minimální. U každého slova si položte otázku: „Přidává toto slovo hodnotu“? Zbytek škrtněte.
- Ilustrace na celém webu musí být jednotné. Použijte stejný styl a barevnou paletu.
- Při psaní nadpisů i dalších textů si je čtěte nahlas. Hledejte rytmus a čtivost.
- Při prezentaci benefitů použijte transformaci zákazníka. Ukažte, kde je teď a kde může být po použití vašeho produktu nebo služby (A→B).
- Máte skvělé hodnocení zákazníka nebo výňatek z médií? Použijte citaci místo nadpisu. Je to obsah zadarmo a zvýší důvěryhodnost.
- Strohé a jednoduché fráze nebo věty obohaťte nevšedními přídavnými jmény a slovesy a přineste více emocí.
- Z textových bloků se snažte dělat pomyslné obdélníky. Délky řádků musí být podobně dlouhé.
- Modré odkazy jsou plus. Nezapomeňte odkazy podtrhnout, aby je každý rozeznal.
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ě →
…
Postupné odhalování
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í…
…více o partnerském programu →
✅
✅
✅
Bonus
Hodnocení
Příště…
(Odesílám 1. a 15. v měsíci)
Rozbor hlavní stránky - todoist.com
By Lukáš Augusta
Rozbor hlavní stránky - todoist.com
Aplikace k organizaci práce a života.
