Blogi
Kodulehe loomine on terviklik protsess, mis hõlmab enamat kui kujundamine ja kodeerimine.
Silver Sikk
08.04.2020
Kodulehte tellides mõeldakse tihtipeale küll kujunduse-kodeerimise peale ja hea juhul küsitakse ka sobiva sisuhaldusmootori kohta. Aga näiteks analüüs, eesmärgipärane planeerimine ja sisu peaks justkui iseenesest tekkima.
Oleme viimastel aastatel teinud mitu suuremat ja põhjalikumat veebiprojekti, kus tuli hea tulemuse nimel väga teadlikult tegutseda. Kaitseväe uus koduleht on üks neist ja vaatamegi nüüd selle näitel, kuidas üks korralik mahukama veebilehe tegemine käib.
Kaitsevägi on Vabariigi Valitsuse alluvuses olev sõjaväeliselt korraldatud täidesaatva riigivõimu asutus, mis asub Kaitseministeeriumi valitsemisalas. Kaitsevägi teostab sõjalist kaitset ja seda juhib Kaitseväe juhataja. Kaitseväe koduleht, mida uuendama hakkasime, on muidu üsna tavaline esindusveeb, aga selle maht on päris üüratu, alalehti sai lugeda sadades pluss uudised jm ajutine.
Kaitseväe kodulehe uuendus on hea näide selle kohta, kuidas esimeses päringus räägitakse vaid sisuhalduse vahetusest ja siin-seal kasutusmugavuse parandamisest, järgnevalt aga selguvad tegelikud vajadused. Ja lõpptulemuseks on täiesti uus ja kaasaja nõuetele vastav koduleht.
Peab kohe ära mainima, et sellise suure veebiprojekti tegemine on võimalik ainult tihedas koostöös tellijaga. Mõistlik on kaasata asjaosalised ja otsustajad ning luua kõigepealt ühtne arusaam, mida üldse vaja on. Selle tulemuseks on lähteülesande dokument, kus pannakse kirja üldpõhimõtted, eesmärgid, nõuded ja tingimused, tulemuse mõõdikud jms.
Põhimõtteliselt tuleks esmalt selgeks mõelda, mis rolli veebileht organisatsiooni toimimises üldse omab. Sest ega veebilehe omamine pole kohustuslik. Veeb on lihtsalt ruum, kus on omad võimalused. Vajadustest lähtudes tuleks mõelda, kuidas neid võimalusi ära kasutada.
See mõttetöö oli Kaitseväel juba tehtud: koduleht on neile kommunikatsioonikanal avalikkusega suhtlemiseks. Kuvandiloome ja adekvaatse info levitamine oli uuenduse peamine eesmärk, täpsemalt:
Loe kodulehe strateegiast meie blogiartiklis Kas hea veebileht vähendab kulusid või suurendab tulusid?
Uuenduse käivitas see, et tollane sisuhaldussüsteem ei olnud enam jätkusuutlik ja disain ei vastanud tänapäeva nõuetele. Ehk et ülalmainitud kahe eesmärgi täitmine oli võimatu.
Redwalli roll projektis pidi olema programmeerimistööde teostamine ja dokumenteerimine, Kaitseväe poolt pidid tulema nõudeid, kujunduskavand jms.
Üsna pea selgus, et määramatust on palju ja töö vajab sügavamat lähteülesannet. Vaja oli põhimõttelisi muudatusi, mitte kosmeetikat. Lähtudes veebi peaeesmärkidest tegelesime analüüsiga ja panime koos kliendiga paika uue lähteülesande.
Lähteülesanne tundub midagi iseenesest mõistetavat: on vajadus, tehakse kellelegi ülesanne see vajadus lahendada ja asi valmis. Suurte projektide puhul pole see kõik kahjuks nii lineaarne. Keegi ei suuda kohe kõike täielikult aduda. Palju on määramatust. Lisaks on osapooli palju ja samapalju ka arusaamu.
Tõeliselt kasulikul lähteülesandel on kaks olulist mõõdet:
Suure projekti lähteülesanne on natuke paradoksaalne iseennast tekitav dokument. Midagi tehes tekib uut teadmist ja esialgsed plaanid võivad muutuda.
Reaalseid tegevusi planeeritakse ja juhitakse projektijuhtimise kihis. Lähteülesandest tekivad konkreetsed tööülesanded, nende täitmisel võib lähteülesandesse tekkida täiendusi järgmiste ja ka juba läbitud etappide jaoks. Reageeritakse kiirelt, agiilselt. Ei kõhelda dramaatiliste suunamuutuste ees, kui selgub uut olulist infot. Sellist esmapilgul vastukäivat tegevust võimaldab suurem ühine eesmärk ja arusaam. Lähteülesanne on koht, mis seda kõike dokumenteerib.
Reaalsuses pole see kõik muidugi nii ideaalne, aga põhimõtteliselt nii see käib. Enne kui disainitööga üldse pihta hakkasime, tehti seega planeerimise ja analüüsi faasis ära väga palju tööd ja olulisi otsuseid, mis kõik fikseeriti lähteülesandes.
Hea disain algab kasutajate ja nende vajaduste kaardistamisest. Sihtgrupid ja neile vajalik sisu oli Kaitseväe poolt juba paika pandud. Sihtruppideks on peamiselt eestimaalased, aga ka meie koostööpartnerid välismaal:
Kaitseväe veebis on aja jooksul kõik üsna paika loksunud, aga põhimõtteliselt võib kasutajate ja nende vajaduste kaardistamiseks kasutada erinevaid mudeleid: persoonasid, kasutajavooge, klienditeekonda (kliendi kokkupuutepunkte teenusepakkujaga laiemalt) jms.
Mudelid peaks põhinema intervjuudel reaalsete kasutajatega ja need pole eesmärk omaette, vaid tööriistad, mis aitavad kasutajakogemust üldisemalt disainida. Kusjuures, selliseid mudeleid võib kasutada ka olemasoleva veebi parandamiseks, mitte ainult uue loomiseks.
Väga oluline sisend lähteülesandesse on analüüs. Reaalsest analüüsist selgub, kas ja milles on tegelik probleem. Alles siis, kui probleem on teada, saab seda parandama hakata. Enne seda on vaid oletus.
Veebilehe analüüs tähendab, et meil on kogunenud mingit reaalset infot kas veebi või kasutajate kohta. Google Analytics ja lehevaatamiste hulk on kõige tuntumad märksõnad.
Tegelikult saab analüüsida väga erinevatest vaatepunktidest. Näiteks SEO, tehniline toimivus, kasutusmugavus, sisu eesmärgipärasus, müük jne. Ja on ka eri tüüpi infot ja infokogumise meetodeid: kvalitatiivne (numbrid, näiteks klikkide arv) ja kvantitatiivne (näiteks intervjuud kasutajatega, kasutajate jälgimisest saadud videod, ekraanipildid jne).
Olemas on head ja kõigile kättesaadavad tööriistad, millega veebilehe kasutust analüüsida, et vajadusel veebis muudatusi teha.
Naljaga pooleks võib öelda, et kui tavaliselt ajaloost paraku ei õpita, siis veebimaailmas on see ikka täitsa teema.
Loe analüüsist pikemalt meie blogiartiklis Kuidas kasutajate analüüsiga oma veebilehte paremaks muuta?
Et Kaitseväe puhul oli tegemist veebiuuendusega, siis mingit kasutusstatistikat kindlalt kaitstud riigiasutuse müüride tagant isegi väljus. Tabeliridu analüüsides ilmnes fakte, mida Kaitseväe veebi uuendades kindlasti silmas tuli pidada:
Üks olulisemaid töid, mis veebilehe kasutatavaks ja toimivaks teeb, on infoarhitektuuri disain. See valdkond seab kasutaja kõige keskmesse ja püüab kogu vajaliku info neile võimalikult mugavalt kättesaadavaks teha.
Infoarhitektuuriga saavad paika menüü, otsing, sildid, siselingid jms. Seosed nii lehtede vahel kui ka lehel olevate infoühikute vahel. Siit tuleb olulist sisendit nii kujundajale (layout ja navigatsioon), arendajale (andmebaasi seosed) kui sisuloojale (sisutüübid ja -mahud). Kõik selleks, et just õige info õigel hetkel kasutaja pilgu alla ilmuks.
Esialgse sisupuu saime kliendilt ja see oli üsna üks-ühele olemasolevast veebist. Selle probleem oli, et see oli muust uuenduse kontekstist üsna eraldiseisev. Võtsime selle lähtepunktiks, millega edasi töötada.
Et konkreetse sisuga tuttavaks saada, tegime sisuauditi. Said selgeks teemad, sisutüübid, mahud – täpsemalt sellest allpool.
Kogusime selle kõik FlowMapp’i, et struktuuri kallal koos kliendiga pikemalt ja põhjalikumalt töötada. Siin otsustasime, millist sisu on vaja säilitada, millist juurde vaja ja kuidas menüüstruktuur kasutajale võimalikult hoomatav oleks.
Uudiste jaoks pakkusime välja uue siltide struktuuri, mis ühilduks sisulehtedega. Tänu sellele näidatakse nüüd siltide süsteemi abil sisulehtede alaosas seotud uudiseid ja seda nii, et õhuväe lehel ilmuks ikka õhuväe, mitte mereväe uudised. Läbimõeldud sildisüsteem teeb ka otsingu palju asjakohasemaks.
Kui infoarhitektuur tegeleb info leitavusega, siis sisustrateegia tegeleb sisu loomise ja omastatavuse disainiga. Vajaliku lehe võib kasutaja ju leida, aga kui seal on mittevajalik või aegunud info, on ta omadega tupikus.
Sisutühi veeb on üks kasutumaid asju maailmas. Võiks ju öelda, et saab ju vanast veebist sisu uude tõsta. Lihtne teha, aga tulemus ei pruugi sugugi toimida. Uuel veebil võib olla hoopis teistsugune loogika ja sel juhul on sisu kõige muuga kohe vastuolus. Rääkimata sellest, et info vananeb ja veebiomaniku eesmärgid, äriloogika vms võivad olla muutunud. Sisu toetagu tegevusi, ei saa lasta sel elada oma elu mingis nostalgilises paralleeluniversumis.
Sisu planeerides lähtume nagu muu disaini puhulgi kasutajakeskse disaini põhimõtetest. See tähendab, et koduleht on suunatud eelkõige kasutajatele ja peab pakkuma nende küsimustele vastuseid.
Loe teemast pikemalt blogiartklis Kuidas planeerida veebilehe sisu?
Seejuures tuleb arvestada kasutajate erineva mentaalse võimekusega – Kaitseväe veebi sisu planeerides võeti näiteks nõudeks, et sisu peab olema arusaadav minimaalselt 9. klassi õpilasele. Et tegu on riigiasutusega, siis tuli lisaks arvestada ka seadustest tuleneva kohustusega teha teatud ametkondlik info avalikult kättesaadavaks.
Sisu peab lähtuma üldisest strateegiast, milleks ja kellele on veebileht loodud. Millist sisu kasutajad su veebist ootavad või vajavad, sellist sisu tuleb ka pakkuda. Vastasel juhul lahkub rahulolematu külaline vastuseid mujalt otsima.
Selleks vaadatakse veebi sisu nii persoonade kui veebiomaniku vajaduste vaatevinklist üle. Märgitakse lehtede ja lõikude kaupa ära, mis on ebavajalik, mida muuta, mida vaja lisada.
Sisuaudit on mahukas ja tuim töö ja tuleb tunnistada, et Kaitseväe mahuka veebi andmemaht kippus muutuma hoomamatuks. Erinevatest sisutüüpidest ja mahust sai siiski ülevaate. Õppetund: et tööl oleks reaalset tulemust, keskendu konkreetsetele olulistele näitajatele, mitte kõigele, mida auditiprogrammid pakuvad. Sest võimalik on ka näiteks SEO näitajaid jälgida ja kohendada, sh lehe metakirjeldust, pealkirju ja nende pikkusi, linkide tervist, erinevaid sisutüüpe jpm.
Tööriistadest kasutasime olukorra kaardistamiseks robustset Screaming Frog SEO Spiderit. Proovisime ka Ahrefs’i – kommertsveebi jaoks kasulik, aga selle projekti jaoks liiga spetsiifiline SEO tööriist. Sisu planeerimiseks kasutasime FlowMappi, kus koostöös kliendiga panime paika, mis sisu, kus ja kuidas võiks olla. Kõige paremini sobiks kogu sisuauditi ja planeerimise töö jaoks just selleks loodud Dyno Mapper või Slickplan.
Sisu planeerides on väga oluline mõelda ka sisu loomise jätkusuutlikkusele. Kes ja millal sisuga tegeleb? Sisu loomine ja sisestamine on ajamahukad tööd, mis võtavad tööajast päris palju. Ideaalis võiks olemas olla sisuga tegelemise plaan, et näiteks blogi pidades on mõned tulevikuteemad ja avaldamispäevad juba paigas.
Mida me siis reaalselt tegime? Kaitseväe koduleht oli mahukas. Juba iga struktuuriüksuse kohta, mida on kümneid, on eraldi leht, kus kirjas üksuse spetsiifika, väljaõpe, olmetingimused, ajalugu, sümboolika jms, mis kõik leiti olevat vajalik. Siit-sealt võtsime kokku ja ajakohastasime sisu, aga maht jäi ikkagi suureks.
Lahendus tuli tegelikult infoarhitektuurist: navigatsiooni pealispinnal on lühike ja visuaalne info, detailinfo on peidetud sügavamatesse kihtidesse. Lõpplahenduses kasutatakse alalehtedel sakke, et menüüde sügavus oleks minimaalne. Nii on info küll käeulatuses, aga ei mata külalist enda alla.
Meie ülesanne oli ka tekstide toimetamine ja pildimaterjali otsing ja sisestamine. Ka siin panime nõuded koos kliendiga lähteülesandes paika.
Tekstide loomisel ja toimetamisel tuli arvestada valitsusasutuste veebiteksti koostamise juhistega. On kiiduväärt, et me riigiasutustel on sellised juhised ja nõuded olemas. See tagab, et võimalikult paljud inimesed on potentsiaalselt kaasatud ja teavitatud.
Vorm on veebitekstidel lühike, konkreene ja struktuurselt vormindatud (alapealkirjad, listid jms).
Kaitseväe veebitekstide toon ja stiil on lihtne ja konkreetne. Räägime kodanikuga tõsistest asjadest asjalikult. Väldime nii liiga jäika sõjaväelist keelt, kohatut semulikkust kui ka tuima kantseliiti. Kõnet kandku ausus ja kus kohane, ka kerge patriootiline uhkus.
Veeb on eesti keeles ja vähendatud mahus ka inglise keeles. Vene keelest loobus Kaitsevägi teadlikult, kuna väljaõpe toimub nagunii eesti keeles ja ei soovita ajateenijates valesid ootusi tekitada.
Nõuandeid blogis: Kuidas kirjutada head veebiteksti?
Uues veebis on pilt ja video väga olulised. Tekst taandub sisu sügavamatesse kihtidesse, esimene mulje luuakse visuaaliga, kuna see on kaasahaarav ja lihtsasti tarbitav, eriti noorema põlvkonna jaoks esmane infoallikas. Kasutatakse suuri päisepilte mulje loomiseks ja galeriisid sisulise info esitamiseks.
Kaitseväes on lausa eraldi üksus, mis tegeleb meediamaterjalide tootmise ja teavitamisega. Seega on kasutada suur hulk kvaliteetset ja põnevat pildi- ja videomaterjali.
Valitsus- ja riigiasutustele on olemas kohustuslik stiil, mis tegelikult peaks kehtima ka Kaitseväele, aga et see pärines 2012. aastast ja oli vananenud nii väljanägemiselt, kasutusmugavuselt kui tehnoloogiliselt (ei kohandu nutiseadmetega), siis olid nad saanud erandi ja Kaitseväe veebi jaoks sooviti luua täiesti oma stiili. Võtsime siiski ka valitsuse stiilist elemente ja et seos Eestiga oleks tugevam, ka Eesti brändi tööriistakastist (ikoonid, värvid).
Kujundasime veebipõhise kujundusprogrammiga Figma. See on nagu disainimaailma Google Docs – asub pilves ja mitu inimest saab samal ajal ühe asjaga töötada. Luua saab ka klikitavaid prototüüpe. Sellise mahuka veebiprojekti disainimiseks just sobilik tööriist.
Kuna Figmas käib väljanägemise muutmine tõesti kiirelt, siis loobusime aja kokkuhoiu mõttes eraldi wireframe’ide tegemisest ja asusime kohe sisukomponente looma – näide sellest, kuidas tehnoloogia areng muudab tööprotsesse tõhusamaks.
Layoudi aluseks võtsime muidu kohustusliku Valitsusportaali stiiliraamatu viimase versiooni, aga lihtsustasime sealset aja nõuetele ja nutiseadmetele vastavaks. Ladusime uues stiilis komponentidest kokku erinevad vaated – esilehe ja mõned olulisemad alalehed – ja esitasime selle klikitava prototüübina. Uus stiil sai kinnituse ja jätkasime ülejäänud vajalike vaadete kujundamisega.
Nädalad möödusid ja tagasiside viibis. Teadagi, riigiasutuses käivad asjad ikka omas rütmis. Ja siis viibutati Riigikantseleist Kaitseväe poole näppu ja teatati, et Velvetil on ju valmimas täiesti uus ja kaasaegne riigiveebide stiil.
Juunis 2019 valmis uus ja kaasaegne riigiveebide stiili kavand ja hakkasime seda kohandama Kaitseväe uuele veebile. Olime ilmselt üks esimesi, kes uue stiiliga reaalselt töötada sai. Iseenesest õige ja jätkusuutlik otsus, mis säästab maksumaksja raha ja ametnike tööaega.
Tuli komponendid uude stiili teha ja muutus ka layout, mis on stiilijuhendis konkreetselt paika pandud. Kui võrrelda avavaateid, siis uues stiilis on esikohal uudised, allpool on veel esiletõstetud sündmus ja sotsiaalmeedia-voog. Meie tehtud esialgne kavand ei eelda, et ameti lehel käidaks sageli ja avavaates on üldtutvustavad teemad, allpool uudised ja samamoodi sotsmeedia-voog.
Hiljem, kui vaated juba kinnitatud ja asi arendusse minemas, lisandus ka arendusraamistik koos valmisarendatud komponentide ja näidetega. See sai arendajale baasiks ja kodulehe uuenduse protsess kanduski arenduse faasi.
Värske stiil on soliidselt sini-valge ja hele, aga ilmnesid mõned puudused nii kasutajamugavuses kui ka disaini rakendamisel. Kuivõrd stiili hakkavad tulevikus kasutama paljud kujundajad-arendajad ja veel suurem hulk lõppkasutajaid, siis võiks stiili loojad kaaluda mõne asja parandamist:
Et Kaitsevägi on julgeolekuasutus, siis on selle veebi turvalisus ülioluline. Veebi minimaalseks turvatasemeks seati digiturvalisuse organisatsiooni OWASP standardi ASVS 3.0 tase 2, mis on üldiselt enam kui piisav tavapärase esindusveebi jaoks, kus ei käidelda tundlikke andmeid. Seetõttu jookseb Kaitseväe koduleht tugevdatud turvalisusega WordPressi peal.
Lisaks platvormi turvalisusele on oluline ka majutus. Selle eest vastutab projektis erilise hoolega Zone Media, mis on veebimajutuse vallas üks Eesti juhtivaid teenusepakkujaid.
Haldusse pääsemiseks kasutatakse Eesti riigi loodud autentimisteenust TARA, mis annab võimaluse sisse logida eri vahenditega (ID-kaart, mobiil-ID, smart-ID, pangalink). Ent kuna TARA liidestamiseks WordPressiga valmislahendust ei ole, siis arendasime oma plugina, mis asendab WordPress-i vaikimisi sisselogimise süsteemi TARA kaudu autentimisega.
Velveti loodud arendusraamistik koondab valmisarendatud front-end komponendid, ehk selle, kuidas asjad välja näevad. Raamistikuga on mugav töötada, aga et see polnud veebi arenduse ajal veel täielikult valmis, tuli seda üsna palju kohendada ja vigu parandada, et saavutada soovitud kvaliteet.
Erilahendusena tuli esilehele luua sotsiaalmeedia moodul, mis koondab kokku postitused erit platvormidelt ja näitab neid ajalises järjestuses. Projekti esimese etapi lõpuks sai jooksma Twitteri ja YouTube’i voo, lisamisel on muud platvormid.
Kohendada tuli ka WordPressi otsingu loogikat, kuna veebi alamlehtede sisu on keeruka ülesehitusega ja on palju erinevaid dünaamilisi sisuplokke. Lisatud on ka võimalus muuta otsingu tüüpi (kõik sõnad või täpne fraas või vähemalt üks sõna), kitsendada otsingut ajaperioodi valimisega või siltidega. Põhjalik on ka kontaktide otsing.
Ligipääsetavus on kaasaegses veebidisainis üha olulisem. See tagab kõigi ühiskonnaliikmete ligipääsu infole. Kaitseväe veeb vastab WCAG 2.1. standardi nõudeile, mis on üldtunnustatud ja keskmiselt tugev standard. Lisaks on veebil olemas ka vaegnägijatele kohandatud ülikontrastne stiil.
Paratamatult leidub kasutajaid, kes kas teadmatusest või range digipoliitika tõttu ei kasutada kõige uuemaid veebibrausereid. Ligipääsetavus laieneb ka neile. Kaitseväe koduleht töötab kõigi levinumate brauserite kahe viimase versiooniga. Sealhulgas on toetatud ka Internet Explorer 11, mis on küll arendajale paras õudus, aga siiski paraku veel reaalsus.
Testimiseks kasutame nii reaalseid seadmeid, kui ka BrowserStack’i, mis võimaldab testida üle võrgu nii reaalsetel seadmetel kui ka emulaatoritega.
Seekord käis testimine tavalisest siiski põhjalikumalt. Enne avalikustamist laadisime muudatused testimiseks veel ka eelveebi, mis töötab live-veebiga samas keskkonnas ja kasutab samu turvaseadistusi. Kui ka seal kõik sujuvalt toimis, sai uue Kaitseväe kodulehega minna nö otse-eetrisse.
Kui uus veeb üleval, ei saa tehtut niisama imetlema jääda. Muidugi tuleb pidevalt ka peenhäälestada, aga tegelikult muutuvad ajad kiiresti ja veebis ei tohi suuri muudatusi maha magada. Kaitsevägi on ses mõttes hea klient, et mõistab seda ja nii ongi plaanis mitmed uued arendusprojektid. Ikka selleks, et koduleht oma publikut kõnetaks ja esitaks tänapäeva nõudlikule kasutajale vajalikku infot huvitavalt ja mugavalt.
Kui vajad läbimõeldud kodulehte, võta meiega ühendust telefonil 776 9222 või e-posti teel info@redwall.ee.
