Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea...
Transcript of Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea...
![Page 1: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/1.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
11
InteracInteracţţiune omiune om--calculatorcalculator InteracInteracţţiunea cu utilizatorul (II)iunea cu utilizatorul (II)
Dr. Sabin-Corneliu Buraga Facultatea de Informatică
Universitatea “A.I.Cuza”
Iaşi, România httphttp://://www.infoiasi.rowww.infoiasi.ro/~/~busacobusaco//
![Page 2: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/2.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
22
“Mirrors should reflect a little
before throwing back images.”
Jean Cocteau
![Page 3: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/3.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
33
CuprinsCuprins
•
Pictograme
(icon-uri)•
Toolbar-uri
•
Controale ale interfeţei–imperative &
de selecţie
–de introducere &
afişare (I/O) –altele
•
Greşeli•
Studii
de caz
![Page 4: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/4.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
44
PictogramePictograme•
Ar trebui să fie mai uşor de învăţat şi
de recunoscut decât comenzile•
Actualmente, populează orice aplicaţie/sistem:– Obiecte (resurse, fişiere) de pe desktop– Instrumente (e.g., de desenare)– Aplicaţii (navigator Web, player multimedia,
mediu de programare,…)– Operaţii (e.g., cut & paste, imprimare etc.)– Entităţi Web (de exemplu, persoana reprezentată
de un avatar)•
Context:
aplicaţii de instant messaging, medii 3D
![Page 5: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/5.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
55
PictogramePictograme
•
Pictograme
diferite
asociate
unui
avatar (Second Life):
![Page 6: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/6.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
66
PictogramePictograme
•
Asocierea între reprezentare şi conceptul referit se poate face:– Conform similarităţii
(e.g., foaie goală = fişier nou)
– Analogic
(e.g., foarfece = cut)– Arbitrar
–
idiomic
(simbolul X = închide fereastra)
•
Cele mai efective sunt pictogramele proiectate conform similarităţii (Rogers, 2007)
•
Pictogramele ar trebui să aibă asociate etichete•
Apar dificultăţi în desemnarea de acţiuni
![Page 7: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/7.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
77
PictogramePictograme
•
Exemplu: Windows XP
![Page 8: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/8.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
88
PictogramePictograme
•
Exemplu: GNOME
![Page 9: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/9.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
99
PictogramePictograme
•
Exemplu: Mac OS X
Reprezintă
aplicaţii arbitrare
Desemnează programe de sistem
De remarcat orientarea diferită
![Page 10: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/10.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1010
PictogramePictograme•
Atenţie la contextul cultural!
– Vezi
http://people.cs.uct.ac.za/~gaz/research.html•
Atenţie la redarea pe diverse dispozitive!
![Page 11: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/11.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1111
ToolbarToolbar•
Colecţie de buticoane
–
buticons
(butoane cu imagini în loc de text) deseori amplasată în fereastra principală a aplicaţiei, în manieră nemodală
•
Soluţie pentru problema meniurilor şi a casetelor de dialog
•
Nu sunt meniuri •
Furnizează experţilor acces rapid la funcţii frecvent utilizate
•
Nu trebuie să ocupe mult spaţiu pe ecran
![Page 12: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/12.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1212
ToolbarToolbar
•
Icon-ul
asociat butonului este mult mai sugestiv decât textul
•
Fiecare buton va avea asociat un tooltip ⇒ învăţarea idiom-ului
•
Atenţie la alegerea textului explicativ!•
Poate conţine şi alte controale, în afara butoanelor
•
Pot fi combinate şi cu meniuri (atenţie la pericole) •
Ar trebui să fie personalizabile (să se poată modifica forma, numărul de butoane, dispunerea, conţinutul)
![Page 13: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/13.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1313
ToolbarToolbarExemple:
![Page 14: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/14.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1414
ControaleControale
•
Controale (elemente
interactive)– părţi componente ale interfeţei
– facilitează interacţiunea cu utilizatorul
•
Clasificare
–
conform Alan Cooper:– imperative şi de selecţie
– de introducere şi afişare (I/O)
– altele
![Page 15: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/15.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1515
ControaleControale
•
Aspecte importante:–Aparenţa
modul de afişare–Interacţiunea
modalitatea de comportare–Semantica
ce anume reprezintă
![Page 16: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/16.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1616
ControaleControale•
Exemplu: moduri
diferite
de reprezentare
a
tab-urilor
![Page 17: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/17.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1717
ControaleControale•
Unele
pot fi
inspirate
din realitate
(Dan Saffer):
switch, button, dial, latch, slider, handle
•
Unele
pot fi
doar
fizice: joystick, trackball,…
•
Controale
digitale
tipice: scroll bar, checkbox, radio button, text box, listview, spinner etc.
![Page 18: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/18.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1818
ControaleControale•
Elemente de interfaţă imperative &
de selecţie –Imperative: corespund unui verb
•
butonul de execuţie
(push-button) folosit la terminarea casetelor de dialog
•
buticoanele–derivate din butoanele obişnuite –atenţie la icon-ul folosit (metafora vizuală) –trebuie însoţite de tooltip-uri
![Page 19: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/19.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1919
ControaleControale•
Elemente de interfaţă imperative &
de selecţie
– De selecţie: acţionează asupra unui substantiv•
butonul de bifare
(checkbox)
–de obicei, trebuie însoţit de un text explicativ –a nu se folosi checkbox-uri
ambigue
–poate fi înlocuit de buticonul de blocare sau de control flip-flop (textuale, iconice) • vezi toolbar-ul
Office
Utilizare incorectă
![Page 20: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/20.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2020
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
radio-butoane–au un comportament
mutual exclusiv (mutex) –pot fi înlocuite
de radio-buticoane
Utilizare incorectă
![Page 21: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/21.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2121
ControaleControale
•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
combuticonul–la apăsare este
afişat un meniu
conţinând butoane cu blocare–poate afişa un meniu pop-up
![Page 22: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/22.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2222
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
lista de opţiuni
(listbox)–listă de elemente textuale, cu o bară de defilare (scroll)
–utilizatorul poate selecta unul/mai multe elemente
–pot fi adăugate şi alte componente, nu doar text
–în prezent e înlocuit cu listview
(cu
linii
automat precedate
de un icon) –
atenţie la alegerea
controalelor dintr-un listview
–se poate suporta şi operaţia drag & drop
–a nu se folosi scroll orizontal într-un listbox!
![Page 23: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/23.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2323
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie (continuare)
•
lista de tip listview–facilitează recunoaşterea
opţiunilor deja folosite
– icon-urile pot ajuta la clasificarea logică a informaţiilor
![Page 24: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/24.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2424
ControaleControale•
Elemente de interfaţă imperative & de selecţie – De selecţie
•
combobox–combinaţie între listbox şi câmpul de editare
–folosit pentru o selecţie unică, nu multiplă
–control foarte eficient şi poate suporta drag & drop
•
treeview–oferă vizualizarea ierarhică
a altor elemente de interfaţă
![Page 25: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/25.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2525
ControaleControale•
Elemente de intrare/ieşire – Introducerea
datelor
•
limitatoare–permit introducerea
doar de date valide–se realizează via
slider, combobox, listbox etc.
•
spinner–permite incrementarea
sau decrementarea unor valori
–poate
fi
“inteligent”
![Page 26: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/26.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2626
ControaleControale•
Elemente de intrare/ieşire – Introducerea nelimitată
•
text-edit (câmpul de editare text) –dacă valorile de intrare fac parte
dintr-o mulţime finită, ar fi bine să fie înlocuit de alt control
–trebuie realizată validarea: la cald (în momentul editării) sau la rece (după introducerea datelor)
»pentru
Web: validare
la client şi
la server–dacă utilizatorul zăboveşte la introducerea
datelor, putem afişa un clue-box (text explicativ, similar tooltip-ului)
![Page 27: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/27.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2727
ControaleControale•
Elemente de intrare/ieşire
•
text-edit (continuare) –ar trebui să prelucreze “inteligent”
datele primite –
e.g., dacă se introduce “5cm” va raporta “5 centimetri”
etc.
–valorile incorecte se pot înlocui cu cele implicite
–valorile care ies din intervalul permis ar putea fi substituite cu valorile de la marginile intervalului
–nu trebuie folosit un câmp de editare pentru output dacă utilizatorul nu poate modifica valoarea lui
![Page 28: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/28.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2828
ControaleControale•
Elemente de intrare/ieşire – introducerea nelimitată
•
text area–permite introducerea unui grup de linii
de text, nu doar a uneia –se va evita utilizarea
barei de defilare orizontale –formatarea
“din zbor”
a datelor –
rich text
![Page 29: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/29.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2929
ControaleControale•
Elemente de intrare/ieşire –afişarea datelor
•
conform tipurilor/categoriilor
de date
–tipuri de controale:•
gestionează prezentarea vizuală a informaţiilor: toolbar-uri, divizoare de ecran
(panel-uri),
elemente de grupare a controalelor
etc. •
afişează informaţiile în mod static: paginatoare, grid-uri, guidelines-uri,…
![Page 30: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/30.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3030
ControaleControale
•
Elemente de intrare/ieşire – label (etichetează alte controale)
•
vital pentru controale ca butoane radio/checkbox sau butoane de execuţie
•
atenţie la încadrarea şi dimensiunea textului unui label în cadrul unui alt control
![Page 31: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/31.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3131
ControaleControale
•
Elemente de intrare/ieşire – bara de defilare
(scrollbar)
•
ar putea afişa mai multe informaţii (pagina curentă, numărul total de pagini, primul element din fiecare pagină etc.)
•
ar putea oferi butoane pentru a sări direct peste pagini, capitole, secţiuni sau la începutul/sfârşitul documentului
•
ar putea fi responsabilă pentru managementul bookmark-urilor
![Page 32: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/32.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3232
ControaleControale•
Elemente de intrare/ieşire – bara de defilare
(scrollbar)
Utilizare incorectă Utilizare corectă
![Page 33: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/33.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3333
ControaleControale
•
Elemente de intrare/ieşire – bara de defilare
(scrollbar)
•
Defilarea conţinutului poate fi realizată şi via hardware –
senzori de detectare
a mişcării
(e.g., PDA, Tablet
PC, unele
modele
Mac etc.)
![Page 34: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/34.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3434
ControaleControale
•
Alte controale –de obicei, nu vin incluse în API-ul
(Application Programming Interface) oferit
de sistem
(de operare/de ferestre)
–utilizate de anumite
aplicaţii –atenţie la pericolele utilizării
![Page 35: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/35.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3535
ControaleControale
•
Alte controale –
exemple: – butoanele înceţoşate şi umbrite
(interfeţele lui Kai
Krause,
ex-MetaCreations) – ferestre/componente transparente –
alpha blending
(KDE, Winamp,..) şi nerectangulare– controlul vizual – selectarea grosimii liniei,
selectarea localizării, previzionarea fişierelor înainte de încărcare, alegerea culorilor etc.
![Page 36: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/36.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3636
ControaleControale | | exempleexemple
Kay Power
Tools (~1995)
![Page 37: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/37.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3737
ControaleControale | | exempleexemple
![Page 38: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/38.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3838
ControaleControale | | proiectareproiectare
eronatăeronată
![Page 39: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/39.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3939
ControaleControale | | proiectareproiectare
eronatăeronată
![Page 40: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/40.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4040
ControaleControale | | proiectareproiectare
eronatăeronată
![Page 41: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/41.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4141
ControaleControale WebWeb
•
Disponibile uzual în cadrul widget-urilor
Web– Web Widgets = clasă de aplicaţii Web executate
pe partea client, create pe baza unor tehnologii deschise precum (X)HTML, CSS, JavaScript, AJAX
– Pot fi transferate & instalate separat– Disponibile ca pachete arhivate în format .zip– Informaţiile despre acestea (meta-datele) formează
un document
manifest – fişier XML– Interacţiunea este asigurată, uzual,
de un API disponibil
în JavaScript
![Page 42: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/42.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4242
ControaleControale WebWeb
•
Create via biblioteci (API-uri) –
folosind JavaScript:–
YUI (Yahoo! User Interface)
+ Symphony
–
Widgets
– integrate în Google Desktop–
Mac OS X Widgets
– disponibile via Dashboard
–
Vista
Gadgets
– disponibile via Sidebar–
Dojo
+
Dijit/DojoX
–
eventual, în conjuncţie cu AJAX
–
Script.aculo.us–
Adobe Flex
+ Adobe
AIR –
folosind tehnologia Flash
•
În curs de standardizare la Consorţiul Web•
A se consulta
şi
Mozilla
Labs: labs.mozilla.com
![Page 43: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/43.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4343
ControaleControale WebWeb
•
Mapplets
–
mini-aplicaţii capabile de interacţiunea cu hărţile (e.g., Google
Maps)
•
Silverlight
– alternativă Microsoft la grafica vectorială specificată via Flash ori SVG–
Se bazează
pe
.NET Framework
–
Multi-platformă
(actualmente: Windows & Mac OS X)–
Moonlight
–
via Mono, pentru
Linux
•
Aplicaţiile iPhone
–
modelul widget-urilor (XML + XHTML + JavaScript
+ CSS + alte resurse
multimedia)
–
rulează
în browser-ul
Safari
![Page 44: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/44.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4444
StudiuStudiu de de cazcaz
•
Folosirea controalelor în cazul interfeţelor pentru dispozitive mobile
Palm PC 1998 Pocket PC 2000
Pocket PC 2003
![Page 45: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/45.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4545
StudiuStudiu de de cazcaz
•
Caracteristici– Resurse hardware reduse
(procesor, memorie, ecran la
rezoluţie redusă: e.g., 176 ×
220, 240 ×
320
etc.)
– Conectivitate cu alte dispozitive/PC-uri– Interacţiune –
limitată
–
via tastatură,
stylus (pen), touch screen,...•
Interacţiune multi-modală: tastatură vs. stylus
•
Afişare landscape / portrait / square– Unele dispozitive oferă suport pentru interfeţe
alternative (skin-uri) •
Exemplu: Smartphone Home Screens
![Page 46: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/46.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4646
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Focalizarea asupra activităţilor de bază
ale utilizatorului•
Ce realizează utilizatorii 80% din timpul alocat folosirii dispozitivului mobil?
– Eliminarea opţiunilor care nu sunt neapărat necesare
•
Dacă doar 20% din utilizatori recurg la o funcţio- nalitate, atunci ea nu este cu adevărat necesară
– Realizarea testelor de utilizabilitate a interfeţei•
Chiar şi testele informale sunt folositoare!
![Page 47: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/47.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4747
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Interfaţa se poate inspira din design-ul interfeţelor
de pe dispozitivele desktop•
Exemplu: meniul
Start prezent la
PC/Smartphone
– Aplicarea standardelor & reglementarilor de proiectare a interfeţelor
•
Consistenţa, utilizarea celor mai bune practici, design paterns,...
– Focalizarea asupra datelor (conţinutului) şi mai puţin asupra modului sofisticat de prezentare
![Page 48: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/48.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4848
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Asigurarea mijloacelor de interacţiune familiare,
astfel încât –
pentru îndeplinirea task-urilor
– schimbările de postură să fie minime•
De exemplu, redactarea unui e-mail nu ar trebui să recurgă (exclusiv) la stylus
•
Pot să apară
probleme la recunoaşterea scrisului de mână
![Page 49: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/49.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4949
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Controalele trebuie poziţionate corect
•
Interacţiunea nu trebuie să ascundă
sau
să facă inefective controalele esenţiale
•
Hand obstruction
![Page 50: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/50.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5050
StudiuStudiu de de cazcaz
•
Reguli de proiectare– Minimizarea alertelor şi mesajelor de tip bubble
•
Atenţia utilizatorului nu trebuie distrasă de la activitatea desfăşurată la un moment dat
•
Bubble-urile
nu trebuie să substituie casetele de dialog (de tip buletin –
message box)
şi trebuie să apară cât mai rar
![Page 51: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/51.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5151
StudiuStudiu de de cazcaz
•
Modelul de acces la date– Adoptarea
a trei
maniere de prezentare:
•
List view –
localizarea informaţiei, defilare•
Card view –
detalierea informaţiei, consultare
•
Edit view –
editarea informaţiei
![Page 52: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/52.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5252
StudiuStudiu de de cazcaz
•
Modelul de acces la date– List view – trebuie să ofere
operaţii uzuale precum:•
New, Reply, Forward
(pentru mesaje)•
Call, E-mail, SMS (pentru contacte
personale)
![Page 53: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/53.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5353
StudiuStudiu de de cazcaz
•
Modelul de acces la date– Card view –
poate oferi
un mod complex de vizualizare•
Chart-uri, grafice
•
Fotografii– Este optimizat
pentru
navigarea cu o singură mână
![Page 54: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/54.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5454
StudiuStudiu de de cazcaz
•
Modelul de acces la date– Edit view –
optimizat
pentru introducerea datelor•
Câmpurile modificate frecvent vor fi plasate
primele•
Suporta intrări prin emularea tastaturii (via stylus)
![Page 55: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/55.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5555
StudiuStudiu de de cazcaz
•
Utilizarea textului & graficii– Adoptarea
unui ton mai puţin formal
“Cannot connect”
vs. “Your device cannot connect to the server”
– Eliminarea cuvintelor care nu sunt necesare “Select the phone settings to use”
vs.
“Select the phone settings that you want to use”– Pentru
help-ul
on-line, de folosit simboluri (“>”)
“File > Open”
vs. “On the File menu, tap Open”– Textul îngroşat trebuie utilizat rareori
(pentru titluri, fără rol de intensificare semantică) – Italicele nu se folosesc
![Page 56: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/56.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5656
StudiuStudiu de de cazcaz
•
Utilizarea textului & graficii– Formatarea trebuie să fie consistentă
•
Label-uri terminate cu “:”•
Titlurile nu trebuie terminate cu “:”
– Alocarea de spaţiu suplimentar pentru internaţionalizarea
aplicaţiei
•
Engleză:
prompt•
Germană:
Eingabeaufforderung
– De evitat butoanele multiple pe o singură linie– Reducerea apariţiei sub-meniurilor– Designul
vizual trebuie să se adapteze orientării
ecranului (landscape, portrait,...)
![Page 57: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/57.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5757
StudiuStudiu de de cazcaz
•
Interacţiunea– Conţinutul
se poate schimba
la trecerea
landscape ⇒ portrait
![Page 58: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/58.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5858
StudiuStudiu de de cazcaz
•
Interacţiunea– Aranjamentul
(layout-ul)
se poate schimba
la trecerea
din landscape în portrait
![Page 59: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/59.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5959
StudiuStudiu de de cazcaz
•
Interacţiunea– Zonele de interacţiune cu stylus-ul
(InkBoxes la Tablet PC) ocupă mai mult loc decât câmpurile I/O tradiţionale
⇒ toate câmpurile de editare trebuie să
fie plasate în
partea superioară
a zonei
de introducere a datelor (Input Panel)
![Page 60: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/60.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6060
StudiuStudiu de de cazcaz
•
Interacţiunea– Folosirea
Input Panel-ului
la Pocket PC
![Page 61: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/61.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6161
StudiuStudiu de de cazcaz
•
Interacţiunea– Unele controale la dimensiuni standard
pot frustra utilizatorii (sunt dificil de acţionat via touch screen sau stylus) ⇒ introducerea imprecisă a datelor
– Vizualizarea cursorului pe un Tablet
PC este diferită •
Scade
acurateţea localizării stylus-ului
![Page 62: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/62.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6262
StudiuStudiu de de cazcaz
•
Interacţiunea– Dificultăţi de navigare la marginile ecranului
•
A se revedea
comentariile
privitoare la legea
lui
Fitt
•
De evitat plasarea aici
a barelor de scroll, a butoanelor de închidere,...
– Cursorul trebuie să reflecte
acţiunea curentă efectuată cu
stylus-ul
![Page 63: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/63.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6363
StudiuStudiu de de cazcaz
•
Proiectarea interfeţei aplicaţiilor iPhone (Craig
Hockenberry, 2007):
www.alistapart.com/articles/putyourcontentinmypocket– Au la dispoziţie un ecran de 320×480 pixeli– Rulează în cadrul Mobile Safari– Aliniate standardelor Web actuale
(XHTML, CSS, JavaScript, DOM, AJAX)– Nu se oferă suport pentru Flash– Redarea conţinutului multimedia (.mov)
– via plugin-uri
QuickTime
– se realizează fără interacţiune directă (doar play)
![Page 64: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/64.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6464
StudiuStudiu de de cazcaz
•
Proiectarea interfeţei aplicaţiilor iPhone– Redarea unei părţi dintr-o pagină Web
se realizează
prin intermediul viewport-ului; comportamentul acestuia se poate ajusta
prin <meta /> sau proprietăţi CSS (non-standard)– Legăturile incluzând numere de telefon conduc
la efectuarea de apeluri– Zona de redare a conţinutului e ajustată dinamic
pentru a facilita interacţiunea cu o singura mână– Resursele
hardware conduc
la timpi
mari
de execuţie
pentru
JavaScript
![Page 65: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/65.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6565
StudiuStudiu de de cazcaz
•
Proiectarea interfeţei aplicaţiilor iPhone– Reguli:
•
Simplificarea conţinutului: HTML necomplicat, CSS + JavaScript
minimale, rezoluţii scăzute ale imaginilor
•
Minimizarea transferului prin reţea•
Evitarea textelor mai mari de 10 MB
•
Paginile Web trebuie să însumeze maxim 30 MB•
Evitarea conţinutului în formate ca BMP, PICT, RTF, SVG, AVI, MPEG
– Detalii
la http://developer.apple.com/iphone/
![Page 66: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/66.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6666
StudiuStudiu de de cazcaz
•
Exemple de utilizări:– TomTom
Navigator:
ghid
auto – AmazonHunter:
asistent
e-commerce (Smartphone, C#, .NET –
Eduard
Weissmann*,
2004)– E-Pizza
: e-commerce
(WAP, WML, PHP –
Cristian
Nechita*,
Marius Ropotă*, Iavi
Rotberg*, 2003)
* de la Facultatea de Informatică, UAIC Iaşi
![Page 67: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/67.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6767
StudiuStudiu de de cazcaz
•
Exemple de utilizări:– PalmNotes: asistent evaluare
a studenţilor (PalmOS, C – Adrian Lazariuc*, 2004)
– SmartPartner: asistent de învăţare a scrisului (TabletPC, Smartphone, Pocket
PC, C#, .NET
–
Mihai Serea*, Petru Jucovschi*, 2004)
– wap.infoiasi.ro
(WAP, WML/XHTML-MP, PHP – Ionuţ
Botez*, 2005)
* de la Facultatea de Informatică, UAIC Iaşi
![Page 68: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/68.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6868
RezumatRezumat
•
Pictograme
(icon-uri)•
Toolbar-uri
•
Controale ale interfeţei–imperative &
de selecţie
–de introducere &
afişare (I/O) –altele
•
Greşeli•
Studii
de caz
![Page 69: Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea între reprezentare şi conceptul referit se poate face: –Conform similarităţii](https://reader033.fdocument.pub/reader033/viewer/2022060806/608b75088d416921bb1a0f1c/html5/thumbnails/69.jpg)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6969
ÎÎntrebărintrebări??