Interakciós stílusok. ? ● Kicsit visszatérünk az alapokhoz ● Megnézzük hogyan lehet megtervezni a számítógép használatát !: ● World Usability Day: november.

Az előadások a következő témára: "Interakciós stílusok. ? ● Kicsit visszatérünk az alapokhoz ● Megnézzük hogyan lehet megtervezni a számítógép használatát !: ● World Usability Day: november."— Előadás másolata:

1 Interakciós stílusok

2 ? ● Kicsit visszatérünk az alapokhoz ● Megnézzük hogyan lehet megtervezni a számítógép használatát !: ● World Usability Day: november 10. (11.) ● http://www.facebook.com/WUDhu http://www.facebook.com/WUDhu ● Előadás diák honlap: ● http://szofterg.elte.hu http://szofterg.elte.hu 2010. november 4.Interakciós stílusok2

3 ● Keretet adnak, hogy megértsük mi történik az ember és a gép között ● Ez segít a komplexitás csökkentésében, de legalábbis érthető darabokra szabdalásában ● Stílus: Egy-egy részfeladatnál ● hasonló szerkezetű ernyőképek, ● hasonló beviteli műveletek, ● hasonló az interakció szervezése ● A teljes munka során ● más-más stílus lehet célszerű ● a részfeladatoktól függően 2010. november 4.Interakciós stílusok3

4 Interakció keretrendszere 2010. november 4.Interakciós stílusok4

5 AVÉK ● Akció végrehajtás/értékelési kör (Donald Norman (1990) The Design of Everyday Things) ● A kör tetszőleges pontján kezdődhet, pl.: ● Megfogalmazódik egy cél ● Történik valami, amire reagálni kell ● Minden szereplő más „nyelvet” beszél (rendszer, felhasználó, input és output) ● A nyelvek egy része adott (felhasználó fizikai és kognitív adottságai), ehhez kell alakítani a többit 2010. november 4.Interakciós stílusok5

6 Interakció tervezése ● A nyelvek megfeleltetésére vannak stratégiák: ● Mentális modell ● Megfeleltetés ● Értelmezési és jelzési távolság ● Affordancia ● Ezek megvalósításával alakítunk ki interakciós stílusokat 2010. november 4.Interakciós stílusok6

7 Mentális modell ● Mentális modell: egy kognitív leképezés egy dologról, logikusan és hihető módon megalkotva, hogy a dolog felépítéséről vagy működéséről mit gondolunk ● Az átlátható tárgyaknál ez a valósághoz közeli ● Pl.: Kerékpár ● Átlátszatlan tárgyak eltakarják a felépítésüket ● Pl.: Számítógép ● A felhasználó mentális modelljének megfelelő működés segíti a felhasználó munkáját 2010. november 4.Interakciós stílusok7

8 Mentális modell ● Mentális modellek: ● Nem tudományosak: találgatáson és közelítésen alapul ● Részlegesek: nem az egész rendszert, csak a felhasználó számára releváns részeket írják le ● Instabilak: nincs meghatározott formula, a rendszer megismerésével változik ● Inkonzisztens: a modell részei ellentmondhatnak más részekkel ● Személyes: nem univerzális elgondolások, az adott személyre vonatkoznak 2010. november 4.Interakciós stílusok8

9 Megfeleltetés ● Megfeleltetés: hogyan keresünk kapcsolatokat a dolgok között ● Többnyire érdemes a természetes leképezést használni ● Pl: lejátszó program, és hifi torony kezelőszervei közti megfeleltetés 2010. november 4.Interakciós stílusok9

10 Távolságok ● Értelmezési távolság: ● Távolság aközött, amit a felhasználó csinálni szeretne, és amit egy felületi elem jelent ● Jelzési távolság: ● Távolság aközött aminek egy felületi elem látszik, és amit a felületi elem ténylegesen jelent ● Érdemes mindkettőt minimalizálni… 2010. november 4.Interakciós stílusok10

11 Affordancia ● Affordanica, egy elem azon tulajdonsága, aminek segítségével művelet végezhető rajta ● Segítségével előre tudjuk, hogy a műveletnek mi lesz a végeredménye, segít a döntésben ● Feleljen meg az elvárásoknak ● Ezeket igyekezzünk létrehozni 2010. november 4.Interakciós stílusok11

12 Interakciós stílusok ● Kérdés-felelet ● Egyedi kezelőszervek ● Telefonos interakció ● Természetes nyelvi ● Menü alapú ● Közvetlen manipuláció ● Űrlap kitöltés ● Parancssoros ● Webes ● Nagyítható 2010. november 4.Interakciós stílusok12

13 Kérdés-felelet (Q&A) ● A gép szöveges kérdésére, ● az ember szövegesen válaszol ● pl.: login, password vagy varázslók ● Megjegyzés: ● „Az ember irányítson” elv ellen ● Nagy biztonsági igények esetén ez a jó ● pl.: szoftver telepítése, reaktor indítása 2010. november 4.Interakciós stílusok13

14 Kérdés-felelet (Q&A) Előnyei Nem igényel tanulást Kevés, egyszerű funkció esetén viszonylag gyors, Ezért eseti használónak jó, Jó hibakezelést tesz lehetővé Hátrányai Sok, összetett funkció esetén lassú, nehézkes, Hosszabb szöveges válaszok esetén hibázás lehetősége, Hosszabb idő után unalmas, megalázó lehet, Bár indokolt esetben, rövidebb ideig jó lehet 2010. november 4.Interakciós stílusok14

15 Egyedi kezelő szervek ● Célberendezéseknél, pl.: pénzjegykiadó, lift, stb. ● Elsősorban: gombok, és egyedi kijelzők ● Megjegyzés: ● egyedi eszközök ● a méret és egyszerűség érdekében 2010. november 4.Interakciós stílusok15

16 Egyedi kezelő szervek Előnyei Kevés, egyszerű funkció esetén könnyen tanulható Viszonylag gyors, Eseti használónak jó Jó hibakezelést tesz lehetővé Hátrányai: Költséges lehet (sokszori telepítés...) Sok, összetett funkció esetén lassú Az állapotok és műveletek rendje nem mindig nyilvánvaló Kognitív terhelés: a lehetséges műveletekre emlékezni kell 2010. november 4.Interakciós stílusok16

17 Telefonos interakció Előnyei Használható a meglévő telefonhálózat, Kis ráfordítással jelentős forgalom (semmi köze a szoftver ergonómiához) Rövid, egyszerű funkciók esetén gyors Eseti használónak megfelelő lehet Hátrányai Hosszú, összetett funkciók esetén lassú Menüpontok fölsorolása, a menüpont neve és tartalma… Számítógépes interakcióhoz szokott embernek… A gépi hang idegen a szöveg gondos tervezést igényel 2010. november 4.Interakciós stílusok17

18 Természetes nyelvi ● Verbális interakció ● Kérdések a képernyőn - válasz billentyűzettel, ● Lehet beszéddel; hangszóró és mikrofon ● Megjegyzés: ● Billentyűzet-hibázás, ● Élőbeszéddel drágább (…) ● Erős korlát, hogy az élőbeszéd nem egyértelmű ● Értelem erősen függ a kontexustól ● Beszéd felismerés? Szemantika? 2010. november 4.Interakciós stílusok18

19 Természetes nyelvi Előnyei Kötetlen szintaxis, kötetlen sorrend Kevés tanulás Nem lehet elfelejteni Rugalmas Hátrányai Költséges Gyakran tisztázó kérdések kellenek – ezért hosszadalmas lehet Gyakran céltól elhajló Korlátos intelligenciájú rendszereknél ismerni kell a rendszer korlátait 2010. november 4.Interakciós stílusok19

20 Menü alapú ● Menü: az interakció szemléletes eszköze ● Menü alapú interakció: hierarchikus menükkel irányított interakció ● Lehet… ● Grafikus: egérrel vagy kurzorral lehet választani ● Szöveges: beírni a kívánt menüpont számát 2010. november 4.Interakciós stílusok20

21 Menü alapú ● AVÉK: a menü korlátai segítenek a szándék megfogalmazásában ● Jelzési távolság alacsony (oda van írva) ● A menü felépítése meghatározza a felhasználó mentális modelljét ● A menü elemek választható affordanciák 2010. november 4.Interakciós stílusok21

22 Menü alapú Előnyei Gyors, egyszerű, kényelmes, Használata könnyen tanulható, Eseti használóknak megfelelő, A menü látványa tájékoztatás a lehetőségekről Nem kell megjegyezni a lehetőségeket Hátrányai Folyamatos használatuk hosszú időn át unalmas A hierarchikus menüknél a gép irányít A mélyebben lévő elemek elérése lassú Gyakorlott felhasználóknak lassú 2010. november 4.Interakciós stílusok22

23 Menük tervezésének elvei ● Egyöntetűség (konzisztencia) ● Választási módok: egérrel, billentyűvel... ● A menü kinyílik az egér rávezetésekor ● Egy kattintás elég – ha nem destruktív ● Folyamatos visszajelzés – és nyugtázás ● Lehet magyarázat – buborék, állapotsor ● Hangjelzés ha baj van ● Gyors billentyűk ● Tömör menüszavak ● Egyértelmű és könnyen megérthető ● Kisbetűkkel (de nem túl kicsi betűkkel) ● A megjelenő cím összhangban a menüvel ● Igék, vagy névszók – egyöntetűen ● 7 ± 2, szemléletes tagolás ● Főmenü + legfeljebb 2 szint ● Halványítás ● Mindig ugyanott 2010. november 4.Interakciós stílusok23

24 (Grafikus) Közvetlen manipuláció ● Szoros szemléletes és műveleti hasonlóság a munka tárgyával ● Művelet közben folyamatos reprezentáció értelmes képi metafórákkal ● „Olyan mintha” tényleg megcsinálnánk ● AVÉK: végrehajtásra több lehetőség 2010. november 4.Interakciós stílusok24

25 (Grafikus) Közvetlen manipuláció ● Előnyei ● Könnyen tanulható, lassan felejthető ● Hatékony, ● Élvezetes, sikerélményt, megelégedettséget nyújt ● Hátránya ● Nem biztos, hogy magától értetődik ● Megjegyzések ● A Pasziansz (Sol) mint gyakorlóprogram. ● A képzeletbeli valóság (virtuális realitás) (elmerülés egy mesterséges világban) ● Videojátékok 2010. november 4.Interakciós stílusok25

26 Metafórák ● A felületen használt objektumok és a valóságban lévő elemek közti kapcsolat ● Komplex fogalmak is érthetővé válnak a valós világból vett tudás alapján ● Valós világ affordanciái segítenek ● Ha nem úgy működik, mint a valóságban, az zavart okozhat ● Legismertebb a „desktop” metafóra ● Probléma: 2010. november 4.Interakciós stílusok26

27 Űrlap kitöltés (form fill-in) ● Kitöltendő űrlap a képernyőn, a papírhoz hasonló elrendezésben ● Információ bevitelre használatos haladás inkább lineáris ● Előnyei: ● Egyszerű, kényelmes, ● Csak billentyűzettel: egyöntetű kezelés ● Könnyen tanulható, ● Eseti használóknak megfelelő, ● A kérdések: tájékoztatás a feladatokról ● Beépíthető ellenőrzések: teljesség, adat-típusok ● Hátrányai: ● Nagyméretű űrlap kitöltése unalmas ● (A gép irányít, de nem baj) 2010. november 4.Interakciós stílusok27

28 Parancssoros ● Az ember parancsot ír le, a gép értelmezi, végrehajtja, és válaszol ● AVÉK: komplex műveletek (mit és hogyan akarok csinálni) ● Nagyon pontos mentális modell kell ● Nagy a jelzési távolság: csak egy kurzort kapunk 2010. november 4.Interakciós stílusok28

29 Parancssoros Előnyei Az ember irányít, Rugalmas, kifejező parancsok Előttünk állhat a parancs-napló Növekményes tanulás Gyors, egyszerre sok adattal lehet dolgozni Ismétlődő feladatokra Haladó felhasználóknak Hátrányai Kognitív terhelés; emlékezni kell, Könnyen felejthető Nehezen tanulható Fokozott hiba-lehetőség Nehézkes javítás 2010. november 4.Interakciós stílusok29

30 Parancssoros ● Következetes szórend, szintaxis szerkezet ● Következetes rövidítési elvek (pl. DEL, de CNTRL) ● Egyöntetű szóhasználat, ● ellenpélda: DELETE, ERASE, CANCEL ● Legyen makró építés ● Legyenek szóváltozatok (alias) ● A paraméterek feltételezett éréke (alap, default) ● Legyen súgó ● Korlátozzuk a parancsok számát! (?) ● Jellemző és megkülönböztethető parancsnevek ● A rövidítések mellett a teljes parancsnév is 2010. november 4.Interakciós stílusok30

31 Webes ● Két jellemző forma ● Linkek ● Jelzési távolság számít (Klikk ide!) ● Ha nem jó a link szövege, akkor sokáig tart kiértékelni, tényleg erre van-e szükség ● Keresés ● Értelmezési távolság számít (Keresési eredmény oldal) ● Ha rossz a keresési algoritmus sokáig tart a végrehajtás ● Jobban támogatja a mentális modell létrehozását 2010. november 4.Interakciós stílusok31

32 Nagyítható ● A térképek kialakításán alapszik ● A térbeli elhelyezkedés is segíti a mentális modell kialakítását ● Használható elemek: ● Szín ● Méret arány ● Minta ● Közelség ● Pl.: Prezi.com, 2010. november 4.Interakciós stílusok32

33 Kérdések és vége Polgár Péter Balázs sirpepe@elte.hu @polgarp