21. aprill 2014

Tähelepanu! Artikkel on enam kui 5 aastat vana ning kuulub väljaande digitaalsesse arhiivi. Väljaanne ei uuenda ega kaasajasta arhiveeritud sisu, mistõttu võib olla vajalik kaasaegsete allikatega tutvumine.

Sellega, et kodulehe sisu muutub järjest olulisemaks, on küllap kõik turundajad nõus. Kas see tähendab, et kujundus pole enam nii tähtis? Vastupidi – ootused kujundusele on üha selgemad ja konkreetsemad, aga nende aluseks pole ainult AD-de arusaamad ilusast disainist, vaid ennekõike kasutajakogemus ja -mugavus. Mida suurem roll on sisul, seda enam peab kujundus aitama sisu esile tõsta ning arusaadavaks teha. Lisaks oodatakse kaasaegselt veebidisainilt ka seda, et ta kannaks brändi väärtusi, olgu nendeks siis inimlik soojus, põnevad elamused, suurepärane kvaliteet vms. 

WSI Online'i veebikujundaja Tanel Eero toob välja neli trendi kodulehtede välisilme muutumises. Esiteks: üha rohkem püütakse infot edasi anda pildilisel kujul. Teiseks: kujunduses eelistatakse puhtust, selgust ning lakoonilisust. Kolmandaks: eristumiseks kasutatakse üha ootamatumaid võtteid. Ja neljandaks: kõige selle juures peab koduleht jääma kliendile mugavaks ja kiireks info otsimise kohaks. 

Mida saad, ütle pildiga

Kodulehe kõige olulisem osa on harilikult tekst, kuid üha rohkem kasutatakse pildimaterjali selleks, et lugejas huvi äratada või hõlbustada keeruliste seoste loomist. Kõige lihtsam ja kättesaadavam viis info visualiseerimiseks on infograafika. Skeemide ja diagrammidega saab kiiresti anda ülevaate võrreldavatest arvudest või mitmeetapilisest protsessist. Isegi kui inimene edasi ei loe, on ta kõige olulisema sõnumi kätte saanud.  Ajalehed on infograafika eelistest ammu aru saanud ning seal kasutatakse kõikvõimalikke jooniseid just pikkade artiklite juures, toomaks välja kõige tähtsamat. Veebidisainis pole infograafika seni kuigi palju rakendust leidnud, ent nüüd on selle eelised ka siin selgeks saanud. 

Video toob kodulehele dünaamikat ja emotsioone. Klassikalised 30 sekundi pikkused klipid on veebis järjest lühemaks muutunud, sest elu näitab, et 6-sekundiline klipp levib palju rohkem kui poole minuti pikkune. Eestis, tõsi küll, saadakse viralist tihtipeale omamoodi aru ning püütakse internetti üles pandavad videod teha paari-kolme minuti pikkused. Video kasutamist Eestis piirab ka hind – korraliku klipi tegemine on kallis, odav klipp aga võib jätta tootest teenimatult kehva mulje. Filmiklipid on väga otstarbekad ka siis, kui peame selgitama keeruka toote kasutamist, olgu selleks siis mõni tehniline seade, tarkvara, paljude funktsioonidega kodumasin vms. Pikk kasutusjuhend võib tarbija ära ehmatada, paariminutilist klippi vaadatakse palju meelsamini. 

Suured pildid on samuti uus trend veebikujunduses. Sellega ei mõelda mitte lihtsalt suures formaadis fotot, vaid avalehte, mida täidab üksainus pilt, juures CTA nupp. Väga paljudele toodetele nii äärmuslikult ebapraktiline lahendus ei sobi, aga kui ostu juures on emotsiooni loomine esmatähtis, siis see õigustab ennast. Muidugi peab suurelt presenteeritud pilt olema väga kvaliteetne. Mõne veebikujunduse põhitöö teebki ära fotograaf.  Kvaliteetfotode kasutamise leebem variant on emotsionaalne päis, mis loob sobiva häälestuse, kuid funktsionaalsus jääb lehele siiski alles. Seda lahendust näeb "tavaliste" kodulehekülgede juures üha enam.

Less is more

Ilus ei ole seesama mis keeruline. Moetööstuses räägitakse sageli "lihtsast elegantsist", põhjamaist mööbli- ja sisekujundust iseloomustatakse sõnadega "valgusküllane", "karge" ja "puhas". Nüüd on samad suunad jõudnud ka veebikujundusse, moodi on tulnud minimalistlik graafika, suured puhtad pinnad, palju õhku, hoolega valitud detailid. Web 2.0 on kadumas. Ruulib flat disain, mida võibki kirjeldada kui kujundust, kus püütakse läbi ajada võimalikult väheste elementidega, puuduvad varjud, läiked, üleliigsed kaunistused jms. Põhjus pole siiski mitte järjekordses moes, vaid kasutajakogemuses, mida moodne, lihtne ja puhas kujundus toetab. See on selgelt stiil, mida kliendid järjest enam nõuavad. 

Lihtsus on veebidisaini oluliseks märksõnaks tõusnud kolmel põhjusel. Kõigepealt, elegantne üldmulje loob brändile kvaliteedikuvandit. Teiseks, mida vähem on elemente, seda lihtsam on külastaja suunamine lehel, kuna tal pole võimalik kuskile mujale vaadata/klikkida. Ja kolmandaks võimaldab tagasihoidlik kujundus sisul paremini esile pääseda. Kuna sisu (värske ja algupärane!) on veebis järjest olulisemal kohal, siis peab ka kujundus seda toetama, mitte endale tähelepanu tõmbama. Nendel lehtedel, kus fotosid palju kasutada ei saa, luuakse emotsioone ja põnevust erksate monokroomsete värvilahendustega.

Tüpograafiale kui kujunduselemendile ei pööratud pikka aega erilist tähelepanu eelkõige tehniliste keerukuste tõttu ning arvates, et see on miski, mis endastmõistetavalt on samasugune nagu firma trükisteski. Lihtsa disaini juures mängib tüpograafia aga suurt rolli. Muutunud on nii kirjatüübid (hüvasti, TimesNewRoman ja Arial!), suurused, õhuvahed kui ka värvid. Põhjalikumad CVI-d näevad täna ette, kuidas kujundada pealkirju ja põhiteksti kodulehel, nii et see sobiks kogu muu firmagraafikaga. Kuna tekst on endiselt suurema hulga kodulehtede peamine element, siis on just tüpograafilised lahendused need, mis võimaldavad  kujundust oluliselt isikupärasemaks muuta. Responsive-lehtedel on põhitekst paar punkti suuremaks muutunud, et see oleks iga seadmega võrdselt loetav.

Viimistletud detailidel on suur rõhk, nupud ja ikoonid peavad olema põhjalikult läbi mõeldud ning kvaliteetselt teostatud. Näiteks hiirega nupu peale liikudes ei muuda see värvi, vaid nupule on lisatud mingi animeeritud tegevus. Ja taas peame kordama, et sellise suuna põhjuseks pole mitte (ainult) kujundajate arusaam ilust, vaid kasutajamugavus – läbimõeldud ikoonide puhul tajub lugeja intuitiivselt, kuhu ta peab vajutama, mis märk mida tähendab jne. 

Eristu, üllata, lõbusta

Tänane tehnoloogia on jõudnud nii kaugele, et animatsiooni on võrdlemisi lihtne sisse tuua ka tavaveebi. Flashi animatsioonideks enam ei kasutata, kuna mobiilsed seadmed ei toeta seda; selle asemel koguvad populaarsust HTML5 ja CSS3 lahendused. Veebidisainis ei tähenda animatsioon mitte multifilmi, vaid lihtsamaid liikuvaid lahendusi, nt elementide hajumine, nihutamine, skaleerimine, pööramine jne. Animatsioon on üks paremaid viise, kuidas kodulehte põnevamaks teha. Lisaks loob liikuv pilt mulje, justkui oleks leht lugejaga otsekontaktis, reageerides tema liikumisele.  

Parallax tähendab niisugust kujundust, kus mõned pinnad liiguvad (kohati ebaloomulikult), teised aga jäävad paigale. Seda kasutavad ennekõike suured brändid, kes tahavad tekitada tugeva visuaalse wow-efekti. Parallax on julge loominguline lahendus, mis nõuab palju tööd, ent eristuv pilt on kindlustatud. Lihtsalt sellepärast, et külastajaid rabada, pole mõtet seda teha, kui aga sihtrühm hindab erakordsust, ainulaadsust ja uusi võtteid, siis võib see olla just see, millega silma jääda. 

Kui meil on põhjust eeldada, et külastaja on valmis rohkem uurima ja avastama, mitte ei taha lihtsalt kiiret infot leida, siis tasub proovida kaartidega „Metro“ lahendust. Selle juures on lehekülg jagatud erinevate suurusega "kaartideks", mille puhul ükski neist ei tõuse otseselt esile, kõigi variantide võimalus silma paista on samaväärne.  Nimetatud kujundus sobibki pigem ebastandardsetele teenustele, mitte traditsioonilisele kodulehele. 

Mugav ja praktiline

Üha enam loetakse veebilehti mobiilides ja tahvelarvutites, mistõttu on järjest kasvanud vajadus paindlike lahenduste järgi, mis kohanduksid kõigi seadmetega. Kui veel hiljuti oli responsive-lahendus üks võimalustest, siis täna on see muutunud standardiks. See ei tähenda, et mobiiliveebid üldse välja sureksid, nt e-poodide puhul õigustab eraldi lahendus ennast igati. 

Navigatsioon peab sammu pidama tarbijate harjumustega. Oli aeg, mil menüü asus tavapäraselt vasakul, siis sai harjumuseks üleval olev menüü, nüüd asub põhimenüü enamasti üleval, alammenüü vasakul. Menüüd on muutunud oluliselt lühemateks (3-4 põhimenüü kategooriat), mobiilid ajendavad peidetud menüü trendi.

Teine nagiveerimist lihtsustav võte on single page lahendus, mille korral on enamus kodulehe sisu paigutatud täies mahus ühe lehe peale ja navigeerimine käib lihtsalt kerides või läbi ankrumenüü. Lehe sisu tarbimine on rohkem raamatu lugemise moodi, kui sõnaraamatu lehitsemise moodi, aga see lahendus sobib eelkõige kompaktse sisuga lehtede jaoks. Ennast on tõestanud ka niiöelda pool ja pool lahendused, kus põhimenüü viib ikkagi eraldi lehtedele, aga alamlehed on lahendatud single page tüüpi navigatsiooniga.

Kokkuvõttes võib öelda, et ühesuguste kodulehtede aeg on möödas, täna püütakse eristuda, pidades aga kogu aeg silmas kodulehe põhieesmärki – kiiret ja arusaadavat info edastamist hea kasutajamugavusega. Kodulehekülje loojat/arendajat otsides peakski vaatama, kas pakutakse lihtsalt disaini või nähakse veebi kui turunduseesmärkide saavutamise vahendit, mille juures on oluline nii sisu, ilu, eristuvus kui kasutusmugavus. 

Autor: Tanel Eero, Silja Oja