Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual

Interacțiune om‐calculator

Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco

2.0

Dr. Sabin‐Corneliu Buraga

Facultatea de InformaticăUniversitatea “A.I.Cuza” Iaşi, România



2.0

Maniere de aranjare a conținutuluiExecuția acțiunilor asupra interfeței



2.0

It is not the answer that enlightens, but the question.

Eugene Ionesco



2.0

Necesitatea focalizării atenției utilizatorilorîn cadrul interfeței



2.0

Soluție:

prezentarea conținutului de interes



2.0

Soluție:

recurgerea la strategii de interacțiune



2.0

Layout



2.0

Şabloane de proiectare (Jenifer Tidwell, 2005)

visual framework

asigură utilizarea consistentăa layout‐ului, cromaticii & stilului vizual



2.0


visual framework

trebuie să ofere flexibilitate în ceea ce priveşteproiectarea vizuală, în funcție de conținutul redat



2.0


visual framework

exemple:consistența vizuală a desktop‐ului, a siturilor Web,…



2.0


center stage

plasarea celei mai importante părți a interfețeiîntr‐o zonă centrală, cu gruparea instrumentelor adiționale şi

a conținutului în arii de dimensiuni mai mici



2.0



2.0


center stage

maniere de realizare:sizecolor

headlinescontext



2.0



2.0


center stage

poate fi folosit în conjuncție cu alte şabloaneprivind navigarea Web



2.0


left column navigation



2.0


right column navigation



2.0


three column navigation



2.0


three columns with content first



2.0


three column content



2.0


card stack

secțiunile de conținut sunt amplasateîn panouri (cards) diferite care se pot stivui (stack),

astfel încât doar un panou este vizibil la un moment dat



2.0


card stack

uzual, se recurge la tab‐uri – orizontale/verticale –etichetate corespunzator



2.0



2.0



2.0

exemplenegative



2.0


closable panels

asigură plasarea conținutului în containere separate,etichetate, care pot fi expandate



2.0



2.0


movable panels

oferă posibilitatea utilizatorului de a plasa instrumentelede interes la libera alegere, prin mutarea panourilor dorite



2.0


movable panels

utilizatorii au libertatea de a‐şi rearanja mediul de lucru

poate prezenta şi inconveniente

de ce?



2.0


right/left alignment

permite alinierea conținutului în cadrul unui formular/tabel

etichetele sunt aliniate la dreapta, iar câmpurile la stânga



2.0



2.0


right/left alignment

în unele situații, poate fi substituit cu alte şabloane



2.0



2.0



2.0



2.0



2.0


diagonal balance

asigură echilibrul vizualîn cadrul zonelor ce includ elemente plasate asimetric



2.0



2.0


diagonal balance

Asymmetrical layouts can achieve equilibrium as well, but their tenser, more dramatic form of balance depends on careful manipulation to compensate visually for differences

in the size, position, and value of major elements.Kevin Mullet & Darrell Sano



2.0


property sheet

asigură prezentarea proprietăților unui obiect

uzual, se recurge la un layout pe 2 coloane sau un formular



2.0



2.0


liquid layout

permite regruparea conținutuluiatunci când zona de redare este redimensionată



2.0


liquid layout

poate fi facilitat de utilizarea managerilor de layout



2.0

Strategii de execuție a acțiunilor utilizatorilor



2.0

Pentru interacțiune, interfețele pun la dispoziție controale

fiecare acțiune ce poate fi executată de utilizatortrebuie să fie corespunzător semnalată

affordance

Norman, 1998



2.0

“Affordances provide strong clues to the operations of things. Knobs are for turning. Slots are for inserting things into.

Balls are for throwing or bouncing.”Donald Norman, 1988

fiecare element de interacțiune ce apare într‐o interfațătrebuie să aibă o justificare logică pentru utilizator



2.0


button groups

asigură gruparea mai multor butoane,aranjate orizontal sau vertical

a se revedeaprincipiile Gestalt



2.0


button groups

amplasarea trebuie să fie consistentă



2.0



2.0


prominent “done” button

plasarea butonului care termină o activitate la finalulunui flux vizual, cu focalizarea atenției asupra butonului



2.0


prominent “done” button

eticheta butonului este de preferat să fie textuală,uşor de observat



2.0



2.0


smart menu items

posibilitatea modificării dinamice a elementelor de meniu pentru a reflecta precis acțiunea ce poate fi executată



2.0


smart menu items

the user doesn’t have to thinkabout what object will be affected

încurajează Safe Exploration



2.0



2.0


preview

permite prezentarea unui preview sau sumaral rezultatului unei acțiuni

e.g., listarea, efectuarea unei comenzi on‐line etc.



2.0


preview

previne apariția diverselor erori

poate facilita explicarea unor acțiuni



2.0

desktop



2.0

Web



2.0

handheld



2.0


progress indicator

indică progresul unei acțiuni consumatoare de timp



2.0


progress indicator

“Display a progress bar that accurately reflects the time remaining. If you cannot predict how much time an operation

will take, say so! Do not lie to or misinform users.”Jef Raskin, 2000



2.0



2.0


cancelability

permite anularea/terminareaunei operații consumatoare de timp

ar trebui să nu aibă efecte negative



2.0


cancelability

dacă existămai multe operații simultane,trebuie indicat ce anume se anulează



2.0


multi‐level undo

oferă o metodă facilă de a anula un şir de operații



2.0


multi‐level undo

undoable operations:textul introdus, tranzacții în baze de date,

schimbări de layout, cut & paste, acțiuni asupra unor resurse:fişiere, imagini, mesaje de e‐mail etc.



2.0

incorect



2.0


command history

oferirea unor mijloace vizuale de prezentarea operațiilor efectuate de utilizator



2.0



2.0


macros

permite realizarea facilă a unui grup de acțiunidesemnat de un mnemonic



2.0


macros

trebuie să se pună la dispoziție un mecanism de înregistrarea acțiunilor utilizatorului ce pot ulterior fi rulate automat



2.0

Editarea datelor



2.0

O activitate frecventă este aceea a editării datelor

textuale, grafice, multimedia etc.



2.0

Aspect de interes

WYSIWYG (What You See Is What You Get)

uzual, folosit pentru editarea imaginilor,conținutului grafic vectorial, fişierelor de animație, video,…



2.0

Aspect de interes

WYSIWYG (What You See Is What You Get)

users have some powerful expectationsfor how a text editor should work



2.0

Aspect de interes

manipularea directă (direct manipulation)

permite utilizatorilor să interacționeze “direct”cu obiectele de interfață prin operații

precum grab, push, drag, drop, stack, paint, transform etc.via un pointing device



2.0

Aspect de interes


direct manipulation is immediate – actions take placewith no apparent wait time



2.0

Aspect de interes


direct manipulation is precise – users need to havefine control over the location of that pointer

and the objects attached to it



2.0

Aspect de interes

selecția (selection)

utilizatorii au anumite aşteptări privind selecția diverselor tipuri de entități: text (ne)formatat, elemente de graficăvectorială, componente abstracte, liste, tabele, arbori etc.



2.0

Text editorsVector graphics editors,

GUI buildersLists, tables, trees

Single clickMove text insertion

cursor hereSelect just this item Select just this item

Double click Select this word Open or edit this item Open or edit this item

Triple clickSelect this line,

or select this paragraphN/A N/A

Click, drag, release

Start selection here, end it there;

select all text between them

Select everything inside the bounding box

(“rubberband”, “marquee” or “marching ants”

selection)

Drag this itemfrom here to there

Shift‐click

Start selection at the text insertion cursor, end it at the click point, and select all text

between them

Add this item to the selection set

Add this item to the selection set, plus all intervening items

(“contiguous selection”)

Control‐clickVaries from application to

applicationVaries from application to

application

Add this item to the selection set (“dis‐

contiguous selection”)conform Tidwell (2005)



2.0


edit‐in‐place

oferă un editor minimal exact în loculunde utilizatorul poate modifica un text



2.0


edit‐in‐place

folosit la editarea numelor de obiecte/fişiere,etichete (labels), valori de proprietăți etc.



2.0



2.0


smart selection

permite selecția “smart” a unui grup coerent de entități (elemente textuale, pixeli, nume de fişiere,…)



2.0


smart selection

when done thoughtlessly, smart selections can be irritating



2.0


composite selection

permite selecția globală a unui grup de entități



2.0



2.0


spring‐loaded mode

permite utilizatorului să schimbe modul de interacțiune,prin acționarea unei taste sau a unui buton de mouse



2.0


spring‐loaded mode

taste tipice: Shift, Alt, Ctrl



2.0


constrained resize

supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances



2.0



2.0


magnetism

determină ca obiectele să fie “magnetice”,astfel încât utilizatorul să le poată amplasa mai precis



2.0


magnetism

it helps compensate for users’ lack of perfect dexteritywith a mouse



2.0


magnetism

exemplu: Snap to grid – la Adobe Photoshop



2.0


guides

pune la dispoziție linii de referință orizontale şi/sau verticale pentru a facilita alinierea entităților de interes



2.0


guides

guides make it easier for a user to seethat alignment is pixel‐perfect



2.0



2.0



2.0


paste variations

oferă funcționalități speciale – e.g., conversie de formate –pentru operația paste



2.0


paste variations

exemplu tipic: Paste Special – la Microsoft Office



2.0

şabloane de proiectarelayout, execuția activităților & editarea datelor



2.0

Documents

Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual