Bevezetés a Szoftver-ergonómiába1 3. Szoftver-ergonómiai alapismeretek 3.0. Bevezetés a fejezethez 3.1. Az ember-számítógép interakció 3.2. Interakciós stílusok 3.3. A számítógépes munkahely ergonómiája 3.4. Az Ember, a számítógép használója 3.5. A képekről

Ernyőképek tervezése2 Bevezetés a szoftver-ergonómiába 3.5. Ernyőképek tervezése 1.Tervezési irányelvek 2.Ikonok tervezése 3.Rendszerüzenetek tervezése 4.Képek jelentés-elemei 5.Szinek „olvasmány”

Ernyőképek tervezése3 „Ernyőkép” „Ernyőkép”: a képernyő látványa a képernyő, vagy egy ablak képe a munka során változik

Ernyőképek tervezése4 1. Ernyőkép tervezési irányelvek

Ernyőképek tervezése5 1. Ernyőkép tervezési irányelvek A levegős ernyőkép jobb mint a zsúfolt!! Csoportosítsuk a logikailag összetartozó elemeket sorrenddel, szemléletes elemekkel: üres sor, választóvonal, keret, szín, betűtípus és méret, A tartalomnak megfelelő szöveg-illesztés (jobbra-, balra, középre zárt, sorkizárt)

Ernyőképek tervezése6 Ernyőkép tervezési irányelvek Különböző funkciójú ernyőképek elrendezésükben is különbözhetnek, de azonosak elrendezése hasonlítson. A tervezés során kísérletezzünk különböző elrendezésekkel! Vonjunk be valós vagy potenciális használókat a tesztelésbe! Vegyük figyelembe a használók jellemzőit! különböző emberek más-más kezelőfelületet igényelhetnek.

Ernyőképek tervezése7 Intermezzo: az „elvek” használata Nem tudunk ennyi elvet megjegyezni A munka hevében nem gondolunk rájuk Ellenőrző listák, füzetek (check-list): egyfajta feladatnál mi mindenre kell gondolnunk A tervezés előtt emlékeztetőül elolvassuk Utána pontonként meggondoljuk: teljesítettük-e? Például:

Ernyőképek tervezése8 Például: „Vegyük figyelembe a használók jellemzőit!” Tudjuk, hogy kik fogják használni? Többféle használó van? Hogyan jellemezhetőek? Megfelel ennek az, amit terveztünk? (minden ernyőkép külön-külön!) Lehetne találni egy „igazi” használót a tervezéshez (interjú, prototípus tesztelés)?

Ernyőképek tervezése9 Például: „A levegős ernyőkép jobb mint a zsúfolt!!” Nem zsúfolt ez az ernyőkép? Szükség van rajta mindenre? Nem lehetne az elemeket egyszerűbbé tenni? Logikailag összetartoznak ezek? Rosszabb lenne két, vagy több ernyőképre bontani? NB. Több ernyőképre bontva romlik az áttekinthetősége.

Ernyőképek tervezése10 2. Ikonok tervezése

Ernyőképek tervezése11 2. Ikonok tervezése A verbális közlésnél gyorsabbak és „kíméletesebbek”. Az ikon jelentése legyen egyértelmű, könnyen fölismerhető. Legyen jól kivehető (legibility). A túl kicsi rosszul látható, és nehéz „eltalálni”. Sematikus legyen, ne valószerű. Legyen színes, de csak mértékletesen. Legyen szoros analógia az ikon rajzolata és jelentése között.

Ernyőképek tervezése12 Ikonok tervezése Az ikonok jól fölismerhetően különbözzenek egymástól. Logikai kapcsolatot közös keret jelölje, ne hasonlóság. Legyenek személyre szabhatók, lecserélhetők. Egy adott ikon mindig ugyanazt jelentse. Figyeljünk a társadalmi csoportok szokásaira. Ha van ismert szimbólum, piktogram - azt használjunk.

Ernyőképek tervezése13 Ikonok tervezése Ikonmenük és egyedi ikonok legyenek áthelyezhetők a képernyőn. Alkalmanként fölbukkanó ikonok legyenek a képernyőn rögzíthetők.

Ernyőképek tervezése14 3. Rendszerüzenetek tervezése

Ernyőképek tervezése15 3. Rendszerüzenetek tervezése Tájékoztatás, figyelmeztetés (hibaüzenet) Tájékoztatás: folyamatos állapotjelzés, felszólítás (prompt), visszajelzés (echó, és nyugtázás). A 4H elve: mindenkor tudni kell, hogy hol vagyunk, honnan jöttünk, hová mehetünk, hát itt meg mit lehet tenni?

Ernyőképek tervezése16 Rendszerüzenetek tervezése Stílus: barátságos, konkrét, konstruktív, és a használó fogalmai szerint A hibaüzenetek célja: - figyelmeztetés - tájékoztatás a hiba okáról és forrásáról - tájékoztatás a javításról, helyreállításról Példák: Syntax error 345” helyett: „Hiányzó idézőjel az előző sor 1. helyén”

Ernyőképek tervezése17 Rendszerüzenetek tervezése No.1. A hibát jobb elkerülni, mint észrevenni és jelezni No.2. Legyen visszalépés (undo) Megelőzés: tagolt kiírás (pretty-print), zárójel-figyelés, adatformátumok figyelése, hiányzó rovatok Konkrét fogalmazás: „Belső hiba: No " - xxx Konstruktív javaslat: „Fatális hiba, a munka leállt!” -xxx „Ismeretlen hiba; talán egy zárójel hiányzik valahol” Pozitív hangnem: rossz!!!” helyett: „Ezen a helyen hibás alak” Felhívó megjelenés, vész esetén megkerülhetetlen