5 sfaturi pentru proiectarea de formulare mobile prietenoase

Formularele de contact sunt o componentă cheie a multor site-uri web. Deși sunt de obicei simple în funcționalitate, trebuie totuși 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 pe desktop, dar utilizarea formularelor poate deveni dificilă dacă sunteți pe un dispozitiv mobil.

În acest articol, vom vorbi puțin despre importanța proiectării de formulare prietenoase pentru dispozitive mobile. Apoi, vă vom prezenta cinci sfaturi pentru a ne asigura că formularele dvs. funcționează frumos pe dispozitivele mobile.

Sa trecem la treaba!

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

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

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

Cu toate acestea, formularele pot fi folosite pentru toate tipurile de alte scopuri. De exemplu, vă recomandăm să colectați informații folosind un sondaj online sau un test, caz în care veți avea nevoie de formulare pentru ca utilizatorii să introducă răspunsurile.

Cu alte cuvinte, formularele sunt foarte versatile și aproape fiecare site folosește formularele într-un fel sau altul. Prin urmare, este crucial să vă asigurați că formularele dvs. sunt 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 simplă. Aveți un mouse și o tastatură completă, 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 telefonul smartphone sau de pe un alt dispozitiv cu factor de formă mic oferă complicații.

Când lucrați cu degetele pe un ecran mic, interacțiunea cu formularele poate fi uneori dureroasă din cauza deciziilor slabe de proiectare. Acest lucru trebuie evitat în propriile modele. La urma urmei, dacă utilizatorii de telefonie mobilă nu pot interacționa cu formularele dvs., este posibil să pierdeți conversiile, clienții potențiali sau să deranjați total vizitatorii.

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

5 sfaturi pentru a proiecta formulare mobile prietenoase

Din fericire, proiectarea de formulare mobile prietenoase nu este atât de dificilă pe cât ți-ai putea imagina. În majoritatea cazurilor, este suficient să aveți în vedere câteva elemente fundamentale și să vă testați complet formularele înainte de a fi difuzate. Să vorbim despre cum să o faci!

1. Eliminați orice secțiuni inutile

Cu cât includ mai multe câmpuri în formularele dvs., cu atât vor fi mai dificil de utilizat pe mobil. Asta pentru că, oricât de bine concepute ar fi, utilizarea formularelor pe mobil este pur și simplu mai complicată. Prin reducerea numărului de câmpuri sau secțiuni pe care le includ formularele dvs., vă puteți maximiza șansele ca vizitatorii să le completeze.

Iată un exemplu rapid de formular de contact cu câteva câmpuri suplimentare de care ar putea lipsi:

În majoritatea cazurilor, tot ce aveți nevoie pentru un formular de contact excelent este un nume, un e-mail și corpul mesajului pe care doriți să îl primiți. Orice altceva depinde de ce fel de site web rulezi și dacă încerci să colectezi clienți potențiali.

În cele din urmă, cu cât câmpurile dvs. includ mai puține câmpuri, 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ă, chiar dacă este bine concepută, așa că doriți să reduceți la minimum numărul de „salturi” pe care trebuie să le facă utilizatorii.

Scopul dvs. în această etapă este să aruncați o privire asupra formularelor existente ale site-ului dvs. Treceți în revistă fiecare dintre secțiunile lor și luați în considerare dacă într-adevăr aveți nevoie de câmpuri suplimentare dincolo de cele menționate anterior. Dacă există un câmp de prisos, pur și simplu tăiați-l.

2. Utilizați liste drop-down când este posibil

Cei mai mulți dintre noi sunt confortabili tastând pe dispozitive mobile și folosind ecranele tactile. Cu toate acestea, trimiterea de mesaje text unui prieten și completarea unui formular de contact sunt două experiențe foarte diferite. Cu acesta din urmă, este posibil să fiți frustrat dacă trebuie să tastați multe informații.

Una dintre modalitățile prin care vă puteți ușura viața vizitatorului mobil este simplificarea alegerilor pe care trebuie să le facă cu privire la elementele site-ului dvs. Pentru a vă face o idee despre ce vorbim, haideți să ne bazăm pe exemplul nostru de rezervare la restaurantul anterior:

Pentru a face o rezervare, probabil că va trebui să lăsați un nume, un e-mail, un telefon și să indicați ora, precum și câte persoane vor participa. Există două moduri în care puteți crea un câmp de formular pentru a valida timpul de rezervare:

1. Configurați un câmp care acceptă doar intrări numerice.
2. Creați o listă drop-down care include toate orele disponibile pentru o rezervare.

După cum v-ați putea imagina, acesta din urmă este mai ușor de utilizat pentru utilizatorii de telefonie mobilă. Cu această abordare, nu vor trebui 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ă aruncați o privire asupra formularelor 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 meniurile derulante pentru a colecta nume sau e-mailuri, dar există și alte opțiuni în care ar putea funcționa.

Indiferent care este cazul lor de utilizare, doriți să vă asigurați că meniurile derulante includ opțiuni care sunt 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ă picteze 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 totuși merită menționat. Fiecare formular pe care îl proiectați va trebui să includă o modalitate prin care utilizatorii pot confirma că vor să trimită datele pe care le-au introdus. În majoritatea cazurilor, aceasta înseamnă crearea unui buton de trimitere:

Când folosiți un computer obișnuit, faceți clic pe un buton de trimitere este cel mai natural lucru din lume. Cu toate acestea, am întâlnit câteva forme pe mobil, în cazul în care apăsarea unui buton este mult mai dificilă decât ar trebui să fie.

Dacă vizitatorii dvs. nu pot trimite informațiile pe care le-au introdus în formularele dvs., toate eforturile dvs. vor fi degeaba. În plus, nimic nu arată la fel de neprofesionist ca un buton de trimitere care nu funcționează conform intenției.

Pentru a proiecta butoane de trimitere mai bune pentru mobil, iată trei sfaturi rapide pe care trebuie să le aveți în vedere:

1. Asigurați-vă că sunt suficient de mari pentru a apăsa cu ușurință atunci când utilizați un dispozitiv mobil.
2. Nu amplasați butoanele prea aproape de alte elemente, astfel încât utilizatorii să nu-l lovească pe cel greșit.
3. Evidențiați butoanele într-un fel, cum ar fi utilizarea culorilor contrastante sau a tipografiei creative.

În afară de toate acestea, veți dori, de asemenea, să vă testați butoanele cu atenție înainte ca site-ul dvs. să devină live. Vom analiza mai în detaliu despre cum să procedăm într-un minut. Deocamdată, să vorbim despre performanță.

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

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

Odată cu viteza internetului mai rapidă, așteptarea prea lungă pentru încărcarea unui site web poate fi o treabă. Î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ă mențineți acei utilizatori fericiți, deoarece nu toți vor avea acces la internet adecvat (adică rapid).

Acest sfat special se poate aplica întregului site web în general, 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, veți pierde oportunitățile și oportunitățile de a stabili contactul cu vizitatorii dvs. De regulă, un site web nu ar trebui să dureze mai mult de două secunde pentru încărcare. Odată ce treceți de această linie, ratele de respingere tind să crească dramatic, ceea ce este o veste teribilă pentru dvs.

Având în vedere natura navigării pe dispozitive mobile, reducerea acestui timp cât mai mult posibil este un avantaj. Având în vedere acest lucru, există o mulțime de modalități prin care puteți crește performanța generală a site-ului dvs. De exemplu, puteți trece la un plan de găzduire mai bun, puteți utiliza o temă receptivă optimizată pentru viteză și vă puteți comprima imaginile. Desigur, acestea vor ajuta toți utilizatorii, dar vor fi de un beneficiu deosebit pentru cei care utilizează dispozitive mai mici.

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

Având în vedere că formularele sunt un astfel de element cheie pentru majoritatea site-urilor web, este de la sine înțeles că ar trebui să le testați cu atenție înainte de a le publica. Cu WordPress, acest proces este suficient 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, pluginul sau tema 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, în ceea ce privește faza de testare, vă recomandăm să păstrați lucrurile simple și să utilizați ceva cum ar fi Chrome Dev Tools pentru a face treaba.

Să trecem peste un exemplu rapid. Dacă utilizați Chrome, continuați și previzualizați pagina care include formularul pe care doriți să-l testați. Apoi, faceți clic dreapta oriunde pe pagina respectivă și alegeți opțiunea Inspectați . Chrome vă va arăta un set de instrumente pe care le puteți utiliza pentru a examina și edita codul sursă al paginii la dreapta și la stânga, puteți vedea o previzualizare a modului în care ar arăta de pe un dispozitiv mobil:

În partea de sus a ecranului, există un meniu pe care îl puteți utiliza 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. Luați exemplul de mai jos - formularul funcționează perfect, dar puteți vedea că nu scară la fel de bine cum ar trebui. Acordați o atenție deosebită textului și pictogramelor în special, care sunt prea aproape de marginea ecranului:

O modalitate de a preveni această problemă este să vă simplificați formularele, așa cum am subliniat în timpul primului 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 ar trebui să se potrivească perfect pe fiecare dispozitiv:

Dacă întâmpinați probleme cu oricare dintre formularele dvs., ar trebui să le remediați imediat. În caz contrar, riscați să vă înstrăinați publicul mobil, ceea ce încercăm să evităm în primul rând!

Concluzie

Asigurarea că site-ul dvs. este compatibil cu dispozitivele mobile este esențială pentru menținerea traficului și pentru a nu vă frustra vizitatorii. Mai exact, formularele dvs. trebuie 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 de formulare compatibile cu dispozitivele mobile, iată cinci sfaturi rapide pentru a vă ușura viața:

1. Eliminați toate secțiunile inutile.
2. Utilizați liste derulante atunci când este posibil.
3. Asigurați-vă că butoanele de trimitere sunt ușor de apăsat.
4. Asigurați-vă că formularele dvs. se încarcă rapid.
5. Testați-vă formularele înainte de a le publica.

Aveți întrebări despre cum să creați formulare compatibile cu dispozitivele mobile folosind Divi? Întrebați în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de Irina Adamovich / shutterstock.com.