Kāpēc jūsu WordPress veidlapām jābūt pielāgotām mobilajām ierīcēm
Vairāk nekā puse no visas tīmekļa datplūsmas nāk no mobilajām ierīcēm. Ja jūsu veidlapas nedarbojas labi tālruņos un planšetdatoros, jūs katru dienu zaudējat iesniegumus un, iespējams, klientus.
Šajā rokasgrāmatā jūs uzzināsiet, kāpēc mobilajām ierīcēm pielāgotas veidlapas ir svarīgas un kas padara veidlapu patiesi pielāgotu mobilajām ierīcēm.
Mobilā realitāte
Mobilo datu plūsmas statistika
- 59% + globālās tīmekļa datplūsmas ir mobilā
- 92% interneta lietotāju piekļuve, izmantojot mobilo tālruni
- 70% tīmekļa datplūsmas dažās nozarēs ir mobilā
- Mobilo sakaru lietošana turpina pieaugt gadu no gada
Ko tas nozīmē veidlapām
Ja jūsu vietni dienā apmeklē 1,000 apmeklētāju:
- ~600 izmanto mobilās ierīces
- Nereaģējošas veidlapas šos apmeklētājus kaitina.
- Apvainojušies apmeklētāji pamet veidlapas
- Pamestas veidlapas = zaudēti potenciālie klienti, pārdošanas apjomi, atsauksmes
Kas notiek ar nereaģējošām veidlapām
Lietotāja pieredze
Nereaģējošā veidlapā mobilo ierīču lietotāji saskaras ar:
TinyText
- Etiķetes ir pārāk mazas, lai tās izlasītu
- Piemiedz acis, skatoties uz instrukcijām
- Trūkst svarīgas informācijas
Neiespējami ievades lauki
- Tekstlodziņi pārāk mazs, lai precīzi pieskartos
- Nepareizi rakstīts lauki
- Pastāvīga pietuvināšana/attālināšana
Bojāti izkārtojumi
- Lauki nogriežas aiz ekrāna malām
- Nepieciešama horizontāla ritināšana
- Iesniegšanas poga ir paslēpta vai nesasniedzama.
Nomācoša mijiedarbība
- Nolaižamās izvēlnes grūti izvēlēties
- Izvēles rūtiņas pārāk mazs, lai pieskartos
- Datumu atlasītāji nelietojami
Rezultāts
Lietotāji padodas. Viņi:
- Pilnībā atteikties no veidlapas
- Atstājiet savu vietni neapmierināti
- Dodieties pie konkurenta ar labākām formām
- Nekad neatgriezties
Nereaģējošu veidlapu izmaksas
Zaudētās konversijas
Katra pamesta forma ir zaudēta iespēja:
- Kontaktforma → Pazaudēts potenciālais klients
- Cenas piedāvājuma pieprasījums → Zaudēts pārdošanas darījums
- Reģistrācija → Pazaudēts klients
- Atsauksmju veidlapa → Pazaudētās atziņas
Bojāta reputācija
Slikta mobilo ierīču pieredze ietekmē jūsu zīmolu:
- “Šis uzņēmums šķiet novecojis”
- “Viņiem nerūp lietotāja pieredze”
- "Ja viņu veidlapas ir sliktas, kā ir ar viņu produktu?"
SEO ietekme
Google piešķir prioritāti mobilajām ierīcēm draudzīgām vietnēm:
- Mobilajām ierīcēm paredzēta indeksēšana ir standarta
- Slikta mobilo ierīču pieredze kaitē reitingiem
- Zemāks rangs = mazāka datplūsma
Konkurences trūkums
Kamēr jūs sarūgtinat mobilo ierīču lietotājus, konkurenti ar labām formām:
- Iegūstiet potenciālos klientus, kurus zaudējat
- Veidojiet attiecības ar saviem potenciālajiem klientiem
- Augiet, vienlaikus brīnoties, kāpēc konversiju līmenis ir zems
Kas padara veidlapu pielāgojamu mobilajām ierīcēm
1. Šķidruma platums
Veidlapām jāpielāgojas ekrāna izmēram:
- Pilns platums mazos ekrānos
- Piemērots platums lielākiem ekrāniem
- Nekad nav horizontālas ritināšanas
2. Lasāms teksts
Viss teksts salasāms bez tālummaiņas:
- Etiķetes: vismaz 14–16 pikseļi
- Ievades teksts: vismaz 16 pikseļi (novērš iOS tālummaiņu)
- Palīdzības teksts: vismaz 12–14 pikseļi
- Pietiekams kontrasts
3. Pieskārienam draudzīgi mērķi
Pieskaramie elementi, kuru izmērs atbilst pirkstiem:
- Minimālais pieskāriena mērķis: 44 × 44 pikseļi
- Pietiekams attālums starp elementiem
- Izvēles rūtiņas un radioaparāti, kuriem ir viegli pieskarties
4. Sakrauts izkārtojums
Mobilajā ierīcē elementus vertikāli sakrauj:
- Viens lauks katrā rindā
- Etiķetes virs ievades laukiem (nevis blakus)
- Pilna platuma pogas
5. Vietējie ievades veidi
Aktivizējiet atbilstošas mobilās tastatūras:
- E-pasta lauks → E-pasta tastatūra (@, .com)
- Tālruņa lauks → Ciparu tastatūra
- URL lauks → URL tastatūra
- Skaitļu lauks → Skaitļu ievade
6. Mobilajām ierīcēm draudzīgi komponenti
Elementi, kas paredzēti pieskārienam:
- Vietējie datumu atlasītāji (ritināšanas ritenīši)
- Lieli nolaižamie aktivizētāji
- Skārienjutīga failu augšupielāde
7. Redzama iesniegšanas poga
Lietotājiem ir jāspēj atrast un pieskarties pogai “Iesniegt”:
- Pilns platums vai izteikts izmērs
- Augsta kontrasta krāsa
- Skaidri redzams bez ritināšanas (ja iespējams)
Mobilo veidlapu labākā prakse
Saglabājiet veidlapas īsas
Mobilo ierīču lietotājiem ir mazāk pacietības:
- Uzdodiet tikai būtiskus jautājumus
- Noņemt "vēlamie" laukus
- Garākām formām apsveriet vairāku soļu izmantošanu
Izmantot vienas kolonnas izkārtojumu
Vairāku kolonnu izkārtojumi mobilajās ierīcēs nedarbojas:
- Sakrauj visus laukus vertikāli
- Vieglāk skenēt un pabeigt
- Vienmērīga pieredze visās ierīcēs
Optimizēt lauku secību
Loģiski izvietojiet laukus:
- Vissvarīgākais vispirms
- Saistītie lauki grupēti
- Viegli aizsniedzams ar īkšķiem
Nodrošiniet skaidras etiķetes
Etiķetēm jābūt nepārprotamām:
- Virs lauka (nevis peldošs iekšpusē)
- Vienmēr redzams (nepaļaujieties tikai uz aizvietotāju)
- Aprakstošs, bet kodolīgs
Iespējot automātisko pabeigšanu
Ļaujiet pārlūkprogrammām palīdzēt lietotājiem:
- Vārda, e-pasta, tālruņa automātiskā aizpildīšana
- Adreses automātiskā pabeigšana
- Samazina rakstīšanu uz mazām tastatūrām
Rādīt validāciju iekļautā rindā
Palīdziet lietotājiem nekavējoties novērst kļūdas:
- Kļūdu ziņojumi blakus laukiem
- Reāllaika validācija, ja iespējams
- Skaidri norādījumi par labošanu
Padariet pogas acīmredzamas
Iesniegšanas pogām ir jāizceļas:
- Kontrastējoša krāsa
- Liels pieskāriena mērķis
- Skaidrs darbības teksts (“Iesniegt”, “Sūtīt”, “Reģistrēt”)
Mobilo ierīču atsaucības pārbaude
Pārlūka izstrādātāja rīki
Ātra pārbaude datora pārlūkprogrammā:
- Atveriet veidlapas lapu
- Nospiediet taustiņu F12 (izstrādātāja rīki)
- Noklikšķiniet uz ierīces pārslēgšanas ikonas
- Izvēlieties dažādus ierīču izmērus
- Testa veidlapas mijiedarbība
Īsta ierīču pārbaude
Nekas nepārspēj īstas ierīces:
- Tests iPhone un Android ierīcēs
- Tests uz planšetdatoriem
- Izmēģiniet dažādus ekrāna izmērus
- Faktiski aizpildiet veidlapu
Ko pārbaudīt
- ✓ Vai varat izlasīt visas etiķetes bez tālummaiņas?
- ✓ Vai ievades laukiem ir viegli pieskarties?
- ✓ Vai parādās pareizā tastatūra?
- ✓ Vai varat viegli atlasīt nolaižamās izvēlnes opcijas?
- ✓ Vai izvēles rūtiņas/radiopogu pogas var pieskarties?
- ✓ Vai iesniegšanas poga ir redzama un sasniedzama?
- ✓ Vai veidlapa ir veiksmīgi iesniegta?
- ✓ Vai kļūdu ziņojumi ir redzami un skaidri?
Google Mobile-draudzīgs tests
Pārbaudiet lapas vispārējo piemērotību mobilajām ierīcēm:
- Dodieties uz Google rīku “Mobilajām ierīcēm draudzīguma pārbaude”
- Ievadiet veidlapas lapas URL
- Rezultātu un ieteikumu pārskatīšana
Bieži sastopamas mobilo veidlapu problēmas
Problēma: Teksts ir pārāk mazs
Iemesls: Fiksētie pikseļu izmēri netiek mērogoti
Risinājums: Izmantojiet relatīvās mērvienības (em, rem) vai vismaz 16 pikseļus
Problēma: Lauki ir pārāk šauri
Iemesls: Fiksēta platuma konteineri
Risinājums: Izmantojiet procentuālos platumus (mobilajā ierīcē — 100 %)
Problēma: Tastatūras pārsegu forma
Iemesls: Nav ritināšanas regulēšanas, kad parādās tastatūra
Risinājums: Pārliecinieties, vai fokusētais lauks tiek ritināts redzamā vietā
Problēma: tālummaiņa, izmantojot ievades fokusu (iOS)
Iemesls: Fonta lielums ievades laukā ir mazāks par 16 pikseļiem
Risinājums: Iestatiet ievades fonta lielumu vismaz uz 16 pikseļiem
Problēma: Nolaižamās izvēlnes ir grūti lietojamas
Iemesls: Pielāgotas nolaižamās izvēlnes nav optimizētas skārienekrāniem
Risinājums: Izmantojiet vietējos atlases elementus vai skārienjutīgas alternatīvas
Problēma: Iesniegšanas poga atrodas ārpus ekrāna
Iemesls: Garas formas bez redzama progresa
Risinājums: Fiksēta iesniegšanas poga vai skaidri ritināšanas indikatori
Mobilajām ierīcēm paredzētas funkcijas
Noklikšķināt, lai zvanītu tālruņa saites
Apstiprinājumos norādītajiem tālruņa numuriem jābūt pieskaramiem:
- Saites ar tel: protokolu
- Viens pieskāriens, lai piezvanītu
Atrašanās vietas noteikšana
Adrešu laukiem:
- Iespēja izmantot pašreizējo atrašanās vietu
- Automātiski aizpildīt pilsētu/reģionu
Kameras integrācija
Failu augšupielādei:
- Tiešas piekļuves kamerai iespēja
- Piekļuve foto bibliotēkai
- Dokumentu skenēšana
Pieskarieties vienumam Žesti
Vietējās mobilās mijiedarbības:
- Pārvelciet starp veidlapas posmiem
- Velciet, lai atsvaidzinātu
- Savelciet, lai tuvinātu (ja nepieciešams)
Veiktspēja mobilajās ierīcēs
Kāpēc ātrums ir svarīgāks mobilajās ierīcēs
- Mobilo sakaru sakari bieži vien ir lēnāki
- Datu ierobežojumi dažiem lietotājiem
- Mazāk pacietības mobilajās ierīcēs
- Akumulatora patēriņa apsvērumi
Veidlapas veiktspējas padomi
Samaziniet formas svaru
- Viegli lietojami veidlapu spraudņi
- Minimāls CSS/JavaScript
- Optimizēti līdzekļi
Slinka ielāde, ja iespējams
- Ielādēt veidlapas elementus pēc nepieciešamības
- Neielādēt slēptos nosacījuma laukus uzreiz
Optimizējiet attēlus
- Saspiest jebkurus attēlus veidlapās
- Izmantojiet atbilstošus formātus (WebP)
- Adaptīvi attēlu izmēri
Automātiskās veidlapu veidotāja mobilā pieeja
Automātiska veidlapu veidotāja ir veidots mobilajām ierīcēm:
Reaģējošs pēc noklusējuma
- Visas veidlapas automātiski reaģē
- Nav nepieciešama īpaša konfigurācija
- Pielāgojas jebkuram ekrāna izmēram
Pieskārienam optimizēti lauki
- Pareiza izmēra pieskāriena mērķi
- Vietējās mobilās ievades
- Skārienjutīgi datuma/laika atlasītāji
Mobilajām ierīcēm paredzēts stils
- Stack izkārtojums mazos ekrānos
- Pilna platuma lauki mobilajās ierīcēs
- Lasāmi fontu izmēri
Viegls sniegums
- Minimāla JavaScript ietekme
- Ātra veidlapu ielāde
- Optimizēts mobilajiem tīkliem
Kontrolsaraksts: Vai jūsu veidlapa ir piemērota mobilajām ierīcēm?
Izkārtojums
- ☐ Viena kolonna mobilajā ierīcē
- ☐ Nav horizontālas ritināšanas
- ☐ Pilna platuma lauki
- ☐ Pietiekama atstarpe starp elementiem
Tipogrāfija
- ☐ Etiķetes ir salasāmas bez tālummaiņas (14 px+)
- ☐ Ievadiet tekstu, kura izmērs ir vismaz 16 pikseļi
- ☐ Labi kontrasta koeficienti
Mijiedarbība
- ☐ Pieskāriena mērķi vismaz 44 pikseļi
- ☐ Pareizi tastatūras veidi
- ☐ Vienkārša nolaižamā izvēlne
- ☐ Pieskaroties pieejamas izvēles rūtiņas/radio
funkcionalitāte
- ☐ Veidlapa veiksmīgi iesniegta
- ☐ Redzami kļūdu ziņojumi
- ☐ Tiek parādīts veiksmīgas pabeigšanas ziņojums
- ☐ Failu augšupielāde darbojas
Veiktspēja
- ☐ Ātri ielādējas 3G tīklā
- ☐ Nav bloķējošu skriptu
- ☐ Minimāls datu patēriņš
Biežāk uzdotie jautājumi
Kāpēc manas veidlapas iOS ierīcē pietuvinās, kad pieskaros laukam?
iOS automātiski maina tālummaiņu, ja ievades fonta lielums ir mazāks par 16 pikseļiem. Lai to novērstu, iestatiet ievades fonta lielumu vismaz uz 16 pikseļiem.
Vai man vajadzētu izveidot atsevišķas mobilās un galddatoru veidlapas?
Nē — atsaucīgs dizains nodrošina abus. Viena labi izstrādāta atsaucīga veidlapa darbojas visās ierīcēs. Atsevišķu veidlapu uzturēšana dubulto jūsu darbu un rada neatbilstību risku.
Kā es varu veikt testēšanu ierīcēs, kas man nepieder?
Pamata testēšanai izmantojiet pārlūkprogrammas izstrādātāju rīkus. Rūpīgai testēšanai izmantojiet tiešsaistes pakalpojumus, piemēram, BrowserStack, vai pajautājiet draugiem/kolēģiem ar dažādām ierīcēm.
Vai mobilo ierīču lietotāji tiešām aizpilda veidlapas?
Jā! Mobilā tirdzniecība un potenciālo klientu piesaiste ir milzīga. Lietotāji sagaida, ka uzdevumus varēs paveikt mobilajā tālrunī. Ja jūsu veidlapas darbosies labi, viņi tās izmantos.
Kāds ir vissvarīgākais mobilo veidlapu uzlabojums?
Pareizi skārienelementu izmēri. Ja lietotāji nevar precīzi pieskarties laukiem un pogām, nekas pārējais nav svarīgs. Pārliecinieties, vai visu interaktīvo elementu izmērs ir vismaz 44 × 44 pikseļi.
Kopsavilkums
Veidlapu pielāgošana mobilajām ierīcēm:
- Izprotiet likmes – 60%+ datplūsmas ir mobilās ierīces
- Izmantojiet atsaucīgu dizainu – Maināms platums, sakrauts izkārtojums
- Izmērs pieskārienam – Minimālais pieskāriena mērķis ir 44 pikseļi
- Nodrošiniet lasāmību – ievades teksta minimālais izmērs ir 16 pikseļi
- Labās puses tastatūru aktivizēšana – Izmantojiet atbilstošus ievades veidus
- Pārbaude reālās ierīcēs – Neizmantojiet tikai simulatorus
- Izvēlieties atsaucīgus rīkus – Sāciet ar mobilajām ierīcēm paredzētiem veidlapu veidotājiem
Secinājumi
Mobilajām ierīcēm pielāgotas veidlapas nav izvēles — tās ir būtiskas. Tā kā lielākā daļa tīmekļa datplūsmas nāk no mobilajām ierīcēm, veidlapas, kas nedarbojas tālruņos, katru dienu zaudē potenciālos klientus, klientus un reputāciju.
Automātiska veidlapu veidotāja automātiski izveido mobilajām ierīcēm pielāgotas veidlapas. Katra veidlapa pielāgojas ekrāna izmēram, izmanto skārienjutīgus elementus un labi darbojas mobilajos tīklos. Konfigurācija nav nepieciešama — vienkārši izveidojiet savu veidlapu, un tā darbosies visur.
Vai esat gatavs mobilajām ierīcēm draudzīgām veidlapām? Lejupielādēt automātisko veidlapu veidotāju un sniedziet saviem mobilo ierīču apmeklētājiem tādu veidlapu pieredzi, kādu viņi ir pelnījuši.
