8. Lecke: Képernyőtervezés és navigáció
8.2.5. Többféle elrendezés egy site-hoz
Fontos az, hogy a képernyő ugyanazon részén maradjanak az elemek min-den oldalon, ahová eredeti döntésünk szerint terveztük. Tehát a képernyőterü-let részeinek a funkciói ne váltakozzanak, hanem: minden oldalon maradjon ugyanazon a helyen a menü, a logó; mindig ugyanarra a területre lapozódjanak be az oldalanként változó tartalmak és ugyanott legyenek a reklámok stb. A képernyőn az egyes területek funkcióinak állandósága egy weboldalon nagyon alapvető elv, annyira, hogy talán erről beszélni sem szokás79.
Mégis vannak esetek, mikor egyes aloldalaknak – általában a tartalmuk jel-lege miatt – muszáj eltérő felépítésűnek lenniük a hangoztatott szabály ellené-re is egy adott weboldalon belül. Például egy nyitóoldal ellené-rendszerint több infor-mációt tartalmaz, mint a többi aloldal, emiatt az elrendezése eltérhet a többi aloldalétól, és a középső tartalmi rész szélessége is eltérhet a többiétől. Az alábbiakban nézzünk ezekre példát.
1. Nyitóoldal elrendezése
Például a főoldalnak (nyitó oldal, kezdőlap, címlap) nagy valószínűséggel más lesz a felépítése, mint néhány aloldalnak. hiszen a főoldalon jelenik meg a legtöbb információ. A főoldalnak képviselnie kell az egész site tartalmát. Sok esetben (például a középpontos elrendezéseknél) megoldható az, hogy a főol-dal kerete állandó marad, és minden alolfőol-dalon a közbülső területre töltődnek be a változó tartalmak, ez kisebb egyszerűbb felépítésű site-ok esetében triviá-lis megoldás. De a sok tartalommal bíró, bonyolultabb portáloknál nem mindig férnek el a tartalmak a közbülső részen, emiatt például a képek nézegetésére, a teljes újságcikkek megjelenítésére vagy a formok kitöltésére külön-külön, más és más képernyő-elrendezést érdemes tervezni. Lássunk ezekre a különböző elrendezésekre drótvázrajz példákat az alábbiakban.
79 Amennyiben ezeknek a helyén mégis változtatni szeretnénk, nagyon erős indokunknak kell lennie: például hatáskeltés céljával változtathatunk, művészi oldalak esetében. Érdekes lehet például egy művész portfóliójában, hogy a menüpontok minden aloldalon máshol jelennek meg – ezzel például elég egyedivé válna az oldal. De egy információs portálon egyértelmű, hogy ilyen megoldás miért nem engedhető meg.
71. ábra: Drótváz példa nyitóoldal elrendezésre 2. Képnézegető oldal elrendezése
Ezt az elrendezést használjuk arra az esetre, amikor fotókat szeretnénk na-gyobb méretben megjeleníteni és galériába szervezve lapozási lehetőséget biz-tosítani az egyes fotók között. Mindez vízszintesen akkora helyet foglal el, hogy nem fér bele a főoldal keretébe. Szokás, de nem a legszerencsésebb megoldás az, hogy erre a célra új böngészőablak nyílik automatikusan, ez logikailag ugya-nis nagyon szétesővé teszi a weboldalt és mobiltelefonokon igen nehézkes több böngészőablak egyidejű kezelése. A megoldás tehát az, hogy ugyanabban az ablakban egy másik elrendezésű oldalt alakítunk ki a képnézegetésre, természe-tesen olyat, ahol nem korlátoz minket a weboldal kerete, azaz a keret két oldal-só része ebben az elrendezésben meg sem jelenik.
72. ábra: Drótváz példa képnézegető oldal elrendezésre 3. Belső aloldalak elrendezése
Akkor van szükség külön oldalelrendezésre, ha például nem szeretnénk a főoldal keretébe belapozni a tartalmakat. Például egy on-line újságnál általában nem a keretbe beágyazva jelennek meg a cikkek teljes szövege, hanem a főol-dalon lévő jobb és baloldali elemek eltűnnek, ezzel segítik a szörfözőt valóban a cikk szövegére koncentrálni. Legtöbb esetben egy teljes cikk elolvasásakor a cikk aloldaláról a reklámok is eltűnnek, olykor a korábbiak helyére más reklá-mok lapozódnak be80. Lássunk példát egy aloldal megjelenítésére az alábbiak-ban! Látható, hogy két oldalt a zsúfolt sávok eltűntek.
80 Ennek olyan egyszerű az oka, hogy az aloldalon lévő reklámok olcsóbbak, a főoldalon megje-lenteknél. Természetesen a legdrágábbak azok, amelyek a főoldalon és az aloldalakon egyaránt megjelennek.
73. ábra: Drótvázrajz példa aloldal elrendezésére Mindig fontos kérdés az, hogy egyes dobozok, kisalkalmazások megjelen-jenek-e az aloldalakon is, vagy sem.
Egyes weboldalakon a regisztrációs és belépési lehetőség csak a nyitó oldalon jelenik meg, de vannak olyan site-ok is, ahol minden egyes oldalon be lehet lépni. Ez utóbbira jó példa az Alexandra ma-gyar könyváruház oldala. A könyvek között nézelődni bármely láto-gatónak lehet, ahhoz nem kell belépés. Miért is lépnénk be az ol-dalra, ha például csak átfutjuk a havi akciós kínálatot? Viszont az a jó, hogy amint találunk olyan könyvet, amit meg szeretnénk ren-delni, bárhol is álljunk a site-on belül beléphetünk, hiszen minden oldalon van erre lehetőség. (Így nem kell visszaugrani a főoldalra, belépni, majd ismét megkeresni a kívánt könyvet.)74. ábra: Az Alexandra könyváruház minden egyes aloldalán be-léphet az olvasó81
4. Egyéb esetekben
Például, ha olyan site-ról van szó, amely köré közösség épül és a közösség tagjainak van profiloldaluk: egyértelmű, hogy annak az oldalnak más lesz az elrendezése, mint a többinek, hiszen helyet kell biztosítani a fotó, az adatok és a leírás tartalmaknak.
Ugyanúgy más elrendezés szükséges például, ha egy formot szeretnénk ki-töltetni a felhasználóval, vagy esetleg egy fórumoldalt szeretnénk létrehozni, ahol szövegrészek váltakoznak kicsi profil bélyegképekkel. De gondoljunk arra, hogy például a jobboldali sávban elhelyezkedő funkciókat vagy kisalkalmazáso-kat sok esetben meg lehet nyitni, megnyitáskor pedig valószínűleg olyan képer-nyőképet kapunk, ami nem a szokásos információfolyamot tartalmazza. Így arról is kell képernyőtervet készíteni, még akkor is, ha a kereten belül töltődik be. Képernyőterv helyett álljon itt egy szöveges példa az alábbiakban.
Gondoljunk egy könyvkereső mezőre, mint kisalkalmazásra, amivel egy katalógusban lehet keresni, tegyük fel, hogy található egy gomb. a keresőmező környékén, amelyen a „Részletes keresés” fel-irat látható. A felfel-iratra klikkelve egy olyan oldalhoz jutnunk ahol szerzőre, címre, évszámra és kulcsszóra egyaránt kereshetünk, azaz szöveges részeket és több beviteli mezőt tartalmazó oldal (form) tárul elénk. Mivel nagy valószínűséggel még nincs ehhez hasonló oldal a weboldalon ennek a képét külön meg kell tervezni.Minden, a többitől eltérő képernyőképet külön-külön meg kell tervezni és drótvázzal lerajzolni!
81 Az Alexanda könyvesbolt weboldala: http://www.alexandra.hu, 2012.