Page 1
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
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
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
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
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
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
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
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1313
Mouse | Mouse | obiecteobiecte flexibileflexibile
Page 14
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3737
Meniuri
pop-up
Page 38
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4343
MeniuriMeniuriMeniul
standard (actual)
Page 44
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4747
MeniuriMeniuri
Greşeli:
Page 48
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4848
MeniuriMeniuri
Page 49
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4949
MeniuriMeniuri
Greşeli:
Page 50
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5151
MeniuriMeniuriMeniul task-oriented
Page 52
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
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
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
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
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6161
Interacţiune nemodală: Bryce
Page 62
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
7777
ÎÎntrebărintrebări??