Analiza web sjedista(brozovic,klanac,malovic)

2,322 views

Published on

Analiza web sjedista

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,322
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Analiza web sjedista(brozovic,klanac,malovic)

  1. 1. Analiza web sjedištaIvana BrozovićTamara KlanacLana Malović Rijeka, travanj 2012.
  2. 2. Dobar dizajnKlinika Svjetlost Slika 1. Naslovna stranica Dobar dizajn – Klinika Svjetlost
  3. 3. Vrsta web sjedišta: • prema apstraktnoj podijeli: kombinirano web sjedište, orijentirano na dokumente i orijentirano na aplikacije • podjela prema izgledu: web sjedište orijentirano na tekst te je bogato grafikom (slike opreme koja se koristi u klinici, različiti primjeri bolesti, videa) • podjela prema svrsi: informativno web sjedišteSvrha i tema web sjedišta:  informirati ljude o uslugama koje pruža Specijalna bolnica za oftamologiju "Svjetlost“Korisnici za koje je sjedište namijenjeno:  web sjedište namijenjeno je svim ljudima koji imaju problema s bolestima okaKratki opis i opći dojam o sjedištu:  web sjedište sadrži najvažnije podatke koje bi osobe s bolestima oka zanimale  sadrži informacije usluga, tehnologiju kojom se koriste, podatke o cijenama operativnog zahvata ili pregleda  mogu se pronaći često postavljena pitanja pacijenata kao i odgovori Web sjedište ostavlja dobar dojam, ispravno je izrađeno poštujući pravila dobrog web dizajna. Dobar dizajn – Klinika Svjetlost
  4. 4. Dizajn informacija• dolaskom na naslovnu stranicu uočavamo tri grupe informacija (Korekcija kratkovidnosti, dalekovidnosti i astigmatizma, Lasersko tretiranje staračke dalekovidnosti i Ultrazvučno uklanjanje mrene)• grupa Istaknuto - sadrži najnovije informacije u obliku slike i naslova, poredane kronološki (najnovijih prema starijima)• popis najnovijih vijesti se ažurno obavlja, nedostaju datumi objave informacija• kategorije: Usluge, Tehnologija, Baza znanja, O nama, Kontakt, Cjenik• informacije grupirane po hijerarhiji• tekst pisan na hrvatskom jeziku, postoji i kratka verzija na engleskom• moguće je odabrati tri grada (Zagreb, Sarajevo i Banja Luka) u kojima se nalazi klinika Svjetlost (informacije najopširnije za grada Zagreb).• mogućnost pretraživanja pojmova i pristupa stranici na društvenoj mreži Facebook Dobar dizajn – Klinika Svjetlost
  5. 5. Grafički dizajn• vizualno web sjedište dobro je načinjeno, poštuju se pravila dobrog web dizajna• dominiraju bijela (pozadina), siva i plava boja (tekst)• prigodne boje s obzirom da se radi o klinici• bitni dijelovi pisani su plavom bojom na taj način izdvajaju se od ostatka teksta• naslovi su veće veličine i plave boje• korišten sans-serifni font Arial, veličine 12px/18px• lijevo poravnanje teksta• link koji se posjećuje plave je boje dok su ostali sivi.• boje koje dominiraju prilikom odabira grada Sarajevo su bijela, siva i zelena• odabirom grada Banja Luka uočava se bijela pozadina te sivo-crveni tekst• sve tri navedene stranice imaju logotip koji je uvijek iste boje i na istom mjestu Slika 2: Logo klinike Dobar dizajn – Klinika Svjetlost
  6. 6. Dizajn sučelja (1/3)• širina dijela stranice sa sadržajem je fiksna, iznosi 960px, ne mijenja promjenom veličine prozora preglednika• za raspored sučelja nisu korišteni gotovi predlošci, oblikovanje i razmještaj sadržaja definirani od strane autora• obrasci sučelja nisu ujednačeni za cijelo web sjedište• sve stranice sadrže horizontalni blok zaglavlja i podnožja i traku glavne navigacije• ostali prostor između glavne navigacije i podnožja je podijeljen na različite načine, Npr. kategorija Usluge (osim zaglavlja, podnožja, trake glavne navigacije sadrži traku s naslovom kategorije, traku sekundarne navigacije, blokove s nazivom usluga koje se nude i kratkim informacijama o njima. Dobar dizajn – Klinika Svjetlost
  7. 7. Dizajn sučelja (2/3) Slika 3: Kategorija Usluge Dobar dizajn – Klinika Svjetlost
  8. 8. Dizajn sučelja (3/3) • u adresnoj traci web preglednika prikazuju se naslovi stranica na kojoj se korisnik u tom trenutku nalazi (link http://www.svjetlost.hr/korekcija-dioptrije-bez-lasera , korisnik čita informacije o korekciji dioptrije bez lasera • kategorije, podkategorije jasno su označene (boja se promijeni iz sive u plavu) Slika 4: Podkategorije • povratka na početnu stranicu - klikom na karticu Početna i klikom na logotip klinike Dobar dizajn – Klinika Svjetlost
  9. 9. Dizajn navigacije • na vrhu svake stranice nalazi se globalna navigacijska traka • glavna navigacija sadrži linkove na glavne kategorije web sjedište (Usluge, Tehnologija, ...) • sjedište sadrži i podkategorije što predstavlja sekundarnu navigaciju • panele – nalaze se uz lijevi rub web stranice Slika 5: Vertikalni blok – panel • ne nudi opciju dodatne navigacije na dnu stranice • metafore kao što su ispis i povratak na vrh osim ikona dodatno su označene s tekstualnim opisom Slika 6: Ikone s tekstualnim opisom Dobar dizajn – Klinika Svjetlost
  10. 10. Multimedija • web sjedište sadrži hipertekstove, videa, interaktivni sadržaj i grafiku • za slike i logo klinike korišten je PNG format • grafika se pojavljuje skoro na svakoj stranici • interaktivni sadržaj za koji je korišten PNG format koristi se kako bi korisnici mogli uočiti kako se pojedina bolest manifestira na oko Slika 7: Interaktivni sadržaj • videa koja se nalaze na nekim stranicama preuzeta su s YouTube, otvaraju se u prozoru gdje su i postavljena Dobar dizajn – Klinika Svjetlost
  11. 11. Tehničke i ostale karakteristike • web sjedište pregledano je u tri preglednika: Google Chrome, Microsoft Internet Explorer i Mozilla Firefox • kod otvaranja kartice Kontakt u pregledniku Microsoft Internet Explorer uočena je najveća razlika (podaci sa stranice ne nalaze se odmah ispod globalne navigacijske trake) Slika 8: Prikaz u web pregledniku Microsoft Internet Explorer • od Web 2.0 alata uključen je Facebook Dobar dizajn – Klinika Svjetlost
  12. 12. Loš dizajne-škola Hrvatskog fizikalnog društva Slika 9. Gornji dio početne stranice Loš dizajn – e-škola Hrvatskog fizikalnog društva
  13. 13. Vrsta web sjedišta• prema apstraktnoj podijeli: web sjedište orijentirano na dokumente• podjela prema izgledu: web sjedište orijentirano na tekst, ali sadrži i dosta grafike• podjela prema svrsi: informativno web sjedišteSvrha i tema web sjedišta:  pružanje informacija vezanih uz fiziku te unapređenje nastave fizike u osnovnim i srednjim školamaKorisnici za koje je sjedište namijenjeno:  učenicima i nastavnicima srednjih i osnovnih škola, zainteresiranima za fizikuKratki opis i opći dojam o sjedištu:  bogato zanimljivim i korisnim materijalima  nepregledno organizirano → izgubljenost u hiperprostoru  nije dovoljno samo postaviti zanimljive materijale već i zainsteresirati korisnika za njihovo proučavanje Loš dizajn – e-škola Hrvatskog fizikalnog društva
  14. 14. Dizajn informacija (1/2)• 14 kategorija (+/- nekoliko kategorija) - Vi pitate (Vi pitate mi odgovaramo) - Projekti (pomoć znanstvenika, učenici i nastavnici samostalno) - PC kutak (programska podrška, računala i fizika) - Zadaci i testovi - Kućni eksperimenti (kreativni pokusi, odbačeni materijali) - Fizika svemira - Hokus – pokus fizika (virtualne radionice) - Školska fizika (mogućnost slanja radova) - Škole suradnice (popis i osnovne informacije o školama) Loš dizajn – e-škola Hrvatskog fizikalnog društva
  15. 15. Dizajn informacija (2/2) • neusklađene stranice • zadaci u svakoj kategoriji • mješovita hijerarhijska struktura ?! • nepersonalizirano web sjedište • samo hrvatski jezik • kontakt informacije • nagrade i priznanja Loš dizajn – e-škola Hrvatskog fizikalnog društva
  16. 16. Grafički dizajn• bijela pozadina i crna slova → ne ometa, ali nije ni kreativno• naslovi na vrhu stranice unutar slike (neprikladno odabrano)• poveznice nisu istaknute, premalene• font Arial• nije korišteno lijevo poravnanje nedostatak kreativnosti unatoč tome što je tema fizika, dinamična i zanimljiva znanost Loš dizajn – e-škola Hrvatskog fizikalnog društva
  17. 17. Dizajn sučelja• nisu korišteni okviri• tablice s neistaknutim rubovima• nejednaki obrasci sučelja• stranice najčešće podijeljene u dvije ili tri glavne cjeline• ispravno prikazivanje na različitim rezolucijama• sadržaj se ne prilagođava veličini prozora• u adresnoj traci web sjedišta navedena pozicija npr. http://eskola.hfd.hr/pc_kut/glazkart/• elementi nisu grupirani po pravilu 7 (+/- 2)Metafore → → → odgovori film odgovor Loš dizajn – e-škola Hrvatskog fizikalnog društva
  18. 18. Dizajn navigacije (1/2) • izostavljeni principi dobre navigacije (nejasna, neefikasna, neujednačena) • nedosljedna globalna navigacija • ne koriste se dodatne boje za olakšanje pretrage • nije uvijek postavljena u gornju trećinu stranice panel uz lijevi rub stranice poveznice na dnu stranice ne postoji Loš dizajn – e-škola Hrvatskog fizikalnog društva
  19. 19. Dizajn navigacije (2/2) poveznica na naslovnu stranicu • mapa web sjedišta potpuno neuklađena s web sjedištem • ne sadrži tražilicu ni indeks Loš dizajn – e-škola Hrvatskog fizikalnog društva
  20. 20. Multimedija • web sjedište bogato multimedijom • SLIKE - JPG format – slike kao nadopuna tekst - GIF format - naslovne trake, logo, slike kao hiperlinkovi, animacije • VIDEO - FLV format - uradak učenika • FLASH SADRŢAJ - SWF format Loš dizajn – e-škola Hrvatskog fizikalnog društva
  21. 21. Tehničke i ostale karakteristike (1/2) • dosta pogrešnih poveznica • ne koristi se cijeli ekran za prikaz sadržaja • vidljivost HTML koda • puno materijala se prikazuje na novoj kartici web preglednika ili u novom prozoru • web sjedište uglavnom izrađeno pomoću statičnog HTML-a • stisliski predlošci CSS korišteni za formatiranje teksta, navigacije, pozadine • postoje klijentske skripte pisane u JavaScriptu Mozilla i Chrome Internet Explorer Loš dizajn – e-škola Hrvatskog fizikalnog društva
  22. 22. Tehničke i ostale karakteristike (2/2) • Web 2.0 alati - korisnici mogu odgovarati na pitanja postavljena od strane drugih korisnika Loš dizajn – e-škola Hrvatskog fizikalnog društva
  23. 23. ZAKLJUČAK• korisnik na temelju prvog dojma stvara mišljenje o web sjedištu• potrebno obratiti puno pažnje na upravo opisane komponente web sjedišta• zanimljiva tema web sjedišta (FIZIKA) može postati vrlo neatraktivna tena ukoliko se ne da dovoljno značaja izgledu web sjedišta• s druge strane, “dosadna” tema web sjedišta (BOLESTI OKA) ukoliko se dobro predstavi može korisniku biti jako zanimljiva Loš dizajn – e-škola Hrvatskog fizikalnog društva
  24. 24. HVALA NA PAŽNJI !!

×