See ei ole mingi saladus, et kõik veebilehed ei ole võrdsed. Mõni leht tundub väga lihtsalt ja loogiliselt ülesse ehitatud aga samas mõnel eksle tükk aega ringi enne kui sa asjale pihta saad. Et asi lihtsam oleks otsutasin ma nii teha, et selle asemel, et vaadata ühte head lehte ja ühte halba, võtame me ühe (väga) halva lehe ja toome kõrvale võrdluseks detaile lehtedest kus antud probleem(id) on hästi lahendatud.
Halvaks näiteks ma päris sellist lehte võtta ei tahtnud, mis on nimelt halvasti disainitud (näiteks enam levinud vigade näitamiseks) aga õnneks leidsin ma ühe lehe, mis on eelpool mainitud lehtedele väga sarnane aga antud juhul paistab tegemist olevat ametliku kodulehega. Selleks leheks on siis arngren.net ja tegemist on Norras asuva elektroonikat jms. vidinaid müüva poe kodulehega (lihtsuse huvides viitan ma edaspidi sellele lehele kui "super lehele"). Seal lehel on nii palju aju valesti, et kui ma hakkaks neid kõiki ükshaaval välja tooma, siis me jääkski siia. Suurim probleem, mis kohe silma torkab on see, et lehel on liiga palju asju, mis on kõik eri suurusega, eri värvides ja eri asetusega. Selle probleemi lahendamiseks võiks kasutada näiteks (CSS-is) grid-i (või mõnda muud sarnast tehnoloogiat). Kui me vaatame näiteks 1a.ee lehte, siis seal on palju vähem asju korraga väljas ning nad on palju paremini lehe peale ära jaotatud (iga toote jaoks on sama suur kast tehtud ja need kastid on täpselt organiseeritud ridadesse/tulpadesse). Super lehel ei ole ma isegi kindel, et mis järjekorras ma peaks neid pilte vaatama või kas ma mõnda pilti olen äkki juba vaadanud jne... see on kaos. Nagu eelpool mainitud sai, puudub seal ühtne mall... pildid on eri suurusega, eri kirjastiiliga, osadel on hind pildi juures, teistel mitte jne. Disainilt ütleks ma, et on üritatud veebilehte disainida nagu mõnda trükitavat reklaamlehte (ainult et on üritatud hästi palju asju korraga ära mahutada).
Teise asjana torkas mulle silma navigeerimine. Menüü on jube. Seal on rohkem kui 40 valikut, mis jällegi on eri suurustes, eri värvides ja mis kõige hullem... korraga nähtaval. Tänu sellele on menüü kirjutatud väga väikese kirjaga ja kui sa ei tea täpselt mida sa otsid, siis läheb sul sobiva menüüpunkti leidmiseks parasjagu aega (menüü on tähestikulises järjekorras). Ma arvan, et suurem osa inimesi jääb minuga nõusse, et see on väga halvasti disainitud menüü. Milline oleks siis hästi disainitud menüü? Esimese asjana võiks uurida, et kuidas informatsiooni oleks võimalik grupeerida nii, et see inimeste jaoks loogiline tunduks. 40+ menüü asemel võiks olla vähem kui 10 gruppi ning nendel vajutades avaneb leht kus on tolle grupi alamvalikud. Näiteks kui me vaatame Experdi kodulehte, siis pealehel on 10 gruppi (Telerid, Audio-video, IT, jne...) ning kui sa näiteks Audio-video nupu peal vajutad, siis tuleb alammenüü nähtavale. Seal on veel omakorda asi jagatud loogilistesse gruppidesse, mis muudab soovitud asja ülesse leidmise palju lihtsamaks (et kõigepealt vaatad oranži kirjaga gruppide nimetusi ning kui leiad sellise grupi kuhu sinu otsitav asi võiks kuuluda siis vaatad mis valikud selle grupi all on). Siinkohal lisaks ma omalt poolt, et mõnes kohas piisab hiirega menüü peale minekust, et alammenüü lahti tuleks aga mina eelistan seda süsteemi, kus tuleb ikka hiirega vajutada. Põhjuseks jällegi kasutusmugavus... kui sa ikka hiirega lahti menüü vajutad, siis ei lähe ta ise kohe kinni kui sa kogemata kursori valesse kohta viid (mobiiliga ka lihtsam kasutada).
Kolmandaks tooks ma välja sellise asja nagu responsive design. Asja mõte on siis selles, et kui ma vaatan näiteks suurel ekraanil (desktop pc), siis oleks üks disain aga kui ma avan sama asja tahvelarvutis, siis muutuks lehe disain vastavalt ekraani suurusele (samamoodi kui ma näiteks veel väiksemale ekraanile liigun). Ma isiklikult seda surmapatuks ei pea kui veebilehel mobiili jaoks eraldi versiooni ei ole (mõnel lehel näiteks ma lülitan telefonis, et ta desktop versiooni annaks, sest mobiili versioon on kas halvasti disainitud või lihtsalt väga harjumatu). Samas tänapäeval liigutakse ikka selles suunas, et mobiili pealt peaks olema asi (normaalselt) vaadatav. Super leht paneb sellega aga veel rohkem puusse. Ma alguses ei pannud tähele (sest sellel lehel on nii palju asju valesti) aga all ja paremas ääres olid päris suured kerimisribad. Nagu välja tuli on seal lehe laius ja pikkus käsitsi määratud... kui ma lähtekoodi vaatasin, siis paistis, et leht on sätitud 3500x2587 suurusega. Jällegi, mina kui amatöör veeblehtede tegemises olen ka katsetamise käigus teinud fixed width lehe aga ma valisin just vastupidi veidi väiksema suuruse... et ka väiksematel monitoridel leht ära mahuks... antud juhul ma ei kujuta ette, et kust selline suurus võeti (kas "disaineril" oli nii suur monitor või võeti lehe suurus selliselt, et kõik lehele ära mahuks vms). Mul on hetkel 14" laptop ees ja horisontaalselt on koduleht peaaegu kolm korda laiem kui mu ekraan. Kõige lihtsam näide responsive design-ist... võtke lahti näiteks Youtube ja muutke akna suurust järjest väiksemaks. Samal ajal jälgige kuidas leht muutub (millised nupud on, kus nad asetsevad jne.). Ma tean, et osadel inimestel on kinnisideeks, et veebileht peaks igal pool samasugune välja nägema aga ma usun, et ei pea.
Probleeme jagub sellel veebilehel veel aga rohkem ma hetkel välja tooma ei hakka, sest see kirjatükk hakkab õige pikaks juba venima. Eespool toodud näidete puhul ma muidugi ei väida, et nood lehed 100% hästi disainitud on vaid ma vaatlesin ainult konkreetset (võrreldavat) elementi nendelt lehtedelt.
No comments:
Post a Comment