WWW kujundus ja stiil

 [Üldstruktuurist] [Lehekülje kujundus] [Kogu süsteemi kasutatavus] [Kujunduse põhimõtteid]


Hea kujundus ja stiil World Wide Web-s järgib samu põhimõtteid, mida kujundus trükiste, multimeedia toodete või televisiooni vallas. On teatud hulk kriteeriume, et teie esitatav oleks kasutajale hästi vastuvõetav ja sõnum, mida pakute, hästi mõistetav.

Samas peaks teie kujundatavad WWW-leheküljed olema isikupärased ja huvitavad. Püüame need kaks eesmärki siis ühendada.

Vaatame esmalt üldisemaid kriteeriume kujunduse juures.

Üldstruktuurist

 HTML-dokumenti toimetades tuleks tekst jaotada mitmeks osaks mingite loogiliste struktuuride (peatükk, lõik) alusel. Mida väiksemateks üksusteks tekst jaotatakse seda kergem on teha allviiteid ja ääremärkusi, seda raskem aga kergestiloetavat ja selgestruktuurilist dokumenti.

Struktuuri kavandades tuleb arvestada ka seda, kellele see dokument on määratud. Algajate jaoks tuleks kasutada lihtsat ja selget hierarhilist puustruktuuri, milles eri peatükid ja lõigud on paigutatud nii, et dokumenti võib lugeda nagu tavalist raamatut. Kui aga käsitletavas aines endas on eristatav selge struktuur, siis on mõttekas dokument jaotada sellele vastavalt.

Asjatundjatele määratud tekst võib seevastu sisaldada rohkem viiteid teistele peatükkidele, pikematele definitsioonidele, aga ka viiteid dokumendist väljapoole. Vastava ainega mingilgi määral tuttavad inimesed on juba loonud teatava pildi eri osade asetusest ja nende omavahelistest seostest ning seda võib ära kasutada ka dokumendi struktureerimisel.

Dokumendi struktuuri aitab selgitada esilehekülg ehk tiitelleht, millel on suur selgesti eristatav pealkiri ja sisukord ning millele võiks paigutada ka täpsustavad teated dokumendi kohta (kas ametlik või mitteametlik, millal koostatud jne.).

Isikuandmed

Igale dokumendile tuleks lisada andmed selle koostaja kohta. Sageli muudetavate andmete korral tuleks märkida ka koostamise/uuendamise kuupäev ja tarbe korral veel dokumendi staatus (näiteks "mitteametlik"). Sellised andmed võib paigutada ka esileheküljele, kuid enemasti lisatakse need dokumendi lõppu.

Kindlasti kiirendavad lugemist ja vähendavad lugeja ajakulu viitamised eelnevale ja järgnevale hierarhilisele tasemele, aga ka sisukorrale (kui see on). Pikema dokumendi korral võiksid need olla nii alguses kui ka lõpus.

Kontekstivabadus

Kõigile kättesaadavate dokumentide korral tuleb arvestada sellega, et nendele võib kestahes ja kusttahes teha viiteid. Seetõttu tuleks sellised dokumendid koostada nii, et tekst ei oleks liiga tugevasti seotud mingi esitusjärjekorraga ning moodustaks terviku, mida moodulprogrammeerimise põhimõtteid järgides võiks kasutada muudeski seostes. Kasutades lauseid nagu "Eelmises peatükis käsitletud probleemi järel vaatleme nüüd ..." saab sellisel juhul korraldada sujuva ülemineku uuele teemale.

Pikemat seletamist vajavad põhiterminid tuleks vormistada kas eraldi dokumendina või nimega varustatud osana selles. Niimoodi toimides saab nendele vajaduse korral viidata mitmetest erinevatest tekstidest.

Pealkirja tekst peab olema täpne: näiteks pealkiri <TITLE>Probleemi valgustamine</TITLE> ei ütle midagu inimesele, kes ei ole jälginud kogu käsitlust.

Sõltumatus riist- ja tarkvarast

Dokumenti ei tohi mitte mingil juhul kavandada ainult selle järgi, millisena see paistab koostaja arvuti ekraanil. Üleliigsed reavahetused pealkirjade või lõikude järel võivad paista näitek erinevate süsteemide korral täiesti erinevalt. Sama kehtib ka mitmesuguste kujunduselementide ja -võtete kohta. HTML-dokumendi välisilme kavandamisel tuleb võimaluse korral arvestada selle seadmestiku ja programmidekomplektiga, mille abil teda vaadeldakse. Kui see aga pole võimalik (dokument on määratud laiale kasutajateringile), siis tuleks seda testida mitmel arvutil ja mitme erineva klientprogrammi abil (Netscape, Mosaic, Lynx).

Arvestada tuleb veel sellegagi, et dokument peab hästi välja nägema ka paberile trükituna.

Loetavus

Üldkasutatava dokumendi koostamisel ja/või toimetamisel tuleb tagada selle asjalik ja sorav esitus.

Loetavuse huvides tuleks vältida mittemidagiütlevaid väljendeid nagu näiteks "selle asja kohta saab andmeid siit". See nn here-sündroom esineb kahetsusväärselt sageli ameerika dokumentides.

Tehnilisi üksikasju ei tasu toonitada. Tuleb arvestada, et enamik dokumente peab loetav olema ka mitteprofessionaali poolt.


Lehekülje kujundus
  • Hoia disain lihtne. Kõik geniaalne on lihtne. Ära koorma kasutajat sellea, et ta peab keerukate disainielementide tagant otsima sõnumit. Kui sõnumit ei ole või on tegemist millegi reklaamiga, siis muutub olulisemaks inimese huvi äratamine ja üllatamine. Tavalise WWW-lehekülje puhul peaks siiski püüdma hoida oma kujundus võimalikultb lihtne.

  • Disaini, ära dekoreeri. Tegele lehekülje disainimisega, aga mitte satsikeste näitusega. Kasuta lisaelemente mõõdukalt ja sihikindlalt. Ära lisa värvilisi nuppe lihtsalt selle pärast, et need on sul parajasti kataloogis olemas ja kahju on neid mitte kasutada.

  • Jäta tühja ruumi, lase elementidel hingata. Ära kuhja kõike olemasolevat väiksele pinnale. Selleks, et lehekülg oleks jälgitav, peaks igal elemendil ruumi olema.

  • Tee üks element domineerivaks, et oleks millestki alustada. Anna kasutajale kätte juhtlõng teie sõnumi haaramiseks. Aita tal alustada olulisest.

  • Säilita õige balanss ja skaala erinevate elementide jaoks. Püüa hoida asju õiges mõõtkavas ja mõõdukas koguses. Ära aja kasutajat põhjendamatult segadusse elevandisuuruse kärbsega istumas tikutopsil. Ole mõistlik teksti suuruste kasutamisel.

  • Juhi silm läbi lehekülje, kasutades suurust, positsiooni ja värvi. Kasutaja silma saab juhtida, kui kasutada lihtsaid võtteid ja õiget järjekorda.
  • Kasuta tagaplaani ja esiplaani elementi, tekitamaks sügavuse tunnet. Kasutades osavalt tagaplaani ja esiplaani, saame tekitada kasutajas tunde kolmemõõtelisest ruumist, mille tajumine on palju loomulikum ja lihtsam.


    Kogu WWW-lehekülgede süsteemi kasutatavus
  • Lihtne õppida. Kujundage oma leheküljed nii, et nende jälgimine ja sisemine navigeerimine oleks lihtsasti selgeks saadav. Kasutage ühesugust loogikat alamdokumentide poole pöördumisel ja mitmesuguste lisaabivahendite (nupurida) kasutamisel.

  • Kasutaja saab kiiresti tegutsema hakata.

  • Efektiivne kasutada. Teie kodulehekülje kasutamisel saab kasutaja vastavalt oma soovile kiiresti vajaliku tulemuse. Jäta kasutajale võimalus abi saada ja ka mingit tagasisidet pakkuda.

  • Lihtne meelde jätta. Teie lehekülge on lihtne meelde jätta.

  • Aja möödudes on selle süsteemi juurde tagasipöördumine lihtne. Kui kasutaja peaks tahtma kunagi teie lehekülgesid uuesti külastada, siis talle tuleb selle kasutamine ruttu meelde.

  • Vähe vigasid. Kontrolli oma õigekirja ja jälgi, et viidad sinu lehekülgedel on õiged.

  • Võimalik teha vähe vigu ja vigade lahendamine efektiivne. Ära jäta kasutajale võimalust teha vigu ja kui neid peaks esinema, siis teie süsteemi reageerimine sellele peab olema efektiivne ja korrektne.

  • Meeldiv kasutada. Külaskäik teie koduleheküljele peab kujunema meeldivaks kogemuseks.


    WWW lehekülje kujunduse põhimõtteid

     Millist infot ja milliseid lehekülgi teie süsteem sisaldab, peab igaüks ise välja mõtlema. Kasutaja jaoks on oluline teie lehekülgedelt midagi vajalikku või huvitavat leida. Süsteemis tervikuna võiks veel leiduda lühike aadressiinformatsioon, abiinformatsiooni lehekülg, kontaktivõimalused, otsingusüsteem. Üksikul leheküljel peaks leheküljel kas avalikult või varjatult (kommentaarid koodis) olema ka:
    • info selle tegijate kohta
    • viimaste muutuste või info värskenduste aeg
    • autoriõiguse informatsioon
    Hoia oma leheküljed paraja pikkusega (kuni 50 Kb). Püüa vältida liiga suure koguse piltide lisamist. Suurte piltide asemel tuleks näidata tema vähendatud koopiat koos viidaga originaalile ja originaali suurusele (mitu Kb). Suure imagemap'i kasutamine navigeerimise jaoks ei õigusta ennast halbade sideliinide puhul.

    Puhas HTML

    HTML pole lõplikult standartiseeritud. On olemas huvitavaid HTML-i koode, mida pole standartiseeritud ning mida kõik WWW lehitsejad ei toeta (nt. Frame-d, tabelid, java). Kasuta selliseid lisavõimalusi mõistikult ja jäta alternatiivi võimalus ka nende inimeste jaoks, kelle lehitseja teie kujundust ei toeta. Lisaks sellele on peale graafiliste lehitsejate, nagu nt. Netscape, olemas ka tekstipõhised lehitsejad, millega pole näha pilte, tabeleid ja frame. Neid kasutab umbes 10 % kogu WWW-kasutajaskonnast.

    Selleks, et teie leheküljed oleksid loetavad ka nendele inimestele, saab kasutada alljärgnevaid nippe, mis ei muuda teie graafilise lehekülje kujundust. Kõige parem oleks aga siiski tekitada lisaks graafilistele lehekülgedele ka ainult tekstilised leheküljed, mis oleksid mõeldud kasutamiseks tekstipõhistel lehitsejatel ja samuti juhtudel, kus sidekiirus on väga madal ning piltide vaatamine oleks liigne luksus.

    • Pildifailide lisamisel on vastaval märgendil <IMG> võimalik lisada väli ALT="Alternatiivne tekst". Seda näidatakse siis nende lehitsejatega, mis pilti ei saa või ei taha näidata. (nt. <IMG src="erkki.gif" ALT="Erkki pilt">). Piltide kiirema esitamiseks kasuta ka välju WIDTH ja HEIGHT, mis tähistavad pildi suurusi. (nt. <IMG src="erkki.gif" WIDTH=200 HEIGHT=259>). Pildi suuruse saad teada näiteks Netsacpe-ga avades temas pildifaili. Siis kirjutatakse üles aknariba peale pildi suurus.
    • Tabeli puhul lisa tabeli ridade vahele <BR> või <P>. Veergude vahele lisa kindlasti vähemalt 1 tühik.

    Taust ja värvid

    Tausta ja värvide valikul tuleb ettevaatlik olla, et ei kaoks ära lehekülje loetavus ja meeldivus. Muuta saab nii tausta-, kui teksti värvi. Samuti võib taustaks olla suvaline pildifail. Viimase puhul tuleb eriti ettevaatlik olla, et tekst korralikult välja paistaks, sest pildid on tavaliselt mitmevärvilised ja raske on leida teksti värvi, mis kõikide värvidega sobiks.

    Kõige sagedamini kasutatud taustavärvid on valge või must. Valge värv tuletab meile meelde tavameediast (raamatud, ajalehed) tuntud tausta ja on selletõttu lihtsamini tabatav. Teiste värvide kasutamise juures tuleks säilitada värvide harmoonia. Samuti tuleb kasuks värvide psühholoogia tundmine.

    • Värviring - põhivärvid (punane, violetne, sinine, taevasinine, roheline, kollane) ja kõik nende vahel olevad värvitoonid.
    • Värviringil kõrvuti asetsevad värvid mõjuvad harmoonilisena (punane, oranzh).
    • Vastandvärvid (punane-roheline, sinine-oranzh, kollane-lilla) ei sobi hästi kokku, kuid äratavad tähelepanu.
    • Värvide tähendused: punane (hoiatus, oht, seksikas, kuum), oranzh (tähelepanu), sinine (kuninglik, mugav), kollane (lojaalsus, lõbu), roheline (looduslik), pruun (Maa), valge (puhtus), must (kuri, müstiline, elegantne).
    • Soojad värvid (kollasest üle oranzhi punavioletseni) püüavad pilku, on energilised, seotud tugevate emotsioonidega. Loovad optilise efekti, et asuvad vaatajast lähemal, kui tegelikult.
    • Külmad värvid (kollakasrohelisest üle sinise violetseni) mõjuvad õrnalt ja rahulikult. Loovad optilise efekti, et asuvad vaatajast kaugemal, kui tegelikult.
    Materjali värvide omavahelisest sobivusest otsi internetist märksõna "värvid" alt.

    Eesti keel ja teised keeled

    Lisaks eesti keelele räägitakse maailmas ka teisi keeli. Interneti maailmas piisab tavaliselt inglise keelest ning oma lehekülgede arendamisel tuleks siis arvestada kakskeelsusega. Kogu info inglise keelde tõlkimine pole sageli otstarbekas, aga vähemalt 1 lehekülg olulise informatsiooniga peaks teie süsteemis ikkagi olema. Kui pakkuda rohkem kakskeelsust, siis kujunduse poole pealt võiks otsustada, kas teha avaleheküljel jagunemine erinevatesse keeltesse, või jagada ekraanipind kaheks (vt. nt. http://www.ut.ee/). Oma WWW-lehekülje eesti õigekirja saad kontrollida aadressil http://www.filosoft.ee/html_speller_et/