Řeknete si, že se jen na minutku podíváte na Instagram. Jeden příspěvek, druhý, Reel, další Reel… a najednou jste o dvacet minut starší a víte, jak správně skládat trička, co vaří cizí rodina v Norsku a proč někdo přestavěl dodávku na dům.
Za celou dobu jste přitom nemuseli přemýšlet, kam kliknout. Palec dělal pořád totéž. Scroll. Scroll. Scroll.
A právě tohle zdánlivě obyčejné gesto postupně mění způsob, jakým se pohybujeme digitálním světem. Nejen na TikToku nebo Instagramu. Návyky z aplikací si totiž přinášíme také na e-shopy, firemní weby a další stránky.
Jenže webdesign dlouhá léta vycházel z trochu jiného chování.
Možná jste už slyšeli o F-patternu. Podle něj uživatelé skenují stránku přibližně ve tvaru písmene F: nejvíc pozornosti věnují horní části, postupují zleva doprava a při cestě dolů se drží stále více vlevo.
Platí to ještě ve světě, kde velkou část dne posouváme obsah jedním palcem?
Platí. Jen už to není celý příběh.
Vedle klasického F-patternu se totiž objevuje další způsob konzumace obsahu. UX/UI designér Marcus Fleckner pro něj používá označení „feed-shaped reading/consuming“.
A pokud řešíte web, UX, obsah nebo konverze, vyplatí se mu věnovat pozornost.
F-pattern vznikl v době, kdy jsme internet používali jinak
Vraťme se na chvíli do roku 2006.
Facebook byl dvouletý, první iPhone ještě neexistoval a internet jsme používali především na počítači. Web měl navigaci nahoře, obsah uprostřed, někdy sidebar a spoustu textu.
Právě tehdy Nielsen Norman Group při sledování pohybu očí uživatelů popsala známý F-shaped pattern.
Když výzkumníci sledovali pohyb očí uživatelů, opakoval se podobný scénář. Člověk nejprve přečetl horní část stránky zleva doprava. O něco níž udělal kratší horizontální pohyb a potom už očima sjížděl hlavně levou část obsahu.
Výsledná heatmapa připomínala písmeno F.
A tak jsme začali řešit, co patří vlevo, co vpravo, kam umístit hlavní tlačítko a kam musíme dát nejdůležitější informace.
Jenže od té doby se nezměnily jen displeje. Změnili jsme se i my jako jejich uživatelé.
Dnes možná právě čtete tento článek na telefonu. Jednou rukou ho držíte, druhou ani nepotřebujete. Stačí pohyb palcem a před vámi se objevuje další a další obsah.
A právě tady už samotné písmeno F nestačí.
Naučili jsme se, že dole vždycky něco čeká
Otevřete TikTok, Instagram Reels nebo YouTube Shorts a nemusíte dostat jedinou instrukci.
Nikdo vám neřekne: „Pro další video stiskněte tlačítko Pokračovat.“
Prostě víte.
Posunete prstem a přejdete na další obsah.
Nezaujal? Další.
Zaujal? Chvíli zůstanete. Pak zase pokračujete.
Fleckner tento způsob používání obrazovky popisuje jako feed-shaped reading. Místo výrazného pohybu zleva doprava hraje hlavní roli vertikální osa. Pozornost držíte převážně ve středu obrazovky a oči jen občas odskočí k popisku, ikoně nebo tlačítku.
Nejzajímavější ale je, co se stane potom.
Z Instagramu odejdete. Otevřete e-shop.
A svůj palec ani očekávání nenecháte na Instagramu.
Naučili jsme se, že další obsah je dole. A stejné chování si přinášíme prakticky kamkoliv, kde se před námi objeví obrazovka.
Palec je nový kurzor. A nemá nekonečně dlouhé prsty
Na počítači to má kurzor jednoduché. Z levého horního rohu do pravého dolního přeběhne za zlomek sekundy.
Palec má horší pracovní podmínky.
Vezměte telefon do jedné ruky a zkuste bez přehmátnutí klepnout do všech jeho částí. Dole to jde snadno. U horního rohu už začíná drobná prstová gymnastika.
Právě proto se důležité ovládací prvky mobilních aplikací často stěhují dolů a k pravé straně. Nejde jen o módu nebo o to, že to tak dělá konkurence. Do hry vstupuje obyčejná ergonomie.
Pro UX z toho plyne jednoduchá otázka:
Proč nutit uživatele cestovat prstem po celém displeji, když mu můžete důležitou akci nabídnout tam, kde ji pohodlně zvládne?
Jednou si kvůli tlačítku telefon v ruce posune. Podruhé také. Podesáté už začínáte vybírat z jeho účtu trpělivosti.
A ten nemá neomezený zůstatek.
Hlavička má svých pár sekund slávy
Horní část webu rozhodně není zbytečná. Právě naopak.
Když stránku otevřete, potřebujete rychle zjistit, kam jste se dostali. Vidíte logo, navigaci, nadpis, hlavní sdělení. Během několika okamžiků si odpovíte na základní otázku:
Jsem tady správně?
Pak ale začnete scrollovat.
Hlavička odjede nahoru a hlavní děj se přesune doprostřed obrazovky. Pokud jste do horní části schovali jedinou důležitou výzvu k akci, máte problém.
Představte si třeba produktovou stránku.
Nahoře jste viděli tlačítko Přidat do košíku, ale ještě jste nebyli rozhodnutí. Pokračujete tedy dál. Prohlédnete si fotografie, přečtete parametry, zjistíte, jak produkt funguje, projdete recenze.
Teď už ho chcete.
Jenže tlačítko je o pět scrollů výš.
Takže vzhůru. Scroll. Scroll. Scroll.
Tohle je přesně okamžik, kdy přestává dávat smysl řešit CTA jen otázkou „vlevo, nebo vpravo?“.
Mnohem důležitější otázka zní: Kde bude člověk ve chvíli, kdy se rozhodne kliknout?
Hlavní děj se odehrává ve vertikální páteři
Feed nás vycvičil ještě v jednom směru. To důležité očekáváme tam, kudy právě procházíme.
Dolů.
Co z toho plyne pro web? Pokud návštěvník něco opravdu potřebuje vidět, dejte mu to do jeho přirozené cesty.
Dobře je to vidět na horizontálních carouselech.
Vy scrollujete dolů. Web vám ukáže první kartu a vedle ní kousek druhé. Abyste viděli další, musíte najednou změnit směr a táhnout prstem do strany.
Uděláte to?
Možná.
Dostanete se až k šesté kartě?
Tady už bychom si tak jistí nebyli.
Horizontální carousel po člověku žádá, aby na chvíli opustil naučený vertikální pohyb. Pokud do jeho třetího, čtvrtého nebo pátého políčka schováte zásadní sdělení, část návštěvníků se k němu vůbec nemusí dostat.
Podobně fungují postranní panely na desktopu. Dlouhé roky bannerové reklamy navíc naučily naše oči některé okrajové části webů docela úspěšně ignorovat.
Neznamená to, že máte zítra odstranit všechny carousely a sidebary.
Jen jim nesvěřujte informaci, bez níž návštěvník nepochopí vaši nabídku.
Obří hero vypadá skvěle. Ale co jste mi vlastně chtěli říct?
Znáte to.
Otevřete web. Přes celý displej nádherná fotografie. Přes ni dvě slova. Pod nimi možná něco jako:
Budoucnost začíná dnes.
Působivé.
Jen pořád nevíte, co firma prodává.
A tak scrollujete.
Teprve na další obrazovce zjistíte, že jste na webu účetního softwaru.
Feed-shaped chování ukazuje, proč bychom měli o prvních obrazovkách webu přemýšlet trochu jinak. Nemusíte návštěvníkovi naservírovat celý web hned nahoře. Měl by ale dostat dost informací na to, aby pochopil, kde je a proč má pokračovat.
To platí dvojnásob, pokud přichází z vyhledávače.
Když někdo zadá konkrétní dotaz do Googlu, nekliká na výsledek proto, aby obdivoval váš hero obrázek. Hledá odpověď.
Dejte mu co nejdřív najevo, že ji u vás najde.
Tohle všechno se týká i textu
Možná si teď říkáte: dobře, pěkné téma pro UX designéry. Co s tím má dělat copywriter?
Docela hodně.
Představte si dva články o pěti tisících slovech. První tvoří dlouhé odstavce, neurčité mezititulky a text, kde všechno vypadá stejně důležitě.
Druhý vás při cestě dolů vede. Mezitulky vám řeknou, co přijde. Důležitá informace dostane prostor. Příklad přeruší teorii právě ve chvíli, kdy jí začínáte mít dost. Tabulka se objeví tam, kde by pět odstavců jen komplikovalo jednoduché srovnání.
Oba texty mohou obsahovat stejné informace.
Ale jen jeden se vám dobře scrolluje.
Ne proto, že by lidé přestali číst. To je příliš pohodlné vysvětlení.
Lidé si průběžně vybírají, co budou číst.
Při každém scrollu jim vlastně dáváte malý důvod pokračovat – nebo odejít.
A tady se F-pattern s feed-shaped chováním krásně potkávají. Uvnitř textu pořád záleží na začátku odstavce, nadpisu a prvních slovech. V rámci celé stránky ale zároveň rozhodujete o tom, co člověk potká po cestě dolů.
Tak kam s tím tlačítkem?
Vlevo, nebo vpravo?
Ještě před pár lety by tím možná debata začala. Dnes bychom před ni přidali jinou otázku:
Kdy ho uživatel potřebuje?
Pokud si právě vybral variantu produktu, dejte mu možnost vložit ji do košíku poblíž výběru. Když jste mu vysvětlili službu a zodpověděli hlavní obavy, nabídněte další krok právě tam. A když dokončil dlouhý proces, nenuťte ho hledat potvrzení někde v horním rohu.
Akce má navazovat na obsah, k němuž patří.
V prostředí feedu navíc část klasických navigačních prvků přestává být nutná. „Další“ už často neznamená tlačítko. Další znamená scroll.
Uvolněný prostor pak mohou obsadit akce, jež v danou chvíli dávají větší smysl: přidat, uložit, sdílet, koupit, rozbalit nebo pokračovat v konkrétním procesu.
Máme tedy písmeno F hodit do koše?
Ne tak rychle.
F-pattern nezmizel. Když čtete tento odstavec, vaše oči stále postupují zleva doprava. Když stránku rychle skenujete, začátky řádků a levá část obsahu mají pořád velkou váhu.
Jenže zatímco oči čtou řádek horizontálně, celým digitálním prostředím se stále častěji pohybujeme vertikálně.
A to mění otázky, na něž by měl dobrý web odpovídat.
Nejen: Kam se člověk podívá jako první?
Ale také: Co uvidí po dalším scrollu? Kde bude ve chvíli, kdy se rozhodne? Dosáhne pohodlně na důležitou akci? Nezůstala zásadní informace někde bokem? A dáváme mu při cestě dolů dost důvodů, aby v ní pokračoval?
F-pattern nám pomohl pochopit, jak lidé skenují stránku.
Feed-shaped chování k tomu přidává další vrstvu: jak se stránkou pohybují.
A pokud chcete, aby váš web lidi dovedl až k objednávce, poptávce nebo jiné konverzi, potřebujete počítat s obojím.
Protože zatímco vy řešíte pixely, tlačítka a strukturu stránky, návštěvník dělá něco mnohem jednoduššího.
Posouvá palcem.
A rozhoduje se, jestli udělá ještě jeden scroll.
Co si z článku odnést
- F-pattern nezmizel, ale už sám nevysvětluje, jak se na webu pohybujeme.
- Mobily a nekonečné feedy posílily vertikální způsob konzumace obsahu. Jsme zvyklí scrollovat a další obsah automaticky hledáme níž.
- Palec je při návrhu mobilního webu stejně důležitý jako oči. Klíčové prvky by měly být nejen vidět, ale také pohodlně dostupné.
- Důležitý obsah patří do přirozené cesty uživatele. Pokud ho schováte do carouselu, sidebaru nebo daleko od hlavního toku stránky, část lidí ho může minout.
- CTA má přijít ve správnou chvíli. Neřešte jen jeho pozici vlevo nebo vpravo, ale hlavně to, kde se člověk nachází ve chvíli, kdy je připravený udělat další krok.
- Text musí fungovat i při scrollování. Mezitulky, příklady a dobře rozvržené informace pomáhají čtenáři rychle poznat, čemu chce věnovat pozornost.
- F-pattern a feed-shaped chování nestojí proti sobě. Jedno pomáhá pochopit, jak lidé obsah skenují, druhé zase, jak se jím pohybují.
