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 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: http://erg.bme.hu/emania/1999/bara0001/ergo.html
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: http://idegen-szavak.hu/ergon%c3%b3mikus
Ergonómikus tárgyak 5
6
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: http://szofterg.elte.hu/dokuwiki/doku.php?id=alapfogalmak
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
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
13 A tervezés folyamata
UX tervezés 14
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ó. 15 http://www.smallsurfaces.com/wp-content/uploads/2008/09/pho_5-1.jpg http://www.interaction-design.org/images/screendumps/mockup_webpage.gif http://www.hiwtc.com/photo/products/17/01/01/10194.jpg
Mockup, wireframe Nem működő prototípus Példa Mockup használatra a web-fejlesztésben Mock-up Arculatterv 16 http://www.designquote.net/profile/46389/
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: http://webification.com/best-mockup-design-toolsroundup Személyes javaslat: http://lumzy.com/app/ http://builds.balsamiq.com/b/mockups-web-demo/ 17
18 Vizsgálati módszerek
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 http://szofterg.elte.hu/dokuwiki/doku.php?id=modszerek
Lássunk néhány módszert! 20
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
Szemmozgás vizsgálat http://www.gazehawk.com/blog/ 22
Szemmozgásvizsgálat (reprezentáció) Mozgás útvonal, időzés hossza Hőtérképes megjelenítés 23
24 A felhasználók viselkedése Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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)
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)
27 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 28 Forrás: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
38
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
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 40
Pásztázás módja Forrás: http://www.useit.com/alertbox/reading_pattern.html 41
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
Á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
Á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
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)
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
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
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)
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!
50
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 http://tvtropes.org/pmwiki/pmwiki.php/main/trailofbreadcrumbs 51 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 52 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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)
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
Jó példa Stíluslappal Stíluslap nélkül 55
Nem annyira jó példa Stíluslappal 56 Stíluslap nélkül
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 http://css-tricks.com/resolution-specific-stylesheets/
58 Tipográfia
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: http://youtu.be/ddi0zem97fw
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 61
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 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. 64 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 40-60 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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
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 http://dev.opera.com/articles/view/11-tipografia-a-weben/
71 http://unicodelookup.com
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. 72 http://dev.opera.com/articles/view/11-tipografia-a-weben/ http://www.smashingmagazine.com/2008/06/12/blockquotes-and-pull-quotes-examples-and-good-practices/
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
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
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: http://www.cssliquid.com/templates/) 75
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
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
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.
Letöltési idő kalkuláció http://www.t1shopper.com/tools/calculate/downloadca lculator.php 79
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
Folyamatos oldal megjelenés Rossz Jó 81
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)
83 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 84 Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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
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
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
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
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
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)
91 Á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 92
Zavaró színek
Színséma beállítás (tipp) Hasznos oldal: http://colorschemedesigner.com/ 94
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
102 Multimédiás elemekkel kapcsolatos ergonómiai elvek
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
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
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
Manipuláció a képekkel Egy kép két különböző részlete mást-mást sugallhat! 106 Forrás: http://images.cryhavok.org/v/media+manipulation.jpg.html
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
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
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
Hardver és szoftver 110
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
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
113 Statisztika a böngészőprogramokról http://gs.statcounter.com/
114 Statisztika az operációs rendszerekről http://gs.statcounter.com/
115 Statisztika a mobil operációs rendszerekről http://gs.statcounter.com/
116 Technikai tesztelés
Hiányzó komponensek
Néhány JAVA applet csak a lokális gépen működik CLICK
Ugyanazon weblap különböző platformokon megtekintve 119 Forrás: http://www.usability.gov/pdfs/guidelines.htm
http://browsershots.org/ 120
http://browsershots.org/ 121
http://spoon.net/browsers/ 122
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: http://ergomania.blog.hu/2010/11/25/teszteld_a_honlapod_hogy_mukodjon#more2472381
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: http://ergomania.blog.hu/2010/11/25/teszteld_a_honlapod_hogy_mukodjon#more2472381
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
126
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
Splash képernyő 128
Splash képernyők 129
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
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
Oldal szerkezet A fontos, kattintható elemeket ugyanarra a helyre, közel az oldal tetejéhez kell elhelyezni 138 Forrás: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
143 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 144 Forrás: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
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
Metaforák 148
149 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? 150
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
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
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: http://www.usability.gov/pdfs/guidelines.htm
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)
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)
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: http://www.usability.gov/pdfs/guidelines.htm
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!
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)
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
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)
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 e-mailben) 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
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
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
Oldaltérkép 164
A szokásostól eltérő navigáció 165 http://designmodo.com/unusual-navigation-web-design/
A szokásostól eltérő navigáció 166 http://designmodo.com/unusual-navigation-web-design/
A szokásostól eltérő navigáció 167 http://designmodo.com/unusual-navigation-web-design/
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!
URL Megjegyezhető / kitalálható domain nevet kell adni URL Lehetőleg rövid legyen http://www.barbaradoylesmysteryintrigueandmurderwknd.co.nz/ http://www.llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch.com/ 169 Ismerős szavakat használjunk Csak kisbetűket használjunk Az O és 0 összekeverhető HTTP://WWW.BOX0.COM HTTP://WWW.BOXO.COM 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 170
Nem túl jó 171
Egy fokkal jobb Pillanatnyilag nem üzemel egy oldal, ami nincs is??? 172
Helyes 173
Egyedi 404-es oldalak 174 http://www.web-lovers.de/21-kreative-404-seiten/
Egyedi 404-es oldalak 175 http://www.web-lovers.de/21-kreative-404-seiten/
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
Framek 177
Framek 178
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
180 Listák
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: http://www.usability.gov/pdfs/guidelines.htm
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: http://www.usability.gov/pdfs/guidelines.htm
183 Űrlapok
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Űrlapok Ellenőrizzük a bevitt adatokat Elgépeléseket / tévedéseket jelezni kell a felhasználóknak (pl. hiányzó @ jel e-mail 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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
Ű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: http://www.usability.gov/pdfs/guidelines.htm
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 http://www.uxmatters.com/mt/archives/000107.php
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 http://www.lukew.com/resources/articles/webforms_lukew.pdf
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 http://www.lukew.com/resources/articles/webforms_lukew.pdf
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 http://www.lukew.com/resources/articles/webforms_lukew.pdf
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 http://www.uxmatters.com/mt/archives/000107.php
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 http://www.uxmatters.com/mt/archives/000107.php
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 http://www.uxmatters.com/mt/archives/000107.php
205 Nemzetköziség
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 2011. december 31-től kötelező. 206
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
Interaktívitás Az email 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
209
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)
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)
212
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
Ajánlott linkek http://juex.blog.hu/ http://ergomania.blog.hu/ http://www.webreference.com/greatsite.html http://www.useit.com/ http://www.usability.gov/pdfs/guidelines.html http://weblabor.hu/ http://onlinemarketing.blog.hu/ 214
215