Felhasználói interfész Endrődi Tamás.

Az előadások a következő témára: "Felhasználói interfész Endrődi Tamás."— Előadás másolata:

1 Felhasználói interfész Endrődi Tamás

2 A Vasa és a Kronan Nem volt írásos specifikáció Nem mondtak nemet
A felhasználót nem vonták be a tervezésbe Díszítéssel ment el az idő nagy része Más technika kell egy nagy programhoz

3 Bankjegykiadó automata
Négyjegyű kód + összeg Kártya+pénz+papír Négyjegyű kód + nyitó menü + összeg Kártya+pénz+papír(?) Kód + nyitó + összeg + újabb menü Pénz, de a kártya NEM!

4 A szoftverkészítés célfüggvényeinek megváltozása
Adatfeldolgozás Viszonylag primitív műveletek és algoritmusok Típusfeladatok Kliens/szerver és többágú rendszerek elterjedése Gyors és olcsó kivitelezhetőség Sok hardverhez sok szoftver kell Nincs idő egy-egy programmal hónapokat "vacakolni" Tömegtermelés Pl. a matematikában kevesebb a változás. A sablon jellegnél a tömeggyártás három szintje fontos: Egyedi gyártás Sorozatgyártás (minden egyforma) Automatikus programozás (sorozatban eltérőt gyártani) Sokféle tartármártás létezik. Amíg madártejnek nem érezzük, elfogadható!

5 A szoftverkészítés célfüggvényeinek megváltozása
Könnyebben módosítható, továbbfejleszthető és karbantartható programok Az adatfeldolgozásban nagyok a változások Sablonjelleg fontossága Koncepció és szabványok alkalmazása

6 A szoftverkészítés célfüggvényeinek megváltozása
Megbízhatóság "Fault-tolerant" rendszerek elterjedése HW téren Tranzakciókezelés alkalmazása SW területen A precíz gyártás és a pontos, részletes tesztelés szerepe megnő Adatvédelem Nyílt rendszerek védelme az illetéktelen hozzáférés elől

7 Strukturált módszer Koncepciókészítés (Survey) Analízis
Tervezés (Design) Adatbázis (adatmodell) Felhasználói interfész (ez a legnagyobb rész) Funkcionális mag (üzleti logika) Implementáció Tesztelés

8 Rapid prototípus módszer
Rapid analízis Prototípus készítés Tervezés (Design) Hangolás (Tuning) Tesztelés Implementálás Iteráció a 2. ponttól kezdve

9 Mi a baj a prototípussal? (1)
Könnyen elkészíthetőnek és módosíthatónak kell lennie A papíralapú tervnél nem tud semmi egyszerűbb lenni El kell dobni a végén!!! Sajnos a legtöbbször "termékké csiszolják" A rapid development csapdája: hamar mutatunk valamit, de közel nem azt, amilyen a végtermék lesz A prototípust is meg kell tervezni Helyes sorrend: 1=tervezés, 2=implementálás Helytelen sorrend: 1=implementálás, 2 újabb verzió implementálása

10 Mi a baj a prototípussal? (2)
A prototípus konfliktus A felhasználó pontos visszajelzéséhez szinte teljesen funkcionálisan működő program kell "Ez csak prototípus, az élesben működni fog!?" A SW specifikációt nem helyettesítheti egy jól működő prototípus sem. Legtöbbször akkor jön elő, amikor meg kell mutatni, milyen jól áll az adott SW fejlesztése Pontosan megfogalmazott cél kell, hogy mit akarunk elérni a prototípussal!

11 Milyen a jó prototípus Meglévő programokból indul ki.
Nem igényel külön munkát, azt mondjuk pl. hogy a csoportkiválasztás úgy fog működni, ahogy a Customize Toolbar működik a Windows-ban Nem árt, ha sok SW-t nézeget az ember Papír alapú prototípus Könnyű elkészíteni és módosítani Nem kell egy vonalba húzni és méretezgetni a controlokat A felhasználó is kénytelen a tervet értékelni, és nem hasra esni egy vizuális látványtól Nem funkcionális, korlátozott Csak a kritikus részek Bemutató a felhasználó bevonásával Forgatókönyv

12 Felhasználó-centrikus módszer
Igényspecifikáció Rendszeranalízis (OOA) Felhasználók elemzése Felhasználói feladatok Objektummodell Rendszertervezés Metafora tervezés Grafikus felhasználói interfész tervezés Környezetfüggő interfész tervezés Implementálás Tesztelés

13 A felhasználók elemzése
Szerepkör Szervezeti különbség Informatikai tudás Szakterületi tudás Gyakoriság

14 Szerepkör elemzés Jogosultsági kérdések Egyszerű helyzetben 2-3 szint
Hozzáférés, elérés, láthatóság Új adat felvitele Meglevő adat módosítása Meglevő adat törlése Egyszerű helyzetben 2-3 szint Főnök Alkalmazott Külső szemlélő

15 Szervezeti különbség Ritkán okoz problémát
Számlázásnál pl. érdemes külön szerepkörnek venni a bejövőt és a kimenőt.

16 Informatikai tudás Kezdők Gyakorlottabbak Profik
On-line segítségre szorulnak Sok hibával dolgoznak Gyakorlottabbak Kevesebb hiba, ritkább help használat Profik Gyorsbillentyűk, rafinériák használata

17 Szakterületi tudás Kezdők Gyakorlottabbak Profik
A tématerület magyarázata Sok hiba, helyreállíthatóság Gyakorlottabbak Kevesebb hiba, ritkább help használat Profik Összetett, bonyolult műveletek kellenek

18 Alkalmazási gyakoriság
Alkalmanként használók Nem fognak fejlődni Gyakran használók A kezdőből profivá válnak idővel

19 A felhasználói feladatok elemzése
GOMS módszer Goals (Célok) Operators (Műveletek) Methods (Metódusok) Selection Rules (Kiválasztási szabályok) Cognitive Complexity Theory (CCT) Task-Action Grammar (TAG)

20 Az objektum modell elemei (1)
Objektumok Elsődlegesek vagy másodlagosak Nyelvtani elemzés szerepe Az attribútumok szétválasztása az objektumoktól Objektumok közötti kapcsolatok 1:1, 1:N vagy N:M fokú kapcsolat lehetséges Egyirányú vagy kétirányú Műveletek Ezekkel lehet lekérdezni vagy megváltoztatni az objektum állapotát

21 Az objektum modell elemei (2)
Attribútumok Tématerületi ismeretek kellenek Csak a nélkülözhetetleneket szabad összeszedni Származtatott attribútumok is kellenek - pl. alternatív nézet miatt Attribútum arculat Kezdőérték Lehetséges értékek halmaza

22 Az objektum modell elemei (3)
Osztályok Azonos műveletek, azonos attribútumtípusok és arculatok, azonos alternatív nézetek Aggregátum és konténer osztály Alosztály, főosztály, absztrakt osztály Alternatív nézetek Tárgyi eszköz műszaki és számviteli adatai Szín megjelenítés Konténer objektum többféle rendezettségben

23 Metafora tervezési szempontok
A felhasználói tapasztalat szerepe Strukturáltság Szelektivitás Bővíthetőség Konzisztencia és koherencia

24 Metafora tervezési korlátok
Tág forrásmetafora Szűk forrásmetafora Eltérő felhasználói tapasztalat

25 Felhasználói interfész fejlődési szintjei
Main-frame számítógép interfész Parancssor interfész Menüvezérelt rendszerek Grafikus felhasználói interfész (GUI) Alkalmazásorientált helyett adatorientált lett Grafikus tervező szakemberek igénybevétele Funkcionalitás helyett a könnyű használhatóságon van a hangsúly

26 A távirányítók fejlődése (1)
1. Meglévő technológiára épül Olyan gombok és doboz, ami már létezik Egyfajta gombok 2. Javított elrendezés Még mindig a meglévő technológiára épül Kétféle gomb és több szín 3. Új technológia A gomb sugallja, hogy mire való Hiba elleni védelem (pl. a felvétel két gomb)

27 A távirányítók fejlődése (2)
4. Az új technológia túllihegése Űrhajó vezérlőpultjához hasonlít Többféle alakú, színű és viselkedésű gombok dzsungele Bizonyítani akarták, hogy mi mindent tud a masina. 5. A felhasználó céljaihoz való visszatérés Csökkentett bonyolultság Rejtett gombok Nem túl sok szín és gombfajta

28 Mottó Hadd tegye a felhasználó AZT, amit akar AKKOR, amikor akarja és ÚGY, ahogy akarja!

29 Rugalmasság (Flexibility)
Felhasználói kompatibilitás Dialógus kezdeményezési mód Számítógép által kezdeményezett Felhasználó által kezdeményezett Munkafolyamat kompatibilitás Többszálú dialógus Többdimenziós, multimodális rendszerek

30 Rugalmasság (Flexibility)
Taszk vándorlás Kooperatív feldolgozási mód Helyettesíthetőség "Ami látható, az használható is legyen" Az interfész testreszabása Adaptálhatóság Adaptivitás

31 Könnyű megtanulhatóság
Egyszerűség Limitált funkciómennyiség Könnyű elindulás A tervezési folyamat = az UI egyszerűsítése Szükségtelen ablakok kiiktatása, dialógusok és üzenetdobozok megszüntetése, stb. Ismerősség Korábbi ismeretanyagra támaszkodjon Megjósolhatóság Termék kompatibilitás Taszk kompatibilitás Konzisztencia

32 „Ha legközelebb találkozunk egy ismeretlen
objektummal, és elsőre könnyen kezelni tudjuk, akkor álljunk meg és vizsgáljuk meg: a könnyű kezelhetőség ugyanis nem lehet véletlen: Valaki profi módon megtervezte ezt az objektumot!!" Donald A Norman

33 Robosztusság Nyomonkövethetőség Helyreállíthatóság Válaszadási készség
Böngészési lehetőség Kiválasztási lehetőség Tartósság (persistance) Helyreállíthatóság Előre Vissza Arányos fáradozás elve Válaszadási készség Válaszidő stabilitása

34 Robosztusság (Preview)
Icon (konstans bitmap) Word-ben eszközsor a szövegigazításra Absztrakt (változó bitmap) Témák bemutatása a PowerPoint-ban Minta (adat is van benne) Font beállítás a Word-ben Közelítő replika Animáció lejátszás a képernyővédőknél Pontos replika Print Preview

35 Robosztusság (Default)
Az utolsó állapot visszaállítása Egy dialógus az utoljára beírt adatokat tartalmazza Kivétel a nyomtatások száma, ha pl. 58 volt Alapértelmezés Veszélyes akció ne legyen default Sokszor a user által bevitt utolsó (első) adat Pl. Word-nél az első sort kínálja fel filenévnek Nem feltétlenül statikus adat (de lehet, pl. darab=1) Default csoport alkalmazása Pl. Egy következő csekknél nem az előző csekkből, hanem az adott díjtétel előző csekkjéből származhat a default

36 Default tanácsok Jó, ha a user meg is tudja változtatni
Komoly döntéseknél ne legyen default, vagy szükséges legyen user beavatkozás is Rossz példák default-ra: Windows kikapcsolásakor Restart után újra Restart Word-ből kilépve üzenet helyett menteni kellene. Csak a profi user érti a különbséget a memória és a lemez között. A user azt hiszi, hogy amit beírt a Kakukk.Doc-ba, az ott van. Ehhez kellene egy "összes módosítás eldobása" gomb.

37 Dolgozó neve: Kis Péter Dolgozó neve: Kis Péter
Színek használata Világos háttéren fekete szöveg Dolgozó neve: Kis Péter Dolgozó neve: Kis Péter

38 Dolgozó neve: Kis Péter Dolgozó neve: Kis Péter
Színek használata A kék színnel óvatosan bánjunk Dolgozó neve: Kis Péter Dolgozó neve: Kis Péter

39 Színek használata Ez egy súlyos hiba Ez egy figyelmeztetés
Kevés, jól elkülöníthető szín kell Ez egy súlyos hiba Ez egy figyelmeztetés Ez egy súlyos hiba Ez egy figyelmeztetés

40 Színek használata Piros=vészhelyzet Zöld=normál helyzet
Sárga=figyelmeztetés A színen kívül más jelzés is kell

41 Színkonvenciók Fehér, fekete, üveg, szürke Kék Piros Sárga Zöld Bíbor
Háttér: ablakkeret, Start menü, Taskbar, Sidebar Előtér: normál szöveg Kék Háttér: Default nyomógomb, keresés, bejelentkezés Előtér: Link, főinstrukció Ikon: Súgó, információ Piros Háttér: Leállított folyamat indikátora, státusz Ikon: Hiba, Stop, Ablak bezárás, Törlés, Kötelező mező üresen maradt, Hiányzik valami, Nem elérhető valami. Sárga Háttér: Megszakított folyamat indikátora, státusz, banner Ikon: Figyelmeztetés Zöld Háttér: Normál folyamat indikátora, státusz. Ikon: Frissítés, Futás, Kész. Bíbor Előtér: Látogatott link.

42 Hanginformációk Kikapcsolható legyen!
Puritán egyszólamú síp ma már nem divat Beszédkommunikáció lehetősége Van, aki szerint pozitív hangjelzés (pl. lágy "cool") is lehet (Alan Cooper)

43 Gyümölcselemzés - Alma
Ismerősség – jó Megjósolhatóság – közepes (kukacok!) Könnyű kezelhetőség – közepes Mosni kell Késre és/vagy jó fogakra van szükség Nincs éles határ a csuma és a lényeg között Robosztusság – jó 1-2 alma jó kalóriát adhat

44 Narancs - Citrom Ismerősség – jó Megjósolhatóság – gyenge (magok!)
Könnyű kezelhetőség – közepes/jó Pucolni kell Robosztusság – jó 1-2 narancs jó kalóriát adhat A citrom viszont piszok savanyú

45 Kókusz Ismerősség – közepes/gyenge Megjósolhatóság – jó
Könnyű kezelhetőség – gyenge Komoly fegyver (bárd?) kell hozzá Robosztusság – közepes ?

46 Banán Ismerősség – jó Megjósolhatóság – Kiváló
Könnyű kezelhetőség – Kiváló Nem kell mosni Nem kell kés – még fog se! Éles határ a burok és a lényeg között Robosztusság – kiváló 1-2 banán magas kalóriát adhat

47 Interfész szabványok IBM SAA/CUA A Windows-interfész
Nagyszámítógépes modell (Entry model) Grafikus modell Hibrid modell A Windows-interfész Más rendszerek (Macintosh, Sun, stb.) Szabványtól eltérés okai (játék, multimédia, művészi UI, meghökkentés, jövőbe mutatás)

48 Windows Vista Asztal (desktop) Sidebar Start gomb
Gyorsindítási terület (Quick launch bar) Taszksor (Taskbar) Deskband Értesítési terület (Notification Area) Csak parancsikon, program nem Ide kerülhet például a Média Player Elsősorban nem programindításra való

49 Tervezési elemek Vezérlő elemek (OLE, ActiveX is)
Ablakok (Teljes képernyős legyen az alkalmazás) Menük (feltáruló – popup menük is) Eszközsor (toolbar), Státuszsor, Értesítési terület Egér- és billentyűzetkezelés Típusfeladatok Alapnyilvántartás Szelekció Tranzakció-kezelés Transzfer műveletek Folyamatvezérlés Segítő interfész

50 UI szöveg (UI text) Windows címsor szövege Főinstrukció
Kiegészítő instrukció Vezérlőelem címke Vezérlőelem felirat

51 UI szövegsémák

52 UI szöveg szabályok „Fordított piramis” Formázás
Konklúzióval kezdünk, utána a részletek A felhasználó nem olvassa, hanem pásztázza a képernyőt Ne magyarázzuk a nyilvánvalót Formázás Bold (ritkán), inkább szürke címkével kiemelni Italic: szövegdoboz prompt (pl. keresés) Bold italic és aláhúzás nincs (csak hyperlink) Ellipszis (...) a befejezetlenség jele Feliratnál: plusz adat kell Adatnál: csonkítás Címkénél: valami folyamatban van.

53 Címsor szabályok Dokumentum-centrikus ablaknál Egyéb ablaknál
<dokumentum neve> – <program neve> Egyéb ablaknál <parancs/program/szolgáltatás neve> Ne magyarázzuk a dialógus célját Az ugyanis a főinstrukció feladata Folyamat dialógusnál a lényeg kiemelése Taszksorra ikonizálás miatt (pl. 66 % kész)

54 Instrukció szabályok Főinstrukció
Nem mindig kötelező Főnévképzős megadás Angolban gerund pl. Kiegyenlített számlák feldolgozása Nincs pont a végén, de kérdőjel lehet. Kiegészítő instrukció vagy magyarázat Komplett mondat, tehát van a végén pont. Csak akkor, ha kell valami plusz magyarázat Felkiáltójelet kerüljük.

55 Címke és felirat szabályok
Minden vezérlőelemhez kell (kivéve Prompt) Elhelyezés Kapcsolódó vezérlőelemtől balra vagy felette Elérési billentyű (Access Key) Az interaktív elemhez kapcsolt címkéknél kell Ilyen címkéknél kell kettőspont a végére Ne használjuk adatmegjelenítésre! Ne legyen csupa nagybetűs! Csoportnál a szöveg szétszedhető a fej és az elem között Felesleges szöveg nem kell pl. Név: és nem Adja meg a nevét:

56 Szövegdoboz (Textbox)
Felhasználási esetek Adatmegjelenítési mező Beviteli mező (maszkolatlan és maszkos) Beviteli mező segítő gombbal a végén Beviteli mező autocomplete lehetőséggel Többsoros szövegbeviteli mező Görgős elemmel kiegészített beviteli mező Csak numerikus adatnál jó Jelszómező Prompt mező (pl. Keresés a Vistában)

57 Szövegdoboz szabályok
Nincs vízszintes görgő, függőleges is csak a többsorosnál Maximális hosszát be kell állítani A kapcsolódó címkével együtt lehet „disable” Profi maszkolás kell (pl. rendszám) Élből kiszelektálás ha sejtjük, hogy át akarja írni a mező tartalmát Javasolt magasság: 23 pixel (14 DLU) Szerkesztés kérdése Szerkeszthető mező keretes, fehér hátterű, besüllyesztett lehet A nem szerkeszthető nem keretes, de lehet fehér/halvány Read-only mezőn nincs Tab Stop

58 Legördülő lista/kombinált lista
Típusok Egyszerű listadoboz (egyetlen kiválasztással) Legördülő listadoboz Kombinált lista Szerkeszthető legördülő listadoboz Szerkeszthető listadoboz Alternatív lehetőségek Menügombos és külön gombos (split button) lista Rádiógomb-csoport (Mind) és (Nincs) szerepe A (Nincs) helyett nem jó megoldás az üres sor

59 Speciális listadobozok
Típusok Többszörös kiválasztású listadoboz Többszörös vagy kibővített mód Többszörös mód helyett a jelölőnégyzet lista jobb Jelölőnégyzet lista Előnézet (Preview) lista Kétkonténeres lista (list builders) Egykonténeres lista (add/remove list) Egy listadoboz és nyomógombok dialógusablakkal Vízszintes görgő ne legyen

60 ListView Előnye a ListBox-szal szemben Típusai
Többoszlopos, oda-vissza rendezhető, csereberélhető oszlopokkal Képes egérvonszolást (drag & drop) kezelni Van jelölőnégyzetes verzió is Adatmegjelenítő mező kell a kiválasztott elemek számával Mindet kijelöli, Összes kijelölés törlése gombok kellenek Típusai Oszlopválasztó ListView Önálló oszlopválasztó modális dialógusablakkal Csoportosított ListView Kétszintű TreeView helyettesítésére (pl. Sajátgép) Paneles (többsoros) ListView pl. folyamatos űrlap MS Access-ben

61 ListView szabályok Oszlopfejléc kattintható Cellaszabályok
Legördülő menü vagy menü gomb nézetváltásra Menügombnál a felirat mindig az aktuális nézet A felhasználó által kialakított nézet elmentése Cellaszabályok Duplakattintás: alapértelmezett művelet elvégzése Infotip használata, ahol értelmes a dolog Igazítás Számok és dátumok jobbra ID-k és szövegek balra Vízszintes görgőt ne használjunk, ha lehet

62 TreeView Hierarchikusan elrendezett objektumkollekció Ellenjavallatok
XP verzió, Vista verzió Ellenjavallatok ListView a jobb, ha a gyökéren kívül csak 2 szintű A ListView rendezhető, szűrhető, a TreeView nem Tabcontrol, ha statikus, és a fülek elférnek Négynél több szint esetén nehezen található egy konkrét objektum Rangjelzővel ellátott fejléc is alternatív megoldás

63 TreeView Felhasználási esetek
Csak konténerek (VS2005 projekttípus választás) Konténerek és elemek (Windows Intéző) Konténereken belül rádiógombok (IE biztonsági beállítások) Jelölőnégyzetes fa (MS Install, pl Office vagy VS) Felhasználó által építhető fa (TreeView Builders) TreeView alternatív elérési lehetőségekkel MSDN Library – Index, Keresés, Kedvencek, stb

64 TreeView szabályok Vízszintes görgőt itt is kerüljük!
Faágakhoz legyen legördülő menü Duplakattintásra alapértelmezett művelet Összekötő vonalak: csak akkor, ha kell Nyitás/csukás (Expand/Collapse) Nagyméretű fánál előnyös, ha csak egy lehet nyitva Csukást csak akkor engedjünk, ha nem fér el az összes faág Folyamatos megjelenítés (pl. internetes MSDN) Ilyenkor csak két szintet tölt be élből.

65 Műveletindítási lehetőségek
Vizuális zajcsökkentés a cél Az elemek interaktívak, de nem sikítanak, hogy „Kattints már rám!” A vizuális csábítás erősítése/gyengítése Rendszer hivatkozás szín (kék) használata Aláhúzással, anélkül, illetve MouseOver-re aláhúzva Grafika vagy bajusz használata Műveleti területre való elhelyezés Eszközsorra, navigációs gombsorra Parancsra utaló szavak a szövegben (nyomtatás) Parancsgomb külső (kiemelve a háttérből)

66 Parancsgomb (Command Button)
Felhasználási esetek Normális nyomógomb, Alapértelmezett nyomógomb Egyszerűsített (lightweight) parancsgomb Nincs kerete, csak MouseOver-nél Menügomb (Menu Button) Osztott gomb (Split Button) Ellipszis gomb (három ponttal) Folyamatos közzététel gomb (progressive disclosure) Nyíllal ellátott gombok (pl. 2 listadoboz között)

67 Parancsgomb szabályok
Azonnali akciót kell végrehajtania Mikor melyiket? Parancsgomb Elsődleges parancs Destruktív parancs Hyperlink Másik lap, ablak vagy súgó jön Másodlagos művelet (legkisebb súlyú kattintható vezérlőelem) Parancshivatkozás (Command link) Ha túl hosszú a szöveg Másodlagos művelet Rádiógomb-csoport Be/Ki vagy OK/Mégse gombokkal Ha részletes magyarázat is kell, és ez elhelyezhető a rádiógomb alatt

68 Parancsgomb szabályok
Méretezés Tipikus magasság 23 pixel (14 DLU) OK/Mégse gombok szélessége 75 pixel (50 DLU) Max. kétféle szélesség lehet, kivéve ... gomb Aktivizálás Csak akkor disable, ha triviális, hogy miért Elérési billentyűt kell rendelni hozzá Kivéve OK (Enter billentyű), és Mégse (Esc billentyű) Duplakattintás ne legyen értelmezett

69 Parancsgomb szabályok
Felirat szövegezése Hasonló funkciójú nyomógomboknál azonos szövegeket rakjunk fel a különböző ablakoknál Grafika és szöveg keveredése kerülendő Kivéve, ha a grafika plusz információt ad a beazonosításhoz (pl. Mégse mellé felesleges) OK helyett specifikus címkefelirat lehet (pl. Írás) A Mégse helyett viszont ne használjunk más feliratot! Egyéb Állapot beállítására ne használjunk parancsgombot Rádiógomb vagy jelölőnégyzet jobb megoldás Homokóra kell, ha az elindulás időt igényel Ha több gomb is van, a destruktív parancsok különüljenek el

70 Hivatkozás (Hyperlink, Command link)
Felhasználási esetek Tisztán szöveges hivatkozás Tisztán grafikus hivatkozás Szöveges hivatkozás grafikával kombinálva Mindig a grafika áll elől Egyszerűsített nyomógomb MouseOver-re nyomógombnak látszik, anélkül nem Definíciós hivatkozás Szaggatott vonallal van aláhúzva, és infotip jön fel Menühivatkozás Legördülő menüben egy csomó hivatkozás jelenik meg

71 Hivatkozás szabályok Megjelenítés Szövegezés
Lehetőleg ne használjunk grafikus hivatkozást Ne legyen disable a hivatkozásra Akkor már inkább sima szövegként jelenítsük meg Látogatott/nem látogatott rendszerszín használata Hiperhivatkozásnál mindig külön szín Parancshivatkozásnál mindig a Látogatott szín Nyomtatásnál ne jelenjen meg az aláhúzójel Szövegezés Nincs pont a végén, de kérdőjel lehet A szövegben ne legyen olyan, hogy „Kattintson...” URL címnél ne szerepeljen a sallang (pl. //http) A három pont (...) szerepe ugyanaz, mint a parancsgombnál

72 Folyamatos közzététel (progressive disclosure)
Típusok Dupla nyíl gombok (rangjelzők, chevrons) Az akció irányába mutatnak Helyben jelenítik meg, de lehet előugró ablak is. Sima nyíl gombok További opciók és parancsok legördülő menüben Adatra nem jó! Plusz és mínusz jelek Konténer elemeit nyitják/csukják (pl. TreeView) Forgó háromszögek Adott elem további adatait mutatják Az előzőekkel ellentétben a jelenlegi állapotot jelzi a háromszög, és nem a művelet eredményét

73 Folyamatos közzététel (progressive disclosure)
Felhasználási esetek Rangjelző Helyben alkalmazott (pl. Mappa megjelenítése, Keresés) Parancsgombos rangjelző (További opciók>>) Menüsor rangjelző (komplett menüt jelenít meg) Nyíl Vezérlőelem mellett (legördülő menü jön fel) Parancsgombnál (menügomb, illetve osztott gomb) Plusz és mínusz jel Kétszintű hierarchia esetén sima listában (VS2005) Forgó háromszög Kétszintű hierarchia esetén Jobbra mutató háromszög jelentése: becsukott tartalom Lefelé mutató háromszög jelentése: kinyitott tartalom

74 Folyamatos közzététel (progressive disclosure)
Ellenjavallatok Táblázatos képen az aktuális sor szélesítése pl. Programok telepítése/törlése Laza kapcsolat a kapcsolódó dolgokkal Inkább parancshivatkozás kell – külön ablakkal A plusz információ mondatokban megfogalmazható Tooltip vagy Infotip a jobb megoldás A plusz dolog pusztán egy szűrési lehetőség Ki kell emelni a táblázat tetejére

75 Folyamatos közzététel (progressive disclosure)
Szabályok Ha nincs címkéje, akkor legyen Infotip hozzá Ha van címke, akkor ne legyen hiperhivatkozás A felhasználó általi elrendezést meg kell őrizni Egyszeres rangjelzőt ne használjunk, mert zavaró Nyílra emlékeztet Kivétel: Taszksor, mert ott a hely számít Forgó háromszög használata Csak ezt a fajtát használjuk, és csak erre a célra Play gombbal ne keveredjen Szöveges feliratok szabályai More/Fewer options (További beállítások), commands, details, <object name> Show/Hide (Megjelenítés/Elrejtés)

76 Rádiógomb (Radiobutton)
Elhelyezés 2 és 7 közötti lehet egy csoportban Logikai sorrendben, alapértelmezés lehetőleg az első Inkább függőlegesen, mint vízszintesen Ma már nem divat a Groupbox köré, de lehet Nem hajt végre parancsot, nem jelenít meg ablakot Alárendelt elemek Jobbra mellé vagy behúzással alá Ne ágyazzunk egymásba rádiógomb-csoportot, ha lehet Az alárendelt elembe történő írás beteszi a pöttyöt aut. Szövegezés Csoportszöveg címkeként él: végén kettőspont kell Legyen elérési billentyű, pozitív megfogalmazás legyen Esetleges magyarázat a gomb alá írható

77 Jelölőnégyzet (Checkbox)
Elhelyezés Kétállapotú, max. 10 legyen egy csoportban A harmadik állapotot (tömör fekete négyzet) ne használjuk beállításra Ha ennél több kell, akkor CheckboxList Inkább függőlegesen, mint vízszintesen Ma már nem divat a Groupbox köré, de lehet Nem hajt végre parancsot, nem jelenít meg ablakot Alárendelt elemek Jobbra mellé vagy behúzással alá Az alárendelt elembe történő írás beteszi a pipát automatikusan Egyéb Ne használjuk folyamatindikátor helyett Legyen elérési billentyű, pozitív megfogalmazás legyen Esetleges magyarázat a gomb alá írható

78 Kartonlap (Tabcontrol)
Felhasználási esetek Nagy, görgős ablak helyett (klasszikus eset) Többféle nézet Tipikusan alul van a Tab (pl. VS2005 szerkesztés) Több külön dokumentum megjelenítése VS2005 vagy Excel a jó példa Vízszintes/függőleges kartonlap Vízszintes a jó, ha elfér egy sorban és 7-nél kevesebb A függőleges kartonlap egy Listadobozhoz kapcsolt panel Elvileg a kettő nem vegyíthető, de a panelnél nem lenne zavaró

79 Kartonlap szabályok Tilos az egyfülű, a görgős és a többsoros
Az egyik lapon történt beállítás nem hat a többire Ha igen, akkor Varázsló kell inkább A lapok valamilyen nyilvánvaló kapcsolatban vannak egymással A lap nem görgethető semerre sem. Vigyázat! A lapon lévő elemen lehet (pl. TreeView) Ne rakjunk ikon a Tab fülre, kivéve, ha ez segíthet Az inaktív Tab füleket eltávolítjuk, és nem disable Ha ez valamiért nem megy, akkor az összes vezérlőt inaktívvá tesszük, de a Tab fül aktív marad A Tab fül címkéi főnevek. Nincs elérési billentyűjük

80 Vezérlőelem magyarázat (Tooltip)
Felhasználási esetek Grafikus – címke nélküli – elemekhez (Tooltip) Bármilyen elemhez (Infotip) Teljes név Infotip (pl. TreeNode-on állva) Bélyegkép (thumbnail) Infotip Görgető sávhoz (Scrollbar tip, pl Word, Powerpoint) Szabályok Igazából folyamatos közzététel elem Nem gombnyomásra, hanem MouseOver-re aktivizálódik Hiba- és figyelmeztető üzenetre ballon kell Tooltip-nél 5 mp az eltűnés, Infotip-nél nincs Tooltip maximum 5 szóból áll Tooltip-en nincs ikon, Infotip-en lehet, ha kell

81 Ballon Jellemzői Felhasználási esetek Szabályok
Ikon, címszöveg, leírás, csücsök Nem a megakadályozás a cél, hanem a közlés Nem veszi el az input fókuszt, nem is kell rajta állni Előnye a rászögelt szöveggel szemben, hogy nem kell külön hely neki Felhasználási esetek Adatbeviteli hiba (nem kritikus hiba) Speciális helyzet (pl. begépeléskor CapsLock mód) Felkiáltójel (figyelmeztetés) ikont társítunk hozzá Szabályok Egyszerre csak egy ballon lehet a képernyőn Azonnal megjelenés és azonnali eltűnés ha már OK Az adott beviteli mező alá kell elhelyezni

82 Értesítési ballon (Notification)
Felhasználási esetek Aszinkron művelet sikeres/ sikertelen befejezése Csak akkor, ha nem erre számít a felhasználó Helyette elég lehet egy értesítési ikon állapotváltozása Nem kritikus rendszeresemény Hálózati erőforrás sikertelen elérése, akku kimerülése Felhasználói feladatra való felszólítás (pl. update) Fontosnak tűnő információ Pl. ismerősünk bejelentkezett a Messengerbe De az pl. nem jó, hogy az USB eszköz gyorsabb lehet Szolgáltatás reklámozása Azért ezt csak óvatosan...

83 Értesítési ballon (Notification)
Szabályok Nincs köze a felhasználó aktuális tevékenységéhez Ha ahhoz kell üzenet, akkor az adott program státuszsora Hasznos, releváns, de nem kritikus Nem igényel azonnali beavatkozást Alapvetően nem szinkron, hanem aszinkron Vistában 9 mp-ig jelenik meg Egy eseményhez csak egy üzenet szülessen Progresszív eszkaláció PL. akku kimerülésekor először csak az ikon lesz egyre pirosabb, majd ballon jön, végül modális dialógusablak Interakció a bezárás vagy további részletek lehetnek Az ikon csak Hiba vagy Figyelmeztetés lehet, Info nem Info esetében nem kell ikon egyáltalán, mert nem mond semmit

84 Vonal, téglalap (Groupbox)
Díszítőelemek funkcionális jelentés nélkül Egyetlen funkció, hogy elérési billentyűje lehet Alapelv, hogy a lehető legkevesebb legyen Inkább vonal, mint téglalap 1-es vastagságú, mart, halványszürke Layout révén elrendezhető vonal nélkül is A téglalap soha nem Disable A benne lévő elemek persze lehetnek

85 Folyamatindikátor (Progress Bar)
Felhasználási esetek Modális, határozott idejű Önállóan, vagy Mégse/Leállítás gombbal párosítva Kiegészítő animáció lehetséges (pl. Másolás) Modális, határozott idejű dupla (pl. Telepítés) Nem modális, határozott idejű (más taszk mehet) Modális, határozatlan idejű pl. Windows Update keresi a lehetséges összetevőket Nem modális, határozatlan idejű pl. Keresés a Windows-ban, miközben a Windows Intéző elérhető marad

86 Folyamatindikátor (Progress Bar)
Szabályok Lehetőleg határozottat használjunk Még akkor is, ha nem tudjuk pontosan belőni az időt. Csak gépi folyamatokra Már 2 mp fölött célszerű a homokóra helyett Hosszú folyamatoknál értesítési mechanizmus jobb Megismételhető folyamatoknál a slider jobb Pl. egy média lejátszása Egyértelmű legyen, hogy megy vagy sem Az IE-ben rossz, hogy akkor is megy, amikor nincs kapcs.

87 Folyamatindikátor (Progress Bar)
Szabályok Animáció Vigyázat, mert külön szálon fut, és megy magától tovább Az animációt az indikátor fölé kell helyezni Az esetleges gombok az indikátortól jobbra vannak Hasznos részletek Hátralévő idő, összes/feldolgozott rekordok száma A maradék idő fontosabb, mint az eltelt idő Felesleges részletek (pl. melyik komponenst regisztrálja) Hosszabb folyamat végén esetleg hangjelzés pl. DVD Decrypter (azért óvatosan a hanggal...) Ne írjunk semmit rá az indikátorra (pl %-ot sem)

88 Folyamatindikátor (Progress Bar)
Szabályok Ne vegyítsük a homokórával Az lehet, hogy előbb homokóra, és ha kell, utána indikátor Ne legyen függőleges, csak vízszintes A határozatlan lehet másféle is (pl. SQL2005) Ne álljon 100%-on, ha még nincs kész Ne induljon újra (inkább legyen dupla indikátor) Visszafele sem mehet (kicsit sem), csak előre Elhelyezés Nem modálisat a státuszsorba lehet tenni Modálisat egy külön folyamat dialógusablakba

89 Folyamatindikátor (Progress Bar)
Szabályok Feliratok Mégse, ha visszaállítható az eredeti állapot Másolásnál hiba, hogy Mégse jelenik meg Leállítás helyett Leállítás, ha már nem állítható vissza Menet közben is lecserélhető a szöveg, ha úgy adódik A felirat szövege főnévképzős három ponttal a végén Dialógusablakos esetben az ablak címkéje ne egyezzen meg ezzel, hanem normálisan a program/művelet neve Mérete 15 pixel magas és pixel széles

90 Státuszsor (Statusbar)
Felépítése Állapotinformáció (hány rekord, milyen nézetben) Háttérben futó folyamatok Helyzet-érzékeny beállítások (pl. Caps Lock) Interaktív is lehet Menügomb vagy osztott gomb is társítható Csak akkor alkalmazzuk, ha van haszna Státuszinformáció legyen, és ne egy másik menü Kritikus info nem rakható ide, mert nem feltűnő Ez egyúttal az előnye is, mert nem zavarja a usert

91 Az attribútum arculatának ábrázolása
Kételemű halmaznál jelölőnégyzet vagy rádiógomb-csoport Kis elemszámú statikus halmaznál rádiógomb-csoport Nem nagy elemszámú nem statikus halmaznál listadoboz vagy kombinált doboz Nagy halmaznál külön adatablak Grafikus reprezentáció is lehet Görgős beviteli mező

92 Képernyőelemek elrendezése
A felhasználó keresési sorrendjének megfelelően (inkább balra fenn, mint középen) Csoportosítás fontossága A vízszintes görgetést kerüljük. A kiemelkedő elemek kattintásra ingerelnek, az egérvonszolásra átszíneződők is Fehér hátterű bekeretezett elem editálható, a szürke vagy ablakhátterű, illetve keret nélküli nem. A kiemelkedő vonalak egérrel vonszolhatók.

93 Ablakok típusai Elsődleges ablak (application window)
Elsődleges objektumok megjelenítésére Több részre (panel) osztható az alternatív nézetek miatt Másodlagos ablak (dialog box) Másodlagos objektumokhoz Elsődleges objektumok kevésbé fontos attribútumaihoz (pl. lapmargók) Felhasználói instrukciók bevitelére

94 Ablak méretezése és elhelyezése
800*600 a minimum Méretezhető elrendezéssel 1024*768-at tudnia kell 96 dpi és 120 dpi módban is mennie kell Ha nagyobb a felbontás, akkor több információ Ne csak széthúzza a meglévőket (pl. grid és fa növelés) Elhelyezés Középre helyezés jelentése: kicsit feljebb 45-55% Az értesítési területről indított ablak jobbra alul jelenjen meg A folyamatindikátor dialógus is

95 Dialógusablak Taszk panelként is megjelenhet
Normál ablakra van ráfestve, de a szabályok hasonlóak Tab-os dialógusablak is készíthető

96 Dialógusablak részei Címsor Főinstrukció
Parancs, alkalmazás, szolgáltatás neve, ahonnan ide jutottunk Ne legyen benn „dialógus”, „folyamat”, „hiba”, „figyelmeztetés” stb. szó Folyamat menetére utaló szöveg lehet (pl. 66% Kész) Főinstrukció Mit kell tennie a felhasználónak ebben az ablakban Kihagyható, ha túl nyilvánvaló Főnévképzős megfogalmazás – három ponttal Tartalom terület (kiegészítő információ) Parancs terület (jóváhagyó/elutasító gombokkal) Balra ide jöhet a További opciók gomb Lábjegyzet terület (gyakorlatlan usereknek szöveg)

97 Dialógusablak szabályok
Nincsenek rajta a Taszksoron Nincs min. és max. gomb, csak bezáró gomb Nem görgőzhető, nincs menüje, nincs címsor ikon A bezáró gomb Leállítás/Mégse jelentésű Rangjelzőkkel lehet a méretét változtatni. Ha a hozzátartozó elsődleges ablakot bezárjuk, akkor ez is bezárul. Kivéve a Tulajdonságok ablakot (Alt+F6 vált) Dialógusablakból ne nagyon kreáljunk újabb dialógusablakot. Csak akkor legyen modális, ha nagyon kell

98 Dialógusablak szabályok
Commit modell Modális dialógusablak: Késleltetett (csak Commit gombra) Nem modális: Azonnali (mező fókuszvesztésre) Dokkolhatóvá kell tenni 3*4 méretarányú legyen - gördítősáv nélkül Ne használjuk az Előugró beállítást Feliratok Figyelmeztető és hibaüzenetre ne OK, hanem Bezárás Igazából ez nyugtázás, és a hiba nem lehet sohasem OK... OK helyett leíróbb feliratot is használhatunk A generikus kifejezések nem jók (pl. Mentés, Kiválasztás) Parancsgombok sorrendje OK/Igen, Nem, Mégse, Alkalmaz (ha van ilyen) Több „commit” jellegű gombnál lehet osztott gombot használni Jobbra kell igazítani

99 Dialógusablak szabályok
A folyamat dialógusablakok nem modálisak Ott lehet hagyni őket A tulajdonos ablak bezárása után is életben marad Parancs gomb szövegezése Nagyon hosszú szöveg esetén Parancshivatkozás Ilyenkor további magyarázatnak is jut hely alatta Mégse gomb ekkor is kell Elérési billentyű mindig az első betű legyen OK/Mégse gombnál Enter/Esc az elérési billentyű Ikonok szerepe Felkiáltójel csak adatvesztés esetén kell Egyéb esetekben nem kell ikon (info ikon sem) Lehet saját ikon (pl. Kedvenceknél a sárga csillag)

100 Tulajdonságablak Nem modális, nem méretezhető ablak
Tulajdonságokat állít be, míg a normál dialógusablak inkább egy adott parancs vagy feladat végrehajtására szolgál Dokkolható toolbox vagy paletta Láthatónál explicit, nem láthatónál implicit (pl. paragrafus tulajdonságadatai) OK, Mégse, Alkalmaz gombok Többszörös szelekció esetén is csak egy ablak a közös tulajdonságokkal Inspector jellegű működés Mindig az aktuális objektumról automatikusan

101 Mire jó a dialógusablak?
Bizonyos részletek és kapcsolódó adatok (Pl. Részletek…) Feltételek begyűjtése egy leválogatáshoz Objektum tulajdonságadatai Ritka beállítások és parancsok elkülönítése Ha a user egy adott feladathoz állandóan dialógust hív, akkor az a dialógus nem jó. Veszélyes műveleteknél a Mégse előnyeinek kihasználása (pl. Formázás)

102 Standard dialógusok Az operációs rendszer által használt standard dialógusok (Common Dialog Boxes) Open Dialog Box (Open Folder is) SaveAs Dialog Box Find and Replace Dialog Box Print, Print Setup, Printer Page Setup Font és Color

103 Hogyan szabaduljunk meg a felesleges dialógusablakoktól?
Közvetlen manipuláció (pl. Átnevezés) Főablakba integrálás (pl. névre keresés) Jó alapértelmezések (pl. a Nyomtatás gomb) Automatikus folyamatok Pl. Word-ben a helyesírás és a nyelvtan aláhúzása Értesítés, státuszsor jelzés, ballon, osztott gomb Korszerű toolbar technika A gombok mellett editbox vagy combo is lehet A Mégse is lejátszható: a gomb nyomva marad egy hosszú keresésnél, és ha a user nem akarja kivárni, akkor újra lenyomja. Hibafile írása feldolgozásnál Millió egymás utáni dialógusablak helyett

104 Üzenetdobozok típusai
Értesítés (info doboz) Ritkán használjuk Flash Box (nincs gomb rajta) Nem divat, mert a user arra gondol, hogy lassú a program Konfirmálás (Warning Box) Nem kell a user minden tevékenységét konfirmáltatni Hibaüzenet (Critical Box) "Timeout-os" üzenet Ha a user válasza valószínű, és kár lenne egy több órás munkát felakasztani ezzel Ehelyett inkább az értesítési mechanizmust használjuk

105 Üzenetdobozok eliminálása
Megelőzés Érvénytelen menük és vezérlőelemek kikapcsolása Megszorítás alapú adatbevitel (pl. kombinált lista) Jó alapértelmezések (eleve mintát ad a usernek) Közvetlen manipuláció Automatikus javítás (pl. Word, de box = boksz) Alternatívák Értesítés, státuszsor jelzés, ballon, osztott gomb Üzenetmegjelenítés konfigurálása "Ez az üzenet ne jelenjen meg többé" Vissza is kell tudni kapcsolni az Options-ben. Alan Cooper: "…megfelelő tervezéssel az összes hibaüzenet és konfirmációs üzenet eliminálható"

106 Üzenetek szövegezése Kilép, befejez = program, hálózati kapcsolat
Bezár = ablak, dokumentum Leállít = folyamat, hardver művelet Mégse (Cancel) és Törlés (Delete) különbözősége Felett/alatt helyett előző/következő Specifikus legyen az üzenet "Fájl megnyitási hiba" helyett pontosabban Kerüljük a beépített rendszerüzeneteket Pl. "xxx mező nem lehet NULL" nem jó. Ne jöjjön több üzenet egymás után sorban

107 Üzenetek szövegezése Hasonló hibákra hasonló üzenetek
Az Ország mezőt ki kell tölteni! Az Irányítószám adatot meg kell adni! Nem töltötte ki a Számlaszám-ot !

108 Üzenetek szövegezése Ne üzenjünk egyes szám első személyben!
Nem találom a megadott rendelést. A megadott rendelés nem található.

109 Üzenetek szövegezése Kerüljük a tegezést!
Tedd be a lemezt a meghajtóba! Tegye be a lemezt a meghajtóba!

110 Üzenetek szövegezése Ügyeljünk a névelő és a többes szám korrekt használatára! A(z) Számla állomány nem nyitható meg! A Számla állomány nem nyitható meg!

111 Üzenetek szövegezése Kerüljük a jópofáskodásokat!
Könyököljön rá az Enter-re, ha búcsút akar mondani a rendeléstől! Adja meg a cixámot! Lökje be a lemezt!

112 Üzenetek szövegezése Nyelvtani szerkezet és helyesírás!
A záróérték nem lehet kisseb a kezdőértéknél! A külömbség nem lehet 10-nél nagyobb!

113 Üzenetek szövegezése Kerüljük a tragédia érzetét keltő kifejezéseket!
Az indexállomány tönkrement! Katasztrofális hiba a számlaegyeztetésnél! Az ideiglenes állomány megsemmisült!

114 Ablakkezelés Single Document Interface (SDI)
Multiple Document Interface (MDI) Sokkal inkább alkalmazásorientált, mint az SDI Minimalizált gyerekablak a képernyő alján Kezdő felhasználónak nehéz az MDI technika A gyerekablak és az elsődleges ablak fogalma keveredhet A szülő ablak lezárása és újranyitása nem állítja vissza az eredeti állapotot

115 Az MDI alternatívái Workspaces (munkaterületek)
Hasonló egy könyvtárhoz, amiben file-ok találhatók Vizuális tartalmazza az ikonokat és az ablakokat is, amelyek alá tartoznak. Kezelése hasonló az MDI-hez, de lezáráskor és újranyitáskor visszaáll az eredeti állapot. Workbooks (munkakönyvek) Tab fülek jelenítik meg az objektum különféle nézeteit és kapcsolatait. Project Hasonlít a könyvtárhoz abban, hogy egy külön ablakban jelképezi az objektumokat. A könyvtár bezárásához képest eltérés, hogy a projekt bezárása minden gyerekablakot bezár.

116 Menük Vízszintes főmenü (menu bar, menu category)
Egy szóból állhat Lebomló menük (pull-down menus) Gyorsbillentyű tartozhat a menüpontokhoz Kaszkád menü Feltáruló menü (pop-up menü, short-cut menü) Lebegő menü a jobb egérgombra Tab menü Tab lap alján MouseOver-re megjelenik egy lefelé mutató nyíl (pl. Media Player a Vistában)

117 Menü kialakítási szabályok
A főmenüben 3-10 közötti menükategória legyen 10-nél kevesebb menüpont a többi menüben Ki-bekapcsoláshoz pipa Tömör fekete pont az összefüggő menüpontok közül az aktuálishoz Három pont a dialógussal induló funkcióhoz (csak ha van adatbekérés, kivétel Névjegy) Szeparátorsorok alkalmazása Leszürkítés és nem eltüntetés A menüszövegek igék legyenek (főnévképző nálunk) Vegyes szerkezetet kerüljük "Bang menü" nem tanácsos

118 Menü kialakítási szabályok
A menü jelentősége a Vistában csökkent Számos programban élből nem jelenik meg (pl. IE, Windows Intéző, stb.), hanem eszközsor van helyette. Ha enélkül is boldogul a user, akkor lehetővé kell tenni, hogy elrejthesse Nem kell minden menüponthoz ikon Minden menüponthoz legyen elérési billentyű Dinamikus menükhöz sorszám legyen (pl. legutóbb használt fájlok) Fontosabb menüpontokhoz legyen gyorsbillentyű

119 Feltáruló menü kialakítási szabályok
A legutolsó tétel a Tulajdonságok Előtte legyen egy szeparátorsor Billentyűzeten Shift+F10-re jön fel Ne legyenek gyorsbillentyűk benne. A default menütétel vastagítva jelenik meg. Jobb egérgombos drag & drop-nál ezen áll. Standard pop-up menük Window (a címsorra jön fel) Icon (a jelzett objektumra specifikus) A feltáruló menü kihangsúlyozható, ha menügombot használunk Így nem csak azok tudják használni, akik tudnak a jobb gombról.

120 Menüszabványok Dokumentum létrehozó és megtekintő alkalmazásoknál
Fájl Új dokumentum, Megnyitás, Bezárás, Mentés, Mentés másként, Nyomtatás, Kilépés Szerkesztés Visszavonás, Kivágás, Másolás, Beillesztés Súgó <alkalmazás> súgója, Mi ez?, <alkalmazás> névjegye Nézet és Ablak is ajánlatos Egyéb alkalmazásnál taszk-orientált legyen

121 Toolbar (Eszközsor) Preferáltabb, mint a menü, mert egyéb elemek (pl. kombinált lista) is felrakhatók erre Menügomb, osztott gomb Túlcsordulási rangjelző is lehet, ha nem fér el Ikon címkével vagy anélkül – akár vegyesen is Panel egy csomó vezérlőelemmel Ribbon, toolbox, paletta néven is emlegetik Legyen vezérlőelem-magyarázat (tooltip), amin nincs címke Az eszközsor javasolt magassága 28 pixel A grafika így 16*16 pixel Dokkolást biztosítani kell.

122 Műveletek indítási szintjei
Ablak belsejébe telepített nyomógombok Eszközsor Menüpontok

123 Egérkurzor (Pointer) Az egér relatív helyét mutatja
Forrópontja van (hot spot) Drag & drop technika A duplaklikk és a drag & drop nem könnyű a kezdő felhasználónak. Tipikus pointerek

124 Egér funkciók Mutatás (forrózónán belül reagálhat)
Kattintás (aktuális objektum kiválasztása) Duplakattintás (default művelet elindítása, = szimplakattintás + Enter) Lenyomva tartás (a felengedés aktivizálja a műveletet!) Drag & drop (vonszolás) Ritka műveletek: Chording (több gomb egyszerre lenyomása) Többszörös kattintás (pl. 3-4)

125 Billentyűkurzor Kiválasztási kurzor Szövegkurzor
Aktuális menüpont eltérő szine Aktuális táblacella színkiemelése Képernyőelemek bekeretezése Szövegkurzor Adatbeviteli mezőn állva jelenik meg

126 Billentyű funkciók Szöveg beviteli billentyűk ("fehér" gombok)
Elérési billentyűk (alt + aláhúzott betű) Gyorsbillentyűk (F1-F12, Ctrl+betű) Módváltó gombok Toggle típus (Caps Lock, Num Lock) Módosító (Ctrl, Shift, Alt) Csak addig, amíg lenyomjuk Több módosító együttes használatát kerüljük.

127 Billentyű funkció hozzárendelési tanácsok
A gyorsbillentyű lehetőleg egy gomb legyen (pl. F6) Az elérési gombok ne legyenek érzékenyek a kisbetű/nagybetűre A SHIFT adja a fordított sorrendet Pl. Alt-Tab és Shift-Alt-Tab az ablakok között A Ctrl nagyobb hatókörben navigál Pl. Home=soreleje, Ctrl-Home=dok.eleje Az Esc a Mégse művelet gyorsgombja, az Enter pedig az OK műveleté

128 Alapnyilvántartás funkciói
Megtekintés Kiválasztás Adatelem, Adatsor, Csoport Karbantartás Felvitel, Módosítás, Törlés Adatintegritást sértő adatok ("félkész" státusz) Keresés Rendezettségváltás Nyomtatás

129 Megtekintési műveletek gyorsbillentyűi
Elsődleges objektum megnyitása (Ctrl-O) Ablak bezárása (Alt+F4) Tulajdonságablak megnyitása (Alt+Enter, Alt+duplakattintás) Segítő képernyő (Help) (F1 vagy Shift+F1)

130 Navigálás a billentyűzettel
Nyilak - egy egységgel fel/le/balra/jobbra Ctrl-nyilak - nagyobb egységgel fel/le… Home,End - sor eleje, sor vége Ctrl-Home, Ctrl-End - file eleje, file vége PgDn, PgUp - egy képernyőt fel/le Ctrl-PgUp, Ctrl-PgDn - balra/jobbra egy képernyőt (pozíció nem változik) Tab, Shift-Tab - következő/előző mező Ctrl-Tab - következő nagyobb mezőegység

131 Új objektum létrehozása
Másolással (Copy-Másolás) Új (New) parancs segítségével Beillesztés (Insert-Beillesztés) paranccsal pl. konténerbe adott helyre való behelyezés Külön vezérlőelemmel pl. a képernyőre felrakott nyomógombbal Template ikonnal minta alapján történő automatikus vagy varázsló-vezérelt létrehozás

132 Adatellenőrzés menete
Kötelezően kitöltendő mezők Mező címkéje elé teszünk egy sárga csillagot A csillaghoz rendelt tooltip: „Kötelező mező” Ha sok ilyen van, akkor inkább az ablak aljára egy statikus szöveg: „*Kötelező mező” Ha szinte minden mező kötelező, akkor a nem kötelező mező címkéjéhez írjuk: (opcionális) Ha ritka a kötelező mező, akkor ballont rakunk ki, ha nem töltötte ki Mezőellenőrzés nem modális Ballon, ha nem súlyos a hiba Ablakra integrált jel, ha súlyos a hiba Mezők közötti összefüggés ellenőrzése: modális A fókuszt az első hibás mezőre visszük

133 A megszorítások szerepe
Eliminálják az érvénytelen értékeket Könnyebb az érvényes adatokból a választás „Megszorítás" típusú vezérlőelemeket célszerű használni Megszorítási módok (pl. modális dialógusablak, varázsló) Megszorításokkal korlátozott mozgások (pl. Shift-nél csak vízszintes vagy függőleges vonal húzható)

134 További típusfeladatok
Szelekció Tranzakció-kezelés Folyamatkezelés Transzfer műveletek Összetett műveletek végrehajtása

135 Szelekció Explicit vagy implicit Egy vagy több objektum
Egy betű kiszelektálása az egész paragrafust is Egy vagy több objektum Tartomány (range) vagy szórt (disjoint) jellegű Homogén vagy heterogén Pl. "szöveg" betűtípus szerint heterogén, de karakterek szerint homogén Szelekció hatóköre egyik ablak szelekciója nem üti a másikat Szelekció hierarchiája (pl. Word-ben)

136 Szelekció elvégzése egérrel
Kiinduló pont és végpont között A végpont Shift-tel módosítható. Szelekció bővíthető és csonkítható Ctrl-lel Disjoint (Word nem, Access, Excel igen) Z-helyzet Egy neutrális helyen indított téglalap (marquee) rajzolás jelöli ki a tartományt.

137 Szelekció elvégzése billentyűzettel
A javasolt Select gomb a szóköz vagy a Ctrl-szóköz A Shift-re indul be a tartomány szelekció Shift+F8-ra (Add mode) lehet disjoint szelekciót csinálni. Újabb Shift+F8 (vagy Esc) kikapcsolja a bővítési módot)

138 Tranzakció-kezelés Egy vagy több művelet összekapcsolva.
Visszagörgetési lehetőségről gondoskodni kell (rollback) Tranzakció elfogadó (commit) parancsok: Save (Mentés) Save As (Mentés másként) Close (Bezárás)

139 Tranzakció-kezelési parancsok
Az utolsó tranzakció megismétlése (Repeat-Ismétlés) Az utolsó tranzakció visszagörgetése (Undo-Visszavonás) Az Undo visszacsinálása (Redo-Mégis) A függő tranzakciók Commitja, és az ablak bezárása (OK) A függő tranzakciók rollback-je és az ablak bezárása (Cancel-Mégse) Commit az ablakok bezárása nélkül (Apply-Alkalmaz)

140 Folyamat-kezelő parancsok
Folyamat felfüggesztése (Pause-Szünet) Felfüggesztett folyamat újraindítása (Resume-Tovább) Folyamat végleges leállítása (Stop-Leállítás) A Mégse a Leállítás helyett akkor, ha vissza lehet még állítani az eredeti állapotot

141 Transzfer műveletek Három részből áll: Három fajtája létezik:
Átküldendő objektum Célhely Végrehajtandó művelet Három fajtája létezik: Move (Áthelyez) - áthelyezi, de nem változtat. Nem ugyanaz, mint a Copy + Delete Copy (Másol) - Duplikátumot készít néhány eltéréssel Link (Csatol)- Két objektum közötti kapcsolat létrehozása úgy, hogy a cél rámutat az eredetire

142 Transzfer művelet megvalósítása
Kétféle technika létezik: Parancs mód (Kivágás, Másolás, Beillesztés) Közvetlen manipulációs mód (drag & drop) Bal gombbal - default drag & drop azonnal. Jobb gombbal - nem default drag & drop, feltáruló menüből választható ki a művelet. Visszajelzés (feedback) Parancs módban leszedi vagy leszürkíti Pointer megváltoztatása a cél alapján A Move, a Link és a Copy megkülönböztetése

143 Speciális transzfer parancsok
Delete (Törlés) - kiszedi az objektumot a konténerből Clear (Ürítés)- kiüríti a konténert Duplicate (Másolat)- elkészíti az aktuális objektum másolatát Print (Nyomtatás)- "átmásolja" az objektumot a printerre Send To (Küldés)- átküldi az objektumot a felkínált célhelyekre

144 Transzfer parancsok gyorsbillentyűi
Ctrl-C - Másolás (Copy) Ctrl-V - Beillesztés (Paste) Ctrl-X - Kivágás (Cut) Ctrl+vonszolás - Másolás (Copy) műveletté alakítja a mozgatás (Move) műveletet Esc - A drag & drop művelethez tartozó Mégse gomb

145 A látható navigáció kellékei
Kiindulópont (pl. főmenü) Cél Menekülő út (pl. Mégse vagy Kezdőlap) Hol tartunk most (Ablak címsora révén) Mi a következő lépés (megfelelő feliratú gombok révén) Vissza az előző lépéshez (Mégse vagy Vissza)

146 Összetett feladatok elvégzése
A végrehajtandó feladatok blokkosítása, esetleg sorszámozása Egy ablak oldja meg az egészet (Tab control segítségével) Varázsló készítése Sok-sok egymás utáni modális dialógusablak is lehet, de kerülendő

147 Web és Windows eltérései
Nincs több ablak vagy MDI Külön dialógusablaknak csak az MsgBox van Nincs menü és eszközsor, státuszsor Nincs beépített súgó rendszer Szimplaklikk van a duplaklikk helyett Nem lehet HTML objektumot kijelölni és műveletet végezni vele, mint a Windowsban Nincs billentyű shortcut sem

148 Web és Windows közelítése (1)
Több HTML dokumentum legyen a Windows-ban Pl. HTML help, illetve a szöveges info HTML-ben legyenek Hiperhivatkozás használata Az ablak tartalmát változtatja, míg a parancsgomb egy funkciót indít el Használati helyek a Windows programban Program nyitó lapjára ugrás HTML help behívása Web lap elérése Mail To működtetése

149 Web és Windows közelítése (2)
Menühelyettesítő elemek az űrlapon legyenek Kerüljük a különálló dialógusablakot A keresési feltételek beintegrálhatóak az ablakra. Kiválasztás Az egyszeres egérklikket ne használjuk erre Jelölőnégyzetek és külön Törlés parancsgomb Ne használjuk többablakos (pl. MDI) rendszert Részekre osztott, paneles rendszer kell Több fehér hátteret és kevesebb 3D effektust kellene használni Fehér háttér jelentése = dokumentum Standard vezérlőelemeket kell használni

150 Web és Windows közelítése (3)
Windows Presentation Foundation (WPF) XAML alapú rendszer WPF/E és XBAP révén a webes rendszerhez is jó A Vistában van Navigation Bar Hasonló navigálási lehetőségek, mint a weben

151 Műszaki dokumentáció fejezetei
Feladatspecifikáció Adatszerkezet specifikáció Részletes funkcióspecifikáció Fejlesztési környezet specifikálása Forráskód Tesztelési specifikáció

152 Adatszerkezet specifikáció részei
Adatbázis specifikáció Tábla specifikáció Konkrét táblamezők leírása Táblák közötti kapcsolatok definiálása

153 Részletes funkcióspecifikáció
Osztály specifikáció Objektum attribútumok és lehetséges műveletek Objektum arculat (facet) Objektumok közötti kapcsolatok leírása Eseménykezelési mechanizmus Funkcionális mag objektumorientált vagy procedurális programterve

154 Fejlesztési környezet megadása
Alkalmazás szekció Hardver szekció Operációs rendszer szekció Fejlesztő eszköz szekció Kiegészítő eszközök szekció Egyéb szekció

155 Forráskód A kötött nyelvi elemek konzisztens, és áttekinthető megjelenítése A választható nyelvi elemeknél emlékeztető név választása Magyarázó szövegek alkalmazása

156 Szoftverfejlesztői tesztelés
Elemi egységek tesztje (unit test) Programteszt Rendszerteszt

157 Független személyek általi tesztelés
Quality Assurance Testing Minőségbiztosítás Automatizált módszer Inspekciós teszt Rendszerfejlesztő kolléga által Sok új hibát hozhat felszínre

158 Felhasználói tesztelés
Prototípus Alfa teszt Munkaverziók (WIP, Builds) Béta teszt Finomítások Elfogadási teszt Használhatósági teszt Labor egyirányú tükörrel Magnószalag, videokamera

159 Tesztelési terv Program logika ellenőrzése
Felhasználói interfész működése Adatbekérési ellenőrzés Különféle output adatok tartalmi ellenőrzése

160 Felhasználói dokumentáció
Felhasználói útmutató (User's Guide) Oktató kézikönyv (Tutorial) Referenciakártya On-line segítő rendszer

161 Felhasználói útmutató
Bevezető Az installálás bemutatása Tartalmi fejezetek Objektummodell alapján Függelékek Adatszótár Technikai támogatás Glosszárium, irodalomjegyzék, index

162 Tartalmi részek konvenciói
Az adott tématerület szakkifejezéseit használjuk! A dokumentáció nem regény! A témák ne függjenek egymástól! Témabevezetés és összefoglaló Képernyőképek!! Futás közbeni adatokkal Jó mintapéldák kellenek

163 Tipográfiai szabályok
Egy kép == Ezer szó! Több stílus kell, de nem sok! Címsorokhoz SansSerif Normális szöveghez TimesRoman Forrásprogramokhoz Courier A normál szöveg betűmérete 11-12

164 Oktató kézikönyv (Tutorial)
80/20 szabály "Hogyan lehet...?" Funkcióorientáltság helyett problémaorientáltság a jellemző

165 Referenciakártya Parancsok szintaktikája
Hajtogatott vagy billentyűzetre ragasztható formában készülhet Hagyományos adatfeldolgozási alkalmazásokban ritka

166 On-line segítő rendszer
Problémaorientált Állandóan rendelkezésre áll Naprakész és pontos Teljeskörű Kivéve a nyilvánvaló dolgokat, amihez nem kell súgó Konzisztens megjelenésű Rugalmas (intelligens) Nem tolakodó

167 Segítség hívása Parancs módú meghívás
Helyzetérzékeny (context-sensitive) mód On-line dokumentáció önálló olvasása (önálló alkalmazás) On-line oktatóanyag Limitált tudású verzió előnye

168 Szakdolgozat témaválasztás
Önálló információs rendszer vagy szoftveradaptáció Előnyös, ha valós feladat A választék nagy: a sertésellés nyilvántartásától a postagalamb versenyig "Hasznos legyen"! Hármas könyvvitelt ne találjunk ki! A 245. Norton Commandert se írjuk meg

169 Szakdolgozat mérete Pontos mutatókkal nem definiálható, de összehasonlítható a következő minimum feladattal: 4-5 közepes méretű adattábla teljes lekérdezése és karbantartása 1 folyamatvezérelt jellegű feldolgozás 1 alaplista és 2 közepes méretű eredménylista Ha az összehasonlítás alapján nem dönthető el, hogy melyik a súlyosabb, akkor elég kicsi a választott feladat.

170 Szakdolgozat külalakja
Hagyjunk időt a dokumentációra! Ne maradjon ki semmi se belőle! Kerüljük az értelemzavaró megfogalmazásokat! Helyesírás-ellenőrzés!!! elsem indul, kitudja használni árú, bejelenkezés, renszer, külömböző, kisseb Befelyezni, malyd, fojtat egyenlőre, mellet, kellet

171 Fogalmazásgátló hatása (1)
"A rendelésformátumon levő rendelésszámról tudom, hogy az egy dátum, de ez nem fontos számomra és a mögötte levő szám se, ez nekik információ, nekünk csak egy szám, ezzel azonosítom be, de az nem érdekel, hogy az hogy nő, hiszen nem biztos, hogy találok olyat, ahol ez a második tag pl.: 1-es, nem biztos, hogy nálam van, az lehet, hogy máshova küldték."

172 Fogalmazásgátló hatása (2)
"Tehát ott megjelenik az az összeg abban a KWGL mezőben és a többit frissíteni kell, ki kell törölni, ki kell nullázni, vagyis amikor indul ez az egész procedura, akkor a többit mindig kinullázza, végig nézi mind a tíz mezőt és, ha van, átmásolja oda a végére, majd utána azt lehet összegezni rekordonként pontosabban csak azok a rekordok jelennek meg amelyeknél az adott héten volt kiszállítás."

173 Fogalmazásgátló hatása (3)
"ArtNum-ot azt felvesszük és a következőt jelenti, kezdetben ez mindig be volt gépelve az árral együtt, ami márkában van megadva, de nincs mindig kitöltve." "Tulajdonképpen a cég a németeknek és belföldre is, de egy-egy megrendelőnek szállít, tehát két helyre szállít."

174 Adatszerkezet 3NF formájú legyen
Bármilyen indokolt eltérést magyarázni kell! Adatszerkezeti ábra is legyen a dokumentációban Beszédes és konvenciózus mezőnevek

175 Forrásprogram Tetszőleges fejlesztőeszköz választható
Csak az önállóan készített forráselemeket kell dokumentálni Generált kód ne legyen a dokumentációban A máshonnan szerzett rutingyűjteményre hivatkozni kell Nem kell a teljes kódot kinyomtatni Az elektronikus mellékletre egyáltalán nem kell kód

176 Egyebek CD-t/DVD-t adjunk be
Éles mennyiségű adatnál is hatékonyan kell működnie Takarékosan bánjon a felhasználó idejével, a lemez- és memóriakapacitással Több felhasználós rendszernél jogosultságkezelés Ha a szoftver a téma alapján több felhasználós