:
exemple
Incearca-l "
Sfat: Pentru a împiedica jQuery Mobile să adauge automat stil elementelor interactive, utilizați atributul data role="none".
Designer UX de la IBM Zoltan Collin.
La marcaje
Zoltan Collin
Formularele dropdown par a fi o alegere evidentă de design: sunt ușor și ieftin de creat, nu ocupă prea mult spațiu, confirmă automat informațiile introduse, sunt acceptate pe toate browserele și platformele și utilizatorii sunt deja utilizați lor.
Dropdown-urile sunt cea mai frecventă utilizare a dropdown-urilor de către designeri și, potrivit 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 dispozitive mobile : În primul rând, utilizatorul trebuie să atingă formularul și să deschidă opțiunile, să deruleze în jos și să găsească pe cel de care are nevoie, să îl 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. În special 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ă multe elemente alternative de introducere a datelor care vor funcționa mai bine decât listele derulante în multe cazuri.
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 nu cantitate mare 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ă derulantă filtrată pentru un număr mare de opțiuni bine definite în care 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% va face clic pe opțiunea „Altele”, care va fi clarificată în următoarea întrebare.
Și în timp ce „Altele” nu este cea mai elegantă soluție, 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 doar puțin și 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.
In conformitate cu cererea ta formularul site-ului mobil găsite 2833
rezultate
Proiectarea unei bune navigații pe site este unul dintre factorii cheie buna dezvoltare proiect și faptul că vizitatorii încep să exploreze site-ul pentru a verifica toate colțurile și cotloanele (marcaje, imagini, text etc.) pentru informații. Urmărește și inspiră-te pentru propriile tale proiecte grozave.
Conformitate: 7
La proiectare aplicatii mobile Există diverse capcane care îl așteaptă pe dezvoltator care pot strica toate eforturile. ÎN această lecție Vom descrie cele 6 cele mai insidioase și frecvente greșeli atunci când lucrați la versiuni pentru dispozitive mobile.
Conformitate: 7
În această lecție ne vom da seama cum să creăm un formular de mesaj original sub forma unei mașini de scris. Toate funcțiile principale ale acestei unități, care a ieșit din uz, vor fi restaurate cu atenție folosind CSS și jQuery.
Conformitate: 7
Aici vei afla tot adevarul despre site-uri comerțul electronic : Conform celor mai recente cercetări în acest domeniu, conform macar 59,8% dintre potențialii cumpărători refuză să plătească pentru ceea ce au adăugat în coșul lor (MarketingSherpa 59,8%, SeeWhy 83% și MarketLive 62,14%). Întrebarea principală este: de ce clienții abandonează atât de des achizițiile? Cert este că există unele greșeli fundamentale pe care dezvoltatorii de site-uri de comerț electronic le fac foarte des. Dacă există o principii generale care fac dificil pentru utilizatori să cumpere produsele noastre? Și există vreo modalitate semnificativă de a îmbunătăți performanța vânzărilor a ceea ce vindem?
Conformitate: 7
Cea mai frumoasă caracteristică nouă din HTML5 este capacitatea de a adăuga text implicit în câmpurile de formular. Atributul substituent permite câmpurilor de formular să afișeze text specific în timp ce acestea sunt goale sau nu sunt focalizate (când câmpul are focalizare, acesta este șters). Aceasta este o caracteristică elegantă, dar totuși nu este acceptată de toate browserele. În acest tutorial, vă voi arăta cum să utilizați Modernizr pentru a determina dacă este acceptat de un anumit browser și, dacă nu, completați câmpurile de formular cu text implicit folosind jQuery.
Conformitate: 7
Grilă modulară poate oferi asistență semnificativă la crearea unui site web. Oferă atât structura vizuală pentru elementele site-ului, cât și mediul pentru conținut. Se întâmplă să fie într-un mod simplu creați un site web echilibrat și uniform.
Conformitate: 7
Când dezvoltați o interfață de proiect, doriți să fie întotdeauna simplă și ușor de înțeles pentru utilizator. Indiferent ce oferă site-ul dvs., trebuie să găsiți un echilibru între simplitate și funcționalitate. Este foarte important să vă asigurați că utilizatorul poate găsi și înțelege cu ușurință orice funcții ale proiectului dvs., în mod ideal fără a încărca alte pagini.
Conformitate: 7
Imaginează-ți tulburarea emoțională a unui utilizator care trebuie să adauge doar câteva caractere pentru a trimite un formular cu un număr mare de câmpuri completate manual și dintr-o dată toate datele se pierd. Teribil. Dacă, desigur, nu există o modalitate de a recupera datele pentru a evita soarta lui Sisif.
Î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 de introducere este acceptat, browserul utilizatorului va invoca selectorul de culori încorporat pe dispozitivul client. Culoarea selectată va fi prezentată în corespunzătoare valoare hexazecimală RGB.
<
input
type
=
"color"
/
>
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, afișare 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, oferă un bloc convenabil pentru selectarea unei date.
<
input
type
=
"date"
/
>
Exemplu de lucru:
Selecția datei:
Rețineți că tipul de intrare Date, precum și variantele de tip datetime și datetime-local oferă atribute utile, valori precum min și max, care pot stabili limite și validare la 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 tip datetime și datetime-local
Acest Tip de introducere permite utilizatorului să specifice data și ora într-un format convenabil. Dacă este acceptat, acesta va fi afișat ca widget nativ de dată/ora al dispozitivului. Diferența dintre aceste tipuri de intrare este că primul este legat de ora mondială, în timp ce al doilea nu conține informații despre fusul orar.
<
input
type
=
"datetime-local"
/
>
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.
<
input
type
=
"email"
/
>
Exemplu de lucru:
Introdu adresa ta de e-mail:
Înainte de a trimite, 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:
<
input
type
=
"range"
min
=
"5"
max
=
"50"
step
=
"5"
/
>
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:
