Hoidke animatsiooniline veebiarendus lihtsana!

Hoidke animatsiooniline veebiarendus lihtsana!

Rääkisin sellest probleemist ka enda esimeses postituses. Kuid arvan, et see teema nõuab eraldi postitust.

Mäletad neid aegu, kui internet oli täis erinevaid vilkuvaid “tekste ja pilte”. Päris koledad ajad olid, vähemalt minu arvates ja tagant järele mõeldes.

Aga ma ütlen sulle, et neid vilkuvaid “pilte ja tekste” kasutatakse ka tänapäeval ja mitte ainult brutalismis. Seda tehakse ka kõige tavalisemates firma/muudes reklaamivates kodulehtedes, kus tegelikult sellist disainiviisi ei peaks kasutama.

Mida ma mõtlen vilkuvate “piltide ja tekstide” all?

Jah, loomulikult mõtlen ma selliseid bännereid/veeblehti, mis koheselt kasutajate silma jäävad oma erksate värvide pärast.

Aga ma mõtlen nende all ka veebilehti/bännereid, mis on liiga ära animeeritud. Siin tulevad koheselt välja üsnagi suured vead, mida tegelikult animatsiooniline veebiarendus püüab ära parandada.

Üle animeeritud veebilehtede probleemid

Esiteks, kui veebileht on liiga üle koormatud animatsioonidega, siis selle kiirus langeb üsnagi madalale. Minu arust on kiirus üks tähtsamaid asju animatsioonilises veebiarenduses. Animatsioonilise veebiarenduse eesmärk on siiski parandada kasutajakogemust ja kiirus on selle üks tähtsamaid komponente.

Teiseks, üleanimeeritud veebilehest ei saa korralikult aru. See võib olla peamine põhjus, miks firmad animatsioonilisest veebiarendusest hoiduvad – nad kardavad, et animatsioonid muudavad lehe liiga raskesti mõistetavaks. Üleanimeeritud veebilehes see nii ongi, aga õige animatsioonilise veebiarenduse eesmärk ei ole luua mingit sügavamõttelist kunstiteost, vaid muuta kasutajakogemus paremaks.

Kolmandaks, veebileht võib ainult korralikult (või siis täielikult) töötada ühes brauseris. Ma ei saa aru tekstidest või viitedest, et veebileht töötab kõige paremini just selles brauseris või selles brauseris. Veebileht on siiski üks reklaamikanalitest ja kui see ei sobitu kõikide selle kanali vahendajatega, siis jääb (suur) osa potentsiaalsetest klientidest lihtsalt potentsiaalseteks klientideks.

Ma mõistan kolmandat punkti siis, kui veebileht on tehtud lihtsalt just for fun ning selle eesmärk pole müüa või reklaamida midagi. Siis tõesti võib veebileht olla sügavamõtteline kunstiteos, mis isegi minu arust on lahe.

Neljandaks, üle animeeritud veebilehed võivad maksta palju rohkem kui läbimõeldult animeeritud veebilehed. Tõesti, see vastab tõele. Loomulikult oleneb hind ka firmast ja muudest teguritest, aga mida rohkem animatsioone seda kallimaks võib asi minna, sest tööd on ju arendajatel ja isegi disaineritel rohkem.

 

Probleeme on veel (nagu näiteks puudulik RWD), aga ühesõnaga on üle animeeritud veebilehtede probleemiks puudulik kasutajakogemus.

Ma tean võib olla, et mõned inimesed arvavad, et mis sellest kogemusest nii väga, aga uskuge, see mängib suuremat rolli kui oskad arvata. Kasutajakogemus on tänapäeva üks tähtsamaid (ja ka uuemaid) veebidisainis ja -arenduses olevaid valupunkte.

Õnneks õigesti tehtud animatsiooniline veebiarendus eemaldab selle valupunkti 😉 !

Kuidas teha õigesti animatsioonilist veebiarendust?

Sellele küsimusele on üsnagi raske vastata, sest see oleneb täiesti projektist ja ka klientide tahtmisest, aga ma tõin välja sellised üldisemad punktid, mida peaks järgima.

 

Kindlasti tuleks kõigepealt animatsioonid läbi mõelda. Kus animatsioone kasutatakse ja millised animatsioonid peaksid olema? Juba need kaks küsimust võivad sind päästa üsnagi suurest jamast.

Loomulikult tuleks teha mingid prototüübid, mis kujutavad tulevasi animatsioone. Päris huupi pakkumist ei soovitaks, sest tihti peab oma animatsioone ja disaini põhjendama, kas kliendile või ülemusele. Ja hea oleks kui on mitu varianti – nii saad valida parima!

Animatsioonide lisamisel järgi põhimõtet, et nii vähe kui võimalik, aga nii palju kui vaja. Ära üle pinguta, aga ära midagi tagasi ka hoia. Seda võib nimetada ka animatsioonilisuse piiriks.

Animatsioonilisuse piir on üsnagi suhteline, aga pane see endale enam-vähem paika. Näiteks võid sa välja mõelda, mis asjad peaksid kindlasti olema animeeritud. Siis sa saad selle piiri kätte.

Animatsioonid ise ei tohiks olla väga keerulised, vaid pigem lihtsamad. Lihtsuses peitub võlu!

 

Tehnoloogia ala pealt ütleksin, et ära kasuta mitte mingil juhul flashi. See on surnud. HTML5 on parem ja kiirem (kui sa seda millegi pärast ei teadnud).

Nüüd realselt animatsioonide tegemiseks soovitaksin mina järgmisi meetodeid (kombineeritult):

  • Tavaline CSS – CSS on veebibrauserites väga kiire ja ei võta palju ruumi
  • Animate CSS – CSSi animatsiooni teek
  • Velocity JS – tundub olevat väga hea JavaScripti (kaasa arvatud jQuery) animatsiooni teek
  • smoothState.js – jätab meelde, milline oli viimane alamleht koos animatsioonidega

Ja nendest tegelikult piisab. Professionaal ei kasuta palju tööriistu, vaid ainult parimaid 😀 !

Veel tuleks jälgida jõudlust ja teha ka vastavalt parandusi (väikene õpetus siin).

Üldsegi kogu arendus peaks tuginema lausel make it work, make it right, make it fast.

 

Ja ongi selle teemaga kõik. Kas nõustud minuga? Anna komentaarides teada 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *