Nekada problem sa stranicom nije to što na njoj ima premalo sadržaja, već upravo suprotno: imamo pet usluga, tri prednosti, nekoliko projekata, proces rada, reference i CTA — i sve nam je važno.
Ako sve poređamo jedno ispod drugog, stranica može delovati beskrajno. Ako sve pokušamo da istaknemo odjednom, onda više ništa nije posebno važno.
Bento Grid je jedan od načina da dosta informacija organizujemo tako da stranica ostane pregledna, a da ne izgleda kao tabela sadržaja.
Naziv dolazi od japanske bento kutije u kojoj svaka namirnica ima svoj odeljak. U web dizajnu ideja je slična: sadržaj delimo u celine, ali ih vizuelno povezujemo tako da i dalje deluju kao deo iste priče.
Šta je zapravo Bento Grid?
Najjednostavnije rečeno, to je raspored kartica različitih veličina. Jedna može sadržati glavnu poruku, druga fotografiju, treća broj ili rezultat, četvrta kratko objašnjenje usluge.
Ono što ga razlikuje od običnog grida jeste upravo hijerarhija. Ne moraju sve kartice imati istu širinu i istu važnost.
Ako želimo da jednu poruku primetite prvo, možemo joj dati više prostora. Manje kartice zatim dopunjuju priču detaljima koji su važni, ali ne treba da se takmiče sa glavnim sadržajem.
Tu je i glavna zamka Bento dizajna: vrlo je lako napraviti lep raspored praznih kartica, pa tek posle pokušavati da uguramo stvaran sadržaj u njih. Mi više volimo obrnut redosled — prvo razumemo šta imamo da kažemo, pa onda odlučujemo koliki prostor svaka poruka zaslužuje.
Zašto kartice često olakšavaju snalaženje?
Kada otvorimo dugu stranicu, ne čitamo je uvek od prve do poslednje rečenice. Često je prvo „skeniramo“: gledamo naslove, fotografije, izdvojene brojke i pokušavamo da pronađemo deo koji se odnosi baš na nas.
Kartice tu mogu lepo da pomognu jer grupišu povezane informacije. Naslov nam kaže o čemu je blok, kratko objašnjenje daje kontekst, a vizual ili broj pomažu da ga brzo razlikujemo od ostalih.
A gde se uklapa Milerov zakon?
U tekstovima o Bento Grid-u često se pominje čuvenih „sedam, plus-minus dva“ iz rada Džordža Milera iz 1956. godine i ideja grupisanja informacija, odnosno chunking.
To jeste zanimljiv princip, ali iz njega ne proizlazi da sajt treba da ima tačno sedam kartica. Još manje da će Bento Grid sam po sebi povećati konverziju.
Nama je korisnija jednostavna ideja iza svega toga: ljudi lakše razumeju informacije kada ih organizujemo u logične celine.
Drugim rečima: grupišite ono što pripada zajedno. Ako jedna kartica pokušava da objasni uslugu, cenu, proces rada, referencu i kontakt — problem nije u veličini kartice nego u sadržaju.
Bento nije lek za nejasnu poruku. Ako ne znamo šta želimo da kažemo, ni najlepši raspored to neće sakriti.
Tri stvari koje odlučuju da li Bento stvarno radi
1. Mora da postoji jasan prioritet
Kada klijent kaže: „Sve mi je podjednako važno“, dizajner obično ima problem. Ako je sve veliko, obojeno i naglašeno, korisnik više nema nikakav signal gde prvo da pogleda.
Veličina kartice, njen položaj, kontrast i prazan prostor oko nje pomažu da napravimo hijerarhiju.
Najveća kartica ne mora obavezno da bude CTA. Možda je važnije da prvo objasnimo čime se firma bavi, prikažemo ključni proizvod ili damo razlog zbog kojeg posetilac treba da nastavi dalje.
2. Kartica treba da vodi negde — makar samo u razumevanju
Nisu sve kartice nužno klikabilne. Ali svaka treba da ima razlog što postoji.
Jedna može biti ulaz ka detaljnoj stranici usluge, druga može prikazati rezultat ili referencu, treća samo kratko objasniti važnu prednost.
Problem nastaje kada napunimo stranicu lepim karticama koje ne donose nikakvu novu informaciju.
3. Sve mora da pripada istom dizajnu
Bento može veoma brzo da postane vizuelni cirkus ako svaka kartica ima drugu boju, drugi border radius, drugi stil ikone i drugačiju tipografiju.
Upravo zato držimo dosledne razmake, fontove, način obrade fotografija i vizuelne akcente. Razlike koristimo da pokažemo prioritet, a ne da dokazujemo koliko CSS-a znamo. 😄
I naravno, profesionalan izgled sam po sebi nije dovoljan. Ako sadržaj nije tačan, ponuda nije jasna ili reference nisu relevantne, elegantne kartice neće izgraditi poverenje.
O tome kako akcentne boje mogu da pomognu hijerarhiji pišemo i u tekstu o psihologiji boja u digitalnom dizajnu.
Kako bismo organizovali jednu uslužnu stranicu?
Recimo da firma želi da predstavi jednu važnu uslugu. Mogli bismo napraviti pet gotovo identičnih kartica sa sloganima, ali korisniku to verovatno ne bi mnogo pomoglo.
Mnogo je korisnije da svaka celina odgovori na drugo pitanje:
Šta nudite i kome pomažete?
Ovo je deo koji treba da omogući posetiocu da za nekoliko sekundi shvati da li se nalazi na pravom mestu.
Kako to izgleda u praksi?
Projekat, rezultat ili konkretan primer obično kaže više od još jednog slogana o kvalitetu.
Kako sarađujemo?
Kratak pregled koraka smanjuje neizvesnost i pokazuje šta klijent može da očekuje nakon prvog kontakta.
Šta je uključeno?
Najvažnije stavke ponude možemo sažeti ovde, a detalje ostaviti za posebnu stranicu ili razgovor.
Šta sada?
Dobar CTA ne treba da iznenadi korisnika. Jasno mu kažemo kako da započne razgovor i šta sledi nakon toga.
Ovo je samo jedan primer. Na stvarnom sajtu strukturu prilagođavamo sadržaju, umesto da sadržaj silimo da se uklopi u unapred nacrtanu mrežu.
Mikrointerakcije: malo pokreta je često sasvim dovoljno
Kartice gotovo same pozivaju na animaciju. Hover, pomeranje, promena senke, mala transformacija — lako je poneti se kada sve to počne lepo da izgleda.
Ali animacija ima smisla kada korisniku nešto objašnjava: da je element klikabilan, da je radnja potvrđena ili da se otvorio novi nivo sadržaja.
- Hover i fokus: ako cela kartica može da se klikne, to treba da bude jasno i korisniku sa mišem i korisniku koji koristi tastaturu.
- Kratke animacije: mogu da naglase promenu ili funkciju, ali ne treba da nose informaciju koju korisnik drugačije ne može da dobije.
- Pojavljivanje pri skrolovanju: može dati stranici ritam, ali sadržaj ne treba da „kasni“ dok korisnik čeka da animacija završi predstavu.
Ako primetite animaciju pre sadržaja, verovatno je ima previše. Pokret treba da podrži iskustvo, ne da ga pretvori u demonstraciju efekata. Zato poštujemo i podešavanje za smanjeno kretanje.
Isto važi za Lottie i druge formate. To što je nešto „vektorska animacija“ ne znači automatski da je lagano. Složenost, broj elemenata i količina animacija i dalje utiču na performanse.
Kada je Bento Grid stvarno dobar izbor?
Najviše ga volimo kada stranica ima nekoliko jasnih celina koje mogu da stoje samostalno, ali zajedno grade jednu širu priču.
Tada modularni raspored može da napravi odličan balans između brzog pregleda i detaljnijih informacija.
Na manjem ekranu pomerite tabelu horizontalno da vidite sve kolone.
| Vrsta sadržaja | Kako Bento može pomoći | Na šta paziti |
|---|---|---|
| Softver i SaaS | Funkcije, koristi i kratke demonstracije mogu se razdvojiti u lako pregledne blokove. | Ne praviti katalog funkcija bez objašnjenja zašto su korisniku važne. |
| Portfolio | Različiti projekti mogu dobiti sopstveni prostor, bez potrebe da svi izgledaju potpuno isto. | Lep thumbnail nije dovoljan — treba jasno reći koji je projekat i omogućiti put do detalja. |
| Poslovne usluge | Možemo odvojiti ponudu, proces, reference i glavne koristi. | Korisnik i dalje mora odmah da razume koja je glavna usluga i šta treba da uradi dalje. |
| Proizvodi | Kategorije, karakteristike ili prednosti mogu biti pregledno izdvojene. | Za ozbiljno poređenje cena i specifikacija tabela je često praktičnija. |
| Duga objašnjenja | Bento može poslužiti kao uvodni pregled ili navigacija kroz teme. | Ne lomiti svaki pasus u karticu samo zato što možemo. |
I postoje situacije u kojima ga jednostavno ne bismo koristili. Ako korisnik prati uputstvo korak po korak, čita stručni članak ili popunjava složen formular, klasična linearna struktura je često jasnija.
Trend nije dobar razlog da promenimo način na koji ljudi čitaju sadržaj.
Na telefonu Bento prestaje da bude „Bento“ — i to je sasvim u redu
Ovo je deo koji se često zaboravi kada se dizajn posmatra samo na velikom monitoru. Lep mozaik od pet kartica na desktopu na telefonu uglavnom postane niz elemenata jedan ispod drugog.
Tada nestaje deo vizuelne hijerarhije koju smo napravili veličinom kartica i ostaje ono najvažnije: redosled sadržaja.
Zato mobilnu verziju ne tretiramo kao automatski „stack“ desktop dizajna. Proveravamo:
- da najvažnija poruka i dalje dolazi dovoljno rano;
- da tekst ne skraćujemo samo da bi kartice bile jednake visine;
- da fotografije i dalje imaju smislen kadar;
- da dugmad i linkovi mogu normalno da se koriste dodirom;
- da redosled u kodu ima smisla i za tastaturu i čitače ekrana.
Na mobilnom se često najbolje vidi da li je struktura stvarno dobra. Ako stranica ima smisla tek dok su kartice složene u savršen desktop mozaik, onda verovatno problem nije u mobilnom prikazu.
Brzinu i stabilnost proveravamo na stvarnim stranicama. Više o tome možete pročitati u vodiču za Core Web Vitals.
Bento je raspored, ne cilj
Verovatno je to najvažnija stvar u celoj priči.
Ne krećemo projekat rečenicom: „Hajde da napravimo Bento sajt.“ Krećemo od pitanja šta treba predstaviti, šta je najvažnije i kojim redom korisnik treba da razume ponudu.
Ako se ispostavi da je Bento Grid najbolji način da sve to organizujemo — odlično. Ako nije, ne treba ga koristiti samo zato što trenutno izgleda moderno.
Dobar dizajn nije onaj kod kojeg posetilac prepozna trend. Dobar dizajn je onaj kod kojeg brzo razume sadržaj i zna šta dalje da uradi.
Zato sadržaj i raspored razvijamo zajedno, kao što objašnjavamo i u tekstu Dizajn ili sadržaj: šta je ključ uspeha veb-sajta?
