Mobilās saskarnes zelta īkšķa zonas ergonomika un kāpēc B2B formas zaudē 45% pieteikumu

Aigars Armanovs

Galvenais Arhitekts & Dibinātājs

"Mobilais telefons nav mazs galda dators. Ja jūsu mājaslapas galvenā pieteikuma poga atrodas ekrāna augšējā labajā stūrī vai forma prasa astoņus ievades laukus, jūs paši brīvprātīgi zaudējat pusi no pieteikumiem jau pirmajās piecās sekundēs."

Stīvena Hūbera un Lūka Vroblevska mobilie pētījumi par īkšķa zonu

Lielākā daļa B2B uzņēmumu mājaslapu joprojām tiek projektētas, sēžot pie liela 27 collu biroja monitora ar peli rokā. Dizaineri izkārto elementus, pievieno sarežģītas nolaižamās izvēlnes un izveido pieteikumu formas ar 8 laukiem, aizmirstot vienu fundamentālu patiesību: vairāk nekā 70% apmeklētāju šo vietni skatīsies mobilajā telefonā, stāvot rindā, braucot sabiedriskajā transportā vai turot kafijas krūzi otrā rokā.

Mūsdienīga mājaslapu izstrāde balstās uz empīriskiem datiem: ievērojamais mobilo ierīču pētnieks Stīvens Hūbers (Steven Hoober), novērojot tūkstošiem reālu lietotāju uzvedību sabiedriskās vietās, atklāja, ka 75% cilvēku ikdienā lieto telefonu tikai ar vienu roku, paļaujoties tikai uz viena īkšķa kustību. Vēlāk Lūks Vroblevskis (Luke Wroblewski) formulēja Īkšķa zonas (The Thumb Zone) koncepciju, sadalot mobilā ekrāna virsmu trīs skaidrās ergonomiskās zonās:

1. Dabiskā zaļā zona (Natural Zone): Ekrāna apakšējā un vidējā trešdaļa, kur īkšķis var viegli aizsniegties bez plaukstas pārvietošanas vai pirkstu stiepšanas. Tieši šeit ir jāatrodas primārajai CTA pogai, galvenajiem slēdžiem un formas laukiem.
2. Pārejas dzeltenā zona (Reach Zone): Ekrāna vidusdaļa, kas prasa nelielu īkšķa piepūli vai leņķa maiņu.
3. Sāpju sarkanā zona (Ow Zone): Ekrāna augšējā trešdaļa un īpaši augšējie stūri. Lai tur nokļūtu, lietotājam ir vai nu jāmaina rokas satvēriens (ar risku nomest telefonu), vai jāpalīdz ar otru roku.

Ja jūsu mājaslapā galvenā izvēlne un pieteikuma pogas atrodas pašā augšā 'sarkanajā zonā', jūs radāt neapzinātu fizisku pretestību ik uz soļa. Par pēcklikšķa psiholoģiju un trauksmes noņemšanu lasiet mūsu analīzē par pēcklikšķa trauksmes noņemšanu un mikromierinājuma tekstiem.

Kāpēc tradicionālās B2B pieteikumu formas mobilajā skatā piedzīvo fiasko

Pētot lietotāju klikšķu ceļus un karstuma kartes ar lietotāju uzvedības analītiku, atklājas satraucoša aina par to, cik daudz apmeklētāju atduras pret nepārdomātām formām.

Vidējā B2B mājaslapā kontaktu forma izskatās kā valsts iestādes anketa: 'Vārds', 'Uzvārds', 'Uzņēmuma nosaukums', 'Reģistrācijas numurs', 'Amats', 'E-pasts', 'Tālrunis', 'Komentārs' un visbeidzot - sīka pārslēgšanās rūtiņa par privātuma politiku. Datorā ar pilna izmēra tastatūru tas aizņem 45 sekundes. Mobilajā ierīcē šāda forma nozīmē:

• Ekrāna tastatūra aizsedz 60% no redzamā laukuma, lietotājs vairs neredz iepriekšējos laukus.
• Pārlūks automātiski pietuvina ekrānu (iOS Safari zoom), ja lauka fonta izmērs ir mazāks par 16px, sabojājot visu lapas izkārtojumu.
• Tālruņa numura lauks atver parasto teksta tastatūru ar burtiem, liekot lietotājam manuāli pārslēgties uz cipariem.
• Pēc nejauša nepareiza pieskāriena klients saņem kļūdas paziņojumu un vienkārši aizver cilni.

Statistika ir nepielūdzama: šāda veida desktop-centriskas formas mobilajās ierīcēs zaudē no 40% līdz pat 55% no visiem potenciālajiem klientiem, kuri jau bija gatavi veikt pasūtījumu.

Tehniskais salīdzinājums - Desktop forma pret Mobili ergonomisku saskarni

Fiksētā apakšējā CTA josla (Sticky Bottom Bar) - Tūlītēja pieejamība

Viens no jaudīgākajiem mobilā UX risinājumiem ir fiksētā apakšējā rīcības josla (Sticky Bottom Bar). Ritinot lapu uz leju, ekrāna apakšā (tieši īkšķa dabiskajā atpūtas zonā) vienmēr paliek pieejama neliela, diskrēta josla ar galveno darbību: 'Pieteikt 15 min sarunu' vai 'Aprēķināt tāmi'.

Augstāko mobilās saskarnes efektivitāti nodrošina pārdodošu mērķlapu izstrāde ar fiksēto apakšējo CTA joslu, kas garantē tūlītēju saziņas pieejamību.

Pieskārienu mērķu izmērs un Fitsa likums (Fitts's Law)

Lietotāja saskarnes matemātikā pastāv Fitsa likums (Fitts's Law): laiks, kas nepieciešams, lai trāpītu mērķī, ir apgriezti proporcionāls mērķa izmēram un attālumam līdz tam. Ja poga ir maza (piemēram, 32px augsta saite teksta rindā), cilvēka smadzenēm ir jāpalēnina rokas kustība, jāsasprindzina redze un uzmanīgi jātēmē ar pirksta spilventiņu.

Apple iOS un Google Material vadlīnijas nosaka stingru minimālo izmēru:

• Minimālais pieskāriena laukums: 48x48 CSS pikseļi (cilvēka pirksta spilventiņa vidējais laukums fiziskā saskarē ir 9 līdz 11 milimetri).
• Atstarpes starp interaktīvajiem elementiem: Vismaz 8 līdz 12 pikseļi, lai izslēgtu blakus esošu pogu nejaušu nospiešanu.
• Fonta izmērs ievades laukos: Vismaz 16px (1rem), kas novērš pārlūka automātisko pietuvināšanu un saglabā pārskatāmu kontekstu.

Kognitīvā tuneļa efekts un uzmanības fokuss mobilajā ekrānā

Mobilā tālruņa ekrāns fiziski rada tā saukto Kognitīvo tuneli (Cognitive Tunneling). Datorā apmeklētājs ar perifēro redzi uztver gan saturu, gan sānu joslu, gan navigācijas galveni. Mobilajā telefonā lietotājs redz tikai šauru, vertikālu satura nogriezni. Jebkurš traucēklis vai lieks elements acumirklī izsit lasītāju no ritma.

Tāpēc mobilajās pārdošanas lapās ir jāievēro Viena fokusa princips (Single Action Focus): katrā ritināšanas ekrānā drīkst būt tikai viena primārā rīcība. Vairāku konkurējošu pogu ('Uzzināt vairāk', 'Lejupielādēt brošūru', 'Pieteikt zvanu') izvietošana vienā ekrānā izraisa 'Izvēles paralīzi' (Hika likums) un noved pie tā, ka lietotājs nenospiež nevienu pogu un aizver lapu.

Mikro-formu sadalīšana divos soļos (Multi-Step Progressive Disclosure)

Ja jūsu pakalpojumam tomēr nepieciešams ievākt vairāk par 2 parametriem, labākā inženiertehniskā prakse ir Progresīvā atklāšana (Progressive Disclosure). Forma tiek sadalīta divos īsos, nepārslogojošos soļos:

1. Pirmais solis (Zems stress): Viens jautājums par projekta tipu vai vēlamo risinājumu ar lielām, viegli piespiežamām radio kartītēm īkšķa zonā.
2. Otrais solis (Finišs): Tikai divi ievades lauki (vārds un tālrunis), kur saņemt aprēķinu. Tā kā lietotājs jau ir ieguldījis pirmo soli (Sunk Cost efekts), pabeigšanas konversija pieaug par 35% līdz 48%.

Auto-fill un pārlūka iebūvēto iespēju izmantošana

Mobilajā ierīcē katrs taustiņa spiediens prasa piepūli un rada iespēju kļūdīties. Mūsdienu mobilie pārlūki (Apple Safari, Google Chrome) satur spēcīgus automātiskās aizpildes (Autofill) algoritmus, kas var aizpildīt personas vārdu, e-pastu un tālruņa numuru vienā sekundē, ja vien vietnes kodā ir pareizi norādīti HTML atribūti:

• autocomplete="name" vārda laukam.
• autocomplete="email" e-pasta laukam.
• autocomplete="tel" un type="tel" tālruņa numuram.

Pareizi konfigurēti atribūti ļauj klientam aizpildīt pieteikumu ar vienu sejas atpazīšanas (FaceID) vai pirksta nospieduma pieskārienu. Tas noņem 90% no fiziskās rakstīšanas berzes un nodrošina, ka pat steidzīgs klients pabeidz pieteikumu bez apstāšanās.

Augšējās ekrāna zonas nozīme - Tikai pasīvajai informācijai

Ja ekrāna apakšējā trešdaļa ir rezervēta aktīvajai rīcībai (CTA pogām un ievades laukiem), kam paredzēta ekrāna augšējā daļa? Ergonomikas zelta likums nosaka: augšējā 'sarkanā zona' ir domāta tikai pasīvajai uztverei un mieram.

Šeit atrodas uzņēmuma logotips, drošības sertifikāta norāde, tālruņa ikona ātrai zvanīšanai un īss, spēcīgs vērtības solījums. Klientam nav jāspiež pogas ekrāna augšā - viņa acis nolasa informāciju, bet īkšķis dabiski paliek ekrāna lejasdaļā, gatavs apstiprināt rīcību.

Kļūdu paziņojumu mikro-kopija un stresa noņemšana

Nekas tā neatbaida mobilo lietotāju kā agresīvs, sarkans kļūdas paziņojums bez skaidra risinājuma: 'Ievades kļūda! Pārbaudiet datus!'. Šāda mikro-kopija rada vainas sajūtu un kognitīvo stresu, mudinot lietotāju vienkārši pamest lapu.

Mūsdienu lietotājam draudzīgas formas izmanto mierinošu kļūdu profilaksi: ja e-pasta laukā aizmirsts @ simbols, paziņojums maigā tonī paskaidro: 'Šķiet, ka e-pasta adresē trūkst @ zīmes (piemēram: [email protected])'. Šāda empātiska pieeja padara saskarni par uzticamu partneri, nevis stingru eksaminētāju.

Pirkstu noguruma (Thumb Fatigue) profilakse un ritināšanas inerce: Garās mobilajās lapās lietotājs veic desmitiem ritināšanas kustību ar vienu un to pašu pirkstu. Ja katrā ekrānā interaktīvie elementi maina savu atrašanās vietu (vienā blokā poga ir pa labi, citā pa kreisi, trešajā centrā), pirksta muskuļi un acis ātri nogurst. Konsekventa pogu novietošana ekrāna apakšējā centrālajā zonā rada paredzamu ritmu, saglabājot lasītāja enerģiju un gatavību veikt pasūtījumu.

Kopsavilkumā: mobilā ergonomika nav tikai estētiska izvēle, bet gan matemātiski pierādāms pārdošanas instruments. Pielāgojot pogu novietojumu zelta īkšķa zonai un atbrīvojoties no liekiem formas laukiem, uzņēmums iegūst tūlītēju konversiju lēcienu bez papildu mārketinga izdevumiem.

Biežāk uzdotie jautājumi par mobilo UX un zelta īkšķa zonu