PACT A analysis C T - Vilniaus...
Transcript of PACT A analysis C T - Vilniaus...
Interaktyvių sistemų projektavimas
Interactive system design 3 paskaita
Žmogaus ir kompiuterio sąveika
1
• People
• Activities
• Context
• Technologies
PACT analysis
Turinys
• Interaktyvių sistemų analizės pagrindai
– Žmonės
– Veiklos
– Veikimo aplinka
– Technologijos
Tikslinis projektavimas | Naudotojų tipai 2
Veiklų ir technologijų sąveika
3
Veiklos kontekste Technologijos
Reikalavimai
Galimybės
Žmonės
Tikslai
• Suprasti atminties, dėmesio ir suvokimo svarbą projektuojant interaktyvius gaminius
4
Turinys
• Interaktyvių sistemų pagrindai
– Žmonės
–Veiklos – Veikimo aplinka
– Technologijos
Tikslinis projektavimas | Naudotojų tipai 5
Veiklų charakteristikos
• Laiko aspektas
• Bendradarbiavimo aspektas
• Sudėtingumo aspektas
• Kritiškas saugumo aspektas
• Turinio aspektas
Tikslinis projektavimas | Naudotojų tipai 6
Veiklų charakteristikos
• Laiko aspektai
– dažnis
• dažnoms ir reguliaroms – svarbus lengvas atlikimas
• retoms – lengvas išmokstamumas
– trukmė
– nuoseklios ar pertraukiamos
• pertraukiamoms veikloms – svarbu grįžtant rasti vietą, kurioje vietoje buvo nutraukta
– Užtikrinti, kad naudotojas nepamestų svarbiųš žingsnių
– atsako laikas
7
Veiklų charakteristikos
• Bendradarbiavimas
– Veiklą vykdo vienas ar keli naudotojai?
– Jei keli, užtikrinti
• informuotumą – ką veikia ir ką nuveikė kiti dalyviai,
• koordinavimą – kas kada veikia
• komunikavimą
8
Veiklų charakteristikos
• Sudėtingos veiklos
– struktūrizuotai veiklai – užtikrinti dialogą žingsnis po žingsnio
– neapibrėžtai
• užtikrinti patogų naršymą
• rodyti įvairių tipų informaciją
• patogiai judėti tarp įvairių informacijos dalių
9
Veiklų charakteristikos
• Saugumo kritiškumas
– kai klaidos sukelia skaudžius padarinius
– vykdoma klaidų prevencija
– užtikrinamas teisingo naudojimo atstatymas
10
Veiklų charakteristikos
• Veiklos turinys
– duomenų reikalavimai
• Ką įvesti?
• Kokia forma įvesti?
• Ką išvesti?
• Kokiu pavuidalu?
11
Paskaitos turinys
• Interaktyvių sistemų pagrindai
– Žmonės
– Veiklos
–Veikimo aplinka, kontekstas – Technologijos
Tikslinis projektavimas | Naudotojų tipai 12
Veikimo aplinka - kontekstas
• Fizinė
• Socialinė
• Organizacinė
• Technologinė
13
Technologijos
• Įvedimas – duomenų įvestis, įrenginio valdymas
• Išvedimas – tinkamas turinio pateikimas
• Komunikacija tarp įrenginių keičiantis duomenimis.
– Nagrinėjami komunikacijos lygiai ir protokolai
• Turinys – kokia forma pateikti turinį ir kokią informaciją reikia pateikti?
Tikslinis projektavimas | Naudotojų tipai 14
Įvedimo technologijos
Tikslinis projektavimas | Naudotojų tipai 15
Microsoft surface Šviesos pieštukas Microsoft Kinnect
QR kodai
Balso įvestis
Technologijos - išvedimas
16
Flexible organic light-emitting diode
Įprasti ir 3D spausdintuvai
ŽMONĖS
Interaktyvių sistemų pagrindai
Žmonės
Veiklos
Veikimo aplinka
Technologijos
17
Fiziniai skirtumai
• Skirtingas ūgis
• Skirtingas pojūčių jautrumas
– 8% neskiria raudonos ir žalios spalvų
– Trumparegystė, toliaregystė
– Judesių tikslumo trūkumas
• Ergonomika
– Projektavimas atsižvelgiant į antropologines ir fiziologines savybes
18
Regos ypatybės
19
išlenkia šviesą
Kūgeliai, 6-7 mln.
• dienos matymui
• skiria spalvas
Stiebeliai, ~125 mln.
• nakties matymui
• skiria pilkumo atspalvius
Vaizdo
interpretacija
Rega Sąmonė ir pažinimas Atmintis
Jautrumas spalvoms
20 Rega Sąmonė ir pažinimas Atmintis
Mažiausias jautrumas regos centre –
mėlynai spalvai
• Vengti mėlynų tekstų ir linijų
21
Gera spalva fonui
Rega Sąmonė ir pažinimas Atmintis
Spalvų chromatiškumas
• Nechromatinės – ryškesni kraštai
• Chromatinės – stambiems
elementams
– dėmesiui atkreipti
22 Rega Sąmonė ir pažinimas Atmintis
Kontrasto efektai
• Interpretavimas papildo vaizdą – neegzistuojantys
objektai
– Hermano gardelė
23 Rega Sąmonė ir pažinimas Atmintis
Kontrastas – kraštų paryškinimas
• Šviesių ir
tamsių spalvų
susidūrimas
keičia
ryškumą
24 Rega Sąmonė ir pažinimas Atmintis
Kontrastas
• Fono spalva keičia pirmo plano spalvos suvokimą
25 Rega Sąmonė ir pažinimas Atmintis
Skaistis – erdvės efektas
26 Rega Sąmonė ir pažinimas Atmintis
Šiltos ir šaltos spalvos
27 Rega Sąmonė ir pažinimas Atmintis
Turner, The Battle of Trafalgar (1822)
Deriniai
28 Rega Sąmonė ir pažinimas Atmintis
• Standartinis – mišrus
• Tikslingi deriniai
Neutralios spalvos
29 Rega Sąmonė ir pažinimas Atmintis
Veiksmų lygmuo
• Šiltos ir šaltos spalvos nusako veiksmų lygmenį – šiltos
• greitesnis naudotojo atsakas
– šaltos • būsena arba pradinė informacija
• Ryškumas turi atitikti informacijos svarbą
30 Rega Sąmonė ir pažinimas Atmintis
Vengiame
Vengiame priešingų spektro spalvų susidūrimo Sprendimas
Mažinti ryškumą
31 Rega Sąmonė ir pažinimas Atmintis
Sutrikęs spalvų matymas
8% žmonių neskiria raudonos ir žalios
Vengti žalios ir raudonos spalvų fonui ir pirmam planui
32 Rega Sąmonė ir pažinimas Atmintis
Vaizdo interpretacijos pokštai
• Ehrenstein and Orbison Illusion
• Heringo iliuzija
• Jastrow iliuzija
• Mueller-Lyer iliuzija
• Zoelnerio iliuzija
33
http://www.brl.ntt.co.jp/IllusionForum/index.html
Rega Sąmonė ir pažinimas Atmintis
Ehrensteino ir Orbisono iliuzija
34 Rega Sąmonė ir pažinimas Atmintis
Heringo iliuzija
35
http://www.brl.ntt.co.jp/IllusionForum/v/hering/ja/index.html
Rega Sąmonė ir pažinimas Atmintis
Jastrow iliuzija
36
http://www.brl.ntt.co.jp/IllusionForum/v/jastrow/ja/index.html
Rega Sąmonė ir pažinimas Atmintis
Mueller-Lyer iliuzija
37
http://www.brl.ntt.co.jp/IllusionForum/v/mullerLyer/ja/index.html
Linijų ilgis vienodas
Rega Sąmonė ir pažinimas Atmintis
Zoelnerio iliuzija (linijos yra lygiagrečios)
38
http://www.brl.ntt.co.jp/IllusionForum/v/zollner/ja/index.html
Rega Sąmonė ir pažinimas Atmintis
Dar kelios ...
39
http://www.brl.ntt.co.jp/IllusionForum/v/verticalHorizontal/ja/index.html
http://www.brl.ntt.co.jp/IllusionForum/v/fraser_life/ja/index.html
Rega Sąmonė ir pažinimas Atmintis
Dar kelios ...
40
http://www.brl.ntt.co.jp/IllusionForum/v/ebbinghaus/ja/index.html
Rega Sąmonė ir pažinimas Atmintis
Kaip spalvos paveikia žmogų?
• Raudona šildanti, gyvybingumas, veikla, pavojus.
• Oranžinė šildanti silpniau, stimuliuojanti, tinka vaikams.
• Geltona tonizuojanti, mažiausiai varginanti, gerina nuotaiką, atkreipia
dėmesį
• Žalia raminanti, šviežia, padeda pailsėti protui, OK
• Mėlyna ramina, suteikia tvirtumo, orientacija į praeitį, tradiciškumas,
tikrumas, objektyvumas.
• Juoda šalta, atgrasi, sunkumų, vyravimo, mirties spalva
41
Rega
Rega Sąmonė ir pažinimas Atmintis
Spalvos įvairiose kultūrose Spalva Vakarų šalys Japonija Kinija Arabų šalys
raudona
pavojus,
aristokratiškumas
(Prancūzija)
pyktis, pavojusdžiaugsmas
šventės
geltona
Atsargumas,
įspėjimas,
bailumas
palankumas, kilmingumas,
vaikiškumas, linksmumas
garbė,
karališkuma
s
laimė,
gerovė
žalia
Saugumas,
nemalonumas,
nusikalstamumas
(Prancūzija)
ateitis, jaunystė, energija
derlingumas
, jėga,
tvirtumas
mėlyna
vyriškumas,
saldumas, ramybė,
valdžia
niekšybė
dorybė,
ištikimybė,
tiesa
balta tyrumas, dorybė mirtis, gedulas
mirtis,
gedulas
juoda mirtis, blogis
42
Rega
Rega Sąmonė ir pažinimas Atmintis
Kiti kultūriniai skirtumai
• Šviesos jungikliai
– Amerika: nuspaustas apačioje reiškia išjungtą
– Britanija: nuspaustas apačioje reiškia įjungtą
• Čiaupai
– sukimas pagal laikrodžio rodyklę
• JAV: atsuka
• Didžiojoje Britanijoje: užsuka
43
Rega
Rega Sąmonė ir pažinimas Atmintis
Spalvų naudojimas
• Spalvos
– Pateikia papildomą informaciją
• Šiltos
– veiksmams, reikalaujantiems atsako,
– artumo pojūčiui sukelti
• Šaltos
– būsenos informacijai
– nuotolio pojūčiui sukelti
• Juoda ir pilkumo atspalviai
– pagrindinei informacijai
44
Rega
Rega Sąmonė ir pažinimas Atmintis
Pagalbinės priemonės
kūrėjams • Colorblind Web Page Filter
– http://colorfilter.wickline.org/
– Kaip mato paveikslą spalvas neskiriantys
asmenys?
• Daugybė kitų ...
45
Rega
Rega Sąmonė ir pažinimas Atmintis
Psichologiniai skirtumai
• Žmonėms su gera erdvine orientacija geriau atsipmena ir suranda aplankytus tinklalapius
– projektuojama žmonėms su silpnesne orientacija
• Skirtingas gebėjimas išlaikyti dėmesį
• Dauguma geriau atpažįsta nei prisimena
46
Mintinis modelis
• Kaip žmogus supranta įrenginio veikimą
• Suformuojamas naudojant interaktyvius įrenginius
• Jei žmogus jo nesupranta – nežinos, kaip atstatyti klaidingą veikimą
• Mintinį modelį formuoja – Sistemos vaizdas
– Dokumentacija
• Realizavimo modelis turi kuo labiau atitikti mintinį modelį
• Pardavimo automato mintinis modelis?
47
Pavyzdžiai
• Teigiami
– Spalvų balanso ir ryškumo parinkimas Adobe Photoshop
– Kalendorius
• Neigiamas
– failų kopijavimas ar perkėlimas tempiant tarp langų
Tikslinis projektavimas | Naudotojų tipai 48
Sąmonė
• Sąmoningas procesas:
– Veikia, kai į jį nukreiptas dėmesys
– inicijuojamas naujų aplinkybių,
– veikia nestandartinėje ar pavojingoje situacijoje bei priimant sprendimus.
• Nesąmoningo proceso savybės:
– inicijuoja besikartojantys procesai, prognozuojami veiksmai,
– veikia įprastose ir saugiose situacijose.
49 Sąmonė ir pažinimas Atminties procesai
Kaip atkreipti dėmesį į reikiamą vietą?
50 Sąmonė ir pažinimas Atminis Atminties procesai
Dėmesio valdymas dailėje
51
Paolo Veronese “Christ addressing a Kneeling Woman”
National Gallery, London
Sąmonė ir pažinimas Atminties procesai
Slankjuostės ir dėmesys
• Pirmose sistemose
– Kompiuteris rodė visus pasirinkimus
• Pateikiamas informacijos kiekis didėjo
– Slankjuostės
• Pirmieji taikymai dėl jų žlugo
• apie 1997 – vartotojai priprato
– Puslapio klostė (ang. Page fold)
• Turinio matomumo ribos
• Dėmesys – labai ribotas, greitai senka
52
http://www.useit.com/alertbox/scrolling-attention.html
Slankjuostės ir dėmesys
• Žvilgsnio fiksacijos tyrimas
– 80% virš klosties
– Max 300-400 pikselių
– Paskutinis elementas
53
http://www.useit.com/alertbox/scrolling-attention.html
Sąmonė ir pažinimas Atmintis
Vertikalios slankjuostės ir
dėmesys • Teksto peržvelgimas
vietoje skaitymo
• Dėmesys tolygiai slopsta
• Išdėstymas prioritetų mažėjimo tvarka
• Paskutinio elemento atvejis
54
Vertikalios slankjuostės ar puslapiavimas?
Visas straipsnis: slankjuostė Puslapiavimas
55
Horizontalios slankjuostės ir
dėmesys • Maksimalus
– 300-500 pikselių
• Dviejų stulpelių išdėstymas
– Kairioji dalis: 69%
– Dešinioji: 30%
– Už lango ribų: 1%
• Lyginant su vertikalia klostę
– 20 kartų mažesnis
56
Atkreipiame dėmesį
Matymo centre Virš žymeklio pateiktu pranešimu
Ryškesnėmis ar sodresnėmis spalvomis
Šoniniame matyme Didelių objektų spalvų pokyčiai
Apačioje mirksintis mygtukas užduočių juostoje
57 Sąmonė ir pažinimas Atminties procesai
Blaško
• Spalvų gausa blaško
– Nedaugiau 3-4 skirtingų spalvų
58
9 spalvos 5 spalvos
Suaugusius blaško, vaikams - patinka
59
http://www.disneylandparis.com/
Dėmesio vienaskaitiškumas
• Vienas dėmesio centras
• Pertraukimai
• Dėmesio vienaskaitiškumo pasekmės – 1972 metų lėktuvo katastrofos pamokos
• Neeilinė situacija stipriai sutelkia dėmesį
• Nereaguojama į kitus signalus
– Kuo labiau yra sutelktas dėmesys vienas dalykui, tuo sunkiau nukreipti dėmesį kita kryptimi
60 Sąmonė ir pažinimas Atminties procesai
Dar atkreipti dėmesį galima
• Garsais
• Lietimu
61
Atmintis
62 Sąmonė ir pažinimas Atmintis
Protavimo modelis (Card, Moran, Newell, 1983)
63
Ilgalaikė atmintis
Darbinė atmintis
Vaizdų
saugykla
Garsų
saugykla
Jusliniai
buferiai
Suvokimo
procesoriusJudesių
procesorius
Pažinimo
procesorius
PirštaiAkis
Ausis
Card S.K., Moran T.P., Newell A. (1983). The psychology of Human
Computer Interaction. Hillsdale NJ: Lawrence Erlbaum Associates.
Sąmonė ir pažinimas Atminties procesai
Sąmonė ir pažinimas
Pažinimas – išorinio pasaulio informacijos, priimamos jutimo organais, interpretacija.
Objektų ir įvykių suvokimas
Pažinimo psichologija
Mintiniai procesai
Suvokimas, mąstymas, atmintis, dėmesys, kalba.
Sąmoningi ir nesąmoningi procesai
Kokia yra Jūsų vardo paskutinė raidė?
64 Sąmonė ir pažinimas Atminties procesai
Darbinė atmintis Nedidelė, ~ 7 porcijos, skirsniai (angl. chunks) Ką lengviau įsiminti:
65 Sąmonė ir pažinimas Atminties procesai
6174591765 (617) 459-1765
DECIBMGMC DEC IBM GMC
Darbinė atmintis
Greitai pasiekiama (~ 70ms) ir greitai irstanti (~200 ms) Po kelių sekundžių informacija persiunčiama į ilgalaikę
atmintį
Veikia mąstymo metu
Išsilaiko: iki 20 sekundžių (vidutiniškai 10 sek.) Kuo vyresnis žmogus – tuo trumpiau
Interfeise pateikiame informaciją porcijomis
66 Sąmonė ir pažinimas Atminties procesai
Sąveika su darbine atmintimi
67 Sąmonė ir pažinimas Atminties procesai
Darbinė atmintis ir tinklapiai
• Tinklapio atsakas iki 10 sek.
• Žymėti aplankytas nuorodas
• Suteikti galimybę palyginti produktus
• Pagalbos tinklapių pateikimas
• F formos skaitymo šablonas
68
Ilgalaikė atmintis
Didelė, beveik neribota Informacija saugoma semantinėse
grandinėse
svarbus įsiminimo kontekstas Kur aš Jus mačiau??
informacija atgaminama lėčiau (~100 ms)
69 Atmints Atminties procesai Sąmonė ir pažinimas
Suvokimo trukdžiai
Du konkuruojantys signalai darbinėje atmintyje
Interfeisai turi atitikti atminties veikimo principus
Vyresni naudotojai
galimybė plėsti klientų ratą
70 Atminties procesai Sąmonė ir pažinimas
Atpažinti ar prisiminti? Komandinė
eilutė?
Grafinis interfeisas?
Mobilaus telefono valdymas
71
Prisiminti Atpažinti
Kaip veikia atpažinimas?
Susiejimas įvyko: objektas atpažintas
72 Sąmonė ir pažinimas Atmintis
darbinės atminties duomenys
ilgalaikėje atmintyje saugomi
duomenys
Atlikime eksperimentą
Kai pasirodys kita skaidrė
Išvardinkite spalvas
Kuo greičiau
Sakykite „viskas“ kai baigsite
Įsidėmėkite laiką ...
73
74
Popierius
Namas
Nugara
Tvarkaraštis
Puslapis
Mašina
Dabar dar kartą
• Išvardinkite spalvas
• Pabaigoje sakykite „viskas“
75 Sąmonė ir pažinimas Atmintis
Mėlyna
Raudona
Juoda
Balta
Žalia
Geltona 76
Atpažinimą palengvina
• Patarimai, užuominos
• Meniu, piktogramos, žymės ...
• Viskas, kas siejasi su
– situacija ir problema, kurioje buvo įsiminta
• Bet kuri sistema gali remtis atpažinimu!
77 Sąmonė ir pažinimas Atmintis
Apibendrinimas
Sąmonė
• Sąmoningam procesui • teisingai atkreipti dėmesį
• Regėjimo centre
• Spalvomis
• Dominančia informacija “virš klosties”
• Nesąmoningam procesui • Netrukdyti naudotojui dirbti
• Šoninio matymo priemonės dėmesiui atkreipti
Atmintis
• Darbinė atmintis – ribota, greita, bet
trumpalaikė,
– užuominos,
– informacijos “porcijavimas”
• Ilgalaikė atmintis – Neribota, bet lieta
– Atsiminimo palengvinimai – Įsiminimo konteksto
informacija
78
Apibendrinimas
• Interaktyvaus produkto kūrimo pradžia – žmonių, veiklų, technologijų charakteristikų produkto veikimo kontekste analizė.
• Esamosios situacijos analizė atliekama šiais keturiais aspektais
– Jų pagrindu išaiškinamos esamosios problemos ir formuluojamos neišnaudotos galimybės būsimam produktui
Tikslinis projektavimas | Naudotojų tipai 79
Apibendrinimas
• Žmogaus fizinių gebėjimų pakeisti neįmanoma, todėl reikia
– išplėsti jų turimas galimybes ir
– kompensuoti trūkumus.
• Toliau
– kaip projektuoti aiškią ir neerzinančią sąveiką
– panaudojamumas
80
Literatūra
• Donald A. Norman. The Design of Everyday Things. Basic Books; Reprint edition (September 17, 2002), 272 pages
• David Benyon, Phil Turner, Susan Turner. Designing Interactive Systems: People, Activities, Contexts, Technologies. Addison Wesley, 2005, 2014, chapter 2.
• Kristina Lapin. Žmogaus ir kompiuterio sąveika. Vilnius: TEV, 2008.
81
Papildomi skaitiniai
• Žmonių pažinimo ir mokymosi ypatumai http://www.myersbriggs.org/
• Asmenybių skirtumų testai http://www.businessballs.com/tests.htm
• Mintiniai modeliai Interaction design encyclopedia
82
Egzamino klausimai (1)
• Projektuojant interaktyvias sistemas būtina atsižvelgti į naudotojų, veiklų, veikimo aplinkos ir technologijų aspektus.
– mokėti paanalizuoti kiekvieną aspektą
– pažymėti (naudotojų, veiklų, aplinkos ar technologijų) charakteristikas pateiktame sąraše
83
Egzamino klausimai (2)
• Pateikite bent po vieną interfeiso projektavimo rekomendaciją atsižvelgiančią į šias žmogaus savybes: – Žmogaus akis prisitaiko prie dienos ir nakties matymo sąlygų.
– Smegenys interpretuoja matomą vaizdą.
– Akies centre esantys receptoriai (nebūtina prisiminti pavadinimo) pasižymi skirtingu jautrumu spalvoms.
• Kokie yra žmogaus atminties tipai? Jie skiriasi informacijos išlaikymo trukme ir saugojimo būdais. Pateikite bent dviejų tipų esmines charakteristikas. – mokėti analizuoti pateiktą pavyzdį siejant jį su tam tikro atminties tipo
charateristikomis
84