Izbirni gumb ali spustni meni

Obrazci (vnosna polja, potrjevanje vnosa, javljanje napak) so pomemben del uporabniške izkušnje, tako na mobilnih aplikacijah kot na spletnih orodjih. So najboljši vir za interakcijo z uporabnikom.

Dve pomembni kontroli sta izbirni gumb (radio button) in spustni meni (dropdown menu). Poleg uporabnikovega vnosa se pogosto uporabljata tudi za filtriranje rezultatov in navigacijo. Sicer ju lahko uporabljamo izmenično, vendar, ko se poglobimo v njuno uporabnost, postane očitno, da je v nekaterih primerih bolje uporabiti izbirni gumb, v nekaterih pa spustni meni.

Pri odločitvi, kateri element izbrati, lahko upoštevamo, da je izbirni gumb najbolje izbrati, ko je na izbiro majhno število možnosti, običajno manj kot pet. Prav tako ga je bolje izbrati, če želimo poudariti vse možnosti, ki so na voljo (običajno če so zelo različne, specifične, ali jih je težje predvideti). Gumb uporabimo tudi, ko želimo, da je primerjava med možnostmi jasno razvidna in je pomembno, da so vse možnosti predstavljene druga zraven druge. Praktično ga je uporabiti tudi, ko je pomembna preglednost in hiter odziv.

V nasprotju s tem spustni meni uporabimo, če je na voljo več jasnih možnosti, ki si sledijo v jasnem zaporedju, na primer število izdelkov, odstotki, izbira ure in datuma. Meni uporabimo tudi, ko je privzeta možnost priporočena in se druge možnosti odsvetuje (na primer pri nameščanju programov). Prav tako je spustni meni bolj uporaben in pregleden na manjših zaslonih in na mobilnih napravah.

V nekaterih primerih, še posebno, če imamo stran in elemente oblikovane po meri, pa ju želimo uporabiti izmenično, glede na velikost zaslona. Primer: na večjih zaslonih želimo prikazovati gumbe, na mobilnih napravah pa meni. To najlažje dosežemo tako, da ustvarimo dve različni polji in ju prikazujemo izmenično. Na večjih zaslonih skrijemo spustni seznam:

select { display: none; }

na mobilnih pa skrijemo gumbe in prikažemo spustni meni:

.radio { display: none; }
select { display: inline-block; }

Težava pri tem načinu je, da bo potrebno urejati dve polji. V primeru, da bo ostalo statično ni težav, če pa se bodo možnosti kasneje spreminjale, ali pa so narejene dinamično, bi bilo treba vsakič, ko se spremeni glavni meni, urediti tudi drugega. S pomočjo jQuery lahko to rešimo z nekaj vrsticami kode. Najprej ustvarimo prazen spustni seznam in ga pripnemo v element z id-jem element:

$("<select />").appendTo("#element");

Nato meni napolnimo z možnostmi, ki smo jih pobrali iz gumbov:

$("input[type='radio']").each(function() {
 $("<option />", {
     "value"   : $(this).val(),
     "text"    : $(this).val()
 }).appendTo("select");
});

Tako naredimo meni, ki se dinamično spreminja glede na izbirne gumbe.

Da izboljšamo uporabniško izkušnjo je pomembno, da izberemo pravi način prikaza vsebine in s tem uporabniku prihranimo odvečno klikanje in pomikanje po strani ter naredimo stran bolj pregledno.