Mobilní design pro ovládání palcem: Jak navrhnout dotykové cíle
Na mobilu nestačí tlačítko vidět. Člověk ho musí pohodlně zasáhnout, nezvolit sousední akci a rozpoznat výsledek. Ukážeme, jak kontrolujeme dotykové cíle od návrhu po skutečný telefon.
Začneme jednou důležitou obrazovkou: zákazník na telefonu mění termín servisní návštěvy. Potřebuje vybrat nový čas a potvrdit změnu. Vedle má možnost návštěvu zrušit. Na této modelové situaci vysvětlíme velikost aktivní plochy, dosah palce i kontrolu chyb. Nejde o výsledky konkrétního klienta.
Širší rozhodování o obsahu a rozložení webu popisujeme v článku mobile first. Tady půjdeme k jednotlivým ovládacím prvkům a tomu, co po návrháři a vývojáři při převzetí požadovat.
01Nejdřív rozlište ikonu, tlačítko a skutečnou aktivní plochu
Ikona kalendáře může mít 24 CSS px, zatímco plocha, která na dotyk otevře výběr termínu, může být výrazně větší. Uživatel vidí symbol, ale pro přesnost ovládání je rozhodující celá aktivní oblast. Samotná větší mezera kolem obrázku ji automaticky nezvětšuje. Musí být součástí skutečně ovladatelného prvku.
Při kontrole si necháme zobrazit hranice aktivních ploch. Ověříme i okraje, nikoli jen střed ikony. Zvětšená oblast nesmí překrývat sousední tlačítko: pokud stejný bod může znamenat dvě různé akce, je návrh nejednoznačný.
Do soupisu zahrneme také křížek dialogu, přepínače, zaškrtávací políčka s popiskem, šipky kalendáře a nabídku tří teček. Právě malé doprovodné prvky se při posuzování velkého hlavního tlačítka snadno přehlédnou.
02Jaká velikost tlačítek platí pro web, iOS a Android
Čísla porovnávejte jen s jejich jednotkou a významem. CSS pixel webu, bod pt v iOS a dp v Androidu nejsou počty fyzických pixelů displeje. Nepřepisujte proto hodnotu z jedné platformy do druhé jako univerzální normu.
| Prostředí | Vodítko pro aktivní plochu | Jak ho použít |
|---|---|---|
| Web, WCAG 2.2 AA | 24 × 24 CSS px, případně splnění některé výjimky | Kontrola kritéria 2.5.8; minimum není doporučený cíl pro každé hlavní tlačítko. |
| Web, WCAG 2.2 AAA | 44 × 44 CSS px s uvedenými výjimkami | Rozšířené kritérium 2.5.5 má vyšší úroveň požadavku. |
| iOS a iPadOS, Apple HIG | Výchozí 44 × 44 pt; tabulka uvádí minimum 28 × 28 pt | Pro běžné dotykové ovládání vycházejte z pohodlné výchozí velikosti a kontextu. |
| Android, doporučení Google | Alespoň 48 × 48 dp | Měřte dotykový cíl, i když je viditelná ikona menší. |
U obou webových kritérií existují přesně vymezené výjimky. Jejich použití ověřte v WCAG 2.5.8 a WCAG 2.5.5, ne jen podle rozměru ikony.
Údaje pro aplikace vycházejí z Apple HIG a doporučení Androidu. Splnění jednoho rozměru samo o sobě neprokazuje přístupnost celé obrazovky. U důležité akce raději upravíme rozložení, než abychom minimum a výjimky použili jako důvod pro těsnou řadu tlačítek.
03Dosah palce ověřte na úkolu, ne podle jediné barevné mapy
Jedna univerzální zelená zóna pro všechny telefony a ruce nestačí. Člověk může držet telefon vpravo, vlevo, oběma rukama nebo ho položit. Mění se velikost zařízení, úchop i možnosti pohybu. Spodní část obrazovky může být praktická pro častou akci, ale není automaticky pohodlná pro každého.
U změny návštěvy sledujeme celý sled: otevřít termíny, posunout kalendář, vybrat čas a potvrdit. Není příliš užitečné zpřístupnit poslední tlačítko, pokud každá předchozí volba nutí uživatele přehmatávat do horního rohu.
- Vyzkoušejte pravou i levou ruku na menším a větším telefonu, které zákazníci skutečně používají.
- Sledujte opakované přehmatávání, zakrytí informace prstem a zásahy sousední akce.
- Zahrňte člověka s omezenou jemnou motorikou, pokud patří do cílové skupiny; nenahrazujte ho odhadem týmu.
- Nechte účastníka pracovat obvyklým způsobem. Jednoruční ovládání je scénář testu, nikoli povinnost uživatele.
04Rozestupy a sousední akce navrhněte společně
Pro náš modelový web můžeme navrhnout ikonu 24 × 24 CSS px uvnitř aktivní plochy 48 × 48 CSS px. Je to zvolený příklad návrhu pro web, nikoli převod androidových dp. Vnější plocha musí být skutečně aktivní a sousední plochy zůstanou oddělené. Rozestup pak posoudíme při ovládání konkrétního rozložení. V tomto příkladu zvolíme mezi aktivními plochami mezeru 8 CSS px. Je to návrhová hodnota pro daný model, nikoli univerzální požadavek WCAG.
Vedlejší akce nesmí získat dotyky, které patří hlavní. Zrušení celé návštěvy proto nevmáčkneme hned vedle potvrzení nového času. Dáme mu samostatné místo a jasný text. U nevratného důsledku navrhneme vhodné potvrzení; u vratné změny může být užitečnější možnost návratu.
Pokud je seznam termínů příliš hustý, nesnažíme se zachránit každý drobný bod neviditelnou plochou. Zvětšíme celý řádek, rozdělíme výběr do kroků nebo omezíme současně zobrazené možnosti. Popisek a zaškrtávací políčko mají tvořit srozumitelný celek, ne dvě konkurenční akce.
05Zkontrolujte klávesnici, spodní lištu a změnu stavu
Obrazovka před vyplňováním není celá aplikace. Otevřete pole pro poznámku a ověřte, zda klávesnice nezakryje důležitou akci nebo právě psaný text. Potom zobrazte chybovou zprávu a delší přeložený popisek. Pevně přichycená lišta musí respektovat dostupný prostor i systémové ovládání telefonu.
Při odesílání má člověk poznat, že požadavek běží. Opakované ťuknutí nesmí bez kontroly vyvolat další změnu termínu. U pomalého spojení navrhneme stav čekání, chybový výsledek a bezpečné opakování; tento požadavek patří také vývojářům, ne jen do barev tlačítka.
Dotykový audit doplníme samostatnou kontrolou přístupnosti aplikace s VoiceOverem, TalkBackem a větším písmem. Pohodlný palec neřeší čtečku obrazovky, klávesnici ani srozumitelný název ovládání.
06Modelový přejímací test: změna servisní návštěvy
Zadání účastníkovi zní: „Na původní termín nemůžete přijít. Změňte návštěvu na některý volný čas příští týden a přidejte poznámku.“ Neříkáme, kterou ikonu má stisknout. Nejprve sledujeme samostatné dokončení, pak se doptáme na nejasná místa.
| Kontrola | Co zaznamenat | Co před převzetím opravit |
|---|---|---|
| Otevření kalendáře přes okraj aktivní plochy | Zda funguje i prostor kolem ikony | Neaktivní odsazení nebo plochu patřící sousedovi |
| Výběr mezi sousedními časy | Chybné zásahy a opravy volby | Těsné řádky nebo nejasně vybraný čas |
| Psaní poznámky | Viditelnost pole a hlavní akce při klávesnici | Zakrytý obsah, nemožnost pokračovat |
| Potvrzení a pomalá odezva | Rozpoznání čekání a výsledku | Dvojí odeslání nebo nejasný stav |
| Návrat bez změny | Zda člověk nechtěně zruší celou návštěvu | Zaměnitelné texty a sousedící nebezpečné akce |
Ke každému nálezu přidáme zařízení, stav obrazovky, očekávané chování a způsob zopakování. Samotný screenshot těsného kalendáře vývojáři neřekne, zda chybu způsobuje velikost, překrytí nebo posun prvků při načítání.
07Co předat návrháři a vývojáři
Převzetí zahrnuje rozměry aktivních oblastí v jednotkách cílové platformy, jejich rozestupy, stavy při stisku a čekání i chování u klávesnice. Domluvíme, které situace brání vydání a kdo ověří opravu na skutečném zařízení. Klikací obrázek může mít větší aktivní plochy než výsledná aplikace, proto test zopakujeme i v implementaci.
Pokud máte zatím návrh, využijeme interaktivní prototyp pro ověření před vývojem. U běžícího produktu lze tuto kontrolu začlenit do UX auditu s prioritami oprav. Když teprve přidáváte mobilní aplikaci k webovému produktu, nejdřív společně vybereme úkol, který má na telefonu skutečně fungovat.
V Listify můžeme zkontrolovat hlavní mobilní cestu, upravit její návrh a připravit ověřitelné zadání pro vývoj. Pro první domluvu stačí odkaz na produkt nebo prototyp, popis hlavního úkolu a informace, kdo jej na telefonu používá.
Pokud potřebujete i realizaci, navážeme návrhem a vývojem mobilní aplikace pro iOS a Android. Rozsah odvodíme od konkrétního úkolu a zjištěných problémů.
08Časté otázky k mobilním tlačítkům
Musí mít každé tlačítko na webu 44 × 44 pixelů?
Ne. WCAG 2.2 AA u kritéria 2.5.8 uvádí 24 × 24 CSS px s výjimkami; 44 × 44 CSS px patří ke kritériu 2.5.5 na úrovni AAA. Pro pohodlné použití můžeme zvolit větší plochu, zejména u častých nebo důležitých akcí.
Stačí zvětšit ikonu?
Ne vždy. Zkontrolujte skutečnou aktivní oblast a její vztah k sousedům. Menší ikona může mít dostatečně velkou aktivní plochu, zatímco velké grafické pozadí může být částečně neaktivní.
Má být hlavní tlačítko vždy dole?
Umístění odvoďte od úkolu a testu. Spodní akce může pomoci, ale nesmí překrývat obsah, klávesnici nebo systémové ovládání. Ověřte také levou ruku a různé velikosti telefonu.
Ověří dotykové cíle automatický audit?
Může upozornit na část rozměrových problémů. Pohodlí úchopu, záměnu akcí, reálnou aktivní plochu a dokončení úkolu potřebujeme ověřit také ručně na zařízení.