Mobiilisõbraliku veebilehe kontrollimiseks tee telefonis läbi kliendi päris ülesanne: leia sobiv teenus, ava vajalik lisainfo ja saada testpäring. Vaata lisaks kujundusele menüü toimimist, teksti loetavust, nuppude tabatavust, vormi täitmist ja saatmise kinnitust. Leht võib ekraani laiusega kohanduda, kuid mõni oluline tegevus võib siiski pooleli jääda.
Ettevõtte jaoks on kasulik tulemus konkreetne paranduste loend: millisel lehel, millise telefoniga ja millise sammu juures takistus tekib. Järgmine juhend aitab teha esmase mobiilikontrolli enne kampaaniat, veebiuuenduse vastuvõtmisel või siis, kui kliendid kurdavad telefoni kasutamisel ebamugavust.
Mida tähendab mobiilisõbralik veebileht?
Kohanduv ehk responsiivne kujundus paigutab sisu ekraani laiuse järgi ümber. Mobiilisõbralikkus hõlmab ka seda, kas inimene saab väiksel puuteekraanil oma tegevuse lõpule viia. Olulised on nii info järjestus kui ka suhtlus lehega: menüü avamine, valikute tegemine, teksti sisestamine ja tulemuse mõistmine.
Näiteks võib kontaktileht olla visuaalselt korras, aga klaviatuuri avanedes jääb aktiivne sisestusväli varju. Teises olukorras katab ekraani allserva kinnitatud kontaktiriba saatmisnupu. Need on hüpoteetilised näited sellest, miks ainult lehe ekraanipildist ei piisa.
Vali kontrolliks kolm kliendile olulist teekonda
Ära piirdu avalehe vaatamisega. Vali ülesanded selle järgi, mida veeb peab ettevõtte jaoks tegema. Teenuseettevõtte esmane kontroll võib sisaldada järgmisi teekondi:
- Teenuse leidmine. Ava avaleht, leia üks konkreetne teenus ja kontrolli, kellele see mõeldud on.
- Sobivuse hindamine. Ava teenuselehelt töönäide või hinnastamise selgitus ning liigu tagasi.
- Ühenduse võtmine. Leia kontakt, täida vorm ja kontrolli testpäringu saabumist.
Alusta üht katset ka otse teenuselehelt, sest otsingust või reklaamist tulija ei pruugi avalehte näha. Kui ettevõttel on mitu keelt, korda põhilist tegevust vähemalt nendes keeleversioonides, millele kliente suunad. Pikk tõlge võib paigutust muuta isegi siis, kui eestikeelne vaade sobib hästi.
Kas menüü ja nupud töötavad puudutusega?
Ava menüü, vali alammenüüst teenus ja sulge menüü uuesti. Kontrolli, kas see mahub ekraanile, pikemat loendit saab kerida ning suletud menüü järel on leht jälle kasutatav. Veendu ka, et vajalik valik ei eeldaks hiirekursori hoidmist elemendi kohal.
Proovi linke ja nuppe tavalise sõrmepuudutusega. Kui pead sihtimiseks lehte suurendama või vajutad korduvalt naaberlingile, märgi see probleemina üles. Nupu nähtav taust ja selle tegelik vajutusala ei pruugi alati kattuda.
W3C WCAG 2.2 puuteala miinimumi selgitus käsitleb üldjuhul vähemalt 24 × 24 CSS-piksli suurust sihtala, kuid sisaldab erandeid, sealhulgas piisava vahega väiksemad sihtalad ja tekstisisesed lingid. See on miinimumkriteerium, mitte soovitus teha kõik nupud võimalikult väikeseks. Olulise tegevusnupu puhul tasub hinnata ka tegelikku tabamise mugavust.
Kas sisu on loetav ja tähtis info alles?
Loe teenuseleht läbi ilma igat lõiku eraldi suurendamata. Vaata, kas pealkiri, põhitekst ja lingid eristuvad ning pikad sõnad ei jookse ekraanilt välja. Suurenda seejärel teksti või vaadet ja kontrolli, kas saad sisu endiselt kasutada. Teksti suurendamise vajadus ei peaks lõhkuma menüüd või kontaktivormi.
Võrdle telefoni- ja arvutivaate olulist infot. Mobiilis võib muuta elementide järjekorda, kuid kliendi otsuseks vajalikud teenuse tingimused, kontaktid ja selgitused peaksid jääma leitavaks. Suure pildi peal olev pisike tekst võib vajada eraldi tekstiplokki.
Vaata ka tabeleid, galeriisid ja dokumentide linke. Kui tabel liigub külgsuunas, peaks kasutaja sellest aru saama ning ülejäänud leht püsima paigal. Kui vajalik hinnainfo on ainult PDF-is, ava see telefonis ja hinda, kui lihtsalt inimene vastuse kätte saab.
Testi kontaktivormi avatud klaviatuuriga
Täida väljad päriselt, mitte ära vaata ainult tühja vormi. Kas sisestatavat teksti on näha? Kas järgmisele väljale liikumine on mugav? Kas telefoni- ja e-posti välja täitmisel kuvatav klaviatuur toetab vajalikku sisendit? Kui vorm lubab faili lisada, kontrolli ka faili valimist telefonist.
Iga välja eesmärk peab olema selge ka pärast kirjutamise alustamist. Välja sees olev vihjetekst võib sisestamisel kaduda. W3C vormiväljade märgistamise juhend selgitab, kuidas välja kirjeldav silt aitab mõista selle otstarvet ning peab olema väljaga tehniliselt seostatud.
Proovi kontrollitud testis ka puuduvat kohustuslikku välja ja vigast e-posti aadressi. Veateade peaks aitama vea leida ja parandada. Jälgi, kas varem kirjutatud sõnum säilib ning kas saatmisnupp on pärast parandust jälle kasutatav.
Lepi testpäring oma meeskonnaga kokku ja märgista see selgelt testina. Pärast saatmist kontrolli nii kasutajale kuvatavat kinnitust kui ka päringu jõudmist kokkulepitud postkasti või süsteemi. Nupuvajutus ja ilus tänuteade üksi ei tõenda kogu edastusahela toimimist.
Kontrolli esimest külastust ja aeglasemat laadimist
Ava leht ka uue külastaja olukorras, näiteks privaatses brauseriaknas. Nii näed, kas küpsiste valik, teavitus või muu esmakülastuse element varjab sisu. Tee põhiülesanne läbi ka siis, kui külastaja jätab valikulised küpsised lubamata, ja märgi üles võimalikud funktsioonitõrked.
Proovi lehte lisaks kontori WiFi-le telefoni mobiilse andmesidega. Jälgi, kas tekst ja põhivalikud muutuvad kasutatavaks enne suurte piltide või videote lõplikku laadimist. Märka ka elementide hüppamist: kui nupp liigub puudutamise hetkel, võib kasutaja valida midagi muud, kui kavatses.
Üks aeglane avamine ei ütle veel, kus põhjus asub. Korda katset ning salvesta leht, seade ja ühenduse olukord. Nii saab arendaja eristada püsivat probleemi ajutisest võrguhäirest.
Kuidas tähelepanekud arendajale üle anda?
Kirjelda tegevust ja nähtavat tulemust. „Mobiilivaade on katki“ jätab põhjuse otsimise täielikult tegija õlule. Lisa täpne URL, telefoni mudel, brauser, kordamise sammud ja võimalusel lühike ekraanisalvestus. Järgmine tabel näitab väljamõeldud näiteid, mitte Kala Ruuduse klientide juhtumeid.
| Tähelepanek | Kordamise samm | Oodatav tulemus |
|---|---|---|
| Menüü alumine teenus jääb varju. | Ava menüü püstises telefonivaates ja liigu loendi lõppu. | Kõik valikud on leitavad ja puudutatavad. |
| Klaviatuur katab kirjutatava teksti. | Ava kontaktivormi sõnumiväli ja kirjuta mitu rida. | Aktiivne sisestuskoht püsib nähtav ning vormi saab kerida. |
| Pärast saatmist puudub selge tulemus. | Saada kokkulepitud andmetega testpäring. | Külastaja näeb kinnitust ja meeskond saab päringu kätte. |
Erista tegevuse lõpetamist takistavad vead väiksematest kujundusmuredest. Lepi iga paranduse juurde kokku, millise korduskatsega selle valmimist kontrollitakse. Kui probleemide põhjused või järjekord on ebaselged, aitab ulatust täpsustada UX-auditi tellimise juhend.
Kas arvuti mobiilisimulaatorist piisab?
Brauseri mobiilivaade aitab kiiresti uurida eri ekraanilaiusi. Chrome DevToolsi ametlik juhend rõhutab siiski, et tegemist on ligikaudse simulatsiooniga, mitte koodi käitamisega päris telefonis. Seetõttu proovi olulisi tegevusi võimalusel nii iPhone’i kui ka Androidi seadmes.
See esmane kontroll ei ole täielik ligipääsetavuse audit ega kõigi seadmete toimimise tõend. Selle väärtus on leida korratavad takistused ja anda järgmisele tööle selge ülesanne. Kui parandused puudutavad paljusid vaateid, saab hinnata, kas piisab kohendamisest või on vaja põhjalikumat kodulehe uuendamist.
Muudame kliendi mobiilse teekonna lihtsamaks
Kala Ruuduse veebidisaini ja veebiarenduse töö aitab siduda ettevõtte sisu, visuaali ja kasutaja tegevused. Alustamiseks pole vaja valmis tehnilist lahendust: kasulik lähtekoht on konkreetne ülesanne, mis telefonis praegu takerdub.
Saada oma veebilehe aadress ja kirjelda, mida klient peaks mobiilis teha saama. Lisa probleemse vaate näide ning kasutatud telefon. Nii saame arutada sobivat kontrolli ulatust ja vajalikke disaini- või arendustöid.