In imaginea de mai jos, cu elemetele fieldset si legend organizate se poate determina vizual foarte usor ca campuri apartin carui grup chiar si intr-o forma ne formatata.
Acelasi efect vizual poate fi obtinut si folosind elementele h1 in loc de legend dar, ratiunea folosirii lui legend este aceea ca fara o grupare semantica si etichetare, un utilizator s-ar putea intreba de ce trebuie sa introduca "Adresa1" de doua ori. Cu elementul legend inclus utilizatorul va sti ca a doua adresa apartine de fapt altui grup.
Layout-ul formularului Exista mai mai multe metode prin care poti face layout-ul unui formular. Metoda pe care o alegi depinde cat de lung este formularul, scopul lui, cat de des va fi folosit si estetica generala a paginii de internet.
Se considera a fi eficient sa ai numai un element de formular pe linie, cu liniile stivuite secvential una peste cealalta, caci majoritatea paginilor web sunt create mai degraba pentru scroll vertical decat pentru orizontal.
Pentru fiecare element dintr-un sistem de citire de la stanga la dreapta este logic sa pozitionezi eticheta corespunzatoare in unul din aceste trei moduri:
-direct desupra elementului de formular
-intr-o coloana separata la stanga, aliniata la stanga
-intr-o cloloana separata la stanga, aliniata la dreapta
Fiecare din aceste abordari are propriile avantaje si infatisare deci considera aceste optiuni cand te decizi cum sa creezi layout-ul formularului.
Etichetele care sunt pozitionate direct deasupra unui element de formular au demonstrat ca sunt procesate mai usor de utilizatori.
Gruparea compacta intre eticheta si element reduce miscarea ochilor si ii permit utilizatorului sa le observe deodata. (iata un articol foarte bun publicat de UXmatters: http://www.uxmatters.com/MT/archives/000107.php) Totusi acest tip de pozitionare este are un caracter utilitar si nu creaza cel mai estetic layout. Mai are si dezavantajul de a ocupa mai mult spatiu verical si va face un formular lung si mai lung. In general etichetele plasate deasupra sunt potrivite pentru formulare scurte cu care utilizatorul este familiarizat.
Etichetele care sunt pozitionate intr-o coloana la stanga elementelor arata mai organizat dar modul in care textul este aliniat in acele etichete deasemenea afecteaza utilizarea formularului.
Alinierea la dreapta a textului creza o grupare mai puternica intre eticheta si element. Totusi spatiul care ramane in stanga textului poate face formularul sa arate dezordonat si reduce abilitatea utilizatorului sa scaneze etichetele, asa cum Luke Wroblewski sustine in articolul sau pe aceasta tema: http://www.lukew.com/resources/articles/web_forms.html
Intr-o aliniere la stanga, etichetele devin mai usor de citit, dar gruparea cu elementele de formular asociate devine mai slaba. Utilizatorii trebuie sa petreaca ceva mai mult timp coreland etichetele cu elementele lor.
In figura de mai jos este un exemplu de formular cu aliniere la stanga:
Layout-ul aliniat la dreapta asigura o asociere mai rapida intre eticheta si element, desi este mai potrivita pentru formularele care vor fi vizitare in repetate randuri de catre utilizator. Amandoua layout-urile au avantajul ca ocupa un spatiu minim pe verticala.
14364 afisari |
1h 30 min
|
Incepator
