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 10. (11.) ● ● Előadás diák honlap: ● november 4.Interakciós stílusok2

● 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 november 4.Interakciós stílusok3

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

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 november 4.Interakciós stílusok5

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 november 4.Interakciós stílusok6

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 november 4.Interakciós stílusok7

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 november 4.Interakciós stílusok8

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 november 4.Interakciós stílusok9

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… november 4.Interakciós stílusok10

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 november 4.Interakciós stílusok11

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ó november 4.Interakciós stílusok12

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 november 4.Interakciós stílusok13

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 november 4.Interakciós stílusok14

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 november 4.Interakciós stílusok15

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 november 4.Interakciós stílusok16

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 november 4.Interakciós stílusok17

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? november 4.Interakciós stílusok18

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 november 4.Interakciós stílusok19

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 november 4.Interakciós stílusok20

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 november 4.Interakciós stílusok21

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ú november 4.Interakciós stílusok22

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 november 4.Interakciós stílusok23

(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 november 4.Interakciós stílusok24

(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 november 4.Interakciós stílusok25

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: november 4.Interakciós stílusok26

Ű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) november 4.Interakciós stílusok27

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 november 4.Interakciós stílusok28

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 november 4.Interakciós stílusok29

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 november 4.Interakciós stílusok30

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 november 4.Interakciós stílusok31

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, november 4.Interakciós stílusok32

Kérdések és vége Polgár Péter