1 1 V Abonyi-Tóth Andor, ELTE IK MOT 2 Néhány alapfogalom 12 Ergonómia Az ergonómia egyszerűen fogalmazva a dolgozó és a munkakörnyezet közötti kapcso...
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)
test és a lélek sajátosságait tudatosan figyelembe vevő. használó testét és lelkét nem károsító.
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)
Accesibility (Elérhetőség)
Az ergonómia rokonértelmű szava. 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.
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 91261) 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 U S A B I L I T Y
11
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. arány csökkentés Hatékonyság Tanulhatóság Megjegyezhetőség Hiba
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
19
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ó.
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-tools-
roundup
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
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
31
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
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
Felhasználók viselkedése (2.)
32
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)
16
33
Felhasználói élmény
Felhasználói élmény
Kéretlen ablakok / grafikák mellőzése
34
A kéretlenül megjelenő felbukkanó (pop-up) ablakok frusztrálják a felhasználókat
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 Forrás: http://www.usability.gov/pdfs/guidelines.htm
35
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.
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. Forrás: http://www.usability.gov/pdfs/guidelines.htm
37
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
Sokan, sokat nyomtatnak a webről Szükséges a nyomtatható változatok elkészítése (ps, pdf)
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
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á
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,
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
51
Because you’re worth it
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…
54
Statikus (mozdulatlan) szöveget használjunk
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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
- SZIA, SZIA, ÚJ VAGYOK ITT! HOGY VAGYTOK? - Nyomd meg a CapsLock-ot!! - HUUUUU, KÖSZI, MOST MÁR NEM KELL NYOMVA TARTANOM A SHIFTET! 55
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
58
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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
Stíluslap nélkül 62
31
Eltérő stíluslap különböző felbontásokra <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> Resolution Dependent Layout
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
66
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.
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…)!
<style> body { font-family: 'Tangerine', serif; font-size: 48px; }
Tegyük szebbé a weboldalakat!
Ez a font nem támogatja a magyar ékezetes betűket…
67
Nincs elválasztás
68
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.
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… Az alávágás javítja a szövegek megjelenését
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.
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).
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).
: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.
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
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é.
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.
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.
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
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
84
Oldalt alkotó fájlok méretének összege Javasolt maximális oldalméret: 100 kilobájt.
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
88
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)
44
Hivatkozások (Linkek)
89
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
90
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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)
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!
Már látogatott Linkek 93
Külső linkek
Ne féljünk a külső linkek alkalmazásától
Ne új ablakban nyissuk meg az oldalakat
Attól, hogy nincs, a látogatók még nem feltétlenül maradnak tovább…. 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,
96
rövid életrajz, linkek, elérhetőségek
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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örbevágás,
képkicsinyítés
képkicsinyítés
111
Manipuláció a képekkel…
112
Egy kép két különböző részlete mást-mást sugallhat!
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
Az operációs rendszer is számít.
Van aki kikapcsolja a hátterek megjelenítését, vagy az alap betűméretet felnagyítja 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 Idővel
a legelterjedtebb böngészők? é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
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
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
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
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
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 Forrás: http://www.usability.gov/pdfs/guidelines.htm
147
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
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
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.
160
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)
80
Navigáció (ablakok)
Mikor nyissunk új ablakot? (2.)
Appletek esetén
161
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)
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
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.
163
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…
164
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
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
166
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)
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ü
Feladat alapú menü
Lakossági, vagy vállalati ügyfelek?
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.)
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
175
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)
