Kui veebilehe eesmärgid, eelarve ja töödejaotus on läbi mõeldud, siis tuleb asuda selle juurde, kuidas erinevad detailid paigutada. See ei ole aga see, millest paljude arvates veebilehe tegemine koosneb ehk väline disain, vaid midagi põhimõttelisemat.
“Kasutaja peab saama meeldiva kasutajakogemuse ja sinu jaoks peab veebikülastus konverteeruma mingiks äriliseks eesmärgiks – mis iganes see sul täpsemalt on,” ütleb Veebimajutuse partner, veebirakendusi valmistava ettevõtte New Garage Time juhatuse liige Mehis Pärn. “Nende kahe poole – mis aegajalt on üksteisega ka vastuolus – vahel laveerides tulekski kogu järgnevat protsessi üles ehitada.”
Alustada võiks kõige lihtsamast ehk veebilehe või selle menüü struktuurist. Eesmärgiks on teemad-sõnumid üksteisega loogilisse seosesse panna – mis käib millega kokku, mis mille alla, mis võiks olla tähtsam kui teine. Selleks võib kasutada eri rakendusi, näiteks Microsoft Visio või veebis tasuta saadaval olev Gliffy, mille vooskeemiga saab hõlpsalt paika panna lehed, alamlehed ning nende juurde vajalikud märked. Sobib aga ka kõige tavalisem mitmetasandiline nimekiri – olgu siis paberil või Wordis.
Seejärel võib liikuda edasi paigutuse kallale. Inglise keeles on selle etapi nimeks wireframing ja eesmärgiks on paika saada kondikava, kus miski asub, mida iga lehega teha saab ja millisel kujul infot esitatakse – on see siis tekst/video/pilt/skeem/vorm.
Taas sobib selleks hästi paber ja pliiats, aga ka joonistamisfunktsiooniga tarkvara – kasvõi Word või Google Docs. Peaasi, et saaks joonistada “kastikesi” – kuhu tuleb pilt, kuhu tekst, kuhu nupp.
Pane ankrud esmalt paika
Üldise paigutuse planeerimisel soovitab Pärn liikuda üldiselt üksikule. Kõigepealt paigutada ja planeerida ära need osad, mis peavad olema püsivalt paigas, nagu päis, jalus, navigatsioonielemendid, kontakti võtmise nupp, ostukorvi ikoon. Seejärel aga minna edasi detailidesse ehk erinevate vaadete juurde, näiteks toote tutvustus, kontaktileht, blogi ja mõistagi avaleht.
Nagu raamatu kirjutamisel pannakse tihti pealkiri kõige viimasena, on sageli mõistlik avalehe läbi mõtlemine jätta kõige viimaseks. Sageli nimelt on veebis näha, et tööprotsessi on alustatud ja palju auru on läinud avalehe – mis teinekord ongi hea saanud – detailide üle vaidlemisele.
“Kõigil on olnud oma sõna kaasa rääkida, aga mujale pole enam jõudu jätkunud ning see paistab selgelt välja,” nendib Pärn.
Veebiarendaja ja Veebimajutuse partner Tanel Terras soovitab kindlasti seejuures läbi mõelda terve rea näiliselt pisikesi detaile, mis aga siiski märgatavalt töö kogumahtu kasvatavad. Näiteks, kas galeriilehel olevaid pilte peaks saama ühe klikiga jagada Facebookis või e-posti teel.
“Selliseid asju töö käigus kuhjaga ette söötes ei saa oodata, et leht kokkulepitud ajaks ka valmis saaks – kuupäev oli arvestatud ilma suureneva töömahuta,“ ütleb Terras.
Juba selles etapis tuleb mõelda tulevikule. Kui osa infot – näiteks kontaktandmed – on eri lehtedel dubleeritud, peab sellega arvestama kohe, et hiljem muudatuste tegemisel saaks järge ajada, kas ikka piisab ainult ühes kohas kontonumbri muutmisest või mitte. Tasub meeles pidada, et kunagi võib lehel olla rohkem infot, näiteks täieneb uudisterubriik või pildigalerii – kas sama paigutusega jääb info endiselt sama kergelt leitavaks? Lahus tuleb hoida tekst ja disain – et ühe muutmisel ei peaks teist muutma. Terras soovitab hea lahendusena näiteks Wordpressi peal olevaid slidereid, kus pilti saab vahetada nii, et sellel olev tekst puutumata jääb.
Esimene katse olgu mustvalge
Üks oluline põhimõte on siiski see, et ei maksa hakata liiga vara liiga põhjalikult disainima. “Üldjuhul oleks hea, kui kondikava oleks mustvalge ja “kandiline“, et millegi välimus ei tekitaks subjektiivseid nägemusi lehe komponentide paigutuses,“ ütleb Terras
“Mustvalge pilt ja default font on väga okei teemade üle arutamiseks,“ lisab Pärn. “Niipea, kui keegi teeb nupu punaseks, läheb eriti grupiarutelude puhul fookus täiesti paigast.“
Unustada ei tohi ka erinevaid seadmeid. Eriti põhjalikud veebiarendajad mõtlevad igasugu vaated läbi, kuid iseäranis lihtsamate veebide puhul pole sellel tingimata mõtet – kõiki seadmeid ei suuda niikuinii ette näha. Kuid vähemalt mobiilivaate paigutus tuleks kindlasti eraldi läbi mõelda ja mõni soovitabki just sellest alustada.
Alati ei pea kõiki vaateid isegi topelt tegema, peamine, et paigas oleks püsielemendid (päis, navigatsioon ja nii edasi) ning üldine loogika – kuidas eri seadmetel miski eskaleerub, ära kaob, või üksteise alla paigutub.
Viimane samm, mida tihti alahinnatakse, on maketi või prototüübi loomine, mille käigus pannakse loodud vaated ja elemendid omavahelisse süsteemi ning modelleeritakse kasutaja liikumist veebis. Seda võib teha juba visanditega, aga kindlasti võiks teha siis, kui eri vaated on disainitud. Kui varasem töö on valminud paberil, saab ka selle osa edukalt paberil teha, kuid tõsine profitööriist selleks on Invision.
Selles etapis saab juba niiöelda kutsuda vanaema ja anda talle ülesanne liikuda lehel kindlasse kohta või teha mingi toiming.
“Kuna asi näeb enamvähem ehe välja ja erinevalt eraldi vaadetest iga kord juhtub midagi, siis tekib juba sarnane kogemus nagu päriselt veebis olema hakkab,“ selgitab Pärn. “Enamasti tuleb välja, et mitu kohta ja teekonda on eelneval planeerimisel ära ununenud ning tuleb nüüd ära teha.“
See test peab olema ka esimene tõehetk, kuidas kasutaja tulevasel veebilehel ilma juhendamata hakkama saab. Seega ei tohi siin anda katsejänesele õpetussõnu, vaid pigem võimalikult keerukaid, aga samas elulähedasi olukordi ja ülesandeid. Nii näeb kõige paremini, kus ta hätta jääb ja mida tuleb muuta.
See kõik võib tunduda väga pikk ja aeganõudev – loe: kulukas, kui see tellida agentuurist.
“Lohutuseks olgu öeldud, et selles kohas kokku hoitud raha kulutaksid sa mitmekordselt siis, kui hakkad ümber tegema valmis programmeeritud lehte, mille kehva toimimise tõttu sa oled juba reaalselt kliente kaotanud,“ ütleb Pärn.
Avafoto: Baldiri
Algne artikkel avaldati Geenius.ee lehel meie blogis.
