UX pro seniory: proč na něm záleží a kde se láme čitelnost vs. zneužití
Senioři (často 60+) představují rychle rostoucí segment online nakupujících. Vyznačují se širším spektrem schopností zraku, motoriky a digitální gramotnosti. Dobré UX pro seniory není „pouze zvětšit písmo a hotovo“ – je to systematický přístup k srozumitelnosti, navigaci, odolnosti vůči chybám a důvěře. Současně platí, že stejné prvky, které pomáhají (větší tlačítka, výrazné CTA, stručné texty), lze zneužít pro agresivní prodej (dark patterns). Cílem tohoto článku je ukázat praktické zásady, metriky a kontrolní mechanismy, které zlepší přístupnost a zároveň minimalizují riziko manipulace.
Typografické zásady: velikost, řádkování, délka řádku
- Základní velikost písma: 18–20 px pro běžný text. Pro zařízení s vysokou hustotou pixelů preferujte ≥ 18 px. Nadpisy odstupňujte v krocích 1,25–1,5×.
- Řádkování: line-height 1,5–1,7 pro delší odstavce. Zabraňuje „slepení“ řádků při slabším kontrastu.
- Délka řádku: 55–80 znaků (včetně mezer). Při větším písmu upravte šířku sloupce tak, aby se délka nepřekročila.
- Řezy písma: preferujte groteskní fonty se zřetelnými tvary (např. otevřené „a“, rozlišitelná „l“ vs. „I“). Vyhněte se tenkým řezům a nízkému kontrastu tahů.
- Plynulé zvětšení: zajistěte škálování uživatelského rozhraní až do 200 % bez horizontálního posuvu a bez ztráty funkčnosti.
Kontrast a barvy: čitelnost bez vizuálního křiku
- Kontrast textu: minimálně 4,5:1 pro běžný text, 3:1 pro „velký“ text (≥ 24 px nebo 18 px tučný). Pro seniorské publikum doporučujte 7:1, pokud to umožňuje vizuální identita.
- Stavové barvy: nerozlišujte stav pouze barvou. Přidejte ikonu, vzor, tooltip či text (např. „Chyba při platbě“).
- Dark mode: nabídněte, ale vyhněte se úplně čisté kombinaci #000 na #fff; příliš vysoký kontrast může bolet oči. Použijte mírně změkčené odstíny.
- Pohyb a blikání: respektujte prefer-reduced-motion; žádné blikající prvky (> 3 Hz).
Interakční plochy: cílové zóny, mezery, stavy
- Velikost klikacích prvků: minimálně 44×44 px (dotyk), 32×32 px (myš) – s dostatečným odstupem (8–12 px) od sousedních prvků.
- Focus a hover: jasně viditelný obrys (outline) s kontrastem > 3:1 vůči pozadí. Focus nikdy nesmazávejte.
- Odolnost vůči chybám: potvrzovací dialogy pro nezvratné akce, možnost „Undo“ (např. odebrat z košíku).
Jazyk a obsah: srozumitelnost, hierarchie, tón komunikace
- Plain language: krátké věty, aktivní rod, minimum žargonu. Místo „autentifikace transakce“ napište „potvrzení platby“.
- Informační hierarchie: jedna hlavní úloha na obrazovce, sekundární volby vizuálně potlačte, ale neznepřístupněte.
- Mikrotexty: při chybách uveďte důvod a nápravu („Číslo karty má 16 číslic. Zkontrolujte 4. blok.“).
- Ikony + text: ikona pomáhá, ale vždy ji doplňte textem („Košík“, ne jen piktogram).
Navigace a struktura: předvídatelnost a „nemýlící“ cesty
- Trvalé menu: konzistentní umístění, zvýrazněná aktuální sekce.
- Breadcrumbs (drobečková navigace): pro delší katalogy – rychlý návrat o jednu úroveň výše.
- Hledání: tolerujte překlepy, nabídněte návrhy. Zobrazujte „0 výsledků? Zkuste…“ s alternativami.
- Jednoduché toky: checkout v 1–3 krocích, jasné „Zpět“ a „Pokračovat“.
Formuláře a platby: chyba nesmí bolet
- Masky a validace: průběžná (inline) validace, ne až na konci. Při telefonu zobrazte formát +420 XXX XXX XXX a automaticky přidejte mezery.
- Automatické doplňování: podporujte autocomplete atributy (name, address-line1…).
- Výběr dopravy a platby: zobrazte úplné náklady a odhad doručení ihned. Nezakrývejte poplatky malým písmem.
- 2FA/SCA: informujte srozumitelně, co se bude dít. Nabídněte alternativní kanál (SMS/app) a dostatečný časový limit.
Technická přístupnost: klávesnice, čtečky, alternativy
- Ovládání klávesnicí: vše musí být přístupné přes Tab/Shift+Tab; logické pořadí fokusů.
- ARIA jen tam, kde je třeba: nepoužívejte ARIA k fixaci špatného DOM. Pro živé oblasti (např. cenu v košíku) použijte aria-live.
- Alternativa k vizuální CAPTCHA: preferujte pasivní mechanismy (risk scoring), případně zvukové a textové alternativy.
- PDF a dokumenty: pokud musí být, tak tagované, textové a s možností zvětšení a přečtení.
Etické hranice: jak se vyhnout zneužití seniorů
Větší text, kontrast a dominantní CTA mohou vést k „neúmyslnému“ kliknutí – pokud je rozložení záměrně zavádějící. Toto jsou hranice, které byste neměli překračovat:
- Misdirection: primární a sekundární tlačítka musí být rozlišitelná, ale rovnocenně viditelná u voleb s právním/finančním dopadem (např. souhlasy, předplatné, pojištění).
- Přednastavené opt-iny: nikdy ne. Souhlasy, „Přidej pojištění“, „Pravidelná zásilka“ musí být explicitní, vypnuté ve výchozím stavu.
- Skrytá cena a poplatky: neskrývejte je pod tooltipy. Zobrazte vznik nákladu, periodicitu, podmínky zrušení.
- Falešná naléhavost: „Zbývá 1 ks“, „Nabídka končí za 2:59“ bez reálného zdroje je nepřípustné.
- Confirmshaming: nevyvíjejte sociální tlak („Ne, nechci ušetřit“).
Cookie lišty a soukromí: jednoduché, čitelné, pravdivé
- Rovnocenné volby: „Přijmout“ a „Odmítnout“ na stejné úrovni. „Nastavení“ viditelné a srozumitelné.
- Jasné benefity: vysvětlete, proč některé cookies pomáhají (bezpečnost, košík), ale nepředávejte personalizaci jako „nezbytnou“.
- Zapamatování preferencí: respektujte volbu; neotravujte opakovanými dotazy při každé návštěvě.
Komponentová knihovna „senior-friendly“: stavebnice bez rizika
- Tlačítka: základní výška 48 px, stavy focus/active/disabled konzistentní. Sekundární akce vizuálně odlište, ne skryjte.
- Formulářové vstupy: label nad polem (ne v placeholderu), velikost 16–18 px, chybové hlášení pod polem.
- Karty a seznamy: oddělení stínem nebo silnější mezerou; cílová zóna na celou kartu (ne jen malou ikonu).
- Dialogy: maximální šířka 560–640 px, velké ovládací prvky, klávesa Esc zavře, jasné „Zrušit“.
Specifika e-commerce: od vyhledávání po poprodej
- Produktové stránky: velké fotografie s možností lupy, klíčové parametry v bodech, jasné „co je v balení“.
- Recenze: zvýrazněte recenze od uživatelů v podobném věku („Nákup pro rodiče 70+“), ale bez manipulačního tónu.
- Košík: přímočarost. Žádné rušivé cross-selly, které odsunují primární úlohu.
- Podpora: viditelné telefonní číslo, chat s propojením na člověka, „požádat o zpětné zavolání“.
- Vrácení zboží: jednoduchý krokový průvodce, tisknutelné pokyny, možnost asistovaného vyzvednutí.
Měření a kvalita: co sledovat, abyste věděli, že pomáháte
- Task success rate: dokončení nákupu, nalezení informace, kontaktování podpory.
- Time-on-task: příliš dlouhý čas může signalizovat nejasnost; příliš krátký s chybami naznačuje misdirection.
- Error rate: zejména u formulářů a plateb. Mapujte typy chyb (formát, chybějící pole, expirace).
- Call driver zpětnou vazbu: témata hovorů a chatu (např. „nevím najít dopravu“, „zablokovala se platba“).
- Stížnosti a vrácení: korelujte s expozicí souhlasům, upsellům a změnám UI.
Výzkum se seniory: metodika a etika
- Rekrutace: zahrňte různé úrovně digitálních dovedností a zdravotních omezení (zrak, motorika).
- Moderace: pomalejší tempo, hlasité myšlení, častější pauzy, větší zařízení.
- Úkoly: realistické scénáře (najít produkt, porovnat, objednat, kontaktovat podporu).
- Etika: nevystavujte účastníky nátlaku. Po testech debriefing, co bylo cílem a jaká mají práva.
Dark pattern „červené vlajky“: automatický audit
- Asymetrie tlačítek: primární je neúměrně větší/kontrastnější než „Odmítnout“, zejména u souhlasů a pojištění.
- Zatajování ceny: příplatky až v posledním kroku nebo v tooltipu malým písmem.
- Narušení toku: modaly, které brání návratu k předchozímu kroku.
- Emoční nátlak: confirmshaming, alarmistické texty („Bez pojištění riskujete ztrátu“).
- Výchozí volby: přednastavené zaškrtnuté předplatné, newsletter, sdílení dat.
Implementační plán v praxi (6 kroků)
- Audit: změřte kontrast, velikosti, fokus, dostupnost klávesnicí, formuláře, cookie lištu.
- Typografie a kontrast: zvyšte body text na 18–20 px, nastavte line-height, zkontrolujte 4,5:1 (cíl 7:1).
- Komponenty: aktualizujte knihovnu (tlačítka 48 px, labely formulářů, viditelný fokus).
- Toky: zkraťte checkout, zrušte rušivé modaly, zjednoznačněte volby.
- Etika: zrovnopravněte „Odmítnout“ vs. „Souhlasím“, deaktivujte výchozí opt-iny, zveřejněte jasné ceny.
- Testování: rychlé 5–8 uživatelské testy se seniory, následné iterace a A/B validace v produkci.
Checklist „senior-friendly a bez zneužití“
- Body text ≥ 18 px, line-height ≥ 1,5; délka řádku 55–80 znaků.
- Kontrast textu min. 4,5:1 (cíl 7:1), viditelný fokus.
- Interakční prvky ≥ 44×44 px, odstup ≥ 8 px.
- Formuláře s maskami, inline validací a jasnými chybami.
- Checkout max. 3 kroky, srozumitelné ceny a doručení.
- Žádné přednastavené souhlasy, žádné confirmshaming texty.
- Cookie lišta: „Přijmout“ = „Odmítnout“ vizuálně rovnocenné.
- Ovládání klávesnicí a čtečkami funguje ve 100 % toků.
- Prefer-reduced-motion respektováno, žádné blikání.
- Zpětná vazba od seniorů zapracována a průběžně měřená.
Shrnutí: důvěra je UX vlastnost
UX pro seniory není „speciální režim“, ale přístup, který staví na čitelnosti, předvídatelnosti a důvěře. Zlepšení jako větší písmo, vyšší kontrast a jednodušší toky pomáhají všem uživatelům – pokud jsou implementovány eticky. Vyhněte se temným vzorům, poskytujte úplné informace a dávejte uživateli kontrolu. Tak získáte nejen lepší metriky, ale především loajální zákazníky, kteří se vracejí, protože rozumějí
