Blogi
Alljärgnevalt väike ülevaade, mis viimaste kuude jooksul on veebiarenduse ja -disaini vallas toimunud ja kuhu digimaailm edasi liigub.
Silver Sikk
21.11.2014
Mobiilsete seadmete osakaal tõuseb jätkuvalt. Üha suurem osa inimesi kasutab nutiseadmeid, mitte laua- või sülearvutit. Niisiis valikut väga polegi – kui soovid, et su koduleht oleks igas seadmes, see tähendab rohkematele inimestele nähtav, tuleb selle trendiga arvestada. Näiteks Redwalli loodud Pühajärve Spa & Puhkekeskuse leht kohandub nii tahvel- kui telefoniekraanidele.
Samuti suur jätkuv trend, mis jällegi suuresti seotud mobiilse veebiga. Kerimine on loomulikum, kiirem ja lihtsam, eriti just telefonis. Statistika näitab, et inimesed eelistavad pigem lehte kerida ja sisu näha, kui klikkida ja siis oodata uue lehe/sisu laadimist.
Ühe-lehe-veebi sisu on varasema veebi sisust kompaktsem, kergemini haaratav, visuaalsem. Sügavamale detailsemasse infosse liigutakse erinevate kihtide, kastikeste jms abil, mis käib kiire neti ja moodsate seadmetega kiirelt ja mõnusalt.
2014. aasta üllatuslik superstaar, keda võib näha igal teisel uuel veebilehel, on kummitusnupp (ghost button). Levib kulutulena nagu kivipesu 80ndate lõpu Eestimaal.
Mis see siis on? See on läbipaistva tausta ja peene joonega nupp. Kui tavaliselt on nupp olnud ikka suur ja näkkuhüppavalt erk element, siis kummitusnupp on lihtsalt tagasihoidlikum. Mis aga ei tähenda, et see märkamatum oleks.
Kummitusnupp on enamasti suur call-to-action nupp minimalistlikult õhulises ja stiilses ühe-lehe-veebis. Eluneb koos piiratud värvigamma, suurte toonitud servast-serva fotode ja ühevärviliste ikoonidega. Et selline veeb põhineb suuresti fotodel, siis selline tagasihoidlikum nupp sobibki pildile ideaalselt. Puhas, harmooniline ja soliidne.
Menüü, ehk lehe navigatsioon seikleb ringi ja otsib maailmas oma kohta. Seadmete ekraanid on väga erineva suurusega ja ühest ideaalset lahendust pole. Ühe-lehe-veebide standardlahenduseks on endiselt horisontaalne menüüriba, mis istub kogu aeg lehe ülaservas kinni.
Piiratud ruumiga telefoniekraanidelt on aga ka suurtele ekraanidele levinud ruumi säästev nn hamburgeri-ikoon (3 horisontaalset paralleeljoonekest). See on kujunemas standardnupuks, millele klikkides sõidab enamasti küljelt sisu kohale püstine menüü (vaata näiteks http://twofold.com/).
Üha rohkem võib näha ka lehe paremas või vasakus servas paigal püsivat vertikaalset menüüd. Võib öelda, et see ju trenditormides kaotsi läinud vana hea. Kuid siiski, ka see menüütüüp on nutiseadmetes varasemast osavamaks saanud. Puuteekraanidel on selline menüü pöialdele mugavas positsioonis. Eriti ühe-lehe-veebides toimib justkui klikitav skroll – kui klikid menüüpunktil, nihkub leht sujuvalt vastava sisuni. Nii saab kogu lehest teha seotud interaktiivse jutustuse.
Küljendus koosneb kaartidest või kastikestest, millel näidatakse infot. Iseenesest pole see mingi uudis – Pinterest ja Windows 8 on juba ammu olemas. Aga responsive disain on selle senisest küpsemasse faasi viinud ja telefonidest on see levinud ka suurtele ekraanidele.
Mulle isiklikult tundub, et palju väikseid kaarte suurel ekraanil on tihti paras kaos, kus puudub hierarhia, kuid läbimõeldult tehtuna tagavad kaardid siiski mugava modulaarsuse. Kaarte on lihtne venitada, ümber paigutada, organiseerida. Nendega saab sirvida rohket üldist infot ja minna sügavamale.
Oluline on, et kaart mitte lihtsalt ei esitaks infot – pigem peaks see kutsuma tegutsema: edasi lugema, jagama, kommenteerima.
2013. aasta lõpuks oli selge, et digitaalne maailm on astunud suure sammu lihtsasse lamedasse ruumi, kus pole ei varje ega valgusefekte, tekstuure ega mustreid, värviüleminekuid ega ümarnurki. Windows 8 lõi lakoonilise maailma, mida on tehniliselt mugav luua, mis laeb ja toimib kiiresti, on müravaba ja hästiloetav ning lisaks näeb ka pagana šikk välja. Tekstuuriderohkest skeuomorfismist astuti teise, abstraktsesse äärmusse.
2014 suvel tutvustas Google oma Material designi kontseptsiooni. Tegemist on jällegi suuresti nutiseadmetest ja näpitavatest ekraanidest lähtuva kontseptsiooniga. Sisuliselt on see lame stiil, aga väikeste stiilsete vihjetega reaalsele maailmale. Säilivad lameda stiili eelised, aga lisaks kasutatakse kergeid värviüleminekuid, ruumilisust, kihte ja animatsioone – et tekiks seos tajutava, katsutava maailmaga. Et kasutaja teaks, mida ja millal katsuda, lohistada, venitada. Et kasutajaliides ei oleks liiga kalk. Nii et loomulik areng optimaalsuse suunas.
Pisikesed detailid on need, mis teevad heast asjast fantastilise. Seda eriti valitsevas minimalistlikus kujunduslaadis, kus iga element peab olema paigas. Kuid detailidega ei saa piirduda vaid kujunduses, peab minema edasi, interaktsioonidesse. Tuleb viimistleda ka väikseimad “sündmused”, mis näiteks veebilehel toimetamisega kaasnevad. Kuidas käitub nupp, kui hiirega selle kohale liikuda? Kuidas toimub sisselogimine? Kuidas käitub leht, kui skrollida?
Palju on räägitud parallaks-efektist. Lihtne asi, väike liikumine – aga kui palju see korda läheb: on uurimusi, mis väidavad, et parallaks-efekti kasutamine veebilehel suurendab külastajate kaasatust kuni 70%. Kuid see on ainult üks näide mikrointeraktsioonidest!
Eelnevalt sai Material design’i puhul rõhutatud selle vastavust reaalsusele – see näib ja tundub n.ö reaalsena. Lisaks see mõneti ka toimib samamoodi. Reaalsuses ei toimu ju tegevus ja muutus hetkega – kõik (a) toimub mingi aja jooksul ja (b) mingil moel. Muutusega käivad kaasas muu hulgas liikumine ja helid.
Pisikestele kergetele animatsioonidele pööratakse digitoodetes üha rohkem tähelepanu. Mõnusad personaalsust ja mängulisust lisavad animeeritud detailid annavad kasutajale tagasisidet, et toode toimib nagu asjad päriselus (st pole arusaamatust ega frustratsiooni) ja et tootel on oma iseloom.
Vanu asju, nagu küpsiseid ja uudiskirju kasutatakse targemalt. Ei näidata kõigile ühtsama sisu ega spämmita lauspommitades, vaid jälgitakse, õpitakse kasutajat tundma ja kohandatakse vastavalt sisu. Kasutajale tuleb pakkuda seda, mis teda huvitab. Pole vaja näidata juba nähtut või ebakohast. Nii võidavad kõik.
On fakt, et kiire internet ja võimekad seadmed on veebikasutaja päris pirtsakaks teinud. Veebilehe hetkeline laadimine ja sujuv toimimine on kasutaja jaoks juba täiesti iseenesestmõistetavad. Kui asi ei toimi, siis teist võimalust kasutaja reeglina ei anna. See on ka täiesti arusaadav, sest üha rohkemate inimeste töö ja lõbu sõltub otseselt veebipõhistest teenustest. Moodne elu käibki ju veebis.
Niisiis on toimiv ja kiire kood moodsas veebidisainis tähtsam, kui kunagi varem. Ka Google näiteks väärtustab otsitulemuste järjestamisel varasemast enam veebilehtede laadimiskiirust.
HTML5 ja CSS3 koos moodsa minimalistliku stiiliga on toonud kiiremini laadivad lehed, kuid mingist piirist nii põhimõtteliselt edasi ei saa. Suhtlus ja andmevahetus andmebaasi ja kasutaja seadme vahel jääb.
Google oskab 2014. aastast lugeda ka JavaScripti, mis saab kasutaja seadmes suuresti ise hakkama, ilma et kaugest serverist pidevalt andmeid ja juhiseid ammutada. Ehk et SEO mõttes on JavaScripti kasutus veebilehel nüüd muretum ja suudetakse kasutajale kiiremat reageerimist ja tagasisidet pakkuda. Arendatakse tõhusamaid JavaScripti raamistikke (AngularJS, Ember.js, Meteor), millega lihtsamalt luua kiiremaid ja töökindlamaid veebilehti ja rakendusi.
Et HTML ja CSS lähiaastail kaoks, on ilmselgelt liialdus, aga midagi uut on ehk alguse saanud küll. Ja ka näiteks seni paralleelmaailmadena eksisteerivad äpi- ja veebi arendamine hakkavad arenduskeele ühtlustudes ilmselt lähenema. Ka Redwall tegutseb juba mõlemal rindel.
Viimaste aastate läbivateks trendideks on olnud kõik visuaalne: suured emotsionaalsed fotod, illustratsioonide ja ikoonide kasutus, video, rikkalik tüpograafia. Kõik see kõnetab inimesi. Vastavalt areneb ka tehniline pool, kõik see rikkalik sisu on nüüd võimalikuks tehtud. Ka valitsev visuaalne keel soosib mõtestatud ja olulise sisu edastamist.
Seda olulisem on nüüd kõik veenvaks ja sisukaks jutustuseks komponeerida. Moodne veeb ei ole enam lihtsalt lakooniline ja passiivne visiitkaart, kuhu on kirja pandud su nimi, kontaktid ja teenused-tooted. Sinu veebileht peaks olema seotud lugu, kaasahaarav jutustus, maailm, kus klient/kasutaja tunneks, et ta on osa millestki suuremast, kui lihtsalt ostu-müügi protsessist.
Kogu visuaalne materjal ja tekstid, nende esitlus ja toimimine kasutaja veebibrauseris peavad loomulikul ja kadudeta viisil jutustama sinu brändi lugu. Täna on selleks paremad võimalused, kui eales varem.
Kui näiteks küsida, miks valiti meie tehtud Kivi Apartments kinnisvaraveeb konkursi Eesti Disainiauhinnad 2014 finaali, siis ilmselt just loo jutustamise oskuse pärast teostuse igas detailis.
Usume, et oskame oma tehtud töödega inimesi kõnetada. Võta ühendust – info@redwall.ee!
