Mobilný dizajn pre ovládanie palcom: Ako navrhnúť dotykové ciele
Na mobile nestačí tlačidlo vidieť. Človek ho musí pohodlne zasiahnuť, nevybrať susednú akciu a rozpoznať výsledok. Ukážeme, ako kontrolujeme dotykové ciele od návrhu po skutočný telefón.
Začneme jednou dôležitou obrazovkou: zákazník na telefóne mení termín servisnej návštevy. Vyberá nový čas a potvrdzuje zmenu. Vedľa má možnosť návštevu zrušiť. Na tejto modelovej situácii vysvetlíme aktívnu plochu, dosah palca a kontrolu chýb. Nejde o výsledky konkrétneho klienta.
Širšie rozhodovanie o obsahu a rozložení webu opisujeme v článku mobile first. Tu sa sústredíme na jednotlivé ovládacie prvky a na to, čo požadovať pri ich prevzatí.
01Rozlíšte ikonu, tlačidlo a skutočnú aktívnu plochu
Ikona kalendára môže mať 24 CSS px, zatiaľ čo plocha, ktorá dotykom otvorí výber termínu, môže byť podstatne väčšia. Používateľ vidí symbol, ale presnosť ovládania závisí od celej aktívnej oblasti. Väčšia medzera okolo obrázka ju sama nezväčší. Musí patriť k skutočne ovládateľnému prvku.
Pri kontrole si necháme zobraziť hranice aktívnych plôch. Vyskúšame okraje, nielen stred ikony. Zväčšená oblasť nesmie prekrývať susedné tlačidlo. Jeden bod nesmie nejednoznačne patriť dvom rôznym akciám.
Do zoznamu zaradíme aj krížik dialógu, prepínače, zaškrtávacie políčka s popisom, šípky kalendára a ponuku troch bodiek. Pri pohľade na veľké hlavné tlačidlo sa tieto drobné prvky ľahko prehliadnu.
02Veľkosť tlačidiel na webe, v iOS a Androide
Hodnoty porovnávajte spolu s jednotkou a významom. CSS pixel webu, bod pt v iOS a dp v Androide nie sú počty fyzických pixelov displeja. Jedno číslo preto nemožno preniesť medzi platformami ako univerzálnu normu.
| Prostredie | Vodidlo pre aktívnu plochu | Ako ho používať |
|---|---|---|
| Web, WCAG 2.2 AA | 24 × 24 CSS px alebo splnenie niektorej výnimky | Kritérium 2.5.8; minimum nie je ideálna veľkosť každej hlavnej akcie. |
| Web, WCAG 2.2 AAA | 44 × 44 CSS px s uvedenými výnimkami | Rozšírené kritérium 2.5.5 má vyššiu úroveň požiadavky. |
| iOS a iPadOS, Apple HIG | Predvolená veľkosť 44 × 44 pt; minimum v tabuľke 28 × 28 pt | Pri bežnom dotykovom ovládaní vychádzajte z pohodlnej predvolenej veľkosti. |
| Android, odporúčanie Google | Aspoň 48 × 48 dp | Merajte dotykový cieľ, aj keď je samotná ikona menšia. |
Obe webové kritériá obsahujú presne vymedzené výnimky. Ich použitie overte vo WCAG 2.5.8 a WCAG 2.5.5, nie iba podľa rozmeru ikony.
Údaje pre aplikácie vychádzajú z Apple HIG a odporúčaní Androidu. Jeden splnený rozmer ešte nepreukazuje prístupnosť obrazovky. Pri dôležitej akcii radšej zmeníme rozloženie, než by sme minimum využili na ospravedlnenie tesného radu tlačidiel.
03Dosah palca overte na úlohe
Jedna zelená zóna pre všetky ruky a telefóny nestačí. Človek drží telefón vpravo, vľavo, oboma rukami alebo ho položí. Mení sa veľkosť zariadenia, úchop aj možnosti pohybu. Spodná časť môže byť praktická pre častú akciu, no nie je automaticky pohodlná pre každého.
Pri zmene návštevy sledujeme celý postup: otvoriť termíny, posunúť kalendár, vybrať čas a potvrdiť ho. Dostupné posledné tlačidlo nepomôže, ak predchádzajúce voľby stále nútia človeka meniť úchop.
- Vyskúšajte pravú aj ľavú ruku na menšom a väčšom telefóne používanom zákazníkmi.
- Sledujte zmeny úchopu, informácie zakryté prstom a zásahy susednej akcie.
- Ak do cieľovej skupiny patria ľudia s obmedzenou jemnou motorikou, zapojte ich do overovania.
- Nechajte účastníka pracovať obvyklým spôsobom. Ovládanie jednou rukou je skúšobný scenár, nie povinnosť používateľa.
04Veľkosť a rozostupy riešte spolu
Pre náš modelový web môžeme navrhnúť ikonu 24 × 24 CSS px v aktívnej ploche 48 × 48 CSS px. Je to zvolený príklad webového návrhu, nie prevod androidových dp. Celá vonkajšia plocha musí fungovať a susedné oblasti musia zostať oddelené. Rozostup posúdime pri používaní konkrétneho rozloženia. V tomto príklade zvolíme medzi aktívnymi plochami medzeru 8 CSS px. Je to návrhová hodnota pre tento model, nie univerzálna požiadavka WCAG.
Zrušenie celej návštevy neumiestnime tesne vedľa potvrdenia nového času. Dostane samostatné miesto a jasný text. Pri nezvratnom dôsledku navrhneme vhodné potvrdenie; pri vratnej zmene môže byť užitočnejšia možnosť vrátiť ju späť.
Ak je zoznam termínov príliš hustý, nezachraňujeme každý malý bod neviditeľnou plochou. Zväčšíme celý riadok, rozdelíme výber do krokov alebo obmedzíme súčasne zobrazené možnosti. Zaškrtávacie políčko a jeho popis majú tvoriť jeden zrozumiteľný celok.
05Skontrolujte klávesnicu, spodnú lištu a odozvu
Otvorte pole na poznámku. Overte, či klávesnica nezakryje hlavné tlačidlo alebo práve písaný text. Potom zobrazte chybovú správu a dlhší preložený popis. Pevná spodná lišta musí rešpektovať dostupný priestor aj systémové ovládanie telefónu.
Pri odosielaní musí človek rozpoznať, že požiadavka prebieha. Opakovaný dotyk nemá bez kontroly vyvolať ďalšiu zmenu termínu. Navrhneme čakanie, chybu aj bezpečné zopakovanie pri pomalom spojení. Tento bod patrí aj do vývojového zadania, nestačí zmeniť farbu tlačidla.
Dotykový audit doplníme samostatnou kontrolou prístupnosti s VoiceOverom, TalkBackom a väčším písmom. Pohodlné ovládanie palcom samo nerieši čítačku obrazovky, klávesnicu ani názvy ovládacích prvkov.
06Modelový preberací test: zmena servisnej návštevy
Zadanie znie: „Na pôvodný termín nemôžete prísť. Zmeňte návštevu na niektorý voľný čas budúci týždeň a pridajte poznámku.“ Nehovoríme, ktorú ikonu stlačiť. Najprv sledujeme samostatné dokončenie a až potom sa pýtame na nejasné miesta.
| Kontrola | Čo zaznamenať | Čo opraviť pred prevzatím |
|---|---|---|
| Otvorenie kalendára cez okraj aktívnej plochy | Fungovanie priestoru okolo ikony | Neaktívne odsadenie alebo prekrývanie suseda |
| Výber medzi susednými časmi | Chybné zásahy a opravy voľby | Tesné riadky alebo nejasné označenie výberu |
| Písanie poznámky | Viditeľnosť poľa a hlavnej akcie | Zakrytý obsah alebo nemožnosť pokračovať |
| Potvrdenie pri pomalej odozve | Rozpoznanie čakania a výsledku | Dvojité odoslanie alebo nejasný stav |
| Návrat bez zmeny | Neúmyselné zrušenie celej návštevy | Zameniteľné texty a susediace nebezpečné akcie |
Ku každému nálezu zapíšeme zariadenie, stav obrazovky, očakávané správanie a postup zopakovania. Samotný obrázok kalendára neukáže, či problém spôsobuje veľkosť, prekrytie alebo pohyb prvkov pri načítaní.
07Čo odovzdať dizajnérovi a vývojárovi
Zadanie obsahuje rozmery aktívnych plôch v jednotkách cieľovej platformy, rozostupy, stav pri stlačení aj čakaní a správanie pri klávesnici. Určíme, ktoré chyby bránia vydaniu a kto preverí opravu na zariadení. Prototyp môže mať iné aktívne plochy než hotová aplikácia, preto kontrolujeme aj implementáciu.
Pri novom návrhu využijeme interaktívny prototyp pred vývojom. Pri bežiacom produkte kontrolu začleníme do UX auditu s prioritami opráv. Ak pridávate mobilnú aplikáciu k webovému produktu, najprv vyberieme úlohu, ktorá má na telefóne fungovať.
V Listify môžeme preveriť hlavnú mobilnú cestu, upraviť obrazovky a pripraviť overiteľné zadanie pre vývoj. Na prvý rozhovor stačí odkaz na produkt alebo prototyp, hlavná úloha a opis ľudí, ktorí ju vykonávajú.
Ak potrebujete aj realizáciu, nadviažeme návrhom a vývojom mobilnej aplikácie pre iOS a Android. Rozsah určíme podľa konkrétnej úlohy a zistených problémov.
08Časté otázky o mobilných tlačidlách
Musí mať každé webové tlačidlo 44 × 44 pixelov?
Nie. Kritérium WCAG 2.2 AA 2.5.8 uvádza 24 × 24 CSS px s výnimkami. Hodnota 44 × 44 CSS px patrí ku kritériu 2.5.5 na úrovni AAA. Väčšiu plochu môžeme zvoliť pre pohodlie, najmä pri častej alebo dôležitej akcii.
Stačí zväčšiť ikonu?
Nie vždy. Rozhoduje skutočná aktívna oblasť a jej vzťah k susedným prvkom. Malá ikona môže mať veľkú aktívnu plochu, kým grafické pozadie môže zostať neaktívne.
Má byť hlavné tlačidlo vždy dole?
Umiestnenie vyberte podľa úlohy a overenia. Spodná akcia nesmie prekrývať obsah, klávesnicu ani systémové ovládanie. Vyskúšajte aj ľavú ruku a rôzne veľkosti telefónov.
Stačí automatický audit?
Môže zachytiť časť rozmerových problémov. Úchop, zámenu akcií, skutočnú aktívnu plochu a dokončenie úlohy overíme aj ručne na telefóne.