Formular mobil Jquery. Suport pentru formulare mobile HTML5 și tipuri de introducere HTML

În acest articol, vom arunca o privire asupra unora dintre noile îmbunătățiri ale formularelor din HTML5 și vom analiza modul în care acestea ajută la îmbunătățirea interfața cu utilizatorul pe mobil. În special, vom vedea cum pot fi extinse formularele cu tipurile de introducere suplimentare oferite de HTML5 și vom arăta la ce vă puteți aștepta de la diferite browsere mobile.

Tipuri de intrare HTML5

HTML5 are o grămadă de noi tipuri de intrare pentru formulare. Aceste tipuri de intrări permit un control mai mare și o verificare a datelor de intrare. Unele dintre ele sunt deosebit de utile pentru utilizatorii de telefonie mobilă care au adesea dificultăți cu lucru HTML Intrare. Lista plina Tipurile de date de intrare sunt prezentate mai jos:

• culoare — selecția culorii
• data — selectarea datei
• datetime - selectați data și ora
• e-mail — validarea măștii de e-mail
• număr - introduceți numărul
• range — glisor de rază
• căutare - câmp de căutare
• tel — validare masca de telefon
• timp - timp
• url - validare URL

Desigur această listă incomplet. Aceasta nu include tipurile care sunt acceptate de standard, dar esența lor nu este încă clară. Vom lua în considerare cele mai populare și relevante dintre tipurile de mai sus în acest articol cu ​​exemple.

1. Culoarea tipului de intrare

Dacă acest tip este acceptat semnal de intrare, apoi browserul utilizatorului va apela selectorul de culori încorporat pe dispozitivul client. Culoarea selectată va fi prezentată în corespunzătoare valoare hexazecimală RGB.

Exemplu de lucru:

Stilul pop-up-ului va depinde de browserul dvs. Faceți clic pe butonul pentru a vedea cum funcționează.

Alege culoarea ta:

Din pacate, a sustine de acest tip browsere mobile lasa mult de dorit. Dintre toate cele existente, maparea corectă poate fi găsită doar în Opera MobileȘi Chrome Android. Pentru toate celelalte browsere, va fi afișat un câmp de text gol. Acest lucru merită reținut. Alternativ, puteți schița paleta în JS sau puteți utiliza pluginuri.

2. Tip de intrare data

Dacă este acceptat de browser, acesta oferă bloc convenabil pentru a selecta o dată.

Exemplu de lucru:

Selectarea datei:

Rețineți că tipul de intrare este Data, precum și opțiunile tip datetimeși datetime-local oferă atribute utile, valori precum min și max, care pot limita și valida intrarea utilizatorului. Vom demonstra acest lucru mai jos în text.

Tipul HTML Input Date este acceptat de aproape toate browserele. Excepțiile sunt Opera Mini și browserul implicit Android.

3. Introduceți datetime și datetime-local

Acest tip de intrare permite utilizatorului să specifice o dată și o oră în format convenabil. Dacă este acceptat, acesta va fi afișat ca widget nativ de dată/ora al dispozitivului. Diferența dintre aceste tipuri de introducere este că primul este legat de ora mondială, în timp ce al doilea nu conține informații despre fusul orar.

Exemplu de lucru:

Selectați data și ora:

Nu sunt acceptateîn IE Mobile și Opera Mini. Pe alte browsere populare (mobile) tipul funcționează mai mult sau mai puțin corect, dar cazurile de erori și erori nu sunt neobișnuite. Țineți cont și de acest lucru și nu uitați de alternativele JavaScript.

4. E-mail de tip de intrare

Acest tip nu necesită nicio reprezentare. Mulți oameni îl folosesc deja și este acceptat de aproape toate browserele.

Exemplu de lucru:

Introdu adresa ta de e-mail:

Înainte de trimitere, browserul verifică corectitudinea câmpului completat și informează utilizatorul dacă formatul de intrare este invalid. Calculul se bazează pe următoarea expresie (text)@(domeniu)

5. Introduceți numărul tip și tel

Acesta este un alt tip care nu necesită multe discuții. Cu toate acestea, într-un mediu mobil este foarte unealtă folositoare. Utilizați-l în cazurile în care utilizatorului i se prezintă doar un set de numere. În această situație, i se va oferi interfață ușor de utilizat tastatură numerică.

Exemplu de lucru:

Selectați valoarea:

Intervalul implicit în majoritatea browserelor este între 0 și 100. Adică, poziția din stânga a glisorului este 0, iar poziția cea mai îndepărtată este 100. Puteți modifica intervalul utilizând atributele min și max. De asemenea, putem seta valoarea pasului prin pasul de atribut. Deci, pentru a specifica un interval de la 5 la 50, în trepte de 5, am folosi:

Sprijin din partea tuturor browsere populare, cu excepția Opera Mini.

7. Validarea formularului

Este foarte convenabil să setați special atribut HTML Intrare pentru a verifica datele de intrare. De exemplu, dorim să creăm un câmp care trebuie completat:

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 de formular 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 ocupat, mai ales când solicitați utilizatorului un numar mare de informație.

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 probabilitate mare 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 de utilizator.

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 #3: Antetele formularelor ar trebui fie să fie deasupra câmpurilor în sine, fie să fie plutitoare

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

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

Anteturile din câmp (sau substituenții) 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 ar trebui 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ă repare 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ă 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ă 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 pot accepta 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 semnificativ gradul de utilizare a formularelor.

Acest articol este un anunț despre noi funcționalități.
Nu este recomandat să folosiți conținutul acestui articol pentru a afla funcționalități noi.
Descriere completa o nouă funcționalitate va fi furnizată în documentația pentru versiunea corespunzătoare.
Lista completă a modificărilor în versiune noua este furnizat în fișierul v8Update.htm.

Implementat în versiunea 8.3.11.2867.

Continuăm să dezvoltăm platforma mobilă, adăugând funcționalități care sunt deja disponibile în platformă pentru calculatoare personale. În plus, dezvoltăm capabilități specifice ale platformei care sunt relevante doar pentru dispozitive mobile. Vă vom spune acum despre unele dintre cele mai importante îmbunătățiri.

Programator

Modelul obiect al programatorului „mobil” nu s-a schimbat, dar s-a schimbat modul în care utilizatorul interacționează cu planificatorul, deoarece metodele de introducere a informațiilor pe dispozitivele mobile diferă de cele folosite pe computerele desktop.

De exemplu, editare rapidă elementul se realizează printr-un singur clic pe element. Apeluri de apăsare lungă meniul contextual, și la apariția unor markere care vă permit să întindeți elementul. Tragerea se face prin apăsare lungă și apoi mișcarea degetului.

Derularea întregului planificator se face prin defilarea cu un deget, mărirea cu două degete și așa mai departe.

O caracteristică a implementării actuale a programatorului „mobil” este că nu acceptă încă imprimarea.

Document formatat

Un alt obiect „nou” pe care l-am adăugat pe platforma mobilă este FormattedDocument. Din punctul de vedere al utilizatorului, un document formatat „mobil” diferă doar prin faptul că panoul său de editare este încorporat în controlul însuși și este o parte logică tastatura virtuala. Voi, ca dezvoltatori, nu sunteți obligat să faceți acest lucru adăugare separată la configurație. Panoul de editare are un aspect diferit în funcție de tipul de dispozitiv mobil (telefon sau tabletă).

Previzualizarea formularului „mobil” în configurator

În configurator, la dezvoltarea unui formular, am adăugat posibilitatea de a vedea cum va arăta formularul dvs. pe un dispozitiv mobil.

În panoul de comandă puteți selecta o opțiune de interfață Dispozitiv mobil, și vedeți cum va arăta formularul în orientare standard.

Aici vă puteți roti dispozitivul mobil.

În plus, ți-am oferit posibilitatea de a alege un numar mare dispozitive comune.

În plus, puteți vizualiza formularele mobile în trei scări diferite:

• Pixel la pixel- când un pixel al ecranului unui dispozitiv mobil corespunde unui pixel al ecranului ferestrei previzualizare;
• Dimensiunea reală - când dimensiunea dispozitivului mobil de pe ecran corespunde dimensiunilor geometrice ale dispozitivului;
• După dimensiunea ferestrei- când scara de afișare este selectată în așa fel încât zona de afișare „mobilă” să se încadreze în fereastra de previzualizare fără derulare.

Procesarea în lot a documentelor din foile de calcul

Am adăugat o serie de noi obiecte pe platforma mobilă care vă permit să creați pachete de documente afișate. Această funcționalitate este similară cu cea găsită în platforma PC. Astfel, acum puteți, de exemplu, să trimiteți mai multe documente pentru tipărire simultan.

Dezvoltarea notificărilor livrabile

Am implementat suport pentru serviciul de notificare push Windows (WNS, Windows Notification Services). Acum puteți utiliza funcționalitatea notificărilor livrate atunci când rulați o aplicație mobilă pe platforme din familia Windows.

De asemenea, am reelaborat sistemul de gestionare a erorilor pentru trimiterea notificărilor livrate. În situațiile în care o eroare a fost aruncată anterior ca o excepție, acum este aruncată ca o valoare pe care o puteți gestiona în limbajul încorporat.

Accelerarea hardware în sistemul de operare Android

Pe versiunile de operare sisteme Android 4.4.2 și o versiune ulterioară pe care o folosește acum platforma mobilă accelerare hardware. Acest lucru ne-a permis să creștem viteza de redare a interfeței de 1,5 – 3 ori.

Întrebați orice adult fără ce obiect nu poate pleca de acasă, iar acesta vă va răspunde: chei, portofel, 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

Ascensiunea 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 le întâlnim atunci când facem o achiziție, iar 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 se confruntă de obicei 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. Aceste tipuri 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 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. Listele derulante închise, pe de altă parte, 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 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 pictându-l într-o culoare strălucitoare. Și în loc să folosiți pur și simplu cuvintele „Confirmați” sau „Trimiteți”, folosiți îndemnuri mai elocvente, cum ar fi „Înregistrați-vă acum” sau „Trimiteți cererea”.

Cu toate acestea, evitați să folosiți prea mult culori deschise, sau crearea de butoane care se mișcă prea mult, deoarece 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 fie potrivită clienților, fie este posibil ca aceștia să fie nevoiți să continue mărirea paginii, 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 de a face clic pe butonul „Înapoi” sau de a reîncărca 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. Ajută 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 pe care nu trebuie să-l uitați este viteza de încărcare a formularului 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.