Formularele de contact sunt o componentă cheie a multor site-uri web. Deși sunt, în general, simple, trebuie să vă asigurați că sunt ușor de utilizat dacă doriți să colectați clienți potențiali și să rămâneți în legătură cu utilizatorii dvs. De obicei, aceasta nu este o problemă cu traficul de birou, dar utilizarea formularelor poate fi dificilă dacă utilizați un dispozitiv mobil.

În acest tutorial, vom vorbi puțin despre importanța proiectării de formulare adaptate la dispozitive mobile. Apoi, vă vom prezenta cinci sfaturi pentru a ne asigura că formularele dvs. funcționează fără probleme pe dispozitivele mobile.

Să mergem la treabă!

De ce este important ca formularele dvs. să fie prietenoase cu dispozitivele mobile

Formele sunt de toate formele și dimensiunile. Cel mai adesea, veți avea de-a face cu formulare de contact:

exemplu de formular de contact.png

Formularele de înscriere (abonament) sunt, de asemenea, foarte populare, deoarece vă permit să colectați e-mailuri și să le vizați în timpul campaniilor:

vizați e-mailurile în timpul campaniilor

Cu toate acestea, formularele pot fi folosite pentru toate tipurile de alte scopuri. De exemplu, puteți colecta informații folosind un sondaj online sau un chestionar , caz în care veți avea nevoie de formulare care să permită utilizatorilor să introducă răspunsuri.

Cu alte cuvinte, formularele sunt foarte versatile și aproape toate site-urile folosesc formulare într-un fel sau altul. Prin urmare, este esențial ca formularele dvs. să fie ușor de utilizat (cu excepția cazului în care doriți să oferiți o experiență frustrantă vizitatorilor dvs.).

Utilizarea formularelor de pe un computer desktop sau laptop este de obicei foarte ușoară. Aveți mouse-ul și tastatura complete, astfel încât selectarea câmpului pe care doriți să îl utilizați și introducerea datelor nu ar trebui să fie o problemă. Cu toate acestea, navigarea pe web de pe smartphone sau alt dispozitiv compact are complicații.

Când lucrați cu degetele pe un ecran mic, interacțiunea cu formularele poate fi uneori copleșitoare din cauza deciziilor de design slabe. Acest lucru trebuie evitat în propriile modele. La urma urmei, dacă utilizatorii de telefonie mobilă nu pot interacționa cu formularele dvs., riscați să pierdeți conversii, clienți potențiali sau doar să deranjați vizitatorii.

De asemenea, este esențial să înțelegem că traficul mobil este acum, dacă nu chiar mai important, decât sursele desktop. De fapt, traficul mobil a depășit-o deja pe ultimul în ultimii ani. Aceasta înseamnă că proiectarea unui site web prietenos pentru mobil ar trebui să fie obiectivul dvs. principal atunci când începeți un nou proiect.

Sfaturi 5 pentru proiectarea de formulare mobile ușor de utilizat

Din fericire, proiectarea de formulare compatibile cu dispozitivele mobile nu este atât de dificilă pe cât ți-ai putea imagina. În majoritatea cazurilor, trebuie doar să țineți cont de câteva elemente fundamentale și să vă testați formularele cu atenție înainte de a le utiliza. Să vorbim despre cum să o faci!

1. Ștergeți toate secțiunile inutile

Cu cât mai multe câmpuri conține formularul dvs., cu atât va fi mai dificil de utilizat pe mobil. Într-adevăr, utilizarea formularelor pe mobil este pur și simplu mai complicată. Prin reducerea numărului de câmpuri sau secțiuni incluse în formularele dvs., puteți maximiza șansele ca vizitatorii să le completeze.

Iată un exemplu rapid de a formular de contact cu câteva câmpuri suplimentare care nu sunt necesare pe mobil:

câmpuri care nu sunt necesare pe mobil.png

În cele mai multe cazuri, tot ce aveți nevoie pentru un mare formular de contact este un nume, e-mail și corpul mesajului pe care doriți să-l primiți. Orice altceva depinde de tipul de site web pe care îl utilizați și de dacă încercați să colectați clienți potențiali.

În cele din urmă, cu cât are mai puține câmpuri formularul, cu atât le va fi mai ușor vizitatorilor să le folosească. La urma urmei, selectarea unui câmp folosind un ecran tactil poate fi dificilă, indiferent cât de bine proiectată, pentru a reduce la minimum numărul de hamei pe care trebuie să îl facă utilizatorii.

Obiectivul dvs. în acest moment este să examinați formularele existente pe site-ul dvs. Parcurgeți fiecare dintre secțiunile lor și stabiliți dacă aveți nevoie de câmpuri suplimentare, altele decât cele menționate anterior. Dacă există un câmp inutil, ștergeți-l.

2. Utilizați listele derulante, dacă este posibil

Majoritatea dintre noi se simt confortabil să tasteze pe dispozitive mobile și să utilizeze ecrane tactile. Cu toate acestea, trimiteți mesaje unui prieten și completați a formular de contact sunt două experiențe foarte diferite. Cu acestea, există șanse mari să fiți frustrat dacă trebuie să introduceți o mulțime de informații.

O modalitate de a face viața mai ușoară pentru vizitatorul dvs. mobil este de a simplifica alegerile pe care le trebuie să le facă cu privire la elementele site-ului dvs. Pentru a vă face o idee despre ce vorbim, să profităm de exemplul nostru anterior rezervare restaurant:

faceți o rezervare.png

Pentru a face o rezervare, probabil că va trebui să lăsați un nume, e-mail, telefon  et  indicați o oră, precum și numărul de persoane prezente. Există două moduri prin care puteți crea un câmp de formular pentru a valida un moment al zilei. rezervare:

  1. Configurați un câmp care acceptă doar intrări numerice.
  2. Creează o listă derulantă, inclusiv toate orele disponibile pentru o rezervare.

După cum vă puteți imagina, acesta din urmă este mai ușor de utilizat pentru utilizatorii de telefonie mobilă. Cu această abordare, nu trebuie să introducă numere și pot alege doar ceea ce le funcționează cel mai bine din opțiunile pe care le includeți.

Ideea ca dvs. să vă uitați la formularele dvs. și să vedeți dacă acestea includ câmpuri pe care le-ați putea înlocui cu meniuri derulante. Acest lucru nu va fi întotdeauna cazul, deoarece nu puteți utiliza meniuri derulante pentru a colecta nume sau e-mailuri, dar pot fi utilizate și alte opțiuni.

Indiferent de cazurile lor de utilizare, doriți să vă asigurați că meniurile derulante includ opțiuni ușor de selectat de pe dispozitivele mobile. Cu alte cuvinte, faceți meniul suficient de mare încât cineva să nu fie nevoit să ciocnească pentru a alege opțiunea potrivită.

3. Asigurați-vă că butoanele de trimitere sunt ușor de atins

Acest sfat este destul de simplu, dar încă de menționat. Fiecare formular pe care îl proiectați ar trebui să includă o modalitate prin care utilizatorii pot confirma că doresc să trimită datele introduse. În majoritatea cazurilor, asta înseamnă crearea unui buton de trimitere:

creați un buton de trimitere.png

Când folosiți un computer obișnuit, faceți clic pe un buton de trimitere este cel mai firesc lucru din lume. Cu toate acestea, am întâlnit câteva forme pe mobil, unde este mult mai greu să apăsați un buton.

Dacă vizitatorii dvs. nu pot trimite informațiile pe care le-au introdus în formularele dvs., toate eforturile dvs. vor fi irosite. În plus, nimic nu arată la fel de neprofesionist ca un buton Trimite  asta nu funcționează așa cum era de așteptat.

Pentru a crea butoane de trimitere mai bune pentru dispozitivele mobile, iată trei sfaturi de luat în considerare:

  1. Asigurați-vă că sunt suficient de mari încât să puteți atinge cu ușurință un dispozitiv mobil.
  2. Nu așezați butoanele prea aproape de alte elemente, astfel încât utilizatorii să nu le atingă corect.
  3. Evidențiați butoanele, de exemplu folosind culori contrastante sau tipografie creativă.

Pe lângă toate acestea, veți dori, de asemenea, să vă testați butoanele înainte ca site-ul dvs. să fie difuzat. Vom analiza mai detaliat modul de a face acest lucru într-un minut. Deocamdată, să vorbim despre performanță.

4. Asigurați-vă că formularele se încarcă rapid

Vorbim multe despre performanța site-ului web în multe dintre articolele noastre și nu pentru că avem nevoie de viteză. Ideea este că majorității oamenilor nu le plac site-urile web lente, ceea ce are un sens perfect.

Cu viteza internetului mai rapidă, poate fi dificil să așteptați încărcarea prea lungă a unui site web. În plus, viteza internetului mobil tinde să varieze mult mai mult decât conexiunile obișnuite la domiciliu. Aceasta înseamnă că site-ul dvs. web va trebui să fie extrem de optimizat pentru dispozitivele mobile, dacă doriți să păstrați acești utilizatori fericiți, deoarece nu toți vor avea acces la internet (adică rapid).

Acest sfat se poate aplica întregului site web, dar este important și pentru paginile mobile care afișează formularele dvs. Dacă aceste părți ale site-ului dvs. durează prea mult timp pentru încărcare, voi pierd conversii și oportunități de conectare cu vizitatorii.

De obicei, un site web nu trebuie să dureze mai mult de două secunde pentru încărcare. Odată ce ați depășit această limită, ratele de respingere tind să crească dramatic, ceea ce este o veste teribilă pentru dvs. și având în vedere natura navigării mobile, este mai bine să păstrați acest timp cât mai scăzut posibil. .

Având în vedere acest lucru, există multe modalități de a îmbunătăți performanța generală a site-ului dvs. De exemplu, puteți face upgrade la un plan mai buncazare, utilizați o temă receptivă optimizată pentru viteză și comprimați imaginile. Desigur, acestea vor ajuta toți utilizatorii, dar vor fi deosebit de utile pentru cei care utilizează dispozitive mai mici.

5. Testați-vă formularele înainte de a le publica

Având în vedere că formularele sunt o parte esențială a majorității site-urilor web, este logic să le testați temeinic înainte de a le publica. Cu WordPress, acest proces este destul de simplu. Puteți continua și proiecta pagini specifice pentru a afișa formularele și nu le publicați până nu le-ați testat complet.

Desigur, orice plugin sau temă pe care doriți să o utilizați depinde de dvs. (atâta timp cât vă poate ajuta să dezvoltați site-uri mobile). Cu toate acestea, când vine vorba de faza de testare, vă recomandăm să o păstrați simplă și să utilizați instrumente precum OUTILS de dezvoltare Chrome pentru a face munca.

Să trecem printr-un exemplu rapid. Dacă utilizați Chrome, continuați și previzualizați pagina cu formularul pe care doriți să-l testați. Apoi faceți clic dreapta oriunde pe această pagină și alegeți opțiunea inspecta . Chrome va afișa un set de instrumente pe care le puteți utiliza pentru a revizui și edita codul sursă al paginii în dreapta și în stânga, puteți vedea o previzualizare a aspectului acesteia de pe un dispozitiv mobil:

O imagine de ansamblu a instrumentelor de dezvoltare Chrome.

În partea de sus a ecranului, puteți utiliza un meniu pentru a comuta între diferite rezoluții. Chrome include setări pentru mai multe dispozitive mobile populare, dar puteți introduce și o rezoluție personalizată.

În acest moment, ar trebui să verificați aspectul și comportamentul formularului dvs. de contact pe mai multe dispozitive. Să luăm exemplul de mai jos - formularul funcționează bine, dar puteți vedea că nu se potrivește la fel de bine cum ar trebui. Acordați o atenție specială textului și pictogramelor în special, care sunt prea aproape de marginea ecranului:

formular pentru mobil.png

O modalitate de a preveni această problemă este să vă păstrați formularele simple, așa cum am menționat în primul sfat. În exemplul de mai jos, formularul folosește mai multe liste derulante și necesită doar trei câmpuri. Acest lucru îl face ușor de utilizat și, mai important, formularul este atât de simplu încât trebuie să fie potrivit pentru toate dispozitivele:

Un exemplu de formă fără probleme de scalare.

Dacă aveți probleme cu oricare dintre formularele dvs., trebuie să le rezolvați imediat. În caz contrar, riscați să vă înstrăinați publicul mobil, pe care încercăm să îl evităm mai întâi!

Concluzie

Asigurarea faptului că site-ul dvs. web este compatibil cu dispozitivele mobile este esențială pentru păstrarea traficului și pentru a nu vă frustra vizitatorii. Mai exact, formularele dvs. ar trebui să fie ușor de utilizat pe dispozitivele mobile dacă nu doriți să pierdeți primirea mesajelor sau colectarea clienților potențiali valoroși.

Când vine vorba de proiectarea formelor compatibile cu dispozitivele mobile, iată cinci sfaturi pentru a vă simplifica viața:

  1. Ștergeți toate secțiunile inutile.
  2. Utilizați listele derulante, dacă este posibil.
  3. Asigurați-vă că butoanele de trimitere sunt ușor de apăsat.
  4. Asigurați-vă că formularele se încarcă rapid.
  5. Testați-vă formularele înainte de a le publica.