Zakaj morajo biti vaši obrazci WordPress odzivni na mobilne naprave

Več kot polovica vsega spletnega prometa prihaja iz mobilnih naprav. Če vaši obrazci ne delujejo dobro na telefonih in tablicah, vsak dan izgubljate oddane obrazce – in potencialno stranke.

V tem priročniku boste izvedeli, zakaj so obrazci, ki se odzivajo na mobilne naprave, pomembni in kaj naredi obrazec resnično prijazen do mobilnih naprav.

Mobilna resničnost

Statistika mobilnega prometa

• 59% + globalni spletni promet je mobilnega
• 92% dostop uporabnikov interneta prek mobilnih naprav
• 70% spletni promet v nekaterih panogah je mobilen
• Uporaba mobilnih naprav še naprej raste iz leta v leto

Kaj to pomeni za obrazce

Če vašo spletno stran obišče 1,000 obiskovalcev na dan:

• ~600 jih uporablja mobilne naprave
• Neodzivni obrazci frustrirajo te obiskovalce
• Razočarani obiskovalci opuščajo obrazce
• Zapuščeni obrazci = izgubljene potencialne stranke, prodaja, povratne informacije

Kaj se zgodi z neodzivnimi obrazci

Uporabniška izkušnja

Na neodzivnem obrazcu se uporabniki mobilnih naprav soočajo z:

TinyText

• Premajhne oznake za branje
• Mežikanje ob navodilih
• Manjkajo pomembne informacije

Nemogoča vnosna polja

• Polja z besedilom premajhen za natančno tapkanje
• Napačno tipkanje Polja
• Nenehno povečevanje/pomanjševanje

Prekinjene postavitve

• Polja so odrezana od robov zaslona
• Potrebno je vodoravno pomikanje
• Gumb za pošiljanje je skrit ali nedosegljiv

Frustrirajoče interakcije

• Spustna menija težko izbrati
• Kvačice premajhen za dotik
• Izbirniki datumov neuporabna

Rezultat

Uporabniki obupajo. Oni:

• Popolnoma opustite obrazec
• Pustite svojo spletno stran razočarano
• Pojdi h konkurentu z boljšimi formami
• Nikoli se ne vrni

Stroški neodzivnih obrazcev

Izgubljene konverzije

Vsaka opuščena oblika je izgubljena priložnost:

• Kontaktni obrazec → Izgubljena potencialna stranka
• Zahteva za ponudbo → Izgubljena prodaja
• Registracija → Izgubljena stranka
• Obrazec za povratne informacije → Izgubljeni vpogledi

Poškodovan ugled

Slaba mobilna izkušnja se odraža na vaši blagovni znamki:

• "To podjetje se zdi zastarelo"
• "Ne zanima jih uporabniška izkušnja"
• "Če so njihove oblike slabe, kaj pa njihov izdelek?"

SEO vpliv

Google daje prednost spletnim mestom, prijaznim mobilnim napravam:

• Indeksiranje, ki je primarno namenjeno mobilnim napravam, je standardno
• Slaba mobilna izkušnja škoduje uvrstitvam
• Nižje uvrstitve = manj prometa

Konkurenčna slabost

Medtem ko frustrirate mobilne uporabnike, konkurenti z dobrimi obrazci:

• Pridobite potencialne stranke, ki jih izgubljate
• Gradite odnose s svojimi potencialnimi strankami
• Rastite, medtem ko se sprašujete, zakaj so konverzije nizke

Kaj naredi obrazec odziven na mobilne naprave

1. Širina tekočine

Obrazci se morajo prilagoditi velikosti zaslona:

• Polna širina na majhnih zaslonih
• Primerna širina na večjih zaslonih
• Nikoli brez horizontalnega drsenja

2. Berljivo besedilo

Vse besedilo je berljivo brez povečave:

• Oznake: najmanj 14–16 slikovnih pik
• Vnosno besedilo: najmanj 16 slikovnih pik (preprečuje povečavo v sistemu iOS)
• Besedilo pomoči: najmanj 12–14 slikovnih pik
• Ustrezen kontrast

3. Cilji, prijazni do dotika

Elementi, ki se jih je mogoče dotakniti in so velikosti za prste:

• Najmanjša velikost cilja za dotik: 44 × 44 slikovnih pik
• Ustrezen razmik med elementi
• Potrditvena polja in radijski gumbi, ki jih je enostavno dotakniti

4. Zložena postavitev

Na mobilni napravi elemente zložite navpično:

• Eno polje na vrstico
• Oznake nad vnosi (ne poleg)
• Gumbi polne širine

5. Izvorne vrste vnosa

Sprožite ustrezne mobilne tipkovnice:

• Polje za e-pošto → Tipkovnica za e-pošto (@, .com)
• Telefonsko polje → Številska tipkovnica
• Polje URL → Tipkovnica URL
• Številsko polje → Številski vnos

6. Komponente, prijazne mobilnim napravam

Elementi, zasnovani za dotik:

• Izvorni izbirniki datumov (drsna kolesa)
• Veliki spustni sprožilci
• Nalaganje datotek na dotik

7. Vidni gumb za oddajo

Uporabniki morajo biti sposobni najti in tapniti možnost za pošiljanje:

• Polna širina ali vidna velikost
• Visokokontrastna barva
• Jasno vidno brez pomikanja (če je mogoče)

Najboljše prakse za mobilne obrazce

Naj bodo obrazci kratki

Uporabniki mobilnih naprav imajo manj potrpljenja:

• Postavljajte samo bistvena vprašanja
• Odstranite polja, ki jih je dobro imeti
• Za daljše obrazce razmislite o večstopenjski izvedbi

Uporabite postavitev z enim stolpcem

Večstolpčne postavitve se na mobilnih napravah ne uporabljajo:

• Vsa polja zložite navpično
• Lažje skeniranje in izpolnjevanje
• Dosledna izkušnja v vseh napravah

Optimiziraj vrstni red polj

Polja razporedite logično:

• Najprej najpomembnejše
• Združena sorodna polja
• Enostavno dosegljivo s palcema

Zagotovite jasne oznake

Oznake morajo biti nedvoumne:

• Nad poljem (ne lebdi znotraj)
• Vedno vidno (ne zanašajte se samo na nadomestno besedilo)
• Opisno, a jedrnato

Omogoči samodokončanje

Naj brskalniki pomagajo uporabnikom:

• Samodejno izpolnjevanje imena, e-pošte, telefonske številke
• Samodokončanje naslova
• Zmanjša tipkanje na majhnih tipkovnicah

Prikaži validacijo v vrstici

Pomagajte uporabnikom takoj odpraviti napake:

• Sporočila o napakah poleg polj
• Potrditev v realnem času, kadar je to mogoče
• Jasna navodila za popravilo

Naredite gumbe očitne

Gumbi za oddajo naj izstopajo:

• Kontrastna barva
• Velika tarča za dotik
• Jasno besedilo dejanja (»Pošlji«, »Pošlji«, »Registriraj«)

Testiranje odzivnosti mobilnih naprav

Orodja za razvijalce brskalnika

Hitro testiranje v namiznem brskalniku:

1. Odprite stran obrazca
2. Pritisnite F12 (Orodja za razvijalce)
3. Kliknite ikono preklopa naprave
4. Izberite različne velikosti naprav
5. Interakcija testnega obrazca

Realno testiranje naprav

Nič ne premaga dejanskih naprav:

• Test na iPhoneu in Androidu
• Testiranje na tabletah
• Preizkusite različne velikosti zaslona
• Dejansko izpolnite obrazec

Kaj testirati

• ✓ Ali lahko preberete vse nalepke brez povečave/povečave?
• ✓ Ali se je vnosnih polj enostavno dotakniti?
• ✓ Ali se prikaže pravilna tipkovnica?
• ✓ Ali lahko enostavno izberete spustne možnosti?
• ✓ Ali se je mogoče dotakniti potrditvenih polj/izbirnikov?
• ✓ Ali je gumb za oddajo viden in dosegljiv?
• ✓ Ali je bil obrazec uspešno poslan?
• ✓ Ali so sporočila o napakah vidna in jasna?

Google Mobile-prijazen test

Preverite splošno prijaznost strani do mobilnih naprav:

1. Pojdite na Googlovo orodje za testiranje prijaznosti do mobilnih naprav
2. Vnesite URL strani obrazca
3. Pregled rezultatov in predlogov

Pogoste težave z mobilnimi obrazci

Težava: Besedilo je premajhno

Vzrok: Fiksne velikosti slikovnih pik se ne skalirajo

rešitev: Uporabite relativne enote (em, rem) ali najmanj 16 slikovnih pik

Težava: Polja so preozka

Vzrok: Kontejnerji s fiksno širino

rešitev: Uporabite odstotno širino (100 % na mobilnih napravah)

Težava: Obrazec za prevleke tipkovnice

Vzrok: Ni prilagajanja pomikanja, ko se prikaže tipkovnica

rešitev: Zagotovite, da se izbrano polje pomakne v vidno polje

Težava: Povečava pri vnosnem fokusu (iOS)

Vzrok: Velikost pisave pod 16 slikovnih pik v vhodnih podatkih

rešitev: Velikost vnosne pisave nastavite na vsaj 16 slikovnih pik

Težava: Spustni meniji so težki za uporabo

Vzrok: Spustni meniji po meri niso optimizirani za dotik

rešitev: Uporabite izvorne elemente select ali alternative, prijazne do dotika

Težava: Gumb za pošiljanje ni na zaslonu

Vzrok: Dolgi obrazci brez vidnega napredka

rešitev: Lepljiv gumb za oddajo ali indikatorji za brisanje pomikanja

Funkcije, specifične za mobilne naprave

Povezave za telefonske klice »klikni za klic«

Telefonske številke v potrditvah morajo biti dotikalne:

• Povezave s protokolom tel:
• En dotik za klic

Zaznavanje lokacije

Za polja za naslov:

• Možnost uporabe trenutne lokacije
• Samodejno izpolnjevanje mesta/regije

Integracija fotoaparata

Za nalaganje datotek:

• Možnost neposrednega dostopa do kamere
• Dostop do fototeke
• Skeniranje dokumentov

Dotaknite se Poteze

Izvorne mobilne interakcije:

• Podrsajte med koraki obrazca
• Povlecite za osvežitev
• Povečajte s prsti (če je potrebno)

Uspešnost na mobilnih napravah

Zakaj je hitrost pomembnejša na mobilnih napravah

• Mobilne povezave so pogosto počasnejše
• Omejitve podatkov za nekatere uporabnike
• Manj potrpljenja na mobilnih napravah
• Upoštevanje porabe baterije

Nasveti za uspešnost obrazcev

Zmanjšajte težo obrazca

• Lahki vtičniki za obrazce
• Minimalni CSS/JavaScript
• Optimizirana sredstva

Leno nalaganje, kadar je to mogoče

• Nalaganje elementov obrazca po potrebi
• Skritih pogojnih polj ne nalagaj vnaprej

Optimizirajte slike

• Stisnite vse slike v obrazcih
• Uporabite ustrezne formate (WebP)
• Odzivne velikosti slik

Mobilni pristop programa Auto Form Builder

Samodejni graditelj obrazcev je zgrajeno najprej za mobilne naprave:

Privzeto odziven

• Vsi obrazci se samodejno odzivajo
• Ni potrebna posebna konfiguracija
• Prilagodi se vsaki velikosti zaslona

Polja, optimizirana za dotik

• Pravilno velike ciljne točke za dotik
• Izvorni mobilni vnosi
• Izbirniki datuma/ure na dotik

Oblikovanje, osredotočeno na mobilne naprave

• Postavitev sklada na majhnih zaslonih
• Polja polne širine na mobilnih napravah
• Berljive velikosti pisav

Lahka zmogljivost

• Minimalni odtis JavaScripta
• Hitro nalaganje obrazcev
• Optimizirano za mobilna omrežja

Kontrolni seznam: Ali je vaš obrazec pripravljen za mobilne naprave?

postavitev

• ☐ En stolpec na mobilni napravi
• ☐ Brez vodoravnega drsenja
• ☐ Polja polne širine
• ☐ Ustrezen razmik med elementi

Tipografija

• ☐ Oznake berljive brez povečave (14px+)
• ☐ Vnesite besedilo vsaj 16 slikovnih pik
• ☐ Dobra kontrastna razmerja

Interakcije

• ☐ Cilji dotika najmanj 44 slikovnih pik
• ☐ Pravilne vrste tipkovnic
• ☐ Enostavna izbira v spustnem meniju
• ☐ Potrditvena polja/izbirniki, ki se jih je mogoče dotakniti

funkcionalnost

• ☐ Obrazec je bil uspešno poslan
• ☐ Vidna sporočila o napakah
• ☐ Prikaže se sporočilo o uspehu
• ☐ Nalaganje datotek deluje

Uspešnost

• ☐ Hitro se naloži v omrežju 3G
• ☐ Brez blokirajočih skriptov
• ☐ Minimalna poraba podatkov

Pogosto zastavljena vprašanja

Zakaj se moji obrazci v sistemu iOS povečajo, ko se dotaknem polja?

iOS samodejno poveča, ko je velikost vnosne pisave manjša od 16 slikovnih pik. Da bi to preprečili, nastavite velikost vnosne pisave na vsaj 16 slikovnih pik.

Ali naj ustvarim ločene obrazce za mobilne naprave in namizne računalnike?

Ne – odzivna zasnova poskrbi za oboje. En dobro oblikovan odziven obrazec deluje na vseh napravah. Vzdrževanje ločenih obrazcev podvoji vaše delo in tvega nedoslednosti.

Kako testiram na napravah, ki jih nimam?

Za osnovno testiranje uporabite orodja za razvijalce brskalnikov. Za temeljito testiranje uporabite spletne storitve, kot je BrowserStack, ali pa vprašajte prijatelje/kolege z različnimi napravami.

Ali uporabniki mobilnih naprav dejansko izpolnjujejo obrazce?

Da! Mobilna trgovina in pridobivanje potencialnih strank sta ogromna. Uporabniki pričakujejo, da bodo opravila opravljali na mobilnih napravah. Če vaši obrazci delujejo dobro, jih bodo uporabljali.

Katera je najpomembnejša izboljšava mobilnih obrazcev?

Pravilne velikosti ciljev dotika. Če uporabniki ne morejo natančno tapkati polj in gumbov, ni pomembno nič drugega. Zagotovite, da so vsi interaktivni elementi veliki vsaj 44 × 44 slikovnih pik.

Povzetek

Prilagajanje obrazcev mobilnim napravam:

1. Razumeti vložke – 60 %+ prometa je mobilnega
2. Uporabite odzivno oblikovanje – Spremenljive širine, zložena postavitev
3. Velikost za dotik – Najmanjša velikost ciljev za dotik je 44 slikovnih pik
4. Zagotovite berljivost – vhodno besedilo najmanj 16 slikovnih pik
5. Sproži desno tipkovnico – Uporabite ustrezne tipe vnosa
6. Preizkusite na pravih napravah – Ne uporabljajte samo simulatorjev
7. Izberite odzivna orodja – Začnite z graditelji obrazcev, pripravljenimi za mobilne naprave

zaključek

Obrazci, ki se odzivajo na mobilne naprave, niso neobvezni – so bistveni. Ker večina spletnega prometa prihaja iz mobilnih naprav, vas obrazci, ki ne delujejo na telefonih, vsak dan stanejo potencialnih strank, strank in ugleda.

Samodejni graditelj obrazcev Samodejno ustvari obrazce, ki se odzivajo na mobilne naprave. Vsak obrazec se prilagodi velikosti zaslona, ​​uporablja elemente, prijazne do dotika, in dobro deluje v mobilnih omrežjih. Konfiguracija ni potrebna – samo ustvarite svoj obrazec in deluje povsod.

Ste pripravljeni na obrazce, prijazne mobilnim napravam? Prenesite samodejni graditelj obrazcev in svojim mobilnim obiskovalcem zagotovite izkušnjo, ki si jo zaslužijo.