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

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

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

Átírás

1 1 V Abonyi-Tóth Andor, ELTE IK MOT 2 Néhány alapfogalom 1

2 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: 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: 2

3 Ergonómikus tárgyak 5 6 3

4 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: Használhatóság A használhatóság (usability) fogalmát a szakirodalomban, illetve a különböző szabványokban eltérően definiálják. Tekintsünk át ezek közül néhányat! ISO (Guidance on Usability, 1998) definíció: Annak mértéke, ahogy a terméket meghatározott felhasználók meghatározott célokért eredményesen, hatékonyan és elégedetten használják egy adott környezetben. [1] ISO/IEC 9126 (Software product evaluation - Quality characteristics and guidelines for their use,1991) definíció: A használhatóság a jellemzők azon összegzése, amelyet a használathoz szükséges erőfeszítés mértéke, illetve a felhasználók által arról kialakított értékelés határoz meg. [2] 8 4

5 Használhatóság A szabvány továbbfejlesztett változatában (ISO/IEC FDIS ) a használhatóság a következőképp van meghatározva: A szoftver-termék azon adottsága, hogy a felhasználó számára érthető, tanulható, használható és vonzó, amikor azt meghatározott feltételek mellett használja. Az ISO szabványokban a használhatóság két szerepkörben is megjelenik, egyrészt egy szoftver tervezési tevékenységként, másrészt egy olyan átfogó célként, hogy a szoftver teljesítse a felhasználói igényeket (Bevan, 1999) [3]. 9 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 5

6 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? 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 6

7 Irodalom 1. ISO (1992/2001). Ergonomics Requirements for Office with Visual Display Terminals (VDTs), Geneva, International Organization for Standardization. 2. ISO/IEC 9126, Software Product Evaluation-Quality, Characteristics and Guidelines for the User, Geneva, International Organization for Standardization. 3. Nigel Bevan (1999): Quality in Use: Meeting User Needs for Quality, Journal of System and Software 4. Jakob Nielsen (2003): Usability 101: Introduction to Usability, 5. Jakob Nielsen (1993): Usability Engineering, Morgan Kaufmann, San Francisco. 6. Haidar S. Jabbar, T. V. Gopal, and Sattar J. Aboud. (2007) An integrated quantitative assessment model for usability engineering. Journal of Computer Science, 3(5): Usability Expert pólók 14 7

8 15 A tervezés folyamata UX tervezés Analysis Phase Meet with key stakeholders to set vision Include usability tasks in the project plan Assemble a multidisciplinary team to ensure complete expertise Develop usability goals and objectives Conduct field studies Look at competitive products Create user profiles Develop a task analysis Document user scenarios Document user performance requirements 16 8

9 UX tervezés Design Phase Begin to brainstorm design concepts and metaphors Develop screen flow and navigation model Do walkthroughs of design concepts Begin design with paper and pencil Create low-fidelity prototypes Conduct usability testing on lowfidelity prototypes Create high-fidelity detailed design Do usability testing again Document standards and guidelines Create a design specification 17 UX tervezés Implementation Phase Do ongoing heuristic evaluations Work closely with delivery team as design is implemented Conduct usability testing as soon as possible Deployment Phase Use surveys to get user feedback Conduct field studies to get info about actual use Check objectives using usability testing 18 9

10 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ó Mockup, wireframe Nem működő prototípus Példa Mockup használatra a web-fejlesztésben Mock-up Arculatterv

11 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: Vizsgálati módszerek 11

12 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) 23 Lássunk néhány módszert! 24 12

13 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. 25 Szemmozgás vizsgálat

14 Szemmozgásvizsgálat (reprezentáció) Mozgás útvonal, időzés hossza Hőtérképes megjelenítés Használhatóság elemzési feladat 14

15 1. beadandó feladat Ebben a félévben mi irányelv alapú vizsgálatot fogunk végezni. Mindenki egy megadott webáruházat értékel a kiadott irányelvek alapján. Az eredmények összesítése után levonjuk a megfelelő következtetéseket A felhasználók viselkedése Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 15

16 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 31 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 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 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 32 16

17 33 Felhasználói élmény 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 34 Forrás: 17

18 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 35 Forrás: 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. 36 Forrás: 18

19 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. 37 Forrás: 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 38 Forrás: 19

20 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 39 Forrás: 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 40 Forrás: 20

21 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 41 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 42 Forrás: 21

22 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á 43 Forrás:

23 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 45 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: (http://www.useit.com/alertbox/reading_pattern.html 46 23

24 Pásztázás módja Forrás: 47 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 48 24

25 Á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! 49 Á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 50 25

26 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 51 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 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 52 26

27 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. 53 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ínpreferencián 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 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 54 27

28 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 55 - SZIA, SZIA, ÚJ VAGYOK ITT! HOGY VAGYTOK? - Nyomd meg a CapsLock-ot!! - HUUUUU, KÖSZI, MOST MÁR NEM KELL NYOMVA TARTANOM A SHIFTET! 56 28

29 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 57 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 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 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 58 29

30 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 ) 59 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 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 60 30

31 Jó példa Stíluslappal Stíluslap nélkül 61 Nem annyira jó példa Stíluslappal 62 Stíluslap nélkül 31

32 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> Tipográfia 32

33 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) 65 Példa a kinetikus tipográfiára: 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

34 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="http://fonts.googleapis.com/css?family=tangerine"> <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 67 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

35 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 69 Az alávágás javítja a szövegek megjelenését 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

36 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). 71 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)

37 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. 73 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

38 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é. 75 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

39 77 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

40 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 79 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! 80 40

41 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: 81 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 82 41

42 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 83 Oldalméret Oldalt alkotó fájlok méretének összege Javasolt maximális oldalméret: 100 kilobájt. 84 Pataki, Máté; Abonyi-Tóth, Andor Bevezetés az info-kommunikációs akadálymentesítés világába II. 42

43 Letöltési idő kalkuláció lculator.php 85 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 86 43

44 Folyamatos oldal megjelenés Rossz Jó 87 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! Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 88 44

45 89 Hivatkozások (Linkek) 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 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 90 45

46 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! 91 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

47 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! 93 Már látogatott Linkek 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

48 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! 95 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 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 96 48

49 97 Áttekinthetőség Á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 98 49

50 Zavaró színek Színséma beállítás (tipp) Hasznos oldal:

51 Szövegszerkesztési hibák Nem megfelelő háttér és szöveg színek 51

52 Nem koordinált megjelenés Gyenge minőségű képek használata 52

53 Túl nagy, vagy kis méretű szövegek használata Nem megfelelő háttérkép 53

54 Átlátszó képek nem megfelelő használata 108 Multimédiás elemekkel kapcsolatos ergonómiai elvek 54

55 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 109 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)

56 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 111 Manipuláció a képekkel Egy kép két különböző részlete mást-mást sugallhat! 112 Forrás: 56

57 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ó. 113 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

58 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ó 115 Hardver és szoftver

59 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 117 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

60 119 Statisztika a böngészőprogramokról 120 Statisztika az operációs rendszerekről 60

61 121 Statisztika a mobil operációs rendszerekről 122 Technikai tesztelés 61

62 Hiányzó komponensek Néhány JAVA applet csak a lokális gépen működik CLICK 62

63 Ugyanazon weblap különböző platformokon megtekintve 125 Forrás:

64

65 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 129 Forrás: 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 130 Forrás: 65

66 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

67 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 133 Splash képernyő

68 Splash képernyők 135 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

69 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 137 Forrás: 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) 138 Forrás: 69

70 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 139 Forrás: 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.) 140 Forrás: 70

71 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) 141 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 142 Forrás: 71

72 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 143 Forrás: Oldal szerkezet A fontos, kattintható elemeket ugyanarra a helyre, közel az oldal tetejéhez kell elhelyezni 144 Forrás: 72

73 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 145 Forrás: 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 146 Forrás: 73

74 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 147 Forrás: 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 148 Forrás: 74

75 149 Grafika 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 150 Forrás: 75

76 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. 151 Forrás: 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 152 Forrás: 76

77 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 153 Metaforák

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

79 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 157 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

80 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 159 Forrás: 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! Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

81 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. Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 161 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 162 Forrás: 81

82 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. Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 163 Jó példa! 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 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

83 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 ez a rövid távú memória kapacitása 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 165 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) Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

84 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 167 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

85 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.) 169 Oldaltérkép

86 A szokásostól eltérő navigáció 171 A szokásostól eltérő navigáció

87 A szokásostól eltérő navigáció 173 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! 87

88 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 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

89 Nem túl jó 177 Egy fokkal jobb Pillanatnyilag nem üzemel egy oldal, ami nincs is???

90 Helyes 179 Egyedi 404-es oldalak

91 Egyedi 404-es oldalak 181 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)

92 Framek 183 Framek

93 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 Listák 93

94 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ő 187 Forrás: Listák Folyamatos szöveg helyett listát használjunk, ahol lehet A pásztázást segíti a listába rendezés 188 Forrás: 94

95 189 Űrlapok Űrlapelemek Választó kapcsoló (radio gomb) Egymást kizáró opciók, amiből egyet lehet választani. Az új választás felülbírálja a korábbit. Jelölőnégyzet (checkbox) A listából nullát, vagy többet választhat a felhasználó. Az új jelölőnégyzet bejelölése nem törli a korábbi kiválasztásokat. Önmagában akkor áll jelölőnégyzet, ha egy választást akarunk ki-, bekapcsoltatni. Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

96 Űrlapelemek (2.) A jelölőnégyzet a megszokott legyen (négyzet, kijelöléskor X, vagy pipa kerül bele. A választókapcsoló egy kör, amelyben egy másik, tömör kör legyen! A választási csoportokat vizuálisan is el kell különíteni egymástól! Pl. alcímek használata A választókapcsolókat listája viszont nem törhető alcímekkel! Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 191 Űrlapelemek (3.) Függőleges rendben érdemes elhelyezni a listákat, soronként egy választással. A jelölőnégyzetek címkéi állító és aktív megfogalmazások legyenek! A Ne küldjenek tájékoztatót címke helytelen, azért kell bejelölni, hogy valami ne történjen meg. Legördülő menü helyett a választógombok előnyösebbek lehetnek, mert így minden választási lehetőség látszik. 7-8 választási lehetőség felett már indokolt lehet a legördülő menü Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

97 Űrlapelemek (4.) A választógombok listájából az egyik legyen alapértelmezetten kijelölve. Kivétel, ha a választásnak nagy jelentősége van, és nem akarunk senkit megsérteni (pl. férfi/nő) A választógombok listájában az Egyik sem címke is fontos, ha a felhasználó meggondolja magát. A választógombok egy választás tesznek lehetővé, ezért azoknak minden lehetőséget le kell fedniük. Ha ez nem lehetséges, akkor használhatunk egy Továbbiak gombot, beviteli mezővel. Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 193 Űrlapelemek (5.) Az opciók választása történhessen az űrlapelemre, illetve annak címkéjére (<label>)kattintással! A gyakran használt űrlapelemek mellé billentyűkombinációt (accesskey) is érdemes rendelni. A jelölőnégyzeteket és választógombokat csak kivételes esetben (pl. szűrésnél) használjuk akciógombként! Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)

98 Ű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 195 Forrás: Ű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! 196 Forrás: 98

99 Ű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 197 Forrás: Ű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 198 Forrás: 99

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

101 Ű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 201 Forrás: Ű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 202 Forrás: 101

102 Ű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 203 Forrás: 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

103 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 205 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ő

104 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 207 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

105 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 209 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

106 211 Nemzetköziség Nemzetköziség 212 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ő. 106

107 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 213 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!

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

V20130320. Abonyi-Tóth Andor, ELTE IK MOT 1 V20130320 Abonyi-Tóth Andor, ELTE IK MOT 2 Néhány alapfogalom 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA FELHASZNÁLÓI KÉZIKÖNYV. 2015. szeptember

Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA FELHASZNÁLÓI KÉZIKÖNYV. 2015. szeptember Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA 2014 2020 2015. szeptember Készült a Miniszterelnökség Agrár Vidékfejlesztési Programokért Felelős Helyettes Államtitkárság, mint a Magyarország

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

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

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

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

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

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

Ö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

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

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

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

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

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

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

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

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

Csavarda mobil áruház

Csavarda mobil áruház Csavarda mobil áruház Használati útmutató Kérjük, hogy mielőtt elkezdené használni a Csavarda mobil áruház alkalmazást, gondosan olvassa végig ezt a segédletet. TARTALOMJEGYZÉK 1. Letöltés 2. oldal 2.

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

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

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

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

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

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

VARIO Face 2.0 Felhasználói kézikönyv

VARIO Face 2.0 Felhasználói kézikönyv VARIO Face 2.0 Felhasználói kézikönyv A kézikönyv használata Mielőtt elindítaná és használná a szoftvert kérjük olvassa el figyelmesen a felhasználói kézikönyvet! A dokumentum nem sokszorosítható illetve

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

A FileZilla program beállítása az első belépés alkalmával

A FileZilla program beállítása az első belépés alkalmával 6. A záróvizsga-jegyzőkönyv készítése A záróvizsga-jegyzőkönyveketa Karok többsége a jegyzőkönyvkészítésre Dr. Tánczos László által kifejlesztett Access alkalmazás használatával készíti el. A záróvizsga-jegyzőkönyv

Részletesebben

Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével:

Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Alapvető szabályok Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Minden szöveges elem szövegdobozban, objektumban helyezkedik

Részletesebben

LEADER. Helyi Fejlesztési Stratégiák. tervezését támogató alkalmazás

LEADER. Helyi Fejlesztési Stratégiák. tervezését támogató alkalmazás TeIR LEADER Helyi Fejlesztési Stratégiák tervezését támogató alkalmazás Felhasználói útmutató Budapest, 2015. szeptember Tartalomjegyzék 1. BEVEZETŐ... 3 2. AZ ALKALMAZÁS BEMUTATÁSA... 3 2.1. HELYI AKCIÓCSOPORT/TELEPÜLÉS

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

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

Minőségellenőrzési kérdőív kitöltő program Felhasználói kézikönyv

Minőségellenőrzési kérdőív kitöltő program Felhasználói kézikönyv Minőségellenőrzési kérdőív kitöltő program Felhasználói kézikönyv Magyar Könyvvizsgálói Kamara 2010. augusztus 18. Tartalom A program főablaka... 3 A fejléc, a felső menüsor valamint az eszköztár... 4

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

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

KÖNYVTÁRI KATALÓGUS HASZNÁLATI ÚTMUTATÓ

KÖNYVTÁRI KATALÓGUS HASZNÁLATI ÚTMUTATÓ KÖNYVTÁRI KATALÓGUS HASZNÁLATI ÚTMUTATÓ Mi az OPAC? Az OPAC az Online Public Access Catalogue rövidítése. Jelentése olyan számítógépes katalógus, mely nyilvános, bárki számára közvetlenül, általában ingyen

Részletesebben

A CAPICOM ActiveX komponens telepítésének és használatának leírása Windows 7 operációs rendszer és Internet Explorer 9 verziójú böngésző esetén

A CAPICOM ActiveX komponens telepítésének és használatának leírása Windows 7 operációs rendszer és Internet Explorer 9 verziójú böngésző esetén A CAPICOM ActiveX komponens telepítésének és használatának leírása Windows 7 operációs rendszer és Internet Explorer 9 verziójú böngésző esetén Tartalomjegyzék 1. Az Internet Explorer 9 megfelelősségének

Részletesebben

Ismerkedés az új felülettel

Ismerkedés az új felülettel Ismerkedés az új felülettel A 2003-as verzióhoz képes változott a menüszerkezet. Az ablak tetején menüszalag található, amely előtérbe helyezi a legfontosabb parancsokat, így nem kell a program legkülönbözőbb

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

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

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

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel Több oldalas dokumentum készítése MS Word 2010 szövegszerkesztővel Egy többoldalas dokumentummal szemben támasztott követelmények (példa feladaton keresztül bemutatva) Készítsünk hat oldalas dokumentumot,

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

PÉNZTÁR FELHASZNÁLÓI KÉZIKÖNYV

PÉNZTÁR FELHASZNÁLÓI KÉZIKÖNYV PÉNZTÁR FELHASZNÁLÓI KÉZIKÖNYV 4S SOFTWARE KFT 3523 MISKOLC PF.: 71 4ssoftware@4ssoftware.hu Preisler Ferenc Robonyi Teréz TEL.: 46/324-643 20/360-8478 20/980-8864 1. A PROGRAM TELEPÍTÉSE ÉS INDÍTÁSA Lehetőség

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

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

Az MS Word szövegszerkesztés modul részletes tematika listája

Az MS Word szövegszerkesztés modul részletes tematika listája Az MS Word szövegszerkesztés modul részletes tematika listája A szövegszerkesztés alapjai Karakter- és bekezdésformázás Az oldalbeállítás és a nyomtatás Tabulátorok és hasábok A felsorolás és a sorszámozás

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

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

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

TERC V.I.P. hardverkulcs regisztráció

TERC V.I.P. hardverkulcs regisztráció TERC V.I.P. hardverkulcs regisztráció 2014. második félévétől kezdődően a TERC V.I.P. költségvetés-készítő program hardverkulcsát regisztrálniuk kell a felhasználóknak azon a számítógépen, melyeken futtatni

Részletesebben

Használati utasítás Prestigio Nobile PER3562. Alapvető műveletek

Használati utasítás Prestigio Nobile PER3562. Alapvető műveletek Használati utasítás Alapvető műveletek Nyomja meg és tartsa benyomva a Power gombot a készülék bekapcsolásához. A készülék automatikusan belép a főmenübe a Kezdő képernyőn az üdvözlő képernyő után. A főmenü

Részletesebben

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat. A feladat megoldásához a Sharepoint Designer 2007 programot használjuk, mely ingyenesen letölthető a Microsoft weboldaláról. Az érettségi aktuális szoftverlistája alapján az Expression Web 2, az Expression

Részletesebben

OKTATÁSKUTATÓ ÉS FEJLESZTŐ INTÉZET TÁMOP-3.1.5/12-2012-0001 Pedagógusképzés támogatása

OKTATÁSKUTATÓ ÉS FEJLESZTŐ INTÉZET TÁMOP-3.1.5/12-2012-0001 Pedagógusképzés támogatása TÁMOP-3.1.1-11/1 XXI. századi közoktatás Technikai tudnivalók a jelentkezéshez Regisztráció A regisztráció az OFI honlapon elérhető A pályázók kizárólag elektronikusan úton jelentkezhetnek az innen elérhető

Részletesebben

KARAKTERFELISMERÉS AZ EVASYS-BEN

KARAKTERFELISMERÉS AZ EVASYS-BEN KARAKTERFELISMERÉS AZ EVASYS-BEN HOL HASZNÁLHATÓ, KI HASZNÁLHATJA A Miskolci Egyetem megvásárolta a kézírásfelismerés (ICR) modult az Evasys legutóbbi licencével együtt. Ezzel lehetőség nyílt a papír alapú

Részletesebben

Tantárgyfelosztás. I. Ellenőrzés. Mielőtt hozzákezd a tantárgyfelosztás tervezéséhez, ellenőrizze le, illetve állítsa be a következőket:

Tantárgyfelosztás. I. Ellenőrzés. Mielőtt hozzákezd a tantárgyfelosztás tervezéséhez, ellenőrizze le, illetve állítsa be a következőket: Tantárgyfelosztás I. Ellenőrzés Mielőtt hozzákezd a tantárgyfelosztás tervezéséhez, ellenőrizze le, illetve állítsa be a következőket: Alkalmazott képes menü > alkalmazottak alapadatai - Alkalmazottak

Részletesebben

POSZEIDON dokumentáció (1.2)

POSZEIDON dokumentáció (1.2) POSZEIDON dokumentáció (1.2) Bevezetés a Poszeidon rendszer használatába I. TELEPÍTÉS Poszeidon alkalmazás letölthető: www.sze.hu/poszeidon/poszeidon.exe Lépések: FUTTATÁS / (FUTTATÁS) / TOVÁBB / TOVÁBB

Részletesebben

Kedves Openhouse-os munkatársak!

Kedves Openhouse-os munkatársak! Kedves Openhouse-os munkatársak! Tapasztalataink szerint a tartalom kezelő rendszerek (Content Management Systems CMS) felhasználói gyakran kevéssé ismerik azokat az elveket, amik segíthetik az oldal eredményesebb

Részletesebben

Felhasználói segédlet a Scopus adatbázis használatához

Felhasználói segédlet a Scopus adatbázis használatához Felhasználói segédlet a Scopus adatbázis használatához Az adatbázis elérése, regisztrálás, belépés Az adatbázis címe: http://www.scopus.com Az adatbázis csak regisztrált, jogosultsággal rendelkező intézmények,

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

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok Oktatási segédanyag Weboldalszerkesztési gyakorlatok Bevezetés A korábbi oktatási segédanyagokban megismertük a weboldalszerkesztés gyakorlatát. Ennek a segédanyagnak a célja, hogy gyakorlati példákon

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

OTP Egészségpénztár OTP Nyugdíjpénztár OTP SZÉP Kártya OTP Cafeteria Nyilatkoztató. https://www.otpportalok.hu. Készítette: Konyicsák Zoltán

OTP Egészségpénztár OTP Nyugdíjpénztár OTP SZÉP Kártya OTP Cafeteria Nyilatkoztató. https://www.otpportalok.hu. Készítette: Konyicsák Zoltán https://www.otpportalok.hu Készítette: Konyicsák Zoltán Tartalom 1 Néhány szó az OTP Portálok programról... 3 1.1 Az OTP Portálok bevezetésének célja... 3 2 Belépés az OTP Portálok oldalra... 4 2.1 A bejelentkezéshez

Részletesebben

A program telepítése. A letöltés lépései: 1. nyissa meg a WEB-oldalt, majd válassza a Letöltés menüpontot: 2. Kattintson a DbérWIN 2015 hivatkozásra:

A program telepítése. A letöltés lépései: 1. nyissa meg a WEB-oldalt, majd válassza a Letöltés menüpontot: 2. Kattintson a DbérWIN 2015 hivatkozásra: A program telepítése A 2015-ös év programja a szokott módon önálló rendszerként telepíthető. Töltse le WEB oldalunkról (http://www.drd-software.hu). A telepítés előtt nem szabad eltávolítania a korábbi

Részletesebben

Ablak és ablakműveletek

Ablak és ablakműveletek Ablak és ablakműveletek 1. Jelölje meg az igaz állításokat! A. A képen egy ablakot lehet látni. B. A Windows operációs rendszerben a mappák és programok ablakokban nyílnak meg. C. Egyszerre csak egy ablakot

Részletesebben

Prezentáció, Nyomtatás előkészítése. Előkészületek

Prezentáció, Nyomtatás előkészítése. Előkészületek Oldalbeállítás A nézetekről szóló fejezetben megismerkedtünk a különböző nézetek formájával, most a nyomtatáshoz elengedhetetlen oldalbeállításokat tanuljuk meg. A Fájl/Oldalbeállításokra kattintva tudjuk

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

Vihar 2.0 rendszer Felhasználói kézikönyv

Vihar 2.0 rendszer Felhasználói kézikönyv Vihar 2.0 rendszer Felhasználói kézikönyv Versenyzői funkciók O l d a l 0 21 Tartalomjegyzék Tartalom Tartalomjegyzék... 0 Bevezető... 1 Felhasználói funkciók... 2 Regisztráció... 2 Támogatott böngészők...

Részletesebben

Előadás készítés. Szentesi Péter 2010

Előadás készítés. Szentesi Péter 2010 Előadás készítés Szentesi Péter 2010 Mire használható? Előadás készítés Előadás segédlet készítés Emlékeztető az előadó számára Kiadvány készítés Prezentáció készítés kezdése A PowerPoint indítás Válasszunk

Részletesebben

Számítógépes alapismeretek 2.

Számítógépes alapismeretek 2. Számítógépes alapismeretek 2. 1/7 Kitöltő adatai: Név: Osztály: E-mail cím: 2/7 Kérdések: Mire szolgál az asztal? Az ideiglenesen törölt fájlok tárolására. A telepített alkalmazások tárolására. A telepített

Részletesebben

ClicXoft programtálca Leírás

ClicXoft programtálca Leírás ClicXoft programtálca Leírás Budapest 2015 Bevezetés A ClicXoft programok bár önálló programok közös technológia alapon lettek kifejlesztve. Emellett közös tulajdonságuk, hogy a hasonló funkciókhoz ugyanaz

Részletesebben

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával A Microsoft OFFICE EXCEL táblázatkezelő program alapjai 2013-as verzió használatával A Microsoft Office programcsomag táblázatkezelő alkalmazása az EXCEL! Aktív táblázatok készítésére használjuk! Képletekkel,

Részletesebben

Felhasználói útmutató Created vasárnap 08 február 2015

Felhasználói útmutató Created vasárnap 08 február 2015 Felhasználói útmutató Created vasárnap 08 február 2015 Jelen útmutató a felhasználói oldalról mutatja be a sasfészekinfo.hu weboldalt. Mindenkinek Oldal elérhetősége: http://sasfeszekinfo.hu http://www.sasfeszekinfo.hu

Részletesebben

BODROGKOZ.COM / HASZNÁLATI ÚTMUTATÓ

BODROGKOZ.COM / HASZNÁLATI ÚTMUTATÓ BODROGKOZ.COM / HASZNÁLATI ÚTMUTATÓ 1. Adminisztrációs felület elérhetősége: http://www.bodrogkoz.com/wp-admin/ vagy http://www.bodrogkoz.com/wp-login.php A honlap tesztidőszak alatt az alábbi címen érhető

Részletesebben

Képek a HTML oldalon

Képek a HTML oldalon Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép

Részletesebben

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. 1, Készítsünk egy 160 160-as új képet. Azért kell ekkora, hogy kényelmesen elférjünk benne, majd

Részletesebben

Ozeki Weboffice. 1. ábra

Ozeki Weboffice. 1. ábra Ozeki Weboffice 1. A program indítása Először vegyük fel a szerkesztendő web oldalt az Edit your Website listába. A piros nyíllal jelölt mezőbe írjuk be a weboldal nevét, majd az OK gombbal érvényesítsük

Részletesebben

TISZTASZOFTVER PROGRAM www.tisztaszoftver.hu ONLINE IGÉNYLÉSI ÚTMUTATÓ

TISZTASZOFTVER PROGRAM www.tisztaszoftver.hu ONLINE IGÉNYLÉSI ÚTMUTATÓ TISZTASZOFTVER PROGRAM www.tisztaszoftver.hu ONLINE IGÉNYLÉSI ÚTMUTATÓ Kedves Látogató! Jelen tájékoztatóban összefoglaljuk a Tisztaszoftver Program keretén belül az arra jogosultak számára ingyenesen

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