Weblabor

A Web-ergonómia (vagyis a gyakorlati használhatóság), mint fogalom Jakob Nielsen: Web-design című könyvén keresztül jutott el hozzám. Sok olyan szempontot olvastam benne, amelyet magam is fontosnak tartottam, voltak azonban olyanok, amelyekre rádöbbentem az olvasás folyamán. De leginkább annak örültem a könyv áttekintése után, hogy az ott leírtakra építhetek a további munkáimban, és mint a téma egyik vezető szakemberét, hivatkozási alapként idézhetem érvként. A saját rossz tapasztalataim indítottak arra, hogy készítsek egy felmérést arról, milyen a mai magyar weboldalak minősége az ergonómiai szempontok alapján. A továbbiakban ezen kutatásom eredményeit fogom bemutatni.

Ahol a terjedelem ezt lehetővé teszi, szeretném azt is bemutatni, hogy hogyan lehetne használhatóbb oldalakat készíteni. Természetesen ezek is csak lehetőségek, és nem feltétlenül a legjobbak.

A felmérés módszerei

A kitűzött minta (a továbbiakban Minta) a következő kategóriákból áll (a részletes lista a cikk végén található):



E kategóriákból 60 oldalt „véletlenszerűen” választottam ki. Egy ilyen méretű minta már alkalmas arra, hogy következtetéseket vonjak le, de a kategóriánkénti eloszlások értékeit csak nagyon óvatosan szabad értelmezni. Nagyon sokféle konkrét mérést lehet (és lett volna érdemes) megvizsgálni, de a feladat nagysága miatt csak néhány alapvető, viszonylag könnyen mérhető jellemzőt vizsgáltam meg. A mérés 1024×768–as felbontású monitoron, Internet Explorer 6.0 és Firefox használatával történt. Az első böngésző elterjedtsége, a másik pedig a szabványoknak való megfelelés igénye miatt fontos. Az oldalak szövegének vizsgálatához a Context 0.97.3-as verzióját és a Word „szavak száma” szolgáltatást használtam fel.

A vizsgálat eredményei

Megéri kivárni a letöltődést?

Fontos, hogy egy oldal letöltési ideje egy bizonyos lélektani határ alatt legyen, ameddig az olvasó még „türelmesen vár”. Nem mindegy tehát, hogy mekkora egy oldal, aminek a letöltését végig kell várni. Természetesen vannak olyan oldalak, amelyek „információtartalma” alapvetően nem szöveges, hanem pl. kép alapú. Ilyenkor a látogató sokszor inkább kivár.

A közhiedelemmel ellentétben a hosszú letöltési időt sok esetben nem várják meg a látogatók – még egy tetszetős megjelenésű oldal kedvéért sem. Pedig egyszerű módszerekkel kis méretű, mégis mutatós oldalakat lehet készíteni. Megjegyzem, még nagyobb tévedés, hogy a jó megjelenés el tudja adni a gyenge tartalmat.

Letöltési méret

A Minta átlagos oldalmérete 185 KB, ami modemes elérés esetén körülbelül fél perc alatt töltődik le. Nagyon jó tartalom kell ahhoz, hogy ennyit várjunk érte, hiszen a szakirodalom általában 0,1 és 1 másodperc közötti letöltési időt javasol, e fölött a látogató joggal türelmetlen.

Miért ilyen nagy?

Többek között azért, mert az oldalak méretének 74%-a nem szöveges, hanem egyéb (döntően kép) állomány. Bár nem cél a képek (és egyéb multimédia elemek) teljes elhagyása, fontos, hogy az oldalak formázásához minimális számú és méretű képet használjunk. Ügyes trükkökkel egy képet több helyen is felhasználhatunk egy oldal kinézetének kialakításában. Ilyenkor a kép természetesen csak egyszer töltődik le.

Szöveges tartalom

További érdekes tapasztalat, hogy a HTML forrásokban rengeteg olyan formázó elem és tulajdonság található, amely praktikusan kiváltható lenne a CSS jobb használatával, és a táblázatos oldalkialakítás feladásával. Könnyen belátható, hogy a táblázatok leírására szolgáló sok elem jelentősen csökkenti a HTML tényleges szövegtartalmát.

1KB HTML kódra mindössze 102 ténylegesen megjelenő betű jut, vagyis a „hatékonyság” 10,2%. Természetesen nem a 100% a cél, de az ember talán joggal várna el magasabb értéket.

A felhasználó irányít?

Jóval a Web születése előtt, a grafikus képernyők megjelenésének idején „kicsúszott” a programozó kezéből a felhasználó irányítása. Az interaktivitás eszméje felhatalmazza a felhasználót arra, hogy azt tegyen, amit akar, és úgy tegye, ahogy akarja - természetesen bizonyos keretek között, de az ésszerűség határain belül mindenképp. Sajnos a Weben ezt sokan ismét elfelejtik, és webfejlesztőként nem adják meg az olvasónak azt a szabadságot, ami talán joggal elvárható lenne.

Rögzített oldalszélesség

Az olvasók a PC-től kezdve kéziszámítógépekig és mobiltelefonokig különböző hardvereken sokféle képernyőmérettel olvassák a honlapokat. PC-n ma 640 x 480-tól akár 1600 x 1200-ig terjedhetnek a használt felbontások. Ha ezt egy webfejlesztő nem veszi figyelembe, akkor sok felhasználót jó eséllyel kizárhat a látogatói közül. Tekintve, hogy általában pont a látogatók csalogatása és megtartása a cél, szerintem minden webfejlesztő számára megfontolandó a rugalmas oldalszélességre való tervezés. Nem nehéz elképzelni, hogy milyen könnyen továbbáll a felhasználó, ha problémái vannak az oldal megjelenésével.

Példaként nézzük meg, hogy hogyan használható a startlap.com 640 és 1024 pixeles szélességen (a tervezők 690 pixelre tervezték a megjelenítést).

Jól látható, hogy kisebb felbontásban megjelent a vízszintes görgetősáv, így sokszor szükség lehet a vízszintes görgetés használatára, ami a weben szokatlan.

Nagyobb felbontás esetén kihasználatlan helyeink vannak a képernyőn. Én úgy gondolom, senki nem azért vesz nagyobb felbontású monitort, hogy egy weboldal látogatásakor üres, indokolatlanul kihasználatlan csíkok legyenek a képernyőjén. Hiszen pont azért nagy a felbontás, hogy több információ jelenhessen meg rajta egyszerre.

Nézzünk egy példát alkalmazkodó oldalszélességű oldalra 480 és 1024 pixelen megnézve:

480 pixelen még kényelmesen olvasható, nincs szükség vízszintes görgetésre.

Nagy felbontáson problémaként esetleg azt lehetne ellenérvként felhozni, hogy a túl hosszú sorok nehezen olvashatók lehetnek. Véleményem szerint ez jóval kisebb probléma, mint az üres sávok kétoldalt fix szélesség esetén, ugyanis ha zavaró a hosszú sor, a látogatónak bármikor van lehetősége az ablakméretet csökkenteni, vagy esetleg eleve nagyobb betűmérettel szeret olvasni, amikor a hosszú sor ismét nem fog problémát jelenteni. De ha a kis méret miatt görgetnie kellene, nem tudja nagyítani a képernyőjét.

Természetesen bizonyos esetekben indokolt lehet a rögzített oldalszélesség, de ez véleményem szerint túl sokszor csak azért fix, hogy könnyebben megvalósítható legyen, illetve a webhely megjelenése ezt „követeli meg”. Itt még egy indokot szeretnék említeni, ami miatt szerintem ez legtöbbször nem célravezető. Jó néhány oldallal találkoztam, ahol a precízen belőtt oldalkialakítás teljesen szétesett, ahogy a nehezen olvasható betűméretet nagyobbra állítottam.

A Minta 70%-a rögzített szélességben jelenik meg. A fix szélességű oldalak nagy része 800x600-as képernyőfelbontásra tervez. Nézzünk egy diagramot a pontos adatokról (a teljes hosszúságú vonalak az alkalmazkodó felépítésű oldalakat jelentik):

Hosszú oldalak

A weben olvasó nem tolerálja a hosszú oldalakat, ennek ellenére az áltagos oldalmagasság (1024×768–as felbontáson és Mozilla 1.7-en mérve) 1555 képpont. Az olvasók többnyire nem olvasnak végig egy ilyen hosszú oldalt.

A teljesség kedvéért megjegyzem, hogy egy adott oldalméret mást-mást jelent különböző célú oldalaknál, pl. egy olyan tartalomjegyzék vagy fórum jellegű oldalnál, ahol az oldal tetején jelennek meg a legújabb információk, ennek a méretnek nem feltétlenül van hátránya. Ennek érdekében az egyes oldalakat témák szerint lenne érdemes kategorizálni, és így pontosítani az itteni eredményeket. Talán még annyit a számok érvényességéről, hogy a honlapoknál a kezdőlapot vizsgáltam, ahol fórumok egyáltalán nem szoktat előfordulni, a tartalomjegyzékek pedig általában csak az időben utolsó néhány információt jelenítik meg.

Rögzített méretű szöveg

A felhasználó sokféle környezetben olvashatja egy oldal tartalmát, és nem feltétlen felel meg számára az a betűméret, amelyet a fejlesztő határozott meg, hiszen a fejlesztő monitora, szeme érzékenysége, ízlése nem feltétlen fog megegyezni a látogatókéval. A böngészők adnak ugyan lehetőséget arra, hogy az oldalt kicsinyítve-nagyítva jelenítsük meg, de ha szövegeket (menüpontokat, címeket) képpel ábrázolunk, akkor ez a szabadság elveszett, illetve az Internet Explorer a rögzített betűmérettel megadott szövegek átméretezéséres sem képes.

A megoldás az, hogy lehetőleg ne képpontban megadott méretű, hanem relatív mértékeket adjunk meg a szövegek esetén. Másrészt a szöveges információt (a logó kivételével) lehetőleg sose képpel jelenítsünk meg. A CSS nagyon jó lehetőségeket nyújt arra, hogy kép-szerű feliratokat szövegesen valósítsunk meg. Nézzünk erre is példát az ilovejackdaniels.com webhelyről:

Eredeti beállításokkal vizsgálva nem is könnyű felismerni, hogy képpel, vagy szöveggel vannak-e megvalósítva a menüpontok. Firefox alatt két fokozattal nagyobb betűméreten megfigyelhető, hogy csak a jobboldali címek vannak képpel megvalósítva, az oldal többi részén minden szöveg mérete megváltozott. Ami ennek az oldalnak az egyik szépsége: a középső piros sor kivételével az oldalkialakítás ugyanúgy élvezhető, nem esett szét a betűméret változatásától.

A Minta 68%-ában a tartalom, és 88%-ában a címek nem voltak átméretezhetőek Internet Explorerrel. A Mozilla és Firefox böngészők – épp a felhasználó érdekében – az ilyen szövegeket is átméretezik.

Keretek

A keretek csábítanak arra, hogy a reklámcsíkot vagy a menüsort az oldal valamelyik szélén rögzített pozícióban tartsuk. Van azonban jó néhány probléma ezzel:

1. A menüt tartalmazó keret görgetősávját ki szokás kapcsolni esztétikai okokból. Ha egy adott méreten ez a szöveg kilóg a neki szánt helyből, nem lehet begörgetni a kilógó részt - illetve csak különböző, nem széles körben ismert trükkökkel.
   
2. A webcím nem ír le egy állapotot, nem tud leírni kereteket, így nem lehet egyszerűen címezni egy oldalt. Ez például linkeknél vagy könyvjelzőknél okoz problémát.
   
3. Nem lehet tudni a képernyőfelbontást, így lehet, hogy egy kézi számítógépen vagy mobilon csak egy rögzített méretűre tervezett keret részlete látszik, a tényleges tartalomból semmi, vagy szinte semmi.
   
4. Keretes oldalak kinyomtatása is nagyon problémás.

Megjegyzendő, hogy CSS segítségével az adott hátrányok nélkül is el lehet érni ilyen rögzített formázásokat. Nézzünk egy példát elrettentésül. A slaveland.hu oldal baloldalt a logó miatt, felül pedig a menü miatt keretet használ. Átlagos felbontás esetén nincs is gond:

350 képpont szélességnél az oldal teljesen használhatatlan: a bal és felső keret a felület háromnegyedét elfoglalja, a maradék negyed területen pedig még a görgetősávok is megjelentek:

A Minta oldalak negyede használ kereteket, bár a nagy portálok közül egy sem.

Következtetések

A vizsgált minta alapján kimutatható, hogy a mai magyar weboldalak fejlesztői alapvető ergonómiai szempontokat is mellőznek. Látszik, hogy a probléma szemléletbeli, amin átfogó „felvilágosító” munkával lehet csak változtatni. A mai magyar helyzetet tekintve szélmalomharcnak tűnhet az ergonómikus web kialakítás hirdetése, de vannak, akik komolyan felvállalják ezt a küzdelmet. Én is ezek közé tartozom.

Irodalomjegyzék

1. Jakob Nielsen: Web-design Typotex Elektronikus Kiadó, 2002 (második kiadás)
   
2. HTMLInfo v2.0 – online agytáp webmestereknek és műkedvelőknek
   http://htmlinfo.polyhistor.hu
   
3. Sindelyes András:Webdesign alapok III.
   Használhatóság = le a képekkel!
   http://www.prszichologia.hu/cikk/cikk.phtml?id=40
   
4. Web Style Guide
   http://www.webstyleguide.com
   
5. George Murray, Tania Costanzo:
   Usability and the Web: An Overview
   http://www.collectionscanada.ca/9/1/p1-260-e.html
   
6. Constance J. Peterson:
   Writing for a Web Audience
   http://www.smartisans.com/articles/web_writing.aspx
   
7. Carole Goble:
   The Semantic Web: an evolution for a revolution
   http://www.elsevier.com/locale/comnet
   
8. Yiyu Yao:
   Web Intelligence: exploring structures, semantics, and knowledge of the Web
   http://www.elsevier.com/locale/knosys
   
9. World Wide Web Consortium (W3C)
   http://www.w3.org
   
10. W3C Magyar Iroda
    http://w3c.hu

Melléklet