Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Maniere de aranjare a conținutuluiExecuția acțiunilor asupra interfeței
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
It is not the answer that enlightens, but the question.
Eugene Ionesco
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Necesitatea focalizării atenției utilizatorilorîn cadrul interfeței
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Soluție:
prezentarea conținutului de interes
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Soluție:
recurgerea la strategii de interacțiune
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Layout
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
visual framework
asigură utilizarea consistentăa layout‐ului, cromaticii & stilului vizual
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
visual framework
trebuie să ofere flexibilitate în ceea ce priveşteproiectarea vizuală, în funcție de conținutul redat
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
visual framework
exemple:consistența vizuală a desktop‐ului, a siturilor Web,…
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
center stage
maniere de realizare:sizecolor
headlinescontext
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
center stage
poate fi folosit în conjuncție cu alte şabloaneprivind navigarea Web
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
left column navigation
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
right column navigation
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
three column navigation
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
three columns with content first
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
three column content
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
card stack
uzual, se recurge la tab‐uri – orizontale/verticale –etichetate corespunzator
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
exemplenegative
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
closable panels
asigură plasarea conținutului în containere separate,etichetate, care pot fi expandate
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
movable panels
oferă posibilitatea utilizatorului de a plasa instrumentelede interes la libera alegere, prin mutarea panourilor dorite
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
movable panels
utilizatorii au libertatea de a‐şi rearanja mediul de lucru
poate prezenta şi inconveniente
de ce?
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
right/left alignment
permite alinierea conținutului în cadrul unui formular/tabel
etichetele sunt aliniate la dreapta, iar câmpurile la stânga
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
right/left alignment
în unele situații, poate fi substituit cu alte şabloane
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
diagonal balance
asigură echilibrul vizualîn cadrul zonelor ce includ elemente plasate asimetric
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
property sheet
asigură prezentarea proprietăților unui obiect
uzual, se recurge la un layout pe 2 coloane sau un formular
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
liquid layout
permite regruparea conținutuluiatunci când zona de redare este redimensionată
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
liquid layout
poate fi facilitat de utilizarea managerilor de layout
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Strategii de execuție a acțiunilor utilizatorilor
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
button groups
asigură gruparea mai multor butoane,aranjate orizontal sau vertical
a se revedeaprincipiile Gestalt
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
button groups
amplasarea trebuie să fie consistentă
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
prominent “done” button
plasarea butonului care termină o activitate la finalulunui flux vizual, cu focalizarea atenției asupra butonului
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
prominent “done” button
eticheta butonului este de preferat să fie textuală,uşor de observat
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
smart menu items
posibilitatea modificării dinamice a elementelor de meniu pentru a reflecta precis acțiunea ce poate fi executată
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
smart menu items
the user doesn’t have to thinkabout what object will be affected
încurajează Safe Exploration
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
preview
permite prezentarea unui preview sau sumaral rezultatului unei acțiuni
e.g., listarea, efectuarea unei comenzi on‐line etc.
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
preview
previne apariția diverselor erori
poate facilita explicarea unor acțiuni
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
desktop
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Web
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
handheld
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
progress indicator
indică progresul unei acțiuni consumatoare de timp
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
cancelability
permite anularea/terminareaunei operații consumatoare de timp
ar trebui să nu aibă efecte negative
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
cancelability
dacă existămai multe operații simultane,trebuie indicat ce anume se anulează
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
multi‐level undo
oferă o metodă facilă de a anula un şir de operații
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
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.
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
incorect
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
command history
oferirea unor mijloace vizuale de prezentarea operațiilor efectuate de utilizator
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
macros
permite realizarea facilă a unui grup de acțiunidesemnat de un mnemonic
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
macros
trebuie să se pună la dispoziție un mecanism de înregistrarea acțiunilor utilizatorului ce pot ulterior fi rulate automat
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Editarea datelor
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
O activitate frecventă este aceea a editării datelor
textuale, grafice, multimedia etc.
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
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,…
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Aspect de interes
WYSIWYG (What You See Is What You Get)
users have some powerful expectationsfor how a text editor should work
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
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
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Aspect de interes
manipularea directă (direct manipulation)
direct manipulation is immediate – actions take placewith no apparent wait time
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Aspect de interes
manipularea directă (direct manipulation)
direct manipulation is precise – users need to havefine control over the location of that pointer
and the objects attached to it
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
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.
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
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)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
edit‐in‐place
oferă un editor minimal exact în loculunde utilizatorul poate modifica un text
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
edit‐in‐place
folosit la editarea numelor de obiecte/fişiere,etichete (labels), valori de proprietăți etc.
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
smart selection
permite selecția “smart” a unui grup coerent de entități (elemente textuale, pixeli, nume de fişiere,…)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
smart selection
when done thoughtlessly, smart selections can be irritating
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
composite selection
permite selecția globală a unui grup de entități
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
spring‐loaded mode
permite utilizatorului să schimbe modul de interacțiune,prin acționarea unei taste sau a unui buton de mouse
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
spring‐loaded mode
taste tipice: Shift, Alt, Ctrl
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
constrained resize
supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
magnetism
determină ca obiectele să fie “magnetice”,astfel încât utilizatorul să le poată amplasa mai precis
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
magnetism
it helps compensate for users’ lack of perfect dexteritywith a mouse
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
magnetism
exemplu: Snap to grid – la Adobe Photoshop
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
guides
pune la dispoziție linii de referință orizontale şi/sau verticale pentru a facilita alinierea entităților de interes
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
guides
guides make it easier for a user to seethat alignment is pixel‐perfect
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
paste variations
oferă funcționalități speciale – e.g., conversie de formate –pentru operația paste
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
paste variations
exemplu tipic: Paste Special – la Microsoft Office
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
şabloane de proiectarelayout, execuția activităților & editarea datelor
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0