Interacţiune om-calculator Interacţiunea cu utilizatorul (II)busaco/teach/courses/...Asocierea...

69
Interac Interac ţ ţ iune om iune om - - calculator calculator Dr. Dr. Sabin Sabin - - Corneliu Corneliu Buraga Buraga www.infoiasi.ro/~busaco www.infoiasi.ro/~busaco / / 1 1 Interac Interac ţ ţ iune om iune om - - calculator calculator Interac Interac ţ ţ iunea cu utilizatorul (II) iunea cu utilizatorul (II) Dr. Sabin-Corneliu Buraga Facultatea de Informatică Universitatea “A.I.Cuza” Iaşi, România http http :// :// www.infoiasi.ro www.infoiasi.ro /~ /~ busaco busaco / /

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google

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

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

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

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

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

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

Pocket

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

6969

ÎÎntrebărintrebări??