67
UPOTREBA WEB DIZAJNA

Upotreba WD

Embed Size (px)

DESCRIPTION

WD

Citation preview

  • UPOTREBA WEB DIZAJNA

  • Web dizajnNeiskusni dizajneri i klijenti pokuavaju da urade sve to je mogue da bi privukli panju na svoj Web sajtKorisnik koji je izloen napadnoj grafici ili Flash animaciji, veoma brzo gubi panju i ne primeuje osnovnu poruku samog sajta. Ve posle 10-15 sekundi korisnik ne primeuje nove detaljeVeina korisnika je zasiena od bleteih animiranih slika i dugog uitavanja, i trudi se da izbegne takve sajtove. Uspean sajt zahteva realan i stalan napredak

  • Vrste sajtovaTrening Obuavanje Kontinuirano obrazovanje Reference Opti i magazinski sajtovi Sajtovi sa vestima Elektronsko poslovanje

  • Vrste sajtova

  • TreningWeb-bazirane aplikacije za trening bi trebale da budu linearne i uobiajeno nude nekoliko opcija odstupanja od centralnog toka prezentacije. Ne treba zbunjivati korisnika ponudom previe linkova i odstupanjem od centralne poruke. Ogranienje linkova na "Sledeca tema" i "Prosla tema" - svi korisnici e videti istu osnovu prezentacije

  • TreningMnoge prezentacije ove vrste pretpostavljaju vreme korienja od 1h ili manje - ukidanje sesijeTreba navesti korisniku koliko traje sesija, koliko je preostalo vremena do njenog kraja i upozoriti ga da ne bude preopiran u radu sa ponuenim materijalimaStrana za logovanje i da nude pitalice u formatu tano-netani ili izbora izmeu ponuenih odgovora. Registracija korisnika i rezultati na pitalicama se zapisuju u baze podataka koje su povezane sa datim sajtom

  • Trening info.med.yale.edu/caim/hhmi

  • ObuavanjeStroga centralna kontrolu - ali i vie mogunosti za digresije Informacije koje se prikazuju su zahtevnije i trae vie predznanja nego to je sluaj kod aplikacija za trening. Ako postoje linkovi na Web-bazirane resurse izvan datog sajta, trebalo bi takve linkove grupisati na odvojene stranice, izvan samog materijala koji se prezentuje. Ponuda "printing" verzije - vie stranica sa jednom temom u jednu dugaku stranicu.

  • Obuavanjewww.dartmouth.edu/~chemlab

  • Kontinuirano obrazovanjeKorisnici sa velikim prdeznanjem - "just in time" trening - odreena specifina temaFleksibilni, interaktivni, nelinerni dizajn Dizajn mora omoguiti brz pristup velikom opsegu tema i obino mora obilovati linkovima na povezane materijale, kako na lokalnom sajtu, tako i na celom Web-u. Tekst bazirana lista linkova - uitava brzo i prikazuje dosta informacija

  • Kontinuirano obrazovanjePotrebne i dobro dizajnirane slike i ilustracije da bi se zainteresovali sami korisniciVreme pristupa korisnika se ne moe predvideti, ali je krae od vremena za prethodne dve grupe aplikacijaI u ovom sluaju je opcija za jednostavnu tampu skoro obavezujua.

  • Kontinuirano obrazovanjeinfo.med.yale.edu/intmed/cardio/imaging

  • ReferenceKorisnici posete sajt, pronau ta ele i jednostavo odtampaju ili uitaju to to su pronali. U ovakvim sluajevima nema glavne obraene teme i njenih pojedniosti, pa je korienje nelinearno. Nevane slike i ilustracije bi trebale da budu minimalne i odvojene od samog konteksta.

  • ReferenceKontekst stranice i meni struktura bi trebalo da bude paljivo strukturirana Brza pretraga, jednostavan download dokumenata i opcija za tampuDobro osmiljena opcija za pretragu je obavezna za sajtova sa vie od trideset stranica ili za dugake tekstove Realizacija efikasnije vie parametarske prestrage Vreme zadravanja korisnika je po principu the shorter the better.

  • Referencewww.bartleby.com

  • Opti i magazinski sajtoviKorisnici - manje fokusiranom motivacijaOdmah privueni kompletnom grafikom i tekstualnom prezentacijom, ili e otii na neki drugi slian sajt. ta e privui korisnika zavisi od njegovih oekivanja. Na primer uticaj politikih komentara i kritike socijalnog stanja umnogome zavise od izdvojenih naslova i glavnih teza tekstova.

  • Opti i magazinski sajtovi www.slate.msn.com

  • Sajtovi sa vestimaNovinski sajtovi su u velikoj meri prilagodili svoj dizajn sa papira na manje formate na Internetu. Na sajtu New York Times iskoriene sve osobine papirnog izdanja, ali uz korienje vie boja i manje konzervativnih shvatanja i principa.

  • Sajtovi sa vestima www.nytimes.com

  • Sajtovi sa vestima www.politika.co.yu

  • Elektronsko poslovanjeNajvaniji parametri dizajna su efikasna navigacija i pretraga, i brzina kojom korisnik stie do dugmeta za naruivanjePotroene ogromne koliine para za razvoj Macromedia Flash ili digitalnih video prezentacija mnogi su doiveli i bankrot pre nego to su sajtovi i proradili Tehniki osnovne i jednostavne stvariAmazon, eBay, Yahoo!, - upadljive jednostavne eme za dizajn stranice i jednostavne tekst ili tab bazirane navigacione sisteme.

  • Elektronsko poslovanjeNeuspeni - realizacija alata za pretragu koji su dovoljno inteligentni da ponude odgovarajue odgovore kada za neki upit nema odgovarajuih rezultata. Ako korisnik otkuca "PDA" neodgovarajui pristup je da se prikau svi proizvodi koji imaju ovu re u svom imenu ili opisuEfikasno je da se prikae lista sortirana po odgovarajuim kriterijumima.

  • Elektronsko poslovanje www.amazon.com

  • Elektronsko poslovanjeAmazon je eksperimentisao sa razliitim tab sistemima kako je sajt rastaoTabovi funkcioniu ako postoji oko 8 ili manje opcija. Vei broj dovodi do konfuzije.Amazon stranice za naruivanje ima specijalan navigacioni dizajnVeina dobro dizajniranih ekrana za naruivanje su kratki i obrauju jednu temu

  • Elektronsko poslovanjeOpcije "shopping card - adresa korisnika, informacije o kreditnoj kartici, itdNa prozorima koji ne zahtevaju scroll bar da bi se pregledao sadraj. Sam proces naruivanja - vie ekranaSvaki proces elektronskog poslovanja je jednolian za samog kupca. Zato informacija o trenutnoj poziciji korisnika je korisna, jer serija ekrana postaje manji problem za korisnika koji zna ta ga dalje oekuje

  • Elektronsko poslovanje

  • Elementi sajtaHome page Meniji Lista resursa,"other related sites" stranice Uputstvo"What's new?" stranice Opcije pretrage Informacije o kontaktu i korisniki utisci Bibliografija i dodaci Strane sa najee postavljenim pitanjimaObrada korisnikih greaka

  • Home pageSvi Web sajtovi su organizovani oko poetne stranice, koja predstavlja i logiki ulaz u sistem stranica. U hijerarhijskoj organizaciji, home page se nalazi na vrhu hijerarhije i sve stranice u okviru sajta sadre direktan link povratka na ovu stranicu. Smatra se da je povrina pravougaonika irine oko 30-ak ina na vrhu poetne stranice najvie primeena povrina od strane korisnika. Efikasna navigacija - linkovi na vrhi stranice

  • Home page

  • Home pagePoetna stranica moe imati vie funkcijaNeki dizajneri koriste prednost ove stranice kao najposeenije stranice sajta, pa je smatraju idealnom za postavljanje novosti i novih informacija. Velika poseenost ove stranice - idealno mesto za linkove ili smetanje opisa sadraja sajta. Ostale opcije su da se ova stranica iskoristi kao prva mogunost da se privue panja korisnika na neku odreenu podtemu ili specijalnu oblast

  • U formi menija Lista linkova u formi menija je dominirala u dizajnu poetnih stranica prvih nekoliko godina razvoja Web-a, i trenutnoje najee korieni tip poetnih stranica. Ovakva organizacija stranica zahteva korienje ne samo obine liste tekst baziranih HTML linkova, ve korienje i grafikih slika, koje su i efikasnije, jer se dati prostor moe maksimalno iskoristiti. Efektan dizajn kmbinuje slike i blokove tekst baziranih linkova. Tekst linkovi su manje vizuelno uoljivi, ali je jednostanije odravanje samog koda.

  • U formi menija argus-acia.com

  • Bazirane na vestimaSajtovi New York Times i CNN - mnoge organizacije koriste prednosti njihove velike poseenosti radi obavetavanja kako samih svojih zaposlenih, tako i ireg kruga korisnika. Informacije uivo poveavaju atraktivnost sajta i ponovnu posetu korisnika. Mnogi dizajneri rezerviu jednu ili vie povrina za poslednje vesti, naredne dogaaje ili upozoravajue poruke. Standardizovati lokaciju i prirodu povrine za vesti sa generalnim okvirom dizajna stranice

  • Bazirane na vestimawww.salon.com

  • Bazirane na korisnicimaVeliki Web sajtovi pruaju mnogo informacija irokom opsegu korisnika, pa je nemogue opisati irinu i dubinu takvog sajta na jednoj poetnoj stranici. I sami korisnici esto poseuju Web sajt sa specifinim interesom ili ciljom. Dobro je iskoristiti poetnu stranicu da bi se odmah izvrila podela korisnika u interesne grupe i onda svakoj grupi ponuditi specifine informacije u okviru sledeih stranica.

  • Bazirane na korisnicimawww.iastate.edu

  • Splash straniceSplash stranice su jedan od najosporavanijih elmenata sajta. Za mnoge korisnike one predstavljaju dodatak i nepoteban klik mia do sadraja koji ih zanima.Radije bi eleli da im se odmah prikae struktura sajta i da krenu od te take Zato je kljuna stvar upoznavanje sa krajnjim korisnicima i tek onda najprikladniji izbor ulaska na sajt.

  • Splash straniceDa li e tipini korisnici jednom posetiti sajt ili vie puta? Alati kao to su kalendar ili alat za pretragu nemaju samo estetsku ulogu, jer neki korisnici mogu posetiti sajt nekoliko puta dnevno. Elegantni, ali nefunkcionalni elementi tako mogu vrlo brzo postati zamorni. Korisnici koji ne ele da pristupaju sajtu preko splash stranice - zapamtiti u okviru itaa narednu stranicu sa sadrajem i pristupati sajtu preko te stranice

  • Splash straniceUspeh splash stranice umnogome zavisi od oekivanja korisnika sajta. Postoje i korisnici koje zanimaju misteriozni, enigmatski ili estetski ugoaji, koji e uivati u efektno dizajniranim splash stranicama.

  • Splash stranicewww.eng.yale.edu

  • KombinacijaPri realizaciji poetne stranice mogu se kombinovati razliiti dizajni poetne stranice i na taj nain napraviti meavinu sve 4 strategije. Primer The Library of Congress's THOMAS kombinuje slike, listu meni opcija i specijalne delove sajta

  • Kombinacijawww.loc.gov/thomas

  • Slika ili tekst?Kompanije, institucije i edukacione organizacije - male grafike banere na vrhu poetne straniceKomercijalni sajtovi - kompleksne kombinacije linkova ugraenih u vizuelne elementeEfikasni u privlaenju korisnikove panje, veliki grafiki meniji podrazumevaju i vee vreme uitavanja straniceak, iako su korisnici povezani pomou brih veza, grafiki meniji i dalje se prikazuju sporije nego tekst bazirana lista linkova

  • Slika ili tekst?Nesimetrija izmeu sporog uitavanja, ali atraktivnog prikaza stranica baziranih na vizuelnim elementima jednostavnih tekst baziranih stranica se reflektuje i na razliite potrebe razliite vrste korisnika. Ciljevi veine Web sajtova je da prenesu neke interne informacije i da komuniciraju sa potencijalnim klijentima i proizvoljnim Web korisnicima. The Guggenheim Museum je izbor grafikog dizajna poetne stranice, ali je layout paljivo dizajniran da odgovara dimenzijama prosenog monitora.

  • Slika ili tekst? www.guggenheim.org

  • Slika ili tekst? www.w3.org

  • Slika ili tekst?Najbolji nain da se obuhvate i efektan izgled i potrebe obinog korisnika je da se prue alternativni pogledi na isti sajt.Jedan pristup je da se realizuje vizuelno atraktivna poetna stranica sa ciljem da se privue panja veine korisnikaali i da se realizuje vie tekst orijentisana alternativna stranica - brz pristup Drugi pristup je da se koristi grafiki baner na vrhu stranice, praen skupom tekst baziranih linkova

  • Slika ili tekst? www.theatlantic.com

  • Slika ili teskt?Neki korisnici koji pristupaju Internetu preko modema biraju da ne uitavaju slikePotrebno je obezbediti i alternativne tekst bazirane linkove koji e biti vidljivi i ovoj vrsti korisnikaMnogi sajtovi realizuju tekst bazirane linkove smanjene veliine iznad footer-a, gde ne utiu mnogo na ostali deo dizajna

  • Slika ili tekst? www.ynhh.org

  • Obrazac stranicaPoetna stranica - najvie panje u poetku dizajniranja Web sajtaNe treba dopustiti da njen dizajn dominira nad strategijom celog sajtaKada se realizuje veliki kompleksan Web sajt, mnogo je bitnije koncentrisati se na standardan layout ostalih unutranjih stranica u okviru sajtauspeh samog sajta zavisi od preciznog logikog obrasca koji se primenjuje.

  • Obrazac stranicaAnaliza strukture sadraja i odluka ta je potrebno za realizaciju osnovne navigacijeOdluuje se koji e se linkovi prikazati i kako e se koristiti na svakoj stranici sajtaKako e se sajt uklopiti u iri kontekst samih klijenataDa li klijent ve ima postavljen i uspean format Web dizajna u koji se treba uklopiti?Paljivo odabrati koji linkovi, logo oznake, i drugi grafiki i funkcionalni elementi odreuju mesto u veoj hijerarhijiCilj je ustanoviti logiki i konzistentan pristup gde i kako e se osnovni grafiki elementi identiteta, navigacioni linkovi i ostale najbitnije informacije, pojaviti na svim stranicama u okviru sajtova. Terminologija je veoma bitna: treba izabrati odgovarajue rei za linkove i naslove. Dvosmislene ili konfuzne labele i fraze mogu dovesti do pogrenog rada.

  • Obrazac stranica

  • Obrazac stranica Nakon definisanja obrasca stranica moe se realizovati i poetna stranica na osnovu istog obrasca, tako da se korisnici koji pristupaju sajtu odmah upoznaju sa primenjenim obrascem, vizuelnim identitom, i navigacionom emom Treba naglasiti da napravljeni obrazac ne treba da bude konaan i za poetnu stranicu, ona treba da poseduje vei broj navigacionih elemenata i samog sadraja nego obine unutranje straniceIz ovog razloga poetne stranice su obino ire i sa mnogo vie grafike od ostalih stranica

  • Obrazac stranica

  • MenijiVei broj podmeni stranica kojima e se pristupati iz generalne liste kategorija sa poetne straniceNekad nije praktino zatrpati poetnu stranicu sa desetinama linkova poveava se vreme uitavanja stranice, kao i sama kompleksnost to moe odbiti same korisnike. Realizacija podmeni stranica za svaku temu dovodi do kreiranja mini-home page za svaku temu sajta. Za specijalizovane, detaljne podmenije, esti korisnici se mogu uputiti da im automatsku pristupaju. Na ovaj nain podmeniji postaju alternativne poetne stranice orijentisani ka specifinim korisnicima. Treba ukljuiti osnovni skup linkova na ostale delove sajta na svakoj stranici podmenija, i uvek ukljuiti i link ka glavnoj poetnoj stranici (www.b92.net/sport)

  • Meniji

  • Lista resursaKada se pone realizacija sajta, poetna stranica je obino kolekcija najvanijih linkova ka sajtovima povezanim preko profesije, industrije ili nekog drugog interesa.Kod sajtova organizacija ili institucija, dobro organizovana stranica tipa "Other useful sites" moe biti najvredniji i najee korieni resurs od strane korisnika.

  • Uputstvotampani mediji - veliina knjige ili magazina moe oceniti koja koliina informacija se sadri unutraWeb sajtovi daju nekoliko eksplicitnih informacija o dubini prezentovanja obraenog sadrajaOve informacije su posebno bitne, ako poetna stranica ne sadri detaljnu listu unutranjih linkova. Opcije pretrage ne mogu zameniti definisan, dobro organizovan opis sadraja samog sajta. I mehanizam najboljih opcija za pretragu je relativno neinteligentan i samo preko nekoliko odreenih parametara prua informaciju o prisoritetu, relevantnosti i meusobnim relacijama, informacionih resursa na sajtu.

  • Sadraj ili indeksi sajta Jednostavan i efikasan nain da se korisniku predstave namere, organizacija i sam sadraja sajtaOvo su konvencije iz tampanih medija, korisnici ih razumeju i podravaju preglede, perspektive i efikasnu navigaciju koju nudeGlavna razlika je da Web indeksi zahtevaju da ne budu sloeni i detaljni kao oni iz knjiga, jer korisnik pomou alata za pretragu moe da nae referencu za svaku nepoznatu re. Indeksi na Web sajtu treba da ukau na najvanija i najkorisnija pojavljivanja definisane rei i da zanemare nevane reference.

  • Sadraj ili indeksi sajta www.ikea-usa.com

  • Mapa sajtaMapa sajta prua korisniku pregled sadraja sajta, i mogu se organizovati na dva naina: grafiki dijagrami koji opisuju sadraj ili organizovana lista linkova na glavne delove sajta.Grafike mape sadraja velikih i kompleksnih sajtova su u najboljem sluaju metafore koje opisuju samo gflavne teme sadraja sajta. Sam ekran je limitiranog prostora, pa grafika prezentacija ti da pojednostavi i zanemari hijerarhiju informacija. Rezultat je potroeno vreme na realizaciju grafikih elemenata i prikaz samo osnove sajta. Sve dok se na sajtu koriste informacije koje nisu vizuelne (skup mapa na primer), tekst-bazirani sadraji ili indeksu su efikasniji i sa vie informacija. Grafike mape sajta su u veini sluajeva kompleksni grafiki fajlovi, koji manje trpe eventualne izmene. Fajlovi za grafike mape sajta su veliki i sporije se uitavaju

  • Mapa sajtaMape sajta zasnovane na briljivo organizovanim tekst linkovima glavnih meni i podmeni stranica sa naslovima glavnih stranica su sa mnogo vie informacija i sa jednostavnijim nainima promene sadraja.I najefikasniji tekstualne mape sajta su samo proirene verzije sadraja. Takve elemente, korisnici bolje razumeju i koriste

  • Mapa sajta www.bitstream.com

  • Bibliografija i dodaci Koncept dokumenata u elektronskom okruenju kao to je Web, je fleksibilno, pa ekonomski i logistiki apsekti digitalnog izdavanja omoguavaju pruzanje informacija bez troaka vezanih za tampanje samih dokumenata.tampanje po jedne kopije za svakog, i praktino dovodi do toga da papirni izvetaji budu koncizni i sa limitiranim materijalom za podrku.Bibliografija, dodaci i apendiksi se zato umesto u osnovni dokument, mogu postaviti na Web sajt i na taj nain dostupni svakome ko eli da ih pogleda.

  • FAQ FAQ ili "frequently asked questions" stranica - gde su prikazana najee postavljena pitanja od strane korisnika sa datim odgovorima. FAQ strane su idealne za sajtove koji su dizajnirani za potrebe podrke ili informacija odreenoj radnoj grupi korisnika. Mnoga pitanja od novih korisnika su u prolosti esto postavljena i na njih su davani odgovori.Dobro dizajnirana FAQ stranica moe poveati korisnikovo razumevanje informacija i ponuenog servisa, pa smanjiti pritisak na tim za podrku