Dnevnik eklektika - Piše Dragan Babić

Tabovi kao deo interfejsa

Danas, ih viđamo na sve strane, i svi ih traže. Ne sećam se kada sam uradio top level meni koji nije bio u vidu tabova, kako za lične potrebe, tako i za klijente. To samo potvrđuje njihovu efikasnost. No ovde uviđam jedan (po meni) velik problem—ponašanje tih tabova/menija.

Web vs. desktop

Poznato je da da je od nedavno popularizacijom jedne tehnologije počeo proces poistovećivanja Web platforme sa desktopom. OK, kada me već vučete za jezik—da, pričam o AJAX-u. Od nedavno ona više nije bauk, developeri su počeli da je malo slobodnije koriste, s obzirom na to da je broj korisnika koji imaju isključen (ili ga nemaju uopšte podržanog) JavaScript u svojim browserima. Jednostavno došlo je vreme da je okvirna (imaginarna) procentualna vrednost povećanja kvaliteta korisničkog doživljaja koja se dobija upotrebom AJAX-a daleko veća nego strah od nepodržanosti JS-a. Lično, ovo je na moje oduševljenje, naravno uzevši u obzir da se pravilno i s merom koristi, ali to je već neka druga tema.
Dakle, AJAX (naravno ne samo AJAX) nam je Web približio desktopu i omogućio developerima da skoro poistovete korisnički doživljaj korišćenja desktop aplikacije i Web aplikacije. Ponašanja obe su sada veoma slična. Ovo nas sada dovodi do poente i uloge tabova kao jednog od najboljih načina za navigaciju kroz opcije aplikacije, sekcije sajta, itd.

Ponašanje tabova

U ovome vidim najveći problem. Tabovi gube svu svoju svrhu kada se ne ponašaju kao tabovi. Od taba je generalno očekivano da kada se klikne on aktivira “novi deo” interfejsa, sa novim opcijama i sadržajem koje je on logički opisao. Takođe neka konvencija kod “pravih tabova” (da ih tako nazovem) je da trenutno aktivni tab postane “deo” sadržaja koji je upravo otkrio. Ovaj efekat se dobija raznim metodama, ali jedna od najustaljenijih i proverenih je promenom boje pozadine taba, tako da se ona poklapa sa pozadinom dela koji drži sadržaj/opcije sajta ili aplikacije. Uzmimo za primer nov redizajn last.fm servisa i njegovu primenu tabova.

Last.fm koristi tabove kao meni, i taj meni je skroz korektan, izgleda korektno, jasno indicira na kojoj “sekciji” se korisnik nalazi tehnikom koju sam opisao iznad, i to je sve super, ali problem je u tome to je to i dalje samo običan link, koji reloaduje, te ne radi ono za šta smo pomislili, već je samo “premaskiran” u “tabovan meni”, a u suštini je običan meni.

Kada korisnik klikne na tab, on očekuje trenutnu reakciju od aplikacije/stranice u vidu promene sadržaja ili opcija koje su mu do tada bile predstavljene. Ovo je nešto za šta se AJAX recimo koristi, i tada bi se samo deo stranice sa podacima/opcijama promenio, ostavljajući sve ostalo onako kako je i bilo, i to bi načinilo ovaj meni “pravim tabovanim menijem”, za razliku od onoga što je on sada.
Last.fm koristi AJAX u velikoj meri, meni iz primera koji sam uzeo se čak koristi iza logina, tako da botovi i spideri ne dolaze do sadržaja koji on otkriva, možda bi jedino korisnici mobilnih uređaja bili uskraćeni u ovom slučaju (mada se i to da srediti), tako da ne znam zašto i ovaj deo aplikacije nije odrađen na taj način, kao što su na primer dodavanje tagova, ili shoutbox.

Dakle ono što sam hteo da ilustrujem i na šta sam hteo da ukažem je da tabovi sa sobom nose i određene implikacije, sa svojim očekivanim ponašanjem koje se po meni trebaju ispoštovati, jedno od tih očekivanih ponašanja je upravo ova opisana tranzicija između tabova, tj. sadržaja tabova.
Naravno, ne govorim da ukoliko tabovi ne prate ovo ponašanje da ih ne treba koristiti, to bi bilo malo previše, ali svakako bi trebalo na vizuelni način dati do znanja korisnicima da vaši tabovi nisu “zaista” tabovi i da se preko njih ne šalta instant kroz ponuđene opcije, već on služi svrsi običnog menija.
Dobar način za to je opet vizuelno sprečiti “postajanje” aktivnog taba delom sadržaja, tako što mu nećete staviti istu boju pozadine, ili ćete ostaviti jednu liniju koja će ga jasno odvajati od kontejnera u kojem se nalazi sadržaj. Ovo je dovoljno da korisniku sugeriše da se radi o običnom meniju, gde on može da očekuje reload stranice prilikom klika na tab. Dakle stvar je u pravilnoj (i istinitoj) sugestiji korisnicima. Kao primer uzmimo “kvazi tabove” Herbiv.org-a koji su zaista samo navigacioni meni:

I za kraj evo jednog ispravnog ” pravog tab interfejsa”:

• « Football Arena na B92.net
• Redizajn dnevnika »

Komentari na ovaj unos 5

1. Mladen Jablanović kaže 19/07/06 09:26 AM

   Ne bih se složio s tobom. Zašto je bitno da li se iza radi postback ili ne? Tabovi su logički elementi – svejedno da li je urađen postback ili ne, prelaskom na novi tab (stavku u top level meniju) on zaista postaje deo sadržaja i nema potrebe da se ničime nagoveštava “granica”.

   Postavljanjem linije, ili drugačije pozadine, ti korisnika opterećuješ nepotrebnim tehničkim detaljem (“ako ovde klikneš izazvaćeš postback”), odnosno jedan sasvim logički vizuelni element (tab) opterećuješ dodatnim značenjem, mešajući informacione nivoe i unoseći dodatnu konfuziju.

2. Dragan Babić kaže 19/07/06 09:46 AM

   

   Kada sam rekao (u pozadini kao svrhu priče) da se korisnik “uznemirava”, mislim prvenstveno na doživljaj. Jednostavno deo interfejsa ne radi ono što je od njega očekivano. Mislim da je to loša praksa, i mislim da ju je moguće popraviti jednostavnom intervencijom na vizuelnom delu, tj. nagovestiti da “to nije zaista to”.

3. Dragan Babić kaže 19/07/06 06:40 PM

   

   Evo i jednog demoa koji u potpunosti oslikava funkconalnost tabovanog menija primenjenog na Web sajt ili aplikaciju.

4. Mladen Jablanović kaže 20/07/06 09:40 AM

   O tome i pričam… Dodata je ružna crna linija koja prekida tab (estetski i kognitivno), a ne nosi nikakvu poruku. Tab je i dalje tab.

5. Mladen Jablanović kaže 20/07/06 09:44 AM

   Uzgred, kladim se da ovi likovi nisu ostavili crtu da bi nagovestili postback, nego što im je bilo cimanje da border diva crtaju “odozgo”, a i nije to bila poenta demoa.

Komentariši unos “Tabovi kao deo interfejsa”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.