Formulare mobile: cum să înlocuiți listele derulante. Suport pentru formulare mobile HTML5 și tipuri de introducere HTML

JQuery Mobile adaugă automat un stil formularelor HTML, făcându-le mai atractive, mai ușor de utilizat la atingere.

Structura formularului mobil JQuery

JQuery Mobile pentru a utiliza CSS pentru a stila elemente formular HTML pentru a le face mai atractive și mai ușor de utilizat.

În jQuery Mobile, puteți utiliza următoarele elemente forme:

  • câmp de introducere a textului
  • Căutați un câmp de introducere
  • buton de radio
  • Caseta de bifat
  • Selectați Meniu
  • glisor
  • Flip comutator

Când utilizați jQuery Mobile Form, ar trebui să știți:

  • <Форма>elementul trebuie să aibă o metodă și un atribut de acțiune
  • Fiecare element de formular trebuie să aibă un atribut unic „ID”. ID-ul trebuie să fie unic pe toate paginile de pe site. Acest lucru se întâmplă pentru că Jquery Mobile mecanismul de navigare pe o pagină este prezentat în așa fel încât mulți diverse pagini simultan
  • Fiecare element de formular trebuie să aibă o etichetă. fila Setări Pentru proprietăți pentru a se potrivi cu id-ul elementului

exemple

method="post" action="demoform.html" >




Incearca-l "

Pentru a ascunde o etichetă, utilizați clasa UI-hidden-accessible. Acesta este adesea folosit atunci când atribuiți un element ca etichetă de substituent:

exemple






Incearca-l "

Sfat: Putem folosi atributul data-net-BTN="true" pentru a adăuga un buton pentru a șterge conținutul câmpului de introducere (pictograma X din dreapta câmpului de intrare):

exemple

<Ярлык = "имя_файла">Nume:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">


Incearca-l "

Pictograma jQuery Mobile Forms

Formular cod de buton HTML standard <вход>element (buton, resetare, trimitere). Ei vor reda automat stilurile, se vor adapta automat dispozitive mobile pe desktop:

exemple


<Тип входного = "Сброс" значение = "кнопка сброса">


Incearca-l "

Dacă trebuie să adăugați stiluri suplimentare la<вход>butonul, puteți utiliza următorul tabel de date-*atribute:

Buton pentru a adăuga o pictogramă:


<Тип входного = "Сброс" значение = "кнопка сброса">


Incearca-l "

Câmp container

Pentru a face etichetele și elementele de formular să pară mai potrivite pentru ecran lat va rog sau

elementul care înconjoară elementul etichetă/formular este utilizat cu clasa „UI-fields contain”.
:

exemple










Incearca-l "

Sfat: Pentru a împiedica jQuery Mobile să adauge automat stilul elemente interactive, utilizare date rol = atribut „nu”.

Designer UX de la IBM Zoltan Collin.

La marcaje

Zoltan Collin

Formele listelor derulante par evidente soluție de proiectare: Sunt ușor și ieftin de creat, nu ocupă prea mult spațiu, confirmă automat informațiile pe care le introduceți, sunt acceptate de toate browserele și platformele, iar utilizatorii sunt deja obișnuiți cu ele.

Designerii folosesc cel mai adesea listele derulante în mod inadecvat, dar în opinia directorului de produs Google Luke Wroblewski, acest model ar trebui folosit doar ca ultimă soluție.

Să ne uităm la câteva restricții:

  • Opțiunile drop-down sunt invizibile până când utilizatorul face clic sau atinge formularul. În plus, la prima vedere, este imposibil de prezis câte linii vor fi în listă - două sau cincizeci.
  • Selectarea unei opțiuni dintr-o listă derulantă este un proces în mai mulți pași, în special pe dispozitivele mobile: utilizatorul trebuie mai întâi să atingă formularul și să deschidă opțiunile, să deruleze în jos și să o găsească pe cea dorită, să o selecteze și să închidă lista.
  • Listele drop-down îi fac pe designeri leneși, deoarece este atât de ușor să adăugați toate opțiunile posibile într-o singură listă fără nicio prioritizare. Din acest motiv, lista drop-down este foarte asemănătoare cu un alt șablon - meniul „hamburger”.
  • Derularea listelor lungi, precum selectarea unei țări este un coșmar. Mai ales pe dispozitivele mobile, unde căutarea de la tastatură nu este de obicei disponibilă.
  • Pe unele dispozitive, câmpul pentru afișarea opțiunilor este foarte mic, așa că glisarea poate fi un coșmar.

Cantitate opțiuni vizibile lista pe iOS poate părea extrem de nesemnificativă

Vestea bună este că există un numar mare de elemente alternative pentru introducerea datelor, care în multe cazuri vor funcționa mai bine decât listele derulante.

Estimați numărul de opțiuni

Nu ar trebui să utilizați liste derulante pentru decizii în care trebuie să alegeți una dintre cele două opțiuni. Încercați o casetă de selectare sau un buton radio.

Pentru cantitate mică Pentru opțiuni care se exclud reciproc, este potrivită o formă sub formă de butoane radio sau butoane de control segmentat. Utilizatorul va vedea imediat toate opțiunile disponibile și nu va trebui să extindă lista.

Exemplu de utilizare a butoanelor de control segmentat

Numărul de opțiuni vizibile depinde de lățimea ecranului și lungimea textului. Cu toate acestea, nu ar trebui să utilizați mai mult de cinci opțiuni

Utilizați un formular de introducere cu o listă verticală filtrată pentru un număr mare de exact anumite opțiuni, când utilizatorul știe exact ce trebuie să găsească.

În loc să defileze prin întreaga listă, utilizatorii pot introduce primele litere și pot selecta opțiunile filtrate

Pentru liste mari și diverse, este mai bine să utilizați datele existente ale utilizatorilor pentru a vă asigura că opțiunile populare de răspuns sunt incluse în listă. În acest caz, 90% dintre utilizatori vor putea selecta imediat opțiunea necesară, iar restul de 10% vor face clic pe opțiunea „Altele”, care va fi clarificată în următoarea întrebare.

Și deși „Altul” nu este cel mai mult solutie eleganta, prioritizarea poate îmbunătăți UX pentru majoritatea utilizatorilor.

Evaluați formularul de introducere preferat

Unul dintre avantajele unei liste derulante este că utilizatorii nu trebuie să tastați atât de mult. Cu toate acestea, dacă trebuie să tastați puțin, iar datele sunt solicitate destul de des (de exemplu, Informații personale), atunci este mai convenabil să le introduceți decât să le selectați dintr-o listă.

Pe dispozitivele mobile, cel mai simplu mod de a vă introduce anul nașterii este utilizarea tastatură numerică, nu o listă derulantă

În general, tastatura numerică este cea mai mare metoda eficienta introduceți o valoare numerică.

Chiar dacă valorile listei sunt sortate în ordine, poate fi mai ușor pentru utilizatori să le introducă manual în loc să le deruleze.

Dacă este important pentru dvs. să confirmați datele pe care le introduce o persoană, utilizați un formular de introducere cu o listă derulantă filtrată.

De exemplu, când utilizatorul trebuie să specifice o stare, filtrați lista Optiuni Disponibile poate doar o scrisoare

Acest lucru este deosebit de important dacă ordinea de sortare a elementelor listei nu este complet clară.

De exemplu, utilizatorii nu înțeleg după ce principiu sunt sortate monedele. Faceți-o astfel încât să poată căuta atât după numele, cât și după abreviere

Același lucru este valabil și pentru lista de țări.

Pentru numere întregi - cum ar fi numărul de pasageri sau articole dintr-un cărucior - cel mai bine este să folosiți un stepper. Acesta va permite utilizatorilor să crească sau să scadă valoarea cu un singur clic.

Pentru numere fracționare sau variabile situate pe o scară, cel mai bine este să utilizați un glisor.

Oameni care vă folosesc aplicatie mobila sau site-ul web, urmărește un obiectiv specific. De obicei, ceea ce sta între utilizator și scopul său este forma. De fapt, formularele sunt considerate pasul final în procesul de atingere a obiectivelor utilizatorului. De aceea este atât de important ca utilizatorul să completeze formularul cât mai repede posibil și fără obstacole.

Urmați aceste șapte reguli pentru a crea forme simple și clare:

Regula #1: Formularele trebuie să fie compatibile cu modul în care utilizatorul își introduce datele

Asigurați-vă că câmpurile formularului nu sunt ascunse de elementele interfeței (cum ar fi tastatura). Pe măsură ce utilizatorul completează câmpurile din formular, mutați automat câmpurile în sus.

Regula #2: Minimizați numărul de câmpuri de introducere și nevoia utilizatorului de a introduce text

Cu cât este mai lung și mai complex formularul, cu atât este mai puțin probabil ca utilizatorii să dorească să completeze locuri goale, mai ales pe ecrane mici. Reducerea numărului de câmpuri de introducere va face formularul mai puțin aglomerat, mai ales atunci când cereți utilizatorului o mulțime de informații.

Faceți formularul cât mai simplu și scurt posibil

Dar reducerea numărului de câmpuri nu este suficientă. De asemenea, ar trebui să acordați atenție efortului pe care utilizatorul îl depune atunci când introduce date. Imprimarea necesită un grad ridicat de interacțiune; există o mare probabilitate de erori, chiar și atunci când intră de la o tastatură de dimensiune completă (în special pe un ecran tactil).

Prin urmare, încercați să minimizați necesitatea erorilor de tastare și a utilizatorului.

Setări implicite inteligente

Setările implicite inteligente ajută utilizatorii să completeze toate câmpurile formularului mai rapid și mai precis. De exemplu, puteți preselecta țara de reședință a unui utilizator pe baza datelor de localizare geografică a acestuia.

Detectare automată locația va economisi utilizatorului timp în căutarea unei camere de hotel

Butoane radio pentru alegeri similare, dar care se exclud reciproc

Când utilizatorul se confruntă cu alegerea dintr-o listă de opțiuni, luați în considerare utilizarea unei liste orizontale de etichete. Acest lucru permite o utilizare mai eficientă spatiu disponibil ecran.

Glisoare pentru preț min/max sau interval de buget

Luați în considerare utilizarea glisoarelor pentru câmpurile care conțin prețuri sau buget. În acest fel, utilizatorul poate muta glisorul la valoarea minimă/maximă. Glisorul este ușor de mutat pe orizontală și puteți personaliza cu ușurință această acțiune folosind indicii vizuale. Dar rețineți că numerele nu trebuie ascunse atunci când interacționați cu glisorul (mai ales când folosiți degetele mari).

Glisor AirBnB pentru a selecta prețul

Regula nr. 3: titlurile formularelor trebuie să fie fie deasupra câmpurilor în sine, fie flotante

Titlurile îi spun utilizatorului scopul principal al unui câmp, iar textul clar este una dintre principalele modalități de a face o interfață mai accesibilă.

De ce nu ar trebui să utilizați niciodată titluri de text în interiorul unui câmp

Antetele din câmp (sau substituenți) sunt text care se află în interiorul unui câmp de formular care dispare de îndată ce utilizatorul începe să-și introducă datele.

Titluri în interiorul câmpului
În timp ce titlurile din cutie arată bine din punct de vedere estetic, acest beneficiu este adesea supraevaluat. Principala greșeală este pierderea contextului. După ce utilizatorul face clic pe câmp, inscripția dispare. Și, în consecință, nu poate verifica că a scris exact ceea ce este necesar.

Textul din interiorul câmpului nu este cel mai mult cel mai bun înlocuitor antet vizual

De asemenea, unii utilizatori care văd că ceva este deja scris într-un câmp pot crede că câmpul este deja pre-completat și nu trebuie să introducă nimic altceva și pot ignora completarea.

De ce anteturile câmpurilor aliniate la stânga sunt dăunătoare pentru dispozitivele mobile

Principalul lucru de luat în considerare atunci când utilizați titluri aliniate la stânga pe un dispozitiv mobil este dimensiunea ecranului și raportul de aspect. Dacă titlul din stânga este opus câmpului, atunci cu o orientare verticală a ecranului, veți avea foarte puțin spațiu rămas pentru câmpul în sine. Acest lucru creează unele dificultăți în utilizare, deoarece nu mai există suficient spațiu pentru a afișa ceea ce introduce utilizatorul. Neputința de a vedea textul introdus creează o problemă pentru utilizatori, deoarece îi împiedică să observe rapid o eroare de introducere înainte de a trimite formularul.

Este foarte greu de observat o eroare dacă datele nu sunt complet vizibile

Antet de sus sau Antet receptiv

Titlurile formularelor ar trebui să fie în partea de sus a câmpurilor formularului, astfel încât utilizatorii să poată vedea ce completează și cum. Principalul avantaj al plasării antetelor formularului deasupra formularului este că puteți întinde formularul pe toată lățimea ecranului și îl puteți face suficient de mare pentru introducerea datelor (de exemplu, cu o dimensiune a fontului de 16 pixeli). Beneficiu suplimentar Va fi posibil să scrieți titluri clare și ușor de înțeles (nu se limitează la 1-2 cuvinte).

Principalul dezavantaj al plasării antetelor deasupra câmpurilor este că întregul formular ocupă mai mult spațiu vertical, ceea ce înseamnă că utilizatorul trebuie să deruleze ecranul. Cu toate acestea, aceasta nu este o problemă foarte serioasă - astăzi, toată lumea este obișnuită să defileze.

Alternativ, puteți utiliza antete receptive pentru a vă asigura că utilizatorii au completat corect câmpul. Textul substituent este afișat în mod implicit, dar după ce atingeți câmpul și introduceți text, textul substituentului se mută în partea de sus a câmpului, așa cum se arată mai jos.

Regula #4: validarea câmpului formularului trebuie să aibă loc în timp real

Într-o lume ideală, utilizatorii ar completa formularul informatie necesarași va finaliza cu succes această sarcină. ÎN lumea reala, utilizatorii fac adesea greșeli. În același timp, utilizatorilor nu le place faptul că, după întregul proces de completare a câmpurilor, ajung la butonul „trimite” și descoperă că au făcut o greșeală. Este corect să informați utilizatorul despre succesul/eroarea în câmp imediat după completarea acestuia. Mesajul de validare informează imediat utilizatorul că informațiile introduse sunt corecte. Această abordare permite utilizatorilor să corecteze greșelile mai rapid și fără a fi nevoie să aștepte ca erorile să fie afișate după ce au făcut clic pe butonul de trimitere.

Dacă vă așteptați la răspunsuri specifice la întrebări, trebuie să arătați imediat ce trebuie introdus și sub ce formă.

Validarea șirurilor poate fi, de asemenea, o soluție. În exemplul de mai jos, puteți vedea bun exemplu, cum puteți corecta o potențială eroare.

Regula #5: Afișează aspectul tastaturii în funcție de datele de intrare

Utilizatorii preferă configurația corespunzătoare a tastaturii în aplicație. De exemplu, atunci când utilizatorului i se cere să introducă un număr de card de credit, afișați doar introducerea cifrelor pentru a încuraja utilizatorul să introducă numere și nu simboluri. Acest lucru va crește viteza de umplere și va reduce cantitatea posibile erori intrare.

Trebuie să te asiguri că această ocazie implementat pe întreaga aplicație, și nu pe părțile sale individuale.

Regula #6: Furnizează informații utile în context

Uneori, este nevoie de a oferi relevante și Informatii utile pentru a simplifica procesul pentru ca utilizatorul să completeze formularul. Dar un astfel de text însoțitor ar trebui folosit numai acolo unde este cu adevărat necesar:

  • Atunci când planifică datele, utilizatorii apreciază contextul, cum ar fi un calendar încorporat pentru determinarea zilelor săptămânii. Acest lucru reduce nevoia de a ieși din aplicație pentru a vizualiza calendarul, reducând riscul ca utilizatorul să fie distras de la sarcina sa principală.

  • Oamenii pot fi îngrijorați de securitatea datelor lor, așa că trebuie să le arătați că datele lor nu vor fi partajate cu terțe părți.

Ca regulă a bunelor maniere, nu ar trebui să vă extindeți explicația la 100 de caractere.

Regula #7: Folosiți un format flexibil

Unele sarcini impun utilizatorului informație clară. Dar, în același timp, solicitarea utilizatorului să furnizeze informații într-o formă specifică poate fi împotriva principiilor bunei utilizări. Dacă îi cereți utilizatorului să introducă informații digitale (cum ar fi un număr de telefon) într-un formular, fiți flexibil și creați ecrane care să accepte diferite formate introduceți și afișați informații în forma cea mai ușor de utilizat pentru a preveni erorile.

Nu utilizați un format fix de introducere a datelor

Concluzie

Utilizatorul poate avea tot felul de îndoieli atunci când completează formularul, așa că ar trebui să încercați să faceți procesul cât mai simplu posibil. Toate sfaturile descrise în acest articol pot îmbunătăți în mod semnificativ gradul de utilizare a formularelor.

Întrebați orice adult fără ce obiect nu poate pleca de acasă, iar acesta vă va răspunde: chei, portofel, telefon mobil. Odată cu creșterea producătorilor de dispozitive mobile și lansarea de modele noi și îmbunătățite, este pur și simplu imposibil să nu cedeți acestei tendințe în creștere.

Datele din 2014 arată că numai în SUA, 90% dintre adulți au un telefon mobil, dintre care 58% sunt deținători de smartphone-uri. 42% dintre americani dețin tablete. Într-un raport, eMarketer a prezis că până la sfârșitul anului 2014, oamenii vor folosi aproximativ 1,75 miliarde de smartphone-uri în întreaga lume.

Aceste cifre confirmă doar că dispozitivele mobile de astăzi s-au transformat din articole de lux în necesitatea noastră de zi cu zi. Dacă în trecut, telefoanele erau doar un instrument de comunicare, acum ne bazăm pe ele când lucrăm, ne relaxăm sau mergem la cumpărături.

Optimizarea formularelor pentru dispozitive mobile

Creșterea smartphone-urilor nu face doar cumpărăturile mai ușoare pentru consumatori. Acesta este un plus binevenit pentru industria cumpărăturilor online, care este deja în creștere. De-a lungul timpului, nu numai companiile online, ci și offline au început să înțeleagă importanța telefoane mobile, alături de alte canale de promovare, în obținerea de clienți.

Forme părere joacă un rol imens în cumpărăturile online, ele sunt, de asemenea, un element de bază în platforma mobilă. De obicei întâlnim ele atunci când facem o achiziție și site-ul ne cere să furnizăm informații specifice, cum ar fi numele, adresa, numărul de telefon și informații despre Card de credit. Cu toate acestea, mulți cumpărători consideră că completarea formularelor este o sarcină plictisitoare, care le poate distruge interesul. În plus, cumpărătorii online tind să se confrunte cu provocări, cum ar fi lipsa de timp sau conexiune slabă la internet, care pot avea un impact negativ asupra ratei de conversie a site-ului dvs. mobil.

Mai jos sunt enumerate 10 moduri de a accelera performanța tranzacțiilor mobile ale clienților dvs. și, de asemenea, de a le face experiența de cumpărături online plăcută.

1. Includeți doar cele mai importante detalii în formularul dvs.

Dacă nu ai răbdarea să completezi o mulțime de formulare pe o pagină web în timp ce faci cumpărături online, atunci clienții tăi probabil simt același lucru. Există o diferență între completarea unui formular Full-On și completarea unui formular simplu pentru a cumpăra ceva dintr-un magazin online. Față de acesta din urmă, prima versiune a formularului poate fi destul de enervantă, iar riști să pierzi clientul când se sătura să completeze formularul, mai ales dacă vede că trebuie să furnizeze trei numere de telefon diferite.

Faceți cumpărăturile online de pe mobil convenabile, oferind clienților dvs. un formular de comandă simplu, dar complet. Cereți utilizatorilor doar validitatea Informații importante, ca Numele complet, abordare E-mail, număr de telefon, informații de expediere și informații despre cardul de credit. Puteți include, de asemenea, o listă derulantă a statelor sau țărilor către care expediați sau, mai bine, să aveți solicitarea aplicației dvs. mobile de geolocalizare de la clienți. În acest fel, puteți obține adresa lor rapid și precis.

2. Utilizați alinierea înălțimii pentru etichete și câmpuri de introducere.

Smartphone-urile au o zonă de vizualizare limitată în comparație cu computerele, așa că este important să proiectați o formă care să maximizeze această zonă. O modalitate de a face acest lucru este utilizarea aliniere verticală pentru câmpurile dvs. de formular. Vedeți, când pentru un formular este folosit aliniere orizontala, există posibilitatea ca pe ecranul smartphone-ului să nu se potrivească toate informațiile și să se piardă o etichetă sau un câmp de introducere. Astfel de formulare de comandă pot părea greoaie pentru cumpărători, ceea ce le poate reduce interesul.

Pe de altă parte, dacă etichetele și câmpurile de introducere sunt poziționate vertical, va fi mai ușor pentru clienții tăi să vadă imediat informațiile pe care le cer, inclusiv ceea ce trebuie să completeze. Acest lucru îi va ajuta să aibă încredere în securitatea tranzacției. Acest aspect va împiedica cumpărătorii să rateze câmpurile de introducere sau, mai rău, să completeze din nou formularul.

În plus, va minimiza dezordinea vizuală a formelor tale. Butoanele „Ce este aceasta” și „Mai multe detalii” pot fi plasate pe versiunea mobilă a site-ului dvs. web. Dacă aceste butoane trebuie să fie plasate pe un formular, atunci poziționați-le astfel încât clienții să nu fie distrași de la efectuarea unei achiziții.

3. Utilizați meniurile derulante și listele derulante

O altă limitare cauzată de zona limitată de vizualizare pe un dispozitiv mobil este derularea nesfârșită pe care trebuie să o facem pentru a vizualiza o pagină întreagă sau pentru a completa un formular. Deși derularea ecranului este destul de comună, utilizatorii de smartphone-uri ar prefera să aibă prin mijloace rapide cumpărături de bunuri online.

Folosirea meniurilor derulante și a listelor derulante vă poate ajuta să reduceți timpul petrecut de clienți pentru completarea formularelor. În loc să forțezi cumpărătorii să aleagă sumă uriașă opțiuni, puteți grupa produse individuale în categorii. Meniurile derulante sunt utile și pentru a lega descrierile produselor cheie pe care doriți să le puneți pe o singură pagină. Nu uitați să nu începeți să le descrieți în timp ce meniul se extinde.

4. Folosiți liste de selecție adecvate

Când listele derulante sau meniurile derulante nu se potrivesc cu formularele site-ului dvs. mobil, aveți două opțiuni excelente pentru formularele mobile: câmpuri de introducere a căutării predictive și liste derulante private.

Câmpurile de introducere a căutării predictive le permit clienților să caute produsul sau serviciul de care au nevoie Cuvinte cheieși afișează, de asemenea, o listă cu toate rezultatele similare. Acest tip de formular este ideal în cazurile în care se preconizează că căutarea va dura mult, sau când există o serie de produse care nu se încadrează în categorii separate. Pe de altă parte, listele derulante închise funcționează bine pentru listele cu elemente specifice de meniu aflate în într-o anumită ordine, de exemplu în ordine alfabetică sau cronologică.

5. Introducere ușoară a datelor de intrare

Probabil că ați întâlnit câmpuri de introducere pe formulare atât pe site-uri web, cât și pe cele mobile. Uneori sunt împărțite în 2-3 părți, cum ar fi numele, adresa, numărul de telefon. Și deși acest lucru funcționează pe site-uri, pe lor versiuni mobile Această utilizare a formularelor nu este întotdeauna adecvată.

Cel mai adesea, împărțirea datelor de intrare necesită cumpărători mobili, completați toate cele trei (sau două) câmpuri de introducere pentru a răspunde pur și simplu la o etichetă. Dacă ai de gând să exagerezi în aceeași formă, clienții tăi pot pierde interesul față de proces. În plus, separarea datelor de intrare poate fi percepută în mod ambiguu de către clienți sau chiar să-i confunde. Când proiectați formulare pentru platforme mobile, folosiți mai mult câmpuri simple intrare în loc să le separe. De exemplu, în loc să aveți două câmpuri separate pentru nume și prenume, utilizați unul. Acest lucru îi va ajuta pe clienții dvs. să completeze formularul mai rapid.

6. Formatați butoanele formularului

Butonul „Confirmare” este ultimul pasîn cumpărăturile online, precum și cel mai important buton de pe formular. Dacă da, atunci ar trebui să o aranjați astfel încât clienții dvs. să rămână implicați în procesul de completare a formularului.

Faceți butonul „Confirmare” atractiv setându-i lățimea la 1/3 din formularul dvs. sau colorându-l culoare aprinsa. Și în loc să folosiți pur și simplu cuvintele „Confirmați” sau „Trimiteți”, folosiți îndemnuri la acțiune mai elocvente, cum ar fi „Înregistrați-vă acum” sau „Trimiteți cererea”.

Cu toate acestea, evitați să utilizați culori prea luminoase sau să faceți butoane care se mișcă prea mult, deoarece acest lucru va distrage atenția clienților de la clic. Abia poți folosi schimbare notabilă culorile sau trece cu mouse-ul atunci când este apăsat un buton, astfel încât clienții să știe că au terminat tranzacția.

7. Setați zoom-ul utilizând metaeticheta viewportului

Navigarea pe un dispozitiv mobil poate fi potrivită clienților, fie este posibil ca aceștia să fie nevoiți să continue să mărească pe pagină, dar dacă fac acest lucru accidental, se pot pierde pe pagină. Veți putea controla acest lucru folosind metaeticheta viewport din formularele dvs. Acest lucru va permite clienților tăi să evite scalarea accidentală a paginii sau, mai rău, să piardă complet din vedere formularul.

8. Oferiți posibilitatea de a salva date

Cumpărăturile folosind telefoanele mobile pot fi sarcina dificila pentru unii clienți, deoarece există riscul să faceți clic pe butonul „Înapoi” sau să reîncărcați accidental pagina, iar dacă toate informațiile completate dispar, atunci cumpărătorul dvs. va refuza cel mai probabil tranzacția. Puteți evita această posibilitate oferind clienților dvs. opțiunea „Deschideți într-o filă nouă” atunci când fac clic pe orice link din afara formularului.

În plus, în cazurile în care utilizatorii nu se mai pot întoarce la paginile anterioare, creați o fereastră cu un avertisment și butoane precum „De acord”, „OK” sau „Anulați”. Făcând acest lucru, vă puteți avertiza clienții dacă datele lor au fost salvate pe site sau în browser și, astfel, îi puteți ajuta să decidă să treacă la achiziție.

9. Ajutați clienții să își urmărească progresul

Nu toți cumpărătorii sunt interesați să completeze formularele de feedback. În acest caz, vă va fi util să găsiți o modalitate de a le arăta clienților că sunt aproape la sfârșitul completării. Puteți face acest lucru plasând o bară de încărcare în partea de sus a formularului sau folosind o cronologie simplă și procente pentru a arăta la ce pas se află. Nu uitați să limitați numărul acestor pași pentru a economisi timp clienților.

10. Faceți ca formularul să se încarce rapid

Un alt factor de care nu trebuie să uitați este viteza de încărcare a formularului dvs. mobil. Dacă pagina durează ceva timp pentru a se încărca, clientul dvs. poate fi dezactivat. Însuși faptul că utilizatorii dvs. au ajuns în punctul de a completa formularul arată că sunt gata să plaseze o comandă. Nu-i dezamăgi cu paginile care se încarcă prost. Viteza de încărcare a formularelor depinde și de numărul de elemente pe care le puneți pe pagină, așa că aveți grijă când utilizați imagini uriașe.

Și, ca întotdeauna, testați formularele pe toate sistemele și dispozitivele

În zilele noastre, varietatea dispozitivelor mobile și a interfețelor acestora ne impune să proiectăm formulare pentru fiecare dintre ele. Deci, asigurați-vă că vă testați formularele tipuri diferite dispozitive mobile, luând în considerare diferențele sisteme de operare, dimensiuni și browsere. Cu testare, nu numai că vă puteți îmbunătăți formularul, ci și să vă asigurați că funcționează pe toate dispozitivele disponibile.