1 V20120229 Abonyi-Tóth Andor, ELTE IK MOT 2 Néhány alapfogalom 1
Ergonómia Az ergonómia egyszerűen fogalmazva a dolgozó és a munkakörnyezet közötti kapcsolat tanulmányozása. Ez a szó a görög ergos szóból 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 2
Ergonómikus tárgyak 5 6 3
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 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 9241-11 (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
Használhatóság A szabvány továbbfejlesztett változatában (ISO/IEC FDIS 9126-1) 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
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
Irodalom 1. ISO 9241. (1992/2001). Ergonomics Requirements for Office with Visual Display Terminals (VDTs), Geneva, International Organization for Standardization. 2. ISO/IEC 9126, 2001. 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 http://www.usabilitynet.org/papers/qiuse.pdf 4. Jakob Nielsen (2003): Usability 101: Introduction to Usability, http://www.useit.com/alertbox/20030825.html 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):345-352. 13 Usability Expert pólók 14 7
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
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
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ó. 19 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 20 http://www.designquote.net/profile/46389/ 10
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/ 21 22 Vizsgálati módszerek 11
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 http://szofterg.elte.hu/dokuwiki/doku.php?id=modszerek Lássunk néhány módszert! 24 12
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 http://www.gazehawk.com/blog/ 26 13
Szemmozgásvizsgálat (reprezentáció) Mozgás útvonal, időzés hossza Hőtérképes megjelenítés 27 28 Használhatóság elemzési feladat 14
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. 29 30 A felhasználók viselkedése Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 15
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
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: http://www.usability.gov/pdfs/guidelines.htm 17
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: 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. 36 Forrás: http://www.usability.gov/pdfs/guidelines.htm 18
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: 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 38 Forrás: http://www.usability.gov/pdfs/guidelines.htm 19
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: 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 40 Forrás: http://www.usability.gov/pdfs/guidelines.htm 20
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: http://www.usability.gov/pdfs/guidelines.htm 21
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: http://www.usability.gov/pdfs/guidelines.htm 44 22
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
Pásztázás módja Forrás: http://www.useit.com/alertbox/reading_pattern.html 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
Á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
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
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
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
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 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
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
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
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> 63 http://css-tricks.com/resolution-specific-stylesheets/ 64 Tipográfia 32
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: 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. 66 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 33
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. 68 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 34
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 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. 70 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 35
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). 71 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). 72 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 36
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 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 74 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 37
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 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. 76 http://dev.opera.com/articles/view/11-tipografia-a-weben/ 38
77 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. 78 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/ 39
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
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/) 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
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
Letöltési idő kalkuláció http://www.t1shopper.com/tools/calculate/downloadca 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
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
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
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. 92 46
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. 94 47
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
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
Zavaró színek Színséma beállítás (tipp) Hasznos oldal: http://colorschemedesigner.com/ 100 50
Szövegszerkesztési hibák Nem megfelelő háttér és szöveg színek 51
Nem koordinált megjelenés Gyenge minőségű képek használata 52
Túl nagy, vagy kis méretű szövegek használata Nem megfelelő háttérkép 53
Átlátszó képek nem megfelelő használata 108 Multimédiás elemekkel kapcsolatos ergonómiai elvek 54
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) 110 55
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: http://images.cryhavok.org/v/media+manipulation.jpg.html 56
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 114 57
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 116 58
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 118 59
119 Statisztika a böngészőprogramokról http://gs.statcounter.com/ 120 Statisztika az operációs rendszerekről http://gs.statcounter.com/ 60
121 Statisztika a mobil operációs rendszerekről http://gs.statcounter.com/ 122 Technikai tesztelés 61
Hiányzó komponensek Néhány JAVA applet csak a lokális gépen működik CLICK 62
Ugyanazon weblap különböző platformokon megtekintve 125 Forrás: http://www.usability.gov/pdfs/guidelines.htm http://browsershots.org/ 126 63
http://browsershots.org/ 127 http://spoon.net/browsers/ 128 64
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: 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 130 Forrás: http://ergomania.blog.hu/2010/11/25/teszteld_a_honlapod_hogy_mukodjon#more2472381 65
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. 131 132 66
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ő 134 67
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 136 68
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: 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) 138 Forrás: http://www.usability.gov/pdfs/guidelines.htm 69
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: 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.) 140 Forrás: http://www.usability.gov/pdfs/guidelines.htm 70
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: http://www.usability.gov/pdfs/guidelines.htm 71
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: http://www.usability.gov/pdfs/guidelines.htm Oldal szerkezet A fontos, kattintható elemeket ugyanarra a helyre, közel az oldal tetejéhez kell elhelyezni 144 Forrás: http://www.usability.gov/pdfs/guidelines.htm 72
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: 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 146 Forrás: http://www.usability.gov/pdfs/guidelines.htm 73
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: 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 148 Forrás: http://www.usability.gov/pdfs/guidelines.htm 74
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: http://www.usability.gov/pdfs/guidelines.htm 75
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: 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 152 Forrás: http://www.usability.gov/pdfs/guidelines.htm 76
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 154 77
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? 156 78
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 158 79
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: 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! Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011) 160 80
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: http://www.usability.gov/pdfs/guidelines.htm 81
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) 164 82
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) 166 83
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 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. 168 84
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 170 85
A szokásostól eltérő navigáció 171 http://designmodo.com/unusual-navigation-web-design/ A szokásostól eltérő navigáció 172 http://designmodo.com/unusual-navigation-web-design/ 86
A szokásostól eltérő navigáció 173 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! 87
URL Megjegyezhető / kitalálható domain nevet kell adni URL Lehetőleg rövid legyen http://www.barbaradoylesmysteryintrigueandmurderwknd.co.nz/ http://www.llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch.com/ 175 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 176 88
Nem túl jó 177 Egy fokkal jobb Pillanatnyilag nem üzemel egy oldal, ami nincs is??? 178 89
Helyes 179 Egyedi 404-es oldalak 180 http://www.web-lovers.de/21-kreative-404-seiten/ 90
Egyedi 404-es oldalak 181 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) 182 91
Framek 183 Framek 184 92
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 185 186 Listák 93
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: 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 188 Forrás: http://www.usability.gov/pdfs/guidelines.htm 94
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) 190 95
Ű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) 192 96
Ű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) 194 97
Ű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: 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! 196 Forrás: http://www.usability.gov/pdfs/guidelines.htm 98
Ű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: 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 198 Forrás: http://www.usability.gov/pdfs/guidelines.htm 99
Ű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: 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 200 Forrás: http://www.usability.gov/pdfs/guidelines.htm 100
Ű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 201 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 202 Forrás: http://www.usability.gov/pdfs/guidelines.htm 101
Ű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: 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 204 http://www.uxmatters.com/mt/archives/000107.php 102
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 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ő 206 http://www.lukew.com/resources/articles/webforms_lukew.pdf 103
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 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 208 http://www.uxmatters.com/mt/archives/000107.php 104
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 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 210 http://www.uxmatters.com/mt/archives/000107.php 105
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 2011. december 31-től kötelező. 106
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 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! 214 107