Scrollytelling – zadržite posetioce sajta interaktivnom pričom

Šta je scrollytelling

Scrollytelling je tehnika veb dizajna koja pripovedanje pretvara u interaktivan doživljaj.

Dok se korisnik spušta niz stranicu, on ne čita sadržaj pasivno. Usput nailazi na animacije, video snimke i elemente koji reaguju na pokret, a svaki od njih otkriva novi deo vaše priče. Tako nastaje putovanje koje drži pažnju od prvog do poslednjeg ekrana.

Primeri scrollytellinga

Dobar primer ove tehnike možete videti na sajtu firme Morningstar Ventures.

Scrollytelling je prvi popularizovao The New York Times nagrađivanim projektom Snow Fall, The Avalanche at Tunnel Creek.

Danas se tehnika koristi daleko van novinarstva, u pričama brendova, digitalnom marketingu i obrazovanju.

Kako funkcioniše scrollytelling

Poput stripa ili filma, scrollytelling deli priču na scene.

Umesto listanja strana ili pritiskanja dugmića, sam pokret skrolovanja pokreće animacije, smenu teksta i multimedijalne efekte na sajtu.

Kada se pripovedanje i interakcija ovako spoje, sadržaj postaje živ i privlačan.

Ključni elementi scrollytellinga

• Infografike pomoću podataka i vizuala čine složene informacije lakim za razumevanje.
• 3D grafika daje scenama dubinu i realističnost, pa posetilac ima utisak da je deo priče.
• Interaktivno skrolovanje omogućava korisnicima da sadržaj pomeraju vodoravno ili uspravno.
• Parallax efekat stvara osećaj dubine i kretanja tako što se pozadina pomera drugačijom brzinom od prednjeg plana.
• Animacije teksta ističu najvažnije informacije i usmeravaju pogled čitaoca.
• Zvučni elementi, poput efekata ili muzike, dodatno obogaćuju utisak.

Prednosti scrollytellinga u veb dizajnu

Ova tehnika donosi mnogo koristi i pojačava utisak koji sajt ostavlja na posetioce.

• Privlači pažnju. U vremenu kada se ljudi brzo zasite sadržaja, interaktivna stranica ih zadržava duže.
• Podstiče istraživanje sajta. Dinamični elementi teraju posetioce da nastave dalje, sve do kraja priče.
• Brend ostaje u sećanju. Neobičan interaktivan prikaz čini firmu upečatljivijom, pa je veća šansa da se ljudi vrate.
• Lični pristup. Infografike i animacije mogu svakom posetiocu da pruže prilagođeno iskustvo, pa mu je ono što čita bliže.
• Veće angažovanje. Korisnici obično provode više vremena na stranicama sa ovakvim elementima, što povećava verovatnoću konverzije.

Kako da primenite scrollytelling u sadržaju sajta

Ovo pitanje možemo podeliti na dva dela. Prvi se tiče same teorije, a drugi konkretnog postavljanja na vašem sajtu.

Kako scrollytelling funkcioniše u teoriji

• Krenite od dobre priče. Svaki uspešan sajt počinje pričom. Pre nego što počnete sa dizajnom, osmislite tok onoga što želite da ispričate publici. Priča treba da bude bliska ljudima kojima se obraćate i da ih zainteresuje.
• Isplanirajte strukturu. Podelite priču na manje celine ili scene. Svaka scena treba da donese novu informaciju, sliku ili interaktivni element koji se pojavljuje dok korisnik skroluje.
• Izaberite multimediju. Odlučite koji mediji najbolje prate vašu priču, video, infografike ili animacije. Svaki element mora lepo da izgleda i da ima jasnu svrhu.
• Dodajte interaktivne funkcije. Ubacite parallax efekat, animacije ili tekst u pokretu. Ovi detalji treba da podrže priču, a ne da ometaju čitanje.
• Pazite na brzinu. Scrollytelling ima smisla samo ako radi glatko na svim uređajima. Optimizujte slike, video snimke i ostale fajlove kako bi se brzo učitavali bez gubitka kvaliteta.

Kako postaviti scrollytelling na sajt

Za ovu tehniku postoji nekoliko korisnih alata.

1. ScrollMagic i GSAP (GreenSock Animation Platform)

Kombinuje JavaScript biblioteke za kvalitetne animacije i posebne vizuelne efekte koji se pokreću skrolovanjem. Najviše odgovara iskusnim korisnicima i programerima koji prave složene animacije i interakcije.

2. Canva

Omogućava izradu vizuelnih elemenata poput nizova slika, infografika i animiranih GIF-ova koje kasnije ugrađujete na sajt. Dobar izbor za početnike koji žele da obogate priču sopstvenom grafikom.

3. Adobe XD ili Figma

Nude izradu prototipova, pa parallax efekte i prelaze možete da isprobate pre same izrade. Pogodno za dizajnere i developere koji žele da vizuelno isplaniraju ceo tok stranice pre pisanja koda.

Tehnike scrollytellinga

1. Parallax skrolovanje

Za jednostavne efekte dovoljan je CSS, a za složenije se koriste dodaci koji upravljaju brzinom pozadine i prednjeg plana. Parallax treba koristiti umereno, samo na mestima gde dodaje dubinu i skreće pogled na najvažnije delove priče. Previše ovakvih efekata stranicu čini pretrpanom.

2. Animacije koje pokreće skrolovanje

Za ovu tehniku najčešće se koriste biblioteke poput ScrollMagic. Animacije postavite tako da otkrivaju ključne poruke, na primer elemente koji se postepeno pojavljuju dok korisnik skroluje. Tako posetilac ostaje zainteresovan za ono što sledi.

3. Vodoravno i uspravno skrolovanje

Glavni tok priče ide uspravno, a vodoravno skrolovanje ostavite za poseban sadržaj, poput vremenske linije ili galerije. Posetiocu mora biti jasno kada treba da skroluje u stranu, inače se lako zbuni.

4. Fiksirani elementi i lepljiva navigacija

Pomoću CSS-a ili JavaScript biblioteka možete fiksirati naslove ili važne informacije, pa oni ostaju vidljivi dok korisnik pomera stranicu. Ovakve elemente koristite za naslove sekcija i bitna obaveštenja. Oni dele sadržaj na pregledne celine i drže čitaoca uz tekst.

5. Animacije teksta i vizuala

Ključne podatke istaknite animacijama, na primer postepenim pojavljivanjem ili zumiranjem. Pokreti treba da budu suptilni i svedeni, rezervisani za važne brojke, izjave ili slike koje podržavaju priču.

Dodatni izvori

• Uputstvo za Showit Scroll Actions. Korisnicima platforme Showit ovaj vodič objašnjava kako da dodaju interaktivne funkcije, poput otkrivanja skrivenih delova stranice i prelaza između prikaza.
• Gotovi delovi koda za scrollytelling. Za naprednije efekte ponekad je potrebno malo programiranja. Na blogu Pudding mogu se naći unapred napisani delovi koda, uputstva korak po korak i demo prikazi, pa svaki efekat vidite u akciji pre nego što ga ubacite na sajt.
• Primer stranice napravljene u Showit-u. Ova stranica pokazuje kako interaktivno pripovedanje podiže sajt na viši nivo i dobra je polazna tačka za inspiraciju.

Da li je scrollytelling pravi izbor za vaš sajt

Pažnja ljudi na internetu traje kratko. Sve što posetioca zadrži nekoliko sekundi duže može da napravi veliku razliku.

Dr Pepper i Apple, pomenuti u primerima, koriste složen i detaljno razrađen scrollytelling.

Kod primera napravljenog u Showit-u vidi se drugačiji pristup. Elementi scrollytellinga su prisutni, ali su ukomponovani nenametljivo, pa ne opterećuju osnovnu poruku sajta.