Zergatik behar duten zure WordPress formularioek mugikorretarako erantzunkorrak izan

Web trafikoaren erdia baino gehiago gailu mugikorretatik dator. Zure formularioek ez badute ondo funtzionatzen telefonoetan eta tabletetan, egunero bidalketak galtzen ari zara —eta, agian, bezeroak ere bai—.

Gida honetan, zergatik diren garrantzitsuak mugikorretarako egokitutako formularioak eta zerk egiten duen formulario bat benetan mugikorretarako egokia ikasiko duzu.

Mugikorren Errealitatea

Mugikorreko trafikoaren estatistikak

• 59% + munduko web trafikoaren zati bat mugikorrekoa da
• 92% Interneteko erabiltzaileen artean mugikorretik sartzen da
• 70% Industria batzuetan web trafikoaren zati bat mugikorra da
• Mugikorreko erabilerak urtez urte hazten jarraitzen du

Zer esan nahi du honek inprimakietarako

Zure webguneak egunean 1,000 bisitari jasotzen baditu:

• ~600 gailu mugikorretan daude
• Erantzuten ez duten formularioek bisitari hauek frustratzen dituzte
• Bisitari frustratuek inprimakiak uzten dituzte
• Inprimaki abandonatuak = galdutako bezero potentzialak, salmentak, iritziak

Zer gertatzen da erantzunik gabeko formularioekin

Erabiltzaile Esperientzia

Erantzuten ez duen formulario batean, mugikorreko erabiltzaileek honako hau egin behar dute:

Testu Txikia

• Etiketak irakurtzeko txikiegiak
• Begiradak begietara begira
• Informazio garrantzitsua falta da

Sarrera Eremu Ezinezkoak

• Testu-koadroak zehaztasunez jotzeko txikiegia
• Gaizki idaztea eremuak
• Zooma etengabea hurbildu/urrundu

Diseinu hautsiak

• Eremuek pantailaren ertzak mozten dituzte
• Korritze horizontala beharrezkoa da
• Bidali botoia ezkutatuta edo eskuraezina

Elkarrekintza frustragarriak

• Goitibeherak zaila hautatzea.
• koadrotxo txikiegia ukitzeko
• Data hautatzaileak erabilezinak

Emaitza

Erabiltzaileek amore ematen dute. Hauek:

• Utzi formularioa erabat
• Utzi zure gunea frustratuta
• Joan forma hobeak dituen lehiakide batengana
• Ez itzuli inoiz

Erantzuten ez duten formularioen kostua

Galdutako bihurketak

Utzitako forma oro galdutako aukera bat da:

• Kontaktu formularioa → Galdutako bezero potentziala
• Aurrekontu eskaera → Salmenta galdua
• Erregistroa → Bezero galdua
• Iritzi-formularioa → Galdutako ikuspegiak

Kaltetutako ospea

Mugikorreko esperientzia txarrak zure markan eragina du:

• "Enpresa hau zaharkituta dagoela dirudi"
• «Ez zaie axola erabiltzaile esperientzia»
• "Haien formak txarrak badira, zer gertatzen da haien produktuarekin?"

SEO Eragina

Google-k mugikorretarako egokitutako guneei lehentasuna ematen die:

• Mugikorrerako indexazioa estandarra da
• Mugikorretarako esperientzia txarrak sailkapenean eragina du
• Sailkapen baxuagoak = trafiko gutxiago

Desabantaila lehiakorra

Mugikorreko erabiltzaileak frustratzen dituzun bitartean, formatu onak dituzten lehiakideek:

• Atzeman galtzen ari zaren bezero potentzialak
• Eraiki harremanak zure bezero potentzialekin
• Hazi bihurketak zergatik diren baxuak galdetzen diozun bitartean

Zerk egiten du formulario bat mugikorrerako erantzunkorra

1. Fluidoaren zabalera

Inprimakiak pantailaren tamainara egokitu behar dira:

• Zabalera osoa pantaila txikietan
• Zabalera egokia pantaila handiagoetan
• Ez da inoiz korritze horizontalik egin behar

2. Irakurgarria den testua

Testu guztia irakurgarria zooma egin gabe:

• Etiketak: 14-16px gutxienez
• Sarrerako testua: gutxienez 16px (iOS zooma eragozten du)
• Laguntza testua: gutxienez 12-14px
• Kontraste egokia.

3. Ukipen-adiskidetasuneko helburuak

Ukitu daitezkeen elementuak hatzetarako neurrikoak:

• Gutxieneko ukipen-helburua: 44 × 44 pixel
• Elementuen arteko tarte egokia
• Erraz sakatzeko laukiak eta irratiak

4. Pilatutako diseinua

Mugikorrean, elementuak bertikalki pilatu:

• Eremu bat errenkada bakoitzeko
• Sarreren gaineko etiketak (ez ondoan)
• Zabalera osoko botoiak

5. Sarrera mota natiboak

Aktibatu mugikorreko teklatu egokiak:

• Posta elektronikoaren eremua → Posta elektronikoaren teklatua (@, .com)
• Telefono eremua → Zenbakizko teklatua
• URL eremua → URL teklatua
• Zenbaki-eremua → Zenbakizko sarrera

6. Mugikorrerako egokiak diren osagaiak

Ukimenerako diseinatutako elementuak:

• Data hautatzaile natiboak (gurpilak)
• Goitibeherako abiarazle handiak
• Ukipen-aplikazioko fitxategi-kargatzea

7. Bidali botoia ikusgai

Erabiltzaileek gai izan behar dute bidali botoian aurkitzeko eta sakatuta:

• Zabalera osoa edo tamaina nabarmena
• Kontraste handiko kolorea
• Argi eta garbi ikusgai, mugitu gabe (ahal bada)

Mugikorreko formularioetarako jardunbide egokiak

Mantendu formularioak laburrak

Mugikorreko erabiltzaileek pazientzia gutxiago dute:

• Galdera garrantzitsuak bakarrik egin
• Kendu edukitzeko egokiak diren eremuak
• Kontuan hartu urrats anitzeko aukera formulario luzeagoetarako

Erabili zutabe bakarreko diseinua

Zutabe anitzeko diseinuak mugikorrean eten egiten dira:

• Pilatu eremu guztiak bertikalki
• Errazagoa eskaneatu eta osatzea
• Esperientzia koherentea gailu guztietan

Eremuen ordena optimizatu

Kokatu eremuak logikoki:

• Garrantzitsuena lehenengo.
• Erlazionatutako eremuak taldekatuta
• Erraz iristeko erpuruekin

Etiketa argiak eman

Etiketek argiak izan behar dute:

• Zelaiaren gainean (barruan flotatzen ez)
• Beti ikusgai (ez fidatu leku-markatzaileetan bakarrik)
• Deskribatzailea baina laburra

Gaitu osatze automatikoa

Utzi arakatzaileei erabiltzaileei laguntzen:

• Izena, posta elektronikoa, telefonoa automatikoki betetzea
• Helbidearen osatze automatikoa
• Teklatu txikietan idazteko beharra murrizten du

Erakutsi balidazioa lerroan

Lagundu erabiltzaileei akatsak berehala konpontzen:

• Eremuen ondoko errore-mezuak
• Baliozkotzea denbora errealean, ahal den guztietan
• Konpontzeko argibide argiak

Egin botoiak agerikoak

Bidali botoiak nabarmendu behar dira:

• Kolore kontrastatua
• Ukitu helburu handia
• Ekintza-testu argia (“Bidali”, “Bidali”, “Erregistratu”)

Mugikorreko erantzuna probatzea

Arakatzailea garatzeko tresnak

Proba azkarra mahaigaineko arakatzailean:

1. Ireki zure formulario orria
2. Sakatu F12 (Garatzaileen tresnak)
3. Egin klik gailuaren etengailu-ikonoan
4. Hautatu gailu tamaina desberdinak
5. Proba-formularioaren interakzioa

Benetako gailuen probak

Ez dago benetako gailuak gainditzen dituen ezer:

• Probatu iPhone eta Android-en
• Tabletetan probatu.
• Probatu pantaila-tamaina desberdinak
• Benetan bete formularioa

Zer Probatu

• ✓ Etiketa guztiak irakur ditzakezu zooma egin gabe?
• ✓ Errazak al dira sarrera-eremuak sakatzean?
• ✓ Teklatu zuzena agertzen al da?
• ✓ Erraz hauta ditzakezu goitibeherako aukerak?
• ✓ Kontrol-laukiak/irratiak sakatu daitezke?
• ✓ Bidali botoia ikusgai eta eskuragarri al dago?
• ✓ Inprimakia behar bezala bidali al da?
• ✓ Errore-mezuak ikusgai eta argi al daude?

Google Mobile-Friendly Test

Egiaztatu orriaren mugikorretarako egokitasuna orokorra:

1. Joan Google-ren mugikorrerako egokitzapen proba tresnara
2. Sartu zure formularioaren orriaren URLa
3. Berrikusi emaitzak eta iradokizunak

Mugikorreko formularioen arazo ohikoenak

Arazoa: Testua txikiegia da

eragin: Pixelen tamainak eskalatzen ez ziren finkoak

Irtenbidea: Erabili unitate erlatiboak (em, rem) edo gutxienez 16px

Arazoa: Eremuak estuegiak dira

eragin: Zabalera finkoko edukiontziak

Irtenbidea: Erabili ehuneko zabalerak (% 100 mugikorrean)

Arazoa: Teklatuaren estalkiak inprimatzen dira

eragin: Ez dago korritze doikuntzarik teklatua agertzen denean

Irtenbidea: Ziurtatu fokatutako eremua ikusgai agertzen dela

Arazoa: Zooma sarrerako fokuan (iOS)

eragin: 16px-tik beherako letra-tamaina sarreretan

Irtenbidea: Ezarri sarrerako letra-tamaina gutxienez 16px-ra

Arazoa: Goitibeherako menuak erabiltzeko zailak

eragin: Goitibeherako pertsonalizatuak ez daude ukipen-optimizatuta

Irtenbidea: Erabili jatorrizko elementu hautatuak edo ukipen-aplikazio errazak

Arazoa: Bidali botoia pantailatik kanpo

eragin: Aurrerapen ikusgarririk gabeko formulario luzeak

Irtenbidea: Bidali botoia itsaskorra edo korritze garbiaren adierazleak

Mugikorrentzako Ezaugarri Espezifikoak

Deitzeko klik egiteko telefono estekak

Baieztapenetan agertzen diren telefono zenbakiak ukitu ahal izateko moduan egon behar dira:

• Loturak tel: protokoloarekin
• Ukitu bakarra deitzeko

Kokapenaren detekzioa

Helbide-eremuetarako:

• Uneko kokapena erabiltzeko aukera
• Bete automatikoki hiria/eskualdea

Kameraren integrazioa

Fitxategiak igotzeko:

• Kamera zuzenean sartzeko aukera
• Argazki liburutegirako sarbidea
• Dokumentuen eskaneatzea

Ukitu Keinuak

Mugikorren arteko elkarrekintza natiboak:

• Irristatu inprimakiaren urratsen artean
• Tira freskatzeko
• Pixka bat handitu zooma egiteko (beharrezkoa bada)

Mugikorreko errendimendua

Zergatik den abiadura garrantzitsuagoa mugikorrean

• Mugikorreko konexioak askotan motelagoak dira
• Datuen mugak erabiltzaile batzuentzat
• Pazientzia gutxiago mugikorrean
• Bateriaren kontsumoaren inguruko gogoetak

Inprimakiaren errendimendu aholkuak

Txikitu formularioaren pisua

• Inprimaki arinak dituzten pluginak
• CSS/JavaScript minimoa
• Aktiboak optimizatuta

Karga alferra posible denean

• Kargatu formularioaren elementuak behar den moduan
• Ez kargatu ezkutuko baldintzapeko eremuak aldez aurretik

Irudien optimizazioa

• Konprimatu edozein irudi formularioetan
• Erabili formatu egokiak (WebP)
• Irudi-tamaina erantzunkorrak

Auto Form Builder-en mugikorrerako ikuspegia

Inprimaki-sortzaile automatikoa mugikorretarako eraikita dago lehenik:

Berez erantzunkorra

• Inprimaki guztiak automatikoki erantzuten dute
• Ez da konfigurazio berezirik behar
• Edozein pantaila-tamainara egokitzen da

Ukipen-eremu optimizatuak

• Tamaina egokiko ukipen-helburuak
• Mugikorreko sarrera natiboak
• Ukipen bidezko data/ordu hautatzaileak

Mugikorrerako lehen estiloa

• Pilaketa diseinua pantaila txikietan
• Mugikorreko zabalera osoko eremuak
• Irakurgarriak diren letra-tamainak

Errendimendu arina

• JavaScript aztarna minimoa
• Inprimakiak azkar kargatzen
• Sare mugikorretarako optimizatua

Kontrol-zerrenda: Zure formularioa mugikorretarako prest al dago?

Maketazioa

• ☐ Zutabe bakarra mugikorrean
• ☐ Ez dago korritze horizontalik
• ☐ Zabalera osoko eremuak
• ☐ Elementuen arteko tarte egokia

Tipografía

• ☐ Etiketak zoomik gabe irakurgarriak (14px+)
• ☐ Gutxienez 16px-ko testua idatzi
• ☐ Kontraste-erlazio onak

Elkarrekintzak

• ☐ Ukipen-helburuak 44px gutxienez
• ☐ Teklatu mota zuzenak
• ☐ Goitibeherako hautaketa erraza
• ☐ Sakatu daitezkeen kontrol-laukiak/irratiak

Funtzionaltasuna

• ☐ Inprimakia behar bezala bidali da
• ☐ Errore mezuak ikusgai
• ☐ Arrakasta-mezua bistaratzen da
• ☐ Fitxategien igoerak funtzionatzen du

Performance

• ☐ 3G-n azkar kargatzen da
• ☐ Blokeatzeko gidoirik ez
• ☐ Datuen erabilera minimoa

Galdera arruntak

Zergatik handitzen dira nire formularioak iOS-en eremu bat sakatzean?

iOS-ek automatikoki handitzen du sarrerako letra-tamaina 16px baino txikiagoa denean. Ezarri sarrerako letra-tamaina gutxienez 16px-tan hori ekiditeko.

Mugikorrerako eta mahaigainerako inprimaki bereiziak sortu behar ditut?

Ez — diseinu moldagarriak biak kudeatzen ditu. Ondo diseinatutako formulario moldagarri batek gailu guztietan funtzionatzen du. Formulario bereiziak mantentzeak zure lana bikoizten du eta inkoherentziak izateko arriskua sortzen du.

Nola probatu dezaket nireak ez diren gailuetan?

Erabili nabigatzailearen garatzaileen tresnak oinarrizko probak egiteko. Proba sakonak egiteko, erabili BrowserStack bezalako lineako zerbitzuak, edo galdetu lagunei/lankideei gailu desberdinak dituztenei.

Mugikorreko erabiltzaileek benetan betetzen al dituzte formularioak?

Bai! Merkataritza mugikorra eta lead-en sorrera izugarriak dira. Erabiltzaileek mugikorrean zereginak burutzea espero dute. Zure formularioak ondo funtzionatzen badute, erabiliko dituzte.

Zein da mugikorreko formularioen hobekuntzarik garrantzitsuena?

Ukipen-helburuen tamaina egokia. Erabiltzaileek ezin badituzte eremuak eta botoiak zehatz-mehatz sakatu, ez dago beste ezer axolarik. Ziurtatu elementu interaktibo guztiak gutxienez 44 × 44 pixel direla.

Laburpena

Inprimakiak mugikorretarako egokituta egitea:

1. Ulertu apustuak. – Trafikoaren % 60 baino gehiago mugikorra da
2. Erabili diseinu sentikorra – Zabalera fluidoak, diseinu pilatua
3. Ukimenerako tamaina. – Gutxienez 44px-ko ukipen helburuak
4. Irakurgarritasuna ziurtatu – Gutxienez 16px-ko sarrerako testua
5. Eskuineko teklatuak abiarazi – Sarrera mota egokiak erabili
6. Probatu benetako gailuetan – Ez erabili simulagailuak bakarrik
7. Aukeratu erantzun-tresnak – Hasi mugikorretarako prestatutako formulario-sortzaileekin

Ondorioa

Mugikorrerako erantzun-formularioak ez dira aukerakoak, ezinbestekoak baizik. Web trafiko gehiena gailu mugikorretatik datorrenez, telefonoetan funtzionatzen ez duten formularioek egunero galtzen dizkizute lead-ak, bezeroak eta ospea.

Inprimaki-sortzaile automatikoa automatikoki sortzen ditu mugikorretarako egokitutako formularioak. Formulario guztiak pantailaren tamainara egokitzen dira, ukipen-elementu egokiak erabiltzen dituzte eta sare mugikorretan ondo funtzionatzen dute. Ez da konfiguraziorik behar: sortu zure formularioa, eta nonahi funtzionatuko du.

Prest mugikorretarako egokitutako formularioetarako? Deskargatu Auto Form Builder eta eman zure mugikorreko bisitariei merezi duten esperientzia.