Znáte ten pocit, když jedete v tramvaji, v jedné ruce se držíte tyče a druhou rukou se snažíte na telefonu nakoupit na e-shopu? Palcem zběsile klikáte na tlačítko „Přidat do košíku“, ale místo toho se vám neustále otevírá chatovací okno nebo vyskakovací lišta s cookies. Po třetím neúspěšném pokusu web naštvaně zavíráte a odcházíte ke konkurenci.
Gratuluji, právě jste se stali obětí ignorování „telefonního palce“ (v angličtině známého jako The Thumb Zone).
Pokud provozujete web nebo e-shop a nevíte, co tento pojem znamená, s vysokou pravděpodobností přicházíte o desítky procent tržeb, aniž byste o tom věděli. Pojďme se podívat na to, proč design pro lidský palec rozhoduje o úspěchu vašeho byznysu.
Co je to „Thumb Zone“ (Zóna palce)?
Tento termín poprvé představil designér Steven Hoober, který zkoumal, jak lidé reálně drží a ovládají chytré telefony. Zjistil fascinující věc: až 49 % lidí ovládá telefon výhradně jednou rukou a k veškerému klikání používá pouze palec téže ruky.
Když se podíváte na obrazovku telefonu přes optiku lidské anatomie, zjistíte, že se plocha dělí na tři základní oblasti:
- Zóna přirozená (Natural): Oblast ve spodní a střední části displeje, kam palec dosáhne naprosto bez námahy. Zde se odehrává 90 % úspěšných konverzí.
- Zóna s námahou (Stretch): Okraje displeje, kam palec dosáhne jen při lehkém vykloubení nebo změně úchopu telefonu.
- Zóna nedostupná (Ow!): Horní rohy displeje. Abyste tam dosáhli, musíte zapojit druhou ruku, nebo riskujete, že vám telefon vypadne z dlaně na beton.
Proč na tom moderní weby krachují?
Problém je v tom, že většina webů se stále navrhuje na velkých monitorech stolních počítačů. Na desktopu dává smysl mít hlavní menu a nákupní košík v pravém horním rohu. Jenže když se takový web bezmyšlenkovitě smrští do mobilní verze, nejdůležitější prvky se ocitnou v zóně „Nedostupná“.
Pokud nutíte zákazníka, aby pro dokončení objednávky pokaždé natahoval prst do levého horního rohu na ikonu „Zpět“ nebo do pravého horního rohu na „Menu“, vytváříte v jeho mozku takzvané kognitivní tření. Každé takové tření oslabuje chuť nakoupit.
3 kroky, jak upravit web pro „telefonní palec“ a zvýšit tržby
Chcete-li, aby váš web začal na mobilech vydělávat, musíte jít palci naproti. Zde jsou základní pravidla moderního mobilního designu:
1. Přesuňte navigaci dolů (Sticky Bottom Menu)
Podívejte se na nejúspěšnější mobilní aplikace současnosti – Instagram, Spotify, Facebook nebo LinkedIn. Kde mají hlavní navigační lištu? Vždy dole. Vědí totiž, že tam je palec doma. Moderní weby dnes přebírají tento trend a nejdůležitější ikony (Hledat, Košík, Účet, Menu) fixují na spodní hranu obrazovky.
2. Velká a izolovaná CTA tlačítka
Pokud má uživatel kliknout na tlačítko „Koupit nyní“, toto tlačítko musí být dostatečně velké. Apple i Google ve svých manuálech doporučují, aby minimální velikost klikatelného prvku na mobilu byla 44 × 44 pixelů (ideálně však více). Zároveň kolem tlačítka musí být volný prostor. Pokud dáte dva odkazy těsně vedle sebe, uživatel s tlustším prstem klikne na ten nesprávný, což ho okamžitě frustruje.
3. Formuláře bez bolesti
Vyplňování dodacích údajů na mobilu je za trest. Umístěte formulářová pole tak, aby byla uprostřed obrazovky, a zajistěte, aby se po kliknutí na políčko „Telefon“ automaticky otevřela numerická klávesnice, nikoliv ta klasická s písmeny. Každé ušetřené kliknutí posouvá zákazníka blíž k zaplacení.
Zlaté pravidlo mobilního byznysu: Netrápíte náhodou palce svých zákazníků? Otevřete si dnes večer svůj vlastní web na mobilu, vezměte ho do jedné ruky a zkuste projít celým procesem nákupu nebo odeslání poptávky pouze pomocí palce. Pokud u toho ucítíte křeč v ruce nebo napětí, našli jste přesné místo, kde vám utíkají peníze.