Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr....
Transcript of Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr....
![Page 1: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/1.jpg)
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
![Page 2: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/2.jpg)
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
![Page 3: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/3.jpg)
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
![Page 4: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/4.jpg)
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
![Page 5: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/5.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Soluție:
prezentarea conținutului de interes
![Page 6: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/6.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Soluție:
recurgerea la strategii de interacțiune
![Page 7: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/7.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Layout
![Page 8: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/8.jpg)
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
![Page 9: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/9.jpg)
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
![Page 10: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/10.jpg)
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,…
![Page 11: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/11.jpg)
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
![Page 12: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/12.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 13: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/13.jpg)
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
![Page 14: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/14.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 15: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/15.jpg)
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
![Page 16: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/16.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
left column navigation
![Page 17: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/17.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
right column navigation
![Page 18: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/18.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
three column navigation
![Page 19: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/19.jpg)
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
![Page 20: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/20.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Şabloane de proiectare (Jenifer Tidwell, 2005)
three column content
![Page 21: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/21.jpg)
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
![Page 22: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/22.jpg)
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
![Page 23: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/23.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 24: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/24.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 25: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/25.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
exemplenegative
![Page 26: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/26.jpg)
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
![Page 27: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/27.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 28: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/28.jpg)
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
![Page 29: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/29.jpg)
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?
![Page 30: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/30.jpg)
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
![Page 31: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/31.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 32: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/32.jpg)
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
![Page 33: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/33.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 34: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/34.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 35: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/35.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 36: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/36.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 37: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/37.jpg)
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
![Page 38: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/38.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 39: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/39.jpg)
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
![Page 40: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/40.jpg)
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
![Page 41: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/41.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 42: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/42.jpg)
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ă
![Page 43: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/43.jpg)
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
![Page 44: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/44.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Strategii de execuție a acțiunilor utilizatorilor
![Page 45: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/45.jpg)
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
![Page 46: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/46.jpg)
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
![Page 47: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/47.jpg)
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
![Page 48: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/48.jpg)
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ă
![Page 49: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/49.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 50: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/50.jpg)
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
![Page 51: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/51.jpg)
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
![Page 52: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/52.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 53: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/53.jpg)
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ă
![Page 54: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/54.jpg)
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
![Page 55: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/55.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 56: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/56.jpg)
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.
![Page 57: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/57.jpg)
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
![Page 58: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/58.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
desktop
![Page 59: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/59.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Web
![Page 60: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/60.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
handheld
![Page 61: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/61.jpg)
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
![Page 62: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/62.jpg)
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
![Page 63: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/63.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 64: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/64.jpg)
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
![Page 65: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/65.jpg)
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ă
![Page 66: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/66.jpg)
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
![Page 67: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/67.jpg)
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.
![Page 68: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/68.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
incorect
![Page 69: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/69.jpg)
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
![Page 70: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/70.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 71: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/71.jpg)
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
![Page 72: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/72.jpg)
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
![Page 73: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/73.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
Editarea datelor
![Page 74: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/74.jpg)
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.
![Page 75: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/75.jpg)
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,…
![Page 76: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/76.jpg)
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
![Page 77: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/77.jpg)
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
![Page 78: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/78.jpg)
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
![Page 79: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/79.jpg)
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
![Page 80: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/80.jpg)
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.
![Page 81: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/81.jpg)
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)
![Page 82: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/82.jpg)
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
![Page 83: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/83.jpg)
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.
![Page 84: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/84.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 85: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/85.jpg)
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,…)
![Page 86: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/86.jpg)
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
![Page 87: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/87.jpg)
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
![Page 88: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/88.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 89: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/89.jpg)
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
![Page 90: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/90.jpg)
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
![Page 91: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/91.jpg)
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
![Page 92: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/92.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 93: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/93.jpg)
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
![Page 94: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/94.jpg)
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
![Page 95: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/95.jpg)
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
![Page 96: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/96.jpg)
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
![Page 97: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/97.jpg)
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
![Page 98: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/98.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 99: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/99.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
![Page 100: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/100.jpg)
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
![Page 101: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/101.jpg)
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
![Page 102: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/102.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0
şabloane de proiectarelayout, execuția activităților & editarea datelor
![Page 103: Dr. Sabin Corneliu Buragabusaco/teach/courses/interfaces/... · Interacțiune om‐calculator Dr. Sabin‐Corneliu Buraga – 2.0 Şabloane de proiectare (Jenifer Tidwell, 2005) visual](https://reader035.fdocument.pub/reader035/viewer/2022070217/612332ab0ce138116d270bc4/html5/thumbnails/103.jpg)
Interacțiune om‐calculator
Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco
2.0