Praktisks gids modālajos logos
Modālais logs, dialogs, uznirstošais logs – tie ir dažādi veidi kā nosaukt to logu, kas ekrānā atveras pa virsu visam citam. Tie ir mans “interneta bubulis”, jo kā neaicināti viesi parādās tur, kur nevajag un tad, kad negaidu.
Modālie logi ir arī bieža piekļūstamības problēma – kamēr vizuāli ir skaidrs kā tikt no loga ārā, jebkuram, kurš izmanto palīgtehnoloģijas vai pārvietojas ar klaviatūru, šie logi var kļūt par milzu barjeru. Cilvēks var pat nezināt, ka lapu pārklāj modālais logs.
Es ceru, ka šis raksts radīs izpratni, kurās situācijās ir vērtīgi izmantot modālos logus, kā atšķirt modālos logus no paneļiem un kā pārbaudīt modālā loga piekļūstamību.
Kas ir modālais logs?
Par modālo logu sauc dialogu, kurš daļēji (vai pilnībā) aizklāj lapas pamatsaturu un bloķē pamatsaturu līdz brīdim, kad lietotājs nepārprotami mijiedarbojas ar modālo logu. Ļoti bieži tam ir fons (backdrop), kas aptumšo pārējo lapas saturu (šadu modālo logu kopā ar fonu dēvē par lightbox).
Modālais logs vēsturiski ir radies, lai brīdinātu lietotājus par kļūdu vai svarīgu izmaiņu sistēmā, kam nepieciešama lietotāja iesaiste. Tika uzskatīts, ka šajos gadījumos ir svarīgi iztraucēt lietotājus no tā brīža nodarbes. Modālais logs pa vidu ekrānam bija labs veids kā piesaistīt uzmanību un ātri atrisinātu problēmu.
Tomēr mūsdienās modālos logus daudz biežāk izmanto, lai piesaistītu lietotāja uzmanību mazāk pamatoti vai pat ļaunprātīgi. Orģinālais pielietojums šķiet piemirsts.
Modālo logu trūkumi
Lūk, tipiskākās problēmas, ko lietotājam rada modālie logi:
- Pieprasa visu uzmanību te un tagad (nevar ignorēt)
- Iztraucē domu gaitu un iesāktās darbības (izsit no līdzsvara)
- Liek veikt papildus negribētas darbības (kā, piemēram, aizvērt modālo logu)
- Bloķē galvenās lapas saturu (nevar piekļūt svarīgām detaļām zem modālā loga)
Kad izmantot modālo logu
Modālos logus vislabāk izmantot tam, kam tie sākotnēji tika paredzēti – lietotājam kritisku ziņu un stāvokļu nodošanai, vai kritiskas informācijas ievadei.
Bet bizness?
Visbiežāk informācija, ko mājaslapā gribas uzsvērt nav lietotājam kritiska. Piemēram, bez modālā loga vajadzētu iztikt mārketinga nolūkos, jo modālajiem logiem ir būtiski trūkumi ne tikai no lietotāja, bet arī no organizācijas skatpunkta:
- Ja modālais logs nav cieši saistīts un palīdzošs lietotāja tā brīža vajadzībām, tie var tikt uztverti kā kaitinoši un mazināt uzticību organizācijai.
- Izmantojot kritiska formātu (modālo logu) lietotājam mazsvarīgas informācijas sniegšanai, lietotāji nepievērsīs uzmanību tad, kad tajā būs kritiska informācija (kā trauksmes signāls, kas atskan tik bieži, ka neviens tam vairs netic).
Lai arī pieteikšanās jaunumiem epastā un dalīšanas ar lapu sociālajos tīklos biznesam ir svarīga, modālo logu izmantošana šiem mērķiem lietotājos rada nicinājumu un neapmierinātību. Tas savukārt palielina sliktas atsauksmes un zaudētus klientus.
Modālā loga alternatīva – panelis (Modeless dialog)
Situācijās, kad ļoti gribas pievērst lietotāja uzmanību, bet tas nav kritiski, laba alternatīva ir panelis (modeless dialog). Tas ir modālā loga tuvs līdzinieks. Paneļa lielākā atšķirība no modālā loga ir tāda, ka tas nebloķē pārejo lapas saturu. Liela daļa sīkdatņu paziņojumu, atvērtu izvēlņu un iepirkuma grozu ir paneļi.
Paneļi ir lietotājiem draudzīgāki, tāpēc tos ieteicams izmantot modālo logu vietā.
Modālā loga piekļūstamība
Ja modālais logs ir patiesi nepieciešams, un nolemts tādu izmantot, ir svarīgi pārliecināties, ka tas tiek veidots piekļūstami. Slikti veidoti modālie logi ir milzu barjera jebkuram, kurš nelieto peli. Tie var liegt nopirkt transporta biļetes, iegādāties preces internetā vai izlasīt jaunākās pandēmijas ziņas.
Starp citu, klaviatūru navigācijai mēdz izmantot gan lietotāji ar ierobežotām funkcijām, gan ļoti pieredzējuši lietotāji, kuriem pārvietoties ar datorpeli vienkārši ir par lēnu (dažreiz es esmu viens no viņiem).
Piekļūstamības kritēriji
Lai modālais logs būtu piekļūstams, tam jābūt veidotam tā, lai:
- viss pārējais lapas saturs ārpus loga ir bloķēts, kamēr lietotājs atrodas modālajā logā;
- modālo logu var atvērt un aizvērt un tajā veikt darbības gan ar datorpeli, gan klaviatūru;
- pārvietojoties var redzēt vizuālo fokusu.
Pārbaude
Modālā loga piekļūstamību vislabāk var pārbaudīt, pārvietojoties lapā tikai ar klaviatūru. Tas nozīmē izmantot pārsvarā TAB taustiņu un ar acīm vērot, kur lapā ir fokuss – rāmītis apkārt elementam, uz kura atrodies.
Modālā loga piekļūstamības pārbaudei būs vajadzīgi šādi taustiņi:
- TAB un SHIFT+TAB, lai pārvietotos uz un no fokusējama elementa uz elementu gan iekšā, gan ārpus modālā loga,
- ENTER vai SPACE, lai atvērtu modālo logu,
- ESC vai aizvēršanas poga, lai aizvērtu modālo logu.
Modālais logs būs piekļūstams tad, ja:
- Vari pārvietoties un klikšķināt tikai uz elementiem modālajā logā. Viss pārējais lapas saturs ārpus modālā loga nav pieejams.
- Visam, ko varētu nospiest ar peli, tiec klāt arī ar TAB un SHIFT+TAB.
- Modālo logu vari atvērt un aizvērt ar klaviatūru (ESC taustiņš vai fokusējams krustiņš ar TAB).
- Vari saprast, kur atrodies – apkārt elementam ir fokusa rāmītis.
Testa piemēri
Vislabākais skolotājs ir piemērs. Lai labāk saprastu modālos logus, apskatīsim pāris Latvijā populārus portālus. Vai šīs lapas pareizi izmanto modālos logus?
1. Autentificēties Latvija.lv
Pirmais piemērs – autentifikācija Latvijas valsts portālā. Jautājums tev, lasītāj – vai autentifikācija ir tik kritiska, lai būtu nepieciešams modālais logs?
Atbilde: Jā, autentifikācija ir kritiska darbība un modālais logs šeit iederas.
Notestēsim to, cik labi šis modālais veic savu darbu. Atver Latvija.lv un nospied pogu “Mana darba vieta”. Vajadzētu atvērties autentifikācijas modālajam logam. Lūdzu, pamēģini sekojošo:
- Vai ar klaviatūru var pārslēgties starp cilnēm “Privātpersona”, “Juridiska persona” un “Pilnvarotais”?
- Vai ar krustiņu vai ESC taustiņu var aizvērt šo logu?
- Vai redzi, kur modālajā logā atrodies?
- Vai pārvietojoties ar TAB un SHIFT+TAB saturs, ārpus modālā loga ir bloķēts?
2. Nodarbinātības Valsts aģentūras galvenā izvēlne
Otrais piemērs – izvēlne Nodarbinātības Valsts aģentūras lapā. Jautājums tev, lasītāj – vai Pakalpojumu izvēlne ir modālais logs? Vai izvēlni varēja veidot arī bez modālā loga?
Atbilde: Jā, šis ir modālais logs. Par to liecina tas, ka logs nobloķē pārējo lapas saturu un visai pārējai lapai pa virsu ir daļēji caurspīdīgs fons. Arī informācija modālajā logā ir kritiska, lai tiktu uz vajadzīgo sadaļu. Taču tas, vai modālais logs ir labākais risinājums kā veidot izvēlni, ir diskutabls jautājums. Drīzāk jau, ka nē.
Jautājumi īsam nva.gov.lv izvēlnes piekļūstamības testam:
- Vai ar klaviatūru vari pārvietoties pa izvēlnes elementiem?
- Vai vari ar aizvēršanas pogu vai ESC taustiņu aizvērt šo logu?
- Vai redzi, kur modālajā logā atrodies?
- Vai pārvietojoties ar TAB un SHIFT+TAB saturs, ārpus modālā loga ir bloķēts?
3. Pieteikšanās Latvijas sabiedrisko mediju jaunumiem
Trešais piemērs. Latvijas sabiedriso mediju sākumlapā pēc pāris sekunžu apmeklējuma parādās modālais logs – pieteikšanās pasta saņemšanai. Jautājums tev, lasītāj – vai pieteikties jaunumiem epastā ir tik kritiski, lai būtu nepieciešams modālais logs?
Atbilde: Nē, pieteikšanās jaunumiem e-pastā nav kritiski. Šajā situācijā modālais logs nav piemērots.
Starp citu, lapas apakšā redzams sīkdatņu paziņojums. Sanāk, ka šis piemērs vienā skatā parāda gan modālo logu, gan paneli.
Jautājumi īsam lsm.lv modālā loga piekļūstamības testam:
- Vai ar klaviatūru vari piekļūt e-pasta aizpildes loga un abām pogām?
- Vai vari ar krustiņu vai ESC taustiņu aizvērt šo logu?
- Vai redzi, kur modālajā logā atrodies?
- Vai pārvietojoties ar TAB un SHIFT+TAB saturs, ārpus dialoga ir bloķēts?
4. Google dokumenta auto redaktors
Pēdējais piemērs – dokumentu auto redaktors Jautājums tev, lasītāj – vai “izmantot” ir modālais logs?
Gaidu atbildes komentāros piekļūstamības facebook lapā!
Rezultāti
Iespējams, ka mūsu testu rezultāti atšķirsies. Iemesli var būt dažādi: dažādi pārlūki vai lapas saturs, vai modālā loga funkcionalitāte ir mainījusies.
Mani rezultāti:
| Portāls | Informācija modālajā logā ir kritiska | Visam saturam logā var piekļūt ar klaviatūru | Modālo logu var aizvērt ar pogu vai ESC | Var saprast, kur atrodos (redzams fokuss) | Saturs ārpus modālā loga ir bloķēts |
| Latvija.lv | Jā ✅ | Nē ❌ | Nē ❌ | Nē ❌ | Nē ❌ |
| Nodarbinātības Valsts aģentūra | Jā ✅ | Jā ✅ | Jā ✅ | Jā ✅ | Jā ✅ |
| Latvijas Sabiedriskie mediji | Nē ❌ | Jā ✅ | Jā ✅ | Nē ❌ | Jā ✅ |
Pēc šiem īsā piekļūstamības testa rezultātiem var secināt, ka modālie logi pārbaudītajos Latvijas portālos tiek izmantoti gan vietā, gan nevietā un to kvalitāte krasi atšķiras.
Ko tālāk?
Ja tavā varā ir mainīt savas organizācijas digitālos produktus, dari to ar nolūku un piekļūstami!
Izvērtē, vai modālie logi tavas organizācijas digitālajos rīkos sniedz kritisku informāciju. Ja nesniedz, mēģini no tiem atbrīvoties.
Ja modālie logi sniedz kritisku informāciju, aši notestē tos. Pastāsti saviem IT kolēģiem, ko uzzināji, un aicini uzlabot modālos logus, lai vēl viens interneta stūrītis kļūtu par kripatiņu piekļūstamāks!
Resursi
Izmantotā literatūra:
Modālie logi un paneļi (resurss angļu valodā)
Veidojot piekļūstamus modālos logus (resurss angļu valodā)
Sīkdatņu paziņojumi un piekļūstamība (resurss angļu valodā)
Gids piekļūstama modālā logai izveidei (resurss angļu valodā)
Modālā loga definīcija (resurss angļu valodā)
Lightbox dialogs (resurss angļu valodā)
Piekļūstamu modālo logu piemēri:
https://frend.co/components/dialogmodal/
__
Rota Brūna UX dizainere
