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)



22

“Computers are useless.

They can only give you answers.”

Pablo Picasso



33

CuprinsCuprins

•

Manipularea directă–Preliminarii

–Mouse-ul

–Meniurile

–Casetele de dialog



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);



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)



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ă



77

CuprinsCuprins

•

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

evenimentelor



88

MouseMouse•

Primul

mouse (Douglas Engelbart, ~1965):



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)



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



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



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



1313

Mouse | Mouse | obiecteobiecte flexibileflexibile



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)



1515


•

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



1616


•

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



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)



1818


•

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



1919


•

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



2020


•

Selecţia– se poate realiza

via handles



2121


•

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)



2222


•

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



2323


•

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ă



2424


•

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



2525


•

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ă



2626


•

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!



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



2828



•

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ă



2929



•

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”



3030



•

Procesarea

evenimentelor

via un automat finit (Rob Miller, 2004)



3131

CuprinsCuprins•

Meniuri– Istoric

– Tipuri

•

Casete de dialog– Tipuri

– Moduri de interacţiune

– Proiectare

– Comenzi de terminare



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



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)



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)



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)



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



3737

Meniuri

pop-up



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ă)



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



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



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



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



4343

MeniuriMeniuriMeniul

standard (actual)



4444

MeniuriMeniuriMeniul

corect

(Alan Cooper, 1995, 2007)



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



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



4747

MeniuriMeniuri

Greşeli:



4848

MeniuriMeniuri



4949

MeniuriMeniuri

Greşeli:



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



5151

MeniuriMeniuriMeniul task-oriented



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



5353


•

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ă!



5454


•

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!



5555


•

Tipuri:–dialoguri

modale



5656


•

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



5757


•

Tipuri:–dialoguri

nemodale



5858


•

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



5959


•

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,…)



6060


•

Caseta

de dialog modal de tip sheet:



6161

Interacţiune nemodală: Bryce



6262


•

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)



6363


•

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



6464


•

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)



6565


•

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



6666


•

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



6767


Exemple:



6868


•

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



6969


•

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



7070


Erori

de proiectare:



7171


Erori

de proiectare:



7272


Erori

de proiectare:



7373


Erori

de proiectare:



7474


Erori

de proiectare:



7575


Erori

de proiectare:



7676

RezumatRezumat

•

Manipularea directă–Preliminarii

–Mouse-ul

–Meniurile

–Casetele de dialog



7777

ÎÎntrebărintrebări??

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

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

Limbajul Jurnalistic- Comunicarea CA Interactiune Sociala

Diagramele de Interactiune

Interactiune Om Mobilier

pentru utilizatorul instalaţiei pentru funcţionarea …serviciicentraletermice.ro/wp-content/uploads/2017/03/...Instrucţiuni de utilizare pentru utilizatorul instalaţiei Instalaţie

Interactiune Teren-Structura

INTERACŢIUNEA EREDITATE- MEDIU-EDUCAŢIE ÎN DEZVOLTAREA FIINŢEI UMANE

RADIOACTIVITATEA Interacţiunea radiaţiei cu substanța

Interactiune om-calculator (Afectivitate, erori & riscuri)

Snejana Zadainova. Interacţiunea utilizatorului modern cu spaţiul informaţional

Rezumat Modelarea Fenomenelor de Interactiune

Interactiune om-calculator (Introducere)

Interactiune om-calculator (Identitatea & evaluarea interfeţei)

Interacţiune om-calculator Interacţiunea cu utilizatorul (I)busaco/teach/courses/... · Mouse | manipularea directă • Drag & drop –a apărut în premieră la Macintosh –tipuri:

interacţiunea mediată controlată. comportamentul comunicativ al

Interacţiunea radiaţiilor electromagnetice cu sistemele biologice.ppt

pentru utilizatorul instalaţiei comandată de temperatura ... de utilizare... · Instrucţiuni de utilizare pentru utilizatorul instalaţiei Cu automatizare pentru funcţionare cu

inovaţie şi dinamism: despre interacţiunea dintre sistemele

Interactiune om-calculator (Mediul XWindow)

Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii

INTERACŢIUNEA METODOLOGIILOR DE EDUCAŢIE ...5 ADNOTARE Gînju Tatiana Interacţiunea metodologiilor de educaţie literar-artistică – educaţie muzicală în formarea culturii

Interactiune om-calculator (Retrospective & perspective)

Interactiune om-calculator -- Prezentarea programului (la nivel de desktop)

Sabin Buraga et al. -- "Interactiune neconventionala" (workshop RoCHI 2009)

Interactiune om-calculator (Tipuri de interfete & proiectare)

Interacţiunea mediată controlată. Comportamentul comunicativ al … culturala_2009/04 L.H... · 2013-11-07 · 39 Interacţiunea mediată controlată. Comportamentul comunicativ

pentru utilizatorul instalaţiei pentru funcţionare cu ...serviciicentraletermice.ro/wp-content/uploads/2017/... · Instrucţiuni de utilizare pentru utilizatorul instalaţiei Instalaţie

Interacţiunea Radiaţiilor Nucleare Cu Substanța

Utilizatorul 2.0 în bibliotecile Moldovei

Interactiune om-calculator (Proiectarea interfeţei Web)

pentru utilizatorul instalaţiei Instrucţiuni de utilizare

Technology

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

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