2. Lecke: A tervezés előtti lépések és a weboldalakkal
2.2. Tananyag
2.2.2. A weboldalakkal szemben állított követelmények
Ahhoz, hogy a világháló szörfösei számára valóban vonzó és jól használha-tó „kikötőket” (webhelyeket) készíthessünk, tisztában kell lennünk a webolda-lakkal szemben támasztott elvárásaikkal. A weboldalakat nem önmagunk vagy a megrendelő örömére kell készítenünk, hanem az odalátogatók számára. Ha a felhasználó elégedett az oldalunkkal, akkor többször látogat el rá és több időt fog eltölteni a felületünkön. „Munkánk sikerét az oldalunkra látogatók elége-dettségének mértéke határozza meg.”2
3. ábra: A 21. század szörfösei számára a gyors haladás és a hatékony böngészés a cél
Egy weblaptervezőnek tudnia kell azt, hogy milyen alapvető követelmé-nyeknek kell megfelelnie a weboldalaknak. A weboldalakkal szemben támasz-tott alapkövetelmények a következők:
13. értékes információtartalom;
14. gyors és könnyű információszerzés;
15. jól megfogalmazott szövegek (helyes nyelvhasználat);
16. olvashatóság;
17. válogatott, szemléletes médiaelemek;
18. a site tartalmi áttekinthetősége
2 NIELSEN,Jakob: Web-design. Typotex Kft. Elektronikus kiadó, Budapest, 2002.
19. átlátható és logikus oldalelrendezések;
20. logikus sitestruktúra;
21. egyértelmű navigáció;
22. könnyen kezelhető, felhasználóbarát felület;
23. vonzó és igényes megjelenés (harmonikus színvilág és elrendezés);
24. könnyen bővíthető és módosítható legyen;
25. különböző böngészőkben és felbontásban egyaránt jól jelenjen meg;
26. különböző eszközökön jól jelenjen meg.
27.
A tizennégy elemből álló lista minden egyes pontja a használhatóságot nö-veli. Ezeknek a pontoknak betartása a minimum követelmény ahhoz, hogy va-lóban használható weboldalunk legyen.
1. Értékes információtartalom
A weboldal tartalmában valami fontosat, újat közöljön, ami a többség szá-mára érdekes és figyelemfelkeltő. Érdemes olyan tartalmakat és szolgáltatáso-kat helyezni az oldalra, melyek más oldalon nem elérhetők. A közölt tartalom tartsa fent a látogatók érdeklődését. Szövegek esetében tömören, objektíven fogalmazzunk. Inkább kevesebb, de értékes legyen weboldalaink tartalma.
2. Gyors és könnyű információszerzés
A világhálót böngészők többsége elsősorban információszerzés céljából töl-tik idejüket a weben. Számukra a keresett információ gyors és hatékony meg-szerzése az elsődleges cél. Ennek érdekében jó, ha a lényegi és értékesnek vélt információkat kiemelten jelenítjük meg. Előnyös, ha keresőfunkcióval, belső keresőmotorral3 látjuk el a site-ot. Érdemes odafigyelni az oldalak letöltési ide-jére és az oldalakon végzett tevékenységek válaszideide-jére. A letöltési időt egy-részt a funkcionális részek okos technikai megvalósításával, másegy-részt a média-elemek körültekintő kiválasztásával csökkenthetjük. Kerüljük például a csillogó-villogó, de nehézkesen letölthető, nagyméretű animációk elhelyezését az olda-lainkon, ezekre a legtöbb esetben nincs is szükség.
3. Jól megfogalmazott szöveg (helyes nyelvhasználat)
Ügyeljünk arra, hogy a weben megjelenített szövegeinket tényszerűen kö-zöljük, tömören és világosan fogalmazzuk meg. Tudatosan építsük fel mondan-dóinkat. Mindig a legfontosabb információval és egy tömör, átfogó
3 A Wikipédia keresőmotor c. szócikke: http://hu.wikipedia.org/wiki/Keres%C5%91motor, 2012.
lóval kezdjünk, mely tartalmazza a lényeget, aztán fokozatosan fejtsük ki a rész-leteket, majd végül térjünk rá a háttérinformációra és csak legutoljára ajánljunk a témához kapcsolódó további forrásokat4. A felhasználók türelmetlenek és gyorsan információhoz szeretnének jutni. Elégítsük ki kíváncsiságukat, hadd tudják meg mihamarabb a lényeget, s ha számukra érdekes a téma: tovább olvashatnak. A kutatások szerint a legtöbben csak a cikkek elejét olvassák el.
4. Olvashatóság
4. ábra: A Verdana betűtípus5
Ahhoz, hogy a felhasználók könnyen el tudják olvasni az elektronikusan megjelenő szöveget, igen körültekintően kell bánni a betűtípusok, a betűmére-tek, a betűszínek és a betűk háttérszínének illetve hátterének kiválasztásával. A szövegek háttérszínét igyekezzünk úgy megválasztani, hogy az jól elkülönüljön a szöveg színétől. Sötét háttérre világos, míg világos háttérre sötét betűszínt vá-lasszunk. Nagyon éles kontrasztokat viszont nem érdemes használni, ugyanis az fárasztja a szemet. Például fehér háttérre jobb sötétszürkével írni, mint feketé-vel. Fehér karaktereknél pedig előnyösebb a sötétszürke háttérszín választása a fekete helyett. Fontos, hogy rövidebb sorokra tördeljük a szövegeket, elektro-nikus formában nehéz hosszú sorokat és egybefüggő hosszú szövegeket olvasni.
Ügyelnünk kell arra, hogy a gyengénlátók számára is olvasható és áttekinthető
4 NIELSEN, Jakob: Web-design. Typotex Kft. Elektronikus kiadó, Budapest, 2002. 111. p. A leírt szövegszerkezeti megoldás elnevezése: a csúcsára állított piramis elv.
5 Forrás a Wikipédia oldaláról: http://hu.wikipedia.org/wiki/Arial, 2012.
formában jelenítsük meg szövegeinket, legalábbis legyen lehetőségük egy köny-nyebben olvasható verzió választására, vagy a betűméretek nagyítására. A we-ben (és általában minden elektronikus eszközön) a talpatlan (un. Sans-serif) betűk olvashatók könnyebben a talpas (un. Serif) betűkkel szemben.
Például a Verdana egy jól olvasható, szép betűképpel rendelkező, s a webes felületeken gyakran használt talpatlan betűtípus.5. Válogatott, szemléletes médiaelemek
Fontos az, hogy weboldalainkra milyen és mennyi médiaelemet, azaz fotót, ábrát, rajzot, illusztrációt, videót vagy hangot helyezünk el. Nagyon fontos az, hogy ne alkalmazzunk túl sok képet, a nagy információtömegben könnyen el-vész a valódi tartalom és érték. Kövessük „a kevesebb több” elvet! Ha nem szükséges, ne erőltessük a 3D-s grafikákat oldalainkra, csak abban az esetben, ha használatuk erősen indokolt és profik vagyunk az előállításukban. A megjele-nítendő videók és animációk számával bánjunk csínján, merjük elhagyni őket, amennyiben a funkciójukat tekintve feleslegesek az oldalon. Továbbá tudni kell, hogy a legtöbb felhasználót nagyon zavarja a weboldalak olvasása közben a háttérzene.
Összegezve tehát mozgóképeket, animációkat és hangot csak erősen indo-kolt esetben, akkor is nagyon jó minőségben helyezzünk oldalainkra.
6. A site tartalmi áttekinthetősége
Fontos, hogy tartalmainkat szervezetten jelenítsük meg oldalunkon. Az a jó, ha már a menüpontok elolvasásakor körvonalazódik a felhasználóban az, hogy miről szól, mit tartalmaz a honlap egésze, és mely menüpontot érdemes választani a kívánt tartalomegység elérése érdekében. A felhasználó számára tehát egyértelműnek kell lennie annak, hogy bizonyos információk eléréséért vagy feladat elvégzéséhez melyik menüpontot kell választania.
Nagyobb tartalommennyiség esetén érdemes almenüpontokat is létrehoz-ni. A felhasználók azokat az oldalakat szeretik, melyek tartalmi struktúrája köny-nyen átlátható.
7. Átlátható és logikus oldalelrendezés
Szerencsés, ha a felhasználók a site-ra érkezve egy vizuálisan jól átlátható és jól strukturált oldal képével találkoznak először. Annak érdekében, hogy egy ilyen képet érjünk el, érdemes a képernyőt funkcionális részekre osztani. A ré-szekre osztás azt jelenti, hogy a képernyőterület egyes részeinek jól
körülhatá-rolható funkciók feleljenek meg, és azok lehetőleg a site összes oldalán ugyana-zon a helyen maradjanak. Például jól bevett szokás az, hogy a menürendszert, mint navigációs részt, a képernyő bal oldalán függőlegesen vagy az oldal tetején vízszintesen helyezzük el és mindig a képernyő jobb alsó területére (vagy annak egy részére) töltődnek be a menüpontok alatti tartalmak. Az ilyen, mindenki által megszokott, jól bevált sémákon (amennyiben nincs nyomós indokunk rá) nem érdemes változtatni.
Fontos, hogy ezeket a részeket valamilyen módon, grafikai elemek és trük-kök segítségével vizuálisan is jól elkülönítsük egymástól. Alkalmazzunk erre a célra térközöket, pontokat, vonalakat, boxokat, foltokat stb. Az egyes képer-nyőrészeken lévő tartalomblokkokat az adott feladatnak megfelelően, szükség szerint vizuálisan is tagolhatjuk. Helyes döntés, ha a már megszokott és jól be-vált elrendezések valamelyikét használjuk, így nem lesz ijesztő a felhasználónak a felület és gyorsabban „megtanulja” kezelni az oldalt.
8. Logikus site-struktúra
A logikus struktúra nem mindig látható első ránézésre egy oldalon. Ez tu-lajdonképpen a site egyes oldalainak a kapcsolódási-rendszere.
Hipertextről6 lévén szó, ez természetesen egy hálós szerkezet. Ha egy website-on már sokszor jártunk, szinte már a fejünkben van ez a szerkezet és tudjuk, hol járunk benne éppen. Ennek a hálós szerkezetnek a megjelenítésére szolgál az úgynevezett weblaptérkép, amelyet sok weblap alkalmaz szerkezeté-nek bemutatására (tulajdonképpen csak a menüszerkezet bemutatására hasz-nálják, hiszen az oldalak közötti összes kapcsolat ezeken nem láthatóak). A web-laptérkép az oldal navigációs rendszeréhez is hozzátesz. A webweb-laptérképek elemei a legtöbb oldalon kattinthatóak, azaz az elemekről közvetlenül a kere-sett oldalra lehet ugrani, de léteznek olyan webtérképek, amelyek csak ábrázol-ják a szerkezetet.
Véleményem szerint a tervezésnél az az elv helyes, mikor a weboldal struk-túrája a felhasználó által könnyen bejárható, azaz ugyanazon az útvonalon lehet visszajutni A pontba B pontból, amelyiken oda érkeztünk. Így átláthatóvá és átláthatóvá és követhetővé válik a szerkezet. Nem szerencsés a sok áthivatko-zás aloldalakról más aloldalakra, mert áttekinthetetlenné teszi a struktúrát.
Fontos megemlíteni, hogy a struktúra és a navigáció nagyon szorosan ösz-szefügg egymással. A site-struktúrában a navigáció segíti a tájékozódást.
6 Bővebben olvashat a Wikipédia oldalán: http://hu.wikipedia.org/wiki/Hypertext, 2012.
9. Egyértelmű navigáció
A weboldalon való tájékozódásnak egyértelműnek kell lennie, nem szabad hagyni, hogy a felhasználó „eltévedjen” az oldalon, és ezért frusztrálva érezze magát. Legyenek egyértelműek a továbbhaladáshoz és a visszalépéshez szüksé-ges útvonalak egyaránt. Mindig lássa a felhasználó, hogy éppen melyik menü-ponton belül tartózkodik, és szerencsés, ha láttatjuk a látogatókkal azt is, hogy a site szerkezetében jelenleg hol állnak: legjobb, ha megjelenítjük a bejárt útvo-nalat, azaz morzsanavigációt használunk.
A weboldalak navigációját illetően alapszabály és jól elterjedt gyakorlat is egyben az, hogy az oldal logójára klikkelve visszajutunk a kezdő oldalra, ezt már implicit megtanulták a felhasználók. Amennyiben a logóra klikkelés a nyitóol-dalra viszi a felhasználót, ügyeljünk arra, hogy ezt minden aloldalon megvalósít-suk. Továbbá helyezzünk el kivezető linkeket más, kapcsolódó oldalakra.
10. Könnyen kezelhető, felhasználóbarát felület
Azok a felhasználói felületek használhatóak, melyek kezelése egyértelmű és használata nem okoz frusztrációt a kezelőjében. Azt szeretik a felhasználók, ha a felület kezelésének elsajátítása nem kerül nagy erőfeszítésbe és könnye-dén támaszkodhatnak korábban szerzett ismereteikre. A felhasználók szeretik, ha általánosan elterjedt ikonokat találnak az oldalakon, hiszen többségüknek nincs ideje és kitartása kitapasztalni egy kreatív, de a többi site-tól nagyon elté-rő felépítésű oldal kezelését. A felhasználók zöme, ha egy oldal első ránézésre nehezen kezelhetőnek vagy használhatatlannak tűnik, minél hamarabb elhagyja azt és továbbszörfözik7.
11. Vonzó és igényes megjelenés
Egy „kikötőbe” (weboldalra) érkezéskor természetesen meghatározó a webhely külső megjelenése, arculata. Az első benyomás mérvadó. Ennek érde-kében nagy gondot kell fordítani a színek kiválasztására és helyes használatuk-ra. Figyelembe kell venni az elrendezésre vonatkozó szabályokat, elveket és a jól elterjedt gyakorlatot. Egyaránt ügyelni kell a grafikai elemek pontos, igényes megszerkesztésére és az oldalakon megjelenő minőségi fotók, ábrák, rajzok kiválasztására. A megjelenítendő képeken – még a weboldalra helyezés előtt – végezzük el a szükséges előmunkálatokat, mint például retusálás, képkivágás, kontraszt-, fényerő- és színegyensúly beállítása. Az oldalhoz tartozó logót és a böngészőablakban megjelenő ún. favicont nagy gonddal tervezzük meg, hiszen ezek folyamatosan képviselik oldalunkat. Ne feledjük, a felhasználók nem
7 NIELSEN,Jakob: Web-design. Typotex Kft. Elektronikus kiadó, Budapest, 2002.
tik a felesleges, csillogó-villogó és mozgó elemekkel teletűzdelt web-felületeket, helyette sokkal inkább az egyszerű, egységes, koherens és harmonikus kinéze-tet részesítik előnyben.
12. Könnyen bővíthető és módosítható legyen
A könnyed bővíthetőség és a tartalom könnyű módosíthatósága a weblap-fejlesztő és tervező érdeke. Ugyanis a megrendelő bármikor kitalálhatja, hogy egy újabb menüpont vagy funkció beépítésére van szükség, vagy például meg-változtatná a menüpontok neveit és színeit, stb. Ha a tervező, a HTML szerkesz-tő és a programozó egyaránt elővigyázatos és számol ezekkel az esheszerkesz-tőségek- eshetőségek-kel, akkor úgy tervezik és készítik el az oldalak dizájnját, stílusfájljait és kódját, hogy azok könnyen módosíthatóak legyenek. Továbbá fontos, hogy a dizájn-elemek nyers fájljait illetve az animációk, 3D grafikák forrásfájljait archiváljuk, amellyel a bővíthetőség és módosíthatóság első lépése megtehető. A ma elter-jedt tartalomkezelő-rendszerek nagy segítséget nyújtanak a weblapfejlesztők-nek ezen a téren, ugyanis segítségükkel nagyon könnyen módosíthatóak és bővíthetőek az oldalak.
13. Különböző böngészőben és felbontásban egyaránt jól jelenjen meg az oldal
Minden felhasználó más-más böngészőt és felbontást használ a webolda-lak megtekintésére. Az eltérő böngészők egyes kódokat eltérő módon értel-mezhetnek és a szabványokat sem egyformán tartják be, ezért sajnos még ma is van esély arra, hogy weboldalaink különböző böngészőkben különbözőképpen jelennek meg. Ennek elkerülése érdekében érdemes oldalunkat még a nyilvá-nosságra hozatal előtt különböző, az adott időszaknak megfelelően a leggyak-rabban használt böngészőkben tesztelni. Ezek ma ábécésorrendben a követke-zők: Apple Safari, Internet Explorer, Google Chrome, Mozilla Firefox, Opera.
5. ábra: Különböző böngészők ikonjai
A változó képernyőfelbontás problémája kicsit összetettebb ennél. Sokan fixszélességű oldalakat terveznek, mások pedig a képernyőfelbontáshoz és ab-lakmérethez alkalmazkodó szélességű oldalakat. Mindkét elvnek megvannak az előnyei és a hátrányai. A fixszélességű tervezésnél nagy előny az, hogy az oldal
minden felbontásban ugyanúgy néz ki és a felhasználót sem érheti meglepetés, hogy például „szétcsúszik” a dizájn, hiszen a karakterek és grafikai elemek a teljes kerettel együtt nagyíthatóak, illetve kicsinyíthetőek a mai böngészőknek köszönhetően. A fixszélességű megoldással viszont az oldal két oldalán (vagy jobb oldalán) valószínűleg kitöltetlen részek lesznek; vagy rosszabb esetben – kis felbontás esetén – a teljes oldal megtekintéséhez vízszintesen is gördíteni kell.
A másik megoldást, az alkalmazkodó szélességűt, az éppen aktuális felbon-tástól függő maximális ablakméret kihasználása érdekében szokták alkalmazni, ebben az esetében az oldal más-más felbontásban más-más képet mutat, és sajnos hosszúra nyúlhatnak az olvasandó sorok.
14. Különböző eszközökön egyaránt jól jelenjen meg
A felhasználók nagy része ma már nem az asztali számítógépekhez tartozó, nagyméretű monitorokon, hanem az ezeknél jóval kisebb kijelzőkkel rendelkező mobil eszközökön is böngésznek. Azóta, hogy ilyen fontossá vált a számítógé-pek hordozhatósága, sokan kisképernyős laptopokat, különféle tableteket (je-lenleg a legelterjedtebb méretek: 5”, 7”, 9.7”, 10.1”) és egyéb, kisméretű eszkö-zöket használnak böngészésre. Mivel egyre többen nézegetnek weboldalakat ilyen kisebb méretű kijelzőkön, nem érdemes a weblaptervezőknek – egyelőre
− az 1024x768-as felbontásnál nagyobb felbontásra optimalizálni a weblapok dizájnját.
6. ábra: Nexus7, iPad és iPhone láthatóak a képen Sokan tehát mobiltelefonjukkal (iPhone-nal, vagy más, például Android rendszert futtató telefonokkal) szörföznek a világhálón. Számos weboldalnak és
szolgáltatásnak ingyenesen letölthetőek az adott operációs rendszerhez tarto-zó, mobiltelefonokra készített változatai alkalmazás formájában (például facebook, gmail). Vannak weboldalak, amelyeknél az URL-címet beírva a mobil-telefonok böngészőjébe automatikusan a mobilmobil-telefonokra való változat töltő-dik le úgy, hogy a böngészősávba írt URL-cím automatikusan módosul azzal, hogy elé kerül az „m” karakter, jelezve ezzel, hogy a mobiltelefonra adaptált változat fut. A telefonokra készített alkalmazások megjelenítése kicsit eltér a böngészőben megjelenített formáktól. Az alkalmazások felülete és használatuk módja alkalmazkodik a telefonok kicsi méretéhez. Kicsit másabb a felépítése, a működése, mint a böngészőben futtatott
Az alábbiakban nézzünk példát arra, hogy hogyan jelenik meg a Facebook oldala egy hagyományos böngészőben, egy telefonnak a böngészőjében és alkalmazásként a telefonon. Azért jó, ha ezt a weboldalt vizsgáljuk, mert ennek az oldalnak elég nagy a felhasz-nálói köre ahhoz, hogy érdemes legyen jól megírni a mobilra szánt változatokat is, emiatt korszerű példákat láthatunk.
A hagyományos weboldalon a Facebook menüpontok, a képen lát-ható módon jelennek meg. Egyértelműen látszik ebből, hogy ha az egész weboldalt meg szeretnénk jeleníteni a telefonon, akkor olyan kicsik lennének a menüpontok, hogy ujjunkkal nem is tudnánk kivá-lasztani őket. A kiválasztáshoz fel kell nagyítani a képet, ekkor pe-dig folyamatosan görgetni kell a menüpontok és tartalmak között, hiszen nem lenne a kicsi területen a menü és a tartalom is egyszer-re látható.7. ábra: A Facebook weboldala
8. ábra: A Facebook megjelenése a telefon böngészőjén ke-resztül (a telefon böngészőjébe beírva, hogy
www.facebook.com, a betöltés folyamán automatikusan http://m.facebook.com-ra változik az URL cím)
9. ábra: A Facebook megjelenése alkalmazásként
Látható, hogy a mobilon történő használat esetében akár a mobil böngészőjében, akár alkalmazásként nézzük meg az oldalt egy adott pontra klikkelve jeleníthetőek meg a menüpontok, amelyek kitöltik a teljes kijelzőt annak érdekében, hogy egyrészt jól olvasha-tóak legyenek a szövegek, másrészt pedig az ujjunkkal el tudjuk ta-lálni a kisméretű érintés-érzékeny képernyőn a menüpontokat. A 8.ábra első képén látható Föld ikonnal a mobil böngészője, a 9. ábra első elemének Facebook ikonjával pedig az alkalmazás érhető el.
Láthatóan nem sokban különbözik a kettő megjelenítés egymástól.
A mobilon böngészhető megvalósítás használata − az adott telefon esetében, tapasztalatom alapján − jóval stabilabb és ezen a válto-zaton láthatóan több menüpont jelenik meg, tehát a közösségi ol-dalt emiatt érdemesebb a böngészőn keresztül használni (az adott telefontípus esetében). Természetesen ez bármikor változhat attól függően, hogy a fejlesztők melyik változaton javítanak.
Napjainkban egyre gyakrabban hallani egy új fejlesztési trendről, a reszponzív (responsive) weboldalakról. A kifejezés azt jelenti, hogy a webolda-lakat a megjelenítő eszköz méretéhez alkalmazkodóan „rugalmas” dizájnnal készítik el, így mindig a használt eszköz (asztali számítógép, notebook, tablet, mobiltelefon) méretének megfelelően jelenik meg a weboldal szerkezete és elrendezése.
A következő fejezetekben az említett pontokra részletesebben is kitérünk, számos saját, és mások által készített munkát sorakoztatva fel, amely példák jól szemléltetik a tervezési és szerkesztési irányelveket.