Predlošci + HTML

petak, 06.10.2006.

Dizajniranje klikatibilnih grafika

Ovo je važni post za početnike pa bi bil dobro da ga pročitate.
Pretvaranje slika u hiperlinkove u HTML-u vrlo je jednostavno. Dovoljno je umetnuti tag img između početnog i završnog taga a:

<a href="index.html"><img src="/slike/logo.gif"></a>

Uočite da pretraživač automatski dodaje rub slici pretvorenoj u hiperlink, kao na slici dolje.

.....

Boja ruba je ista kao boja tekstualnih hiperlinkova . Vaš dobri stari web pretraživač ispravno zaključuje da posjetiteljima želite dati vizualni indikator kako je riječ o klikabilnoj slici. Rub olakšava razlikovanje klikabilne slike od (neklikatibilnih) slika na stranici.
Međutim, koliko ste klikabilnih slika s podrazumjevanjim rubom vidjeli na webu? Vjerojatno ne mnogo. Rub je nezgrapan, ružan i narušava vizualnui kontinuitet stranice. Zato većina web dizajnera isključuje prikaz ruba:

<a href="index.html"><img src="/slike/logo.gif" border="0"></a>

Dodjeljivanje vrijednosti 0 atribut border rješava jedan problem, ali stvara drugi, kao što možete vidjeti na slici dolje.

.....
Možete ukloniti podrazumjevani rub klikabilne slike, ali tada se ona neće razlikovati od neklikatibilnih slika.

Slika s hiperlinkom još je uvijek klikatibilna, ali bez ruba posjetitelji ne mogu razlikovati koja je slika klikatibilna, a koja nije ako ne postave pokazivač miša iznad svih slika na stranici. Posjetitelji vam to neće oprostiti. Sve što zbog čega moraju zastati i razmisliti može predstavljati razlog za napuštanje vašeg sjedišta.
Dakle, trebali biste postići da klikatibilna slika izgleda klikatibilno bez upotrebe ruba. U tome vam mogu pomoći dvije tehnike:
Stavljanje u odgovarajući kontekst i upotreba vizualnih indikatora (afordansi).
Stavljanje klikatibilnih slika u odgovarajući kontekst na web stranici možete naglasiti činjenicu da je riječ o klikatibilnim elementima. Da bi posjetitelj cijelo vrijeme bili usredotočeni na vaše sjdeište, probajte im ponuditi inteligentniji raspored kao na slici dolje.

Odvajanjem klikatibilnih slika od neklikatibilnih na stranici stvarate malo sučelje koje ukazuje na klikatibilnost.
Katkad stavljanjema slika u odgovarajući kontekst nije dovoljno. U takvim su situacijama korisni vizualni indikatori.

Vizualni indikatori ( afordanse ) su vizualne natuknice i dizajnu elemnta koje ukazuje na njegovoj funkciji. Podrazumjevani rub slike s hiperlinkom možda nije lijep, ali je odličan vizualni indikator jer posjetitelju sugerira da je slici dodijeljen hiperlink
Jedan od najuobičajenih vizualnih indikatora na Webu je metafora gumba. Ona je toliko uobičajena da mnogi dizajneri pojmove gumb i klikatibilna slika koriste jedan umjesto drugoga. Ako slika izgleda kao gumb, asocira na akciju pritiskanja i zato potičeposjetitelja da je klikne.

Na slici gore :D možete vidjeti što se događa kada thumbnaile iz predhodnog primjera pretvrorite u gumbe. Uočite kako je učinkovito uklonjena nedoumica koje su slike klikatibilne, a koje nisu. Dizajn gumba olakšava njihovo razlikovanje od neklikatibilnih slika, a oblik potiče na klik mišem.
Iako su gumbi tako moćni, nemojte ih uzimati zdravo za gotovo. Od gumba nema velike koristi ako ih posjetitelji ne mogu pronaći. Posjetitelji bi trebali imati utisak da vladaju sučeljem .
Upotrebom simbola u stilu kontrola DVD ili CD playera u pravilu je prilično sigurna. Isto vrijedi i za ikonu koša za smeće koja označava uklanjanje stavke ili ikonu lista papira smpreklopljenim kutom koja označava stvaranje novog dokumenta.
Ikone olovke na nekim sjedištima sjedištima označava stvaranje novog objekta,a na nekim uređivanje.
Međutim ako je riječ o ikonama, vrijedi sljedeće pravilo:
ako postoji bilo kakva nedoumica vezana uz značenje ikone, nemojte je upotrijebiti.
To bi bilo sve za danas. Mislim da ste se stvarno načitali, ali i puno naučili :).