1. 1

2.  Gazdálkodás a képernyővel
 Platformfüggetlen megjelenítés
 A tartalom és a megjelenítés szétválasztása
 Válaszidők
 Linkelés
 Stíluslapok
 Keretek
 Hitelesség
 Nyomtatás
2

3.  A weboldalaknak a felhasználók számára érdekes információkat kell
megjeleníteniük.
 Azonban ha felhasználók megnyitnak egy weboldalt valószínűleg csak
a képernyő egy kis részében találkozhatnak a számukra hasznos
információkkal.
 Miért van ez?
 A képernyőből jelentős területet foglalhatnak el a böngésző és/vagy
az operációs rendszer. Bár a webtervezőknek ezekre nincsen
hatásuk, de a felhasználókat valószínűleg ez egy cseppet sem
érdekli.
 Általában a képernyő 14-20 %-át tölti ki a hasznos felület.
 A weboldalakon sokszor nagy területet szentelnek a navigációnak
is. Ezért szükséges a minimálisra való csökkentése.
 Itt is léteznek üresen hagyott felületek, ezek azonban nem
szükségszerűen feleslegesek. Ugyanis hiba lenne túlzsúfolt
oldalakat tervezni, hiszen az üres helyek vezethetik a szemet és
segíthetnek a felhasználónak, hogy átlássa az információk
csoportosításának az elvét.
3

4.  A fehéren hagyott rész lehet a tartalmi vagy a navigációs tervezés
szerves része, ekkor teljesen helyénvaló. De ha egyszerűen csak
azért van ott, mert az oldalt nem lehet az adott ablak méretéhez
igazítani, akkor azt áttervezéssel el kel kerülni.
 Alapszabály, hogy a tartalom töltse ki az oldalnak legalább a felét, de
még jobb, ha ez az arány a 80%-hoz közelít. Nem szabadna, hogy a
navigáció, a reklámok és egyéb elemek az oldalnak több mint 20%-át
elfoglalják. Bár belső oldalakon a szükséges navigáció miatt ez az érték
akár nagyobb is lehet.
 Bármilyen felhasználói felület tervezésekor alapelv, hogy az oldal
minden elemét egyenként el kell távolítani, s ha szerepét nem tudjuk
alaposan megindokolni, akkor érdemes tőle megszabadulni. Különösen
igaz ez a webre, ahol az egyszerűség hatásosabb és a kevesebb
információ rövidebb letöltődési időt jelent.
4

5.  Hagyományos grafikus felhasználói felület tervezésekor a tervező
minden képpontot a kezében tarthat. S ha elhelyezünk pl. egy
párbeszédablakot biztosak lehetünk benne, hogy a felhasználó
képernyőjén is úgy fog kinézni, mint a miénken. Egyértelmű, hogy
milyen betűkészlet van telepítve és mekkora a képernyő. Akár azt is
megtehetjük, hogy kiszürkítjük azokat a menüpontokat, amelyek adott
helyzetben nem aktívak vagy egy olyan párbeszédablakot jelenítünk
meg amelyik a többi ablak felett marad mindaddig, míg a felhasználó
meg nem válaszolja azt.
 A weben azonban a felhasználó dönti el, milyen sorrendben halad az
oldalakon, akár olyan útvonalat is választhat, amire a tervező nem is
gondolt. Megtörténhet, hogy egy site közepébe csöppen egy keresőből
anélkül, hogy látta volna a honlapot. Ezért a webtervezőknek a
felhasználó által irányított navigációhoz kell alkalmazkodniuk.
 Vannak olyan oldalak, ahol valamilyen útvonalon végigvezetik a
látogatókat, de ezek általában agresszív és uralkodó benyomást
keltenek.
5

6.  A felhasználók egyre nagyobb része nem a hagyományos számítógépen
keresztül éri el a weboldalakat.
 A legtöbb weboldal csak egy 17”-es, legalább 1024x768 képpont
felbontású monitoron jeleníthető meg jól. Ennél kisebb felbontásban
túl kevés látszik és gördíteni kell ahhoz, hogy a kép minden részlete
látszódjon. Ezért úgy kell tervezni a weboldalakat, hogy kis képernyőn
is jól láthatóak legyenek.
 Mivel előre nem tudhatjuk, hogy a felhasználóknak mekkora
képernyőjük van érdemesebb olyan megoldásokat használni, amelyek
minden képernyőn működnek.
 A felbontásfüggetlen megjelenítés fő alapelve, hogy ne használjunk
kötött képpontszélességet táblázatok, keretek vagy bármilyen más
képelemek megjelenítésére, inkább a képernyőn lévő hely
százalékában határozzuk meg a méretet.
6

7.  Ne felejtsük el azt se, hogy a felhasználók különböző betűméreteket
használnak. Ennek oka lehet az is, hogy valaki rosszul lát vagy
egyszerűen olyan nagyfelbontású képernyője van, amelyiken a kisebb
betűméret nehezen olvasható.
 Grafikus elemek tervezésekor arra is ügyeljünk, hogy az ikonoknak
nagy felbontásnál is működniük kell. Minél nagyobb lesz a felbontás
annál kisebb lesz maga a grafikus elem, ezért az abban lévő szövegnek
elég nagynak kell lennie, hogy olvasható maradjon. Nem tanácsos
szöveget grafikus részekbe ágyazni, mert ez megnehezítheti a fordítást
egy másik nyelvre.
 A színmélységgel nincsenek ilyen problémáink, hiszen napjainkra a
memóriaárak csökkenése és teljesítményük növekedése miatt egyre
olcsóbban lehet nagyteljesítményű videokártyákat beszerezni.
 A nyomtatók felbontása nagy, de nem olyan széles, mint a legtöbb
monitor. Ezért azok a weboldalak, amelyek nem felbontás-függetlenek
kinyomtatva nem lesznek jók. A legjobb megoldás az lenne, ha minden
oldalhoz megadnánk egy nyomtatási változatot is.
7

8.  A szoftvertelepítés megmaradási törvénye
 A web korai időszakában a felhasználóknak hetente körülbelül 2
százaléka újította meg a web böngészőjét. Ezzel a sebességgel kb. 1
évre volt szükség, hogy az összes felhasználóhoz eljusson az új
verzió. Mivel a cégek évente több új verziót is piacra dobtak, ezért a
felhasználók állandóan le voltak maradva.
 A verzióváltások üteme valószínűleg napjainkban lassabb ennél.
Ugyanis a felhasználókat semmi sem kényszeríti a váltásra, hiszen a
régebbi böngészők is megfelelnek a célnak. S az új programok sem
jelentenek akkora újítást, hogy érdemes legyen váltani. Harmadszor
a felhasználók már nem az úttörők lelkes csoportjából áll, akik
lelkesen gyűjtötték az új dolgokat.
 Manapság az emberek amíg a régi böngészőjük működik nem
fognak azzal fáradni, hogy megkeressenek, letöltsenek és
telepítsenek egy új böngészőt addig, amíg a régi tökéletesen
működik.
8

9.  Érdemes minden új technológia használatától mindaddig tartózkodni,
amíg el nem telt legalább egy-két év a hivatalos verzió megjelenésétől.
 Három ok amiért ne hamarkodjuk el a legújabb webes fejlesztések
alkalmazását:
 A heti egy százalékos verzióváltási sebességgel legalább egy év kell
ahhoz, hogy a felhasználók nagy része elérhesse az új technológiát,
s legalább kettő, hogy mindenkit elérjen.
 Még azután is hogy a béta-verzió hivatalos változattá lép elő,
valószínűleg lesz benne hiba, amelyeket csak a következő
alváltozatban fognak kijavítani.
 Az újdonságot használó site-ok a felhasználóknak általában többet
ártanak, mint használnak.
 Az új technológiákat csak azután tudjuk úgy használni, hogy jobbá
tegye az oldalunkat, ha már van valamilyen tapasztalatunk róla és
ismerjük a teszteredményeket.
9

10.  Van egy két éves szabály is. Az új web technológia kibocsátást követő
két évben ellenőrizni kell, hogy az újdonság a régebbi böngészőkkel is
működik-e.
 Sokak böngészőjét egy „guru” barátjuk vagy kollégájuk telepíti. Amikor
egy ilyen guru telepíti egy átlagos felhasználónak a böngészőjét akkor
annak fogalma sem lesz, hogy honnan töltötte le, hogyan állította be,
vagy hogyan kell azt új verzióra cserélni.
 Még azok a felhasználók, akik maguk telepítik a böngészőjüket
gyakran úgy vannak vele, hogy „ha ez is jó, minek a másik?”.
 Ezen két okból sok felhasználó sokáig azt a böngésző változatot
használja, amit a gépére telepítettek.
 Gyűjtsük a régebbi böngészőket, mert még két évig érdemes
ellenőrizni, hogy az oldal elfogadhatóan működik-e. Másodszor a
felhasználóktól különböző hibajelentéseket fogunk kapni, s jó ha
problémák megoldáshoz minél többféle böngésző áll a
rendelkezésünkre.
10

11. 11

12.  A web előtt mindenki így gondolkodott:
 A hardvert néhány évig lehet majd használni, ezután egy
modernebb számítógépre kell átállni.
 A szoftverek néhány évig-évtizedig használhatók, majd ezután
szükséges az újabb programok beszerzése. Van olyan cég, amelyek
akár húsz éves programokat is használhatnak.
 Az adat megmarad. Még akkor is, ha hardverünket és szoftvereinket
is kicseréltük.
 Ugyanez igaz a webre is. A hardvert, a webszervereket akár egy évben
többször is bővítjük, vagy lecseréljük azokat. A böngészők és más
programok is folyamatosan cserélődnek. A webes adatoknak és az
oldalaknak sokkal tovább kell megmaradniuk mint, az előző kettőnek.
Még ha a legtöbb felhasználó az új oldalakat is látogatja, néhányuknak
még a régiek is érdekesek.
12

13.  Felmérések szerint a válaszidők jelentik a weboldal tervezésének a
legfontosabb kritériumát.
 Kutatások szerint kevesebb mint egy másodperces válaszidőre van
szükség ahhoz, hogy a felhasználó az információs térben szabadon
tudjon mozogni.
 Biztosra vehetjük, hogy a webes válaszidők nem fognak ilyen
mértékűre csökkeni, s ez továbbra is zavarni fogja a felhasználókat.
 Jelenlegi cél az, hogy egy weboldal betöltődése ne tartson tovább tíz
másodpercnél.
 A válaszidőket tekintve még mindig érvényesek Robert B. Millernek
egy 1968-as tanulmányban kifejtett megállapításai.
 Egy másodperc körülbelül tizedrésze az az idő, aminél a
felhasználók még úgy érzik, hogy a rendszer azonnal reagál. Ezért
nincs szükség semmilyen különleges visszajelzésre, hogy a rendszer
reagál.
13

14.  Egy másodperc az az időhatár, ami alatt a felhasználó
gondolatmenete nem szakad meg, bár a késedelmet észre fogja
venni. Általában semmilyen visszajelzés nem szükséges, ha
válaszidő 0,1 és 1 másodperc közé esik, a felhasználó azt fogja érezni,
hogy az adatszolgáltatás folyamatos.
 Tíz másodperc, amíg a felhasználó egy párbeszédre tud
összpontosítani. Ennél hosszabb késlekedés esetén egy új feladaton
kezd el dolgozni. Bár bosszantó, ha tíz másodpercet kell várni egy
oldal betöltődésére, de a felhasználó még a honlapon marad.
 Természetesen a válaszidőknek rövidnek kell lennie, de lehet a
számítógép olyan gyors, hogy a felhasználó nem tudja követni. Például
ha a lista olyan gyorsan gördül, hogy kifut a képernyőből akkor a kívánt
rész kifut az ablakból.
14

15.  Használhatóság szempontjából a sebesség mellett a válaszidő
bizonytalansága is fontos. A válaszidők ingadozása is szerepet játszik
abban, hogy a felhasználók elégedetlenek a web sebességével.
 A felhasználók elégedettsége saját elvárásaiktól is függ.
 Ha ugyanazok a műveletek mindig ugyanannyi ideig tartanak a
felhasználók megtanulják, hogy mire számíthatnak.
 Például nagy multimédiás fájlokat tartalmazó oldalaknál a letöltés
idejét megjósolhatjuk, ha a fájl neve mellett a méretét is jelezzük.
Alapszabály, hogy a 10 másodpercnél hosszabb letöltést igénylő fájlok
mellett meg kell adniuk a méretüket is.
 A válaszidő a következő tényezőktől függ:
 A szerver áteresztőképessége.
 A szerver kapcsolata az internethez.
 Az internet maga.
 A felhasználó internetes összeköttetése.
 A felhasználó számítógépe.
15

16.  A weboldalak tervezésénél elsődleges szempontnak a gyorsaságnak
kellene lennie.
 Milyen legyen a gyorsan betöltődő oldal?
 Legyen az oldalméret kicsi.
 A grafika a lehető legkevesebb. Ha mégis alkalmazzuk, akkor
próbáljuk meg többször felhasználni.
 Multimédiás tartalmakat akkor használjunk, ha hozzájárul az
információk megértéséhez.
 Ne csak gyors internet kapcsolatra tervezzük meg az oldalainkat.
 Ha az oldalméret túl nagy, akkor a bailout arány akár 25-30 %-os
is lehet. (A bailout azoknak a felhasználóknak az arány, akik nem
várják ki az oldal teljes letöltését.)
16

17. 17

18. 18

19.  A felhasználók számára az a legfontosabb, hogy ha még nem is
töltődött be az egész oldal, a megjelenő információ egy részével
gyorsan el kezdhessen dolgozni.
 A gyors kezdő letöltés irányvonalai a következők:
 Az oldal felső része akkor is értelmes legyen, ha a képek még nem is
töltődtek be. (Több szöveg, kevesebb kép.)
 Használjunk a még be nem töltődött képekhez magyarázó
szövegeket.
 A böngészőnek az oldal felső részét nagyon gyorsan meg kell
rajzolnia. S erre csak akkor lesz képes, ha minden adat a
rendelkezésére áll.
 Összetett táblázatok megjelenítése sok ideig tart. Jobban járunk, ha
a bonyolult táblázatokat több részre bontjuk.
 Az oldalak megjelenítésénél használjuk ki a „HTTP keep-alive”
technikát.
19

20.  A hipertext legfontosabb eleme, ezen keresztül juthatunk el egyik
dokumentumból a másikba.
 A hivatkozások három formában jelenhetnek meg:
 Strukturált navigációs linkek. Segítségükkel juthatunk az oldal
tetejére vagy a kezdő oldalra.
 Az oldal tartalmán belüli asszociatív linkek. A kiemelt szövegekről
és képekről más információt nyújtó oldalra juthatunk.
 „Lásd még” linkek. Ezek a hivatkozások segítik a felhasználót, hogy
meg találja a keresett információt, ha azt a megnyitott oldal még
nem tartalmazza.
 A hivatkozások használatának szabályai:
 A kiemelt szövegek ne legyenek túl hosszúak.
 Egy oldalon ne legyen sok link.
 Ne használjuk a „kattintson ide” kifejezést.
 Csatoljunk a linkekhez magyarázó szöveget (linkcímek).
20

21. 21

22. 22

23.  Linkcímekre vonatkozó javaslatok:
 Legyen annak az oldalnak a címe, ahová a link mutat.
 Legyen annak a site-résznek a neve, ahová a link mutat.
 Milyen információk találhatók azon az oldalon.
 Figyelmeztetések a következő oldalon előforduló problémákra. (pl.
regisztráció)
 Nem kell minden linkhez linkcímet rendelni.
 Ha a kiemelésből és a szövegösszefüggésből egyértelműen kiderül,
hogy hova vezet a link.
 Teljesen felesleges, hacsak a kiemelésben szereplő szöveget ismétli
meg.
23

24.  Linkszínek
 A böngészők általában két színt használnak a különböző linkek
jelzésére. Kéket a még meg nem látogatott oldalak és bordó vagy vörös
színt a meglátogatott oldalak jelölésére.
 Ugyanazokat a színeket használjuk a linkek jelölésére.
 Ha nem a szabványos linkszíneket használjuk a felhasználók esetleg
nem lesznek képesek eligazodni az oldalon.
 A linkekkel kapcsolatos elvárások:
 Egy adott oldalra mindig ugyanazzal az URL-lel hivatkozzunk. Ha a
felhasználó két vagy több cím használatával is ugyanarra az oldalra fog
jutni ez megzavarja, s előbb vagy utóbb el fogja hagyni a site-ot. Hiszen
a meg nem látogatott oldalt jelző link ugyanoda fogja vezetni, ahol már
járt.
24

25.  Vannak olyan tervezők, akik nem használnak kifelé mutató linkeket,
azért, hogy a felhasználóknak ne adjanak lehetőséget a távozásra. Ez
azonban ellentmond az egész rendszer filozófiájának vagyis, hogy a
felhasználók tartják a kezükben az irányítást. Különben sem tarthatjuk
őket fogva.
 Hogyan jelezhetjük, hogy az adott link kifelé mutat az oldalról:
 A kurzor formát vagy színt vált.
 Egy felugró menü további információt közöl a linkről.
 Problémák:
 A meglátogatni kívánt weboldal új ablakban nyíljon-e meg? Sok
tervező használja, hogy az oldalukon tartsa a felhasználókat.
 Ha egy személy nevét tesszük meg linknek, érdemes-e az adott
illető weboldalára irányítani a felhasználót.
25

26.  A kifelé mutató linkeket józanul kell összeválogatni. Jobb kevesebb
pontosan az oldal témájába vágó link, mint az összes elképzelhető oldal
linkjét összegyűjteni.
 A felhasználók általában csak tíz százalékát tudják feltárni az összes
linknek, amelyekkel találkoznak.
 Ha a maximalistákat akarjuk kiszolgálni, akkor jó ötlet lehet egy olyan
oldal linkjét megadni, amelyik a témába vágó szinte összes oldalt
belinkeli.
 Ha a felhasználók azt tapasztalják, hogy egy oldalon érdekes és hasznos
linkeket találnak oda időről-időre visszalátogatnak.
26

27.  A bejövő linkek a legértékesebb forgalom növelő eszközök közé
tartoznak. Amikor mások a mi oldalainkra mutató linket helyeznek el
akkor ingyen hirdetnek minket.
 Azonban van néhány oldal, amelyik fizet a bejövő linkekért.
 A legegyszerűbben úgy támogathatjuk a bejövő linkeket, ha minden
oldalunkhoz állandó URL tartozik.
 Ha van olyan linkünk, amelyik csak bizonyos ideig működik, akkor
erről tájékoztassuk partnereinket.
 Egy oldalnak néha állandó és ideiglenes címe is van. Például egy újság
aktuális száma lehet egy virtuális cím, amely a mindenkori aktuális
szám tényleges címére mutat.
27

28.  Ha egy oldalon regisztrációra van szükség, akkor elbúcsúzhatunk a
bejövő linkekről érkező új felhasználóktól.
 Ha egy site-hoz valóban szükség van előfizetésre vagy regisztrációra,
akkor bizonyos oldalakat tegyünk ingyenesen hozzáférhetővé.
Amennyiben úgy választjuk ki ezeket az oldalakat, hogy azok jól
reprezentálják a szolgáltatást, akkor sok közvetett látogatót vonzunk,
akikből néhány az előfizetőnké válhat.
 Nyugat-Európában és Észak-Amerikában terjed például az, hogy az
újságok kis összegű fizetés ellenében bocsájtják rendelkezésünkre az
újság cikkeit. A fizetés módszere elég egyszerű és gyors.
 A szerzőknek nyílván figyelembe kell venniük az oldalak árát, mielőtt
rámutató hivatkozást helyeznének el. Természetesen egy ingyenes
oldalra sokkal többen kattintanak, mint egy kis összegbe kerülőre,
amennyiben a két oldal értéke azonos.
28

29.  A hirdetés a bejövő linkek egy speciális fajtája, mert ha mi fizetünk a
hirdetésért mi akarjuk megszabni a tulajdonságait.
 A hivatkozás mindenképpen arra az oldalra mutasson, amely a
hirdetésben megfogalmazott témával foglalkozik és ne a honlapra.
 Kutatások szerint a reklámra kattintók 20-30 százaléka azonnal a vissza
gombot használja, ha csak a honlapra jut.
 A hivatkozást érdemes igen jól megtervezni, azaz elmagyarázni a
felhasználónak, hogy milyen tartalommal fog találkozni és
megindokolni, hogy miért érdemes a hivatkozást követni.
 Ne használjunk idegesítő animációkat, villódzó színeket, mert ekkor
semmi sem készteti a felhasználót, hogy megnézze a linket.
29

30. 30

31. 31

32.  A stíluslapok használatának egyik legnagyobb előnye, hogy miközben a
felhasználó a honlapon navigál a látvány mindvégig megmarad. Hiszen
teljesen mindegy, hogy egy magazinban hova lapozunk a szöveg és az
alapelrendezés ugyanolyan. A weboldalak is ilyen összetartozóak, ha az
összes oldalhoz ugyanazt a stíluslapot használjuk.
 A technikai megvalósításáról a web-szerkesztés elmélet és gyakorlat
órákon lesz szó.
 Azonban azt is figyelembe kell venni, hogy egy oldalnak akkor is
működnie kell, ha a stíluslapok a felhasználó böngészőjének a
hibájából nem tudnak betöltődni. Ezért kapcsoljuk ki a stíluslapokat és
töltsük be újra az oldalt, s így is elfogadható eredményt kell kapnunk.
32

33.  „ - Keretek?
 - Köszönöm nem.”
 Mik is azok a keretek?
 Dinamikus weboldalak használatakor a különböző helyekről származó
tartalom ezekben az úgynevezett keretekben jelenik meg.
 Miért ne használjuk azokat?
 Az URL-ek sem működnek mindig helyesen, ha kereteket
használunk.
 Sok böngésző nem tudja a kereteket használó weboldalakat
rendesen kinyomtatni.
 Nehéz jól megírni a kereteket tartalmazó weboldalak kódjait.
 A kereső programok szintén nehezen boldogulnak az ilyen
oldalakkal.
 Felmerülhetnek szerzői jogi problémák is.
33

34.  A hitelesség két dolgot jelent a weboldalak esetében:
 Az információk, amelyeket az oldal szolgáltat hitelesek,
megbízhatóak-e?
 A weboldal vizuális megjelenése, egy jó design már eleve
megteremtheti az oldal és a mi hitelességünket.
34

35. 35

36.  A felhasználók rengeteg dolgot kinyomtatnak a webről, pedig a
világhálónak elméletileg feleslegessé kellett volna tennie a nyomtatást.
 A felhasználók saját kárukon tanulták meg, hogy nem lehetnek
biztosak abban, hogy ha később ugyanarra az információra lenne
szükségük újra megtalálják azt. Előfordulhat, hogy a szerver nem
működik, a keresett oldalt törölték vagy csak a felhasználó képtelen
újra megtalálni a keresett információt.
 Ez webes tervezés szempontjából azt jelenti, hogy a hosszabb
dokumentumoknak lehetőleg legyen egy nyomtatható változata is.
 Ugyan fejlődnek a böngészők nyomtatással kapcsolatos funkcióik, de
nem bízhatunk benne, hogy mindegyik jó minőségű nyomtatást
produkál.
 Hiszen a legtöbb böngésző ugyanazt a betűtípust használja online
olvasásra és nyomtatásra is. Továbbá a dokumentumok elrendezése is
eltér a nyomtatás igényeitől.
36

37.  A nyomtatható fájlnak PDF, vagy PostScript talán DOC, vagy DOCX
formátumúnak kell vagy kellene lenniük.
 Nagyon fontos, hogy jelezzük az ilyen fájlokat csak nyomtatásra
szántuk. Mindig helyezzünk el azonos tartalmú HTML-re mutató
linket azon felhasználók számára, akik csak hálózati módon
szeretnének böngészni vagy keresni az adott dokumentumban.
 Minden kinyomtatásra szánt oldalnak igazodnia kell a két
legelterjedtebb papírformátumhoz: az A4-hez és a 8,5”x11”-hez (U.S
Letter, 215,9x355,6 mm). Ehhez egy oldal szélességének rá kell férnie
egy A4-es lapra, mivel ez a keskenyebb, s az oldal magasságának el kell
férnie a 8,5”x11” lapon, mivel ez az alacsonyabb formátum.
 Általában hagyjunk legalább fél inches (13 mm) margót a lap négy
oldalán, hogy biztosan kinyomtatható legyen minden nyomtatón, s a
fénymásolást se gátolja.
37