Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

77
Interac Interac ţ ţ iune om iune om - - calculator calculator Dr. Dr. Sabin Sabin - - Corneliu Corneliu Buraga Buraga www.infoiasi.ro/~busaco www.infoiasi.ro/~busaco / / 1 1 Dr. Sabin-Corneliu Buraga Facultatea de Informatică Universitatea “A.I.Cuza” Iaşi, România http http :// :// www.infoiasi.ro www.infoiasi.ro /~ /~ busaco busaco / / Interac Interac ţ ţ iune om iune om - - calculator calculator Interac Interac ţ ţ iunea cu utilizatorul (I) iunea cu utilizatorul (I)

description

 

Transcript of Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

Page 1: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

11

Dr. Sabin-Corneliu Buraga Facultatea de Informatică

Universitatea “A.I.Cuza”

Iaşi, România httphttp://://www.infoiasi.rowww.infoiasi.ro/~/~busacobusaco//

InteracInteracţţiune omiune om--calculatorcalculator InteracInteracţţiunea cu utilizatorul (I)iunea cu utilizatorul (I)

Page 2: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

22

“Computers are useless.

They can only give you answers.”

Pablo Picasso

Page 3: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

33

CuprinsCuprins

Manipularea directă–Preliminarii

–Mouse-ul

–Meniurile

–Casetele de dialog

Page 4: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

44

IntroIntro

Interacţiunea cu utilizatorul folosind

consola se realizează via funcţii I/O (blocante):

printf (“Dati n=”); scanf (“%d”, &n); printf (“Dati s=”); scanf (“%s”, s); … printf (“T=%f5.2\nGata!\n”, temp);

Page 5: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

55

IntroIntro

Interacţiunea

directă –

e.g., via GUI – recurge la tratarea evenimentelor de intrare:

– Utilizatorul are un control mult mai mare asupra dialogului

– Utilizatorul poate acţiona (e.g., via click) asupra aproape orice obiect al interfeţei disponibile

– Programele GUI nu pot fi scrise într-un

stil sincron, secvenţial (prompter-răspuns)

Page 6: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

66

IntroIntro•

Evenimente de intrare– Secvenţiale

(primare):

Mutarea mouse-ului•

Apăsarea/eliberarea unui buton al mouse-ului

Apăsarea/eliberarea unei taste– Translatate:

Click sau dublu-click de mouse•

Intrarea/ieşirea cursorului mouse-ului

dintr-o zonă de fereastră•

Obţinerea/pierderea focus-ului tastaturii (e.g., într-un control text edit)

Introducerea caracterelor via tastatură

Page 7: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

77

CuprinsCuprins

Mouse-ul–acţiuni–focus–manipulare–selecţie–drag & drop–procesarea

evenimentelor

Page 8: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

88

MouseMouse•

Primul

mouse (Douglas Engelbart, ~1965):

Page 9: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

99

MouseMouse•

Programul trebuie să suporte introducerea datelor atât cu mouse-ul, cât şi cu tastatura

Unii utilizatori nu pot manipula/controla uşor mouse-ul

“nu sunt iubitori de animăluţe”

(Cooper)

Mijloace de interacţiune:– Buton

stâng – funcţii principale (activare, selectare)

– Buton

drept – acţiuni specifice (într-un anumit context)

nu

exista

la Mac OS

– Buton

mijlociu

– acţiuni particulare (dependente de aplicaţie)

– Rotiţa

scroll îndelungat (utilizare în special pentru Web)

Page 10: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1010

MouseMouse

Acţiuni fundamentale:– Point– Point, click, release (Click)– Point, click, drag, release (Click & Drag)

Acţiuni suplimentare:– Point, click, release, click, release (Double Click)– Point, click, click alt buton, release, release

(Chord Click) –

copy & paste în UNIX

Page 11: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1111

MouseMouse

Un click simplu selectează datele sau modifică starea unui element (control)

de interfaţă•

Dublu-click înseamnă click simplu + acţiune

Evenimente: Mouse-move, Mouse-up, Mouse-down•

Proprietăţi: poziţia (X, Y), starea butonului, starea unor taste, timestamp-ul

Page 12: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1212

Mouse | cursorMouse | cursor•

Cursor

de obicei,

de dimensiuni 32×32 pixeli

Fiecare cursor posedă un punct sensibil (hotspot)

Un obiect de interfaţă care reacţionează la acţiunea mouse-ului

este numit flexibil

(buton, pictogramă, celulă de spreadsheet,

link,…)•

Trebuie comunicat faptul că un obiect este flexibil:– caracterul 3D– modificarea unei variabile

vizuale

(e.g., culoarea)

– schimbarea cursorului mouse-ului

Page 13: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1313

Mouse | Mouse | obiecteobiecte flexibileflexibile

Page 14: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1414

Mouse | Mouse | focusulfocusul

Doar un singur program

(fereastră) interacţionează cu utilizatorul

la un moment dat•

Focusul indică programul care va

recepţiona input (activarea programului –

una

dintre

ferestrele

sale)

Page 15: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1515

Mouse | Mouse | focusulfocusul

Tehnici de focus:– new-focus click – comută focusul în altă fereastră– in-focus click –

click într-o fereastră care deja

a primit focusul, va fi tratat ca un click obişnuit (se va executa ceva) Reactivarea unei ferestre nu va trebui să afecteze nici o selecţie pre-existentă acolo

– mouse-over click – focusul se schimbă dacă mouse-ul intră în zona sensibilă a unei ferestre

Page 16: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1616

Mouse | Mouse | focusulfocusul

Mouse-ul se poate folosi în conjuncţie cu meta-tastele (Ctrl, Alt, Shift etc.)

Nu există un standard de utilizare•

Cursorul ar trebui să se modifice pentru a ilustra semnificaţia meta-tastelor (e.g., Photoshop)

Apar probleme de utilizare

Page 17: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1717

Mouse | Mouse | manipulareamanipularea directădirectă

Tipuri:–Selecţii–Drag & drop–Manipularea controalelor interfeţei–Redimensionarea, repoziţionarea,

remodelarea elementelor de interfaţă–Defilarea conţinutului (scroll)

Page 18: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1818

Mouse | Mouse | manipulareamanipularea directădirectă

Selecţia– alegerea obiectelor după care se realizează

o anumită acţiune (deosebirea de interfeţele linie de comandă: acţiune-obiect)

– selectarea datelor discrete

(discontinuă) exemple: icon-urile

din managerul de fişiere,

formele geometrice dintr-un program de grafică vectorială

– selectarea datelor concrete

(continuă) date contigue: textul, celulele unui tabel

Page 19: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1919

Mouse | Mouse | manipulareamanipularea directădirectă

Selecţia– se poate realiza

prin excludere mutuală

sau

în manieră aditivă ori multiplă, folosindu-se în conjuncţie cu meta-tastele

– trebuie marcată vizual

– trebuie să nu fie ambiguă

– problema: anularea unei selecţii

Page 20: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2020

Mouse | Mouse | manipulareamanipularea directădirectă

Selecţia– se poate realiza

via handles

Page 21: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2121

Mouse | Mouse | manipulareamanipularea directădirectă

Drag & drop–a apărut în premieră la Macintosh –tipuri:

interior

în cadrul aceleaşi aplicaţii (mai

uşor de implementat)

exterior

între aplicaţii diferite sau între o aplicaţie şi sistemul de operare (necesită prezenţa unui suport extern

e.g., al sistemului de operare

–, folosindu-se un protocol special: negotiated drag & drop, pentru realizarea, de exemplu, a conversiilor de date între aplicaţii)

Page 22: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2222

Mouse | Mouse | manipulareamanipularea directădirectă

Drag & drop–se poate realiza:

peste funcţii (e.g., operaţia de ştergere a unui fişier)

peste date (listarea unui document prin realizarea operaţiunii de drag a icon-ului

imprimantei

peste icon-ul

fişierului)

cazul

OS/2

Page 23: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2323

Mouse | Mouse | manipulareamanipularea directădirectă

Drag & drop– nu orice obiect al interfeţei poate fi candidat

pentru drop– candidatul

drop trebuie să semnaleze

vizual

capacitatea de a accepta un drop– cursorul drag & drop trebuie să indice vizual

obiectul sursă (master) care va fi lăsat peste ţintă (candidatul drop)

– trebuie indicat vizual când o operaţie de drag & drop se termină

Page 24: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2424

Mouse | Mouse | manipulareamanipularea directădirectă

Pericole/probleme–manipularea accidentală

trebuie prevenită•

manipulările ambigue trebuie evitate

numărul de obiecte care pot fi manipulate simultan trebuie să fie cât mai redus

Page 25: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2525

Mouse | Mouse | manipulareamanipularea directădirectă

Pericole/probleme–acces dificil la candidatul drop

sursa &

destinaţia unei acţiuni drag & drop pot să nu fie vizibile simultan

–confuzii în manipularea directă•

acţiunea implicită este determinată, uzual, de destinaţia (candidatul) drop şi nu de sursă

Page 26: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2626

Mouse | Mouse | manipulareamanipularea directădirectă

Pericole/probleme– precizia în efectuarea unui drag & drop– scalabilitatea

exemplu: redenumirea fişierelor– dificultate în realizarea

acţiunilor de către persoane cu handicapuri

motorii

Manipularea directă nu este facilde implementat!

Page 27: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2727

Mouse | Mouse | procesareaprocesarea

evenimentelorevenimentelor

Evenimentele de intrare sunt stocate într-o coadă (folosită să scutească aplicaţia de problemele privitoare la constrângerile privitoare

la timp)

Mutărilor mouse-ului

(evenimente fizice multiple, continue) îi corespund un singur eveniment introdus în coada

de evenimente

coalesced event

Page 28: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2828

Mouse | Mouse | procesareaprocesarea

evenimentelorevenimentelor

Evenimentele sunt procesate via o buclă (loop)– Blocare până la apariţia unui eveniment– Preluarea unui eveniment din coadă– Translatarea evenimentelor secvenţiale în cele

de nivel mai înalt (care sunt introduse în coadă)•

Generarea dublu-click-urilor,

focus-ului etc.

– Trimiterea evenimentului spre componenta-ţintă

Page 29: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2929

Mouse | Mouse | procesareaprocesarea

evenimentelorevenimentelor

Bucla poate fi controlată intern de un toolkit de interfaţă (GTK+, .NET, Java Swing

etc.)

sau de aplicaţie (Win32, Palm OS,

browser,…)•

Evenimentul va

putea

fi propagat

dacă o componentă nu-l tratează– în sus: “nu ştiu să-l tratez, îl dau părintelui meu”– în jos: “nu ştiu ce să fac, îl dau unui copil de-al meu”

Page 30: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3030

Mouse | Mouse | procesareaprocesarea

evenimentelorevenimentelor

Procesarea

evenimentelor

via un automat finit (Rob Miller, 2004)

Page 31: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3131

CuprinsCuprins•

Meniuri– Istoric

– Tipuri

Casete de dialog– Tipuri

– Moduri de interacţiune

– Proiectare

– Comenzi de terminare

Page 32: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3232

MeniuriMeniuri | | istoricistoric

Interfaţa linie de comandă– precursor: Job Control Language (IBM, 1970)

.job .compile .run– fiecare acţiune se executa prin introducerea

unei comenzi, eventual urmată de parametri: UNIX, CP/M, Spectrum, DOS

Interfaţa cu meniuri ierarhice– acţiunile se bazează pe o ierarhie –

e.g., fdisk

– utilizatorul trebuie să iasă din zona de editare a datelor pentru a vizualiza/a selecta opţiuni din meniu

Page 33: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3333

MeniuriMeniuri | | istoricistoric

Interfaţa VisiCalc / Lotus 1-2-3– meniurile ocupau

2 linii

(coexistau cu zona activă de interacţiune)– comenzile pot fi executate rapid prin shortcut-uri– meniuri stufoase

Interfaţa cu un singur nivel de adâncime (mono cline grouping sau

flat menus)

– se foloseşte acum pentru dispozitive

mobile (iPod) ori

situri Web (meniuri de navigare

prin

hipertext)

Page 34: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3434

MeniuriMeniuri•

Meniul

pop-up (numit

şi

drop-down)

– asocierea unei acţiuni principale unui meniu de opţiuni ierarhice

– apare atât în interfeţele text, cât şi în cele grafice (aplicaţii desktop + Web)

– pot fi proiectate şi meniuri în cascadă, pe niveluri multiple

– fiecare opţiune din meniu ar trebui să aibă ataşat un tooltip sau o explicaţie pe linia de stare (textul ales trebuie să fie unul potrivit)

Page 35: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3535

MeniuriMeniuri•

Meniul

pop-up

– Opţiunile

din meniu se pot activa şi prin intermediul tastaturii: unele

opţiuni au ataşate taste active:

hotkeys (acceleratori) – Acceleratori

standard:

Ctrl+C

(Copy), Ctrl+V (Paste), Ctrl+S

(Save),…– Atenţie

la combinaţiile de taste pe care le alegem!

– “Obey standards unless there is a truly superior alternative.” (Alan Cooper)

Page 36: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3636

MeniuriMeniuri•

Meniul pop-up– opţiunile care necesită o interogare

a utilizatorului trebuie urmate de “...”– cele care deschid alte meniuri trebuie să indice

acest lucru utilizatorului – opţiunile care nu se pot folosi la un moment dat

trebuie dezactivate – un meniu poate include opţiuni flip-flop

sau mutual exclusive– unele opţiuni pot avea ataşat un simbol

(idiom) similar

celui

utilizat în toolbar

Page 37: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3737

Meniuri

pop-up

Page 38: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3838

MeniuriMeniuri•

Meniul pop-up– atenţie la lungimea denumirilor opţiunilor

(mai ales în cazul internaţionalizării sau a redării pe ecranele unor dispozitive mobile cu rezoluţie scăzută)

Page 39: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3939

MeniuriMeniuri

Problema

meniului

File (Alan Cooper, 1995, 2007)– sistemul de fişiere (organizarea datelor)

determină proiectarea software-ului

(interfeţelor)– se urmăreşte modelul de implementare,

nu funcţionalitatea &

nici dorinţele

utilizatorului

Page 40: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4040

MeniuriMeniuri•

Problema

meniului

File

– fişierul de pe disc e originalul, fişierul din memorie este

copia

⇒ utilizatorul este bulversat!

– utilizatorul nu trebuie să cunoască modelul sistemului de fişiere (organizarea sa internă)

– trebuie găsit un model conceptual de stocare (software-ul

va trata întotdeauna documentul

ca fiind unic, niciodată ca o copie de pe disc introdusă temporar în memorie)

– unele aplicaţii ascund utilizatorului maniera de stocare

e.g.,

iPhoto

(Mac OS X), iTunes

Page 41: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4141

MeniuriMeniuri•

Problema meniului File– salvarea

– funcţia rămâne implementată,

dar nu apare niciodată vizibilă în interfaţă, iar salvarea automată se va face în funcţie de activităţi, nu periodic

– arhivarea

– programele nu posedă nici o funcţie de a realiza o copie/arhivă a unui document; utilizatorul nu ştie semnificaţia comenzilor Save As, Save Changes, Open File

– actualmente, utilizatorul trebuie să cunoască organizarea discului

Page 42: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4242

MeniuriMeniuri•

Problema meniului File– Ce doreşte utilizatorul

(modelul

mental)?

Crearea unei copii de siguranţă: Make Snapshot Copy (“Copy of D”, “Second Copy of D”)

Crearea unei copii milestone, gestionată de aplicaţie

se poate implementa astfel Undo

Numirea/reamplasarea

documentului: Rename/Reposition

Specificarea formatului de stocare: Document Properties

Abandonarea tuturor modificărilor (intern, se va salva documentul):

Abandon Changes

Page 43: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4343

MeniuriMeniuriMeniul

standard (actual)

Page 44: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4444

MeniuriMeniuriMeniul

corect

(Alan Cooper, 1995, 2007)

Page 45: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4545

MeniuriMeniuri•

Problema meniului File– In loc de File trebuie găsit un nume care reprezintă

cel mai bine documentul manipulat de program: •

Document

Sheet (program de calcul tabelar)

Picture (program de prelucrare de imagini)

Money (aplicaţie financiară) •

etc.

Meniul

File

corect

Page 46: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4646

MeniuriMeniuri•

Meniul sistem

(control)

oferă funcţii de manipulare a ferestrei

Meniul contextual –

conţine diverse opţiuni, în funcţie de contextul utilizării

activat folosind butonul drept al mouse-ului

(Borland)–

nu trebuie să imite meniul principal

Page 47: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4747

MeniuriMeniuri

Greşeli:

Page 48: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4848

MeniuriMeniuri

Page 49: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4949

MeniuriMeniuri

Greşeli:

Page 50: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5050

MeniuriMeniuri

Meniul task-oriented (Microsoft, 2006)– Orientat pe sarcini specifice– Poate

fi

dinamic, în funcţie de contextul activităţilor

desfăşurate de utilizator– Axat pe însuşirea deprinderilor

(şabloane de comportament) – Exemplu

major: ribbon-ul

Office 2007

– Vezi

şi Windows Vista

Page 51: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5151

MeniuriMeniuriMeniul task-oriented

Page 52: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5252

CaseteCasete de dialogde dialog

Oferă anumite informaţii şi solicită introducerea unor date

Orice apariţie a unei casete de dialog conduce la abandonarea activităţii din fereastra activă

Interacţiunea trebuie plasată în fereastra principală (via mijloace

nemodale):

dialogurile întrerup fluxul

de sarcini al utilizatorului

Page 53: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5353

CaseteCasete de dialogde dialog

Ar trebui să fie folosite pentru funcţii sau setări utilizate mai rar–

Exemplu

negativ: Bright & Contrast la Photoshop

Exemplu

pozitiv: Adobe Lightroom

Ar trebui să vizeze proprietăţile unui singur obiect•

Dialogurile pot fi invocate şi din meniuri

Caseta de dialog are un proprietar

(aplicaţia, sistemul) şi are cel puţin o comandă de terminare

Atenţie la deschiderea în cascadă!

Page 54: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5454

CaseteCasete de dialogde dialog

Tipuri:–dialoguri

modale

opresc prelucrarea; uzual,

au un scop clar (uneori,

stupid)

trebuie sa fie folositoare

e.g., informative•

pot fi afişate de aplicaţie (application modal) sau de sistem (system modal)

nu creaţi casete de dialog de tip system modal!

Page 55: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5555

CaseteCasete de dialogde dialog

Tipuri:–dialoguri

modale

Page 56: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5656

CaseteCasete de dialogde dialog

Tipuri:–dialoguri

nemodale

nu opresc programul, funcţionând în mod concurent cu fereastra principală a aplicaţiei sau cu alte casete de dialog

pot fi confuze, dispărând din raza

vizuală a

utilizatorului

Page 57: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5757

CaseteCasete de dialogde dialog

Tipuri:–dialoguri

nemodale

Page 58: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5858

CaseteCasete de dialogde dialog

Soluţii actuale:– dialogurile nemodale trebuie să fie diferite vizual

de cele modale – casetele modale trebuie să ofere comenzi de

terminare consistente (comenzi de terminare

uzual folosite: Close, Apply, Done, Accept, Ok, Yes)

Utilizatorul nu înţelege diferenţa între Apply şi Ok– casetele nemodale trebuie să aibă

o singură

comandă de terminare: Close

Page 59: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

5959

CaseteCasete de dialogde dialog

Soluţii mai bune: – casetele nemodale

pot aparţine exclusiv ferestrelor

ce necesită interacţiunea cu utilizatorul (Mac OS X) ferestre

de tip sheet

– înlocuirea casetelor nemodale

cu toolbar-uri şi butoane, fiind mai eficiente şi ergonomice

– o parte din toolbar-uri

pot fi flotante (floater –

floating toolbar)

– vezi soluţiile adoptate de mediile de programare vizuală (Eclipse, Visual Studio,…), de programele de grafică (e.g., Illustrator, Inkscape, Photoshop

etc.)

sau de aplicaţiile Web (GMail, Google Docs,…)

Page 60: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6060

CaseteCasete de dialogde dialog

Caseta

de dialog modal de tip sheet:

Page 61: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6161

Interacţiune nemodală: Bryce

Page 62: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6262

CaseteCasete de dialogde dialog

Tipuri

(Alan Cooper, 2007):– proprietate

(property dialog) – prezintă

setări/caracteristici care pot fi modificabile (de obicei,

sunt modale)

– funcţie

(function) –

desemnează o singură funcţie (e.g., Print sau Spell checking), eventual pot controla comportarea funcţiei (sunt modale sau nemodale)

– buletin

(bulletin) –

afişează un mesaj (uzual, un mesaj de eroare)

Page 63: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6363

CaseteCasete de dialogde dialog

Tipuri

(continuare):– proces

(process) – alertează despre

imposibilitatea de a răspunde normal (afişează eventual cât timp a mai rămas până la terminarea procesului; utilizatorul poate anula operaţia); se implementează cu ajutorul progress meter-ului

sau a altor controale grafice similare

Dialogurile de tip proprietate & funcţie sunt afişate la apelul explicit al utilizatorului, iar celelalte sunt lansate de program

Page 64: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6464

CaseteCasete de dialogde dialog

Proiectare:– casetele de dialog trebuie să posede

bara caption

(titlul ferestrei),

chiar şi atunci când indică acţiuni fatale

– o caseta de dialog de tip funcţie trebuie să aibă numele funcţiei ca titlu al ferestrei (e.g.,

Print document interfaces-lab.html)

– o casetă de dialog de tip proprietate trebuie să aibă în titlu numele/descrierea obiectului asupra căruia acţionează (Properties for diagrame.png)

Page 65: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6565

CaseteCasete de dialogde dialog

Proiectare (continuare):– mai multe opţiuni înrudite pot fi grupate

folosind tab-urile (creşte productivitatea, mai ales pentru Web)

– tab-urile nu trebuie să fie stivuite şi nu trebuie să apară în număr mare

– ar trebui să se reţină poziţia de afişare şi starea– trebuie să aibă dimensiuni adecvate

Page 66: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6666

CaseteCasete de dialogde dialog

Proiectare (continuare):–controalele de interfaţă din interiorul

unei casete de dialog trebuie corect aliniate•

asigurarea

echilibrului

orizontal

& vertical

–dialogurile nu trebuie expandate –unele dialoguri pot fi dinamice

⇒ pericol pentru utilizatorii novici

Page 67: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6767

CaseteCasete de dialogde dialog

Exemple:

Page 68: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6868

CaseteCasete de dialogde dialog

Comenzi de terminare:– pentru caseta de dialog modală

de tip proprietate sau funcţie: •

butonul Ok (acceptă orice modificări)

butonul Cancel (respinge orice modificări) – butonul de închidere a ferestrei

(+opţiunea

din meniul sistem) trebuie să aibă aceeaşi acţiune ca butonul

Cancel

Page 69: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6969

CaseteCasete de dialogde dialog

Comenzi de terminare:– butonul Close nu ar trebui să apară

în nici o casetă de dialog – dialogurile de tip proces trebuie să aibă Cancel– casetele de tip buletin (de eroare) nu trebuie

să aibă prevăzut butonul Ok– butoanele de terminare trebuie să apară

în exteriorul tab-urilor– localizarea spaţială a butoanelor de terminare

trebuie să fie consistentă pentru toate casetele de dialog folosite

Page 70: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7070

CaseteCasete de dialogde dialog

Erori

de proiectare:

Page 71: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7171

CaseteCasete de dialogde dialog

Erori

de proiectare:

Page 72: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7272

CaseteCasete de dialogde dialog

Erori

de proiectare:

Page 73: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7373

CaseteCasete de dialogde dialog

Erori

de proiectare:

Page 74: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7474

CaseteCasete de dialogde dialog

Erori

de proiectare:

Page 75: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7575

CaseteCasete de dialogde dialog

Erori

de proiectare:

Page 76: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7676

RezumatRezumat

Manipularea directă–Preliminarii

–Mouse-ul

–Meniurile

–Casetele de dialog

Page 77: Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

7777

ÎÎntrebărintrebări??