Kodėl jūsų „WordPress“ formos turi būti pritaikytos mobiliesiems įrenginiams

Daugiau nei pusė viso interneto srauto gaunama iš mobiliųjų įrenginių. Jei jūsų formos neveikia gerai telefonuose ir planšetiniuose kompiuteriuose, kiekvieną dieną prarandate pateiktas formas – ir potencialiai klientus.

Šiame vadove sužinosite, kodėl svarbios mobiliesiems pritaikytos formos ir kas daro formą tikrai patogią mobiliesiems įrenginiams.

Mobilioji realybė

Mobiliojo srauto statistika

• 59% + pasaulinio interneto srauto yra mobilieji
• 92% interneto vartotojų prisijungia per mobilųjį telefoną
• 70% kai kurių pramonės šakų interneto srauto yra mobilusis
• Mobiliųjų telefonų naudojimas kasmet auga

Ką tai reiškia formoms

Jei jūsų svetainę per dieną aplanko 1,000 lankytojų:

• ~600 naudojasi mobiliaisiais įrenginiais
• Nereaguojančios formos šiuos lankytojus erzina
• Nusivylę lankytojai palieka formas
• Apleistos formos = prarasti potencialūs klientai, pardavimai, atsiliepimai

Kas nutinka su nereaguojančiomis formomis

Vartotojo patirtis

Nereaguojančioje formoje mobiliųjų įrenginių naudotojai susiduria su:

TinyText

• Etiketės per mažos, kad būtų galima įskaityti
• Žvilgčiodamas į instrukcijas
• Trūksta svarbios informacijos

Neįmanomi įvesties laukai

• Teksto laukeliai per mažas, kad būtų galima tiksliai bakstelėti
• Neteisingai rašoma laukai
• Nuolatinis priartinimas / tolinimas

Sugedę maketai

• Laukai nukerpa ekrano kraštus
• Reikalingas horizontalus slinkimas
• Pateikimo mygtukas paslėptas arba nepasiekiamas

Varginanti sąveika

• Išskleidžiamieji meniu sunku išsirinkti
• Žymės langelius per mažas, kad būtų galima paliesti
• Datos rinkikliai nenaudotinas

Rezultatas

Vartotojai pasiduoda. Jie:

• Visiškai atsisakyti formos
• Palikite savo svetainę nusivylusią
• Eikite pas konkurentą, kuris turi geresnes formas
• Niekada negrįžti

Nereaguojančių formų kaina

Prarastos konversijos

Kiekviena apleista forma yra prarasta galimybė:

• Kontaktinė forma → Prarastas potencialus klientas
• Užklausa dėl kainos → Prarastas pardavimas
• Registracija → Prarastas klientas
• Atsiliepimų forma → Prarastos įžvalgos

Sugadinta reputacija

Prasta mobiliųjų įrenginių patirtis atsiliepia jūsų prekės ženklui:

• „Ši įmonė atrodo pasenusi“
• „Jiems nerūpi vartotojo patirtis“
• „Jei jų formos blogos, kaip dėl jų produkto?“

SEO poveikis

„Google“ teikia pirmenybę mobiliesiems pritaikytoms svetainėms:

• Indeksavimas pirmiausia mobiliesiems yra standartinis
• Prasta mobiliųjų įrenginių patirtis kenkia reitingams
• Žemesnis reitingas = mažesnis srautas

Konkurencinis trūkumas

Nors jūs varginate mobiliųjų įrenginių naudotojus, konkurentai, turintys geras formas:

• Užfiksuokite prarandamus potencialius klientus
• Užmegzkite ryšius su savo potencialiais klientais
• Augkite, kol stebitės, kodėl konversijos yra mažos

Kas daro formą pritaikomą mobiliesiems įrenginiams

1. Skysčio plotis

Formos turėtų prisitaikyti prie ekrano dydžio:

• Visas plotis mažuose ekranuose
• Tinkamas plotis didesniuose ekranuose
• Niekada nėra horizontalaus slinkimo

2. Įskaitomas tekstas

Visas tekstas įskaitomas be priartinimo:

• Etiketės: mažiausiai 14–16 pikselių
• Įvesties tekstas: mažiausiai 16 pikselių (neleidžia priartinti „iOS“)
• Pagalbos tekstas: mažiausiai 12–14 pikselių
• Pakankamas kontrastas

3. Prisilietimui draugiški taikiniai

Paliestiniai elementai, kurių dydis pritaikytas pirštams:

• Minimalus bakstelėjimo dydis: 44 × 44 pikseliai
• Tinkamas atstumas tarp elementų
• Lengvai bakstelėti žymimuosius langelius ir radijo imtuvus

4. Sudėtinis išdėstymas

Mobiliajame įrenginyje elementus sudėkite vertikaliai:

• Vienas laukas eilutėje
• Etiketės virš įvesčių (ne šalia)
• Viso pločio mygtukai

5. Gimtosios įvesties tipai

Suaktyvinkite tinkamas mobiliąsias klaviatūras:

• El. pašto laukas → El. pašto klaviatūra (@, .com)
• Telefono laukas → Skaitinė klaviatūra
• URL laukas → URL klaviatūra
• Skaičių laukas → Skaitinė įvestis

6. Mobiliesiems įrenginiams pritaikyti komponentai

Elementai, skirti lietimui:

• Vietiniai datos rinkikliai (slinkties ratukai)
• Dideli išskleidžiamieji aktyvikliai
• Palietimui pritaikytas failų įkėlimas

7. Matomas pateikimo mygtukas

Vartotojai turi galėti rasti ir paliesti „Pateikti“:

• Visas plotis arba ryškus dydis
• Didelio kontrasto spalva
• Aiškiai matomas neslenkant (jei įmanoma)

Geriausia mobiliųjų formų naudojimo praktika

Laikykite formas trumpas

Mobiliųjų įrenginių naudotojai turi mažiau kantrybės:

• Užduokite tik esminius klausimus
• Pašalinkite norimus turėti laukus
• Ilgesnėms formoms apsvarstykite kelių žingsnių metodą

Naudoti vieno stulpelio išdėstymą

Kelių stulpelių išdėstymai neveikia mobiliuosiuose įrenginiuose:

• Sudėkite visus laukus vertikaliai
• Lengviau nuskaityti ir užbaigti
• Nuosekli patirtis visuose įrenginiuose

Optimizuoti laukų tvarką

Logiškai išdėstykite laukus:

• Svarbiausia pirmiausia
• Susiję laukai sugrupuoti
• Lengva pasiekti nykščiais

Pateikite aiškias etiketes

Etiketės turėtų būti nedviprasmiškos:

• Virš lauko (ne plūduriuoja viduje)
• Visada matomas (nesiremkite vien tik vietos žymekliu)
• Aprašomasis, bet glaustas

Įjungti automatinį užbaigimą

Leiskite naršyklėms padėti vartotojams:

• Vardas, el. paštas, telefono numeris automatiškai užpildomi
• Adreso automatinis užbaigimas
• Sumažina rašymą ant mažų klaviatūrų

Rodyti patvirtinimą eilutėje

Padėkite vartotojams nedelsiant ištaisyti klaidas:

• Klaidos pranešimai šalia laukų
• Realiojo laiko patvirtinimas, kai įmanoma
• Aiškios instrukcijos, kaip taisyti

Padarykite mygtukus akivaizdžius

Pateikimo mygtukai turėtų išsiskirti:

• Kontrastinga spalva
• Didelis lietimo taikinys
• Aiškus veiksmo tekstas („Pateikti“, „Siųsti“, „Registruotis“)

Mobiliųjų įrenginių reagavimo testavimas

Naršyklės kūrėjo įrankiai

Greitas testavimas darbalaukio naršyklėje:

1. Atidarykite savo formos puslapį
2. Paspauskite F12 (kūrėjo įrankiai)
3. Spustelėkite įrenginio perjungimo piktogramą
4. Pasirinkite skirtingus įrenginių dydžius
5. Testo formos sąveika

Tikro įrenginio testavimas

Niekas neprilygsta tikriems įrenginiams:

• Testavimas „iPhone“ ir „Android“ įrenginiuose
• Testas su planšetiniais kompiuteriais
• Išbandykite skirtingus ekrano dydžius
• Iš tikrųjų užpildykite formą

Ką išbandyti

• ✓ Ar galite perskaityti visas etiketes nekeičiant mastelio?
• ✓ Ar įvesties laukus lengva paliesti?
• ✓ Ar rodoma tinkama klaviatūra?
• ✓ Ar galite lengvai pasirinkti išskleidžiamojo meniu parinktis?
• ✓ Ar galima paliesti žymimuosius langelius / radijo imtuvus?
• ✓ Ar pateikimo mygtukas matomas ir pasiekiamas?
• ✓ Ar forma sėkmingai pateikta?
• ✓ Ar klaidų pranešimai matomi ir aiškūs?

"Google" mobiliesiems pritaikytas testas

Patikrinkite bendrą puslapio pritaikymą mobiliesiems įrenginiams:

1. Eikite į „Google“ mobiliesiems pritaikyto testo įrankį
2. Įveskite savo formos puslapio URL
3. Peržiūrėti rezultatus ir pasiūlymus

Dažnos mobiliųjų formų problemos

Problema: per mažas tekstas

Priežastis: Fiksuoti pikselių dydžiai nekeičiami

Sprendimas: Naudokite santykinius vienetus (em, rem) arba mažiausiai 16 pikselių

Problema: laukai per siauri

Priežastis: Fiksuoto pločio konteineriai

Sprendimas: Naudokite procentinius pločius (mobiliuosiuose įrenginiuose – 100 %)

Problema: Klaviatūros dangtelių forma

Priežastis: Kai rodoma klaviatūra, slinkties reguliavimas negalimas

Sprendimas: Užtikrinkite, kad sufokusuotas laukas slenka į vaizdą

Problema: Priartinimas esant įvesties fokusavimui (iOS)

Priežastis: Įvesties šrifto dydis mažesnis nei 16 pikselių

Sprendimas: Nustatykite įvesties šrifto dydį bent į 16 pikselių

Problema: Išskleidžiamuosius meniu sunku naudoti

Priežastis: Pasirinktiniai išskleidžiamieji meniu nėra optimizuoti lietimui

Sprendimas: Naudokite vietinius pasirinkimo elementus arba lietimui patogias alternatyvas

Problema: Pateikimo mygtukas ne ekrane

Priežastis: Ilgos formos be matomo progreso

Sprendimas: Lipnus pateikimo mygtukas arba aiškūs slinkties indikatoriai

Mobiliesiems skirtos funkcijos

Skambinimo spustelėjus nuorodos į telefono numerius

Patvirtinimuose esantys telefono numeriai turėtų būti paliečiami:

• Ryšiai su tel: protokolu
• Vienas bakstelėjimas norint paskambinti

Vietos aptikimas

Adreso laukams:

• Galimybė naudoti dabartinę vietą
• Automatiškai užpildyti miestą / regioną

Fotoaparato integracija

Failų įkėlimui:

• Tiesioginės prieigos prie kameros parinktis
• Prieiga prie nuotraukų bibliotekos
• Dokumentų nuskaitymas

Palieskite Gestai

Gimtoji mobiliųjų įrenginių sąveika:

• Braukite perjungdami formos veiksmus
• Patraukite, kad atnaujintumėte
• Žnybtelėjimas, norint priartinti (jei reikia)

Našumas mobiliuosiuose įrenginiuose

Kodėl greitis svarbesnis mobiliuosiuose įrenginiuose

• Mobilusis ryšys dažnai lėtesnis
• Duomenų apribojimai kai kuriems vartotojams
• Mažiau kantrybės mobiliuosiuose įrenginiuose
• Baterijos sąnaudų aspektai

Formos našumo patarimai

Sumažinkite formos svorį

• Lengvi formų įskiepiai
• Minimalus CSS/JavaScript
• Optimizuoti ištekliai

Laikinas įkrovimas, kai įmanoma

• Įkelkite formos elementus pagal poreikį
• Neįkelkite paslėptų sąlyginių laukų iš anksto

Optimizuoti vaizdus

• Suspauskite bet kokius vaizdus formose
• Naudokite tinkamus formatus (WebP)
• Prisitaikantys vaizdų dydžiai

„Auto Form Builder“ mobilusis požiūris

Automatinis formų kūrimo įrankis sukurta mobiliesiems įrenginiams:

Reaguojantis pagal numatytuosius nustatymus

• Visos formos automatiškai reaguoja
• Nereikia jokios specialios konfigūracijos
• Prisitaiko prie bet kokio ekrano dydžio

Prisilietimui optimizuoti laukai

• Tinkamo dydžio lietimo taikiniai
• Vietinės mobiliųjų įrenginių įvesties funkcijos
• Jutiklinis valdymas datos / laiko rinkikliais

Mobiliesiems įrenginiams pritaikytas stilius

• Stekų išdėstymas mažuose ekranuose
• Viso pločio laukai mobiliajame įrenginyje
• Įskaitomi šrifto dydžiai

Lengvas našumas

• Minimalus JavaScript pėdsakas
• Greitai įkeliamos formos
• Optimizuota mobiliesiems tinklams

Kontrolinis sąrašas: ar jūsų forma paruošta mobiliesiems įrenginiams?

maketavimas

• ☐ Vienas stulpelis mobiliajame įrenginyje
• ☐ Nėra horizontalaus slinkimo
• ☐ Viso pločio laukai
• ☐ Tinkamas atstumas tarp elementų

Spausdinimas

• ☐ Etiketės įskaitomos be priartinimo (14 pikselių ir daugiau)
• ☐ Įveskite bent 16 pikselių tekstą
• ☐ Geri kontrasto santykiai

Sąveika

• ☐ Jutiklinis taikinių dydis – mažiausiai 44 pikseliai
• ☐ Tinkami klaviatūros tipai
• ☐ Paprastas išskleidžiamasis pasirinkimas
• ☐ Paliesdami žymimuosius langelius / radijo imtuvus

Funkcionalumas

• ☐ Forma sėkmingai pateikta
• ☐ Matomi klaidų pranešimai
• ☐ Rodomas sėkmingo įvykdymo pranešimas
• ☐ Failų įkėlimas veikia

spektaklis

• ☐ Greitai įkeliama 3G ryšiu
• ☐ Nėra blokuojančių scenarijų
• ☐ Minimalus duomenų naudojimas

Dažnai užduodami klausimai

Kodėl „iOS“ sistemoje palietus lauką, mano formos priartėja?

„iOS“ automatiškai priartina vaizdą, kai įvesties šrifto dydis yra mažesnis nei 16 pikselių. Kad to išvengtumėte, nustatykite įvesties šrifto dydį bent į 16 pikselių.

Ar turėčiau kurti atskiras mobiliųjų ir stalinių kompiuterių formas?

Ne – reaguojantis dizainas tvarko abu. Viena gerai sukurta reaguojanti forma veikia visuose įrenginiuose. Atskirų formų tvarkymas padvigubina jūsų darbą ir kelia neatitikimų riziką.

Kaip testuoti įrenginiuose, kurie man nepriklauso?

Baziniam testavimui naudokite naršyklės kūrimo įrankius. Išsamiam testavimui naudokitės internetinėmis paslaugomis, tokiomis kaip „BrowserStack“, arba paklauskite draugų / kolegų, turinčių skirtingus įrenginius.

Ar mobiliųjų įrenginių naudotojai iš tikrųjų pildo formas?

Taip! Mobilioji prekyba ir potencialių klientų paieška yra milžiniški. Vartotojai tikisi atlikti užduotis mobiliajame telefone. Jei jūsų formos veikia gerai, jie jas naudos.

Koks svarbiausias mobiliosios formos patobulinimas?

Tinkami lietimui skirtų elementų dydžiai. Jei naudotojai negali tiksliai bakstelėti laukų ir mygtukų, visa kita nesvarbu. Įsitikinkite, kad visi interaktyvūs elementai yra bent 44 × 44 pikselių dydžio.

Santrauka

Formų pritaikymas mobiliesiems įrenginiams:

1. Supraskite statymus – 60 % ir daugiau srauto yra mobilieji įrenginiai
2. Naudokite reaguojantį dizainą – Sklandūs pločiai, sudėtinis išdėstymas
3. Dydis lietimui – Mažiausiai 44 pikselių bakstelėjimo taikiniai
4. Užtikrinkite įskaitomumą – Įvesties teksto minimalus dydis – 16 pikselių
5. Dešinės klaviatūros paleidimas – Naudokite tinkamus įvesties tipus
6. Išbandykite tikrus įrenginius – Nenaudokite vien simuliatorių
7. Pasirinkite reaguojančius įrankius – Pradėkite nuo mobiliesiems įrenginiams pritaikytų formų kūrimo priemonių

Išvada

Mobiliesiems įrenginiams pritaikytos formos nėra pasirenkamos – jos būtinos. Kadangi didžioji dalis interneto srauto gaunama iš mobiliųjų įrenginių, formos, kurios neveikia telefonuose, kasdien kainuoja potencialius klientus, atima jūsų reputaciją ir praranda jūsų potencialius klientus.

Automatinis formų kūrimo įrankis automatiškai sukuria mobiliesiems pritaikytas formas. Kiekviena forma prisitaiko prie ekrano dydžio, naudoja lietimui jautrius elementus ir puikiai veikia mobiliuosiuose tinkluose. Nereikia jokios konfigūracijos – tiesiog sukurkite savo formą ir ji veiks visur.

Pasiruošę mobiliesiems įrenginiams pritaikytoms formoms? Atsisiųskite automatinį formų kūrimo įrankį ir suteikite savo mobiliųjų įrenginių lankytojams tokią formą, kokios jie nusipelno.