1 1 V Abonyi-Tóth Andor, ELTE IK MOT2 2 Néhány alapfogalom3 Ergonómia Az ergonómia egyszerűen fogalmazva a dolgozó és a munkakörnyezet közötti kapcsol...
- 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
3
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
- 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
Ergonómikus tárgyak
5
6
Hasznos fogalmak
Human factors (Emberi tényezők)
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)
7
Az ergonómia rokonértelmű szava.
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.
Használhatóság – a felhasználói felületek felöl megközelítve
10
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]
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.
12
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.
13
A tervezés folyamata
UX tervezés
14
Mockup
15
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/
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
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.
Szemmozgás vizsgálat
http://www.gazehawk.com/blog/ 22
Szemmozgásvizsgálat (reprezentáció) Mozgás útvonal, időzés hossza
23
Hőtérképes megjelenítés
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
25
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.)
26
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)
27
Felhasználói élmény
Felhasználói élmény
Kéretlen ablakok / grafikák mellőzése
28
A kéretlenül megjelenő felbukkanó (pop-up) ablakok frusztrálják a felhasználókat
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)
31
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
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
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
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
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
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ő…
42
Helyesírás ellenőrzés Lektorálás
Á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.
43
Használjunk kiemeléseket!
Á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
45
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
Because you’re worth it
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
47
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.
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…
48
Statikus (mozdulatlan) szöveget használjunk
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
- SZIA, SZIA, ÚJ VAGYOK ITT! HOGY VAGYTOK? - Nyomd meg a CapsLock-ot!! - HUUUUU, KÖSZI, MOST MÁR NEM KELL NYOMVA TARTANOM A SHIFTET! 49
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
54
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
Jó példa Stíluslappal
Stíluslap nélkül 55
Nem annyira jó példa
Stíluslappal
Stíluslap nélkül 56
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)
59
Példa a kinetikus tipográfiára: http://youtu.be/Ddi0zeM97fw
Webes tipográfia korlátai
60
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!
61
Ez a font nem támogatja a magyar ékezetes betűket…
Nincs elválasztás
62
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…
73
Oldaltervezés
74
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!
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
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
77
a legelterjedtebb sávszélességgel számolva, 10 mp-es letöltés felett kötelező jelezni a fájl méretet
Oldalméret
78
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.
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
82
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)
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)
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 87
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.
88
Linkek aláhúzása, effektek
89
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!
Emberekre mutató linkek
A személy nevére tett hivatkozás az életrajzára mutasson. Arckép,
90
rövid életrajz, linkek, elérhetőségek
Forrás: Webergonómia - Jakob Nielsen nyomán (Typotex, 2011)
91
Áttekinthetőség
Áttekinthetőség
Áttekinthetőség Nem
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
egységes oldalkinézet
Zavaró színek
Színséma beállítás (tipp)
94
Hasznos oldal: http://colorschemedesigner.com/
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.
103
videoból kivágott képkockákat
Esettanulmány
104
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)
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,
105
képkicsinyítés
képkicsinyítés
Manipuláció a képekkel…
106
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ó.
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
108
kép- és hangminőség
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
Az operációs rendszer is számít.
111
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
Hardver, szoftver
A legelterjedtebb böngészők mindegyikén célszerű tesztelni Melyek Idővel
112
a legelterjedtebb böngészők? és földrajzi hellyel is változik
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
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
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
127
és idegesítik a felhasználót
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.
130
Probléma: A Skip intro (intro átlépése) szöveget az internetezők 30%-a nem jól értelmezi
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) 132
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
135
design (folyékony arculat)
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
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
147
Ha eltúlozzuk, akkor az oldal bővítésekor kellemetlen meglepetésben lehet részünk
Metaforák
148
149
Navigáció
Navigáció
150
Hol vagyok? Hol jártam már / honnan jöttem? Hova mehetek innen? Hát itt meg mit lehet csinálni?
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
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.
154
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)
Navigáció (ablakok)
Mikor nyissunk új ablakot? (2.)
Appletek esetén
155
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.
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
160
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)
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ü
Feladat alapú menü
Ott érdemes használni, ahol jól tipizálható feladatok vannak
Kapcsolódó elemek
162
Lakossági, vagy vállalati ügyfelek?
Az éppen olvasott információhoz kapcsolódó elemek szerepeltetése megnyugtató a felhasználók számára.
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 169
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
176
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)
