V Abonyi-Tóth Andor, ELTE IK MOT
|
|
- Judit Kerekes
- 8 évvel ezelőtt
- Látták:
Á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 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észletesebbenV20120229. 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észletesebbenWEBERGONÓ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észletesebbenHTML é 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észletesebbenA 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észletesebbenHELYES 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észletesebbenw 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észletesebbenWebkezdő. 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észletesebbenWebdesign é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észletesebbenTUDNIVALÓ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észletesebbenSZOLGÁ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észletesebben1. 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észletesebbenDSD. 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észletesebbenHVK 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észletesebbenakadá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észletesebbenMinta 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észletesebbenAkadá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észletesebbenDKÜ 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észletesebben3. 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észletesebbenDokumentum 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észletesebbenECDL 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észletesebbenA 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észletesebben4. 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észletesebbenResponsive 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észletesebbenSzö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észletesebbenVirtueMart 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észletesebbenAlapvető 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észletesebbenTá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észletesebbenFELHASZNÁ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észletesebbenA 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észletesebbenEgyes 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észletesebbenOnline 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észletesebbenEgy 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észletesebbenInformá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észletesebbenHTML é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észletesebbenSZE 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észletesebbenWebfejleszté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észletesebbenFELHASZNÁ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észletesebbenDuá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észletesebbenStartÜ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észletesebbenEgzinet 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észletesebbenDebitTray 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észletesebbenTá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észletesebben6.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észletesebbenGyakorló 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észletesebbenTá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észletesebbenAz 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észletesebbenAz 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észletesebbenKö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észletesebbenI-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észletesebbenMicrosoft 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észletesebbenAz 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észletesebbenA 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észletesebbenInformá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észletesebbenA 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észletesebbenSzeged 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
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észletesebbenA 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észletesebbenSú 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észletesebbenKé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észletesebbenAÁ 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észletesebbenTartalomjegyzé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észletesebbenCIB 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észletesebbenDombó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ó Tartalom 1. Bejelentkezés... 2 1.1. Első bejelentkezés... 2 1.2. Elfelejtett jelszó... 3 2. Saját adatok... 4 3. Dokumentumok...
RészletesebbenTÁ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észletesebbenElső 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észletesebbenFeladatok 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észletesebbenFELHASZNÁ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észletesebbenTá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észletesebbenContractTray 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észletesebbenWordPress 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észletesebbenWeb 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észletesebbenDOKUMENTUMOK 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észletesebbenFELHASZNÁ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észletesebbenGLPI 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észletesebbenApple 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észletesebbenmé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észletesebbenVÁ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észletesebbenECDL 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észletesebbenTartalom. 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észletesebbenmé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észletesebbenDiagram 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észletesebbenA 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észletesebbenBevezeté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észletesebbenA 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észletesebbenSzö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
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észletesebben30 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észletesebben3. 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észletesebbenHBCSKó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észletesebbenFELHASZNÁ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észletesebbenMagyar 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észletesebbenDigitá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észletesebbenAz 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észletesebbenDigitá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észletesebbenServiceTray 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észletesebbenMÉ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észletesebbenJelentkezé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észletesebbenTá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