Miks peaksid teie WordPressi vormid olema mobiilisõbralikud?

Rohkem kui pool kogu veebiliiklusest tuleb mobiilseadmetest. Kui teie vormid ei tööta telefonides ja tahvelarvutites hästi, kaotate iga päev uusi vorme – ja potentsiaalselt ka kliente.

Selles juhendis saate teada, miks mobiilile reageerivad vormid on olulised ja mis teeb vormist tõeliselt mobiilisõbraliku.

Mobiilne reaalsus

Mobiililiikluse statistika

• 59% + ülemaailmsest veebiliiklusest on mobiilne
• 92% internetikasutajatest pääseb ligi mobiilseadmete kaudu
• 70% mõnes tööstusharus on veebiliiklusest mobiilne
• Mobiilseadmete kasutamine kasvab jätkuvalt aasta-aastalt

Mida see vormide jaoks tähendab

Kui teie saidil on 1,000 külastajat päevas:

• ~600 on mobiilseadmetes
• Mittereageerivad vormid ärritavad neid külastajaid
• Pettunud külastajad hülgavad vormid
• Hüljatud vormid = kaotatud müügivihjed, müük, tagasiside

Mis juhtub mittereageerivate vormidega?

Kasutaja kogemus

Mittereageeriva vormi puhul seisavad mobiilikasutajad silmitsi järgmisega:

Väike tekst

• Sildid on liiga väikesed lugemiseks
• Juhiseid kissitades
• Puudub oluline teave

Võimatud sisestusväljad

• Tekstikastid liiga väike, et täpselt koputada
• Valesti sisestamine valdkondades
• Pidev suumimine sisse/välja

Katkised paigutused

• Väljad katkevad ekraani servadest
• Vajalik on horisontaalne kerimine
• Esitamisnupp on peidetud või kättesaamatu

Pettumust valmistavad interaktsioonid

• Rippmenüüd raske valida
• Märkeruudud liiga väike, et puudutada
• Kuupäevavalijad kasutamiskõlbmatu

Tulemus

Kasutajad annavad alla. Nad:

• Loobu vormist täielikult
• Jäta oma sait pettunuks
• Mine konkurendi juurde, kellel on paremad vormid
• Ärge kunagi pöörduge tagasi

Mittereageerivate vormide hind

Kaotatud konversioonid

Iga hüljatud vorm on kaotatud võimalus:

• Kontaktvorm → Kadunud müügivihje
• Pakkumispäring → Kadunud müük
• Registreerimine → Kadunud klient
• Tagasiside vorm → Kadunud teadmised

Kahjustatud maine

Halb mobiilikogemus peegeldab teie brändi:

• "See ettevõte tundub iganenud"
• "Neid ei huvita kasutajakogemus"
• „Kui nende vormid on halvad, kuidas on lood nende tootega?“

SEO mõju

Google seab esikohale mobiilisõbralikud saidid:

• Mobiilikeskne indekseerimine on standardne
• Halb mobiilikogemus kahjustab edetabelit
• Madalamad kohad = vähem liiklust

Konkurentsi puudus

Samal ajal kui sina mobiilikasutajaid ärritad, siis heade vormidega konkurendid:

• Jäädvusta kaotatavad müügivihjed
• Loo suhteid oma potentsiaalsete klientidega
• Kasva samal ajal kui imestad, miks konversioonid on madalad

Mis teeb vormi mobiilisõbralikuks?

1. Vedeliku laius

Vormid peaksid ekraani suurusega kohanema:

• Täislaiuses väikestel ekraanidel
• Sobiv laius suurematel ekraanidel
• Horisontaalset kerimist pole kunagi

2. Loetav tekst

Kogu tekst on loetav ilma suumimiseta:

• Sildid: minimaalselt 14–16 pikslit
• Sisendtekst: minimaalselt 16 pikslit (takistab iOS-i suumimist)
• Abitekst: minimaalselt 12–14 pikslit
• Piisav kontrastsus

3. Puutetundlikud sihtmärgid

Sõrmedele sobivad koputatavad elemendid:

• Minimaalne puudutuse sihtmärk: 44 × 44 pikslit
• Elementide vaheline piisav vahekaugus
• Märkeruudud ja raadionupud, mida on lihtne puudutada

4. Virnastatud paigutus

Mobiilseadmes virnastage elemendid vertikaalselt:

• Üks väli rea kohta
• Sildid sisendite kohal (mitte kõrval)
• Täislaiuses nupud

5. Natiivsed sisendtüübid

Käivitage sobivad mobiilsed klaviatuurid:

• Meilivälja → Meiliklaviatuur (@, .com)
• Telefoniväli → Numbriklahvistik
• URL-i väli → URL-i klaviatuur
• Numbriväli → Numbriline sisend

6. Mobiilisõbralikud komponendid

Puudutamiseks mõeldud elemendid:

• Natiivsed kuupäevavalijad (kerimisrattad)
• Suured rippmenüü päästikud
• Puutetundlik failide üleslaadimine

7. Nähtav saatmisnupp

Kasutajad peavad saama leida ja puudutada nuppu „Esita”:

• Täislaiuses või silmatorkavas suuruses
• Kõrge kontrastsusega värv
• Selgelt nähtav ilma kerimiseta (kui võimalik)

Mobiilivormide parimad tavad

Hoidke vormid lühikesed

Mobiilikasutajatel on vähem kannatust:

• Esitage ainult olulisi küsimusi
• Eemalda soovitud väljad
• Pikemate vormide puhul kaaluge mitmeastmelist lähenemist

Kasutage üheveerulist paigutust

Mitmeveerulised paigutused mobiilis ei tööta:

• Kõik väljad vertikaalselt virnastatakse
• Lihtsam skannida ja lõpule viia
• Järjepidev kogemus kõigis seadmetes

Väljade järjekorra optimeerimine

Paiguta väljad loogiliselt:

• Kõige olulisem esimesena
• Seotud väljad rühmitatud
• Lihtne pöidlaga ligi pääseda

Esitage selged sildid

Sildid peaksid olema üheselt mõistetavad:

• Põllu kohal (mitte sees hõljudes)
• Alati nähtav (ärge lootke ainult kohatäitele)
• Kirjeldav, aga kokkuvõtlik

Luba automaatne täitmine

Las brauserid aitavad kasutajatel:

• Nimi, e-post, telefoninumber automaatselt täidetud
• Aadressi automaatne täitmine
• Vähendab trükkimist väikestel klaviatuuridel

Näita valideerimist tekstisiseselt

Aidake kasutajatel vigu koheselt parandada:

• Väljade kõrval olevad veateated
• Reaalajas valideerimine, kui see on võimalik
• Selged juhised parandamiseks

Tee nupud nähtavaks

Esitamisnupud peaksid silma paistma:

• Kontrastne värv
• Suur puudutussihtmärk
• Selge toimingutekst („Esita“, „Saada“, „Registreeri“)

Mobiilse reageerimisvõime testimine

Brauseri arendaja tööriistad

Kiire testimine töölaua brauseris:

1. Ava oma vormileht
2. Vajutage F12 (Arendaja tööriistad)
3. Klõpsake seadme lülitusikooni
4. Valige erinevad seadme suurused
5. Testvormi interaktsioon

Tõeline seadme testimine

Miski ei ületa päris seadmeid:

• Testi iPhone'is ja Androidis
• Test tahvelarvutitel
• Proovige erinevaid ekraanisuurusi
• Täitke vorm tegelikult ära

Mida testida

• ✓ Kas sa saad kõiki silte ilma suumimata lugeda?
• ✓ Kas sisestusvälju on lihtne puudutada?
• ✓ Kas kuvatakse õige klaviatuur?
• ✓ Kas rippmenüüst saab hõlpsalt valikuid teha?
• ✓ Kas märkeruute/raadioid saab puudutada?
• ✓ Kas saatmisnupp on nähtav ja kättesaadav?
• ✓ Kas vorm esitati edukalt?
• ✓ Kas veateated on nähtavad ja selged?

Google'i mobiilisõbralik test

Kontrollige lehe üldist mobiilisõbralikkust:

1. Mine Google'i mobiilisõbralikkuse testimistööriista juurde
2. Sisestage oma vormi lehe URL
3. Vaadake tulemused ja soovitused üle

Levinud mobiilivormide probleemid

Probleem: tekst on liiga väike

Põhjus: Fikseeritud pikslisuurused ei skaleeru

Lahendus: Kasutage suhtelisi ühikuid (em, rem) või minimaalset suurust 16 pikslit

Probleem: Väljad on liiga kitsad

Põhjus: Fikseeritud laiusega konteinerid

Lahendus: Kasutage protsentuaalseid laiusi (mobiilil 100%)

Probleem: Klaviatuurikatted Vorm

Põhjus: Klaviatuuri kuvamisel kerimise reguleerimine pole võimalik

Lahendus: Veenduge, et fookuses olev väli kerib nähtavale

Probleem: Suumimine sisendfookusel (iOS)

Põhjus: Sisendites on kirjasuurus alla 16 piksli

Lahendus: Määra sisendfondi suuruseks vähemalt 16 pikslit

Probleem: rippmenüüsid on raske kasutada

Põhjus: Kohandatud rippmenüüd pole puutetundlikele ekraanidele optimeeritud

Lahendus: Kasutage natiivseid valikuelemente või puutetundlikke alternatiive

Probleem: Esita nupp on ekraaniväliselt nähtav

Põhjus: Pikad vormid ilma nähtava edenemiseta

Lahendus: Kleepuv saatmisnupp või selged kerimisnäidikud

Mobiilipõhised funktsioonid

Klõpsa-helista-telefonilingid

Kinnitustes olevad telefoninumbrid peaksid olema puudutatavad:

• Lingid tel: protokolliga
• Üks puudutus helistamiseks

Asukoha tuvastamine

Aadressiväljade jaoks:

• Praeguse asukoha kasutamise võimalus
• Linn/regioon täidetakse automaatselt

Kaamera integreerimine

Failide üleslaadimiseks:

• Otsese kaamerale juurdepääsu võimalus
• Juurdepääs fototeegile
• Dokumendi skaneerimine

Puudutage valikut Žestid

Natiivsed mobiilsed interaktsioonid:

• Vormi etappide vahel libistades
• Värskendamiseks tõmmake
• Suumimiseks näpistamine (vajadusel)

Toimivus mobiilseadmetes

Miks on kiirus mobiilis olulisem

• Mobiilsideühendused on sageli aeglasemad
• Andmeside piirangud mõnedele kasutajatele
• Vähem kannatust mobiilis
• Aku tarbimise kaalutlused

Vormi toimivuse näpunäited

Minimeeri vormi kaal

• Kerged vormi pluginad
• Minimaalne CSS/JavaScript
• Optimeeritud varad

Laisk laadimine, kui see on võimalik

• Laadi vormi elemente vastavalt vajadusele
• Ära laadi peidetud tingimusvälju ette

Optimeeri pilte

• Tihendage vormides olevaid pilte
• Kasutage sobivaid vorminguid (WebP)
• Kohanduvad pildisuurused

Automaatse vormi koostaja mobiilne lähenemine

Automaatne vormide koostaja on loodud mobiilikeskselt:

Vaikimisi reageeriv

• Kõik vormid reageerivad automaatselt
• Spetsiaalset konfiguratsiooni pole vaja
• Kohandub igale ekraanisuurusele

Puutetundlikud väljad

• Õige suurusega puudutussihtmärgid
• Natiivsed mobiilsed sisendid
• Puutetundlikud kuupäeva/kellaaja valijad

Mobiilikeskne stiil

• Stack-paigutus väikestel ekraanidel
• Täislaiuses väljad mobiilis
• Loetavad fondisuurused

Kerge jõudlus

• Minimaalne JavaScripti jalajälg
• Kiirelt laadivad vormid
• Optimeeritud mobiilsidevõrkude jaoks

Kontrollnimekiri: kas teie vorm on mobiilisõbralik?

Layout

• ☐ Üksik veerg mobiilis
• ☐ Horisontaalset kerimist ei toimu
• ☐ Täislaiuses väljad
• ☐ Elementide vaheline piisav vahekaugus

Tüpograafia

• ☐ Sildid on loetavad ilma suumita (14px+)
• ☐ Sisestage tekst, mille suurus on vähemalt 16 pikslit
• ☐ Hea kontrastsussuhe

interaktsioonid

• ☐ Puutetundlikud sihtmärgid minimaalselt 44 pikslit
• ☐ Õiged klaviatuuritüübid
• ☐ Lihtne rippmenüü valik
• ☐ Puudutatavad märkeruudud/raadiod

Funktsionaalsus

• ☐ Vorm on edukalt esitatud
• ☐ Veateated on nähtavad
• ☐ Edukuse teade kuvatakse
• ☐ Failide üleslaadimine toimib

jõudlus

• ☐ Laadib 3G-võrgus kiiresti
• ☐ Blokeerivaid skripte pole
• ☐ Minimaalne andmesidekasutus

Korduma kippuvad küsimused

Miks mu vormid iOS-is välja puudutamisel suurenevad?

iOS suumib automaatselt, kui sisendfondi suurus on alla 16 piksli. Selle vältimiseks määrake sisendfondi suuruseks vähemalt 16 pikslit.

Kas peaksin looma eraldi mobiili- ja lauaarvutivormid?

Ei – responsiivne disain lahendab mõlemad probleemid. Üks hästi disainitud responsiivne vorm töötab kõigis seadmetes. Eraldi vormide haldamine kahekordistab teie tööd ja suurendab ebajärjekindlust.

Kuidas ma saan testida seadmetel, mis mulle ei kuulu?

Põhiliseks testimiseks kasutage brauseri arendustööriistu. Põhjalikuks testimiseks kasutage veebiteenuseid, näiteks BrowserStacki, või küsige erinevate seadmetega sõpradelt/kolleegidelt.

Kas mobiilikasutajad täidavad vorme?

Jah! Mobiilne kaubandus ja müügivihjete genereerimine on tohutud. Kasutajad eeldavad, et saavad ülesandeid mobiilis täita. Kui teie vormid toimivad hästi, siis nad kasutavad neid.

Mis on mobiilivormi kõige olulisem täiustus?

Õiged puutetundlike elementide suurused. Kui kasutajad ei saa välju ja nuppe täpselt puudutada, pole miski muu oluline. Veenduge, et kõik interaktiivsed elemendid oleksid vähemalt 44 × 44 pikslit.

kokkuvõte

Vormide mobiilisõbralikuks muutmine:

1. Mõista panuseid – 60%+ liiklusest on mobiilne
2. Kasutage tundlikku disaini – Sujuvad laiused, virnastatud paigutus
3. Suurus puudutuseks – minimaalsed puudutuse sihtmärgid 44px
4. Tagage loetavus – sisendteksti minimaalne suurus 16 pikslit
5. Parempoolsete klaviatuuride käivitamine – Kasutage sobivaid sisendtüüpe
6. Testige päris seadmetes – Ära kasuta ainult simulaatoreid
7. Valige reageerivad tööriistad – Alusta mobiilisõbralike vormide koostajatega

Järeldus

Mobiiliresponsiivsed vormid pole valikulised – need on hädavajalikud. Kuna suurem osa veebiliiklusest tuleb mobiilseadmetest, maksavad telefonides mittetöötavad vormid teile iga päev müügivihjeid, kliente ja mainet.

Automaatne vormide koostaja loob automaatselt mobiilisõbralikke vorme. Iga vorm kohandub ekraani suurusega, kasutab puutetundlikke elemente ja toimib hästi mobiilvõrkudes. Konfigureerimist pole vaja – lihtsalt looge oma vorm ja see töötab kõikjal.

Kas olete valmis mobiilisõbralikeks vormideks? Laadige alla automaatne vormide koostaja ja pakkuge oma mobiilikülastajatele vormikogemust, mida nad väärivad.