Un ghid pentru începători pentru conversia utilizatorilor de dispozitive mobile

Gândiți-vă la o perioadă în care erați în tren, stând în aeroport sau pur și simplu întins pe canapea și a trebuit să completați un formular online pe smartphone. Ați acordat vreodată atenție designului formularului mobil?

Sunt șanse să nu fi observat. Acesta este scopul — de a oferi utilizatorilor o experiență intuitivă care să îi facă să completeze fără probleme formularul și să își continue ziua.

În acest ghid, vom analiza cele mai eficiente modalități de a face exact acest lucru. Aici, veți învăța cum să proiectați formulare mobile care să nu fie greoaie sau nealiniate, dar care ajută la creșterea conversiilor și la crearea unei experiențe excelente pentru utilizator.

Cuprins

Design de formulare mobile vs. desktop

Astăzi, vizitatorii site-ului dvs. nu doar navighează pe site-ul dvs., vă văd conținutul și vă completează formularele de pe computerele lor desktop. De asemenea, ei îndeplinesc aceste sarcini de pe dispozitivele lor mobile.

Mobilul a fost responsabil pentru aproape 60% din traficul global de site-uri web din aprilie până în iunie 2022. Aceasta înseamnă că este esențial ca formularul dvs. să fie ușor de examinat, completat și trimis prin intermediul unui dispozitiv mobil.

De ce este important designul formularelor mobile?

Cel mai bun design de formular mobil permite o experiență pozitivă a utilizatorului, ceea ce asigură un vizitator al site-ului web fericit, care are mai multe șanse să se transforme în client și să devină un utilizator care revine.

Designul, aspectul și funcționalitatea formularelor dvs. mobile joacă un rol important în experiența generală a utilizatorului site-ului dvs.

Dacă formularele dvs. nu sunt adecvate pentru dispozitive mobile, este posibil să aveți mai puține conversii, o pierdere a traficului pe site-ul mobil și o creștere a numărului de clienți nemulțumiți și frustrați. Și cine vrea asta?

De ce ar trebui designul formularelor mobile să difere de designul desktopului?

„Totul funcționează diferit pe mobil, așa că specialiștii în marketing trebuie să se asigure că orice elemente ale site-urilor lor sunt întotdeauna optimizate pentru mobil”, spune Lilach Bullock, un influencer și strateg de marketing premiat.

„Și asta, desigur, include formulare – mai ales că se simte că trebuie să completezi în mod constant formularele pe mobil.”

Mai exact, gândiți-vă la diferența de afișare sau dimensiunea ecranului dintre un dispozitiv mobil, cum ar fi un iPhone Apple, care variază de obicei între 4,7″ și 6,7″; și un laptop sau desktop Mac, care variază de obicei între 13” și 24” în dimensiune. Este sigur să presupunem că o formă care se potrivește unui ecran iPhone nu s-ar potrivi perfect cu un ecran de desktop.

Dacă vizitatorii dvs. de pe mobil nu pot citi, completa și trimite formularul cu ușurință, este posibil să le pierdeți afacerea. Prin urmare, crearea unui formular adaptat pentru dispozitivele mobile care se potrivește cu ecranul oricărui dispozitiv mobil este crucială pentru a crea o experiență excelentă pentru utilizator, pentru a lăsa o impresie de durată asupra vizitatorilor și pentru a vă ajuta să creșteți conversiile.

Ce este responsive web design?

Dacă doriți să faceți un pas mai departe designul formelor mobile și să vă asigurați că întregul site web este funcțional pe toate tipurile de dispozitive, puteți implementa un design de site web receptiv.

Designul web receptiv ia în considerare dimensiunea ecranului utilizatorului, platforma, orientarea și mediul. Aceasta este o modalitate simplă și eficientă de a crea o experiență excelentă pentru utilizator, deoarece atât de mulți oameni vizitează și navighează în mod constant diferite site-uri web pe diferite dispozitive.

Există mai multe moduri prin care vă puteți asigura că site-ul dvs. are un design receptiv. De exemplu, dacă sunteți utilizator WordPress, există mai multe teme WordPress receptive pe care le puteți instala și utiliza pentru a vă proiecta site-ul.

În plus, dacă construiți sau ați construit site-ul dvs. cu software precum Squarespace, site-ul dvs. poate veni automat cu design web responsive.

Astăzi, designul web responsive este o alegere populară pentru companii datorită numărului mare de persoane care vizitează site-uri web prin intermediul unei varietăți de dispozitive mobile diferite. Dar, deocamdată, să revenim la discutarea despre designul formularelor mobile.

Design formular mobil: 11 linii directoare UX

„Când vă proiectați formularele mobile”, explică Bullock, „este important să păstrați lucrurile simple și să le faceți cât mai rapid posibil. [Formularele] sunt mai greu de completat pe mobil și totul pare că durează mai mult decât ar trebui.”

Cu alte cuvinte, cel mai important lucru este simplitatea pentru utilizatorul final. Când creați un formular adaptat pentru dispozitive mobile, există câțiva pași pe care doriți să-i faceți pentru a oferi cea mai bună experiență de utilizator posibilă pentru vizitatorii dvs. Să trecem în revistă 11 dintre aceste cele mai bune practici de proiectare a formularelor mobile pe care le puteți începe azi.

1. Minimizați numărul de câmpuri de formular.

Ai auzit vreodată zicala „mai puțin este mai mult”? Ei bine, exact la asta ar trebui să vă gândiți când vă creați formularul mobil.

Între dimensiunea ecranului unui dispozitiv mobil și cantitatea de conținut pe care trebuie să o plasați în formularul dvs., este ușor să faceți accidental să vă simțiți aglomerat formularul. Nu uitați să îndepărtați pufurile inutile. Păstrați câmpurile formularului numai pentru informațiile de care aveți absolut nevoie .

Pentru a simplifica procesul, veți dori, de asemenea, să etichetați câmpurile formularului în mod clar și succint și să marcați câmpurile opționale ca „opționale” sau să includeți un asterisc lângă cele obligatorii.

Sursa imaginii

Scopul este de a face formularul cât mai ușor de completat, astfel încât șansele ca persoanele să completeze formularul să crească.

2. Automatizați intrările atunci când este posibil.

Dacă introduceți greșit adresa dvs. stradală și formularul corectează ortografia pentru dvs., formularul vă corectează automat răspunsul.

Dacă începeți să introduceți adresa dvs. de expediere și apare o casetă cu restul adresei dvs. care vă întreabă dacă doriți să „compleți automat” restul câmpurilor din formular cu adresa salvată, atunci formularul completează automat răspunsul dvs.

Prin implementarea funcțiilor de corectare automată și completare automată pe formularele dvs. mobile, veți îmbunătăți experiența utilizatorului, făcându-le rapid, simplu și simplu pentru utilizatori să-și introducă detaliile.

În exemplul de mai jos, o persoană își poate completa cu ușurință informațiile făcând clic pe micul pop-up care apare.

Sursa imaginii

3. Utilizați un aspect cu o singură coloană.

Când creați un formular lung sau cu mai mulți pași, enumerați tot conținutul într-un aspect cu o singură coloană.

Sursa imaginii

Aspectele formularelor cu o singură coloană sunt:

A. Mai ușor de citit.

Plasarea tuturor câmpurilor de formular într-un format cu o singură coloană permite vizitatorilor să se concentreze pe un singur articol la un moment dat, făcând formularul mai ușor de citit.

b. Mai puțin descurajantă.

Dacă te uiți la un formular, mai ales într-un spațiu îngust, așa cum ai face pe un dispozitiv mobil, și vezi o cantitate mare de conținut amestecată, te poți simți copleșit. De aceea, separarea conținutului pe rânduri și plasarea câmpurilor de formular într-un format cu o singură coloană face ca conținutul să arate și să se simtă mai puțin intimidant.

c. Mai rapid de finalizat.

Când plasați formularul cu mai mulți pași într-o singură coloană, clienții potențiali îl pot completa mai repede decât ar face-o într-un formular cu mai multe coloane. Acest lucru se datorează faptului că formatul face formularul mai ușor de citit și de prelucrat pas cu pas.

Aruncă o privire la acest formular de înscriere pe site-ul HubSpot atunci când este vizualizat de pe un desktop sau un laptop.

Sursa imaginii

Aspectul pe două coloane are sens aici, deoarece există mult spațiu pe ecranul mai larg pentru a lucra. Acum verificați același formular când este vizualizat de pe un dispozitiv mobil.

Sursa imaginii

Acest aspect cu o singură coloană permite ochiului să curgă natural, prevenind în același timp dezordinea pe ecranul mobil compact.

4. Consecvența contează (la fel și aspectul).

Cum închideți un folder sau o filă deschisă pe laptop?

Făcând clic pe butonul „x” din colțul din dreapta sus.

Dar ce se întâmplă dacă butonul nu a apărut în timpul unei anumite aplicații? Cum te-ai simți când ai merge să închizi fereastra?

Confuz sau iritat, poate. S-ar putea să petreceți un minut sau două pentru a afla cum să închideți aplicația.

Acesta este doar un exemplu larg, dar servește bine pentru a ilustra importanța consecvenței. Urmărește acest videoclip pentru a afla mai multe.

Consecvența în designul formelor se aplică nu doar stilului (culori, tipografie, logo etc.), ci și convențiilor general acceptate cu care oamenii sunt obișnuiți.

Iată câteva sfaturi pentru a asigura o experiență constantă:

• Potriviți aspectul formularului dvs. cu marca și site-ul dvs. web.
• Asigurați-vă că stilul și formatarea formularului dvs. sunt consecvente și complementare (nimic nu ar trebui să arate deranjant sau deplasat).
• Aliniați intrările câmpului formularului la stânga.
• Atașați fiecare etichetă deasupra casetei de intrare corespunzătoare și aliniați-o la stânga.
• Utilizați un asterisc pentru a indica întrebările obligatorii.

Sursa imaginii

Primele impresii lasă o impresie de durată (în viață și în afaceri). Asta este valabil pentru formularele dvs. mobile. Nimeni nu vrea să completeze o formă întunecată, greu de citit, aglomerată și neatractiv.

Formularul dvs. mobil ar trebui să fie extrem de funcțional și plăcut din punct de vedere estetic. Aspectul său ar trebui să contribuie la lizibilitatea și o experiență pozitivă a utilizatorului. Pentru a realiza acest lucru, utilizați un stil și o dimensiune a fontului simplu și ușor de citit, o paletă de culori care nu pare copleșitoare și câmpuri de formular minime.

5. Ține cont de experiența tactilă.

Gândiți-vă la modul în care țineți telefonul în timp ce trimiteți mesaje.

Cel mai probabil, prindeți telefonul cu două mâini în timp ce folosiți degetele mari pentru a interacționa cu ecranul. Sau ați putea chiar să o faceți cu o singură mână sau să tastați folosind degetul arătător.

Interacționăm cu smartphone-urile într-un mod mult diferit decât un laptop sau un desktop (adăugați degetul mare al mesajelor), iar designul formularelor mobile ar trebui să reflecte acest lucru.

Iată câteva sugestii de reținut:

• Aveți spațiu alb adecvat pentru a menține formularul fără dezordine și pentru a evita apăsările accidentale de butoane.
• Asigurați-vă că butoanele sunt poziționate în mod logic (de exemplu, butonul de trimitere din partea de jos a formularului, astfel încât utilizatorii să nu fie nevoiți să deruleze în sus pentru a-l găsi).
• Verificați dacă textul (dimensiunea și stilul fontului) este lizibil pe micul ecran al mobilului (nimeni nu vrea să-și ciupească ecranul și să mărească pentru a putea citi textul).
• Asigurați-vă că câmpurile și butoanele formularului sunt suficient de mari pentru a fi atinse confortabil cu un deget.
• Faceți ca formularul să apară în partea inferioară a ecranului (acolo unde este posibil) pentru a fi ușor de accesat.

Sursa imaginii

6. Utilizați constrângerile de intrare.

Constrângerile de intrare limitează tipul de răspuns pe care o persoană îl poate introduce într-un câmp de formular. Aceasta poate include o limită de cuvinte (să zicem, la completarea unui formular de cerere de angajare) sau posibilitatea de a introduce doar cifre (în cazul unui număr de telefon).

Acest lucru se vede în formularul de mai jos, unde apare o tastatură numerică când o persoană merge să-și introducă numărul de telefon.

Sursa imaginii

Constrângerile de intrare maximizează eficiența formularelor prin limitarea greșelilor, întârzierilor sau confuziei accidentale. De exemplu, dacă cineva a încercat să facă o rezervare pentru o masă la un restaurant și a ales accidental o dată în trecut, constrângerea l-ar împiedica să poată selecta și confirma acea dată.

Acest lucru este crucial în special atunci când proiectați pentru dispozitive mobile, deoarece ecranele mai mici îngreunează introducerea corectă a informațiilor. Prin stabilirea restricțiilor de introducere, veți economisi timp oamenilor în timp ce completează câmpurile formularului și veți împiedica să primiți răspunsuri îndelungate sau nevalide.

Iată un alt exemplu de constrângere de intrare.

Sursa imaginii

7. Creați butoane de acțiune clare.

Butoanele sunt un aspect subestimat al designului formularelor mobile. Gândiți-vă la asta: obțineți o trimitere de formular sau o conversie numai după ce este apăsat butonul din dreapta. Deci chiar nu poți trece cu vederea acest element.

Această foaie de cheat UI și blogul UX Planet sunt resurse excelente pentru proiectarea butoanelor eficiente. Iată o prezentare rapidă a unora dintre principiile menționate pe care le puteți aplica formularelor dvs. mobile.

• Prea multe butoane strică bulionul (la fel ca câmpurile de formular, păstrați doar butoanele esențiale).
• Stilați și etichetați-vă butoanele în mod constant (scriere cu majuscule, formatare, aliniere etc.).
• Lăsați accentul să strălucească pe butonul principal (acțiunea principală pe care doriți să o întreprindă utilizatorul) făcându-l în evidență prin dimensiune sau culoare.
• Dreapta este dreapta — o regulă generală obișnuită pentru dispozitive mobile este poziționarea butonului principal în partea dreaptă și a al doilea în stânga (deși acest lucru poate varia în funcție de nevoile individuale).
• Etichetele specifice sunt aproape întotdeauna răspunsul („Editați această pagină” peste „Editați”).

Sursa imaginii

8. Furnizați scanere de carduri pentru plăți.

Ați încercat să introduceți detaliile cardului dvs. de credit într-un formular prin intermediul smartphone-ului dvs.? Tastarea mai multor numere pe un ecran mic cu o tastatură mică poate fi un proces obositor.

Aplicațiile de scanare a cardurilor, cum ar fi Microblink, au devenit din ce în ce mai populare tocmai din acest motiv. Atunci când fac o achiziție, vizitatorii dvs. pot face clic pe un buton care îi duce la un ecran unde pot folosi camera dispozitivului lor mobil pentru a face o fotografie sigură a părții din față și din spate a cardului lor, indiferent dacă aceasta este licența sau cardul de credit.

Sursa imaginii

Cu doar câteva imagini, clienții potențiali vor fi finalizați cu una dintre părțile cele mai consumatoare de timp ale procesului de completare a formularelor mobile - menținând vizitatorii eficienți, fără frustrare și fără erori.

9. Explicați necesitatea unor informații specifice.

În timp ce completați o înregistrare prin e-mail simplă sau un formular de înregistrare, vi s-a cerut vreodată să furnizați informații personale care nu au nicio legătură cu formularul de înscriere în sine?

Aceasta este o apariție comună în toate tipurile de forme (nu doar mobile). A cere cuiva informații personale sau alte informații sensibile fără a explica nevoia dvs. poate părea incomplet.

Când puneți o întrebare care nu are legătură directă cu motivul pentru care vizitatorul dvs. completează formularul, este esențial să creați o casetă de rezumat (cu informații suplimentare) pe care persoana respectivă să poată face clic pentru a înțelege de ce solicitați aceste informații.

Astfel de indicatori pot ajuta, de asemenea, să ofere îndrumări suplimentare cu privire la completarea unui câmp de formular atunci când instrucțiunile nu sunt imediat evidente. În imaginea de mai jos, o casetă de rezumat apare când o persoană trece cu mouse-ul peste pictogramă.

Sursa imaginii

Aceste mici detalii vor face ca formularul să se simtă profesionist și atent, reducând în același timp șansele ca utilizatorul să plece la jumătate.

10. Adunați validarea și feedback-ul.

Experiența utilizatorului se află în centrul unui design bun al formularelor mobile. Iar validarea și feedback-ul joacă un rol important în furnizarea unui UX excelent.

Validarea le permite oamenilor să știe dacă informațiile pe care le-au introdus sunt corecte (sau nu). Observați bifoanele verzi din câmpurile de formular de mai jos.

Sursa imaginii

În timp ce completează formularele mobile, vizitatorii tăi sunt obligați să facă o greșeală aici sau acolo. Formularul ar trebui să semnaleze aceste erori în timp real, astfel încât utilizatorul să le poată corecta imediat.

De exemplu, dacă cineva adaugă codul poștal incorect lângă adresa sa, formularul mobil ar trebui să afișeze un mesaj de eroare. Aceasta ar trebui să indice – într-un limbaj ușor de înțeles – locația erorii și modul în care persoana o poate remedia (după cum se vede în imaginea de mai jos).

Sursa imaginii

De asemenea, este esențial să oferiți feedback oamenilor pe măsură ce parcurg formularul. De exemplu, o bară de progres pentru formularele lungi, cu mai mulți pași, poate face procesul de completare a formularelor mai captivant, arătând utilizatorilor cât de departe au ajuns și cât timp le mai rămâne pentru a-l completa.

Sursa imaginii

Luați în considerare o persoană care completează formularul de mai sus fără o bară de progres. Ei vor face clic pe butonul „următorul” fără nicio idee despre când se termină formularul și l-ar putea chiar abandona chiar înainte de pasul final de frustrare.

Odată ce oamenii își trimit formularele, ar trebui să îi direcționați către un alt ecran sau pagină care spune ceva de genul „Succes!” sau „Mulțumesc”, ca să știe că trimiterea lor a funcționat.

Iată un exemplu de pagină de succes pe HubSpot care apare după ce un utilizator se înscrie pentru a primi un kit Google Ads gratuit.

Sursa imaginii

11. Faceți formularele accesibile.

Accesibilitatea este fundamentală pentru utilizarea formularului dvs. Formularele concepute având în vedere accesibilitatea pot fi folosite de o gamă mai largă de persoane, inclusiv de cei cu dizabilități vizuale, fizice, senzoriale și cognitive.

Iată câteva recomandări specifice pentru crearea de formulare accesibile din World Wide Web Consortium Web Accessibility Initiative, WebAIM și Lista de verificare a proiectului A11Y).

• Verificați dacă textul nu se pixelează sau devine neclar când măriți formularul (pentru o vizualizare mai bună).
• Etichetați elementele formularului într-un mod care poate fi înțeles clar atunci când este citit de un cititor de ecran.
• Asigurați-vă că formularul este accesibil atât în ​​modul portret, cât și în modul peisaj.
• Evitați utilizarea unui termen limită (dacă este posibil) pentru a oferi oamenilor suficient timp pentru a răspunde.
• Includeți subtitrări sau transcrieri pentru orice componente video sau audio din formularul dvs.
• Tine cont de contrastul de culoare. Iată un instrument gratuit care vă poate ajuta în acest sens.
• Verificați dacă formularul dvs. este complet utilizabil doar cu o tastatură.

O modalitate excelentă de a vă asigura că toate strategiile de proiectare a formularelor mobile de mai sus sunt valabile este prin a explora ceea ce nu ar trebui să faceți în proiectarea formularelor. Videoclipul de mai jos prezintă câteva exemple de ceea ce nu trebuie făcut atunci când proiectați formulare atât pe dispozitive mobile, cât și pe desktop.

Inapoi la tine

Nu este un secret pentru nimeni că vizitatorii site-ului dvs. completează și trimit formularele dvs. web prin intermediul dispozitivelor lor mobile. Acest lucru se datorează faptului că este convenabil și eficient, deoarece majoritatea oamenilor poartă cu ei un tip de dispozitiv mobil peste tot, ceea ce face esențial ca formularele dvs. să fie prietenoase cu dispozitivele mobile.

În caz contrar, formularele dvs. vor fi dificil de citit, completat și trimis, ceea ce vă poate frustra clienții potențiali sau vă poate face să le pierdeți complet afacerea.

Luând în considerare designul formularului mobil și implementând aceste reguli, vă veți îmbunătăți experiența utilizatorului formularului mobil, veți construi relații pozitive cu clienții potențiali și vă veți stimula conversiile.

Nota editorului: Această postare a fost publicată inițial în decembrie 2018 și a fost actualizată pentru a fi completă.