# B.4 Kasutajaliides ja veebidisain

Selle teema materjale läbi töötades õpid tundma kasutajaliidese ja veebidisaini põhimõtteid.

# B.4.1 Inimese ja arvuti vastasmõjud: juhtnöörid ja standardid

Selle alateema materjale läbi töötades õpid tundma vastasmõjude võimalusi ning nende tehnilisi lahendusi.

# B.4.1.1 Kommunikatsiooniteooria põhimõisted: saatja, sõnum, vastuvõtja

Selles peatükis tutvud info edastamise mudeli põhimõistetega.

# Info edastamine

Kasutajaliidese disain on seotud selliste mõistetega nagu kommunikatsioon ja info edastamine, millede põhieesmärgiks on võimaldada kasutaja koostöö arvuti ja teiste kasutajatega.

Kommunikatsiooniprotsess meenutab postiteenust:

1. saatja peab saatma saajale teate
2. teade edastatakse saajale arusaadavas kontekstis
3. saaja on võimeline teadet lugema (dešifreerima)
4. teade saatjalt saajale edastatakse "vahendaja" ehk serveri kaudu, mis täidab postiljoni rolli.

Informatsiooni võib edastada erinevates vormingutes:

1. tekstina
2. heli ja pildina.

Kommunikatsiooni peetakse edukaks, kui info edastati saatjalt saajale, saaja sai aru, mida saadeti ja dešifreeris selle korrektselt. See väide kehtib nii tehnoloogilises mõttes (näiteks raadiosaade), kui ka psühholoogilises (inimestevaheline suhtlemine).

Tähtis on veenduda, et saaja omab teate lugemiseks piisavaid tehnilisi vahendeid. Näiteks helifaili elektronpostiga saatmisel peab veenduma selles, et saajal on seade, millega see maha mängida. Vastasel juhul ei saa teate edastamist edukaks lugeda, sest saaja ei saanud vajalikku infot kätte.

# Shannon-Weaveri mudel

Termin "kommunikatsioon" eeldab, et info edastatakse kujul, mis on arusaadav nii saatjale kui saajale. Kõike seda kirjeldab kommunikatsiooniteooria.

Selles teoorias kirjeldatavateks objektideks on teade, saatja ja saaja. 1949. aastal pakkusid Claude Elwood Shannon ja Warren Weaver välja matemaatilise mudeli, mis kirjeldas lineaarset teate edastamist ja kommunikatsiooni põhiobjekte.

Mudel sisaldab viit järjestiku elementi: infoallikas, edastaja, sidekanal, vastuvõtja ja sihtkoht. See on lineaarne mudel.

Edastatavat infot nimetatakse teateks. Teade liigub infoallikalt edastaja kaudu sidekanalisse ja sealt omakorda saajale.

Lisaks defineeris Shannon ka müra (hiljem seoti see entroopia ja vastupidi negentroopia mõistega) ning liiasuse mõiste.

Entroopia (müra) on kommunikatsiooniteoorias seotud välisfaktoritega, mis moonutavad teadet, rikuvad selle terviklikust ja saaja poolt vastuvõtmise võimalikkust. Igat müraga kanalit iseloomustab selle info edastamise piirkiirus (Shannoni piirväärtus). Edastamise kiirus, mis on piirkiirusest suurem, tekitab vigu. Samas võib kiirus läheneda piirväärtusele altpoolt ükskõik kui lähedale ning vastava kodeeringuga on võimalik saavutada väga väike vea tõenäosus ka suvalise mürasisaldusega kanalis.

Negentroopia (negatiivne entroopia) on seotud juhtumitega, kus mittetäielik või moonutatud teade on vastuvõtja poolt kätte saadud tänu viimase võimekusele vigast teadet lahti kodeerida.

Liiasust , ehk teate elementide kordust, mille eesmärgiks on kommunikatsiooni ebaõnnestumise ennetamine ning mis on entroopiavastane vahend, demonstreeritakse tavaliselt inimkeelte näidetel. Arvatakse, et kõikides keeltes on liiasuse tase umbes pool kogu infost. Kui kustutada tekstist või raadiosaatest pooled sõnad, on sellest arusaamine siiski võimalik. Üheks näiteks võib olla ka telegramm, kus pooled sõnad puuduvad, kuid teksti sisu on ikkagi mõistetav.

Teiselt poolt on liiasus kasutajaliideste disainimisel täiendava müra allikaks. Seda juhul, kui sõnumi sisu ise sisaldab müra.

Katsetage enda peal liiasust – ühte inimkeele põhiomadust – proovige lugeda teadet, millest osa on vihmaga maha pestud.

Kasulik teada: http://en.wikipedia.org/wiki/Shannon-Weaver_model

# B.4.1.2 Kommunikatsioon ja informatsiooni edastamise efektiivseimad viisid

Selles peatükis tutvud info edastamise võimalustega tsüklilise protsessina.

# Osgood-Shramm'i mudel

# Info edastamine internetis

# B.4.1.3 Kasutajaliides ja selle erinevad tüübid (tekstiline, graafiline, heliline)

Arvutisüsteemidel on mitmeid erinevaid tüüpi liideseid. Tehnilised liidesed võivad ühendada erinevaid arvutisüsteeme omavahel või füüsiliste protsessidega, näiteks temperatuurianduriga. Riistvaraliidesed ühendavad arvuti erinevaid seadmeid omavahel ja vooluallikaga. Rakendusliides (application programming interface e. API) on operatsioonisüsteemi või rakendusprogrammiga määratud reeglistik, mille alusel rakendusprogramm kasutab operatsioonisüsteemi või teise rakendusprogrammi teenuseid. Kõigi nende liidestega suhtleb kasutaja aga ainult kaudselt, tehes seda kasutajaliidese kaudu. Arvutisüsteemi kasutajaliides võimaldab kasutajal suhelda nii operatsioonisüsteemi kui rakendusprogrammidega, olles ka ise samal ajal programm kui tarkvarasüsteem.

Üldise mõistena on kasutajaliides vahend, mis võimaldab inimesel suhelda masinaga ehk kõik, mida näeme, kuuleme, tunneme. Teised süsteemi osad on harilikult varjatud. Masinaks võib olla nii arvuti, telefon, auto või mistahes elektroonikaseade. Arvutisüsteemi kasutajaliidese välisteks komponentideks loetakse ka ekraani, klaviatuuri, hiirt. Nendeks võivad olla näiteks kõlarid, mikrofon, spetsiaalsed nupud või puutetundlikud seadmed, millelt signaale vastu võetakse. Kasutajaliidese all võib mõista ka sisend- ja väljundseadmeid: ühelt poolt on vaja vahendeid, mis võimaldavad arvutile käske edastada, ning teiselt poolt vahendeid, mis võimaldavad arvuti poolt teostatud operatsioonide tulemust tajuda.

# Graafiline kasutajaliides Graphical User Interface / GUI

Tänapäeva arvutites on enimlevinud kasutajaliidese tüübiks graafiline kasutajaliides, kuna see lihtsustab programmide kasutamist ning võimaldab kuvada graafikat. GUI komponendid on kuvaril liikuv kursor, osutusseade (harilikult hiir), klaviatuur, ikoonid, aknad ja rippmenüüd. Uuemat tüüpi kasutajaliidese seadmed on veel puutetundlik ekraan, puutelaud, krihvel stylus, teleripult, millega saab teksti töödelda, joonistada, navigeerida. Viimased on aga praeguse tehnoloogiaga halvasti integreeritud ja võimalused alles kasutamata. Tuntumad graafilise kasutajaliidesega operatsioonisüsteemid on Windows ja Macintosh.

Joonis 4-3. Mac OS X operatsioonisüsteemi graafiline kasutajaliides

# Käsurealiides Command Line Interface / CLI

Käsurealiides on operatsioonisüsteemi või rakendusprogrammi liides, millele saab klaviatuurilt reahaaval käske trükkida. Kui kursor on ekraanil, tuleb käsk trükkida ning edastada see arvutile sisestusklahvi (enter) abil. Pärast ühe käsu täitmist saab sisestada järgmise. Käsurealiidese osadeks on seega vähemalt klaviatuur ja kursor.

Joonis 4-4. Käsurealiides

# Veebiliides

Ainult veebikeskkonnas töötavate rakenduste kasutajaliideste puhul sõltub lõppkasutaja arvuti operatsioonisüsteemist ainult osa komponente, näiteks nuppude või dialoogiakende välimus. Ülejäänud elementide kujundamise võimalused on piiratud veebisirvijate võimekusega.

Tänapäeval räägitakse kasutajaliideste disainist valdavalt just veebiliideste loomise kontekstis.

# Hääleliides (voice user interface e. VUI)

Häälrakenduste juures on menüüde asemel kuuldavad instruktsioonid, mis on varem salvestatud või reaalajas kõnesüntesaatoriga tekitatud. Samuti reageerib liides kasutaja häälkäsklustele. Hääleliides on populaarne mobiilsetes seadmetes, mille kasutamise ajal võivad käed mõne muu tegevusega hõivatud olla. Hääleliidesed ei ole seni veel kuigi populaarseks muutnud ning puudub tehnoloogia, kus arvuti saaks tervikuna inimkõnest aru. Käskude andmine rääkides võib osutuda väsitavamaks kui ekraanil hiirega klõpsimine, sest viimasel juhul saab teha paralleelselt rohkem toiminguid.

# Käsiliides

Käsiliidese puhul on arvutile võimalik käske anda käeliigutustega. Tegemist on alles tulevikus laiemat kasutamist leidva tehnoloogiaga. Selle rakendamist on katsetatud näiteks virtuaalse reaalsuse kolmemõõtmelises graafikakeskkonnas, milles süsteem oskab teatud hulka liigutusi eristada. Kasutaja saab käeliigutuste abil otse objektidega suhelda, neid valida ja liigutada, samuti menüüvalikuid teha ja kursorit liigutada.

# B.4.1.4 Erinevad kommunikatsioonitehnoloogiad (helid, visuaalsed metafoorid, digitaalsed lõhnad, kompamine)

Peamised tehnoloogiad, millega informatsiooni edastatakse, on olnud seotud meie nägemisega, hiljem kuulmisega. Tekstiliidesed olid esimesed omasuguste seas ning informatsioon edastati tekstina. Tekstist parema arusaamise eesmärgil kasutati mitmesuguseid märgendeid, mis ütlesid lugejale, millise tekstistruktuuri osaga on tegemist – pealkiri, rõhutatus, autor, tsitaat, kuupäev, jne. Graafiliste kasutajaliideste tekkimisel hakkas informatsioon edasi kanduma erinevate muude visuaalsete metafooridena – esialgu kujundatud tekstina, hiljem piltidena. Nii nagu sõna on tähemärkidest moodustatud visuaalne konstruktsioon, mis meie ajus omandab kindla tähenduse, niisamuti võivad informatsiooni edasi kanda ka muud visuaalsed konstruktsioonid. Näiteks Visa logo e-poe lehel annab teavet, et siin saab ostu sooritada krediitkaardiga.

Pilte kasutatakse laialdaselt tekstiliste sõnumite tegeliku tähenduse selgitamiseks. Näiteks kui lausele "Mary had a little lamb" lisada väikese tüdruku ja lambatalle pilt, siis me saame aru, et tegemist on reaga kuulsast lastelaulust, mis on ühtlasi ka esimene salvestatud ja taasesitatud inimkeelne fraas. Kui aga pildil on kujutatud lambakarree, siis on tegelik tähendus teine – "Mary sõi väikese lambaprae".

Tänapäeval on laialdaselt kasutusel informatsiooni edastamine heli abil – alates videosalvestustest kuni konverentskõnedeni.

Vähemlevinud on kasutajaliidesed, mis kasutavad inimeste puutetundlikkust. Näiteks pimedatele on loodud spetsiaalsed ekraanilugerid ja klaviatuurid (ka klaviatuuri katted), mida saab kasutada informatsiooni ülekandmiseks kompamise teel.

Uued väljakutsed on seotud meie lõhna- ja maitsetajudega. Tänapäeval on juba olemas tehnoloogia ja seadmed lõhna edastamiseks internetis. Sisuliselt on tegemist kõlari sarnase seadmega, mis ühendatakse arvutiga USB liidese abil ning mis produtseerib erinevaid lõhnu umbes samamoodi nagu tindiprinter kannab paberile erinevaid värve. Lõhnaseadmes on kassett rohkem kui saja erineva kemikaaliga, millest elektrooniliselt edastatud valemi abil koostatakse unikaalne lõhn. Piiranguks sellise tehnoloogia laiemaks levikuks on praegu hind – vastavad seadmed ja lõhnakassetid ei ole kodukasutajale veel taskukohased. Lisaks on piiratud ka edastatavate lõhnade nüansirikkus – kõrgetasemelisi parfüüme ja eripäraseid toidulõhnu täna veel edastada ei saa.

# B.4.1.5 Kasutajaliidese efektiivsuse testimine võrdluses nõuete ja eesmärkidega

# Kasutatavuse kriteeriumid

Kasutatavuse mõistet saab laiendada viie kriteeriumiga, mille mõõtmisega määratakse kasutajaliidese toimimine:.

• Efektiivsus
• Võimekus
• Kaasamine
• Vigade tolerantsus
• Õpitavus

Efektiivsus on terviklikkus ja korrektsus kasutaja poolt soovitud eesmärkide täitmisel. Mõõdetakse kahte asja – kas kasutaja sai oma soovitud tegevused sooritatud; kas süsteemi poolt tehtud töö on kvaliteetne.

Efektiivsus sõltub suurel määral sellest, milliseid valikuid, millises sõnastuses ja millises kujunduses on kasutajale serveeritud.

Võimekust kirjeldatakse kui kiirust, millega kasutaja sai eesmärgi korrektselt täidetud. ISO 9241 kohaselt on väljendab võimekus kõiki ressursse eemärkide täitmisel, sh aega, hiireklikke ja klahvivajutusi.

Kasutajaliides on kaasav , kui ta on meeldiv ja köitev. Selle omaduse kõige tähtsam osa on visuaalne väljanägemine.

Vigade tolerantsus – ülim eesmärk on veavaba süsteem. Paraku ei eksisteeri päris veavaba süsteemi kasutamist – isegi kui kõik süsteemi komponendid töötavad õigesti, leidub alati olukord, kus viga tekib. Veatolerantne kasutajaliides on disainitud kasutajapoolsete vigade ennetamisele ning aitab vigade esinemisel neid parandada. Hea kasutajaliides käsitleb veateateid liidese loomuliku osana, jagades mitte ainult arusaadavat infot vea olemuse kohta, vaid juhendab kasutajat veaolukorrast väljumiseks.

Nende vigade korral, mis asuvad väljaspool kasutajaliidese ulatust (süsteemsed vead, võrgukatkestused), tuleb kasutajat viisakalt ja asjalikult juhendada.

Õpitav kasutajaliides võimaldab kasutajal teadmisi koguda suurema pingutuseta. Mõõdetakse kahte olukorda – kui kiiresti jõuab eesmärgini esmakordne kasutaja ning kui efektiivselt tegutseb korduvkasutaja. Õpitavust saab suurendada õigeaegsete instruktsioonide, väheste valikute, õige tekstilise ja pildilise semantika kasutamisega.

Mõned näited kasutatavuse kriteeriumite sidumisest kasutajate eesmärkidega:

• Võimekus – "Kasutaja viib registreerumise edukalt lõpule vähem kui 3 minutiga."
• Efektiivsus - "Vähem kui 5% kasutajates kohtab vigu, mis nõuavad tugiisiku sekkumist."
• Kaasavus - "Vähemalt 80% töötajatest eelistab süsteemi kontori külastusele."
• Veatolerantsus – "Süsteem kontrollib üle majutuse ja toitlustuse valikud ning laseb enne registreerimist kasutajal hinnad üle vaadata."
• Õpitavus – "Kasutajad on võimelised boonused välja arvutama ilma välise abi või abimaterjali lugemiseta."

Kasutatavuse efektiivsuse mõõtmise meetodid:

• Võimekus – Aeg (või klikkide, klahvivajutuste, lehekülgede arv) reaalsete ülesannete täitmiseks. Testimisel on vaja kasutada vähemalt töötavat prototüüpi tegelikkusele lähedase andmekooslusega.
• Efektiivsus – Hinnake kui kvaliteetselt eesmärgid saavutati ja kui tihti tekkis kasutamises vigu.
• Kaasavus – Meetoditeks on rahulolu uuringud ja kvalitatiivsed intervjuud.
• Veatolerantsus – Testimisel tuleb kasutada stsenaariume, mis tõenäoliselt põhjustavad vigu.
• Õpitavus – Valige hoolikalt testrühma liikmeid (erinevate kogemuste, oskuste ja ootustega) ja kontrollige testimisel abimaterjalide kasutamist.

# B.4.1 Kordamisküsimused

# B.4.2 Graafiline disain

Selle alateema materjale läbi töötades õpid tundma graafilise disaini põhimõisteid, graafika võimalusi ning nende lahendusi tarkvara juures.

# B.4.2.1 Joonised, pildid, värvid ja animatsioonid – peamised graafilise disaini põhimõtted

Selles peatükis tutvud värvimudelite ja graafikaformaatidega.

# Värvimudelid

Joonis 4-5. Osavärvid. Allikas: http://www.cs.ut.ee/~kerstit/gimp/arvutigraafika.html

Tehnilisel tasemel on tähelepanuvääriline fakt, et kõik värvid (vähemalt need, mida inimese silm eristab) on võimalik kokku segada kolmest põhivärvist.

Need kolm värvi on kunstniku seisukohalt magenta (purpurpunane), cyan (helesinine) ja yellow (kollane).

Füüsiku seisukohalt on need värvid red (punane), green (roheline) ja blue (sinine), mis kannavad ka spektri põhivärvide nimetust.

Värvide esitamine digitaalseadmetes (televisioon, arvuti, video, skanner, fotokaamera, jne) RGB mudelina põhineb kolmel spektri põhivärvil R = red, G = green, B = blue, kus värvide liitmisel tekib valge värv. Sellepärast nimetatakse neid värve ka aditiivseteks (valge saamiseks tuleb värve lisada) põhivärvideks. RGB mudel on värvide segunemine valguskiirguses. Piltlikult võib öelda, et kui valgust üldse ei ole, siis on pimedus; kui kõiki osavärvi valgust on maksimaalselt palju, siis on tulemuseks valge.

Joonis 4-7. CMYK värvimudel. Allikas: http://en.wikipedia.org/wiki/CMYK_color_model

Iga graafikaredaktor on võimeline tekitama suvalist nähtavat värvispektri värvi, muutes selleks punase, rohelise ja sinise värvi intensiivsust. RGB-mudelit kasutatakse värvi näitamiseks põhiliselt arvutiekraanil. Trükkimiseks kasutatakse teist mudelit, mille nimetuseks on CMYK C = Cyan M = Magenta Y = Yellow K = Key, mis põhineb värvide lahutamisele ja on subtraktiivne mudel (valge saamiseks tuleb värve eemaldada). Piltlikult: kui värvi üldse ei ole, siis on valge paber; kui osavärve on maksimaalselt palju, siis on süsimust.

Teoreetiliselt saab musta tulemuse ka kolmest põhivärvist CMY. K ehk Key võeti kasutusele trükitehnoloogia omapära tõttu. Nimelt ei ole paber võimaline vastu võtma maksimaalses koguses CMY värve – paberile tekiks lomp ja tulemus jääks porine. Värvihulga vähendamiseks võetigi kasutusele must värv põhivärvina ja nimetati see võtmevärviks (siit ka nimetus Key).

Kõik värvid veebilehel määratakse RGB-mudeliga, sest värvide kuvamiseks arvutiekraanil kasutatakse just seda tehnoloogiat. Värvide väärtust saab määrata kuueteistkümnend- või kümnendarvuga, aga ka nimetusega.

Näited:

Selleks, et saada valge värv, peab iga põhivärvi väärtus olema maksimaalne.

#FFFFFF /* FF-punane, FF-roheline, FF-sinine */

Nüüd määrame punase värvi samas formaadis:

#FF0000 /* FF-punane, 00-roheline, 00-sinine */

Värvi saab määrata ka kümnendarvuga. Siis näeb see välja nii:

rgb(255,255,255); /* Valge */

Joonis 4-8. Veebivärvide määramine graafikaprogrammis

# Rastergraafika

Andmete graafiline kuju realiseeriti esmakordselt eelmise sajandi 50-ndate keskel suurtel arvutitel, mida kasutati teadustöös ja militaarsetes uuringutes. Sellest ajast on andmete graafiline esitusviis muutunud arvutisüsteemi, eriti personaalarvuti, lahutamatuks osaks.

Arvutigraafikat võib liigendada erinevatel põhimõtetel. Sõltuvalt sellest, kuidas moodustub kujund, eristatakse raster -, vektor - ja fraktaalset graafikat. Eraldi tüübiks peetakse kolmemõõtmelist (3D, Dimension – dimensioon) graafikat, mis väljendab ruumilisi kujundeid kahemõõtmelistel ekraanidel.

Värvikasutuse alusel eristatakse must-valget ja värvilist graafikat. Lähtudes inimtegevuse valdkonnast on saanud oma nimetused inseneri-, teadus- ja veebigraafika.

Joonis 4-9. Rastergraafika koosneb pikslitest. Allikas: http://www.barcode-us.com/digital/graphicFiles.html

Elementaarühikuks on rastergraafikas piksel (ekraanipunkt). Rasterkujutised tuletavad meelde ruudulist lehte, kus iga ruut on kaetud teatud värviga, moodustades kujundi (bitmap). Rastergraafika põhiomadusteks on lahutusvõime ja värvi sügavus.

Värvi sügavus on bittide arv, mis on ettenähtud värvi kodeerimiseks. Koodi pikkus määrab erinevate värvide arvu, mida saab ühes pikselis kasutada. Nii näitab värvi sügavus, mitme erineva värviga on võimalik antud kujutist värvida. Näiteks, kui värvi sügavus on 24 bitti, saab kujutis sisaldada 16,8 mln erinevat värvitooni (2²⁴ ≈ 16,8 mln). Mida rohkem värve on kasutusel kujutise edastamiseks, seda täpsem on info iga pikseli värvi kohta. Samas tuleb arvestada, et rikkamad värvid suurendavad faili mahtu.

Lahutusvõime on pikslite arv pikkuse ühiku kohta, nende tihedus määrabki kujutise kvaliteedi. Kõige tihedamini kasutatakse pikkuse ühikuna tolli, kuid mõnikord võivad esineda ka millimeetrid. Kujutise lahutusvõimet mõõdetakse ühikuga ppi (piksleid tollis).

Mida suuremaks muutub lahutusvõime, seda kvaliteetsemaks muutub pilt, kuid samas kasvab ka faili maht. Sellega peab arvestama piltide loomisel ja redigeerimisel. Kui pilt on mõeldud näitamiseks arvutiekraanil, võib lahutusvõime olla väiksem kui trükitaval pildil (pildi näitamiseks ekraanil on piisavaks lahutusvõimeks 72 ppi, printimisel ja trükkimisel peab see olema 150 ppi kuni 300 ppi (sõltuvalt trükipaberi kvaliteedist).

Rastergraafika eelised:

• suure värvide arvu esitamine
• värvide üleminekute ja varjundite edastamine
• suure hulga väikeste detailide edastamine.

Rastergraafika puudused:

• pildi vähendamisel kvaliteet halveneb, kuna kaovad väikesed detailid
• pildi suurendamisel kvaliteet halveneb, kuna suureneb punkt (raster)
• mida suurem lahutusvõime ja värvi sügavus, seda suurem fail.

Rastergraafika programmid on ettenähtud nii olemasolevate kujutiste (fotod, skaneeritud kujutised) redigeerimiseks, kui ka uute kujutiste loomiseks. Mõned näited: Adobe PhotoShop, Corel PhotoPaint, GIMP.

Joonis 4-10. Vektorgraafika on sama kvaliteediga kõikides suurustes. Allikas: http://www.barcode-us.com/digital/graphicFiles.html

# Vektorgraafika

Vektorgraafika elementaarühikuks on joon (sirge või kõver). Kujutised ehitatakse joontest ja kõik parameetrid määratakse arvude ja valemitega koordinaatsüsteemi suhtes (joone pikkus, nurk telgede suhtes; ringjoone keskpunkti koordinaadid, selle raadius; valem kõvera kirjeldamiseks). Kujutise suurendamisel või vähendamisel arvutatakse kõik parameetrite väärtused uuesti, tänu millele pildi kvaliteet ei muutu.

Vektorgraafika eelised:

• võib teisendada, suurendada, vähendada kujutist, säilitades selle kvaliteedi;

• väiksem fail, kuna andmetena salvestatakse mitte kogu kujutist vaid ainult vektori koordinaadid.

Vektorgraafika puudused:

• võimatu on luua selliseid detailirohkeid kujutisi nagu fotod.

Vektorgraafika programmid on mõeldud kujutiste loomiseks. Näideteks on Corel Draw, Adobe Illustrator, Xara Xtreme.

# Graafikaformaadid

# GIF (CompuServe Graphics Interchange Format)

Firma CompuServe poolt väljatöötatud formaat rastergraafika edastamiseks võrgus, GIF-formaat ei sõltu riistvarast. Ta kasutab LZW-pakkimist, mis lubab edukalt pakkida faile suurte ühevärviliste pindadega (logod, pealkirjad, skeemid). GIF-formaat lubab salvestada kujutist "üle rea" (Interlacing), tänu millele on võimalik taastada kogu pilt, kuid väiksema lahutusvõimega. Seda võimalust kasutatakse laialdaselt internetis. Alguses näete pilti robustselt, kuid uute andmete saabumisega pildi kvaliteet paraneb. GIFis võib ühe või rohkem värve deklareerida läbipaistvaks, siis ei ole neid interneti brauseriga ja mõne teise programmiga näha. Läbipaistvus tagatakse lisa Alfa-kanaliga, mida salvestatakse koos failiga. GIF-fail võib sisaldada ka mitut rasterpilti, mida brauser laeb alla ükshaaval, failis määratud sagedusega. Sellist faili nimetatakse GIF-animatsiooniks. GIFi põhipiirang seisneb selles, et kujutist saab salvestada ainult 256 värvi režiimis.

# PNG (Portable Network Graphics)

PNG on hiljuti väljatöötatud formaat, mis peab asendama GIFi. Kasutab kadudeta pakkimist. Värvi sügavus võib olla suvaline kuni 48 bitti, kasutusel on Interlacing, mitte ainult ridade, vaid ka veergudega, toetab sujuva üleminekuga läbipaistvust. PNG-formaadiga failis salvestatakse info gamma-korrektsioonist. Gamma on üks arv, mis iseloomustab arvuti ekraani helenduse sõltuvust pingest kineskoobi elektroodidel. See arv lubab korrigeerida kuvamisel pildi eredust. Vajalik on ta selleks, et ühte tüüpi arvutiga tehtud pildid paistaks samasugused ka teist tüüpi arvutite ekraanidel. Nii on see omadus abiks WWW põhiidee rakendamisel, milleks on info peegeldamise sõltumatus riistvarast. PNG-faile saab luua enamikus graafikaprogrammides.

# JPEG (Joint Photographic Experts Group)

Tegelikult ei ole JPEG formaat, vaid pakkimise algoritm, mis ei põhine ühesuguste elementide otsimisel, nagu RLE ja LZW, vaid pikslite erinevusel. JPEG otsib sujuvaid värvimuutusi ruudus 9x9 pikslit. Tegelike väärtuste asemel salvestab JPEG pikselist pikselisse muutuse kiirust. Algoritmi seisukohalt üleliigne värviinfo jäetakse välja, asendades mõned väärtused keskmistega. Mida suurem on pakkimise tihedus, seda rohkem andmeid jääb välja ja seda madalam on pildi kvaliteet ning väiksem on fail.

Kasutades JPEGi võib saada 10–500 korda väiksema faili kui TIFF! Formaat riistvarast ei sõltu, PC ja Macintosh toetatavad seda täielikult.

JPEGga pakkides annavad parema tulemuse fotod, sest nendes on rohkem värviüleminekuid, logode ja skeemide ühevärvilistel pindadel võivad tekkida häired. Paremini pakitakse suurema lahutusvõimega (200–300 ja rohkem dpi) kujutisi kui väiksema resolutsiooniga (72–150 dpi) pilte. Suurema resolutsiooniga failis on üleminekud pehmemad, sest töödeldavaid 9x9 ruute on rohkem. JPEG-formaadis tuleb salvestada vaid töö lõplik variant, sest iga salvestamisega läheb kaduma andmeid.

# B.4.2.2 Piltide ja värvide kasutamine

Graafilise kujundi tajumine sõltub paljus selle värvist. Värv teeb kujundi ilmekamaks, edastab tuju, teravdab tunnetamist, annab vormile erilise tähenduse.

Värvikeskkond mõjutab inimest pidevalt: värvikarakteristik on häälel, emotsioonidel, tujul ("ergas hääl", "helesinine unistus", "must masendus").

Värvi tähtsaks omaduseks on tekitada emotsioone teate saajale. Emotsionaalne efekt võib olla seotud saaja kultuurilise kuuluvusega. Näiteks, lääneriikides sümboliseerib valge värv puhtust ja seda kasutatakse tihti pulmades, kuid idas sümboliseerib see muret, värvi puudumist ning on kasutusel matustel. Mõnedeks tüüpilisteks reaktsioonideks värvile on erutus (punane värv), vaikus, rahu (sinine ja helesinine värv), lootus (roheline).

Värvil on kolm atribuuti:

• Värvitoon on selline atribuut, mis lubab eristada neid kui punast, kollast, rohelist, sinist või mõnda vahepealset värvi. Värvitooni erinevus sõltub eelkõige silma tabava valguslaine pikkusest. Visuaalselt saab värvitooni kujutada ringjoonena, mis läheb punasest roheliseks, siis siniseks ja tagasi punaseks.
• Heledus puudutab tooni heledust või tumedust. See on määratud peegeldusega füüsilisest pinnast, millele valgus satub. Mida suurem heledus, seda heledam värv.
• Küllastatus on värvi intensiivsus. Seda mõõdetakse kui antud värvi erinevust sama heledusega hallist. Mida madalam küllastatus seda hallimaks muutub värv, kui küllastatus on võrdne nulliga muutub värv halliks.

Joonis 4-11. Kromaatilised ja mittekromaatilised värvid

Mittekromaatilisteks värvideks on valge, must ja nende vahepealne hall. Nendel värvidel ei ole värvitooni ega küllastust.

Kromaatilised värvid on kõik valgest, mustast ja hallist erinevad värvid, ehk kõik, mida me nimetame värviliseks.

Värv sõltub mitte ainult füüsilistest nähtustest vaid ka värvitaju psühholoogilistest seadustest. Kõrvuti asetsevad värvid mõjutavad teineteist. Meie silmade värvitaju sõltub sellest, millised värvid antud värvi ümbritsevad.

Valge ruut mustal taustal tundub suurem, kui samasugune must ruut valgel taustal |

Hall värv sinisel taustal saab oranži varjundi, oranžil taustal aga sinise varjundi |

Tumedam oranž värv hallil taustal tundub erksam kui sama värv heledamal oranžil taustal |

Oranž värv punasel taustal tundub kollasem, kollasel taustal punasem

Joonis 4-12. Värvide vastastikuse mõju näited

William von Besoldt, tuntud 19. sajandi kanga disainer, avastas, et isegi vaid ühe värvi muutmine võib muuta kompositsiooni tundmatuseni.

Joonis 4-13. Värvikompositsiooni muutumine ühe värvi asendamise tulemusel.

Antud reegel kehtib pealmiselt kompositsiooni dominantvärvidele. Nii asendati toodud näites erkkollane taustavärv mustaga ja kõik teised värvid jäid samaks. Tulemusena ühed varjundid, vormid ja mustrid tõusid esile, hakkasid domineerima, teised aga jäid vastupidi tahaplaanile.

"Besoldt efekti" saab veel selgemalt demonstreerida järgmistel kujunditel. Kujunditel on erinev vaid triipude värv: ühel on see sinine, teisel kollane. Kujundi tunnetamine muutub kardinaalselt.

# B.4.2.3 Pilditöötlemise vahendid

Põhilised veebidisaini jaoks vajalikud rastergraafika töövõtted on järgmised:

• Pildi suuruse ja lahutusvõime määramine,
• värvitasemete korrigeerimine,
• kontrastsuse ja heleduse korrigeerimine,
• läbipaistvuse loomine (sh piltidele erineva visuaalse vormi andmine).

Tihti läheb vaja ka piltide masstöötlemist, näiteks albumite loomisel.

Pilditöötluseks on olemas suur valik töövahendeid, mis jagunevad kahte suurde gruppi: kommertstarkvara ja vaba lähtekoodiga tarkvara. Esimest gruppi iseloomustab see, et tarkvaral on üks arendaja. Vaba lähtekoodiga tarkvara arendab suurem huviliste (sageli vabatahtlike) grupp.

Vaba lähtekoodiga tarkvara on kõikidele kasutajatele tasuta isiklikuks kasutamiseks. Ka kommertstarkvarade seas on hulk töövahendeid, mis on tasuta kasutamiseks.

Kommertstarkvarade lipulaev pilditöötluses on Adobe Photoshop ning spetsiaalselt veebidisaini jaoks mõeldud Adobe Fireworks. Paraku on Adobe tarkvarad isiklikuks kasutamiseks kallid.

Tasuta kommertstarkvaradest on populaarsemad IrfanView ja Picasa. Avatud lähtekoodiga tarkvaradest on parim Gimp, mis oma võimekuse osas on sarnane Photoshopiga.

Detailse ülevaate graafikaprogrammide sobivusest, võimekusest ja litsentsidest saab Wikipediast: http://en.wikipedia.org/wiki/Comparison_of_raster_graphics_editors

# B.4.2 Kordamisküsimused

# B.4.3 Veeb ja hüpermeedia: võimalused ja piirangud

Selle alateema materjale läbi töötades õpid tundma veebi ajalugu ja tähtsust, lehestiku ja lehekülgede põhikomponente ning veebilehtede rolli mitmesuguste organisatsioonide juures.

# B.4.3.1 World Wide Web ajalugu

Veeb ehk web / World Wide Web / WWW ehk on üks paljudest interneti teenustest.

# Interneti sünd

Internet ise sai alguse 2. septembril 1969. aastal kui California ülikooli teadlasel õnnestus esmakordselt kahe arvuti vahel andmeid edastada. Esialgu kandis võrk nime ARPANET (Advanced Research Projects Agency Network). Eesmärgiks oli luua sidevõrgustik, mis töötaks edasi ka siis, kui mõni selle osa rivist välja viia. Silmas peeti muidugi tuumasõja ohtu.

Esimesena loodi side California ülikooli (Los Angeles) ja Stanfordi uurimisinstituudi vahel, 1969. aasta lõpuks ühendati võrku ka California ülikool Santa Barbaras ning Utah ülikool. 1971. aastaks oli ühendatud 15 erineva asutuse 23 arvutit ning 1983. aastaks oli võrku ühendatud arvuteid juba 500.

1973. aastal mõeldi välja FTP (File Transfer Protocol) protokoll, mis võimaldab andmete ülekannet erinevate internetikeskkondade vahel ning võimaldab ka veebilehtede üleslaadimist, publitseerimist veebiserveritesse.

Eesti ühendati ülemaailmsesse võrku (sel ajal küll FIDONET) 1990. aastal ning esimene TCP/IP ühendus käivitati Eesti ja muu maailma vahel 26. märtsil 1992.

# Veebi sünd

1989. aastal pakkus Tim Berners-Lee koos oma kolleegidega Euroopa tuumafüüsika laboratooriumist (CERN) välja uue infovahetuse protokolli. Mõeldi välja hüpertekst hypertext, tekst kus mingi võtmesõna kaudu saab pöörduda sellega seotud dokumendi juurde) ja hakati teadusdokumente hüpertekstiks ühendama - linkima. Esialgu kasutati uut süsteemi vaid tuumafüüsika alase info levitamiseks aga peagi lisandusid teised valdkonnad ning tekkis akadeemiliste infomaterjalide võrk. Sellest sai 1991. aastaks World Wide Web.

Esialgu oli WWW vaid tekstipõhine. 1993. aastal aga lõi Marc Andreessen oma meeskonnaga NCSA-s (USA National Center of Supercomputing Applications) valmis graafilise kasutajaliidesega veebilehitseja (browser) Mosaic. See võimaldas veebilehtedele ka pilte lisada. Peagi lõi Andreessen järgmise veebilehitseja – Netscape, mis nautis turuliidri positsiooni, kuni 1998 tõi Microsoft turule Windows 98 operatsioonisüsteemi, millega oli integreeritud veebilehitseja IE (Internet Explorer).

Sellest ajast peale on toimunud konkurents erinevate veebilehitsejate vahel, järjest on loodud võimalusi, mida üks veebilehitseja toetab ja teised mitte, huvitav aga kasutajatele ning veebiloojatele väga tülikas.

Veebilehed talletatakse veebiserverites, mis neid maailmale edastavad. Veebiserverite juhttarkvaradest on tuntud näiteks Internet Information Service (IIS) Microsoftilt ja Apache HTTP server, mis töötab Linuxi kui ka Windows keskkonnas. Leheküljed paigutatakse serveris spetsiaalsesse kataloogi, mille lugemisõigused on ka väljastpoolt pöörduvatele kasutajatele.

Veebiserverid kasutavad veebilehtede edastamiseks klientidele (veebilehitsejatele) HTTP protokolli HyperText Transfer Protocol.

Igal veebilehel ja muul ressursil veebis on oma aadress ehk URL / Uniform Resource Locator, mis koosneb domeeninimest ning vajadusel alamkataloogi ja/või failinimest ning mille ette kuulub kasutatava protokolli tähis (veebilehtede puhul http). Näiteks:

www.domeen.ee/alamakataloog/veebileht.html

Selleks, et kõik veebilehed käituksid ühtemoodi ja erinevad veebilehitsejad saaksid neid samal viisil näidata, on loodud veebistandardeid ja reeglistikke haldav World Wide Web Consortium (W3C, http://www.w3.org). W3C poolt kehtestatud standardite järgimine tagab veebikülastajatele parima kasutajakogemuse.

# Veebidisaini esimene põlvkond

Esimese põlvkonna veebilehtedeks loetakse aastatel 1991 – 1994 loodud lehti. Märksõnaks oli: "Tee leht valmis ja kasutajad tulevad". Selle aja veebilehed olid peamiselt staatilised ning kujunduselt väga lihtsad, sisaldades vaid pealkirju ning tekstilõike, vahel ka viiteid teistele veebilehtedele. Väheseid tehnoloogilisi võimalusi "kompenseeriti" aga kirjude taustapiltide jms abil. Levinud olid inimeste isiklikud kodulehed, mille täna on suures osas asendanud ajaveebid (blog).

Tolle aja veebilehtede kasutajamugavuse suurimaks piiranguks oli tehnoloogia. Turvalisus ja privaatsus olid suureks probleemiks, kuna nõudsid tehnoloogiat, mis ei olnud veel saadaval.

Veebilehtede loomine käis sõna otseses mõttes käsitsi arvutitele arusaadavat HTML koodi kirjutades, veebilehitsejaid oli aga mitmeid erinevaid ning puudusid koodistandardid, mis tagaksid veebilehtede ühtse väljanägemise kõikjal.

Esimese põlvkonna veebilehti iseloomustavad kõige paremini järgnevad omadused:

• Vähe värve, kuvarid olid väikesed ja näitasid sageli ainult mustvalget pilti
• Andmemahud olid väikesed, lehed lihtsad. Internetiga ühendumiseks kasutati modemeid ja telefoniliine, mille kiiruste juures kuluks täna mõne veebipõhise ajalehe avalehe avamine aega mitmeid minuteid.
• Väga palju kasutati kolmandate osapoolte standardiseerimata laiendeid. Seetõttu paljud lehed erinevate veebilehitsejatega ei töötanud
• Veebilehtedele sisestatud informatsiooni edastati e-posti abil, kuna puudus võimalus info salvestamiseks andmebaasidesse

Joonis 4-14. Microsofti esimene koduleht. Allikas: http://www.microsoft.com/misc/features/features_flshbk.htm

Tolle aja veebilehed uuenesid harva, eelkõige kuna käsitsi HTMLi muutmine oli ebamugav, pealegi tol ajal piisas ka lihtsalt veebis olemas olemisest.

# Veebidisaini teine põlvkond

Veebidisaini esimese lainena jõudsid veebi entusiastidest kasutajad isiklike veebilehtede ning lingikogudega. Järgmisteks tulijateks said ettevõtjad, sest levis tõdemus, et kui sind ei ole veebis, siis sind ei ole olemas! Seega märksõnaks "Reklaami seda, mida müüd, veebis ja kasutajad tulevad!".

Veebilehed hakkasidenam keskenduma sisule ja külastajatele – lisandusid külalisteraamatud ning alustati külastajate arvu järgimist. Mitmekülgsemaks muutus ka disain. Lihtsad pealkirjad ja tekstilõigud asendasidvärvilised ja vilkuvad tekstid/pidid, andmetabelid, reklaambännerid.

Veebilehtede loomine oli nüüdseks samuti lihtsam, sest eksisteerisid mitmesugused veebitoimetajad HTML editor, mis päästsid kasutajad käsitsi koodikirjutamisest. Jätkuvalt oli probleemiks standardite puudumine. Tolleaegsete brauserite turuliidrid Internet Explorer ja Netscape, kuvasid tihtilugu HTMLi erinevalt ning võimaldasid laiendusi, millest vaid üks lehitseja aru sai. Seetõttu oli aina keerukam luua veebilehti, mida näidataks ühtmoodi kõikjal.

Joonis 4-15. Teise põlvkonna Microsofti veebilehe näide. Allikas: http://www.microsoft.com/misc/features/features_flshbk2.htm

# Veebidisaini kolmas põlvkond

Kolmanda põlvkonna veebilehtede kujundus ja struktuur sõltus lehe eesmärgist, enam ei keskendutud niiväga hetkel kuumale tehnoloogiale vaid sisule ning mis on just selle kuvamiseks parim viis. Aina olulisemaks muutus navigatsioon - veebilehtedel oleva info struktureerimine ning selle kiiresti ülesleidmine.

Populaarsust võitsid kindlale sihtgrupile suunatud veebilehed – näiteksportaalid ja kommuunid, kujunduses hakati aina enam sisu jaotama tulpadesse.Veebi muutis elavamaks ning vahetumaks uus tehnoloogia Macromedia Flash, populaarseks said tervituslehed (intro).

Kolmanda põlvkonna veebilehtede loomine oli eelnevatest märgatavalt hõlpsam, seejuures oli kujunduse jaoks palju rohkem võimalusi. Varasemast olulisemaks sai aga informatsiooni värskus ning veebilehtede uuendamine. Selle lihtsustamiseks alustati kujunduse ning sisu eraldamisega – kasutusele võeti CSS stiililehed, mis võimaldasid need kaks hoida erinevates failides ning emba-kumba teist puutumata muuta.

Joonis 4-16. Kolmanda põlvkonna Microsofti leht. Allikas: http://www.microsoft.com/misc/features/features_flshbk2.htm

# Veebidisaini neljas põlvkond

Nüüdseks on enamik veebilehti paika saanud oma sihtgrupi ning sisu. Järgmisena on vaja viimistleda kasutusmugavust ja juurdepääsetavust.

Neljanda põlvkonna veebilehtede hulka kuuluvad Web 2.0 rakendused. Selle põlvkonna kujundus on tõepoolest interaktiivne – olulise sisuna on veebi liikunud videod. Tihti kohandub veebilehe kujundus vastavalt külastaja rollile või tegevusele, samuti võib ühel veebilehel olla mitu erinevat kujundust tagamaks ühtmoodi head kasutajakogemust olenemata sellest, kas veebilehte külastatakse kasutades lauaarvutit, taskus olevat nutitelefoni või elutoas pesitsevat mängukonsooli.

Oluliseks on saanud ka juurdepääsetavus accessibility– kui hästi on veebilehe sisu edasiantav vaegnägijatele kasutades ekraanilugeja tehnoloogiaid. Hästi kujundatud lehed püüavad infot visuaalselt struktureerida ning kasutada intuitiivset navigatsiooni igal lehel. Tähtis on vastavus standartidele, et siis veebileht näeks kõikides standardeid toetavates veebilehtedes välja just nii nagu kujundaja ette on kujutanud.

Veebilehed pole enam vaid staatilised ressursid, mida ainult tarbitakse. Veebilehe külastaja on üks paljudest, kes loob selle sisu. Wikid ja ajaveebid annavad igale inimesele võimaluse avaldada oma arvamust ning jagada oma mõtteid. Üks veebileht ei uuene enam mitte iga kuu või päev vaid iga sekund.

Oluliseks veebi osaks on saanud sotsiaalvõrgustikud (Facebook, Twitter, Orkut, Rate jpt.), mis toovad kokku ühesuguste huvidega inimesi ja võimaldavad olla pidevalt kursis oma sõprade ja tuttavate igapäevaste toimetustega. Värskeks trendiks on asukohapõhised sotsiaalvõrgustikud nagu Foursquare ning Gowalla, mis võimaldavad igal hetkel leida lähedalasuvaid sõpru ning avastada ümberkaudsete kaupluste parimaid pakkumisi.

Joonis 4-17. Neljanda põlvkonna Microsofti leht. Allikas: http://www.microsoft.com/en-us/default.aspx

# Muud veebitehnoloogiad

# Veebidisaini tulevik

# B.4.3.2 Hüpertekst ja hüpermeedia ning nende tähtsus veebidisainis

Hüpertekst on tekst, mis sisaldab viitasid teistele dokumentidele. Viitade arv dokumendis ei ole piiratud. Hüperteksti mõiste on tihedalt seotud WWWga. Kuid hüperteksti kasutatakse mitte ainult veebis. Klassikaliseks näiteks võib olla entsüklopeedia, kus viitasid kasutatakse sama teksti piires: ühes artiklis on viidad teistele artiklitele.

Hüperteksti struktuur on mittelineaarne. Võrdluseks võib tuua raamatu. Raamatu struktuur on lineaarne, kuna me liigume järjest ühe lehe pealt teisele. Veebis võib igal lehel olla mitu viita, mis viitavad omavahel mitteseotud dokumentidele, mis võivad asuda eri serveritel ja eri kontinentidel (olete kindlasti märganud, et liikudes mööda viitasid avastate ennast saitidel, mis ei ole üldse seotud ei teema ega sisu poolest nende saitidega, kus te paar minutit tagasi olite). Ühe saidi piires moodustavad veebilehed puukujulise struktuuri, kus ülemisel tasemel on pealeht, millelt võib liikuda kõikidesse jaotistesse ja alamjaotistesse.

Hüperlink (viit) tavaliselt erineb ülejäänud tekstist, reeglina on see allajoonitud ja teist värvi. Paigutades hiirekursori viidale, muudab see oma kuju. Hiirekliki tulemusena viidatav dokument avaneb kas samas või uues aknas. Hüperlinkide abil võib viidata nii veebilehtedele kui ka graafika-, audio- või videofailidele. Näiteks, kui hüperlink viitab videoklipile, võib seda kohe ka vaadata (tingimusel, et süsteemis on vastav programm).

Esimene brauser suutis näidata ainult tekste, kõik viidad olid samuti tekstilised. Mosaic brauseri ilmumisega tekis võimalus paigutada veebilehtedele ka graafikat. Tänu graafikale läks navigeerimine lihtsaks. Sujuvalt lisandusid hüperteksti ka muud võimalused - sellised nagu video, audio, erinevad graafilised elemendid, ja hüpertekst muutus hüpermeediaks.

Veebilehti, mis sisaldavad ainult teksti, võib pidada hüpertekstilisteks. Lehed, mis sisaldavad multimeedia komponente, kannavad nimetust "hüpermeedium". Kui edaspidi jääda selle terminoloogia juurde, kuulub enamik veebilehtedest hüpermeediumisse, puhtalt hüpertekstilisi lehti on väga vähe.

# Viitade tüübid

# Veebilehe komponendid

Veebilehe planeerimisel kasutatakse komponente, mis jagunevad püsivateks ja sisust sõltuvateks komponentideks.

Püsivad komponendid on näiteks:

• Päis – lehe ülemine serv, mis sisaldab esmast infot selle kohta, kuhu külastaja sattus.
• Jalus – lehe alumine serv, mida tavapäraselt kasutatakse esmase kontaktinfo ja formaalsete materjalide esitlemiseks (saidi kasutustingimused, reeglid, privaatsusteave, jne).
• Navigatsioonikomponent - võib olla nii horisontaalne kui vertikaalne; kasutatakse ka kombineeritud versioone.
• Sisukaart – levinud abivahend, mida kaasaegsetes veebides kasutatakse püsiva komponendina lehe jaluses.
• Kontaktinfo – esmane kontaktinfo peab kasutajale olema püsivalt kättesaadav.
• Otsing – rohkem kui 100 lehekülge sisaldaval saidil on soovitav kasutada saidisisest otsingut.
• Sisu – sisuala on eraldi komponent, mille sees kuvatakse kõik sisust sõltuvad alamkomponendid.

Sisust sõltuvad komponendid on näiteks: lehe sisu, veateated, abitekstid, vormid, madalama taseme navigatsioon, jne.

# B.4.3.4 Sisevõrgu ja välisvõrgu veebilehtede kasutus ja vajadus ettevõttes

Veebiserver võib asuda nii internetis kui ka kohalikus võrgus. Kui veebiserver asub kohalikus võrgus, võib korraldada ka oma sisevõrgu sarnaselt internetile. Sealjuures osa saidist võib olla avalik (www) ja osa ettenähtud vaid sisemiseks kasutamiseks (intranet).

Intraneti kasutajateks on asutuse töötajad, samas kui saidi avalik osa on mõeldud ettevõtte klientidele. Intranet sisaldab tööks vajalikku infot, kuid see ei tohi olla nähtav klientidele ja konkurentidele.

Välimine ja sisemine saidi osa esindavad kahte erinevat infokeskkonda, kumbki orienteeritud kindlale kasutajate ringile. Iga keskkond tagab erinevate ülesannete lahendamise ja omab erinevaid tehnilisi piiranguid, sellepärast peab lähenemine nende keskkondade projekteerimisele olema erinev. Intraneti kasutajaliidese disain peab erinema avatud saidi disainist, et kasutaja näeks, kus ta antud hetkel asub, kuid mõlema liidese stiil peab olema sama ja lähtuma ettevõtte üldisest disainist. Intraneti väljatöötamisel on tähtis arvestada, et riist- ja tarkvara on ettevõttes ühtlane (kasutusel on sama brauseri versioon, sama platvorm ja operatsioonisüsteem, samad kirjafondid); samas kui interneti kasutajad võivad omada väga erinevaid arvuteid, operatsioonisüsteeme ja brausereid.

# B.4.3.5 Ettevõtte veebisaidi haldamine

Veebisaidi haldamisega on seotud mitmed väljakutsed:

• Kuidas teada, et valmis on saanud õige asi?
• Kuidas teada, et sait täidab oma eesmärke?
• Kuidas kindlaks teha, mis vajab parandamist?
• Kuidas pakkuda kasutajatele väärtust püsivalt ja pikaajaliselt?

Esimesed kolm väljakutset on seotud saidi kasutamise statistika kogumise ja analüüsimisega. Kui sait on valmis ja sisuga täidetud, tuleb selle kasutamist mõõta. Selle jaoks on olemas tasuta ja tasulised tarkvarad. Kõige populaarsem nendest on tasuta Google Analytics. Analytics katab ära enamiku ettevõtete vajadused. Kes soovib sügavamat kasutajate analüüsi läbi viia, nende jaoks on olemas erinevad tasulised versioonid, näiteks Snoobi, Omniture Site Catalyst, Gemius, jt.

Väärtuse pakkumine pikaajaliselt on otseses seoses kvaliteetse sisu loomisega ning saidi pideva täiendamisega. Ärieesmärke täitev veebisait ei saa kunagi valmis – sarnaselt Tallinnaga on seda vaja pidevalt täiendada.

Tänapäeval tuleb lisaks tegeleda veel kasutajate privaatsuse kaitse ning veebisaidi turvalisusega.

# B.4.3 Kordamisküsimused

# B.4.4 Veebidisaini nõuded ja meetodid

Selle alateema materjale läbi töötades õpid tundma veebilehestiku koostamise juures vajalikke etappe.

# B.4.4.1 Sihtrühma vajaduste analüüs

Veebilehe disainimisel on hea tava analüüsida, millised külastajad hakkavad saiti külastama. Et olla kindel saidi loomise eesmärgis (näiteks firma toodete esitamine, online-müük või lihtsalt reklaam), peab disainer töötama koos tellijaga, arvestama kõikide tema soovidega ja looma kujunduse, mis on orienteeritud kindlale saidi külastajate ringile (sihtrühmale). Peale saidi esimese prooviversiooni valmimist peab disainer tegema koostööd sihtrühma liikmetega (prototüübi testimine), kes teevad süsteemi kasutamise käigus märkusi ning avastavad nõrgad kohad protsessides ja kasutajaliideses. Toetudes testi tulemustele jätkab disainer saidi väljatöötamist ning parandab leitud vead.

Saidi analüüsimine ei tähenda alati, et see vastab kõigile kasutatavuse nõuetele ja on kasutajatele mugav. Saidil võivad ikkagi olla puudused, mida ei arvestatud või ignoreeriti. Seepärast on mõistlik teha prototüübi testimist vähemalt kaks korda ning testijate arv ei tohiks olla väiksem kui kuus. Selline testijate hulk on piisav, et esile tuua 90% olulistest vigadest.

# B.4.4.2 Infohulk veebilehel

Sobiva sisustruktuuri valikul tuleb meeles pidada, et ühel lehel ei tohi olla liiga suurt infohulka, sest paberkandjal ja ekraanil nähtava teksti omandamine on erinev. Arvutiekraanilt on suurem infohulk halvemini omandatav, sellepärast tuleb lõhkuda info väiksemateks tükkideks ning rõhutada tähtsamaid tekstilõike. Näiteks, kui saidil on esitatud suur toodete valik, on mõistlik koostada kataloog. Liikudes kataloogis, saab külastaja juurdepääsu lehele konkreetse kauba kirjeldusega, samal lehel on ka viidad kõigile teistele saidi jaotistele.

Jakob Nielsen on läbi viinud uuringuid teksti hulga ja selle loetavuse vahel. Selgub, et mida rohkem on lehel teksti, seda väiksemat osa sellest loetakse. Tervikuna loetakse ainult väga lühikesi tekste. Juba 100 sõna korral on loetavus ainult 50%.

_Joonis 4-18. Teksti hulga ja loetavuse suhe. Allikas: How little do users read?, Nielsen's Alertbox, http://www.useit.com/alertbox/percent-text-read.html

# B.4.4.3 Värvide valik

Veebilehel kasutatud värvid omavad samuti suurt tähtsust. Värvide valikul peab arvestama, et ka värvid on võimelised edastama infot ning hea värvivalik võib saiti oluliselt parandada ja teha see külastajale atraktiivsemaks. Valesti valitud värvid halvendavad saidi omaksvõtmist (näiteks valge teksti paigutamine kollasele taustale teeb loetavuse halvemaks). Omavahel mittesobivate värvide kasutamine võib ühest küljest äratada oma ebatavalisusega külastaja tähelepanu, teisest küljest võib see muuta veebisaidi kasutamatuks.

Ebasoovitav on heleda teksti kasutamine tumedal taustal – meie silmad ei ole harjunud selliseid visuaalseid konstruktsioone kasutama ning teksti omandamine on raskendatud. Raske on ka vastandvärvides kombinatsioonid, näiteks roheline tekst punasel taustal või vastupidi.

# B.4.4.4 Kasutajasõbraliku veebilehe arendamine

Kasutatavuse põhimõte: mida rohkem nõuab või võib nõuda miski ajalisi kulutusi, seda väiksem on tõenäosus, et keegi hakkab seda miskit kasutama.

Steve Krug

Hea kasutajakogemus toetub neljale põhikomponendile:

• Funktsionaalsus functionality. Funktsionaalne asi on spetsiaalne tööriist konkreetse probleemi lahendamiseks. Tarkvara peab tegema seda, milleks ta mõeldud on.
• Ilu beauty. Välimus on väga tähtis. Ilus välimus, hea disain soodustab erilise emotsionaalse suhte tekkimist kasutaja ja toote vahel. Emotsionaalne suhe on see, mis toob kasutaja meie juurde tagasi.
• Atraktiivsus , külgetõmbavus affinity. Midagi erilist, mis paneb kasutaja just seda toodet tahtma. Külgetõmbavus saavutatakse hea välimuse, hea funktsionaalsuse ja tavaliselt veel mõne erilise omadusega, mis muudab toote teiste seas vastupandamatuks.
• Lugu story. Heal kasutajakogemusel on alati olemas lisaväärtus. Kasutajal peab tekkima õige meeleolu toote ostmiseks. Kasutuslugu on sama, mis lugu inimesest, kes kasutab toodet.

Ühestki nimetatud komponendist eraldi ei piisa, et toode oleks edukas. Hea kasutajakogemus tekib kõigi nelja komponendi koostoimel. Head kasutajakogemust pakkuv toode suudab konkurentide seast eristuda, suurendada efektiivsust ning avab uusi ärivõimalusi.

Kaks kõige olulisemat reeglit, mida võiks veebilehe kujundamisel meeles pidada:

• veebileht tuleb luua kasutajatele,
• need inimesed ei mõtle tingimata samamoodi nagu disainer või arendaja.

Eksisteerivad üldised hea kasutajakogemuse reeglid , mida nimetatakse ka kasutatavuse heuristikateks. Reeglid on välja töötanud Jakob Nielsen - maailmas tunnustatud kasutatavuse guru:

• Kasutaja peab saama tagasisidet toimuvast - Keskkond peaks alati kasutajat mõistlikul ajal informeerima süsteemis toimuva kohta asjakohaste teadetega.
• Süsteemi ja päris maailma sobivus - Süsteem peaks alati rääkima kasutaja keeles. Tehes seda sõnade, väljendite ja mõistetega, mis on kasutajale tuttavad. Süsteemile orienteeritud keel ajab kasutaja segadusse. Tuleks järgida päris maailma vestlusi, mis muudavad informatsiooni loomulikuks ja loogiliseks kõigile kasutajatele.
• Kasutaja kontroll ja vabadus - Tihtipeale teevad kasutajad süsteemis vigu. Selle jaoks tuleks neile jätta varuväljapääse, et ei peaks läbima ulatuslikke muudatusi. Tühistamise ja uuesti tegemise funktsioonid on hädavajalikud.
• Järjepidevus ja standardid - Kasutaja ei tohiks mõelda, kas erinevad sõnad, situatsioonid ja meetmed tähendavad kõik sama. Järgi platvormi konventsioone.
• Vigade ennetamine - Veateatest isegi parem lahendus on hoolikult loodud lahendus, mis ei lase veal üldse tekkidagi. Veaaltid olukorrad tuleks elimineerida või üle kontrollida ning anda kasutajale võimalus valida, kas rakendada funktsiooni või mitte.
• Selgus ja intuitiivsus - Kasutaja mälu kasutamist ei tohiks üle koormata. Objektid, funktsioonid ja valikud peaksid olema alati nähtaval või kergesti ligipääsetavad. Kasutaja ei peaks kunagi meelde jätma ühe vaate informatsiooni, et seda järgmises kasutada. Süsteemi kasutamise instruktsioonid peaksid olema alati nähtaval kohal ning kergesti kasutatavad.
• Kasutamise paindlikus ning tõhusus - "Kiirendajad", mis võivad algajale märkamatuks jääda, kiirendavad tihtipeale interaktsiooni edasijõudnute ja süsteemi vahel. Süsteem peaks toetama nii algajaid kui edasijõudnud kasutajaid. Kasutajal peaks olema vabadus kohandada korduvaid funktsioone.
• Esteetiline ja minimalistlik disain - Dialoog ei tohiks kunagi sisaldada ebavajalikku ja kontekstivälist informatsiooni. Iga lõik lisainformatsiooni vähendab põhiinfo olulisust ning vähendab selle üldist nähtavust.
• Aita kasutajatel vigu ära tunda ning nendest välja tulla - Veateated peaksid alati olema selges inimkeeles (mitte süsteemi kood), täpselt ära märkima probleemi allika ning pakkuma välja lahenduse.
• Abi ja dokumenteerimine - Olgugi, et on parem kui süsteemi peaks saama kasutada ilma abiinformatsioonita tuleb seda vahel kasutajale pakkuda. Iga selline info peaks olema kergesti üles leitav ja otsitav, keskenduma kasutaja võimalikele probleemidele, näitama ette täpsed sammud, et leida lahendus ning ei tohiks olla väga mahukas.

Lisaks heuristikatele on olemas veel terve hulk häid tavasid, mis on veebiajaloo vältel välja kujunenud ning oma paikapidavust tõestanud:

• Aseta oma logo ja/või nimetus igale veebileheküljele (lääne kultuuriruumis päises vasakule) ning muuda logo lingiks esilehele (välja arvatud esilehel, kus logo ei peaks olema klikatav: kunagi ei tohiks luua lehele linki, mis viib tagasi samale lehele).
• Otsing tuleks kindlasti lisada kui veebileht sisaldab rohkem kui 100 lehekülge.
• Kirjuta lühikesi ja konkreetseid pealkirju lehtedele. Pealkirjad peaksid selgelt edasi andma lehe sisu ning olema arusaadavad ka kontekstivälistes keskkondades nagu otsingumootorid.
• Struktureeri lehekülg nii, et seda oleks võimalik silmadega skanneerida, et kasutaja ei peaks läbi töötama korraga suuri infokoguseid endale olulise informatsiooni kätte saamiseks. Näiteks kasuta grupeerimist ning alampealkirju, et jaga tekst väiksemateks ja paremini haaratavateks lõikudeks.
• Selle asemele, et kogu info ühele lehele ära mahutada tuleks kasutada linke, et luua lihtne navigatsioon, mis annaks esilehel ühtlasi ka ülevaate, mida kasutaja läbi klikkima hakkab. Oluline on mitte raisata kasutaja aega kui ta peab kogu materjali üksikasjalikult läbi töötama, et leida mõni informatsioonikild.
• Kasuta tootefotosid, kuid hoidu kasutamast suurte piltidega üle kuhjatud lehekülgi. Selle asemel kasuta pisipilte ülevaate loomiseks, mis on lingitud edasi suurematele piltidele. Mõned pildid vajavad isegi suurendatavaid ja keeratavaid lahendusi. Toote esileht peaks olema kiire, ülevaatlik ning piiratud pisipiltide kasutamisega.
• Kui luua pisipildid, siis mitte kasutada lihtsalt skaleerimist. Skaleerimise tulemusel võib väikepilt muutuda lihtsalt pikslimüraks ja kasutuskõlbmatuks. Selle asemele tuleks suurendada detaile, mis algse pildid puhul on olulised ning kasutada selleks kombinatsiooni pildi lõikamisest ning vähendamisest.
• Kasuta linkide puhul lingi pealkirju (link titles), et anda kasutajale vihje kuhu ta klikates satub.
• Tee kindlaks, et kõik olulisemad lehed on ligipääsetavad erivajadustega inimestele. Eriti pimedatele.
• Tee nii nagu teised: kui keegi on loonud mõne interaktsioonielemendi, mis töötab hästi, siis kasuta samu meetodeid. Oluline on ka, et veebilehed käituksid üldiselt võrdlemisi sarnaselt, sest kasutajad ootavad seda. Tuleks meeles pidada Jakob Nielseni kasutajakogemuse põhireeglit: kasutajad on mõtetes alati mõnel teisel leheküljel, mis tähendab, et nad loovad oma ootused teiste juba töötavate lehekülgede baasil.

# B.4.4.5 Peamised veebilehe kvaliteedi kriteeriumid

# Lehe allalaadimise kiirus

Saidi kasutamise mugavus sõltub mitte ainult värvigammast, struktuurist ja navigatsioonist, vaid ka internetiühenduse tüübist. Paljud kasutavad kiiret DSL-ühendust, kuid on ka neid, kes kasutavad telefoniliine, paremal juhul ISDNi või mobiilset internetiühendust.

Saidi loomisel peab arvestama graafika ja muude efektide hulgaga, sest külastaja ei hakka ootama, millal see kõik alla laetakse. Erinevate uuringute tulemusena on selgunud, et külastaja on nõus ootama lehe allalaadimist kuni 10 sekundit. Kui selle aja jooksul ei ole info laekunud, külastaja lihtsalt lahkub. Peale "raske" graafika võib saidi allalaadimist aeglustada ka paljude üksteise sisse paigutatud tabelite olemasolu, sest tabel ei ilmu ekraanile enne, kui on allalaetud kogu selle sisu. Sellepärast tuleb saidi loomisel elementide paigutamiseks kasutades CSSi, mitte tabeleid.

# Ühilduvus erinevate platvormide ja brauseritega

Veel üks kasutatavuse probleem seisneb erinevates brauserites ja operatsioonisüsteemides. Paljud interneti saidid on optimeeritud kindlale platvormile või brauserile. See ei ole parim lahendus, sest siis jääb risk kaotada külastajaid, kes kasutavad, näiteks, teist tüüpi arvutit.

Lehe väljatöötamisel peab võimalusel testima seda erinevates keskkondades, sest sama brauser erinevatel platvormidel võib näidata lehte erinevalt. See aitab vältida probleeme lehe kuvamisega.

Mingil juhul ei tohi kirjutada veebilehele, et see on häälestatud mingisugusele brauserile ning lehe avamiseks tuleks kasutada just seda. Kasutaja peab ise otsustama, mida on tal mugavam kasutada, keegi ei saa sundida teda kasutama programmi, mis talle ei meeldi.

Probleemi lahenduseks on HTMLi ja CSSi standardite järgimine. Standardite loomise ja levitamisega tegeleb World Wide Web Consortium. Kõik spetsifikatsioonid on kättesaadavad http://www.w3.org/

# Kuvamise ja omaksvõtmise eripärad

Lehe disainimisel tuleb arvestada kõikide võimalike probleemidega, millega võib külastaja kokku puutuda. Selliste probleemide hulka kuuluvad näiteks graafika kuvamine, info omaksvõtmine, liikumine mööda viitasid.

Graafiline info ei ole külastajale alati kättesaadav (graafiline väljund on välja lülitatud, külastaja näeb halvasti ja kasutab tekstibrauserit). Sellepärast kõikidele kujunditele tuleb lisada alternatiivtekst (märgendi img atribuut alt). Siis saavad külastajad teada, milline kujund on lehel. Kui navigatsioonisüsteem sisaldab menüüd, mis koosneb graafilistest nuppudest, oleks hea teha ka alternatiivne tekstimenüü (sellise menüü olemasolu on teretulnud ka sisukaardil).

Arvestama peab ka kirja suuruse määramist. Parem on määrata suurus kasutades suhtelisi ühikuid (%), et külastaja saaks vajadusel seda muuta, näiteks suurendada. Absoluutühikutes (px, pt) määratud kirjasuuruseid kasutaja muuta ei saa.

# B.4.4.6 Lihtsalt navigeeritav veebileht

Nagu varem mainitud, peab saidi disainimisel arvestama potentsiaalsete külastajate vajadusi ning näha ette probleeme, mis võivad saidi kasutamisel tekkida. Selleks, et lihtsustada saidi projekteerimist ja kasutamist, tuleb koostada saidi mudel (kaart).

Mudeli loomiseks on olemas meetod, mida nimetatakse kaartide sorteerimiseks card sorting. Sihtrühma liikmetele antakse sisuühikute nimetused eraldi kaartidel ning nad koostavad saidi navigatsiooni vastavalt oma parimale äratundmistele ning eeldustele. Sellisel viisil saadakse navigatsioonile parim vundament. Mudelit kasutatakse selge loogilise struktuuri ja lihtsa ning arusaadava navigatsiooni loomiseks. Heaks tavaks on sait eelnevalt ka testida (prototüübi testimine).

Vaata ka http://en.wikipedia.org/wiki/Card_sorting

Sobiva struktuuri variandi valikul tuleb meeles pidada, et ühel lehel ei tohi olla liiga suurt infohulka, sest paberkandjal ja ekraanil nähtava teksti omandamine on erinev. Arvutiekraanilt on suurem infohulk halvemini omandatav, sellepärast tuleb lõhkuda info väiksemateks tükkideks ning rõhutada tähtsamaid tekstilõike. Psühholoog George Miller leidis, et inimese lühiajaline mälu töötleb maksimaalset infohulka 7±2 ühikut. Sellest tulenevalt on meil raskem kasutada navigatsioonikomponente, kus on rohkem infoühikuid. Näiteks kui saidil on esitatud suur toodete valik, on mõistlik koostada struktureeritud kataloog. Liikudes kataloogis, saab külastaja juurdepääsu lehele konkreetse kauba kirjeldusega, samal lehel on ka viidad kõigile teistele saidi jaotistele.

Vaata ka: http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two

# B.4.4.7 Vahendid veebilehe arendamiseks

# B.4.4.8 Struktuuriskeemi vajadus veebidisainis

Kui saidi struktuurskeem on välja töötatud, võib seda kasutada saidi kaardina, lisades viidad üksikutele elementidele ja luues otsejuurdepääsu erinevatele saidi jaotistele.

Kui saidi struktuur on loodud, võib lisada sellele ka märkmete tahvli storyboard, mis näitab skeemina saidi vormi ja sisu. Tahvel on eriti tähtis saitidel, kus kasutatakse palju animatsioone. Veebisaidi loomisel peab arendama tihedat koostööd kunstnikuga, valmistades kujutiste seeriat, mis illustreerib saidi käitumist selle peal liikumisel, alates pealehest kuni kõikide jaotisteni.

Kõik saidid ei sisalda animatsiooni. Siis tuleb disaineri või kunstniku abiga teha joonis või saidi eskiis, kus on näidatud idee ja lõplik tulemus.

# B.4.4.9 Navigatsioonisüsteemi peamised meetodid

Navigatsioonisüsteeme on erinevaid:

• Lame navigatsioon
• Põimitud navigatsioon
• Maatriks-navigatsioon

# Lameda navigatsiooni

korral juhatatakse kasutaja lineaarselt ja väga kiiresti soovitud leheni. Teistele lehtedele jõutakse tavaliselt esilehe kaudu. Selline navigatsioon sobib väikese mahuga ja lineaarse struktuuriga saitidele. Näiteks sellistele, mis on loodud Wordpressi programmiga ja mis sisaldavad nii veebilehti kui ka blogi – mõlemasse alajaotusesse saab esilehe kaudu.

Joonis 4-20. Lame navigatsioon

# Põimitud navigatsioon

on enim levinud ja see on kasutajasõbralikum kui lame navigatsioon. Põimituse mõte seisneb selles, et kasutaja saab kõikidelt lehtedelt liikuda ükskõik, millisesse saidi ossa. Ei teki olukorda, kus kasutaja "ära eksib".

Joonis 4-21. Põimitud navigatsioon

Suure sisumahuga saitidel võib tekkida probleem, kus navigatsiooniloogika läheb kasutajale keeruliseks ja suure hulga tõttu hoomamatuks. Sellisel juhul on mõistlik kasutada maatriks-navigatsiooni.

# Maatriks-navigatsioon

koosneb mitmetest põimitud navigatsioonidest, mis on piltlikult laotud üksteise peale. Iga alam-navigatsioon teenindab kindlat spetsiifilist hulka sisu. Kasutajat juhitakse õige tulemuseni vastavalt tema kasutusmustrile ning ülearune hulk navigatsiooni kaob pildilt ära – järele jääb ainult kasutajale vajalik osa. Et maatriks-navigatsioon hästi töötaks, tuleb kasutajaid ja nende vajadusi väga hästi tunda.

Joonis 4-22. Maatriks-navigatsioon

Navigatsiooni meetodeid eristatakse ka tehnoloogiliselt:

• Yahoo stiil – kogu navigatsioon koos järgnevate jaotustega on kohe näha. Plussiks on informatiivsus. Miinuseks see, et suurema infohulga korral muutub navigatsioon liiga pikaks ja seega kasutamatuks.
• Ülerullitav (rollover) menüü – alama taseme navigatsioon ilmub nähtavale kui kursor on kõrgema taseme kohal.
• Flash-menüü – navigatsioon on animeeritud Flash või Silverlight tehnoloogias.
• Kokku-lahti menüü – alama taseme navigatsioon avaneb, kui hiirega kõrgemal tasemel klikkida.
• Allakukkuv (drop-down) menüü – navigatsioonielemendid on paigutatud horisontaalselt ning alama taseme navigatsioon avaneb, kui kõrgemal tasemel klikkida. Jääb mulje, et navigatsioon "kukub allapoole lahti".
• Väljalendav (fly-out) menüü – sama nagu allakukkuv menüü, kuid navigatsioon on vertikaalne ning alam tase avaneb kõrvale.

Kasutajatel tehtud testid näitavad, et kõige vähem kasutajate vigu esineb Yahoo stiilis ja allakukkuval menüüdel.

Vaata ka erinevate navigatsioonimeetodite uuringut: http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm

# B.4.4.10 Veebi disainimise meetodid

Veebi disainimiseks kasutatakse järgmisi meetodeid:

• Süžeetahvel (storyboard) – veebilehestiku graafiline skeem, võib olla paberile joonistatud, loodud mistahes graafikaprogrammiga, genereeritud mõne veebiredaktori (HTML editor) poolt.
• Sisukaart (site map) – reeglina tekstipõhine ülesehituse kirjeldus.
• Sõrestikmudel (wireframe) – kest, mis näitab loodavaid veebilehti. Iga leht on joonistatud informatsiooniplokkidena, mis näitavad kus ja kuidas paiknevad erinevad komponendid. Selliselt esitatakse objektide visuaalne paigutus (layout), kuid mitte lõplik välimus.
• Stsenaarium (scenario) – kasutuslugude tekstiline kirjeldus.

# Süžeetahvel

Süžeetahvlit storyboard kasutatakse lisaks sisukaardile, aitamaks teha otsuseid disaini, tehnoloogia aga ka eelarve osas. Hea süžeetahvel pakub kõigile projektiga seotud inimestele selget ülevaadet loodavast veebilehestikust. Süžeetahvlil ei ole näha kõiki üksikuid veebilehestiku lehti, kuid see katab peamised lehestiku funktsionaalsed osad. Reeglina pannakse iga lehe kohta kirja pealkiri ja mõned märkmed tema sisu kohta. Süžeetahvel ei sisalda mingit infot lehtede visuaalse disaini kohta, kuid võimaldab saada ettekujutuse, millised põhielemendid igal lehel olemas on. Süžeetahvli võib sarnaselt sisukaardile luua pliiatsiga paberile joonistades või mõnda graafikaprogrammi kasutades.

Joonis 4-23. Tüüpiline süžeetahvel. Allikas: http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

# Sisukaart

Sisukaart site map on üks kriitilise tähtsusega ja laialt kasutatav vahend veebidisainis. Kuna sisukaart näitab veebilehestiku üldist struktuuri ja hierarhiat, siis kasutataksegi neid veebilehestiku üldise ülesehituse ja navigatsiooni kavandamisel.

Alustada tuleks lihtsast, jämedakoelisest eskiisist, lisades sinna lihtsalt esmaselt planeeritud, olulised lehed. Vältida tuleks detailse info lisamist sisukaardile. Sisukaart muutub ja täieneb projekti edenedes. Sisukaardid on enamasti tekstipõhised, kuid vahetevahel ka graafilised. Iga lehe kohta pannakse kirja pealkiri ning talle viitav link (URL). Töö käigus võivad disainerid sinna lisainfot kirja panna (näiteks lehe olulisus terviklikus veebilehestikus, viimase muutmise aeg, kui sageli seda lehte muudetakse jne). Vägagi sageli lisatakse HTML sisukaart valmis veebilehestikule. See on eriti kasulik, kui veebilehestik sisaldab paljusid lehti, lihtsustab navigatsiooni ning võimaldab ka otsingumootoritel veebilehestikku läbi uurida.

Joonis 4-24. Tüüpiline veebilehestiku sisukaart. Allikas: http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

# Sõrestikmude

Sõrestikmudel (wireframe) veebidisainis on veebilehele paigutatavate elementide skemaatiline esitus. Võtmesõnaks sõrestikmudeli puhul on kiirus. Neid kasutatakse uute ideedega eksperimenteerimiseks, testimiseks ja sobitamiseks, aga mitte kujunduse detailseks kuvamiseks. Kliendiga suhtlemisel lasevad sõrestikmudelid kliendil keskenduda lehe ülesehitusele (layout), laskmata end disainielementidel (pildid, kirjastiilid jt) oluliselt kõrvale kallutada. Sõrestikmudeli loomisel kasutatakse lihtsaid graafilisi kujundeid (mitte reaalseid pilte), lisatakse neile pealkiri. Sõrestikmudelil peavad nähtaval olema kõik tähtsad veebilehe elemendid._

Joonis 4-25. Tüüpiline veebilehe sõrestikmudel. Allikas: http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

# Stsenaarium

Stsenaarium scenario on tekstiline prototüüp, mis kirjeldab loodava veebilehe ülesehitust. Siia alla kuuluvad ka kasutajalood user story, use case - tegevuste, valikute ja tulemuste tekstilised kirjeldused.

# B.4.4 Kordamisküsimused

# B.4.5 Veebilehe loomine

Selle alateema materjale läbi töötades õpid tundma veebilehe koostamise tehnilisi külgi – peamiselt HTMLi võimalusi, aga ka muid vahendeid.

# B.4.9.1 Märgendikeeled

Selles peatükis tutvud veebilehestike koostamisel kasutatavate märgendi-, kujundus- ning skriptkeelltega.

# HTML

Märgendite liigid:

• üksikud märgendid <tag /> ei nõua sulgemismärgendit, näiteks <br />
• paarismärgendid <tag></tag> nõuavad alati sulgemismärgendit, näiteks <b></b> vahel olev tekst on paksus kirjas.

Märgend võib omada atribuute. Atribuudid täpsustavad märgendi toimet. Atribuut paigutatakse alati avamärgendisse, sest brauser loeb infot alati vasakult paremale ja ülevalt alla. Mõnel märgendil on atribuutide kasutamine kohustuslik. Näiteks, pildi lisamise märgendil <img /> on kohustuslikuks atribuudiks src , mille väärtuseks on faili nimi koos teekonnaga: <img src="faili_nimi_ja_rada">

Tühikud:

• tühik on kohustuslik märgendi nime ja atribuudi vahel
• tühikut ei tohi olla atribuudi nime ja väärtuse vahel
• HTML-dokumendi tekstis mitu tühikut on sama, mis üks; selleks, et panna järjest mitu tühikut, tuleb kasutada erisümboleid.

HTML-dokumendi struktuur

# Skriptikeeled

:::

Interaktiivsete veebisaitide arendamisel kasutatakse sageli skriptikeeli (näiteks javascript). Interaktiivsete veebisaitide arendamisel kasutatakse sageli skriptikeeli (javascript, PHP jne.). Nende vastavad koodilõigud loetakse serverist koos veebilehega brauserisse ning täidetakse seal. Näiteks javascriptis kirjutatud lõik html-tekstis näeb välja nii:

<html>
  <head>
    <title>Tere!</title>
  </head>
  <body>
    <script>
      document.writeln("Tere kõigile!");
    </script>
  </body>
</html>

:::

# XML

# B.4.5.2 HTMLi peamised komponendid

Dokumendis võib olla kuni kuue taseme pealkirju (märgendid <h1></h1> … <h6></h6>.

Kõrgema taseme pealkiri on märgendite <h1></h1> vahel, seda kuvatakse kõige suurema kirjaga. Madalaima taseme pealkiri on <h6></h6> märgendites ja see kuvatakse kõige väiksema kirjaga. Atribuudi align abil võib pealkirju joondada vasakule, paremale ja keskele.

Lõigu loomiseks kasutatakse märgendeid <p></p>. Iga lõik eraldatakse brauseris eelmisest tühja reaga. Lõiku saab joondada vasakule, paremale, keskele ja rööpselt. Lõigu vormindamisel tuleb meeles pidada järgmist:

• reavahetuse sümbol (Enter-klahvi vajutus) ei oma koodis mingit tähtsust, kui rida on vaja vahetada, peab kasutama märgendit <br /> ;
• kõiki sümboleid ei ole võimalik korrektselt kuvada, see on seotud erinevate kodeerimissüsteemidega (näiteks, ä tähe kuvamiseks tuleb kasutada erisümbolit);
• teksti ridade kuvamisel arvestatakse tühja ruumiga, millele tekst paigutatakse (näiteks jätkab brauser teksti järgmises reas, kui see brauseri aknasse või tabelisse ei mahu).

Tekstis võib kasutada ka jäika vormindamist. Seda tehakse juhul, kui lõigulõpud, tühikud ja tabulatsioon on kindlalt paigas. Märgenditeks on <pre></pre>. Kogu tekst väljastatakse fikseeritud laiusega kirjas. Sellise vormingu põhipuuduseks on see, et teksti ei tõsteta järgmisele reale isegi siis, kui ta aknasse ei mahu. Selle asemel tekib horisontaalne kerimisriba, mis raskendab lehe jälgimist.

Tsitaatide vorming toimub märgendiga <blockquote></blockquote>. See märgend tekitab taande vasakust lehe servast ning eraldab tsitaadi muust tekstist tühja reaga alt ja ülevalt.

Joonte loomiseks teksti osade vahele kasutatakse märgendit <hr />. Erinevate atribuutide abiga saab muuta joone paksust ja laiust, värvi ja joondust.

Loetelusid võib olla mitut liiki:

• tärnitud (järjestamata) – märgendid <ul></ul> ;
• nummerdatud (järjestatud) – märgendid <ol></ol> ;
  • loetelu elementide loomiseks kasutatakse märgendeid <li></li> ;
• definitsioonide loetelu – kasutatakse märgendeid <dl></dl> , <dt></dt> ja <dd></dd>.

Tabelandmete väljastamiseks võib veebilehel kasutada tabeleid. HTMLs on tabelitel veel üks funktsioon: tabeli abil võib paigutada elemente ekraanil erinevatesse kohtadesse, kasutades selleks tabeli lahtreid. Tänapäeval sellist meetodit ei soovitata enam kasutada, kuna parem on seda teha CSS stiililehtede abil.

Tabeli loomiseks on märgend <table></table>. Tabel ise koosneb ridadest ja lahtritest, read luuakse märgenditega <tr></tr> , lahtrid märgendiga <td></td>. Esimest tabeli rida kasutatakse tavaliselt päisena, seal asuvad veergude pealkirjad. Esimese rea lahtrite märkimiseks võib kasutada märgendeid <th></th>.

# Teksti vormindamine

Peale dokumendi struktuuri loomist võib asuda teksti vormindamisele. Soovitav on kõik kirja vormingud korraldada stiilide abil (CSS). HTML lubab samuti teksti kujundada, kuigi võimalusi on siin vähem. HTML kasutab kahte vormingu viisi: füüsilist (vormindatud teksti väljanägemine on täpselt määratud) ja loogilist (märgendite abil määratakse tekst, mis peab muust tekstist erinema, teksti kuvamine sõltub brauseri määrangutest).

Füüsilise vormingu märgendid:

• <b></b> (poolpaks kiri)
• <i></i> (kaldkiri)
• <tt></tt> (fikseeritud laiusega kiri)
• <u></u> (allatõmmatud)
• <strike></strike> (mahatõmmatud).

Loogilise vormingu märgendid:

• <em></em> (tavaliselt kuvatakse kaldkirjana)
• <strong></strong> (tavaliselt kuvatakse poolpaksuna)
• <cite></cite> (tsitaatide rõhutamine, kaldkiri)
• <ins></ins> (lehe uuendamisel näidatakse teksti, mida enne ei olnud, allatõmmatud)
• <del></del> (mahatõmbamine)
• <acronym></acronym> (lühendite eristamine)

# Erisümbolid ja kommentaarid

Koodi loetavuse ja redigeerimise lihtsustamiseks on soovitav lisada kommentaare. Samuti, kui olete teinud uuendusi, ei tasu vana varianti kohe kustutada. Jätke see kommentaarina sisse, nii saate alati tulla vana versiooni juurde tagasi.

<!-- kommentaar -->

Piltide lisamine

Veebilehed on tavalised tekstifailid, millesse ei saa integreerida teisi objekte. Pildi lisamiseks tuleb viitamisel näidata pildi faili nimi ja asukoht ning brauser kuvab pildi veebilehe sees.

Pildile viitamiseks on märgend <img />. Seda märgendit kasutatakse alati atribuutidega. Pildi faili nime ja asukoha näitamiseks on atribuut src: <img src="failinimi.gif">.

Pilti saab lehel joondada kahel viisil: sarnaselt teksti osale lõigu sees, näidates selle vertikaalset joondamist rea suhtes, või nagu eraldi lõiku, näidates horisontaaljoondamist. Kasutatakse atribuuti align. Rea sees saab joondada rea ülemise servaga ( top ), alumise servaga ( bottom ) või keskkohaga ( middle ). Kui joondada pilti eraldi lõiguna, on atribuudi väärtused left (vasak serv) või right (parem serv). Tsentreerida pilti ei saa.

Hüperlingid (viidad)

"Ülemaailmse ämblikuvõrgu" töö ei oleks viitadeta võimalik. Hüperlingid asuvad veebilehtedel ja ühendavad omavahel nii erinevaid lehti kui ka saite. Kusjuures saidid võivad asuda serverites, mis paiknevad üksteisest sadade tuhandete kilomeetrite kaugusel. Lingi loomiseks kasutatakse märgendit <a></a>. Nagu pildi märgendil, on viida märgendil kohustuslik atribuut, mis näitab faili nime ja asukohta <a href="teekond">).

Viitasid on kolme liiki:

• välised – viitavad välisressurssidele, mis antud saidile ei kuulu
  <a href="http://www.eucip.com">
• sisemised – viidad saidi piires <a href="folder/file.html">.
• viidad ühe lehe piires – võimaldavad liikuda ühest dokumendi osast teise, lahkumata lehelt; viita näidatakse <a href="#ankru-nimi"> , kus ankru-nimi on märgistatud koht veebilehel, mida märgistatakse nii: <a name="ankru-nimi">.

Hüperlingi kuvamiseks võib kasutada nii teksti kui pilti. Näiteks viit <a href="pealeht.htm"><img src="logo.jpg" /></a> kuvab brauseri aknas pildi failist logo.jpg, klikkides viidal jõuate failile pealeht.htm.

Vormid

Vorm luuakse märgendite <form></form> abil. Ühel lehel võib olla ka mitu vormi. Selleks, et vormi andmeid saaks töödelda, näidatakse atribuudi action väärtusega, milline rakendus käivitada, ja atribuudi method väärtusega, millise meetodiga andmeid töödelda. Atribuut method võib omada väärtust GET või POST.

<form method="post" action="mailto:address@server.com"></form>

Juhtelementide loomiseks kasutatakse märgendeid <input /> , <textarea></textarea> , <select></select>.

Märgendi <input /> abil luuakse vormi juhtelemente, nende tüübi määramiseks on atribuut type.

Atribuudi type väärtused

• Tekstiväljad
  • text – tekstikast;
  • hidden -varjatud tekst;
  • password – parooli väli (sisestatud andmed näidatakse tärnidega).
• Valikud
  • checkbox – valikkast;
  • radio – raadionupp.
• Nupud
  • submit – sisestamise kinnitus;
  • reset – katkestamine, väljade puhastamine;
  • file – failivaliku akna kuvamine;
  • image – graafiline nupp;
  • button – lihtne nupp.

Märgend <textarea></textarea> lubab luua tekstipiirkonna mitmerealise teksti sisestamiseks. Kui kogu tekst aknasse ei mahu, tekib kerimisriba.

Näiteks:

<textarea name="textarea" cols="25" rows="4"></textarea>

Märgend <select></select> - selle märgendi abil luuakse menüütüüpi juhtelement. Iga menüü element luuakse märgendiga <option></option>. Menüüst saab valida ühe või mitu väärtust. Menüü liigi määrab atribuut size. Kui selle väärtus on 1, kuvatakse hüpikmenüü. Kui atribuudi väärtus on ühest suurem, kuid elementide arvust väiksem, tekib kerimisriba.

Näide:

<select name="list" size=3>
  <option value="element 1" selected=selected>rida 1</option>
  <option value=" element 2">rida 2</option>
  <option value=" element 3">rida 3</option>
</select>

# B.4.5.3 Teksti vormindamine ja kirjutamise printsiibid

Info edastamisel on kõige tähtsam teate tekst. Sellepärast omab teksti väljanägemine ja selle loetavus samuti erilist tähtsust. Teksti loetavus sõltub paljudest faktoritest, nagu

• kirjatüüp,
• kirja suurus,
• rõhutamine.

# Font (kirjatüüp)

Tähtis on teada, et kirjatüüpe on kahte liiki – proportsionaalsed (proportional font sizes) ja fikseeritud laiusega (fixed font sizes).

Fikseeritud laiusega kirjatüübis eraldatakse igale märgile ühesugune ruum, sõltumata selle enda laiusest. Nii võtavad tähed I ja M ühepalju ruumi. Selliseid kirjatüüpe kasutati kirjutusmasinatel.

Proportsionaalne font arvestab märgi suurust. Sellises fondis on täht I umbes kolm korda kitsam kui M. Enamik tekstidest, ka antud tekst, on kirjutatud just sellist tüüpi fondiga.

# Fontide liigid

serif - Selle liigi fontide märgid omavad otstes sälke šeriife. Lühikesed horisontaalsed kriipsud ühendavad visuaalselt tähti, kergendades lugemist. Sellised fondid on paberilt paremini loetavad ja sellepärast on kasutusel rohkem trükistes. Liigi esindajad on näiteks fondid Times New Roman ja Garamond.

sans serif - Selle liigi fondid sälke ei kasuta. Tekste on lihtsam lugeda kuvari ekraanilt või muudelt väiksema resolutsiooniga elektronkandjatelt, sellepärast kasutatakse neid rohkem veebilehekülgedel ja esitlustes.Antud liiki kuuluvad fondid Arial, Tahoma, Verdana, Helvetica.

Joonis 4-26. Seriifidega ja ilma seriifideta fondid. Allikas: http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces

Script Selleliigi fondid imiteerivad käsikirja. Tihti kasutatakse neid selleks, et rõhutada dokumendi mitteametlikust: kutsed, õnnitlused, reklaamid. Selliste kirjatüüpide liiga tihe kasutamine ei ole soovitatav, sest need fondid ei ole ladusalt loetavad.

Joonis 4-27. Erinevate fondiperekondade näited. Allikas: http://www.htmlcodetutorial.com/character_famsupp_194.html

# Rõhutamine

Selleks, et rõhutada osa tekstist, kasutatakse erinevaid vormindamisvõtteid. Tüüpiline on teksti tegemine poolpaksuks või kaldkirja kasutamine. Harvemini esineb ka allatõmbamine ja suurte tähtede kasutamine.

# Kirja suurus

Kirjasuurust mõõdetakse punktides (pt). Üks punkt on võrdne 1/72 tolliga.

Tähtis on meeles pidada, et kirjasuurus mängib suurt rolli. Näiteks kui tekst peab olema trükitud, on selle optimaalne suurus 10 kuni 12 punkti. Kui tegemist on esitluse tekstiga, ei tohi selle suurus olla alla 18 punkti (suurus on vahemikus 18 kuni 72 punkti).

Veebilehel on hea tava määrata erinevad kirja suurused proportsionaalse mõõtühikuga (%). Näiteks 80% või 120%. Sellistel juhtudel kuvab brauser kirja väikemalt või suuremalt võrreldes brauseri vaikeväärtusega. Selline kirja suuruse määramine jätab kasutajale vaba võimaluse reguleerida teksti suurust vastavalt oma nägemise võimekusele ja lugemise mugavusele.

# Tekst veebis

Teksti lugemine ekraanilt on keerulisem kui paberkandjalt, mistõttu on tähtis kasutada erinevaid teksti struktureerimise meetodeid: tühi ruum, suurem kiri, suuremad reavahed.

# B.4.5.4 XMLi kasutamine

<?xml version="1.0" encoding="…" ?>
<root>
  <child>
    <subchild> …. </subchild>
  </child>
</root>

<?xml version="1.0" encoding="UTF-8" ?>  <!--versiooni ja kodeeringu deklaratsioon-->
<!DOCTYPE tootajad SYSTEM "dekl.dtd"> <!--dokumendi tüübi deklaratsioon -->
<?xml-stylesheet type="text/css" href="kujundus.css"?> <!--viide kujundusfailile-->

<tootajad>
 <tootaja emakeel="eesti">
  <nimi>Juhan Juurikas</nimi>
  <aadress>Pronksi 4</aadress>
  <kirjeldus>Võlgnik</kirjeldus>
  <oskus>Joonistamine</oskus>
  <oskus>Kirjutamine</oskus>
  </tootaja>
  <tootaja emakeel="eesti">
    <nimi>Aarne Sammal</nimi>
    <aadress>Pronksi 2</aadress>
    <kirjeldus>Võlgnik</kirjeldus>
    <oskus>Joonistamine</oskus>
    <oskus>Kirjutamine</oskus>
  </tootaja>
</tootajad>

tootajad {
  background-color: #ffffff;
  width: 100%;
}
tootaja {
  color: #000000;
  font-size: 12pt;
}
nimi,
aadress,
kirjeldus,
oskus {
  color: #000000;
  margin-left: 10pt;
}

# B.4.5.5 Stiililehed ja nende kasutamine disainis (CSS ja XSL)

# CSS

Kui dokumendi loogiline struktuur luuakse märgenditega (lõigud, pealkirjad, tabelid, loetelud jne.), siis kogu vorming tuleb teostada stiililehtedel (Cascading Style Sheets). Võrreldes HTMLiga on stiililehtedel palju rohkem võimalusi dokumenti kujundada. CSSiga saab nii kujundada kui paigutada, reguleerida nähtavust ja järjestada HTMLi komponente. Kui kasutusele võtta lisaks ka JavaScript, siis on võimalik luua HTML komponentide animatsioone. Seda tehnoloogiat nimetatakse DHTML (Dynamic HTML).

Stiililehed lubavad:

• määrata kujundite ja teksti suurust
• määrata viitade ja teksti kiri ja värv
• määrata elemendi paigutust lehel
• luua ääriseid ja taandeid
• määrata taustavärvid ja tausta kujundid erinevatele elementidele
• luua graafiliste markeritega loetelusid
• raamida erinevaid elemente

CSS vahendite kasutamine muudab erinevate elementide vormindamise paindlikumaks. Stiile saab kasutada nii dokumendi osas, kui ka terves dokumendis ja ka tervel saidil. Pealegi CSSi kasutamine võimaldab luua lehekülgi, mille väljanägemine on sama ka erinevate brauserite poolt kuvatuna.

Eksisteerib kolm stiili kirjeldamise meetodit, mis määravad stiili kasutusala.

1. stiili kirjeldus asub märgendi sees: <märgend style="atribuut: väärtus"> (stiili kasutab märgendiga määratud element)
2. stiilide kirjeldus asub dokumendi päises märgendite <style></style> vahel (stiil on kasutusel terves dokumendis)
3. stiilide kirjeldus asub eraldi failis (stiili võib kasutada iga dokument, mis antud failile viitab).

CSS lause üldkuju:

märgend {definitsioon; definitsioon; definitsioon}

Näited:

h2 {
  font-size: 16pt;
  font-style: italic;
  font-family: arial;
}
td {
  font-family: Arial;
  font-size: 8pt;
  color: #ff0000;
  text-transform: capitalize;
  text-decoration: overline underline;
  font-weight: bold;
}
body {
  font-size: 8pt;
  font-family: serif;
  font-weight: bold;
}

CSSi spetsifikatsioon (versioon 2.1): http://www.w3.org/TR/CSS21/

# XSL

# B.4.5 Kordamisküsimused

# B.4.6 Veebi programmeerimine

Selle alateema materjale läbi töötades õpid tundma levinumaid programmeerimistehnoloogiaid.

# B.4.6.1 Teenuste tüübid ja peamised programmeerimiskeeled

Veebiteenused jagatakse kahte tüüpi teenusteks:

• serveriteenused – kõik rakendused teevad oma töö serverites ning väljastavad valmis töötulemuse brauseri vahendusel kasutaja arvutisse.
• kliendipoolsed teenused – programmid laetakse koos veebilehega kasutaja arvutisse, need teevad töö kasutaja (ehk kliendi) arvutis ning väljastavad oma töö tulemuse vahetult brauseri ekraanile. Kliendipoolse teenusega on võimalik käivitada serveriteenust.

Programmeerimiskeeled on kohased vastavale teenuse tüübile.

Levinumad kliendipoolsed programmeerimiskeeled ja –tehnoloogiad:

• JavaScript – juhitakse veebilehe käitumist (animatsioonid, näitamine-peitmine, kontrollifunktsioonid jms).

Levinumad serveripoolsed programmeerimiskeeled veebiteenustele:

• PHP (Hypertext Preprocessor) – populaarseim ülesandele orienteeritud (task oriented) programmeerimiskeel.
• Java võimas objekt-orienteeritud (object oriented) programmeerimiskeel keeruliste veebiteenuste loomiseks.
• Perl enne PHPd kõige populaarsem keel. Täna ei ole enam levinud.
• ASP (Active Server Pages) – Perli analoog, Microsoft'i tehnoloogia.
• .NET Java analoog, Microsoft'i tehnoloogia.

# B.4.6.2 Integratsiooni väljakutsed veebis

# B.4.6 Kordamisküsimused

# Kasutatud materjalid

• Kasutajaliidesed ja neile esitatavad nõuded. T. Jakimov, 2006. Referaat, Tallinna Tehnikaülikooli Informaatikainstituut.

• Lõhnade edastamise tehnoloogia:
  http://www.scribd.com/doc/37159970/Digital-Scent-Technology

• Kasutatavuse sidumine eesmärkidega ja mõõtmine:
  http://www.wqusability.com/articles/more-than-ease-of-use.html

• WWW ajalugu, kasutajakogemuse disain:
  http://www.eneta.ee/SiteCollectionDocuments/vs/Veebistuudium_disain_2_ajalugu_kasutajakogemus.docx

• Kui palju inimesed veebis loevad?:
  http://www.useit.com/alertbox/percent-text-read.html

• Jakob Nielseni artiklite arhiiv:
  http://www.useit.com/alertbox/

• Uuring navigatsiooni meetodite kasutatavusest:
  http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm