Analiza web sjedista

1. Analiza web sjedišta
Ivana Brozović
Tamara Klanac
Lana Malović
Rijeka, travanj 2012.

2. Dobar dizajn
Klinika Svjetlost
Slika 1. Naslovna stranica
Dobar dizajn – Klinika Svjetlost

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šte
Svrha 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 oka
Kratki 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. 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. 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. 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. Dizajn sučelja (2/3)
Slika 3: Kategorija Usluge
Dobar dizajn – Klinika Svjetlost

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. 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. 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. 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. Loš dizajn
e-škola Hrvatskog fizikalnog društva
Slika 9. Gornji dio početne stranice
Loš dizajn – e-škola Hrvatskog fizikalnog društva

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šte
Svrha i tema web sjedišta:
 pružanje informacija vezanih uz fiziku te unapređenje nastave fizike u
osnovnim i srednjim školama
Korisnici za koje je sjedište namijenjeno:
 učenicima i nastavnicima srednjih i osnovnih škola, zainteresiranima za fiziku
Kratki 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. HVALA NA
PAŽNJI !!