Rich Internet Application tehnologija nam je dala moć da kreiramo čudesne aplikacije koje zadivljuju njihove korisnike. Najbolje RI aplikacije na webu danas se oslanjaju na diskretni set kontrolera korisničkog interfejsa kako bi omogućile real time uživanje svojim korisnicima. Ako prelazite sa web dizajna na dizajn web aplikacija, najbolju informaciju koju možete imati na raspolaganju jeste razumevanje ovih ključnih kontrola.

Popularne RIA biblioteke, alati i frejmvorci

Većina ovih biblioteka, alata i frejmvorka imaju online galeriju kontrola (takođe nazvane komponentama, vidžetima, UI kontrolama) koje biste mogli da pregledate. Zašto? Kako ne biste bili jedan od onih dizajnera koji će napraviti gomilu lepih sličica u Photoshop-u ili Illustrator-u koje se ne mogu implementirati ili čija implementacija je previše skupa da bi se kodirala onako kako je dizajnirana.

• Ext JS
• Adobe Flex/AIR
• JQuery (plugins), JQuery UI
• Dojo
• OpenLaszlo
• MooTools (plugins), JXLib for MooTools,Mocha UI
• Vaadin
• Telerik for ASP.net,Telerik for Silverlight
• ZK
• Google Web Toolkit ,GWT Ext
• YUI 2 , YUI 3
• LivePipe
• Backbase
• SmartClient
• Prototype, Prototype UI and Scriptaculous
• RichFaces
• ICEFaces

43 ključne kontrole

Mnogi proizvodi su smešteni u okvir RIA frejmvorka koji koriste, pa dizajneri kreiraju nove komponente kada frejmvork nema ono što im je potrebno. Ovo može umanjiti upotrebljivost proivoda, a povećati trud dizajniranja, testiranja upotrebe, tehničku specifikaciju i vreme razvoja. Pre nego što podlegnete dizajniranju novih kontrola proučite šta je to što već postoji.

1. Auto popunjavanje / Auto predlaganje

Auto-popunjavanje koristeći Vaadin.

Omogućite automatsko popunjavanje polja ili automatsko predlaganje korisniku kako bi mu pomogli povećanjem efikasnosti i smanjili greške. Možete čak i formirati grupni i formatirani set predloga kao što to Apple radi.

2. Carousel/Coverflow

Carousel by Moving Boxes

Kontrole za pokretni sadržaj uključuju i takozvane carousel-e, coverflow-ove, slider-e i slideshow-ove i one su dostupne u skoro svim frejmvorcima.  JQuery ima ceo set pluginova za mnogo različitih varijacija jednostavnog carousel-a. Sve ove varijacije pružaju fino rešenje za pretraživanje i pregledavanje vizuelnog sadržaja. Zapamtite da dodate stop dugme i dugme za pauzu ukoliko planirate da implementirate auto-play.

3. Planer

Telerik RadScheduler za Silverlight

Potreban vam je dobar planer? Ne želite da pitate svoj razvojni tim da kodira ovakvu životinju.

Postoji dobar broj Ajax planera koji su dostupni online, a mogu da odrade posao uz malo CSS ljubavi. Flex, OpenLaszlo i Telerik Rad kontrole za Silverlight sada imaju i ovu kontrolu u sebi.

4. Grafikoni

Flash grafikoni na Discover Spend Analyzer-u

Neki frejmvorci uključuju grafikone kao npr. Ext JS, Flex, Telerik, i SmartClient. Ali postoje i Flash biblioteke koje se koriste upravo za ovaj vid prikaza statističkih podataka. Popularne biblioteke su AnyChart, Dundas, JFreeChart, amCharts, Visifire for Silverlight. Liste ovakvih biblioteka su dostupne online: 28 on InsideRIA i 70+ on TripWire.

5. Padajući paneli

Click here to view the embedded video.

6. Combobox: Multiselect

asmSelect, JQuery plugin

Umesto da prikazujete more checkbox-eva ili dosadan ctrl+shift+click list box, koristite kontrolu koja dozvoljava korisniku da vidi šta je izabrao. Ova kontrola funkcioniše i uklapa se odlično na stranama sa kriterijumima na levoj strani i rezultatima na desnoj. Nijedan frejmvork nema još uvek ovu kontrolu, ali postoji ovaj jQuery plugin.

7. Kalendar

MooTools plugin

Može vam se desiti situacija kada standardan kalendar nije dovoljan. Većina pomenutih frejmvorka podržavaju jednu ili više naprednih opcija vezaznih za kalendar: izbor perioda, datum i vreme, pregled više meseci uporedo, i datume koje treba isključiti.

8. Dijagramer

<

KapIT dijagramer

Napredna kontrola koja omogućava korišćenje dijagrama, flow chart-ova, organizacionih mapa, dijagrama procesa itd. yFiles ima verziju za Flex, .Net i Ajax. KapITLabs ima Flex/Flash veriju koja je dostupna.

9. Dijalog

Picnik Modeless Dialog

Postoji puno varijacija dijalog kontrole: lightbox, modal dijalozi, modeless dijalozi i hover dijalozi. Svi frejmvorci nude bar jednu verziju dijaloga.

10. Skraćeni paneli i paleti sa alatima

Click here to view the embedded video.

Skraćeni paneli i palete sa alatima su nezamenljive kontrole za maksimizovanje ili podešavanje radnog okruženja gde prostor nije toliko veliki.

11. Drag and drop menadžer

Click here to view the embedded video.

Ako vaš dizajn zahteva drag and drop, pogledajte Interaction Matrix Billa Scotta. Onda probajte Ext JS organizer demo, dizajn im je zakon. Jedina stvar koja fali je ruka preko slike.

12. Dinamički filter

Click here to view the embedded video.

Dinamički filter može raditi dobro sa listama, mrežama i kolonama u okviru mreže. Saznali smo da filtering u okviru kolone u tabeli može da obezbedi moćne opcije za korisnike koji rade sa velikom količinom podataka. Idealno bi trebalo da postoji clear dugme u okviru polja za unos kako bi se očistio uneti tekst. Ova kontrola se može dodati u okviru frejmvorka i u slučaju kada ta opcija po default-u ne postoji.

13. Feedback

Click here to view the embedded video.

U svakom trenutku morate imati feedback: greške, info, statusne poruke i saveti. Stavite feedback na vrh svoje strane ili u blizini akcije. Izbegavajte da koristite status bar u web browser-u jer ga mnogi ljudi sakriju. Ako u feedback-u koristite fade-in ili fade-out ispratite pravilo od dve sekunde.

14. Fisheye

Click here to view the embedded video.

Ovo je jedan pravi primer fisheye efekta koji se može naći na web-u. Elegantna opcija koja omogućava pogled iz bliza. Vrlo upotrebljiva za mape ili veoma velike grafike. Alternative ovoj opciji su Zoom, Pan i Magnify.

15. Potanjajući footer

Footer na Facebook-u

Potanjajući footer (ili header kao thesixtyone) moglo bi da bude dobro rešenje za prikaz opcija u akciji. Većina pomenutih frejmvorka imaju način kako ovaj efekat može da se kodira. Asp.net Ajax ima demo koji prikazuje ovu kontrolu.

16. Gantogram

Gantt na Tour de Flex-u

Povremeno se javlja potreba za upotrebom gantograma, uglavnom za planiranje aktivnosti. EyeBlaster Campaign Manager je pronašao način kako da napravi kontrolnu tablu na kojoj se može pratiti kampanja koristeći gantogram. Kao i kod ranijih primera i kod ove kontrole su najbolji oni primeri koji su već kodirani. ILog Elixir ima jedan za Flex, a postoji i jedan broj ranijih verzija pisanih u Ajax-u.

17. Uvećavajuće tekstualno polje

Click here to view the embedded video.

Ne znate koliko će korisnik da otkuca teksta? Počnite sa nekom razumnom veličinom i dalje neka prostor raste sam. Obratite se Facebook-u za još jedan live primer.

18. Hotkeys/prečice na tastaturi

Prečice na tastaturi na Noteflight-u

Noteflight čini rad lakšim omogućavajući prečice na tastaturi.

Zar ne želite da i vaši korisnici kažu to isto i za vas? Ono što je još važnije. da li želite da čujete šta imaju da kažu kad im ne omogućite prečice na tastauri? Ne bi bilo prijatno…

19. Hover akcije

MockLinkr koristi hover da linkuje, komentariše ili da obriše hotspot

Hover je odlična alternativa ponavljanju jednog istog dugmeta nebrojeno puta. Svi frejmvorci podržavaju mogućnost da se kodira hover akcija koristeći CSS. Zapamtite da naznačite da ova akcija postoji.

20. Hover detalji

Click here to view the embedded video.

Prikazivanje dodatnih detalja na hoveru je odličan način da se ostane na strani. Izbegavajte anti patern hover and cover (ne prikazujte detalje preko primarne akcije).

Radi najbolje sa read-only podacima. Ako imate polja za unos, tabove ili neke druge heavy interakcije koristite dijalog, inlay panel ili overlay panel. Ako morate da prikažete link u svojim hover detaljima podesite timer tako da korisniku date dovoljno vremena da na isti klikne pre nego što sve nestane.

21. Inline editovanje

Inline editovanje na FLickr-u

Razmislite o aplikaciji koju dizajnirate – da li je optimizujete za unos ili za čitanje podataka? Ako aplikaciju optimizujete za čitanje, inline editovanje može da vam pomogne da otklonite svo vizuelno ometanje od strane polja za unos. Neki od frejmvorka podržavaju ovu mogućnost po defaultu – pogledajte njihov CSS i JS. Ovo je neprocenjiva kontrola koja povećava efikasnost i održava tok korisnika kroz aplikaciju. Za napredno razvijanje aplikacije – ako već imate događaje koji su vezani za polja, imitirajte inline editovanje koje se dešava na vašem desktopu – klik jednom za izbor objekta, kada se klikne još jednom na isti objekat ulazi se u edit mod. (imajte na umu da je ovo drugačije od duplog klika).

22. Liste: Napredno

Drag and drop na Tick-u

Kao što očekujemo više od tabela i drveta od onoga što su ti objekti radili u Web 1.0, liste moraju da se takođe ponašaju naprednije. Drag and drop, jednostavno pravljenje liste, custom formatiranje i dinamički filteri su opcije koje mogu da učine vašu listu lakšom za korišćenje.

23. Uvećanje

jQZoom uvećava deo slike

Odlična alternativa otvaranju dijaloga, kontrola za uvećavanje prikazuje uvećanu verziju oblasti u kojoj se nalazi miš. Par frejmvorka nudi ovu opciju po defaultu, ali ona može biti naknadno dodata. Pogledajte ‘Fisheye’ i ‘Zoom i Pan’ za neke ideje.

24. Mapiranje

GWT- Ext Maps Showcase

Mnoge aplikacije imaju potrebu da integrišu mape, kao što to radi Google ili Yahoo maps, Google Web Toolkit -Ext Showcase ima veći broj dobro dizajniranih varijacija na ovu temu koje vredi pogledati, sa druge strane ima ih i  Flex – tražite “maps” u  Tour de Flex-u.

25. Interfejs sa više dokumenata

Click here to view the embedded video.

Neke aplikacije su pogodne za MDI (Interfejs sa više dokumenata). MochaUI frejmvork, kao i par drugih, omogućava ovu kontrolu. Pre nego što krenete ovim putem procenite funkcionalnost tabova u svom browseru.

26. Portali

Portal demo na GWT-Ext Showcase-u

Portal layout može biti dobro rešenje za dizajn landing strane, gde korisnik želi da vidi sadržaj u određenom formatu i konfiguraciji. Ali zapamtite, omogućavanje visokog stepena customizacije nije zamena za korisnikovu pretragu i testiranje.

BBC i Netvibes imaju jako dobro dizajnirane portale sa kojima se možete igrati.

27. Bar za učitavanje

Bar za učitavanje na Discover Spend Analyzer-u

Indikator progresa može biti bilo šta od bara za učitavanje, preko ikonica koje se okreću do zauzetih kursora. Najbolje je da pogledate kako druge dobre RI i desktop aplikacije prikazuju progres pri učitavanju u situacijama koje su slične vašem.

28. Ocenjivanje

Ajax ocenjivanje

Ocenjivanje je slično inline editovanju, dozvoljava korisniku da brzo i efikasno unese informacije bez napuštanja strane ili prelaska na drugi sadržaj.

Ocenjivanje ne treba mešati sa redosledom koja bi koristila naprednu listu gde bi korisniku bilo omogućeno da redosled objekata u listi menjaju prevlačenjem istih.

29. Lociranje rekorda/Paginacija

Paginacija na Ext JS-u

Većina tabela i layout-a bi trebalo da koriste live/virtuelno skrolovanje za navigaciju. Međutim postoji dosta mesta gde bi paginacija bila jako korisna, pa je možete i iskoristiti. Na primer otvaranje nekog rekorda bi moglo da uključi i paginaciju kojom bi korisnik mogao da pređe i na druge rekorde.

30. Bilder pravila

Napredni filter sa SmartClient-a

Ovo je za svaku aplikaciju uvek predstavljalo prenatrpanost, medjutim ako dizajnirate naprednu analizu podataka, alate za pretragu i izveštavanje najverovatnije će vam ova opcija biti neophodna. SmartClient Ajax RIA sistem ima upravo tako nešto i očekuje da ostali frejmvorci uključe ovu kontrolu u svoj paket sada kada je iTunes predstavio sličnu opciju.

31. Slajder

Primer slajdera

Slajder je pogodna kontrola kada ljudi biraju okvirne vrednosti npr. glasnije ili tiše, više ili niže vrednosti ili opsege. Ova kontrola nije najbolje rešenje kada se biraju određene vrednosti, kako npr. 37% ili 211 dinara. Ako koristite slajder izaberite onaj kojim se može upravljati preko tastature i koji ima pored sebe polje za unos kako bi korisnik mogao da unese željenu vrednost.

32. Pretraživanje po oblastima

Primer pretrage po oblastima

Omogućite svojim korisnicima da lakše dođu do sadržaja koji žele koristeći pretragu po oblastima. Postarajte se da je to opcija koja ne smeta kucanju u okviru polja za unos. namestite default vrednost “Sve” npr. i dozvolite im da izaberu neku drugu oblast u okviru koje se sadržaj može nalaziti. Janko je predstavio fin tutorijal implementiranje ove opcije koristeći CSS.

33. Sparklines

Sparklines na Google Analytics-u

Sparklines su odličan način prikazivanja trenda ili oblika podata na malom prostoru. Kreirane su od strane maga za vizuelno prikazivanje podataka, Edward-a Tufte-a.

Postoji veliki broj biblioteka koje podržavaju ovu kontrolu u Ajax-u, Flex-u, Silverlight-u.

34. Spliter

Click here to view the embedded video.

Spliter omogućava korisniku da podesi layout. Zapamtite da prikžete odgovarajuće kursore pri hoveru ili prevlačenju. Drugi dobri primeri su Google Reader i desktop aplikacije kao npr. Windows Explorer ili iTunes.

35. Tabovi: Napredno

Click here to view the embedded video.

Pre nego što se odlučite za implementaciju tabova pročitajte članak Tabs Used Right koji je napisao Jakob Nielsen. Tabovi se koriste za promenu sadržaja istog konteksta.

36. Tabela/Mreža: Napredno

Mreže na ExtJS-u

Kada dizajnirate mrežu držite se standarda. Uglavnom sve što vašim korisnicima treba je već dizajnirano. ExtJS ima jako dobaro dizajniranu mrežu sa dosta naprednih funkcija, kao npr.: live skrol, promena veličine hedera ili promena mesta hederima, sortiranje, sakrivanje i prikaz kolona, grupisanje redova, inline editovanje i izbor reda. Nemojte praviti svoju mrežu – trebaće vam stotine sati da kodirate i testirate kako bi radio u svim browserima.

37. Stablo: Napredno

Click here to view the embedded video.

Ako vaš dizajn zahteva stablo, koristite ono koje je napredno. ExtJS i Flex imaju najbolja stabla sa kompletnim funkcionalnostima za dodavanje čvorova, inline editovanje i prevlačenje čvorova kako bi ih reorganizovali. Pogledajte takođe ‘Vertikalno pretraživanje’ kao opciju za navigaciju kroz hijerarhiju stabla iz bilo kojeg čvora.

38. Toolbar

Kontekstualni toolbar u Buzzword-u

Toolbar je obavezan deo u skoro svakom dizajnu koja se zasniva na mreži podataka. Bulk akcije mogu biti smeštene u toolbar, kao i globalne akcije, npr. Print, Export itd. Izbegavajte toolbar i meni sa padajućim menijima. Eksperimentičite umesto toga sa naprenijim kontrolama kao što su “Hover akcije” ili “Inleni editing” Probajte da ponudite direktnije interakcije, a manje navigacije.

Kontekstualni toolbar-ovi su još jedna naprednija kontrola. Oni prikazuju opcije u zavisnosti od od konteksta strane na kojoj se pojavljuju, umesto da prikazuju sve odjednom. Picnik ima najbolje kontekstualne toolbarove koje sam do sada video.

39. Saveti: Napredno

MooTools plugin

Napredni saveti mogu da imaju u sebi širok spektar opcija za formatiranje. Pogledajte ‘Hover detalje’ za više informacija o hoveru.

40. Vertikalni browser

Vertikalni browser za Apple Dashboard Widget-e

Koncizna kontrola koje omogućava korisniku da odabere polaznu tačku iz koje će dalje ići kroz hijerarhiju. Može biti napravljena povezivanjem lista u većini frejmvorka. Imajte u vidu da uvek prikažete putanju do izabranog objekta u listi.

41. Promena izgleda

Izbor broja ikona po strani na Icon Finder-u

Ova kontrola predstavlja mogućnost izbora izgleda, recimo tabela ili grafik ili predstavljanje opcija kao što je 10, 20 ili 50 rezultata po strani. Može biti kreirana u bilo kom od pomenutih frejmvorka. Postarajte se da se izabrana opcija vizuelno razlikuje od ostalih.

42. WYSIWYG / Text editor

YUI 2 Text Editor

Za sastavljanje ili izmenu velike količine teksta WYSIWYG editor nudi alate koje ljudi očekuju. Većina frejmvorka uključuju ovu kontrolu sa opcijama koje se mogu prilagođavati. CMS-ovi su sada jako aktuelni i oni su integrisali ove text editore, pogledajte InContext i Drupal redesign.

43. Zoom i Pan

Click here to view the embedded video.

Ne morate da znate kako da kodirate ove kontrole – dovoljno je da znate da ova kontrola postoji i kako je najbolje iskoristiti je. Možete zamisliti scenario gde umesto da detaljno sve objašnjavate samo kažete “To je isto kao što BBC koristi opciju za prilagođavanje home strane svog portala” i “JQuery ima odličan plugin za to”. Razmislite o vremenu koje ćete uštedeti i kredibilitet koji ćete dobiti od strane svog tima.

U slučaju mapa ili fotografija panning može zameniti skrolovanje i ponuditi prirodniji utisak prelaženja po informacijama. Pogledajte takođe ‘Uvećavanje’ i ‘Fisheye’ za druge tehnike.

Izvor: www.uxbooth.com

Joomla, nekada pod nazivom Mambo, je jedan od najpopularnijih open-source Content Management Sistema (CMS). Kao što je to slučaj sa većinom open-source rešenja, postoji i gomila besplatnih alata koje možete koristiti. Napravili smo izbor od preko 30 korisnih ekstenzija i drugih alata koji će vaš Joomla život učiniti jednostavnijim. Uživajte.

Ne zaboravite da nakon ovog pogledate i ostale interesantne članke na našem blogu. 

Ekstenzije

iJoomla.com – Nudi miks besplatnih i komercijalnih ekstenzija za vaš sajt

Joomla-Addons.org – Veliki izbor besplatnih addon-ova z Joomlu

JoomlaHacks.com – Velika kolekcija besplatnih modula i templejta

JoomlaShowroom.com – Dizajniranje ekstenzija za poslovne sajtove koji su rađeni u Joomli

JoomlaSpan.com – Izbor komercijalnih ekstenzija i monitoring servis

Resursi

HowToJoomla.net – blog koji je posvećen Joomli i svemu što ona nudi. Postoji dosta saveta i trikova za napredne korisnike.

Joomla.org – Home page open source sistema sa arhivom od 2,200 ekstenzija, forumom i delom za developere

Joomla-Developer-Resources.com – Tutorijali pogodni ukoliko počinjete neki Joomla projekat

JoomlaBased.com – Postavite svoj sajt i dobijte ocene i komentare

JoomlaCode.org – Sajt koji je pogodan za developere koji žele da razviju projekat zasnovan na Joomla kodu

JoomLancers.com – Sajt za ljude kojima je potreban freelancer za rad u Joomli

JoomlaSpots.com – Upišite svoj sajt zasnovan na Joomli u ovaj direktorijum da bi bio primećeniji

JoomlaTribune.com – Zbir vesti i resursa iz cele Joomla zajednice

JoomlaTutorials.com – Kao što samo ime kaže, velika količina tutorijala za Joomlu

JoomlaZone.net – Sajt sa ciljem da skupi sve Joomla sajtove na jedno umesto u jedinstveni direktorijum

Templejti

CompassDesigns.net – Profesionalni dizajneri templejta sa gotovim rešenjima. Sajt takođe ima i besplatne tutorijale

Gavick.com – Dizajner na području Evrope koji radi profesionalne templejte sa malim izborom onih koji su besplatni

IbolDesign.com – Kolekcija besplatnih Joomla templejta

Joomla-Themes.co.uk – Vesti i ocene svih najnovijih tema u Joomla svetu

Joomlart.com – Templejt klub gde dobijate odmah 40 templejta i 2 mesečno u narednih godinu dana

JoomlaJunkie.com – Kompanija za izradu profesionalnih templejta za Joomlu koja voli da se fokusira na boju. Nudi i mali izbor besplatnih templejta.

JoomlaShack.com – Nudi mali izbor besplatnih templejta i još dosta onih koji su komercijalni.  Takođe poseduje tutorijale i forum.

PixelParadise.com – Nudi preko 60 komercijalnih templejta.

RocketTheme.com – Još jedan templejt klub koji vam nudi 45 templejta nakon učlanjenja, a nakon toga 1 mesečno narednih godinu dana. Nudi i mali izbor besplatnih templejta.

Shape5.com – Nudi mešavinu komercijalnih i besplatnih templejta i modula

Izvor: www.mashable.com

Nazad u 2005. godini postavili ste svoj biznis online koristeći najnovije i najmodernije eCommerce tehnologije. Danas, skoro pola decenije kasnije, vaš web sajt se još uvek provlači, ali taj lejer digitalne farbe polako počinje da pokazuje znake starenja.

Da li vam ova priča zvuči poznato?

Standardi, stilovi i najbolja praktična rešenja se na web-u menjaju svetlosnom brzinom i iako vaš sajt jeste i dalje potpuno funkcionalan vaši klijenti i potencijalni saradnici odlaze sa njega, a vi nemate pravi razlog zašto se to dešava. Evo 5 pitanja koje treba da postavite sebi da biste saznali da li je vašem sajtu potreban redizajn.

Pitanje 1: Po pitanju brzine, koliko se brzo učitava vaš sajt? Naporno ste radili kako bi svoje posetioce doveli do vrata svog web sajta – nemojte ih uspavati beskonačnim učitavanjem. Bezbroj studija je sprovedeno i svi su pokazali jedan zajednički rezultat: Više vremena za učitavanje = Manje posetilaca = Manje posla.

Studija koju je sproveo Akamai 2006-te godine pokazuje da ako je vašem sajtu potrebno duže od 4 sekunde da se učita 33% posetilaca odnosno jedna trećina će napustiti sajt. Amazon je otkrio da 100ms dodatnog vremena potrebnog za učitavanje strane smanjuje prodaju za 1%, dok Google smatra da povećanje vremena za učitavanje od 500ms rezultira opadanjem posete za oko 20%.

Kako god da proučavate ove brojeve jedno je sigurno, vaš sajt mora da se učita brzo. Pokušajte da optimizujete svoj sajt tako što ćete pre svega optimizovati svoje slike za web, agregirajte i prečistite svoj CSS i otklonite nepotrebni sadržaj kako biste smanjili nepotrebne HTTP zahteve. Možete i da pokušate da promenite hosting kompaniju ukoliko problem sa učitavanjem nastavi da se pojavljuje.

Pitanje 2: Da li vašem sajtu nedostaje doslednost? Iako se čini da nije tako, doslednost u ključnim elementima na vašem sajtu je neophodna.  Elementi kao što je navigacija, font i boja fonta, URL format moraju da budu u skladu i istom stilu kroz ceo sajt, jer to pokazuje vašu profesionalnost i privrženost detaljima kada vodite posao.

Ako je vaš sajt prepun grešaka u kucanju, različitih veličina fonta, slika koje se ne učitavaju ne samo da će to umanjiti kredibilitet vašeg sajta već može da ima i negativan uticaj na SEO strategiju, što će na kraju dovesti do manje prodaje.

Sajtovi kao što su Yahoo, eBay i BBC imaju na stotine, ako ne i hiljade strana online u svakom trenutku, a opet sve te strane imaju isti izgled, dizajn i stil. Prođite sajt, hvatajte beleške, proučite da li vaš sajt ima svoju konzistentnost kao što to imaju prvoligaši.

Pitanje 3: Da li je vaš web sajt natrpan informacijama? Nemojte da pokušavate da odjednom bacate tekst, slike, ikonice, dugmiće, reklame ili šta god na vašeg posetioca. Prenatrpanost informacijama će vas sprečiti da iznesete na površinu najvažnije informacije, a vaš posetilac će morati da se probije kroz gomilu đubeta da bi došao do njih. Bićete zapanjeni koliko oko može da zanemari informacije koje su bitne ukoliko nisu jasno prikazane. Pogledajte ovaj haos

Da se ne bi držali samo negativnih primera evo jednog korisnog linka kako biste shvatili različite hijerarhije podataka koje se u današnje vreme koriste. Dok čitate pokušajte da razmislite kako su informacije organizovane na vašem sajtu. Rapoređivanjem informacija po nekom od ovih arhitektura ne samo da će vam dovesti više posetilaca već i više kupaca.

Pitanje 4: Da li je vaš sajt old school? Nisu samo tehnologije deo weba koji napreduje jako brzo, stil takođe evoluira. Koji god da je stil bio fancy u ’05 danas više nije.

Kao i frizura, web sajtovi stare. Ono što je bilo cool pre par godina danas se tretira kao passe. Ponekad je ovo posledica trendova u dizajnu – npr. 3D dugmići i interfejsi koji su bili tako popularni pre par godina kada su grafički alati omogućili laku izradu takvih efekata. Drugi razlog je sazrevanje web-a i činjenice da web dizajneri bolje shvataju šta posetioci žele. Na primer Flash intro je bio tako cool dok web dizajneri nisu shvatili da ljudi to ne vole već žele da idu odmah na glavni sadržaj. Ispotavilo se da je flash intro na web sajtu nepotreban i da nema svrhe stavljati ga.

Pitanje 5: Da li se vaš sajt renderuje perfektno? Pod perfektnim, mislim na stvarno perfektno, u svim browser-ima, na svim operativnim sistemima i na svim platformama bez teksta koji prelaze jedan pre drugog, dodatnih skrolova itd. Vi svakako ne želite da degradirate svog korisnika na osnovu izbora browser-a, bez obzira da li se radi o Internet Exploreru na Windows-u, Firefoxu na MAC-u ili  Safariju na iPhone-u.

Naravno ovo ne znači da morate da instalirate sve moguće browser-e ikad proizvedene. Evo jednog korisnog linka sa alatima koji bi vam mogli biti od koristi. Koristeći neki od ovih alata možete da bacite pogled na to kako vaš sajt izgleda „u cipelama“ vašeg korisnika – bićete zapanjeni rezultatima.

Kako je vaš sajt prošao ovo kratko ispitivanje i testiranje? Nemojte se plašiti, bez obzira da li se radi o manjim, većim promenama ili pak o promeni hostinga, kod nas možete naći sve što vam treba.  Adriatek vam je uvek na raspolaganju. Mi smo tu zbog vas.

Izvor: www.elance.com

Jako je važno za svakog web dizajnera da ima osnovno znanje o SE optimizaciji. Koliko web dizajnera kada radi na layout-u strane razmišlja o SE optimizaciji? Koliko web dizajnera zaista zna važnost page ranking-a? Koliko njih zna da veliko korišćenje Ajax-a može negativno da utiče na ranking jedne web strane?

Svaki web dizajner ili web developer bi trebalo da zna SE optimizaciju. Ok, ne mora da zna sve tajne koje se nalaze iza search engine optimizacije, ali posedovanje nekih osnovnih znanja Vam može mnogo pomoći u poslu, kao i da povećate zadovoljstvo svojih klijenata.

Objasniti SEO u jednom postu je nemoguće, ali postoji par saveta, alata i predloga za dobru optimizaciju jedne web strane koje svko može da primeni.

Koristite Google web master tools

Ovo spada pod obavezno! Google web master central poseduje najbolje alate koji će Vam pomoći da poboljšate posetu na svom web sajtu. Možete da uploadujete mapu sajta (xml), da uradite monitoring svog sajta, keyworda, rankinga i mnogih drugih faktora koji utiču na posetu web strane. Ako razvijate web sajt toplo preporučujem registrovanje google naloga i korišćenje istog.

Pronađite prave keyworde

Pronalazak pravih keyworda koji opisuju šta u stvari sadrži Vaša strana je jedan od glavnih delova SEO toka. Obično od korisnika dolaze najbolji predlozi šta staviti kao keyword, ali na internetu postoji puno alata koji mogu da Vam pomognu da pronađete prave keyworde za Vaš sajt, jedan od njih je i AdWords keywords tool.

Ovaj alat se jako puno koristi, da biste ga iskoristili za svoj sajt neophodno je da imate Google AdWords nalog (možete koristiti i webmaster tools nalog).

Keyword-i ili key fraze?

SEO svet se konstantno menja ili bolje reći evoluira, sa definitvnim umiranjem značaja keyword-a u meta tagu i evoluiranjem korisnika interneta, key fraze (keyphrases) imaju sve veću upotrebu pored keyword-a. Više reči na ovu temu možete naći na ovom linku.

Izaberite pravi domen

Izbor domena je jako bitna stvar ili bolje rečeno bitno je da u domenu imate bar jedan keyword. Ovo će povećati rank za taj keyword. Probajte da izaberete ime domena razmišljajući o keyword-ima koje ćete koristiti za promociju svog sajta.  Možete pročitati par saveta na ovom linku. Ukoliko Vam sve ovo deluje preteško, mi smo tu za Vas, naši stručnjaci će Vam pomoći da pri registraciji kod nas izaberete pravi domen za sebe i svog novog Web ljubimca.

Google trends

Google trends je još jedan alat koji predstavlja dobar način praćenja trendova pretrage u okviru zemlje gde Vaš sajt ima primenu.

Title tag

Title tag je definitivno najvažniji tag, keyword-i i key fraze bi trebalo da budu u ovom tagu. Title ne bi trebalo da sadrži više od 60 karatkera i treba da opisuje web stranu, relevantnost keyword-a u title-u je jako važna za većinu najčešće korišćenih preraživača.

Napišite kratak, ali dobar opis, za svaku stranu, pri tome pokušajte da objasnite šta je svrha te strane. Ovo nije toliko važno za ranking, ali je sigurno tag koji treba uzeti u obzir jer može povećati broj poseta i privući više posetilaca.

Layout i SEO

Da li može layout da utiče na ranking? Da, s toga obratite pažnju kada kreirate layout i zapamtite prvo pravilo SE optimizacije: Sadržaj je car.

Klasični layout sa dve kolone je savršen za SEO! Daje sadržaju prioritet, u source kodu takođe i sidebar ide posle sadržaja. Ovo je jedan od razloga zašto je WordPress postao search engine friendly blog.

Pišite kod koji je ispravan i semantički tačan

Ispravan i semantički tačan kod pomaže google crawleru da bolje čita i interpretira stranu. Iz svega toga proizilazi veći ranking za Vaš sajt.

Imena za id ili klasu u okviru DIV-a su jako važni i relevantni, pokušajte da uvek koristite pravo ime za ovo. Na primer:

<div id="header"></div> je mnogo bolje nego <div id="head"></div>

Za navigacioni meni mnogo je bolje koristiti:

<div id="nav"></div> nego <div id="meni"></div>

Koristite alt opciju za slike, unesite kratak opis ili bar ime slike, a za meni uvek koristite <ul> tag:

<ul>

<li><a href=”#”>text link</a></li>

<li><a href=”#”>text link</a></li>

<li><a href=”#”>text link</a></li>

</ul>

Koristite header, h1, h2, h3, em(emphasis) i bold za keyword-e. Ovo ne znači da treba da primenite bold na svaku reč u sadržaju, već da jednostavnom iskucanom tekstu date odgovarajući stil. Na primer h1 koristite za naslov, ne bi trebalo koristiti taj stil za ceo paragraf ili ne bi trebalod akoristite span tag listu u meniju kao što je primer iznad.

Napravite dobru internu strukturu linkova, linkovanja strana i koristite anchor text (vidljivi deo linka na strani) kao keyword.

<a href="about" title="Adriatek premium servisi za medije">Adriatek</a>

Anchor text je jako važan, kao i title, pa se zato trudite kad god je to moguće da u njima koristite keyword-e.

Možete pogledati i interesantan članak pod nazivom Fast paper koji će Vam dati neke interesantne HTML  savete.

Brzina

Brzo učitavanje strane pomaže bot-u u procesu indeksiranja strane u njegovoj bazi. Čist kod, kompresija slika i eksterni zahtevi ka strani mogu uticati na brzinu web strane i na indeksiranje od strane bot-a.

Izbegnite splash stranu

Ukoliko nije neophodna izbegnite splash stranu.

Flash i Ajax

Prevelika upotreba Flash-a ili Ajaxa može dovesti do pada rankinga. Obratite pažnju da ne ikoristite pogrešno ove tehnologije.

Zaključak

Ovaj post je samo pregled onoga što se zove SEO. On nije dovoljan da se objasni multidimenzionalnost tog „sveta“, šta on predstavlja i kako ga implementirati na web stranu. Smisao ovog posta je da čitaoca navede da pri startovanju prvog sledećeg projekta obrati pažnju i na deo koji se zove search engine optimizacija.

Preuzeto u potpunosti sa http://woorkup.com

Istraživač koji koristi većinu svog vremena da sistematično analizira, upoređuje i predlaže šta bi, web izdavači i tradicionalne kompanije koje imaju svje prisustvo na web-u, mogli da urade da unaprede online komunikaciju je svetski priznati guru korisnosti Jakob Nielsen.

Evo šta gospodin Nielsen predlaže i kojih su to 10 Internet taktika za postizanje maksimalnog rezultata sa vašim uloženim novcem u trenutnu online komunikacijsku taktiku:

1. Newsletteri

Email newsletter vam dozvoljava da održite odnos sa vašim posetiocima tj. kupcima koja traje izvan regularne posete sajtu. Newsletter je savršen priključak websajtu, jer odgovara na jednu drugačiju potrebu korisnika: newsletter čini korisnika informisanim i u kontaktu sa kompanijom; websajt daje korisnicima detaljne informacije i pušta njih da izvrše poslovne transakcije.

Newsletter je dosta jeftin. Zahtevaju malu količinu tehnologije i ne smeju biti objavljivani prečesto. Ako nemate newsletter onda je kreiranje i objavljivanje jednog siguran korak ka profitu i poboljšanju vašeg prisustva na Internetu. Ako imate newsletter, onda bi unapređenje istog prema otkrićima istraživanja učinilo da on bude mnogo vredniji vašoj organizaciji.

Newsletter-i imaju još jednu prednost: oni su primarni način da oslobodite svoj sajt zavisnosti od pretraživača. Na duže staze ovo oslobođenje predstavlja jedan od najvažnijih strateških izazova sa kojima se Internet menadžeri sretnu.

2. Informativne strane sa proizvodima

Strane sa proizvodima na sajtovima online kupovine, marketing sajtovima i B2B sajtovima, oni svi pate od nedostatka informacija. Retko je videti opis nekog proizvoda koji budućem kupcu daje sve što mu je potrebno da napravi konačnu odluku o kupovini.

Nešto detaljnije o tome kako nedostatak informacija utiče na korisnost web sajta možete pročitati u našem članku (link ka prethodnom članku). Dizajniranje strana sa proizvodima prema potrebama korisnika je siguran način da se poveća prodaja u trenutku kada je korisnik dolaskom na sajt već izrazio interesovanje za kupovinu tog proizvoda.

Vama treba detaljni opis i podaci o proizvodu, ali napisano na način koji će biti razumljiv korisniku koji nije ekspert u vašoj oblasti. Na primer, ako prodajete laptop, ne budite kao Dell, pa da kažete ljudima ekran je „WSXGA+“. Umesto toga recite im da je 1680×1050 piksela. (Budite iskreni: Da li ste znali šta znači ova oznaka? A verovatno ste 5 puta veći geek od normalne osobe.) Ili još bolje, budite kao Apple, pokažite različite rezolucije tako da korisnici mogu da vide koliko je podataka vidljivo na svakoj od njih.

3. Fotografije visokog kvaliteta

Jedan od najjednostavnijih načina da poboljšate vašu stranu sa proizvodima jeste da postavite bolje fotografije. Kao glavnu sliku na vrhu strane pokažite najreprezentatvniju sliku u maloj veličini. Ispod toga ponudite nekoliko fotografija koje pokazuju proizvod iz različitih uglova koje prikazuju detalje. Takođe imajte u vidu i jednu od najčešćih grešaka u web dizajnu, a to je linkovanje sa male slike na sliku koja je malo veća od nje. Umesto toga linkujte ka slici koja je šo bliža full screen veličini.

Korišćenje velikih fotografija je možda kontradiktorno pravilu brzog odgovora pri skidanju web strane.  Ali postoji razlika izmedju web strane sa gomilom nebitnih slika koje se presporo učitavaju i prikazivanja velike slike pošto je korisnik tražio istu. U prvom slučaju se otežava rad, a u drugom čekanje je očekivano. Čekanje nikada nije dobordošlo, ali to je manji problem ukoliko je neophodno da se ostvari korisnički zahtev.

Velika mana online mediuma je što korisnik ne može da dodirne i oseti vaš proizvod. Ali dobra fotografija, uveličani delovi i detalji daju korisniku približnu sliku kvaliteta proizvoda koji nudite i to je ključno pri omogućavanju ljudima da se osećaju dobro dok kupuju online.

Ukoliko se radi o softveru ili online servisu prikažite screenshot u punoj rezoluciji umesto klasičnih fotografija.

4. Razlike u proizvodima i upoređivanja

Morate umanjiti strah korisnika da će kupiti pogrešan proizvod, ili će odložiti kupovinu i verovatno nikada neće kupiti na vašem sajtu.  Ako imate više poizvoda u istoj kategoriji, morate objasniti razlike između ponuđenih proizvoda tako da kupcu, koji nema nikakvo industrijsko predznanje, bude jasno zašto treba da kupi baš taj proizvod pored svih drugih u toj kategoriji.

Razlikovanje proizvoda je lakše kompanijama koje od početka nastoje da pojednostave svoju liniju proizvoda. Zašto ponuditi toliko puno različitih proizvoda sa praktično nikakvim razlikama? Na primer, Dell ima četiri različita modela laptop-ova: Inspiron, Latitude, Precision i XPS, od kojih je nekoliko dostupno u 6 različitih odvojenih linija. Ukoliko postoji jasna razlika između modela, na sajtu ona nije jasno objašnjena.

Čak iako imate malu i jasno definisanu liniju proizvoda morate njihove međusobne razlike da prikažete jasno na sajtu.

Alati za upoređivanje takođe mogu da pomognu korisnicima da se izaberu, s toga da prebrode paralizu pri odlučivanju i da pospeše prodaju. Ali ovakvi alati rade dobro samo kada prikazuju ključne razlike na koncizan i nedvosmislen način. Jako često web sajtovi izbace ogromen tabele sa specifikacijama pri čemu ne naznače mesta na kojima se dva proizvoda međusobno razlikuju.

5. Podrška ponovnoj porudžbini

Već je pomenuto da je najbolji način da se ostvari ponovni biznis newsletter, koji će naterati kupce da misle na vas čak i kad nisu spremni da kupuju. Kada budu spremni da potroše novac, znaće kome treba da se obrate.

Teranje ljudi da troše još novca, dovodi to lake pojave ponovne porudžbine. Ljudima često trebaju iste stvari iznova i iznova. Zašto ih u tom slučaju pustiti da idu 5 nivoa na dole na vašem sajtu da bi došli do iste stvari? U B2B, kupci obično žele da naruče roben zalihe, rezervne delove ili dodatke za opremu koju su već kupili, tako da biste trebali da olakšate takvu vrstu porudžbine.

Jedno manje istraživanje koje je sprovedeno u marketu koji je omogućavao kupcima da kupuju namirnice online pokazalo se da su kupci bili naročito oduševljeni činjenicom da mogu da se vrate na sajt i da kupe istu listu namirnica kao prošli put.

Ponovna porudžbina je stvar totalnog korisničkog doživljaja koji ide izvan korisničkog interfejsa web sajta.  Sklopite svoju liniju proizvoda razmišljajući ka ponovnim porudžbinama. Nastavite sa klasičnim proizvodima, tako dal judi mogu ponovo da naruče nove kopije stvari koje vole. Ako želite da lansirate novi proizvod postarajte se da bude istih veličina i parametara koji su slični.

Na primer, kupac koji je prošle godine kupio džemper bi trebalo da kupi isti model i ove godine u istoj veličini i da bude siguran da će mu isto tako dobro stajati. Držanje indentičnih veličina je mnogo važnije za veleprodaju nego za maloprodaju gde kupac može da proba ono što kupuje.

6. Pojednostavljen tekst

Možete udvostručiti korisnost web sajta tako što ćete jednostavno prekucati tekst u glavnom sadržaju. Bolje pisanje je verovatno drugo najvažnije poboljšanje koje možete da sprovedete na svom sajtu, ali se nalazi tako nisko na listi od 10 stvari jer to nije popravka koja se radi samo jednom. Morate angažovati dobre pisce za svaki svoj projekat, trenirati ih za pisanje za web, a onda sav njihov sadržaj dati još boljim urednicima koji imaju još više znanja o upotrebljivosti sadržaja.

Iako mogu biti skupi, urednici se uvek isplate.

7. Dostavljanje starijim osobama

Stariji ljudi čine segment Internet korisnika koji najbrže raste. U stvari, oni su jedini deo tržišta koji raste u bogatim zemljama. Mladi ljudi ukoliko žele nešto da dobiju online u glavnom već imaju online račune.

Mnogo starijih ljudi su bogati i imaju vremena. Kada im postane teško da se kreću okolo za raznoraznim proizvodima Internet postaje mesto gde oni troše svoje gomile ušteđenog novca. Stariji ljudi su takođe jako malo naklonjeni pirateriji i vrlo su lojalni.

Najbolje od svega je to što je na većini sajtova prisutna velika diskriminacija starijih osoba. Čak i sajtovi raznih Vlada koje bi trebalo da dotaknu i stariju grupu građana su dizajnirani više za ljude srednjih godina. Pošto je jako puno sajtova isuviše komplikovano za njih oni će pohrliti u posao sa vama ukoliko vi razumete i u popunosti ispunite njihove potrebe. (Te potrebe, ispostavilo da i nisu toliko strašne. Lakše je napraviti sajt za starije nego za osobe sa posebnim potrebama i ograničenjima plus ima mnogo više starijih ljudi i oni su uglavnom bogatiji.)

8. Davanje poklona

Lista sa željama i potvrda o poklonu su karakteristike koje su jeftine, a daju dobro uvećanje prodaje i privlače nove kupce.

9. Pretraga

Možda pretraga ne bi trebala da bude na ovoj listi; iako su koristi unapređivanja iste ogromni, investicije su jako velike, mnogo veće od drugih stvari koje su izlistane ovde. S toga cost/benefit razlika nije baš izvanredna kao za ostale preporuke koje su navedene ovde. Ali ipak je poželjna i treba poraditi na tome.

Korisnici generalno jako puno zavise od pretrage kao glavnog interfejsa na web-u. Dok pretraga radi poprilično dobro na nivou celog Interneta, na pojedinačnim sajtovima funkcioniše poprilično jadno.

Popravljanje pretrage na sajtu zahteva da kupite novi, bolji softver za pretragu, a onda i da ga prilagodite sadržaju sajta i upitima korisnika. Još gore, morate da ispravljate sadržaj tako da uopšte može biti pronađen. Na primer morate napisati smislene naslove strana tako da je korisnicima jasno šta će dobiti na toj strani kada kliknu na rezultat pretrage. Takođe morate pisati koristeći rečnik korisnika.

Ceo postupak je skup, ali sa druge strane poboljšava i vaš položaj prema eksternim pretraživačima. SEO je takođe jedna od jako uspešnih marketinških taktika na internetu. Ovoj e mnogo isplativije od ad-ova koje mnogi koriste i ne vide zbog „slepila prema banerima“.

10. Korisničko testiranje

Korisničko testiranje bi trebalo da bude na mestu broj 1 ove liste jer vam omogućava da svoj projekat postavite na pravo mesto bez skoro ikakvih investicija.

Iako je ovo jako nepopularno preporučljivo je uradite svoj korisnički test. Uvek postoje neki aspekti koji su jedinstveni za vašu industriju i ne mogu se rešiti čitanjem rezultata generalnih istraživanja. I zapamtite testiranje upotrebljivosti može biti prilično jeftino pogotovu ako koristite low cost projekat i on je u ranoj fazi svog razvoja.

Bonus taktika: Program lojalnosti

Program lojalnosti je nešto što nije široko prihvaćeno  i ne može se sa sigurnosti reći da je dokazano kao prava taktika na internetu. Zato je dodata kao bonus i nije u prvih 10. Program lojalnosti možete uzeti kao bonus ideju i način da Inernet uzvrati udarac serach engine mogulima i vrati vrednost web sajtovima koji su i napravili Internet u formi koju imamo danas.

Po nekim poslednjim istraživanjima primećeno je da sve više ljudi kada npr. kupuje online izabere sajtove ili samo jedan sajt na kojem kupuje i da će pre zabeležiti adresu tog sajta i vratiti se na njega nego pri svakoj kupovini ići ponovo na pretraživač.

Kako biste povećali lojalnost svojih kupaca, nagrađujte one koji su regularni kupci kod vas. Popusti i besplatna isporuka su standardne i očigledne ideje, ali web sajt je kompjuter i možemo ići izvan ovih standardnih pristupa. Na primer postoje proizvodi za koje uvek imamo ograničene zalihe i prodaju se samo kada su neki praznici u pitanju; dajte svojim standardnim korisnicima priliku da prvi dođu do tih proizvoda ili im pružite priliku da kupe taj proizvod pre nego što izađe u širu prodaju.

Usluživanje kupaca, a ne trčanje za slavom

Sve ideje koje su prezentovane ovde imaju jednu zajedničku stvar: one dodaju vrednost vašem sajtu tako što povećavaju vrednost za korisnika koji dolazi da ga poseti. Drugim rečima daju korisniku ono što želi i šta mu treba. Ove ideje nisu nove, u suštini predstavljaju osnovu svega. Korisnici žele da se vratite na osnove i uložite u jednostavne stvari koje im stvarno znače.

Dizajn interfejsa je zarađivanje para kompaniji.  Delovanje i znanje je ono što vam je neophodno, a ne dodatne fensi opcije. Uradite osnove i uradite ih dobro.

Izvor: www.masternewmedia.org

1. Naslov forma je najbolje postaviti iznad polja

Studija sajta UX matters pokazala je da je najbolja pozicija labele u formi iznad polja koje objašnjava. Na većini formi labele su smeštene levo od polja. Iako ovo izgleda dobro, ovo nije layout koji je najlakši za korišćenje. Zašto? Zato što su forme generalno vertikalno orijentisane; npr. korisnici popunjavaju formu od vrha ka dnu. S obzirom da korisnici popunjavaju formu idući na dole mnogo je lakše naći polje koje je ispod naslova nego polje koje se nalazi desno od istog.

Slika 1. - Primer dobre forme

Smeštanje labela na levu stranu takođe dovodi do još jednog problema: Da li ravnate labelu na levu ili desnu stranu? Ravnanje labele na levo čini formu preglednijom, ali je teško povezati koja labela se odnosi na koje polje. Ravnanje desno radi suprotno, forma je manje pregledna, ali bolje povezuje te elemente. Labele iznad polja su najbolje rešenje u oba slučaja. Studije takođe pokazuju da labele ne bi trebalo da budu boldovane, mada to je još uvek predmet dalje rasprave.

2. Korisnici se fokusiraju na lica

Ljudi instinktivno primete lica drugih ljudi kada ona uđu u vidokrug. Na Web stranama nastojimo da se fokusiramo na lica i oči ljudi, što marketerima daje dobru tehniku za privlačenje pažnje. Ali naša privučenost licem ili očima čoveka je samo početak, ispostavlja se da se naša pažnja preusmerava u pravcu u kojem gleda osoba na slici.

Slika 2. - Toplotna mapa privlačenja pogledom - beba gleda pravo u nas (UsableWorld study)

Slika 3. - Toplotna mapa privlačenja pogledom - beba gleda na sadržaj (UsableWorld study)

Evo jedne studije koja se bavila aspetkom lica i koliko ono privlači korisnike. Korisnik će biti privučen licem, ali primetićete da je pažnja u većoj meri dodata sadržaju onda kada lice gleda u tom smeru tj. u smeru sadržaja koji treba da bude primećen.

3. Kvalitet dizajna je indikator kredibiliteta

Različite studije su sprovedene kako bi se saznalo šta tačno utiče na ljudsku percepciju kredibiliteta jednog Web sajta.

Slika 4. - Ne znamo da li je Fever aplikacija dobra, ali uglađen korisnički interfejs i sajt daje dobar prvi utisak

Jedan interesantan zaključak ovih studija je da ljudi zapravo procenjuju knjigu po njenim koricama tj. u našem slučaj web sajt po njegovom dizajnu. Elementi kao što su layout, konzistentnost, tipografija, boja i stil utiču na to kako posetilac vidi vaš sajt i kakvu sliku projektujete. Vaš sajt ne treba samo da projektuje dobru sliku, već i onu koja je prava za vašeg posetioca.

Drugi faktori koji utiču na kredibilitet su: kvalitet sadržaja, količina grešaka, učestalost update-a, lakoća upotrebe i pouzdanost autora.

4. Većina korisnika NE skroluje

Studija koju sproveo Jakob Nielsen na temu koliko ljudi skroluju na web sajtu (Prioritizing Web Usability) otkrila je da samo 23% ljudi skroluje pri svojoj prvoj poseti web sajtu. Drugim rečima 77% posetilaca neće skrolovati, oni će samo pogledati sadržaj koji je vidljiv na stranici bez skrolovanja. Pored toga, procenat korisnika koji skroluju se smanjuje sa svakom sledećom posetom, pa tako imamo samo 16% njih koji skroluju pri drugoj poseti sajtu. Ovaj podatak je jako bitan i govori o tome koliko je važno da one podatke koji su ključni stavite na istaknutu poziciju, ovo je naročito bitno za landing page.

Ovo ne znači da treba sve da strpate na gornju polovinu strane već da treba taj prostor da iskoristite najpametnije moguće. Trpanje sadržaja na jedno mesto će učiniti da je isti nedostupan, jer kada korisnik vidi gomilu informacija neće znati odakle da počne.

Slika 5. - Primer dobro iskorišćenog prostora. Visina je 768 px, ima veliki screenshot, tag liniju, poziv na akciju, listu klijenata i malu listu sa slikama

Ovo je najvažnije za home page, gde će najveći broj novih korisnika doći. Dakle postavite sledeće neophodne elemente:

1. Ime sajta
2. Šta korisnik dobija od korišćenja istog
3. Navigaciju ka glavnom delu sajta koja je relevantna za korisnika

Međutim navike korisnika se menjaju vremenom. Studije koje su najnovije pokazuju da korisnici u nekim slučajevima hoće da skroluju ka dnu strane. Čak se pokazalo da im više odgovara da skroluju nego paginacija. Jednom dobrom delu korisnika nije najvažniji sadržaj a gornjem delu strane. Tako da je dobro stranicu podeliti u sekcije koje će biti lako uočljive i odvojene međusobno sa dosta belog prostora.

5. Plava je najbolja boja za linkove

Davanje sajtu jedinstven dizajn je odlično, ali kada govorimo o upotrebljivosti, raditi ono što svi ostali rade je uvek najbolje. Pratite konvencije, jer kada korisnik dođe na nov sajt prvo mesto gde će ražiti neki element je upravo ono mesto na kojem je video isti taj element, ali na većini drugih sajtova. Ovo je poznato kao korisnički paterni. Ljudi očekuju da određeni elementi budu isti, kao što je boja linkova, lokacija logoa sajta, ponašanje navigacije uz pomoć tagova itd.

Slika 6. - Google sa razlogom boji svoje linkove u plavo. Prepoznatljiva je većini korisnika i lako je uočljiva

Koje boje trebaju da budu vaši linkovi? U razmatranje prvo dolazi kontrast: linkovi trebaju da budu tamni ili svetli dovoljno da budu u kontrastu sa bojom pozadine. Drugo linkovi treba da budu izuzeti od boje ostatka teksta tj. bez crnih linkova sa crnim tekstom. I konačno istraživanja pokazuju da, ako vam je korisnost na prvom mestu, plava boja za linkove je najbolja. Default boja za linkove u browseru je plava, pa je s toga ljudi i očekuju. Staviti link u dugoj boji nije ni u kom slučaju problem, ali može da utiče na brzinu kojom će korisnik da ih pronađe na stranici.

6. Idealno polje za pretragu je široko 27 karaktera

Koja je idealna širina polja za pretragu? Da li tako nešto postoji? Po ispitivanjima koja su sprovedena ispostavilo se da je većina polja za pretragu previše kratka. Problem sa kratkim poljem je u tome što iako će Vam biti dozvoljeno da kucate dugačak upit samo jedan njegov deo će biti vidljiv u datom trenutku, pa je teško da pregledate šta ste otkucali ili da editujete upit.

Studija je pokazala da je prosečna širina polja za pretragu 18 karaktera. Isto tako se pokazalo da je 27% upita bilo predugačko da bi stalo u takvo polje. Proširenje polja za pretragu na 27 karaktera bi moglo da opsluži 90% upita. Zapamtite, širinu možete podesiti i pomoću em-ova, ne samo uz pomoć pixela i pointa. Jedan em je širina i dužina jednog slova „m“ bez obzira o kojem se fontu ili sajtu radi. S toga koristite ovu meru kako biste odredili širinu polja na 27 karaktera.

Slika 7. - Google-ovo polje za pretragu je dovoljno dugačko da primi ceo upit

Slika 8. - Sa druge strane Apple nije bio tako darežljiv

Uopšteno govoreći bolje je imati duže polje za pretragu nego prekratko. Ovo uputstvo je zaista jednostavno, ali na nesreću jako često se zaobilazi. Takođe malo padding-a može dosta da doprinese izgledu.

7. Beo prostor čini da je sajt jasniji

Većina dizajnera zna vrednost belog prostora tj. praznog prostora između paragrafa, slika, dugmića u drugih elemenata na strani. Beo prostor daje elementima na strani mogućnost „da dišu“. Takođe možemo grupisati elemente zajedno tako što ćemo smanjiti međusobni beo prostor, a povećati beo prostor između grupe i ostalih elemenata na strani. Ovo je važno zbog pokazivanja veze između elemenata, kao i zbog određivanja hijerarhije elemenata na jednoj Web strani.

Slika 9. - Primetite margine, padding i spacing u centralnom sadržaju na strani. Sav taj prostor ga čini lako čitljivim.

Linova studija sprovedena 2004-te godina je pokazala da dobra upotreba belog prostora u paragrafu kao i u levoj i desnoj margini može da poboljša rezonovanje za 20%. Čitaocu je lakše da se fokusira na sadržaj sa lepim razmakom.

Beo prostor ne mora da poboljša performance sajta, ali će u svakom slučaju uticati na korisnikov doživljaj i užitak dok je na sajtu.

8. Efikasno korisničko testiranje ne mora da bude obimno

Studija Jakoba Nielsena o idealnom broju korisnika koje treba uključiti u testiranje upotrebljivosti je pokazala da test sa samo 5 korisnika može da otkrije 85% problema koje imate na sajtu. Rešenje će biti podjedanko ako u testiranje uključite 15 ljudi.

Slika 10. - Jakob Nielsen test grafik

Najveći problemi su obično otkriveni od strane prva dva korisnika, a preostali testeri potvrde navode prvih i pronađu manje probleme. Samo dva korisnika bi pronašla polovinu problema na sajtu. Ovo znači da testiranje ne mora da bude veliko ili preskupo da bi imalo dobre rezultate. Najveći dobitak se ostvaruje prelaskom sa 0 test korisnika na jednog tako da se nemojte plašiti da idete na malu količinu. Bilo kakvo testiranje je bolje od nikakvog.

9. Informativne strane sa proizvodima će vam pomoći da se izdvojite

Ako vaš Web sajt ima strane sa proizvodima, ljudi koji kupuju online će sigurno da ih pregledaju. Mnogim stranama sa proizvodima nedostaju neophodne informacije, čak i za posetioce koji rade brzi pregled strane. Ovo je jako ozbiljan problem, jer informacija o proizvodu pomaže ljudima da donesu odluku o kupovini. Istraživanja pokazuju da loša informacija o proizvodu dovodi do 8% problema pri korišćenju  i 10% gubitka korisnika (npr. korisnik digne ruke od svega i napusti sajt).

Slika 11. - Apple odvaja tehničke specifikacije proizvoda od jednostavnih marketinških strana, ali opet ostavlja i lak način da se do specifikacija dođe.

Omogućite korisnicima da dobiju detaljne informacije o proizvodu, ali ne dozvolite sebi da upadnete u zamku bombardovanja korisnika sa prevelikim brojem informacija. Učinite informaciju laku za „svariti“. Napravite stranu da bude pregledna sa dovoljno manjih segmenata teksta. Dodajte dosta slika proizvoda jer jedna slika je bolja i od 1000 reči, a ako već više volite reči od slika onda koristite jezik koji je razumljiv svima. Ne koristite žargon koji je nerazumljiv vašim kupcima.

10. Većina korisnika je slepo za advertising

Nakon obilnih istraživanja pokazalo se da je većina korisnika slepo za ad banere. Ako traže neku konkretnu informaciju na strani ili su preokupirani sadržajem neće im odvući pažnju reklama sa strane.

Rezultat ove pojave je ne samo da će korisnik da ignoriše reklamu već će ignorisati i sve što liči na reklamu. Neka jako stilizovana navigacija može da liči na reklamu, budite oprezni sa ovim.

Slika 12. - Četvrtasti baneri sa leve strane u stvari nisu reklame već linkovi ka stranama. Oni jako liče na banere i to može dovesti do toga da ih korisnici previde.

Drugačije rečeno, ad koji liči na sadržaj će navesti korisnika da pogleda i klikne. Ovo može da dovede do povećanja zarade na osnovu reklama, ali sa druge strane možete se suočiti sa gubitkom poverenja korisnika jer su umesto sadržaja dobili sajt koji se reklamira. Pre nego što odete ovom stazom razmislite dobro: kratkoročna zarada ili dugoročno poverenje vaših korisnika?

Izvor: www.smashingmagazine.com

U daljem tekstu biće predstavljeno 20 najvećih promena koje dolaze, ali sve zajedno do sada je napravljeno oko 400 promena na programu.  Ima tu za svakoga po nešto.  Pogledajte i sigurno ćete naći nešto što odgovara vama.

Komentari

Zatvoriti komentare na starim postovima - Po nekad nema smisla puštati da se pojavljuju komentari na starom postu, a i to je i onako omiljeni trik spamera. WordPress 2.7 će vam dozvoliti da zatvorite komentare na starim postovima, eliminišući tako potrebu za još jednim plugin-om.

Komentari na više strana – Komentari sada mogu da se prelamaju na više strana umesto da budu završetak vašeg posta kome nikako da dodje kraj.

Odgovori na komentare iz admin dela – Opcija koja je dugo čekana jeste mogućnost da se odgovori na komentare iz admin dela bez potrebe da se ide na front deo vašeg bloga.

XMLRPC API -Podrška za XML-RPC protokol, pojednostavljeni API koji enkodira vaše komentare u XML i transportuje ih kroz HTTP.

Prečice na tastaturi za komentare -Kada udjete u deo sa komentarima, možete koristiti  j and k za navigaciju kroz komentare. Kada selektujete komentar možete koristiti  “a” za potvrdu (approve), “s” da označite komentar kao spam i “d” da izbrišete komentar.

Teme i plugin-ovi

Instalacija plugin-ova jednim klikom – Još jedan omiljeni plugin ide u istoriju sa predstavljanjem mogućnosti da instalirate plugin iz dashboard-a.

Plugin Browser – Potraga za plugin-om, jedna od omiljenih razonoda blogera, biće olakšana opcijom da to uradite bez napuštanja WordPress install strane.

Lepljivi postovi -U proteklih par godina pojavio se veliki broj WordPress plugin-ova koji omogućavaju da postavite “lepljivi” post tako da on ostaje na vrhu front page-a bez obzira koliko postova stavite posle njega. Ova opcija je sada uključena u program.

Ažuriranje WordPress core-a – Još jedan WordPress plugin nalazi svoj put ka core-u WordPress-a. Za one korisnike koji nisu koristili nešto kao Fantastico ili Simple Scripts da instaliraju svoj blog, sada postoji više automatizovan način da budete u toku sa onim groznim sigurnosnim ažuiranjima.

Obaveštenje o ažuriranju teme – Dobićete obaveštenje kada je vaša tema ažurirana kao što sada WordPress to radi sa plugin-ovima.

Veća kontrola

Grupno editovanje za postove – Da li ste nekada želeli da editujete tagove za više postova, ali niste mogli to da uradite zbog posla u toku? Grupno editovanje će vam dozvoliti veće editovanje postova tako da možete praviti koliko god hoćete promene na vašem blogu bez obzira koliko je star.

Kontrola kolona – Na svakoj menadžment strani koja prikazuje kolone, sada ćete moći da izaberete koje kolone se vide i na koji način.

QuickPress – Da li ste ikada želeli da postavite brzi post bez učitavanja cele strane?  Sada i to možete direktno iz Dashboard-a uz pomoć QuickPress opcije.

Skorašnji Draftovi – Sada će biti modul na vašem dashboard-u koji će prikazivati skorašnje draftove tako da možete brzo da dodjete do postova koji su u izradi.

Ostali detalji

Prepravke na dashboard-u i stranama za pisanje – Primetan je i značajan redizajn navigacije i generalnog izgleda dashbord-a kao i stranica za pisanje.

PHPXref – Da li ste ikada uhvatili sebe kako se vrtite u krug pri pokušaju da shvatite PHP fajlove? PHPXref će vam pomoći tako što će PHP staviti u lako formulisane dokumente koje možete pročitati. Sve ovo će biti hostovano na WordPress.org.

Veličina slike – Thumbnail i Medium komande će ostati iste, ali Large će sada biti ograničena na 1024 piksela, ili na veličinu vaše teme. Ako ne želite nikakva ograničenja i želite da postavljate ludački velike slike, sada će vam biti omogućeno da izaberete “Full Size” opciju koja će postaviti vašu sliku u originalnoj veličini. Takodje ćete videti veličinu slike pored radio dugmadi.

Izvor: www.mashable.com

1. Bolju rangiranost na pretraživaču Google
2. Češće indeksiranje od strane googla
3. Veću cenu klika od AdSense reklama, što povećava vašu zaradu
4. Veći cenu plaćenih reklama (TextLinkAds)
5. I još mnogo toga…

Može biti od 0 do 10, s’tim što broj 10 nosi samo nekoliko web sajtova na planeti od ukupno 102 miliona registrovanih domena na internetu . U Srbiji najveći PR koliko ja znam nosi B92 (7) i još nekoliko sajtova. A ukoliko je PR između 5 i 7 u Srbiji – taj se sajt smatra konkurentnim na našem tržištu!

Korišćenjem google toolbara stičete mogućnost uvećanja PR sajtova koje posećujete, ali pak google nije želeo da iznese činjenice i definicije na osnovu čega i kako on to definiše PR.

Ukoliko želite detaljno da se informišete o GPR, kliknite na sledeći link: http://en.wikipedia.org/wiki/PageRank

Ukoliko želite da uvećate PR vaše web stranice, obratite se stručnim ljudima iz AdriaHost tima na sledećoj adresi: http://www.adriahost.com

Dođem pre 2 dana naposao, pijem kafu, gledam mail i rekoh da bacim pogled na naš novi blog. Sve lepo, uredno i baš mi je super taj “Tag oblak”, jeste malo lamerski ali fensi izgleda. Bacim malo bolje pogled, kad u tagu precizno piše “KORISNIKA PODRKA”!?#!  Bože, šta je ovo? Naravno, dignem frku odmah. Pitanja naviru:

• Odkud ovo? Kako niko nije primetio?
• Da nije neki hackerski napad? Provaljena šifra admin naloga?
• Maliciozni zaposleni? Hoće da nas obruka?

E, sad zamislite šta se desilo. U principu ništa. Instalirali smo novi lepi fensi plugin i niko nije skapirao da ne podržava naša slova. Mi smo navikli da obično iskoče “kuke i kvake” u takvom slučaju, ali ovde ne! Inteligentan mali plugin, jednostavno izbaci naša slova iz reči “KORISNIČKA PODRŠKA”. Eto gde je bio problem.

Najveća novost u verziji 2.7 je potpuno novi interfejs. WordPress 2.7 je puno brži od svih starijih verzija, i naravno, broj klikova je još više smanjen. U novom dashboard-u sada razmještamo delove po volji sistemom drag & drop. Dodan je stinky post, bitno je poboljšan rad s komentarima, mogućnost instalacije plugina direktno s WordPress stranice.

Od sada možete pisati post odmah direktno iz dashboarda, sve ovo i još puno, puno više donosi nam nova verzija 2.7 Coltrane. Nemojte sada odmah stavljati ovu novu verziju, jer neki pluginovi jednostavno neće raditi, pričekajte malo. Tj, nemojte to raditi kao mi!

Evo i video s službenog bloga:

Članak je preuzet sa sajta kolege Davora koji preporučujem svima da pogledaju ovde.