Ergonómikus formok készítésének irányelvei

Mivel a legtöbb projektünk aktívan használja az adatbázis marketing technikáit, mindennapos feladat formok (űrlapok) készítése. Technikailag nem túl bonyolutl a feladat, azonban hogy a form ergonómikus - felhasználóbarát - legyen, néhány alapelvet fontos betartani.

A világban a dolog nem érnek össze...

Biztos megfigyeltétek már, hogy a világban bizonyos dolgok egyszerűen csak nem érnek össze. Például a parkolóban az autók nem súrolják egymást, a lakásban a berendezési tárgyak nem érnek össze minden felületükön egymással. Mégis form készítéskor olya gyakran elkövetett hiba, hogy összeérnek a beviteli mezők, a beviteli mezőbe írt szöveg a mezővel, sőt néha a mezőhöz tartozó címke is hozzáér a mezőhöz.

Az űrlap áttekinthetőségét fényévekkel meg lehet növelni néhány padding alkalmazásával. Nézzük belülről kifelé haladva.

Legyen 2-3px padding az input mezőben a mező kerete és a szöveg között.
Az input mezők közt alul-felül legyen legalább 10-12px térköz.
Az input mező felirata és az input mező közt is legyen 10-12px térköz.

Táblázat vagy nem táblázat

Nemrégiben még ha valaki HTML űrlapot készített, akkor egyértelmű volt, hogy táblázattal rendezi egymás mellé a mezőket és a feliratukat. Mivel azonban most már minden böngésző - több kevesebb különbséggel - kezeli a CSS-t, eljött az idő, hogy rendeltetésüknek megfelelően használjuk a HTML tag-eket.

A beviteli mezők és felirataik helyzetére alapvetően háromféle elrendezés ajánlott.Az egyik, amikor a felirat a beviteli mező felett van, a másik, amikor a felirat a beviteli mező jobb oldalán van balra rendezve ill. jobbra rendezve.

Felülre igazított feliratú űrlap

Jobbra igazított feliratú űrlap

Balra igazított feliratú űrlap

Különböző beviteli mező és felirat elrendezések előnyei és hátrányai

	Beviteli mező feletti	Jobbra rendezett	Balra rendezett
Előny	Csökkenti a kitöltéshez szükséges időt Térköz és a kontraszt átláthatóbbá teszi Feliratok hosszúak is lehetnek (pl. több nyelvre lefordított formoknál előny)	Felirat egyértelműen mezőhöz rendelhető Kevesebb függőleges helyet igényel Gyorsan kitölthető (jól olvasható)	Akkor célszerű használni ha szokványostól eltérő adatokat kérünk be Címkék gyorsan átolvashatóak
Hátrány	Nagyobb függőleges helyet igényel	Nehezebben áttekinthető címkék, mint a balra rendezettnél	Feliratok nehezebben kapcsolhatók vizuálisan a mezőkhöz A váltakozó hosszúságú feliratok miatt a megjelenés kárt szenved

Fontos, hogy a beviteli mezőhoz tartozó felirat legend tag-ek között legyen és az input mező id attribútumához a label tag for attribútumával legyen kapcsolva.

Példa:

<</span>label for="vezeteknev">Vezetéknév</</span>label>
<</span>input type="text" id="vezeteknev" name="vezeteknev" value="">

Mi a leghatékonyabb módja, hogy a fenti három elrendezést táblázat használata nélkül elérjük?

A beviteli mező és a hozzá tartozó címke külön div-be kerül. A pontos helyzetüket CSS-el állítjuk be.

<</span>div class="form_item">
        <</span>label class="form_left" for="first_name">*First Name:</</span>label>

        <</span>div class="form_right">
                <</span>input class="text_input" id="first_name" type="text" value="" name="user[first_name]"/>

        </</span>div>
</</span>div>

A hozzá tartozó CSS:

.form_item {
        border-bottom:1px solid #FFFFFF;
        clear:both;
        float:left;
        padding:6px 10px;
        width:498px;

}

.form_left {
        float:left;
        overflow:visible;
        padding:2px 10px 0pt 0pt;
        text-align:right;
        width:140px;

}

.form_right {
        border-left:2px solid #DDDDDD;
        float:left;
        padding-left:8px;
        text-align:left;
        width:338px;

}

.form_right .text_input {
        width:323px;
        border-color: #AAAAAA rgb(221, 221, 221) rgb(221, 221, 221) rgb(170, 170, 170);
        border-style:solid;
        border-width:2px 1px 1px 2px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        padding:3px;

}

A CSS-el és div tag-ekkel történő megvalósítás előnye, hogy ha logikusan rendeltük az osztályokat a tag-ekhez, akkor egy paraméter változtatásával átalakíthatjuk a formot jobbra igazítottból felülre igazított címkéssé.

A felülre igazított elrendezést úgy érhetjük el a fenti CSS módosítávásal, hogy a .form_left osztály float:left paramétert eltávolítjuk és a text-align paramétert left értékre állítjuk.

A balra igazított elrendezést úgy lehet elérni, hogy a .form_left osztály text-align paraméterét left-re állítjuk. Ilyen egyszerű változtatni a form megjelenésén, ha a helyes struktúrában és a megfelelő CSS-el építjük fel.

Mezők csoportosítása: fieldset, legend

Nagyobb űrlapok esetén van értelme a mezők csoportosításának. Erre a fieldset HTML tag-et és a hozzá tartozó legend tag-et használjuk. Például Drupal-ban a tartalom szerkesztésekor a node tulajdonságát meghatározó összetartozó beállítáok egy fieldset-en belül vannak.

<</span>fieldset class="collapsible">
        <</span>legend class="collapse-processed">
                <</span>a href="#">Beviteli forma</</span>a>

        </</span>legend>
        <</span>div class="fieldset-wrapper" style="display: block;">
        ...
        </</span>div>

</</span>fieldset>

Mezők hosszúsága

Beviteli mezők legyenek egyforma hosszúak, bizonyos mezők, amelyek kevesebb adatot igényelnek legyenek rövidebbek. Ez jelentősen javítja az űrlap áttekinthetőségét és sokkal könnyebb kitölteni.

Visszalépési lehetőség

Sok űrlapnál szükség van egy alternatív választási lehetőségre, ha a látogató vissza szeretne lépni a form kitöltésétől. Fontos alapelv, hogy ez legyen egyértelműen megkülönböztethető a form elküldése gombtól. Legjobb ha egyszerű link.