V Abonyi-Tóth Andor, ELTE IK MOT

Méret: px
Mutatás kezdődik a ... oldaltól:

Download "V20130320. Abonyi-Tóth Andor, ELTE IK MOT"

Átírás

1 1 V Abonyi-Tóth Andor, ELTE IK MOT

2 2 Néhány alapfogalom

3 Ergonómia Az ergonómia egyszerűen fogalmazva a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása. Ez a szó a görög ergos szóból származik, ami munkát jelent, és a nomos szóból, ennek jelentése törvény. Látszólag a munkakörnyezet minden tényezője az ergonómia tudományába tartozik: 1. Fizikai környezet - Hőmérséklet, Megvilágítás, Zaj, Berendezés, Személyes tér, Helyes testtartás, stb. 2. Munkaszervezés és feladatok 3. Pszichológiai és szociális környezet - munkaerő kereslet - személyes kapcsolatok - munkakapcsolatok - a dolgozó egyéni tulajdonságai (fizikai, pszichológiai) 3 Forrás:

4 Ergonómikus Tervezésben: A test és a lélek sajátosságait tudatosan figyelembe vevő. Kivitelezésben: A használó testét és lelkét nem károsító. 4 Forrás:

5 Ergonómikus tárgyak 5

6 6

7 Hasznos fogalmak Human factors (Emberi tényezők) Az ergonómia rokonértelmű szava. Accesibility (Elérhetőség) A felület azon tulajdonsága, ami meghatározza, hogy fogyatékkal élők vagy korlátozott képességekkel rendelkezők mennyire tudják használni az adott funkcionalitást User Experience (UX) (Felhasználói élmény) Mindazon tapasztalatok összessége, amit a felhasználó egy termék használata során szerez, kezdve a vásárlástól egész a kidobásig. Nemcsak a szoftverre korlátozódik, hanem a támogatásra, megvásárlására, a használattal járó életérzésre is. 7 Forrás:

8 Használhatóság a felhasználói felületek felöl megközelítve Jakob Nielsen szerint : A használhatóság egy olyan minőségi mutató, amely azt jellemzi, hogy a felhasználói felületeket mennyire egyszerűen lehet használni. (Nielsen, 2003) [4]. A használhatóság nem csak egy egyetlen, egydimenziós tulajdonsága a felhasználói felületnek. A használhatóságnak több összetevője van, amelyek hagyományosan a következő 5 használhatósági paraméterekkel vannak összefüggésben: megtanulhatóság, hatékonyság, megjegyezhetőség, hibák, elégedettség. [5] 10

9 Használhatósági faktorok 11 U S A B I L I T Y Megtanulhatóság (Learnability): Amikor a felhasználó először találkozik a felülettel, mennyire egyszerű számára az alapvető feladatok elvégzése? Hatékonyság (Efficiency): Ha a felhasználó már megismerkedett a felülettel, akkor milyen gyorsan tud különböző feladatokat megoldani? Megjegyezhetőség (Memorability): Amennyiben a felhasználó egy ideig nem használta a felületet, a korábban megszerzett tudását mennyire gyorsan tudja újra felidézni? Hibák (Errors): Hány hibát vét a felhasználó, milyen mértékűek ezek, és mennyire tudják a hibáikat könnyen javítani? Elégedettség (Satisfaction): Mennyire megfelelő, kényelmes a felület használata a felhasználó számára?

10 Fontos tudni Akármelyik modellt is használjuk, figyelembe kell vennünk, hogy az egyes használhatósági tényezők egymással összefüggésben állnak. Hiba arány csökkentés Hatékonyság Tanulhatóság Megjegyezhetőség A használhatóság mellett sok más minőségi jellemző is létezik. Pl. Utiliy (hasznosság) Ha egy funkció a felhasználó számára nem hasznos, akkor az egy jól használható, intuitív felület mellett sem lesz az, így önmagában az egyszerű használhatóság nem garancia a felhasználói elégedettségre. 12

11 13 A tervezés folyamata

12 UX tervezés 14

13 Mockup Az eszköz egy modellje, amit oktatási, demonstrációs, használhatósági elemzési, promóciós és egyéb célokra is felhasználható

14 Mockup, wireframe Nem működő prototípus Példa Mockup használatra a web-fejlesztésben Mock-up Arculatterv 16

15 Mivel készítsünk Mockupot? Számos alkalmazás megfelelő lehet, ezek között vannak ingyenes és fizetős megoldások is. Érdemes itt körülnézni: Személyes javaslat:

16 18 Vizsgálati módszerek

17 Vizsgálati módszerek Analitikus módszerek A felhasználók várható tevékenységének szimulálása Irányelv vizsgálat Heurisztikus módszerek Bejárások Empirikus módszerek Az alkalmazást, vagy annak működő prototípusát vizsgáljuk Megfigyelés Használhatósági teszt (pl. Papír prototípus) 19

18 Lássunk néhány módszert! 20

19 Papír prototípus A rendszer egy papíron megvalósított változata, amelyen a felhasználók egy reprezentatív csoportjával a valós életben is előforduló feladatok interaktív tesztelése történhet, a kísérletet vezető személy (facilitátor) működtetése által. 21

20 Szemmozgás vizsgálat 22

21 Szemmozgásvizsgálat (reprezentáció) Mozgás útvonal, időzés hossza Hőtérképes megjelenítés 23

22 24 A felhasználók viselkedése Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

23 Felhasználók viselkedése (1.) A tartalomra koncentrálnak Ha nem releváns, a lap további felépítésével sem törődnek Amikor az oldalra érnek, figyelmen kívül hagyják a navigációs sávokat és átfogó szerkezeti elemeket. Nem értik, hol tartózkodnak a website egészét tekintve Rendkívül célirányosak 25 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

24 Felhasználók viselkedése (2.) Fő stratégia a keresésre hagyatkozás Elkerülik a reklámokat, szlogeneket Ha az oldal irreveláns, hamar otthagyják Ha nem értenek valamit az oldalon, nem szánnak időt az elsajátításra 26 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

25 27 Felhasználói élmény

26 Felhasználói élmény Kéretlen ablakok / grafikák mellőzése A kéretlenül megjelenő felbukkanó (pop-up) ablakok frusztrálják a felhasználókat 28 Forrás:

27 Felhasználói élmény Feladatmegoldások sorrendje szabványos A site egészén belül az adott feladatokat ugyanolyan módszerrel kelljen megoldani Rossz példa: A dátum kiválasztása eltérő módon történik az egyes aloldalakon 29 Forrás:

28 Felhasználói élmény A számítógépben rejlő előnyös lehetőségek kihasználása Bízzuk a számítógépre azon feladatokat, amelyeket el tud végezni, hogy a felhasználónak csak azokra kelljen koncentrálnia, amelyeknél emberi beavatkozás szükséges. 30 Forrás:

29 Felhasználói élmény Adatok megjelenítése olyan formában, amelyet már nem kell konvertálni A felhasználói kör számára optimális formátumban kell az adatokat megjeleníteni. Ha az adott oldalt eltérő nemzetiségű felhasználók látogatják, több formátumot is használni kell. (pl. C, F) Idő megadása esetén az amerikai látogatók nem szeretik a 24:00-s megadást. 31 Forrás:

30 Felhasználói élmény Olyan formában adjuk az információt, amely a felhasználói szokásoknak megfelel Képernyőn / vagy nyomtatás után olvasná el a felhasználó az adott dokumentumot? A dokumentum mérete meghatározó Általában az 5 oldalnál méretesebb (vagy komplexebb, jegyzetelést kívánó) dokumentumokat már kinyomtatják a felhasználók A felhasználás módja is fontos Kutatással, prezentációval kapcsolatos információkat inkább nyomtatunk, a szórakoztató jellegű írásokat on-line olvassuk 32 Forrás:

31 Felhasználói élmény Jelezni kell, ha a felhasználónak várnia kell 10 mp-nél rövidebb ideig tartó várakozásnál egy homokóra ikon is megteszi Egyébként folyamatjelzővel (progress bar) lehetne jelezni a folyamat előrehaladtát. Ha a folyamat tovább tart, mint 1 perc, akkor egy szolid hanghatással is lehet jelezni a felhasználónak A hosszú letöltési időket is jelezni kell 33 Forrás:

32 Felhasználói élmény Jól nyomtatható oldalakat kell létrehozni A nem megfelelő design miatt a tartalom egy része lemaradhat a nyomtatott változatról A szöveg jobb oldali része levágásra kerül 34 Forrás:

33 Nyomtatás Sokan, sokat nyomtatnak a webről Szükséges a nyomtatható változatok elkészítése (ps, pdf) <LINK REL= alternate MEDIA= print HREF= dok.ps TYPE= application/postscript > margó használata 35

34 Felhasználói élmény Ne kelljen a felhasználónak emlékeznie korábbi oldalakon lévő információra Például termékek összehasonlításánál a kiválasztott termékek leírását lehessen egymás mellett/alatt megjeleníteni 36 Forrás:

35 Hitelesség Jól használható Gyakran ismételt kérdések gyűjtemény biztosítása A site felépítése logikus Idézetek és referenciák szerepeltetése A készítők nem névtelenek, kapcsolatba lehet velük lépni Profi arculat, letisztult grafika A régebbi tartalmak is elérhetőek Aktuális híreket tartalmaz Hiteles oldalakra linkel, és hiteles oldalakról linkelnek rá Melyik a legfontosabb? 37 Forrás:

36 38

37 Pásztázás módja Jakob Nielsen vizsgálatai A felhasználók a weben nem olvasnak, hanem scannelnek: végigpásztázzák az oldalt => lényeget akarják kiszűrni 39

38 Pásztázás módja Eltérő tartalomnál a mintázatok különböznek 3 alapoldal Bemutatkozás jellegű oldal (akasztófa) Termékbemutató (F betű) Kereső találati oldal (E betű) Forrás: ( 40

39 Pásztázás módja Forrás: 41

40 Tartalomtervezés A felhasználók a tartalomra koncentrálnak Főcímeket, szövegeket tekintik át először Összefoglalással kezdődjön az oldal! Legyünk tömörek Könnyű áttekinthetőség Rövid szövegek lassabban olvasunk a képernyőről, mint könyvből (230/250 szó/perc nyomtatásban, képernyőről kb. 25%-al kevesebb.) Bekezdésenként egy gondolat! Az oldal felső része értékesebb, mert gördítés nélkül elérhető Helyesírás ellenőrzés Lektorálás 42

41 Átláthatóság A felhasználók a hosszabb szöveget nem olvassák el szóról szóra kulcsszavak, kulcsmondatok keresése Használjunk (értelmes) egymásba ágyazott címsorokat <h1> <h6> Logikusan használjuk a címsorszinteket. Ha nincs 1-es címsor az oldalon, ne használjunk 2-est, 3-ast, stb. Használjunk kiemeléseket! 43

42 Átláthatóság A szöveget (ahol lehet) érdemes pontokba szedett listává alakítani Iskolánkban a következő tanfolyamokon lehet részt venni: ECDL-felkészítő, honlapszerkesztés kezdőknek, honlapszerkesztés haladóknak, grafikai programok használata kezdőknek, programozás C++ nyelven Iskolánkban a következő tanfolyamokon lehet részt venni: ECDL-felkészítő Honlapszerkesztés kezdőknek Honlapszerkesztés haladóknak Grafikai programok használata kezdőknek Programozás C++ nyelven 44

43 Szlogen, tagline Mit nyújt a cég, milyen területen mozgunk, mi tesz egyedivé minket a versenytársak között For a living planet Think different. Just do it The language of science I m lovin it Because you re worth it 45 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

44 Oldalcím Keresés során, könyvjelző használatakor nagyon fontos a jól megfogalmazott oldalcím Különböző oldalaknak különböző címet kell adni Rövid, lényegre törő címeket adjunk Ha a könyvjelzőnkben ezeket a feliratokat találjuk, az nem túl informatív 46

45 Olvashatóság Relatív betűméretet használjunk ne abszolútat! Pl. 120%, 90% Már az alap betűméret is elég nagy legyen (legalább 10pt-nak megfelelő). Idősebb célközönség esetén legalább 12pt. Alternatív, nagybetűs, nagy kontrasztú stílus változat javasolt a gyengénlátó felhasználóknak. 47

46 Olvashatóság Ellentétes színek használata a háttér és a szöveg elkülönítésére fehér háttér, fekete szöveg (pozitív szöveg) fekete háttér, fehér szöveg (negatív szöveg) szokatlanabb, lelassítja a felhasználót Egyszínű, finom mintájú háttér használata A színpreferencia befolyásolja az olvashatóságot. Kevésbé olvashatónak tartunk olyan szöveget, amely olyan háttéren van, ami nem tetszik nekünk Statikus (mozdulatlan) szöveget használjunk 48 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

47 Olvashatóság Hosszú, folyó szöveget balra igazítsunk Listáknál is a balra igazított a jól olvasható A kisebb szövegek talp nélküli betűkészlettel jobban olvashatóak (Arial, Verdana) NE ÍRJUNK CSUPA NAGY BETŰS SZÖVEGET Lassabban olvasható (kb. 10%-al) Kiabálás 49 - SZIA, SZIA, ÚJ VAGYOK ITT! HOGY VAGYTOK? - Nyomd meg a CapsLock-ot!! - HUUUUU, KÖSZI, MOST MÁR NEM KELL NYOMVA TARTANOM A SHIFTET!

48 50

49 Webtervezési normák (1.) Szabvány Logó az oldal bal felső sarkában van Keresődoboz a nyitóoldalon Bevezető Splash oldalak mellőzése Vízszintes nyomvonal morzsa (breadcrumb) navigáció Miért Breadcrumb (kenyérmorzsa)? A Jancsi és Juliska című mesében Jancsi kenyérmorzsát szór el, hogy visszataláljanak az úton. Sajnos a madarak felcsipkedik, így nem válik be a terv 51 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

50 Webtervezési normák (2.) Közmegegyezés A laptérkép neve: laptérkép, vagy oldaltérkép A látogatott link színét meg kell változtatni Webáruházaknál a bevásárlókosár linkje a jobb felső sarokban legyen Testvérterületekre mutató linkek megléte Segítség elhelyezése jobb felső sarokban A bejelentkezési folyamat a jobb felső sarokban 52 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

51 Webtervezési normák (3.) Homályos A fő navigációs sémák (oszlop balkézről, felső sáv/fülek, középre tolt telefonkönyv, stb ) Keresőszolgáltatás elhelyezése (Balra fent, jobbra fent, középen ) 53 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

52 Tartalom és megjelenés szétválasztása Különböző eszközök (PDA, beszédalapú böngészők, stb.) léteznek A szemantikus kódolás előnyösebb a különböző megjelenítők számára Eltérő stíluslapok megadása a különböző eszközökhöz Az oldalnak akkor is olvashatónak kell lennie, ha a stíluslapok nem használhatók 54

53 Jó példa Stíluslappal Stíluslap nélkül 55

54 Nem annyira jó példa Stíluslappal 56 Stíluslap nélkül

55 Eltérő stíluslap különböző felbontásokra <!DOCTYPE HTML> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <title>resolution Dependent Layout</title> <link rel='stylesheet' type='text/css' href='css/style.css' /> <link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px) href='css/medium.css' /> <link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' /> </head> <body> <div id="page-wrap"> <div id="header">header</div> <div id="main-content">content</div> <div id="secondary-one">secondary</div> <div id="secondary-two">extra</div> </div> </body> </html> 57

56 58 Tipográfia

57 Tipográfia Mi a tipográfia? A tipográfia nyomtatott betűkkel foglalkozó szakma és művészeti ág, melynek célja olyan írásképet kialakítani a betűtípusok és betűcsaládok alkalmazásával, mely egyszerre esztétikus és célszerű. (Forrás: Wikipedia) 59 Példa a kinetikus tipográfiára:

58 Webes tipográfia korlátai Korlátozott betűkészlet Nincs elválasztás, így a sorkizárt elrendezés csúnya lesz keskenyebb oszlopok esetén. Nincs befolyásunk az alávágásra (a szóközökkel való feltöltésre). Nem lehet tudni, hogy hol és hogyan nézik majd meg a munkát, így a designereknek minden képernyőméretre, felbontásra és környezetre gondolniuk kell. 60

59 Korlátozott betűkészlet A betűkészlet egyediségét csak a korszerű böngészők támogatják, de ettől függetlenül érdemes körültekintéssel használni (lassabb letöltés, ékezet problémák )! <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>tegyük szebbé a weboldalakat!</div> </body> </html> Ez a font nem támogatja a magyar ékezetes betűket 61

60 Nincs elválasztás A weben hiányzik az automatikus elválasztás funkció a szövegeknél, ezért a keskeny oszlopok esetén a sorkizárás csúnya eredményt ad. 62

61 Alávágás Az alávágás különböző betűpárok közötti távolság módosítását jelenti a változó betűszélességű típusokon belül (mint amilyen a Times New Roman, amelyben a különböző betűk szélessége és a köztük levő távolság betűnként eltérő, ellentétben a Courier típussal, amelyben a betűk mérete és a távolság közöttük mindig ugyanaz). A weben nem tudunk az alávágással élni, a betűk közti távolságot tudjuk állítani 63 Az alávágás javítja a szövegek megjelenését

62 Irányítás hiánya A web nem nyomtatott sajtó A nyomdászok nem kell azzal foglalkozzanak, hogy az olvasó átméretezi a szövegeit, nincsenek meg neki a választott típusok vagy nincs nála bekapcsolva az élsimítás. A webdesignereknek észben kell tartaniuk, hogy a tartalmat több különböző eszközön, több különböző környezetben, több különböző módon fogják olvasni a látogatók. 64

63 Tipográfiai tippek Több betűtípus megadása Több betűtípust, és általános betűcsaládot is meg kell adni! Pl. Georgia, Cambria, "Times New Roman", Times, serif A sorok hossza Az olvashatóság fenntartásához a sorok átlagos hossza egy szövegdobozon belül karakter között kell legyen. Ez persze változhat a célcsoport szerint (a gyerekek a rövidebb sorokat, a felnőttek a hosszabbakat szeretik inkább). 65

64 Tipográfiai tippek A sorok magassága A sormagasság a sorok közötti függőleges távolságot jelenti. Ha ezt egy kissé növeled a böngésző alapbeállításához képest, akkor ezzel javíthatsz az olvashatóságon (és több helyed marad az alsó- és felső indexekre is). 66

65 Tipográfiai tippek Iniciálék A :first-letter elem használatával (például p:first-letter { } formában) módosíthatod a bekezdés első sorának első betűjét a többi betűhöz képest. Ezt a betűt iniciálénak is nevezik, mivel általában 3 4 sornyi helyet foglal el a szövegben. 67

66 Tipográfiai tippek Kiskapitálisok A fontok gyakran tartalmaznak kiskapitális változatokat is. Ez azt jelenti, hogy a betűk mind nagybetű formátumúak, viszont a kisbetűk helyén méretben a kisbetűk méretének felelnek meg. Ez akkor lehet hasznos, ha valamit nagybetűvel szeretnél írni, de nem akarod túlságosan ráterelni a figyelmet, például rövidítések esetében. Minden szó első betűje nagybetű, a többi kiskapitális 68

67 Tipográfiai tippek Kilógó írásjelek Jó tipográfiai hatást lehet kelteni a text-indent CSS tulajdonság használatával, ha a mondataid idézőjellel kezdődnek. Ha az előbbi tulajdonságnak negatív értéket adsz, akkor az idézőjelet kihúzhatod a bekezdés elé. 69

68 Tipográfiai tippek Tipográfiailag helyes írásjelek és más elemek Ha a szövegedet professzionálisabbá és elegánsabbá szeretnéd tenni, akkor érdemes használod a HTML kódok széles skáláját a tipográfiai jelek megjelenítéséhez, például a tipográfiailag helyes idézőjelek, valamint kötőjelek ( ) és gondolatjelek ( ) használatával. 70

69 71

70 Kiemelt idézetek Kiemelt idézetek A kiemelt idézetek rövid kivonatok a saját szövegedből, amelyek a lapon valahol a szöveg mellett vagy a szövegen belül jelennek meg nagyobb betűmérettel és sokszor más típussal is, hogy felhívják magukra a figyelmet

71 Betűméret, szöveg képként Kis és nagy betűméretben is olvasható legyen az oldal! Ne használjunk abszolút betűméretet! Alapbetűmérethez viszonyítva kell megadni Szövegeket NE képként reprezentáljunk! Problémák: nem változtatható kontraszt (pl. gyengénlátók számára), keresés, fordítás más nyelvre 73

72 Oldaltervezés A felhasználó számára érdekes tartalmat kell megjeleníteni! A navigációs eszközök ne foglaljanak el túl nagy helyet Az üresen hagyott felületek nem feltétlenül feleslegesek (elválasztás) A tartalom töltse ki legalább az oldal 50-80%-át! 74

73 Platformfüggetlenség Felbontásfüggetlenség Ne használjunk konkrét táblázat méreteket, százalékban adjuk meg az értékeket Folyékony arculat (használható sablonok: 75

74 Válaszidők A gyors válaszidő a legfontosabb a felhasználók szemszögéből Rober B. Miller (1968) tanulmányában 3 kategóriába osztja a válaszidőket: Azonnali válasz <0.1 mp Megszakítottság érzése >1 mp Felhasználói figyelem megtartásának határa 10 mp 76

75 Kiszámítható válaszidő Ha ugyanaz a művelet eltérő sebességgel hajtódik végre, megzavarja a felhasználót Kiszámíthatóvá kell tenni a válaszidőt. Jelezni lehet a letöltendő fájl méretét a legelterjedtebb sávszélességgel számolva, 10 mp-es letöltés felett kötelező jelezni a fájl méretet 77

76 Oldalméret Oldalt alkotó fájlok méretének összege Javasolt maximális oldalméret: 100 kilobájt. 78 Pataki, Máté; Abonyi-Tóth, Andor Bevezetés az info-kommunikációs akadálymentesítés világába II.

77 Letöltési idő kalkuláció lculator.php 79

78 Folyamatos oldal megjelenés Kevésbé számít a hosszú letöltési idő, ha az információ egy része elérhető a felhasználó számára Oldal felső részén több szöveg, kevesebb kép legyen ALT paraméterek használata a képeknél Szélesség és magasság (width és height) paraméterek megadása az oldal gyorsabb megjelenítéséhez vezet Az összetett táblázatokat szét kell darabolni több részre 80

79 Folyamatos oldal megjelenés Rossz Jó 81

80 Gördítősávok Ne legyen, ha a teljes tartalom látható! Legyen, ha a tartalmat görgetni kell! Ne készítsünk automatikus görgetést Grafikailag is gördítősávnak nézzen ki! Négyszögletes, kontrasztos Fönt és lent hasonló szélességű Csúszkát tartalmaz Lehessen gördíteni kattintással, a nyílra kattintva, csúszka húzásával, egérgörgővel Vízszintes görgetést kerüljük! Kulcsinformációkat az oldal tetejére tegyünk! 82 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

81 83 Hivatkozások (Linkek)

82 Linkek fajtái Beágyazott link Aláhúzott szöveg a főszövegben, ami jelzi hogy bővebb információ található egy másik oldalon. Strukturális link A lapszerkezet különböző szintjeire (testvér, gyermek) mutatnak Asszociatív linkek Aktuális oldalhoz hasonló, ahhoz kapcsolódó oldalak eléréséhez 84 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

83 Linkek hossza, elnevezése Ne legyen a link túl hosszú 2-4 szó, max. 60 karakter A kattintson ide kifejezés nem szerencsés Át kell fogalmazni a link szövegét Önmagában értelmes legyen a link neve! Inkább jelentkezzen be! 85

84 Linkcímek használata Linkekhez fűzött rövid magyarázat Milyen típusú információt várhat a felhasználó a linktől A hivatkozott oldal neve Oldalrész neve Milyen információ található a céloldalon Figyelmeztetés az esetleges problémára (pl. csak regisztrált felhasználóknak) Az előadás anyaga <a href="eloadas1.pdf" title="pdf formátumú anyag letöltése"> nyomtatható változatban</a> is rendelkezésre áll. 86

85 A link színei A még nem látott és már meglátogatott linkek színét meg kell különböztetni. Ajánlott a kék illetve lila színek megtartása A szabványos színek használata elősegíti a felhasználók tájékozódását. Ha megváltoztatjuk, akkor ugyanazon szín eltérő árnyalatait érdemes használni. A piros linkszínek kerülendők! 87 Már látogatott Linkek

86 Külső linkek Ne féljünk a külső linkek alkalmazásától Attól, hogy nincs, a látogatók még nem feltétlenül maradnak tovább. Ne új ablakban nyissuk meg az oldalakat A sok nyitott ablak megnehezíti a tájékozódást A kapcsolódó linkeket az oldal felső részére kell helyezni. Tegyünk rövid megjegyzéseket a linkek mellé Segíti a felhasználót a választásban Példa Javascript referencia A HTMLinfo oldalon található kézikönyv tartalmazza a JavaScript 1.3 belső eljárásait és tulajdonságait, valamint a kliens oldali JavaScript verziót. 88

87 Linkek aláhúzása, effektek A link legyen aláhúzva! Kivételt jelenthet a navigációs menü és a linklista. Ami nem link, az NE legyen aláhúzva, félrevezeti a felhasználót! Szükségtelen a link hover állapotában színt változtatni. A félkövérré váltás miatt a szöveg tördelése megváltozhat. A linkek ne kerüljenek túl közel egymáshoz! 89

88 Emberekre mutató linkek A személy nevére tett hivatkozás az életrajzára mutasson. Arckép, rövid életrajz, linkek, elérhetőségek 90 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

89 91 Áttekinthetőség

90 Áttekinthetőség Áttekinthetőség Nem egységes oldalkinézet Design /olvashatóság Zavaró színek Szövegszerkesztési hibák Nem megfelelő háttér és szöveg színek Nem koordinált megjelenés Gyenge minőségű képek használata Túl nagy, vagy kis méretű szövegek használata Nem megfelelő háttérkép Átlátszó képek nem megfelelő használata 92

91 Zavaró színek

92 Színséma beállítás (tipp) Hasznos oldal: 94

93 Szövegszerkesztési hibák

94 Nem megfelelő háttér és szöveg színek

95 Nem koordinált megjelenés

96 Gyenge minőségű képek használata

97 Túl nagy, vagy kis méretű szövegek használata

98 Nem megfelelő háttérkép

99 Átlátszó képek nem megfelelő használata

100 102 Multimédiás elemekkel kapcsolatos ergonómiai elvek

101 Válaszidők A multimédiás tartalom letöltése lassú a fájlformátumot, méretet, lejátszási időt tüntessük fel Előzetest tegyünk fel pl. videoból kivágott képkockákat 103

102 Esettanulmány Látszik a videóelőzetes, a tartalom rövid leírása, elérhető a videó teljes szövegű leírása, megtekinthető on-line a felvétel és letölthető különböző formátumokban is. (Forrás: Abonyi-Tóth Andor: A SCORM és WCAG szabványnak megfelelő e-tananyagok fejlesztési módszerei és tapasztalatai az ELTE Informatikai Karán) 104

103 Képek Sok az indokolatlan grafika képként megjelenített szöveg Egy kép felér 1000 szóval letöltéskor mindenképp :-) Kép kicsinyítése lényegkiemelő képkicsinyítés körbevágás, képkicsinyítés 105

104 Manipuláció a képekkel Egy kép két különböző részlete mást-mást sugallhat! 106 Forrás:

105 Animáció Lefoglalják az ember periférikus látását Nehéz a tartalomra koncentrálni Ne hagyjuk az animációt végtelen ciklusban futni Még a ma már elavult GIF formátumban is volt lehetőség az animációs állományban rögzíteni, hogy hányszor menjen végbe az animáció. 107

106 Videó A sávszélesség növekedésével egyre nagyobb szerepet kap WEB-es TV adások Videómegosztók (pl. youtube.com, indavideo.hu) Távoktatás (beszélő személyiségének átvitele) Tananyagok gazdagítása Probléma lehet rossz kép- és hangminőség 108

107 Hangok Magyarázó, segítő szövegek lejátszása Zenei illusztrációk Csak indokolt esetben használjuk Letöltési sebesség Idegesítő tulajdonságok (ugyanaz a hangminta perceken keresztül) Legyen kikapcsolható, lehalkítható 109

108 Hardver és szoftver 110

109 Hardver, szoftver Nem feltételezhetjük, hogy minden felhasználó ugyanolyan tudású böngészőprogramot, vagy éppen alapbeállítást használt Van aki kikapcsolja a hátterek megjelenítését, vagy az alap betűméretet felnagyítja Az operációs rendszer is számít. Ugyanolyan típusú, verziójú böngészőprogram máshogy viselkedhet különböző operációs rendszereken Az átlagos internetkapcsolat sebességét is figyelembe kell venni 111

110 Hardver, szoftver A legelterjedtebb böngészők mindegyikén célszerű tesztelni Melyek a legelterjedtebb böngészők? Idővel és földrajzi hellyel is változik 112

111 113 Statisztika a böngészőprogramokról

112 114 Statisztika az operációs rendszerekről

113 115 Statisztika a mobil operációs rendszerekről

114 116 Technikai tesztelés

115 Hiányzó komponensek

116 Néhány JAVA applet csak a lokális gépen működik CLICK

117 Ugyanazon weblap különböző platformokon megtekintve 119 Forrás:

118 120

119 121

120 122

121 Használhatósági tesztelés Tesztelés lépései: Az oldal gyenge pontjainak felmérése Konzultáció az üzemeltetővel, hogy felhasználói számára mely funkciók a legfontosabbak Teszt kidolgozása Résztvevők kiválasztása Teszt lebonyolítása Teszteredmények kiértékelése, konzultáció az üzemeltetővel Megvalósítás 123 Forrás:

122 Használhatósági tesztelés Tervezői vakság A tervező tudja, hogyan kellene használni az oldalt, tudja hova kell kattintani, A tesztelést független felhasználókkal kell végeztetni Minimum 4 ember, 8-10 embernél nem kell több Jó, ha 1 óránál kevesebb időt vesz igénybe 3-4 feladat 124 Forrás:

123 Irodalom Kitűnő esettanulmány: Steve Krug: Ne törd a fejem (HVG kiadó) című könyvben A használhatósági tesztelés nem drága Pár felhasználón végzett teszt tapasztalatainak felhasználása már nagyon sokat javíthat a honlap használhatóságán. 125

124 126

125 Kezdőlap A kezdő és a további oldalak stílusa egyezzen meg A logó, vállalat/intézmény, site neve legyen feltűnő helyen Keresési funkciók felajánlása Ne legyen túlzsúfolt Beköszönő oldalak (splash screen) lelassítják és idegesítik a felhasználót 127

126 Splash képernyő 128

127 Splash képernyők 129

128 Splash képernyők Sokszor csak erőfitogtatás a web-designer részéről Rendszerint nem tölt be semmilyen funkciót Ha valami miatt mégis szükséges, akkor legyen lehetőség az átlépésére. Probléma: A Skip intro (intro átlépése) szöveget az internetezők 30%-a nem jól értelmezi 130

129 Kezdőlap Bármelyik aloldalról vissza lehessen jutni a kezdőlapra Bevett szokás, hogy a minden oldalon oldalon azonos helyen lévő - cég/szervezet logó tölti be a link szerepét 131 Forrás:

130 Kezdőlap Pozitív benyomást kell kelteni A kezdőlap jó fokmérője az egész site tartalmának/minőségének Egyik kutatásban a felhasználóknak csúcs minőségű websiteokat kellett gyűjtenie. Az esetek felében a felhasználók csak a kezdőlapot nézték meg, ez alapján alkottak véleményt. Közölni kell a website célját, értékeit Miben különbözik a site a konkurensektől? Mindezt röviden kell leírni. Jól csengő szlogen (tagline) 132 Forrás:

131 Kezdőlap A kezdőlap és az aloldal szerkezete / megjelenése ne térjen el nagyon egymástól Ez zavaró lehet a felhasználóknak 133 Forrás:

132 Kezdőlap A website-on történt változásokat jelezni kell a kezdőlapon Kerüljük, hogy a felhasználót kellemetlen meglepetés érje a változások miatt (új design, megváltozott navigáció, stb.) 134 Forrás:

133 Felbontás kérdése Vízszintesen ne kelljen görgetni az oldalt Számítsuk bele a böngésző kereteinek és kezelőszerveinek méretét Olyan megjelenést válasszunk, ami különböző felbontásokon is jól néz ki liquid design (folyékony arculat) 135

134 Oldal szerkezet Folyékony arculat A monitor felbontásához igazodjon a design Megoldható, hogy a rendelkezésre álló terület kihasználásra kerülhessen 136 Forrás:

135 Oldal szerkezet Ne legyen túlzsúfolt az oldal Az információ-keresést megnehezíti a túlzsúfolt oldalszerkezet A kulcsszavaknak szembetűnőknek kell lennie 137 Forrás:

136 Oldal szerkezet A fontos, kattintható elemeket ugyanarra a helyre, közel az oldal tetejéhez kell elhelyezni 138 Forrás:

137 Oldal szerkezet A legfontosabb elemek helye felül, középen van Itt kezdik az oldal áttekintését a felhasználók, majd balról jobbra pásztáznak 139 Forrás:

138 Oldal szerkezet Az elemeket vizuális egymáshoz kell igazítani (függőlegesen/vízszintesen) Szövegblokkok, felsoroláslisták, választókapcsolók, űrlapelemek esetén nagyon fontos a megfelelő igazítás Rossz példa Jó példa 140 Forrás:

139 Oldal szerkezet Illuzió, hogy nem kell görgetni Ne használjunk olyan hatásokat/elemeket, amelyek azt az illúziót keltik, hogy az oldal tetején/alján vagyunk Úgy tűnik, az oldal tetején vagyunk Úgy tűnik, az oldal alján vagyunk 141 Forrás:

140 Oldal szerkezet Megfelelő oldalhossz alkalmazása A kezdőlap, navigációs oldal, on-line olvasható tartalom hossza rövidebb legyen Hosszabb oldalak használata javasolt: Ha nem akarjuk az olvasást megszakítani Meg akarjuk tartani a dokumentum struktúráját Kevesebb oldalt akarunk karbantartani Nyomtatásra / letöltésre szánjuk 142 Forrás:

141 143 Grafika

142 Grafika A kattintható képeken címkéket kell elhelyezni A tapasztalatlan felhasználók nem gondolják, hogy a kép egy részére is lehet kattintani 144 Forrás:

143 Grafika Logo szerepeltetése A Logo szerepeltetése (ugyanazon a helyen, minden oldalon) biztosítja a felhasználót arról, hogy nem hagyta el a site-ot. 145 Forrás:

144 Grafika A menüt ne lehessen bannerrel összekeverni A dekorációnak, vagy hirdetésnek tűnő grafikákról a felhasználók többsége nem vesz tudomást 146 Forrás:

145 Metaforák Nyilvánvaló metaforákat kell alkalmazni könnyen asszociálhasson a felhasználó a metafora és a funkció között Ha eltúlozzuk, akkor az oldal bővítésekor kellemetlen meglepetésben lehet részünk 147

146 Metaforák 148

147 149 Navigáció

148 Navigáció Hol vagyok? Hol jártam már / honnan jöttem? Hova mehetek innen? Hát itt meg mit lehet csinálni? 150

149 Navigáció Hol vagyok? A látogató külső linkről is érkezhetett az oldalunkra. Fel kell tüntetni, hogy milyen oldalon, a struktúra milyen szintjén helyezkedik el. Segít: logó szerepeltetése, az aktuális menüpont kiemelése, rovatra jellemző vizuális hatások 151

150 Navigáció Hol jártam már? A visszafele gomb az egyik leggyakrabban használt funkció a böngészőkben Lehet egyfajta history is, vagy az adott site felépítésének vertikális metszete Hova mehetek innen? Lehetséges továbbhaladási irányok feltüntetése Logikus, könnyen használható menürendszer 152

151 Navigáció (ablakok) Ne irányítsuk a felhasználót navigáció nélküli oldalra Ha új ablakban nyitunk meg egy oldalt, a böngésző Vissza gombja nem működik Zavaró lehet a felhasználónak, főleg ha teljes méretben nyílik meg az ablak Ebben az esetben Ablak bezárása linket érdemes elhelyezni 153 Forrás:

152 Navigáció (ablakok) Mikor nyissunk új ablakot? (1.) Amikor nem web-es dokumentumokra hivatkozunk. Pl. PDF, PPT, XLS. A felhasználók gyakran az ablak bezárásra kattintanak a vissza gomb helyett. A dokumentum azonnali (böngészőben való) megnyitása helyett jobb, ha az állomány letöltésére kerül és a megszokott alkalmazásban nyílik meg. Érdemes figyelmeztetni az új ablak nyitásról a felhasználót! 154 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

153 Navigáció (ablakok) Mikor nyissunk új ablakot? (2.) Appletek esetén Funkcionális appletek: saját jogú, független kisalkalmazások állapotátmenettel, több nézettel (fülecskék) Ezt új ablakban javasolt megnyitni, webnavigáció nélkül Tartalom appletek: a weblap tartalmához integrált, pl. navigációs vezérlés, aktív tartalom. Ezt az adott lappal együtt kell megjeleníteni. 155 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

154 Navigáció Hosszú oldalak esetén legyen megjelenítve tartalom menü is Ezzel a felhasználók a lap megfelelő részére ugorhatnak. Fontos, hogy legyen Vissza link is 156 Forrás:

155 Navigáció Fülecskék helyes alkalmazása Egyetlen objektum választható nézetei közti váltásra (lenne) jó, de a weblapokon hagyományos navigációs célokra is gyakran használják, ami kevésbé szerencsés megoldás. 157 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) Jó példa!

156 Menüsor A menüsornak színezett hátteret kell adni, hogy a tartalomtól elválasztott legyen Az oldal bal felén kell lennie Megjegyzés: A jobboldali igazítás előnyösebb lenne, de a normától való eltérés miatt nem szerencsés használni A jobbra igazított menü közelebb van a gördítősávhoz, az egérmozgás csökkenne ezzel a megoldással 158 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

157 Menük és almenük Konzekvens, könnyen megérthető menü struktúrát kell használni Ajánlott, hogy a menü ne tartalmazzon 7±2 menüpontnál többet Ha mégis több menüpont szükséges, azokat el kell különíteni egymástól Az oszlopokba rendezett menüopciókat 20-30%-kal könnyebb feldolgozni, mint a sorokba rendezetteket. Maximum 3 szintet használjunk 159

158 Breadcrumb nyomvonal morzsa Az oldal tetején kell elhelyezni Hierarchikus felépítésű lapoknál működik Megmutatja, hogy az aktuális oldal milyen gyűjtőoldalak alá tartozik Az elemek közé > jelet, vagy / jelet érdemes tenni. A kezdőlapot nem kell szerepeltetni, mert oda a logóra kattintással is eljutunk (elvileg) 160 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

159 Menü fajták Tartalmi menü Ez a főmenü. Az összes tartalmi részt el kell tudni érni belőle. Site-funkció menü Oldalakon elérhető kiegészítő funkciók, lokális kapcsolatok (nyomtatható verzió, továbbküldés ben) Ide tartoznak a keresők, oldaltérkép, impresszum, stb. Fejlécben az oldalhoz, láblécben a sitehoz tartozó funkciókat célszerű feltüntetni 161

160 Menü fajták 2. Célcsoport alapú menü Látogatói rétegek szerint eltérő menü Lakossági, vagy vállalati ügyfelek? Feladat alapú menü Ott érdemes használni, ahol jól tipizálható feladatok vannak Kapcsolódó elemek Az éppen olvasott információhoz kapcsolódó elemek szerepeltetése megnyugtató a felhasználók számára. 162

161 Navigációs problémák Legördülő menük nem tekinthető át a lehetőségek teljes listája, csak kattintás (esetleg még görgetés) után Ne húzzunk alá olyan szöveget, ami nem link A Sitemap (Oldaltérkép) használata elősegíti a navigációt Maga a Sitemap kifejezés viszont az internetezők jelentős részének (~40%) félreérthető, nem azt érti rajta, mint amit jelent. Netszleng veszélyei... (FAQ, stb.) 163

162 Oldaltérkép 164

163 A szokásostól eltérő navigáció 165

164 A szokásostól eltérő navigáció 166

165 A szokásostól eltérő navigáció 167

166 Navigációs hibák Navigációs eszközök hibái Nem egyértelmű navigációs eszközök Link? Nem, csak Aláhúzott szöveg!

167 URL Megjegyezhető / kitalálható domain nevet kell adni URL Lehetőleg rövid legyen Ismerős szavakat használjunk Csak kisbetűket használjunk Az O és 0 összekeverhető Kerüljük a speciális karaktereket

168 Barátságos hibaüzenetek 404-es hiba: Not Found - a kért anyag nem található A webszerverek alternatív hibaoldalak megjelenítését teszik lehetővé Pl. apache.htaccess ErrorDocument 404 /hiba404.php Ez jó ha tartalmazza a következőket: Navigációs elemeket, linket a címlapra vagy oldaltérképre Kulcsszavas keresési lehetőséget (visszafogott) grafikát 170

169 Nem túl jó 171

170 Egy fokkal jobb Pillanatnyilag nem üzemel egy oldal, ami nincs is??? 172

171 Helyes 173

172 Egyedi 404-es oldalak 174

173 Egyedi 404-es oldalak 175

174 Framek A navigálást megnehezítik vissza gomb, könyvjelző (bookmark), URL problémák Hátrányos helyzetű felhasználók számára átláthatatlan az oldalszerkezet Nyomtatási problémák Keresőprogram problémák Beléptetés problémák (session kezelés) 176

175 Framek 177

176 Framek 178

177 Framek Ha mégis használjuk Tüntessük el a Frame szegélyeit a Frame nélküli változat elkészítése <NOFRAMES> tag használata Frame kiváltására megoldás? Szerver oldali kód beillesztés AJAX technológia CSS lehetőségeinek kihasználása 179

178 180 Listák

179 Listák Listák, feladatok logikus sorrendben legyenek A listák, linkek, fülek, navigációs elemek sorrendje logikus (fontosságot követő) legyen Ha nincs kitüntetett sorrend, akkor ábécé sorrend, vagy sorszám szerint kell megjeleníteni az elemeket Ha U.S.A-beli látogatók vannak többségben, legyen az az első 181 Forrás:

180 Listák Folyamatos szöveg helyett listát használjunk, ahol lehet A pásztázást segíti a listába rendezés 182 Forrás:

181 183 Űrlapok

182 Űrlapok Kötelező / opcionális elemek konzekvens jelölése Egyes kutatások szerint a félkövér jelölés jobb a felhasználóknak, mint a színnel történő megkülönböztetés 189 Forrás:

183 Űrlapok Nyomógombok szerepét egyértelműen jelezze a feliratuk Előző, Tovább, Elküld, Alaphelyzet, Frissít, Keres Minden oldalon ugyanazt jelentse! 190 Forrás:

184 Űrlapok Az adatbeviteli mezőket megfelelő (beszédes) címkékkel kell ellátni Jól kell tagolni, hogy a címke és a mező elkülönüljön Itt túl távol vannak a címkék 191 Forrás:

185 Űrlapok Ugyanazt az információt ne kérjük be többször Felesleges lassítjuk a felhasználót, ha például a lakcímét többször kell megadnia 192 Forrás:

186 Űrlapok Látható legyen a bevitt adat Gördítés nélkül láthatóvá kell tenni a bevitt információt 193 Forrás:

187 Űrlapok Látható legyen a bevitt adat Gördítés nélkül láthatóvá kell tenni a bevitt információt 194 Forrás:

188 Űrlapok Ellenőrizzük a bevitt adatokat Elgépeléseket / tévedéseket jelezni kell a felhasználóknak (pl. jel címben, február 31, stb.) Az összetett beviteli mezőket érdemes szétszabdalni A mértékegységeknél is érdemes több beviteli mezőt használni 195 Forrás:

189 Űrlapok Ne váltogassunk a beviteli módok között Vagy egér, vagy billentyűzet A váltás lassítja a folyamatot Jó példa Rossz példa 196 Forrás:

190 Űrlapok Sose használjunk önállóan egy választókapcsolót Teljesen szokatlan a felhasználók számára ez a választási mód 197 Forrás:

191 Címkék elhelyezése űrlapokban Melyik a legjobb elrendezés az alábbiak közül? Címkék bal oldalon balra igazítva Címkék bal oldalon jobbra igazítva Címkék fent 198

192 Címkék elhelyezése űrlapokban Felülre igazított címkék Gyorsabb kitöltést eredményez Több függőleges helyet igényel Az üres helyeknek, kontrasztnak nagy szerepe van Lokalizációs előnyök 199

193 Címkék elhelyezése űrlapokban Jobbra igazított címkék Tiszta a címke/mező hozzárendelés Kevesebb függőleges helyet igényel Az olvashatóság csökken, mert nem azonos pozícióban kezdődnek a szövegek Gyors kitöltési idő 200

194 Címkék elhelyezése űrlapokban Balra igazított címkék A címke pásztázását elősegíti Gyengül az asszociációs a címke-mező között Kevesebb függőleges helyet igényel A címke hosszúságának változása felboríthatja az arculatot 201

195 Szemmozgásvizsgálatok eredménye Címkék bal oldalon balra igazítva Címkék bal oldalon jobbra igazítva Címkék fent Címkék fent - félkövér 202

196 Címkék elhelyezése űrlapokban Címke elhelyezése A mező feletti elhelyezés (esetek többségében) szerencsésebb, mivel nem kell külön a címkét és a mezőt pásztázni Ügyelni kell a vizuális elkülönítésre Címke igazítása A balra elhelyezett, balra igazított címke kognitív túlterhelést jelent Ha nem lehet fent a címke, inkább jobbra igazított legyen Félkövér címkék A sima címkék jobbak Ha mégis félkövér a címke, akkor az űrlapmező szegélye ne legyen nagyon markáns 203

197 Címkék elhelyezése űrlapokban Legördülő menük Vonzzák a szemet, ezért fontos(abb) adatok elhelyezésére használjuk, vagy sorrendben helyezzük a fontosabb mezők alá Címke és a legördülő menük A legördülő menü alap értéke lehet maga a címke 204

198 205 Nemzetköziség

199 Nemzetköziség A honlap legyen több nyelven is elérhető Ne használjunk szójátékokat Ikonoknál vegyük figyelembe a különböző kultúrákat A dátum és idő megadásnál legyünk egyértelműek időzónák, 12/24 órás jelölés dátumnál írjuk ki a hónapot Weblapon szereplő dátum: 08/09/10??? Egy uniós szabály kötelező átvétele miatt a jövőben fokozatosan eltűnnek a magyar helyesírás szerinti minőségmegőrzésre vonatkozó dátumok az élelmiszerek csomagolásáról, helyükre a nap, hónap, év sorrend lép. A nap/hó/év szerinti jelölési mód december 31-től kötelező. 206

200 Nemzetköziség Az eltérő nyelveket lehetőleg ne zászlókkal jelöljük A zászlók országokat és nem nyelveket jelölnek 207

201 Interaktívitás Az címet tüntessük fel Lehetővé tehetjük a közvetlen üzenet küldést A felhasználók kérdéseiből és a válaszokból állítsunk össze gyakori kérdések gyűjteményét! 208

202 209

203 Mit tegyünk? (1.) Rakjuk ki a logót, linket az oldal tetejére. A logón a kezdőlapra mutató linket érdemes elhelyezni. A weblapok belsejét kereshetővé kell tenni. Célratörő, egyszerű fő- és oldalcím használat. Az egyetlen tekintettel történő letapogatás elősegítése (pl. linkcsoportok, alcímek, stb.) Hipertext használata a tartalmi tér kialakításához, áttekinthető nyitóoldallal és a másodlagos oldalakkal 210 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

204 Mit tegyünk? (2.) Ne árasszuk el a képernyőt (termék)fotókkal. Lényegkiemelő képméret-csökkentést használunk. Linkcímeket használunk, amelyek azelőtt tudatják a link célját, mielőtt rákattintanánk. Minden fontos oldal elérhető a hátrányos helyzetű felhasználók számára. Kövessük a többieket! A felhasználók így nálunk is ismerős megoldásokkal találkoznak Teszteljük a tervet valós felhasználókkal, valós környezetben! 211 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

205 212

206 Ajánlott irodalom Jakob Nielsen: Web-design (Typotex Elektronikus Kiadó, 2002) Steve Krug: Ne törd a fejem (HVG Kiadói Zrt., 2008) Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 213

207 Ajánlott linkek

208 215

WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA

WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA ERGONÓMIA Ergonómia: a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása 1. Ez a szó a görög ergos szóból származik, ami munkát jelent, és a nomos szóból,

Részletesebben

V20120229. Abonyi-Tóth Andor, ELTE IK MOT. Néhány alapfogalom

V20120229. Abonyi-Tóth Andor, ELTE IK MOT. Néhány alapfogalom 1 V20120229 Abonyi-Tóth Andor, ELTE IK MOT 2 Néhány alapfogalom 1 Ergonómia Az ergonómia egyszerűen fogalmazva a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása. Ez a szó a görög ergos szóból

Részletesebben

WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA

WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA WEBERGONÓMIA A HONLAPKÉSZÍTÉS ERGONÓMIÁJA ERGONÓMIA Ergonómia: a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása 1. Ez a szó a görög ergos szóból származik, ami munkát jelent, és a nomos szóból,

Részletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség:

A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség: KRYPTON sablon Részletes leírás a sablonhoz kapcsoló új beállításokról Diavetítés a kezdőlapon A webáruház kezdőlapján háromféle diavetítés beállítására van lehetőség: Képes diavetítés Termékes diavetítés

Részletesebben

HELYES módosítható, olvashatóság. Válasz Felhasználói élmény, stílusos, egyéni megjelenés HIBAS

HELYES módosítható, olvashatóság. Válasz Felhasználói élmény, stílusos, egyéni megjelenés HIBAS Jelölje be azt a sort, amelyben kizárólag a weboldalakkal szemben támasztott alapkövetelmények szerepelnek. Értékes információtartalom, olvashatóság, vonzó és igényes megjelenés. Olvashatóság, felhasználói

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

Webkezdő. A modul célja

Webkezdő. A modul célja Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie

Részletesebben

Webdesign és információ építészet a gyakorlatban

Webdesign és információ építészet a gyakorlatban THE INTERNET,mapped on the opposite page, is a scalefree network in that Webdesign és információ építészet a gyakorlatban dis.'~tj port,from BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on

Részletesebben

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL http://bit.ly/a1lhps Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 372-2500/8466 http://abonyita.inf.elte.hu

Részletesebben

SZOLGÁLTATÓI NYILVÁNTARTÁSI RENDSZER FELHASZNÁLÓI KÉZIKÖNYV

SZOLGÁLTATÓI NYILVÁNTARTÁSI RENDSZER FELHASZNÁLÓI KÉZIKÖNYV SZOLGÁLTATÓI NYILVÁNTARTÁSI RENDSZER FELHASZNÁLÓI KÉZIKÖNYV Felhasználói kézikönyv IX. kötet BEJEGYZÉSEK LEKÉRDEZÉSE Magyar Államkincstár Betekintési jogosultsággal rendelkező felhasználók számára 2014.12.10.

Részletesebben

1. kép. A Stílus beállítása; új színskála megadása.

1. kép. A Stílus beállítása; új színskála megadása. QGIS Gyakorló Verzió: 1.7. Wroclaw Cím: A Print composer használata és a címkézés. Minta fájl letöltése innen: http://www.box.net/shared/87p9n0csad Egyre több publikációban szerepelnek digitális térképek,

Részletesebben

DSD. A webes akadálymentesítés helyzete Magyarországon Pataki Máté DSD. Pataki Máté 1/ 41

DSD. A webes akadálymentesítés helyzete Magyarországon Pataki Máté DSD. Pataki Máté 1/ 41 A webes akadálymentesítés helyzete Magyarországon Pataki Máté Pataki Máté 1/ 41 Témakörök W3C -Web Accessibility Initiative (WAI) Célcsoportok Fogyatékossággal élők Technológiailag megkülönböztetettek

Részletesebben

HVK Adminisztrátori használati útmutató

HVK Adminisztrátori használati útmutató HVK Adminisztrátori használati útmutató Tartalom felöltés, Hírek karbantartása A www.mvfportal.hu oldalon a bejelentkezést követően a rendszer a felhasználó jogosultsági besorolásának megfelelő nyitó oldalra

Részletesebben

akadálymentesen i e Tervezés

akadálymentesen i e Tervezés akadálymentesen i da X y S L e autizmus spektrumzavarral élők számára használj egyszerű színeket komplementer színeket írj egyszerűen Tedd! bonyolult kifejezéseket használj egyszerű mondatokat és felsorolásokat

Részletesebben

Minta weboldal. 8 Keresés. A helyi közösségek saját weboldalainak arculati megkötései és elrendezési javaslata.

Minta weboldal. 8 Keresés. A helyi közösségek saját weboldalainak arculati megkötései és elrendezési javaslata. Webarculat A weboldal A LEADER Helyi Akciócsoportok weboldalai mind-mind egyedi megoldások, a helyi közösséggel kapcsolatos információk megosztóhelyei. Ezek a weboldalak szabadon szerkeszthetők, bizonyos

Részletesebben

Akadálymentes weboldalkészítés dióhéjban

Akadálymentes weboldalkészítés dióhéjban Akadálymentes weboldalkészítés dióhéjban Készítette: Mezei Ádám Info-kommunikációs Akadálymentességi Műhelykonferencia 2008. november 20 Mi az oka, hogy NEM akadálymentes honlapokat készítünk? 1) Nem gondolunk

Részletesebben

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák A Portál rendszer felületének általános bemutatása Felhasználói útmutató Támogatott böngészők Internet Explorer 9+ Firefox (legújabb verzió) Chrome (legújabb verzió) Felületek felépítése Információs kártyák

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán

Részletesebben

Dokumentum létrehozása/módosítása a portálon:

Dokumentum létrehozása/módosítása a portálon: Dokumentum létrehozása/módosítása a portálon: 1. Belépés a szerkesztőfelületre A következő webcímre belépve - http://www.zalaegerszeg.hu/licoms/login - megjelenik a szerkesztőfelület beléptető ablaka,

Részletesebben

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam Operáció rendszer ECDL tanfolyam Alapok A Windows áttekintése Asztal Tálca Start menü Lomtár használata Súgó használata Felhasználói fiókok kezelése Kijelentkezés, felhasználóváltás Fájlok és mappák Sajátgép

Részletesebben

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára A HONALPSZERKESZTÉS ALAPJAI 50 feladat a Debreceni Egyetem Informatikai Karának Informatikus Könyvtáros szakos hallgatói számára Készítette: Jávorszky Ferenc Debrecen 2010. 1 1. Készítsen honlapot, amelynek

Részletesebben

4. Javítás és jegyzetek

4. Javítás és jegyzetek és jegyzetek Schulcz Róbert schulcz@hit.bme.hu A tananyagot kizárólag a BME hallgatói használhatják fel tanulási céllal. Minden egyéb felhasználáshoz a szerző engedélye szükséges! 1 Automatikus javítás

Részletesebben

Responsive Web Design. Dr. Nyéki Lajos 2019

Responsive Web Design. Dr. Nyéki Lajos 2019 Responsive Web Design Dr. Nyéki Lajos 2019 Bevezetés A responsive web design tervezési technika által létrehozott web oldalak skálázhatók, a web oldalt mobil telefon, táblagép és asztali számítógép böngészőjével

Részletesebben

Szövegszerkesztés alapok WORD Formázások

Szövegszerkesztés alapok WORD Formázások Szövegszerkesztés alapok WORD Formázások A formázás sorrendje 1. Begépelem a szöveget folyamatosan 2. Helyesírást ellenőrzök 3. Entert (bekezdés) vagy Shift + Entert ütök 4. Formázok KIJELÖLÖM A FORMÁZANDÓ

Részletesebben

VirtueMart bővítmény letölthető termékek eladásához

VirtueMart bővítmény letölthető termékek eladásához Kézikönyv a VirtueMart letölthető termékek bővítményhez. Ez a bővítmény lehetővé teszi a digitális termékek fizetős, vagy ingyenes, vagy regisztráláshoz kötött letöltését. Pld.: Szoftverek, e-könyvek,

Részletesebben

Alapvető beállítások elvégzése Normál nézet

Alapvető beállítások elvégzése Normál nézet Alapvető beállítások elvégzése Normál nézet A Normál nézet egy egyszerűsített oldalképet mutat. Ez a nézet a legalkalmasabb a szöveg beírására, szerkesztésére és az egyszerűbb formázásokra. Ebben a nézetben

Részletesebben

Tájékoztató a szakdolgozat elektronikus feltöltéséről

Tájékoztató a szakdolgozat elektronikus feltöltéséről Tájékoztató a szakdolgozat elektronikus feltöltéséről Tisztelt hallgató mielőtt belekezd a szakdolgozata feltöltésébe az elektronikus felületen kérem, hogy figyelmesen olvassa el a tájékoztatót. Csak akkor

Részletesebben

FELHASZNÁLÓI KÉZIKÖNYV

FELHASZNÁLÓI KÉZIKÖNYV FELHASZNÁLÓI KÉZIKÖNYV SZEGED VÁROS KÖZLEKEDÉSE 1.00 verzió Dátum: 2012.02.29. Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...

Részletesebben

A számítógép beállításainak megváltoztatása

A számítógép beállításainak megváltoztatása Megjelenés és témák Először tekintsük át, hogy hogyan lehet a képernyőn megjelenő elemek küllemét módosítani. Válasszuk a Start menü Vezérlőpultban a Megjelenés és témák hivatkozást. Itt kattintsunk a

Részletesebben

Egyes esetekben e fejezet keretében készítjük el a Tartalomjegyzéket is, melynek technikai megvalósításáról majd az 5.6.6. fejezetben olvashat.

Egyes esetekben e fejezet keretében készítjük el a Tartalomjegyzéket is, melynek technikai megvalósításáról majd az 5.6.6. fejezetben olvashat. Szövegszerkesztés 1. Bevezetés Ebben a modulban a szövegszerkesztési szabályokat kívánjuk bemutatni. Feltételezzük, az olvasó már ismer legalább egy szövegszerkesztő programot, így annak teljes körű bemutatására

Részletesebben

Online hirdetési specifikáció. Fidelio.hu

Online hirdetési specifikáció. Fidelio.hu Online hirdetési specifikáció Fidelio.hu Tartalomjegyzék ÁLTALÁNOS TUDNIVALÓK, FONTOS INFORMÁCIÓK... 3 1. Banner formátumok... 3 1.1 Medium Rectangle... 3 1.3 Roadblock... 3 1.4 Super leaderboard... 3

Részletesebben

Egy szabadon választott cég weboldalának elemzése (http://educatio.hu)

Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) 1. Vizsgálat az általános webergonómiai alapelvek szempontjából 1.1. Megjelenés, nyitóoldal, menürendszer (navigáció) Az educatio.hu

Részletesebben

Információs technológiák 2. Gy: CSS, JS alapok

Információs technológiák 2. Gy: CSS, JS alapok Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés

Részletesebben

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)

Részletesebben

SZE INFORMATIKAI KÉZÉS 1

SZE INFORMATIKAI KÉZÉS 1 SZE INFORMATIKAI KÉZÉS 1 A feladat megoldása során a Word 2010 használata a javasolt. Ebben a feladatban a következőket fogjuk gyakorolni: A papírméret és a margók beállítása. Stílusok létrehozása, módosítása

Részletesebben

Webfejlesztés Szempontok

Webfejlesztés Szempontok Webfejlesztés Szempontok A webfejlesztés alapjai Miért készülnek weboldalak? Valamit nyújtani szeretnénk a felhasználónak. A webfejlesztés során elsősorban a felhasználók igényeit vesszük figyelembe. Nevezhetjük

Részletesebben

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (DEBRECEN VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2013.09.05

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (DEBRECEN VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2013.09.05 FELHASZNÁLÓI KÉZIKÖNYV (DEBRECEN VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2013.09.05 Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...

Részletesebben

Duál Reklám weboldal Adminisztrátor kézikönyv

Duál Reklám weboldal Adminisztrátor kézikönyv Duál Reklám weboldal Adminisztrátor kézikönyv Dokumentum Verzió: 1.0 Készítette: SysWork Szoftverház Kft. 1. oldal Felület elérése Az adminisztrációs felület belépés után érhető el. Belépés után automatikusan

Részletesebben

StartÜzlet online számlázó modul Használati Útmutató

StartÜzlet online számlázó modul Használati Útmutató StartÜzlet online számlázó modul Használati Útmutató 1 Tartalomjegyzék Alapvető tudnivalók...3 Használatba vétel előtt megadandó és ellenőrizendő adatok...3 Alanyi adómentes vállalkozás esetén...3 Számla

Részletesebben

Egzinet Partner Portál

Egzinet Partner Portál Egzinet Partner Portál Adminisztrációs felület Oktatási segédanyag 1 Készítsd el saját weboldalad! I. Bejelentkezés Minden Egzinet Partner Portál a http://admin.egzinet.hu adminisztrációs felületen keresztül

Részletesebben

DebitTray program Leírás

DebitTray program Leírás DebitTray program Leírás Budapest 2015 Bevezetés Egy-egy kintlévőséghez tartozó határidő elmulasztásának komoly következménye lehet. Éppen ezért a Kintlévőség kezelő program főmenü ablakában a program

Részletesebben

Táblázatkezelés Excel XP-vel. Tanmenet

Táblázatkezelés Excel XP-vel. Tanmenet Táblázatkezelés Excel XP-vel Tanmenet Táblázatkezelés Excel XP-vel TANMENET- Táblázatkezelés Excel XP-vel Témakörök Javasolt óraszám 1. Bevezetés az Excel XP használatába 4 tanóra (180 perc) 2. Munkafüzetek

Részletesebben

6.1.1.2 Új prezentáció létrehozása az alapértelmezés szerinti sablon alapján.

6.1.1.2 Új prezentáció létrehozása az alapértelmezés szerinti sablon alapján. 6. modul Prezentáció A modul a prezentációkészítéshez szükséges ismereteket kéri számon. A sikeres vizsga követelményei: Tudni kell prezentációkat létrehozni és elmenteni különböző fájl formátumokban A

Részletesebben

Gyakorló 9. feladat megoldási útmutató

Gyakorló 9. feladat megoldási útmutató Gyakorló 9. feladat megoldási útmutató 1. Minek a leírása a következő? Aktív hálózati hardver eszközök (pl.: routerek) és szoftverek segítségével létrehozott biztonsági rendszer két hálózat (jellemzően

Részletesebben

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL a., Begépelés Az adatok bevitelének legegyszerűbb módja, ha a táblázat kijelölt cellájába beírjuk őket. - számok (numerikus adatok) -

Részletesebben

Az MS Excel táblázatkezelés modul részletes tematika listája

Az MS Excel táblázatkezelés modul részletes tematika listája Az MS Excel táblázatkezelés modul részletes tematika listája A táblázatkezelés alapjai A táblázat szerkesztése A táblázat formázása A táblázat formázása Számítások a táblázatban Oldalbeállítás és nyomtatás

Részletesebben

Az alábbiakban szeretnénk segítséget nyújtani Önnek a CIB Internet Bankból történő nyomtatáshoz szükséges böngésző beállítások végrehajtásában.

Az alábbiakban szeretnénk segítséget nyújtani Önnek a CIB Internet Bankból történő nyomtatáshoz szükséges böngésző beállítások végrehajtásában. Tisztelt Ügyfelünk! Az alábbiakban szeretnénk segítséget nyújtani Önnek a CIB Internet Bankból történő nyomtatáshoz szükséges böngésző beállítások végrehajtásában. A CIB Internet Bankból történő nyomtatás

Részletesebben

Közoktatási Statisztika Tájékoztató 2012/2013. Használati útmutató

Közoktatási Statisztika Tájékoztató 2012/2013. Használati útmutató Közoktatási Statisztika Tájékoztató 2012/2013 Tartalomjegyzék 1. Technikai információk... 2 2. Publikus felület... 2 2.1 Bejelentkezés... 2 2.2 Összesítés... 3 2.2.1 Statisztikai tábla megtekintése...

Részletesebben

I-SZÁMLA KFT. VEVŐI FELHASZNÁLÓI FIÓK HASZNÁLATI ÚTMUTATÓ

I-SZÁMLA KFT. VEVŐI FELHASZNÁLÓI FIÓK HASZNÁLATI ÚTMUTATÓ I-SZÁMLA KFT. VEVŐI FELHASZNÁLÓI FIÓK HASZNÁLATI ÚTMUTATÓ Tartalomjegyzék 1 Vevői felhasználói fiók... 3 2 Adataim... 3 3 Szállítók... 4 4 Számláim... 5 4.1 E-számla listatábla... 5 4.2 Keresési funkciók...

Részletesebben

Microsoft Office PowerPoint 2007 fájlműveletei

Microsoft Office PowerPoint 2007 fájlműveletei Microsoft Office PowerPoint 2007 fájlműveletei Program megnyitása Indítsuk el valamelyik tanult módszerrel a 2007-es verziót. Figyeljük meg, hogy most más felületet kapunk, mint az eddigi megszokott Office

Részletesebben

Az FMH weboldal megnyitásakor megjelenő angol nyelvű üzenetek eltüntetése

Az FMH weboldal megnyitásakor megjelenő angol nyelvű üzenetek eltüntetése Az FMH weboldal megnyitásakor megjelenő angol nyelvű üzenetek eltüntetése A Java kliensprogram telepítése, és megfelelő beállítása szükséges az FMH weblap megfelelő működéséhez. Ha nincs telepítve vagy

Részletesebben

A mobil alkalmazás. Felhasználói útmutató - ios

A mobil alkalmazás. Felhasználói útmutató - ios Program megnevezése: Magyarország-Szlovákia Határon Átnyúló Együttműködési Program 2007-2013 Pályázat címe: HUSK JOBs portal Közös munkaerő-piaci információs rendszer A vezető partner: Centrum pokročilých

Részletesebben

Információs technológiák 1. Gy: HTML alapok

Információs technológiák 1. Gy: HTML alapok Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN 2017.09.28 Hogyan kezdjünk hozzá? Készítsünk egy mappát, legyen a neve mondjuk: Web Ez lesz a munkakönyvtárunk, ide kerül majd minden létrehozott

Részletesebben

A Nobel díj története és a magyar fizikai Nobel díjasok

A Nobel díj története és a magyar fizikai Nobel díjasok 1. feladat A Nobel díj története és a magyar fizikai Nobel díjasok A weblapok híres magyar tudósok fényképeit és rövid életrajzukat kell, hogy tartalmazzák. A tudosok könyvtárban találod a meg a képeket

Részletesebben

Szeged Megyei Jogú Város Integrált e-önkormányzati Rendszerének Térinformatikai Modul felhasználói kézikönyve. Internetes verzió

Szeged Megyei Jogú Város Integrált e-önkormányzati Rendszerének Térinformatikai Modul felhasználói kézikönyve. Internetes verzió Szeged Megyei Jogú Város Integrált e-önkormányzati Rendszerének Térinformatikai Modul felhasználói kézikönyve Internetes verzió 2012. 04. 05. Tartalomjegyzék 1. Bevezetés... 3 2. Az alkalmazás felépítése...

Részletesebben

Összetett feladatok. Föld és a Hold

Összetett feladatok. Föld és a Hold 1. feladat Összetett feladatok Föld és a Hold Készíts weblapot, ahol a Földet és a Holdat mutatod be! A weblaphoz tartozó nyers szöveg a fold.txt és a hold.txt tartalmazza. A forrásban megtalálod a fold.jpg

Részletesebben

A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI)

A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI) Mgr. Námesztovszki Zsolt A WORDPRESS TESTRESZABÁSA (MEGJELENÉS MENÜ ELEMEI) Eötvös Loránd Tudományegyetem, Pedagógiai és Pszichológiai Kar Oktatásinformatikai rendszerek - szöveggyűjtemény Budapest, 2013.

Részletesebben

Sú gó az ASIR/PA IR Públikús felú lethez

Sú gó az ASIR/PA IR Públikús felú lethez Sú gó az ASIR/PA IR Públikús felú lethez Súgó a magyarországi központi Agrárstatisztikai és Piaci Árinformációs rendszer publikus moduljához. 1 Publikus felhasználói regisztráció A publikus felület Regisztráció

Részletesebben

Készítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül!

Készítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítsünk weblapot könnyedén! A Google Sites használata Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítette: Tratnyek Csilla 2010.03.01. Készítsünk weblapot

Részletesebben

AÁ OK sablon. Tartalomjegyzék. Használati útmutató

AÁ OK sablon. Tartalomjegyzék. Használati útmutató AÁ OK sablon Használati útmutató Tartalomjegyzék Dia elrendezésének kiválasztása... 2 Szöveg formázása... 3 Ajánlott betűformázások... 4 Színek használata... 5 Kép beillesztése... 6 Diagram formázása...

Részletesebben

Tartalomjegyzék. 1. Rövid áttekintés Az alkalmazás bemutatása Vonalak Részletes lista... 5

Tartalomjegyzék. 1. Rövid áttekintés Az alkalmazás bemutatása Vonalak Részletes lista... 5 Tartalomjegyzék 1. Rövid áttekintés... 3 2. Az alkalmazás bemutatása... 4 2.1. Vonalak... 5 2.1.1. Részletes lista... 5 2.1.2. Vonalak oldal keresés a részletes listában... 6 2.1.3. Vonalak oldal egyszerű

Részletesebben

CIB Internet Bank asztali alkalmazás Hasznos tippek a telepítéshez és a használathoz Windows operációs rendszer esetén

CIB Internet Bank asztali alkalmazás Hasznos tippek a telepítéshez és a használathoz Windows operációs rendszer esetén CIB Internet Bank asztali alkalmazás Hasznos tippek a telepítéshez és a használathoz Windows operációs rendszer esetén A CIB Internet Bankba való webes felületen keresztül történő belépés az Oracle által

Részletesebben

Dombóvár Város Arculati Kézikönyve

Dombóvár Város Arculati Kézikönyve Dombóvár Város Arculati Kézikönyve tartalomjegyzék 1. Általános koncepció 4. Elektronikus eszközök 4.1 Honlap 2. Alapvető arculati elemek 4.2 Hírlevél 2.1 Logó kinézet 2.2 Logó szerkezet 2.3 Logó színek

Részletesebben

Új Nemzedék Központ. EFOP pályázatok online beszámoló felülete. Felhasználói útmutató

Új Nemzedék Központ. EFOP pályázatok online beszámoló felülete. Felhasználói útmutató Új Nemzedék Központ EFOP pályázatok online beszámoló felülete Felhasználói útmutató Tartalom 1. Bejelentkezés... 2 1.1. Első bejelentkezés... 2 1.2. Elfelejtett jelszó... 3 2. Saját adatok... 4 3. Dokumentumok...

Részletesebben

TÁJÉKOZTATÓ A SZAKIRÁNYÚ TOVÁBBKÉPZÉSI SZAKOK JELENTKEZÉSI FELÜLETÉHEZ

TÁJÉKOZTATÓ A SZAKIRÁNYÚ TOVÁBBKÉPZÉSI SZAKOK JELENTKEZÉSI FELÜLETÉHEZ TÁJÉKOZTATÓ A SZAKIRÁNYÚ TOVÁBBKÉPZÉSI SZAKOK JELENTKEZÉSI FELÜLETÉHEZ Jelentkezési útmutató I. Bevezető A szakirányú továbbképzési szakokra történő jelentkezés a Probono rendszer felületén keresztül történik.

Részletesebben

Első belépés az Office 365 rendszerbe

Első belépés az Office 365 rendszerbe Első belépés az Office 365 rendszerbe Az Office 365 rendszerbe való első belépéshez szükséges hozzáférési adatokat a rendszergazdától emailben, telefonon, vagy papír alapon kapja meg. Ilyen formátumú adatok

Részletesebben

Feladatok megoldásai

Feladatok megoldásai 1. Az oszlopszélességet az oszlopszegélyre való dupla kattintással állítsuk be! Mit tapasztalunk? Az oszlopszegélyre való dupla kattintáskor az Excel az oszlopban található leghosszabb bejegyzés hosszúsága

Részletesebben

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (TATABÁNYA VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum:

FELHASZNÁLÓI KÉZIKÖNYV SCHEDULEDETAIL KEZELÉSI ÚTMUTATÓ (TATABÁNYA VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: FELHASZNÁLÓI KÉZIKÖNYV (TATABÁNYA VÁROS KÖZLEKEDÉSE) 1.00 verzió Dátum: 2012.02.16 Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...

Részletesebben

Tájékoztató. Használható segédeszköz: -

Tájékoztató. Használható segédeszköz: - A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosítószáma és megnevezése 54 213 05 Szoftverfejlesztő Tájékoztató A vizsgázó az első lapra írja fel a nevét!

Részletesebben

ContractTray program Leírás

ContractTray program Leírás ContractTray program Leírás Budapest 2015 Bevezetés Egy-egy szerződéshez tartozó határidő elmulasztásának komoly gazdasági következménye lehet. Éppen ezért a Szerződés kezelő program főmenü ablakában a

Részletesebben

WordPress segédlet. Bevezető. Letöltés. Telepítés

WordPress segédlet. Bevezető. Letöltés. Telepítés WordPress segédlet Bevezető A WordPress egy ingyenes tartalomkezelő rendszer (Content Management System - CMS), amely legnagyobb előnye az egyszerű telepítés és a letisztult kezelhetőség és a változatos

Részletesebben

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

DOKUMENTUMOK TÖMEGES LETÖLTÉSE ÉTDR-BŐL

DOKUMENTUMOK TÖMEGES LETÖLTÉSE ÉTDR-BŐL DOKUMENTUMOK TÖMEGES LETÖLTÉSE ÉTDR-BŐL 2017-06-19 Felhívjuk a figyelmet, hogy az ÉTDR a mindenkori jogszabályi keretek között működik, a csatlakozószerveknek és személyeknek a mindenkori jogszabály szerint

Részletesebben

FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ

FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ TARTALOMJEGYZÉK 1. BELÉPÉS A MOBIL BROKER KERESKEDÉSI RENDSZERBE... 3 2. A MOBIL BROKER HASZNÁLATA... 3 3. MOBIL BROKER IPHONE ALKALMAZÁS...

Részletesebben

GLPI V1.0. 2013 Felhasználói leírás. Informatikai Technológiai és Üzemeltetési Igazgatóság

GLPI V1.0. 2013 Felhasználói leírás. Informatikai Technológiai és Üzemeltetési Igazgatóság 2013 Felhasználói leírás V1.0 Informatikai Technológiai és Üzemeltetési Igazgatóság Tartalom ÁLTALÁNOS ISMERTETŐ... 2 HIBA BEJELENTÉS ÉS A MEGOLDÁS FOLYAMATA... 3 FELHASZNÁLÓI LÉPÉSEK... 6 Belépés... 6

Részletesebben

Apple ID készítése és vásárlás az AppStore áruházban

Apple ID készítése és vásárlás az AppStore áruházban Apple ID készítése és vásárlás az AppStore áruházban Ahhoz, hogy bármilyen ios-t használó eszközt tudjunk, rendeltetésszerűen használni szükségünk van egy úgynevezett Apple ID-re. Ennek segítségével jogosultságot

Részletesebben

médiaajánlat Szilveszter.hu

médiaajánlat Szilveszter.hu médiaajánlat Bemutatkozás A Magyarország egyetlen online magazinja, amely szilveszterhez kapcsolódó általános tartalmakat, valamint a téli szezonban leginkább érdeklődésre számot tartó témákat ölel fel.

Részletesebben

VÁLTOZÁSOK AZ ÉTDR MŰKÖDÉSÉBEN

VÁLTOZÁSOK AZ ÉTDR MŰKÖDÉSÉBEN VÁLTOZÁSOK AZ ÉTDR MŰKÖDÉSÉBEN 1.3.1.16 VERZIÓ Jelen jegyzet az ÉTDR 2015. 09. 09. napján üzembe helyezett új verziója (1.3.1.16) kapcsán a szoftver újdonságaira hívja fel a figyelmet és az eddigi működés

Részletesebben

ECDL Információ és kommunikáció

ECDL Információ és kommunikáció 1. rész: Információ 7.1 Az internet 7.1.1 Fogalmak és szakkifejezések 7.1.2 Biztonsági megfontolások 7.1.3 Első lépések a webböngésző használatában 7.1.4 A beállítások elévégzése 7.1.1.1 Az internet és

Részletesebben

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat WEBLAPFEJLESZTÉS Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció Célok Weboldalakkal szemben állított követelmények: - vonzó, egyszerű, igényes, harmonikus színvilág - felhasználóbarát

Részletesebben

médiaajánlat Szilveszter.hu

médiaajánlat Szilveszter.hu médiaajánlat Bemutatkozás A Magyarország egyetlen online magazinja, amely szilveszterhez kapcsolódó általános tartalmakat, valamint a téli szezonban leginkább érdeklődésre számot tartó témákat ölel fel.

Részletesebben

Diagram formázása. A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása

Diagram formázása. A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása Ha ezen elemeknek a betűtípusát, betűstílusát, betűméretét, betűszínét és az elem hátterét akarjuk formázni, akkor

Részletesebben

A WEBOLDAL LEGFONTOSABB ELEMEI, AVAGY MITŐL VÁSÁROL A LÁTOGATÓ? ELEMEZZÜK KI EGYÜTT HONLAPJÁT!

A WEBOLDAL LEGFONTOSABB ELEMEI, AVAGY MITŐL VÁSÁROL A LÁTOGATÓ? ELEMEZZÜK KI EGYÜTT HONLAPJÁT! A WEBOLDAL LEGFONTOSABB ELEMEI, AVAGY MITŐL VÁSÁROL A LÁTOGATÓ? ELEMEZZÜK KI EGYÜTT HONLAPJÁT! 2013. Szeptember 11. 1 28 weboldal ellenőrző lépés Miért kell a weboldal? Mi a célunk vele? 1. A domain Könnyen

Részletesebben

Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán

Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán Bevezetés Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán A QGIS program egy nyiltforrású asztali térinformatikai program, mely a http://www.qgis.org oldalról tölthető le. Ebben a kis

Részletesebben

A felhasználói interakciók alapelvei. Losteiner Dávid

A felhasználói interakciók alapelvei. Losteiner Dávid A felhasználói interakciók alapelvei Losteiner Dávid Bevezetés Manapság főleg grafikus (GUI, weboldal) A vele dolgozó hatékony munkavégzését szolgálja Lehetőleg elrejti a belső működést Biztosítja a munka

Részletesebben

Szövegszerkesztés. Microsoft Office Word 2010

Szövegszerkesztés. Microsoft Office Word 2010 Szövegszerkesztés Microsoft Office Word 2010 Szövegformázás A dokumentumszöveg formátumát meghatározó felépítés formázott - szöveg, - táblázat, - kép + stílusok + eszköztár beállítások Karakterek Bekezdések...

Részletesebben

ÖNKORMÁNYZATOK ÉS KISTÉRSÉGI TÁRSULÁSOK RÉSZÉRE

ÖNKORMÁNYZATOK ÉS KISTÉRSÉGI TÁRSULÁSOK RÉSZÉRE Helyi önkormányzatok és Többcélú Kistérségi Társulások normatív hozzájárulásainak és normatív, kötött felhasználású támogatásainak igénylési rendszere 2008. évre FELHASZNÁLÓI KÉZIKÖNYV ÖNKORMÁNYZATOK ÉS

Részletesebben

30 kreditpontot érő KRÉTA kurzushoz kapcsolódó folyamatok

30 kreditpontot érő KRÉTA kurzushoz kapcsolódó folyamatok 30 kreditpontot érő KRÉTA kurzushoz kapcsolódó folyamatok Ebben a dokumentumban lépésről lépésre leírjuk a "Felkészítés a köznevelési regisztrációs és tanulmányi alaprendszer (KRÉTA) pedagógusmoduljaihoz"

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán

Részletesebben

HBCSKódex. Felhasználói kézikönyv. HBCS Audit KFT 2015.

HBCSKódex. Felhasználói kézikönyv. HBCS Audit KFT 2015. HBCSKódex Felhasználói kézikönyv HBCS Audit KFT 2015. Tartalomjegyzék Regisztrálás:... 3 Bejelentkezés:... 3 Általános információk az egyes funkciók használatáról... 4 Keresés:... 4 Rendezés:... 4 Kereszthivatkozások:...

Részletesebben

FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ

FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ FELHASZNÁLÓI ÚTMUTATÓ A MOBIL BROKER KERESKEDÉSI FELÜLET HASZNÁLATÁHOZ TARTALOMJEGYZÉK 1. BELÉPÉS A MOBIL BROKER KERESKEDÉSI RENDSZERBE... 3 2. A MOBIL BROKER HASZNÁLATA... 4 3. MOBIL BROKER IPHONE ALKALMAZÁS...

Részletesebben

Magyar Nemzeti Bank - Elektronikus Rendszer Hitelesített Adatok Fogadásához ERA. Elektronikus aláírás - felhasználói dokumentáció

Magyar Nemzeti Bank - Elektronikus Rendszer Hitelesített Adatok Fogadásához ERA. Elektronikus aláírás - felhasználói dokumentáció ERA Elektronikus aláírás - felhasználói dokumentáció Tartalomjegyzék 1. Bevezető... 3 1.1. Általános információk... 3 2. DesktopSign... 3 2.1. Általános információk... 3 2.2. Telepítés... 3 3. MNBSubscriber...

Részletesebben

Digitális aláíró program telepítése az ERA rendszeren

Digitális aláíró program telepítése az ERA rendszeren Digitális aláíró program telepítése az ERA rendszeren Az ERA felületen a digitális aláírásokat a Ponte webes digitális aláíró program (Ponte WDAP) segítségével lehet létrehozni, amely egy ActiveX alapú,

Részletesebben

Az alábbiakban a portál felépítéséről, illetve az egyes lekérdező funkciókról kaphat részletes információkat.

Az alábbiakban a portál felépítéséről, illetve az egyes lekérdező funkciókról kaphat részletes információkat. Súgó Az alábbiakban a portál felépítéséről, illetve az egyes lekérdező funkciókról kaphat részletes információkat. A lekérdező rendszer a Hírközlési Szolgáltatások és Interfész bejelentések, valamint az

Részletesebben

Digitális aláíró program telepítése az ERA rendszeren

Digitális aláíró program telepítése az ERA rendszeren Digitális aláíró program telepítése az ERA rendszeren Az ERA felületen a digitális aláírásokat a Ponte webes digitális aláíró program (Ponte WDAP) segítségével lehet létrehozni, amely egy ActiveX alapú,

Részletesebben

ServiceTray program Leírás

ServiceTray program Leírás ServiceTray program Leírás Budapest 2015 Bevezetés szerviz munkalapok státuszai a Törölve és Lezárva státuszt leszámítva a munkalap különböző nyitott állapotát jelzik, melyek valamilyen tevékenységet jeleznek.

Részletesebben

MÉRY Android Alkalmazás

MÉRY Android Alkalmazás MÉRY Android Alkalmazás Felhasználói kézikönyv Di-Care Zrt. Utolsó módosítás: 2014.06.12 Oldal: 1 / 7 Tartalomjegyzék 1. Bevezetés 3 1.1. MÉRY Android alkalmazás 3 1.2. A MÉRY Android alkalmazás funkciói

Részletesebben

Jelentkezési lap képző szervek részére

Jelentkezési lap képző szervek részére Jelentkezési lap képző szervek részére Felhasználói segédlet Tartalomjegzék Belépés Jelentkezési lap felület Kézi kitöltés menete Alapadatok megadása Korábban megszerzett vezetői engedély adatai Személyes

Részletesebben

Táblázatok. Táblázatok beszúrása. Cellák kijelölése

Táblázatok. Táblázatok beszúrása. Cellák kijelölése Táblázatok Táblázatok beszúrása A táblázatok sorokba és oszlopokba rendezett téglalap alakú cellákból épülnek fel. A cellák tartalmazhatnak képet vagy szöveget. A táblázatok használhatók adatok megjelenítésére,

Részletesebben