7. Lecke: A weboldalak megjelenítése, az oldaltervezés
7.2.8. Ne legyenek túlságosan nagyméretű „üres” képek
képek az oldalon
Az „üres képek” kapcsán Edward Trufte alkotott egy elméletet a képek in-formációértékének értelmezésére.
„Edward Tufte A mennyiségi információ vizuális megjelenítése című, 1983-ban megjelent könyvében már kifejezte nemtetszését a giccses és túldíszített üzleti illusztrációkkal szemben, melyek sok helyet foglalnak el, adatot viszont alig szolgáltatnak. Trufte éppen ezért az adatokat alátámasztó illusztrációk le-írására bevezette az „adatpaca” fogalmát, és megkülönböztette őket a puszta dekorációtól, amely szerinte csak „képszemét”.”70
A jó minőségű, nagyméretű képek igen erős hangulatkeltő elemek, velük könnyedén befolyásolhatóak az emberek érzelmei (így azokat alkalmazva az oldalakon erősíteni lehet a felhasználói élményt, és fokozni a vásárlói kedvet).
Két probléma van azonban velük: az egyik az, hogy nagy területet foglalnak el és így a lényegi információknak nem sok hely marad, a másik pedig az, hogy
70 LEISZTER,Attila: Webergonómia - Jakob Nielesen nyomán. Typotex Kft. Elektronikus Kiadó, Bp., 2011.
lassabban töltődik le miattuk az oldal. Mindez sokaknál még ma is számít, azok-nál, akiknél alacsony az átviteli sebesség, vagy letöltés-mennyiség alapján van a számlázás. Az alábbiakban néhány javaslat olvasható arról, hogy a nagyméretű képek használata helyett milyen jó és trükkös megoldásokat lehet alkalmazni.
1. Dobozok, hátterek és egybefüggő felületek használata.
A képeket ne helyezzük el túlságosan nagy méretben az oldalakon, megteszi az is, ha kisebb méretű képet egy homogén hátterű, nagyobb dobozban (angolul boxban) helyezünk el. Az is jó megoldás, ha a kép folytatásaként egyik irányba helyezünk el egy hozzá csatlakozó boxot, melynek homogén színű vagy finom színátmenetes a háttere. Mindket-tő megoldással vizuálisan hasonló hatás érheMindket-tő el, mintha egy nagymé-retű képet jelenítenénk meg.
60. ábra: Jó megoldások a képek vizuális méretnövelésére71
Két jó példa is látható a telenor.hu oldalán. A bal felső képhez tar-tozó jobb oldali területnövelés és a jobb oldalon alul lévő, csoma-got tartó hölgy képének homogén háttérre való helyezése. Ezekre a homogén területekre szövegeket is illeszthetünk.2. A képek üres területeire rakjunk feliratokat és szövegrészeket.
Helyezzünk el a képeken feliratokat, szövegeket és linkeket, ezzel máris megoldott az oldal helykihasználása a nagy képek alkalmazása esetében is. Az alábbi T-com oldalon jó példák láthatóak erre.
71 A Telenor weboldalának URL címe: http://www.telenor.hu/, 2012.
61. ábra: Feliratok elhelyezése az oldalon lévő képek területein72
A szövegeken felül, a képen még linkek is találhatóak. Ügyes meg-oldás az, hogy a kép széle átmosódik a feliratok alá és folyamato-san halványodik a képernyő széle felé, ez kelt olyan hatást, mintha a szöveg és a kép együtt egyetlen nagy kép lenne.3. A 60. ábra két képén éltek a képfeliratok lehetőségével is a képnagyob-bítás mellett.
4. Közeli képeket helyezzünk el az oldalakon.
Így a képek méretei is nagyobbnak tűnnek. Érdemes tudni, hogy a pre-mier plánban kivágott, emberi arcokat ábrázoló képek igen hatékony érzelemkiváltó elemek. Pszichológiai kísérletek is bizonyítják, hogy az emberi szem automatikusan az emberi érzelmeket mutató arcokra rea-gálnak leginkább. Közeli képekkel a hatás fokozható.
72 A T-com weboldala: http://www.t-home.hu/fooldal, 2012.
62. ábra: Példa a nagyméretű közeli képre, amelyen szöveg is található.73
63. ábra: Példa a nagyméretű közeli képre, rajta még szöveg is található.74
73 Az Apple iPod aloldalának nyitóképe: http://www.apple.com/ipodtouch/, 2012
74 Az Apple iPod aloldalának nyitóképe: http://www.apple.com/ipodtouch/, 2012
5. Használjuk ki a képernyőterületek újrahasználhatóságát.
Egy adott területrészre lapozzunk be több képet, vagy több összetarto-zó szöveg és kép együttesét, ezekre klikkelve s-más weboldalra juthat közvetlenül a felhasználó.
A 62. és 63. ábrák képei ilyenek, az Apple az iPod touch-ot reklá-mozza így, a fantasztikus fotók folyamatosan, pár másodperces vá-rakozással váltják egymást. Ezen felül a felhasználók manuálisan, az azúrkék pöttyökre klikkelve is válthatnak az egyes oldalak kö-zött.6. Ma Magyarországon is számos lapon alkalmazzák ezt a technikát. Pél-dául a noklapja.hu-n a kiemelt cikkeket jelenítik meg a leírt formában, az alexandra.hu és libri.hu oldalakon pedig a különböző akciók lapozha-tóak az említett módon egy képernyőterületen belül. Az akciók megje-lenítésére vagy a legfontosabb hírek fő helyen megjelenített váltakozta-tására tehát ez kiváló eszköz!
64. ábra: A nők lapja teljes weboldalképe75
75 A nők lapja weboldala: http://www.nlcafe.hu/, 2012
65. ábra: A fenti terület cserélődő tartalmai76
Az 64-es és 65-ös ábrákon lévő megoldások a belapozásos techni-kával történnek, ez esetben azonban nem váltakoznak a képek au-tomatikusan, hanem mi választjuk ki azt, hogy éppen melyik kép és hozzá tartozó szöveg lapozódjon be a kívánt területre. Ezt a képek alatt lévő címekre, azaz a bordó, pink és mustár színű téglalapokra húzva az egeret váltakoztathatóak. Funkcióját tekintve ez a megol-dás a kiemelt cikkek gyors elérését és az átláthatóságot segíti.7. Csak az első oldalra helyezzünk nagyméretű képet.
8. Szokás a weboldalak tetején a fejlécben egy nagyobb méretű képet el-helyezni fő arculati és hangulati elemként. Ez kétség kívül elengedhe-tetlen összetevője az oldalnak, viszont amennyiben túlzottan magas:
nagyon rossz megoldást jelent. Mivel sok helyet foglal el a képernyőn – egy kisebb méretű tableten vagy telefonon nézve a kép elfoglalhatja akár a képernyő felét – így az információk elérése érdekében görgetés-sel kell kezdjük a weblapon való nézelődést. Ez azért nagyon rossz megoldás, mert ahányszor új menüpontot választunk ki, annyiszor be-ugrik a képernyő tetejére a nagyméretű kép, és a hasznos információk elolvasásához görgetnünk kell.
9. Csakis olyan indokolt esetben tehetünk nagyméretű képet egy weboldal tetejére, ha a kép elengedhetetlenül fontos információkat is tartalmaz vagy például fontos reklámcélokat tölt be. Ez esetben is ügyeljünk arra, hogy csak a legelső oldalon jelenjen meg, a többi oldalon ne, ugyanis elég bosszantó volna, ha minden oldal ezzel indulna.
76 Egymás mellé fűzött részlet A nők lapja weboldal ugyanazon területének változó tartalmáról:
http://www.nlcafe.hu/, 2012.
66. ábra: Oktatói weboldal az Eszterházy Károly Főiskolán Sokáig a reklámcsíkokat77 a fejléc felett helyezték el, majd szokássá vált ezeket beépíteni a fejléc arculatába, ezzel csökkentve a weboldalak felső fix sávjának a magasságát. Mára a reklámbannerek főként a weboldalak jobb oldali sávjában helyezkednek el, ez amiatt is szerencsés, mert a fejléc a bannerrel együttesen gyakran eklektikus képet mutatott., Csakis sematikus és leegyszerű-sített fejléceket lehetett gyártani, hogy azok minél több féle reklámarculathoz illeszkedjenek vizuálisan.
67. ábra: Rossz példa arra, ha a képernyő tetején helyezkednek el a nagyméretű képek.
77 szaknyelven bannereket