• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Oldaltervezés
 

Oldaltervezés

on

  • 579 views

 

Statistics

Views

Total Views
579
Views on SlideShare
579
Embed Views
0

Actions

Likes
0
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Oldaltervezés Oldaltervezés Presentation Transcript

    • 1
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    •  É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
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    • 18
    •  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
    •  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
    • 22
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    • 31
    •  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
    •  „ - 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
    •  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
    •  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
    •  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