i" Universitatea ”’Vasile Alecsandri” din BACAU

roll oe Departamentul E.S.C.

Erori, Riscuri si Fiabilitate

in Interactunea om-calculator/masina.
a w

" Testarea ne arata existenta bug-uri, nu lipsa lor.”

E. Dijkstra
“Do not answer a fool according to his folly, or you will be like him Sfaturi. Studii de caz;
yourself.”
‘lees 3 Designing a nnn ieee Proverbs 26:4
om percepe un utilizator aparitia _
4, Designing
\ Naa ‘ay for error unui mesaj de eroare.
Haven eran ve eee eo
Thine deed comp aah

Analiza modalitatilor de detectare si managemental erorilor.

«A gresi este omeneste. Pentru a produce un adevarat dezastru, este insa nevoie de
un computer ».
> Avand in vedere consecintele importante ale erorilor in Logo-ul HESSED 2004: Working conference on Human Error,
Safety and Systems Development, Toulouse, Franta, septembrie 2004.

activitatea umana, este necesara o abordare a erorii din punct de

erorile:
vedere psihologic $i nu doar fenomenologic.
> Din punct de vedere psihologic, eroarea poate fi definita ca o > produc prejudicii umane;
abatere sau nerealizare a scopului ca functie a intentiei. Aceasta > costuri economice;
abordare este sustinuta de analiza mecanismelor cognitive de
>» determina stres;
generare a diferitelor tipuri de erori, a conditiulor interne $1
externe facilitatoare producerii erorilor. \ > conduc la emotii negative.

Tipuri de erori:
» Orice studiu de fiabilitate umana cere o definire a erorii,
» “notiunea de fiabilitate umand este corelativad cu aceea de L) Greseala -— actiune deliberata care
eroare umana”(p.18) (Leplat (1985),. conduce la o solutie eronata; Nu-mi vine
LL) Omisiune — nerealizarea sarcinii datorita sa cred.
> in numeroase lucrari termenul de eroare poate constitui o
Am apdsat
comportamentului inconstient . Yes...
sursa de ambiguitate.
>Apar in general la _ persoanele
> Intalnim de multe ori expresii de tipul:
specializate;
= “eroarea sistemului tehnic”
>sunt datorate de obicei faptului ca
= “eroare de calculator”,
activitatile frecvente au secventele
= “erori datorate interventiei hazardului” etc.
initiale similare altor activitati;
> Tn toate aceste exemple nu este vorba de eroare, in sensul
>este necesar feed-back si posibilitate
strict al acestei notiuni.
de Undo;
 > Utilizatorul NU doreste sé apara nici un mesaj de eroare, deci nu em Dialog simplu si natural
trebuie sa aparal 1121111; QO Prezentati exact informatia de care are nevoie utilizatorul
> Multe mesaje de eroare sunt ambigue, incorecte sau absurde, > less is more
ducand la bulversarea utilizatorilor; ¢ Mai putin de invatat, mai putin de gresit, mai putine surse de
distragere...
> Utilizatorul nu trebuie instruit astfel incadt si nu comita greseli. ;
> Informatia ar trebui sa apara in ordine naturala
Mesaje de Eroare.

¢ Informatia relationata ar trebui grupata

e Ordinea de accesare a informatiei se potriveste asteptarilor
>Ce inteles au urmatoarele mesaje de eroare pentru utilizatorilor
ili 1 it? ica 9 i-le?!! . a . .
utilizatorul obignuit? Ce comunica ele? Reformulati-le?!! > Stergeti sau ascundeti informatia folosita rar sau nenecesara
° 404 not found; ¢ Intra in competitie cu informatia relevanta de pe ecran
¢ Fatal error 312: aborting; > Evitati “modes”
. ¢ situatiile in care intr-o interfata o actiune determina raspunsuri
¢ Syntax error near line 1025; diferite in functie de starea sistemului
¢ Internal compiler error; > Folositi ferestrele cu zgarcenie
?

¢ Nu adaugati navigare nenecesara

¢ Segmentation fault: core dumped;

‘emp Vorbiti limba utilizatorului

Trebuie vorbit in limbajul utilizatorului

My program gave me the That's

message Rstrd Info. restricted But surely you can No, no... Rsdrd Info = pentru realizarea sarcinilor trebuie folosita terminologia utilizatorilor
What does it mean? information tell mel! stands for “Restricted
Information (limbajul utiliztorulu1)
mer ccrete be )_ |Opx} Per te eter es | (Oy =|

Maximum withdrawal of $50 x.25 connection discarded

at this time due to network congestion.
Local limits now in effect

Eee $100 | $150 |

Hmm... but what It means the program Ok, T'll take a
does it mean??? is too busy to let you coffee
log on
Eateries
= Se va folosi cel mai potrivite

at
mnemonice, ex: pentru Save (ALT+FS), (tse File Edit
iconite si abrevieri (Ctrl+S);

\O oe Ge | ul

om em MUU IMEEM NPULULCM OLS SeLtlE

UIE slik le XE
=
—_—
= > Mesaj de eroare ! Application has generated an exception that could not be handled,
Sum = trebuie folosit limbajul utilizatorului in formularea Mesajelelor
© neinteles de
~-_
de eroare; Process ID=Ox5Sa¢ (1444), Thread ID=Ox5c0 (1472).
S
\ utilizatorul obisnuit.
—
= Nu jicniti si nu faceti pe utilizatori sa se simta prost!
HWelalitm~y] ; di ; i | :
Ae he ee ie
Click OK to terminate the application,
om
,

ari
5So

:
3>

—
-
= " Ori de cate ori este posibil, preveniti erorile. =
eS —_—

=- Seo) ooo .©
2S AN There has been an error transferring your mail |
°
+ Datate: [i \wihert Steere
eee iter ee -
r S said:
= Stat: [8:30AM 2] [wed 5 14/97 |
Alld
. . ous . HAIL FROM:<¢mmecclinc@[Link]>
S End: | 4:20PM 3] [Wed 6 714 797 3]
o Month Day ‘Year Description a a se F oT > evitati mesajele and then the SMTP server sand:
prea tehnice. 503 Polite people say HELO first
3 May [22 [19907 Smart Technology Sen ‘4 * ‘. 5 = 1a
Q 1112 13MEJ 15 16 17
Month Day Year 1819 20 21 29 23 24
a M 39 1997 25 26 29 26 28 30 a
oy fry Where: |
 »Cuce a gresit utilizatorul? Cum poate remedia situatia? A cui este > De evitat termeni precum:
ereseala? Location is not available

abort =end, cancel, stop | hit =press, depress

available =>ready invalid >not correct/good/valid
boot = start, run kill =>end, cancel
> Intotdeauna se da vina pe utilizator, desi aplicatia este cea care nu
error execute >complete output = =>report, list, display
Mesaje de Eroare.

poate continua executia

terminate end, exit
C= &) Gizmo Error (ey

S Security Image Error > trebuie sa se faca in aga fel incat erorile sa fie imposibile:
Lonnmecticn | Please try again,
"utilizarea unor controale grafice in loc de imtroducerea
numerica/textuala;
> Utilizatorul crede ca el a a desi aplicatia a generat eroarea.
"folosirea diverselor butoane (de exemplu radio sau de
iP ion
selectie);
CHOOSER caused a General Protection Fault in
module [Link] at O00: 02268 List jade out of bounds.
" afisarea de tooltip-uri, ajutoare (help-uri) etc.;
Choose close. CHOOSER will close.

® folosirea unor "agenfi de interfata".

Reguli pentru mesaje de Eroare netscape

| Internal Failure [x]

1. Politicoase si ne intimidataore: x Error Number: Ox80040707

Description:
° ili ii SA imta stunid:
Try again, bonehead!
Error 25 x
Cannot open this document
Error handling

Com Exception
2. Usor de inteles An internal error occurred. The BeyondMail
om Error tie Sdn: cpp line 220 (232)
¢ Error 15967 Code = 800
Code a ees
ao
Unknown error 0x8 3
intemal error code is displayed above.

3. Specifice
> Cannot open this document Whort is “emo 15782

> Nu pot deschide “chapter 5” deoarece aplicatia “Microsoft

Word” nu este intalata in sistem! Y
4, Helpful
> Nu pot deschide “chapter 5” deoarece aplicatia side
Word” nu este intalata in sistem. Incercati sa deschideti
‘“‘WordPad’’?

Nu faceti asa!!!
¢« Reformulati urmatoarele mesaje de eroare:
Q The operation compkted successtully.
> SYNTAX ERROR

> Error 404;

AN There was an emor opeming this message.
> INVALID FILENAME
An emor has occuned.

> Unknown Hard Error

> STOP: C00432

Exercitiu

STATUS_IMAGE_CHECKSUM_MISMATCH
>» INVALID DATA;
Configure SQL Server Agent

>» DRIVE ERROR: ABORT, RETRY OR FAIL?

(— Mesaje de eroare - - recomandari > Restabilirea valorilor implicite
Trebuie sa tineti cont de urmatoarele recomandari cand proiectati - Revenirea la setarile originale
interfefele: The user can skip any
(Jakob Nielsen's 10 usability heuristics from the book “Usability Engineering’’) question
> minimizati incarcarcarea memoriei utilizatorului; (descrieti formatul de
intrare necesar, prin exemple de intrare valabile, asigurati intrari implicite) —
(Utilizatorii nu pot tine minte asa de multe lucruri ca si calculatoarele)
> interfetele sa fie consistente;
> oferiti feedback;
> sa fie prevazutr clar si concis iesirile;
> transformati erorile intr-o maniera utila $i pozitiva;
> nu condamnati utilizatorul, ci indicati ce sa faca pentru a depasi situatia
> evitati folosirii termenilor FATAL, ERROR, INVALID, BAD, ILLEGAL
> evitati folosirea codurilor si literelor mari;
> sa poata fi scoase atentionarile sonore care insotesc situatiile de eroare
pentru a nu genera jena;
es permiteti acces la help contextualizat; yy eet ee eee 2 Bee

Ain
|

Aparitia mesajelor de eroare si de confirmare: 1. Prevenirea erorilor:

> nu trebuie s4 se recurga la alta fereastra pentru a schimba ceva din

fereastra curenta (fenomenul cutiilor de dialog deschise in
> Eliminarea optiunilor neaplicabile intr-un context dat;
cascada);
> utilizatorul nu trebuie fortat sd-si aduca aminte; > Folosirea controalelor cu introducere limitata;
> utilizatorul nu ar trebui obligat s4 redimensioneze gsi/sau s4 mute
ferestrele (mai ales la o interfata MDI); > Acordarea de ajutor & de feedback pozitiv;
» utilizatorul nu trebuie sa-si confirme actiunile;
> Acceptarea erorilor de redactare (common misspellings)
> actiunile utilizatorului nu trebuie s4 conduca la eroare (ramane in
responsabilitatea interfetei sa valideze raspunsurile/actiunile oriunde este posibil;
furnizate/realizate de utilizator).
> Oferirea unui mecanism continuu si automat de salvare a
datelor — vezi Blogger;
9) The objects being compared are identical. oe
bo you want to continue the comparison? Confirmarea inutila a > Inainte ca o operatic sf se execute, sA se permitaé revederea
unei activitati. (preview) sau schimbarea ei;
Ves
> Fortarea confirmarii in cazul unor actiuni (posibil) distructive.

2. Detectarea erorilor: 3. Corectia erorilor:

erorilor:

erorilor:

>In situatiile conversationale, erorile trebuie detectate cat mai

timpuriu posibil (la nivel de caracter, de control sau la > Memorarea a cat mai mult din datele/actiunile realizate de
Prevenirea, Detectarea si Corectia

Prevenirea, Detectarea si Corectia

terminare). - Pentru Web, se poate adopta AJAX; utilizator pana la aparitia erorii;
> Mentinerea/redarea elementului care a determinat eroarea;
> La validarea la nivel de fereastra, folosirea unui dialog
> Marcarea vizuala a elementului eronat;
nemodal pentru redarea listei de erori, cu focus pe prima din
>» Afisarea unor mesaje de eroare corecte si folositoare (in
lista si plasarea cursorului pe elementul cauzator al erorii;
maniera nemodala, eventual);

> Tratarea erorilor cat mai judicios posibil; > De oferit “ceva” utilizatorului la aparitia erorii: o optiune de

> De folosit feedback-ul audio cat mai eficient posibil; salvare/restaurare, o posibilitate de ajutor, o solutie de

urgenta etc.
 Feed-back

\‘
Q Timpii de raspuns
FEEDBACK [FID-BEC] s. n. 1. conexiune invers in sistemele > Perceptia utilizatorilor
cibernetice, biologice, tehnice, pentru mentinerea stabilitatii gi
« <0Q.1s - “instantaneu”
echilibrului lor faté de influentele exterioare; lant cauzal inchis;
retroactiune (3). 2. (p. ext.) intoarcere, revenire. (<< engl. feed- ¢ 1s -utilizatorul ramane concentrat, dar remarca o intarziere
back) [Link]
L) Este o forma de mesaj specifica (ca reactie la mesajul initial) ¢ 10s_ - limita pana la care utilizatorul ramane concentrat la
prin care impactul comunicarii emitentului se poate cunoaste dialog
in comportamentul destinatarului (perceptia, prelucrarea,
interpretarea gi redarea mesajului initial), iar pentru ° > 10s - utilizatorul va dori sa realizeze alte sarcini in timpul
eficacitatea FeedBack-ului trebuie ca sa:
= realizeze scopul propus initial (comunicare eficace si
in care trebuie sa astepte
eficienta); e @ QO Cum tratam intarzierile lungi?
= pdstreze relatia cu interlocutorul zntacta, deschisa Y
nedefensiva . > Cursoare
>Bare de progres

Oferiti feedback
Ce va face acest program?
LI Permita utilizatorului sa stie:
> Ce face tn prezent programul: a fost ultima comandd infeleasd, a
terminat sarcina actuald, ce sarcina este in prezent in lucru, cat va dura 25) x)
sarcina curenta etc. he Ede Vew Toos Message Help v

> ceea ce face programul (de exemplu, deschiderea unui fisier), ~ ) e 9 @ gu. + |
s Undo. Check Spefing Aach FPricrity Sign = Enaryet Offine

> ce erori s-ar putea sa aiba loc (de exemplu, nu a putut dschide fisierul) From — [Link] ([Link]) = — — i
> si de ce (de exemplu, fisierul "[Link]" nu a putut fi giasit) te | cy d

Mc: |
. cateva indicii despre modul de evitare a erorii (de exemplu, asigurati-
Wc: |
va ca intrarea fisierul este in directorul specificat). Sebpeet: | ge "
L) programul dvs. ar trebui cel putin sa poata oferi unele feedback
rudimentare: Otay chacde TB epchate ty acktreas books

> De exemplu, daca se introduce o valoare negativa pentru varsta, atunci Lino for sow

programul poate reaminti utilizatorului care este o valoare valida

(valoarea valabila ar trebui sa fie indicata utilizatorului in momentul in
care acesta selecteaza campul): age = int (intrare (,,Introduceti varsta
intre (O- 114):"))

Feed-back

» Fiti cat se poate de expliciti la mesaje

emo ig. Form | (Oy x} Py |) (op x]

Saving... Saving file heuristics ppt in

folder tapics

This will take

[5 minutes...
x
umm
® Feed-back-ul este bine sa apara in contextul actiunii

Ce pot sa a where the cursor shape indic |

fac? - the cursor from an arrow to ‘|
“husy” mode (Figure 1b), at¥|
Cum interpreteaza Word is saving [Link]: |= a//
sistemul actiunile
utiliztorului?
 » aplicatiile ar trebui sa emuleze “bunele maniere” (human > utilizatorii nu trebuie umiliti de catre software.
etiquette) $1 sa se scuze (Reeves & Naas, 1996);
OmniApp 7.0 Critical Error

€ ‘fou have caused the database to lose referential integrity! (E50276)

Windows cannot find the file.
Would you like some wine instead?

Beat
Me Some More | [/ Tin Guilty]
penne nent
Feedback-ul

| Yes | { No |

(=) Sorry - KDesktop @ae@e.

RDEInit could not launch vi cos| tw ||

Could not find cnr’ executaire. Click, this: to display an overview of this dialog box, idiot,
>» “bunele maniere” (human etiquette) For Help on anitem, cick ? at the top of the dialog box, and Jb
gi Sa se scuze then clck the item

Eve Candy > trebuie utilizat feedback-ul pozitiv pe principiul “nu spune nimic daca
nu ai ceva frumos de spus”’, adica erorile utilizatorilor se pot converti in
O intrebare trebuie sa TO
rezultate corecte, raportate ca succes",
aiba si un raspuns.
OmniGraffle Professional can only open
Visio® 2002 XML files (.vdx).

This file is in Visio®"s proprietary binary format

(.vsd). Please open the file in Visio 2002® or
> Utilizatorul nu Heceusaeie later and re-save it as an "XML Drawing”,
poate fine minte The spelling check is complete.
Text set to (ho proofing) was skipped. To find tho proofing) text, click
continutul unel Ecit/Replace, click More, click Format, click Language and choose (no VISIO
ferestre de proofing). - © System Configuration Problems - K3b
dialog. !!
——
Pe eee pM ata aed eed
(es System Configuration Problems | protem K3B

Internet Explorer cannot open the Internet site

No CD/DYD writer found.
K3b dic nai find an optical writing device in your systam. Thus, you willnmct bo

Incapacitatea de a able to burn CDs or DVDs. However, you can still us] other K3b features like
aucio track extraction or audio transcoding or |SOS660 image creation.
rezolva exceptiile. The server returned extended information

—) Bo not show again i Close |

Exceptii si rezolvarea lor.

> aplicatia trebuie sa fie pregatitaé pentru a rezolva exceptiile care > Afisarea inutila a
pot surveni; unui mesaj de
> o exceptie nu trebuie privita ca o eroare, ci ca o problema care exceptie.
trebuie solutionatd de software, nu de utilizator;
> mesajele de eroare trebuie rezervate doar pentru urgentele reale.
Microsoft Intemet Explorer
be Photoshop
Adobe Photoshop © Internet Explorer cannot open the Internet site
¥Tune[tm) Coach xf}
Unable to continue because of a narcyare or
system enor, Sorry, but this error is 2) The ¥Tune(trn) Analyzer cannot deternine from the filename
urrecoverable,
> Proiectarea

\——
The server returned extended information Apron avireduice reduce. asm whether to invoke the C/C++,
defectuoasa a unei Java, or Fortran Coach. For C [or C++). reply Yes. For Java or
Fortran, reply No. Otherwise, Cancel Code Coach [language not
casete de confirmare. supported].

“No | Cancel
 Gestiunea exceptiilor

Error Handling
Ti) eee

7) The ¥Tuneltm) Anakeer cannot determine trom the hlename e O:\Users\ Sabin Docurnents\My Videos is not accessible
C\propinavieduce weduce aan whether bo invoke the Clee,
Javea, or Fortran Coach. For C for C++), reply es, For Java of Access is denied.
Fortran. reply No. Otherwise, Cancel Code Coach [language not
supported. le
iY] Mo | Cancel|

Responsabilitatea nu trebuie
Confirmarea: JavaScript
pasata utilizatorului, ci rezolvata Invalid amount, please re-enter.

de catre program
Information x
OK
(i) Spell check cancelled Netinfo Error
Netinfo read failed! (Operation
succeeded)

Can be a dialog box or a sound.

Gestiunea exceptilor

ee ee es

1. Tell us about yourself...

Ny Invalid date value: 822/93 > Aplicatiile nu trebuie sd My Name |lon | |(Gheorhe
Gender | Male ~~
considere erori date Birthday | January Milas s|faga0|

perfect valide. Postal

| live in | Romania

Cade [555555 si
~|

| . 2. Select an ID and password

< Yahoo! ID and Email @ | [Link] ~|

Passwod| (isi‘i;OO!OO!!!!OC*™d
i

Retype Password [|
- Utilizatorulnu _ Lost your data?
v.
7 aq a The project file “E:\we\appssAimiC. dsp" may have been modified on disk on reat
_ ee

trebuie niciodata i) by the preceding Source Control operation. However, you also have made LAT DASE OUD

Sd raspunda unel changes to this project which have not been saved. me \ ae
=
j f

casete de dialog IF you reload the propect you wall lose your current changes, but if you don't
ou risk overwriting the new changes on disk, which ts usually much worse.
informative. Do vou wank to reload it now?

> varianta actuala: >varianta ideala (Alan Cooper):

" Aplicatia trebuie sa aiba grija de integritatea datelor;
" datele trebuie sa fie transformate in date valide de la momentul
introducer lor; QO Programul/Software-ul/Aplicatia trebuie;
" datele nu mai trebuie sa fie re-verificate ulterior (din moment ce au = sa aiba grija de imunitatea datelor;
fost valide de la introducere).
= sa fie imun la inconsistente $i goluri de informatii;
Cannot Accept Entry = sd rezolve orice probleme referitoare la date eronate gi sa fie
tolerant la defecte;
| What's Wrong
= sa fie "constient" de contextul activitatil;
| The name you entered -,W,- contains
invalid special characters, = Aplicatia nu trebuie sa para stupida!

| What You Need To Do = sa furnizeze utilizatorului feedback pozitiv audio/video;

| Select the Try Again button and re-enter this

information using only characters,spaces, and LProgramatorul nu _ este vinovat pentru erorile
hyphens,
utilizatorului, dar el este responsabil de aparitia lor;
 UW) Principiul efortului comensurat: Riscul este o notiune intalnita in toate domentile de activitate, sub
diferite aspect $i se refera la:

daca e dificil sa anulezi un anumit efect asupra unei stari atunci > in idustrie -> siguran{a in functionare

trebuie sa fi fost dificil sa faci actiunea care a dus la efect (ex : e > in general, este strict legat&é de notiunea de securitate.

greu de recuperat fisiere intr-un sistem de operare, deci trebuie sa > Le Robert defineste riscul ca un eventual pericol, mai mult
sau mai putin previzibil.
fie greu sa le stergi, sau ar trebui sa fie mai greu decat sa le
> poate fi considerat ca o insecuritate potentiala, dar conceptul
redenumesti)
de securitate poate fi abordat sub mai multe aspecte, ceea ce
a dus la puncte de vedere diferite.

Dupa Goguelin riscul posed doua aspecte: Defectarea:

> este considerataé obstacol pentru siguranta in functionare.
1) periculozitatea, evidentiaté prin pericolul, primejdia sau incon- > este un eveniment care conduce la incetarea aptitudinii unei
venientul la care un individ este expus; este vorba de consecinta entitati de a indeplini o functie ceruta
periculoasa a unui eveniment sau a unei actiuni; LI Studiul defectarilor presupune cunoasterea, evaluarea, previ-
2) incertitudinea, datoraté hazardului; riscul apartine domeniului ziunea, masurarea si stapanirea lor.
posibilului, probabilului. O Siguranta in functionare permite sa se evalueze tncrederea pe

care putem s4 o avem in serviciile efectuate de aplicatie. Aceasta

Domenii de aparitie a riscului:
incredere poate fi abordata sub diverse aspecte dependente si
> productie (de exemplu riscul de defectare),
complementare Ca: fiabilitatea, dispo-nibilitatea,
> economie (de exemplu riscul de pierdere financiara);
mentenabilitatea si securitatea.
> securitate (de exemplu riscul de accident).

> Entitatea pentru care aptitudinea de a satisface una sau mai multe
> Aparitia unui eveniment, nedorit, considerat ca fiind un obstacol
functii cerute in anumite conditii date, este conideraté sigura in
pentru siguranta in functionare gi incetarea indeplinirii functiei functionare permiténd evaluarea increderii_avute in serviciile
efectuate de un sistem, fiind abordata sub diverse aspecte dependente $i
avute se considera Defectare, iar studiul acesteia presupune
complementare ca: disponibilitatea (fiabilitatea, mentenabilitatea,
cunoasterea notiunilor de: evaluare, previziune si masurare. logistica, mentenanta) si securitatea.
reprezinta aptitudinea
unei entitati de a
ptitudinea SIGURANTA IN FUNCTIONARE OPERATIONALA indeplini o functie, in|
Defectare conditii si durare date.

| SECURITATEA DISPONIBILITATEA

FIABILITATEA a reprezinta —_ aptitudineal

unei entitati de a fi

reprezinta aptitudinea mentinuta sau restabilital

unei entititi de a fi | MENTENABILITATE: intr-o stare in care eal

capabila sa r poate sa indeplineasca o

functie ceruta, cand
indeplineasca o functie LOGISTICA SI
- Reparare ceruta, in conditii date, MENTENANTA
mentenanta este

la un moment dat
indeplinita in conditii
date si cu proceduri sii
mijloace prevazute.
Legatura intre cele doua stari: de functionare si defect
sigurant{a in funcfionare.
 Siguranta in functionare a unui echipament poate fi reprezentata
> Fiabilitatea reprezinta aptitudinea unei entitaéti de a indeplini o
functie ceruta, in conditii date, in timpul unei durate date.
> Mentenabilitatea reprezinté aptitudinea unei entitati de a fi
Siguranta in functionare
mentinuta sau restabilité intr-o stare in care ea poate sa
SECURITATEA DISPONIBILITATEA
indeplineasca o functie ceruta, cand mentenanta este indeplinita in
conditii date si cu proceduri si mijloace prevazute.
| FIABILITATEA |
> Disponibilitatea reprezinta aptitudinea unei entitati de a fi capabila
| MENTENABILITATEA | sa indeplineasca o functie ceruta, in conditii date, la un moment dat.
> Securitatea reprezinta aptitudinea unei entitati de a evita aparitia,
LOGISTICA SI
MENTENANTA in conditii date, a unor evenimente critice sau catastrofice. Ea
trebuie sa fie luata in considerare inca din faza de conceptie a unui
echipament gsi pentru a face aceasta este necesar sa se intreprinda
analize ale riscului care poate aparea in exploatarea acestuia, pentru
a evalua pericolele si, eventual, pentru a reconsidera conceptia sa.

Greseli tehnice si umane, (combinate sau nu), pot conduce la situatii

Accidentul este concretizarea extrema a unei insecuritafi si implica
periculoase, iar protectiile prevazute pentru aceste situatil sunt ineficiente,
in majoritatea cazurilor operatorul uman, deci, omul si masina trebuie
atunci are loc incidentul, care degenereaza intr-un accident.
prevazute cu mijloace de protectie $i de prevenire pentru a limita
desfasurarea accidentului.
Defectiume telmica

> Organizarea poate fi defectuoasd, determinand aparitia unor Misuri de

defectiuni organizationale cu repercusiuni asupra performantelor

Iparare
adecvate?
:
sistemului om-masina, in care operatorul uman si sistemul tehnic sunt Dbefectiune

in interactiune.
Revenire la
normal

¢ Performanta operatorului poate fi perturbata prin defectiuni ¥ Masud de

Masina

recuperare
Defectiune operator
adecvate?
tehnice (informatii gresite, defecte ascunse), ceea ce poate | ‘Use |

conduce la caderea sistemului. Aprozimatir

accident

odelul propus de Van der Shaaf

* caderile umane pot sa se propage $i sa aduca sistemul tehnic Inlantuirea evenimentelor care
Omul

in moduri de functionare inadecvate. rezultatul unei succesiuni de

conduc la accident esecuri, initiata de o defectiune
te 5

Riscurile interfetelor-utilizator, ale calculatoarelor si

tehnologiei:
> Se pot proiecta sisteme sw lipsite de riscuri(?!!);
> lipsa standardizarilor; > Utilizatorul are intotdeauna dreptate:
> prea des ise atribuie utilizatorului eroarea comisa de software.
" Interfata trebuie sa fie politicoasd, clarificatoare, de ajutor;
Pierderi:
" Erorile trebuie sa le rezolve aplicatia si sa nu fie ldsate pe
= pierderea vietii sau proprietatii;
= pierderea securitatii si intimitati; seama utilizatorului;
oie Exemplu de rise al unei UI. >» Mesajele de eroare:
a e .

5 - 1 Automated Suicide Syatem

" trebuie sa fie clare si corecte;

fr : . life ————— Laptop Automated Suicide System
= asta nu impiedica utilizatorul sa faca in continuare
—_y, Do you not want to take your life now?
LO gregeli!!! /
FOWM = -
Faster, Safer, Smarter, Better Axes | On
 > Atentie la alegerea mesajelor: (NU asa!!!) ERORI STUPIDE -

" Tautologic (“Cookie... is a Cookie”); Interesant(“!!”’) Intrebare?

" Utilizatorul are suficiente date sa ia o decizie? De ce sunt considerate stupide?
" Ce este un “Cookie’’? E bine sa-l stearga?
" Ce se intampla daca-l va elimina?

Penk; '

ee
é, want bo delete ik?

Stu diu de ca
Pena
M eee ee oe

ax Caateatoopahics fevila ee CHOOSER caused 4 General =, Fault ir

module UTOPLIAOLL st OO02;022

(Cheese close. CHOOSER will clase.

Te cheek, if oiioral foun iens iv av cilolle ot See

the Miorovolt web ete, olick More Help.

beg m8

Aun-time error 2147024882 (8007000e)': w

System Error &SHBOO04005 [-2147467259). Unspecified errog Tere ee Ol gia) (eu
OK

System Properties

General | Device Manager | Hardware Profiles| Performance|

System:
Microsoft ineloves 398
Sa faca utilizatorul conversia sa
calculeze total Capacity

ee
Overflowing

2 cay =
GB or MB

Paes hi LOee ieee

+ hl oe

. ree Oo
Computer:
—— =
it
= =

‘four version of Windows Operating System iis not supported by this product. Please
upgrade to Windows 98 or later versions before resuming installation.

Page Fée Usage History

Rte Mier tl)

(iiupiae
aco Ty 28. de ‘aparare ooh Hi
Poli | General Customize| Poklers
— oy _Customze
ad (LD Cncktop

~
-
ICD mn) Steme de operare » eM b NE torrent

Type of Fite: File Foktes

Opens veh (. Shame... } ENC an

Location; E:\Prog ame utatawe 29) MR (305. GOS 763 bytes)

299 MB (314.474. 456 bytes)
See 0 bytes

Sue on daki «—O beytae G42 Flos, 25 Foicders

Created:
wineti, 22 notemtnie 2002, 20-31 21
WARNING:yy Pressing
computer. D =.
CTRL+ALT+DEL
| 3 3
again
at «
will” restart yourm
Motif ted;
Atniees LE) Dead-oray
Ancossed:
(] biden
that are running.
(] Aretyve
Attriazes| (likead-only| ()rtdden (7) Archew
Este sau nu esté read only (!?!! [ EndTak | ShaDown|
a coma
Ce J
aoe —————————— 2
 re eee ee ee Te eee

Pe ee ae!
Windows NT has found new hardware and is stalling the software for it

cet ee She
Cd Cauzele frustrarii
© x - ra fo eee | [FE relders | [EEE]+
Address gi F:\ ~| Ej > Aplicatia nu functioneaza corect sau crapa
Folders x Files Carrenthy on the Ob
2 Desktop
4 E) My Documents teal LJ |
=m
@|
’
> Aplicatia nu face ceea ce isi doreste utilizatorul
= & My Coreuter —
© Bb 3.5 Feepy (ac)
He Locdl 06k 003)
ened 4S
a
autorun readies tore
» Aplicatia nu ofera suficienta informatie astfel incat utilizatorul
4 <> Downloads
2) Se Suff (Es)
(De) Ud Pile eas eed
“Geral | .
sa stie ce sa faca
= Bowie eretdl | Hisderere,| Shanna. | Recorder)
ee CC) msdn
NM Sc =
> Mesaje de eroare vagi, care condamna utilizatorul
> Sistemul cere utilizatorului sa faca o multime de pasi pentru
4
Es Type Lecal Disk
~ 2 File saber: = LDF
realizarea sarcinii, iar apoi apare o eroare si totul trebuie reluat
5
=
2
peta Blase!
= ==
IB Uted enace:
BB Fies space
2593565 Alive:
ORytes
ZGE
O bytes
de la inceput;
= Capecite 2EOUSES
G2 inte = 26908
> Unul din cele mai frecvente motive de frustrare — limbajul
.
a
8
= ss
criptic si tehnic al mesajelor de eroare
-
= =z
Ores F
— Ex: “unexpected error” (“expected error???)
i Must Be Because Of Overburning
“the memory could not be read at Ox...”
> Pentru a reduce frustrarea mesajele de eroare ar trebui sa fie
4) Lew Disk Space
Fou are cunning out of dick space on DDL (Pe sh
To free space on this drwe by deleting olf or unmecessary
orientate pe modalitati de recuperare (instructiuni clare
oRpects
Files, lick here...
adresate utilizatorului)
iE a) ae, = ; Sa Ye a

(— BIBLIOGRAFIE >
Questions?
The END

QO) [Link] .pdf

U) http:/[Link]/~adriana/2013/HCI/Curs_04.ppt
Comments.
O) [Link]
294887. html
Ojections! ar
QO) [Link]
Q) [Link]
[Link]
Q) [Link]
UO) [Link]
401325 [Link]
U [Link]
O) [Link]
LI [Link]
Q) [Link]
\a [Link] yy
 24.11.2020

Modelul procesorululi uman

~ OMUL/Factorul uman (utilizatorul/persona) -

participant la interactiune si comunicare
interactiva I. Canale de intrare-iesire (Input-Output Channels)
2. Memorie si invatare (Memory and Learning)
3. legea Fitts (model de comportament
psihomotorie)

Culorile in HCI

Tratare tn cursuri
diferite
“People performing in systems have in
common that they are each somebody,
doing something, someplace”
(Bailey, 1996) Bacau’
g.11.2020
TE

introducerea studentilor in problematica;

despre factori umani relevanti pentru interactiunea om-calculator.

>» introducerea catorva noftiuni generale de utilizabilitate si diferentele

individuale care apar in utilizarea sistemelor informatice.
> prezintare unei analize mai detaliata a factorilor umani implicati in
proiectarea aplicatiilor.
> Tipurile de utilizatori umani- = - ai comunicarii_ intercative
(interactiunii)
> Perceptia umana - ca o componenta a comunicarii;

Bacau’
q 11.2020

MMEDIUL DE LUCRG

ey ~§
Relatia om-masina-mediu a devenit tot mai importanta odata cu ~ Simturi
OM
dezvoltarea tehnologiei si schimbarea conceptiei despre munca,
ymniditate

facand necesara adaptarea optima intre subsistemele componente

(subsistemul om, subsistemul masina, subsistemul mediu), prin
cercetarea factorilor tehnici in continua schimbare, dar si prin
investigarea particularitatilor fiziologice si psihologice ale
subsistemului om.
 24.11.2020

>Subsistemul om este descris prin functiille de receptie,

procesare a informatiilor si de luare a deciziilor si functia de
actiune prin care se actioneaza direct asupra masinii.

> Subsistemul masina este format din urmatoarele elemente:

OM
dispozitive de afisare si semnalizare, dispozitivele de comanda; - Particularitati
antro pometrice
- Stare psihica
- Preqgatire pro-
intre acestea doua masina realizeaza o serie de operatii. fesionala
Aptitudini

>Subsistemul mediu influenteaza functionarea sistemului prin

ASINA MEDIU
componentele sale, date de: zgomot, temperatura, umiditate,
- Elemente con-
structive - Ambianta fizica _
- Parametri tehnici - Ambian{a psihica
z economici
iabilitate
noxele toxice, iluminat, etc.

INTRARE FUNCTI ALE OMULUI IESIRE

ih

MEDIU ‘ RECEPTIE pp: LUCRARE »| |

EXTERN INFORMATII HCI - Human-Computer Interaction =studiul interactiunii
Surse de Procese Prelucrare inf, Raspunsul Rezultatele dintre utilizatori (U) si sistemele informatice (SI);
informatie luare de decizi operatorului achunil

wt | Fe | fee
senzoriale
a ay

~Stimull axtami -Auditive

-Vizuale 7 eontral -Procesare de
“Obiecte
‘Comparafi LManuira de matariale studierea & ameliorarea factorilor care influenteaza
materiale -Operare
-Evanimante -Prelucani LAcamblare echipamerta
“Alle Serizatil inforrra hi Pie
-Afigaje vizuale a utilizarea efectiva si eficienta a calculatoarelor:
Sai -Luare decizil Sal)
-Echiparmente ee

-Procese de “SUM “Ete -Carnunieare -Ermitere

mun intern de informatie informagi

a TS

rezentare schematica a functiilor omului in cadrul sistemului om-masina (in partea de jos a
figurii sunt date cateva exemple pentru fiecare)

Introducere

(persoana care incearca sa Userul (Utilizator) - un individ sau un grup de indivizi care
indeplineasca un scop) interactioneaza secvential pentru una sau mai multe parti din proces ‘i
poate fi considerat drept un sistem cognitiv care rezolva o problema sau
(ruleaza programe de_ apilicatii, cauta sa indeplineasca un task cu ajutorul calculatorului
software, Calculatorul (Computer) - orice tehnologie care poate insemna un
Calculatorul calculator desktop pana la un sistem la scara larga, un sistem de control al
(computer) o Local — cu rol de client; proceselor, un sistem integrateste sau o magina care transforma intrarile in
iesiri urmand un mecanism neliniar
o deseori la distanta- solicita
Dispozitivele sau_ stilurile de interactiune trebuie sa inlesneasca
servicii de la server;) interactiunea dintre sistemul cognitiv (userul) si masina (calculatorul);
Interactiunea * (dialog / comunicare fntre om si Dezvoltatorii de sisteme interactive trebuie sa tina cont de faptul ca si
calculator, de forma _ intrebare- utilizatorii au propriile lor dispozitive de interactiune. senzorii si sistemul
/ motor. Astfel, stimulii externi generati de calculator intra in sistemul de
raspuns)
Comunicarea reprezentare al userului iar reprezentarea interna a acestora va cauza
(interaction) reactii din partea user-ului care vor genera schimbari in mediul de lucru
(ca de exemplu miscarea mouse-lui, tastarea unor comenzi, etc.)
 24.11.2020

> Cunoscdnd modul in care utilizatorii prefera s4 organizeze — Omul / Utilizatorul (U) - psihologie
cunostinfele, proiectanfii SI pot aplica principii cognitiva - ca procesor al informatiei
asemanatoare de organizare pentru informatia care este
prezentata utilizatorilor. KS Sarcina dezvoltatorilor este de a corela procese
= Ex: atunci cand are de imprimat un document, cognitive la potentialul reprezentarilor interne ale
utilizatorul ar prefera sa activeze un scenariu al utilizatorului;
imprimarii documentelor care ar trebui sd fie acelasi > Pentru a proiecta ceva pentru cineva trebuie intelese
indiferent de aplicatia cu care a fost construit capacitatile si limitarile sale
documentul. > (U) - furnizeaza informatii despre aspecte esentiale in
interactiune: perceptia, modul de memorare a
informatiilor, procesare si rezolvare de probleme,
manipulare de obiecte reprezentate simplificat- mode

Abilitatile utilizatorilor in IOC (— Human Performance

Limitari si diferente
memory |“w, Cognitive Processor
Short Term
Memory
Production Rule
Interpreter
Modelul uman al performante1
interaction input : ‘ } “People performing in systems have in common that they are
5) toceseg So a each somebody, doing something, someplace” (Bailey, 1996)
- Memory

€)—Grecesson >
“i sual *, ae 44 4
Input *
ocular
Motor
Processor
vocal
Motor
, ee Tactile
rate dena ae Processor
__ Manual
Motor
Processor

Modelul utilizatorului: Omul: Cel mai complex dintre cele 3 elemente:

> Fiziologic
> Psihologic
" Cognitiv - Referitor la capacitatile $1 mecanismele
invatarii $1 accederii la cunostinte, la cunoastere.
Conativy - Referitor la activitate, la procesele de

vointa; volitiv. Examplu: folosirea cursor-mouse pentru:

= Emotional - Reactie afectiva de intensitate mijlocie * selectia unui icon
. . ; eR ey * scriere nume
si de durata relativ scurta, insotita adesea de
modificari in activitatile organismului, oglindind
a Tae ae ae ; Examples:
atitudinea individului fa{a de realitate; P
¢ physical context, - cum ar fi zgomotul
> Social
* social context, cum ar fi multimile sau singularitatea
 24.11.2020

limits
High jump over 8 feat
Masuri ale factorului uman Lift more than 6,200 pounds ‘Sos

Extreme
Handwrite text Type faster
7 at over than 90 words
4 80 characters per minute (“y ¥
Ee ‘ per minute
= Timp pentru a invata (Time to learn) -|

: my Loe
= Viteza de performanta (Speed of performance) c Judge more
o Lift box from “a i
than 5 brightness
g =
_-
i) levels WV
= Rata de eroare a utilizatorilor (User error rates) floor level
W that weighs oe =
more than
= Retentie dupa mult timp (Retention over time) — (cat de bine ely 100 pounds a

un utilizator poate sa-si aminteasca dupa un anumit timp) <&

z
ati fo Tapping a teleqraph key faster
—! than [Link] per minute Speak faster than 500
words per minute
= Satisfactie subiectiva (Subjective satisfaction) ‘
Very small
percentage of the Many people share
population establish the general limits
the extreme limits
De

> Card,
Model Human Processor > Moran si Canalele de I/O (Input/Output)
> Interactiunea se realizeaza prin informatiile care se primesc /
Weems se chd
transmit prin cele 3 subsisteme (Fiecare subsistem are
Viziune simplificata asupra
fi ‘

procesorul si memoria lui):

proceselor implicate in ere
interactiunea om-calculator "Dimes mc salie A. Sistemul perceptiv (preia/receptioneaza informatiile
din exterior (ex: output-ul calculatorului) prin stimuli
Informatia primita -> procesata precum vazul, auzul, atingerea, gustul, mirosul;
->transmisa spre exterior
B. Sistemul motor (controleaza actiunile motorii/fizice
prin care este tranmisa informatia calculatorului
(inputul pentru calculator) — realizata prin efectori
(degete, ochi, cap, sistem vocal)
C. Sistemul cognitiv (procesari necesare pentru
legarea celor doua sisteme perceptiv si motor);

> In IOC - Interactiunea cu mediul exterior (intrari/esiri) > Informatia stocata in memoria
Canalele I/O: = Senzoriala (2 memorii tampon (“buffe "))
© auditiva
> inputul primit de calculator = outputul userului— MISCARI
o wizuala
> outputul generat de calculator = inputul userului - STIMULI)
" De scurta durata (de lucru, un fel d¢ memorie “cache”,)
QO Inputul este preluat de simturi. Omul are 5 simturi: " De lunga durata
I. Auditiv,
> Informatia e procesata folosind:
II. Vizual,
" Gandirea
III. Tactil, Sight |
" Rezolvarea de probleme
IV. Olfactiv si
Vv. Gustativ. = Aptitudinile
Q outputul se realizeaza 5 ae " Erori...
prin actiuni motorii efectori: S > Procesoare:
| i Taste
a) degete, enses = senzorial-perceptuala;
b) ochi, = motorica;
c) cap, Touch = cognitiva;
d) sistem vocal. > Emotiile....
Smell
 24.11.2020

Parametrii Cicluri — perioada pentru...

> Similari oricdrui procesor si memorie » procesorul senzorial = t.=100 [50~200]ms
> Acesti parametrii au fost detectati in urma
; y v » procesorul motor Tm=70 =/0 [ [30~100]ms
]
experimentelor facute pe un mare numar de persoane
> Parametrul procesoarelor
. > procesorul cognitiv 1.=70[25~170]ms
¢ Perioada T
Exemplu
> se poate aplica la calculul frecventei maxime cu care poate bate
cineva la masina de scris sau la tastatura unui calculator.
Apasarea unei taste implica doua operatii: ridicarea si coborarea
degetului, adica 2x70ms=140ms_ adica aproximativ 78]
cuvinte/min. Daca se tine cont de faptul ca se pot suprapune
actiunile de tastare a mai multor litere, se obtine o valoare
medie de 156 cuvinte/min.

> ciclul de lucru al procesorului senzorial:

t,=100 [50~200]ms Us F Tm F Tc |240 [105~370]ms

Exemple: startul in sport, etc.
> exprima durata minima intre doua evenimente Human Interface Computer
senzoriale pentru a fi percepute ca distincte. .
> exemplu, perioada succedarii cadrelor intr-un film =n 1
| ?
trebuie s& fie mai mic’ de 50ms pentru ca acestea _ Human a
5 nu fie percepute distinct si astfel s4 apar& iluzia PITRE:
processing |1 Machine
oe P P ; P
miscarii. and | state
making responses ) |
I

Vizualizare clasica a'interfete1 om-masina

[Link] [Link]/mack/[Link]

[Link]. al omului interactiunea are loc in principal prin simturile (canalele

senzoriale) de intrare $i prin iesirea controlul motor al efectorilor;

Capacitatile omului de procesare a informatiei sunt limitate

luindu-se in consideratie:
I. Sensory limits (/imite senzoriale) (ce / cat pot percepe
simturile noastre)
7 thresholds (limitarile)
7 deficiencies (deficiente)
ll. Responder limits (Limitele moforii / raspunsului (atingere si
rezistenta)
lll. Cognitive processing limits (Limite de prelucrare cognitive)|
(timpul de reactie/ precizia)
¢ reaction time (timp de reactie )
¢ Speed (viteza)
¢ Accuracy (acuratefe)
¢ Estimating (estimarea) 4
¢_ Multitasking (multitasking)
 24.11.2020

Viteza/limite wpm
600 [| .
Timpul de reactie —— Citire in gand
500 Vorbire (memorized prose)
+ L- Vorbire (rep y
(repeated same 1-syllable word )
Timpul de
intarziere (ms) 400 _L
> Senzorul receptor 1-38 Stenotypist (chord keyboard)
300 7 Citire orala (prose)
> Transmiterea neuronala la creier 2-100
+ - Citire orala; (one-sy
(one-syllable words )
> Intarzieri de procesare cognitiva (creier) 70-300 200 -- ~~ _Conversatie
> Transmiterea neuronala la muschilor 10-20 + Keying (text)
> Latenta la muschi $1 timpul de activare 30-70 100 TNO yping (text)
> Total: 113-528 ota:
+ Keying (numbers ten-key keyboard)
L™ son. . .
pm = words/minute 0 X\ Scriere la mana/masina de scris

word = 5 char) Marking cards, stylus or hand punching

Sensors

er.
rp (“Intensitate’)
JE
A. vedere tf a Pragul de detectare
[Link] :
C. Gust ]S A. Luminalumanarea vazuta la 30 Km noaptea
[Link] B. Auzul Tick-aitul ceasului la 15 metri (conditii de
E. simt liniste)
F. kinestezic
[Link] C. Gust _ lingurita de zahar in 2 litri de apa
[Link]
I. vestibular D. Miros _ picatura de parfum dintr-o incapere;

Enger o albina la 1 cm de fata Sy

Limitarile auzului

B. Limitarile auzului Human voice en...)

Ear damage possible
~ Painful sound

oo lerdinne rarer
Loud thunder T.
Piano

Subway train
PRESSURE LEVEL (dB)

Truck or bus
ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABC
Average outo; loud radio r wit WT
Normal conversation | |
| i
| apeaeea ry TTT
Quiet office, household sounds L Ml
ul Ml | nH
HL ih
LEE LL MI
| EEL WT ES |
SOUND

e RRS © BERG
6 ONO © GOYA
RAS S Fees 8 EGS 2 REPRE Gse8 fae
Geo Ww OBO onud © org ® eo a . QO

ticait de un ceas, in conditii de —

. ° A e,ee V'hi

liniste la 20 de metri i Threshold of hearing Frequency (Hz) Middle C

 24.11.2020

Ill. Simtul tactil in IOC?

E. Atingerea (Simtul tactil)

> Furnizeaza informatii relevante despre mediu

> Foarte dezvoltat la persoanele cu dizabilitati

> Aparatul tactil nu este localizat— receptorul este pielea

>» 3 tipuri de receptori senzoriali:

= Termoreceptori (cald/frig)
" Receptori de presiune
= Mecanoreceptori (caldura/presiune/durere) —
importanti in HCI

> pentru a controla actiunile, avem nevoie sa

Utilizatorul are capacitati limitate de procesare a
stim pozitia parti ale corpului atat inainte, cat
informatiei, avand in vedere urmatoarele considerente:
si dupa miscari;
A. Perceptia (perception);
> furnizeaza informatii privind pozitia B. Capacitatile motorii (motor skills/capabilities)
membrelor, cat de departe s-au mutat, etc.
C. Vizual (vision);

\ /

apacitatile motorii (motor skills) - Misca

e Ex: apasarea unui buton ca raspuns la o intrebare

> poate sa se realizeze in doua moduri: e Etape:
® Stimulul este primit prin intermediul unor receptori — transmis
la creier — procesat— muschii sunt actionati
1) de jos in sus (bottom-up) — recurge la stimuli (apare * Fiecare etapa necesita timp de miscare depinde de caracteristicile
fizice ale subiectilor:
cand nu suntem familiarizati cu un obiect)
* Timp de miscare (varsta, starea de sanatate)
2) de sus in jos (top-down) — utilizeaza contextul * Timp de reactie (este foarte important in HCl) — depinde de
canalul pe care e primit stimulul (stimul auditiv — 150ms,
(utilizarea propriei experiente) stimul vizual -200 ms, stimul dureros-700ms) — combinarea
lor determina un raspuns mai rapid
°® Viteza si precizia miscarii — este extrem de importante in
proiectarea de interfete - timpul de deplasare la o
[Link] anumita tinta de pe ecran;

—— Pe
 24.11.2020

Legea lui Fitt Legea lui Fitt (psychomotor behaviour) (1954)

T= k x le | = )
Recomandare/Sugestie: Pentru actiunile / tintele
(butoanele mai des folosite) sa fie cat mai mari si
Poate prezice si calcula timpul necesar deplasarii la o tinta de distanta de deplasare pana la ele cat mai mica;
pe ecran (buton, optiune de meniu, iconita) in functie de Meniuri circulare (pie-chart de preferat, in loc de
dimensiunea tintei si distanta fata de tinta. liste, dar ocupa mult spatiu pe ecran )?
Distanta deplasata afecteaza timpul de miscare / precizia ceruta dupa
marimea tintei
T =a+blog2(D/S
+1)
T - timpul de miscare ;
k=150 msec; Recomandare: Daca meniturile sunt sub forma de liste,
D - distanta de la pozitia de start la obiectul, tinta optiunile cele mai frecvent folosite sa fie cat mai aproape de
lsc

S - dimensiunea, tintei inceputul meniului

a, b — constante determinate empiric

Timpul de miscare Dificultatea Tascului

Fitts a propus ca timpul de miscare (M7- movement time) pentru a
selecta o tinté este dependenta liniar (ID- Index of Difficulty):
Panta este in bits pe secunde (bps)
= Fitts a propus ,,ID- Index of Difficulty" pentru scopul
selectiei tascurilor:

MT or
(s) ID ID = log,( a +1) Unitatea: bits
(bits)
ID (bits) = unde
MT (s) = A este amplitudinea miscarii (amplitude of movement)
MT =a +b log ,2D/W) " W este latimea tintei (width of the target)
MT = timpul de miscare
° Coeficientii de regresie a, b depind de tipul
dispozitivului / indeminarea utilizatorului
¢ D=distanta de la start la centrul tintei;
¢ W=marimea tintei (Jatimea)

Legile lui Fitts xa oe) Exemple

mouse trackball
Task serial ws \I Ex., mouse vs. trackball |
(aka reciprocal tapping task) ee . ID
(from Fitts, 1954) =e (bits)
we “ a wy
I I l L I J
An ‘ )
a A oe ‘,
} T 1 i ' I
te, S ‘
louse rr : ;
\ be ue
* Nae! oT ‘ ackball 0 1
|}—t+>—======—t—_ +H bps
2 3 4 § 6 MT (s)
gystick = |§—+-—====|—_+—_ +H bps
Oo t 2 3 4 5 6
sre] QUChpad |
()
__s}eeestee
1 ?
j++]
3 4 5 6
yy
get oNiere sr

Dar 5
= Intelegerea si controlul altor efecte este extrem de
greu (de exemplu, invatarea, diferentele individuale,
echipamentele, procedur1) y
 24.11.2020

LegealuiMeyer 7 = 4+ B* a LegealuiHick
H

|.
—

~~’),
> a4 Pa af oge(+

Pi
)
T - Timpul de miscare T = timpul de decizie
H = entropia deciziei (masura a dezordinii)
00000 0

D - Distanta pana la, tinta

W - Latimea, tintei n = numarul de alternative de probabilitati egale
pi =probabilitatea alegerii alternativei I
A,B -Constante depinzand de tipul dispozitivului de intrare
> Estimeaza timpul de deciziei asupra urmatorului pas in executia
A -13 ms;
Sarcinii
B +108 ms;
> T depinde de cunostintele utilizatorului despre consecintele
alegerii unei alternative, si de modul in care sunt prezentate
alternativele
> Rafinament al Legii lui Fitt
> Este mai bine sa se prezinte un meniu mai larg, decdt unul
? Sugestia: Butoanele sunt mai rapide decat optiunile din meniuri
adadnc pentru ca decizia e luata in urma unei evaluari globale

(— Legea exercitiului
> C. Vizual (vision) - Vederea;
>» Activitate complexa cu limitari fizice si perceptuale cum ar fi:
(The power law of practice)
= anumite obiecte sa nu poat fi vazute;
> estimarea timpului de executie a unei sarcini — metoda
alternativa de exprimare a timpului de executie (tine seama de = capacitatile interpretative ale procesorului vizual permit
nivelul de expertiza al utilizatorului)
constructia de imagini din informatii incomplete —
> timpul de executie al unei sarcini scade exponential cu
numarul de incercari efectuate: compensarea, dar poate sa fie $i iluzii;

=" Contextul este foarte important in interpretarea imaginilor

Tt, =I, *«n 7,a~04
, unde: > Sursa primara de informare pentru majoritatea persoanelor;
Tn = timpul de executie a unei sarcini dupa n executii
> Se realizeaza in doua etape:
T1 = timpul de executie a unei sarcini la prima incercare
n = numarul de executii; 1. Perceptia fizica;

2. Procesarea si interpretare;
|=

II. Vazul
Structura aparatului vizual (ochiul uman) si modalitatile de procesare A. Spectru vizibil (vedere)

vizuala a imaginil: WAWELENGTH IN METERS

8
mo“ ww a” wt we of WwW 1 107 10° 10° 10
i j l L j l L | j l

| GAMMA ULTRA ||) yee RADIO WAVES + FM A

en xaays | viocet|| INFRARED | pagan | TELEVISION*SHORT
WAVE | cipurrs
. RAYS . BROADCAST BANDS
ra

Z Ae
> proprietatile fizice ale ochiului si constructia sistemului ce ~
a ole
Ed ~
ae we:

vizual — exista lucruri care nu pot fi vazute de oameni ag VISIBLE SPECTRUM

a
a,

> proprietati interpretative care permit construirea unei

YELLOW ORANGE RED
J i

imagini din informatii incomplete 400 500 600 700

WAVELENGTH IN NANOMETERS
ee a et Eel

ee eee
 24.11.2020

Canale intrare-iesire. Vederea

L) Este important sa intelegem proprietatile si limitarile perceptiei
> este o activitate extrem de complexd, cu o serie de limitari fizice gi
vizuale pentru a obtine o interfata eficienta (utilizabila):
perceptuale.
> este principala sursaé de informatie pentru oameni: 75% dintre > Camp de vedere de 180°;
informatiile colectate si prelucrate sunt vizuale.
> Dimensiunea si adancimea (unghiul vizual, stereoscopia,
Perceptia vizuala se realizeaza in doua etape: cunostintele)
I. Receptarea fizica a stimulilor - ochiul recepteaza lumina, aceasta
este proiectata pe retina si este tradusa in semnale (se transforma in > Culoare (nuantaé, intensitate, saturatic), orbire colorata;
energie electrica) care alcatuiesc o schita primara ce este transmisa viziunea umana este mai putin sensibila la culori, dar mai
creierului sensibila la miscare
2. Procesarea si interpretarea acestora
The Human Eye > Luminozitate (luminanta, contrast)
Cornea a 4 f pa,
retina epiteliala sau pigmentata + retina neuronala — i
nervul optic:
* chiasma optica — centrul optic din creser Pupil
Lens
= Lumina — comeca — corpul apos — deschiderea
wmisului — pupila lentila crnstalinul — corpul vitros

Simtul vizual in IOC?

(— Sistemul vizual -— exemple iluzii )
Sistemul perceptiv nu este intotdeauna o sursa sigura de
informare, de exemplu: Iuziile optice - (lucrurile nu sunt
intocami asa cum le vedem); omul judeca dimensiunea dupa
fundalul acesteia ;
uzia Ponzo - compensarea

Iluzia Ponzo

Iluziile Gestalt Psychology

[Link] [Link]/ch04_senses/gestalt_psychology.html
Modul in care sunt compuse figurile geometrice afecteaza modul
in care le percepem;
Figurile geometrice nu sunt percepute asa cum sunt desenate —
tendinta este de a percepe marit liniile orizontale si de a percepe
redus liniile verticale (un patrat trebui desenat ca dreptunghi
pentru a-l vedea patrat)
Liniile desenate orizontal par mai subtiri decat cele verticale;
Simetria paginilor este afectata de iluziile optice — percepem
centrul paginii mai sus decat centrul fizic, de aceea o pagina
aranjata in jurul centrului fizic va parea ca e asezata mai jos —
centrul optic Femeie batrana sau una tanara?

10
 24.11.2020

Sistemul vizual - compensarea ‘B’

Cercurile intermediare indicate prin
sageti in cele doud imagini au
exact aceiasi culoare, dar par diferite.

Puncte negre par ca sclipesc in

intersectiile (crucile) albe.

68.
Iluzia Muller-Lyer Iluzia Ehrenstein
Iluzia Fick

>

2 aan

a
Cele doua linii (verticala gi Laturile patratului par a fi curbate
orizontala) au aceiasi lungime cand se afla situat deasupra unor
Care linie pare a fi mai lunga?. cercuri concentrice.

aceeasi dimensiune [Link]

umarati barele in partea stanga si in partea dreapta a imaginii Uitati-va cu atentie s1 observati daca
se invarte cevacare atentia este fixa.
a
I
LP IA

11
 24.11.2020

Ce vedeti daca priviti atent

acesta poza.?

copiii vor vedea 9 delfini!

Ce vedeti? O spirala, sau tot cercuri?

L) Consecinte a ceea ce putem vedea Fy IV. Simtul olfactiv in IOC?

> Miscarea va fi intotdeauna vizibila si va distrage atentia,

oriunde in campul vizual
>» Culorile — avantajul este punerea in evidenta a unor aspecte,
dar multe dezavantaje.
> Forma este extrem de importanta in recunoasterea textului:
folosirea CAPS-ului este nerecomandata
> Limitari referitoare la rezolutie (Rezolutie marita numai in
zone mici in care atentia este fixata)

12
 24.11.2020

7 Citirea
S
Perceptia si procesarea textului — caz special

Etape:
Perceptia sablonului cuvantului
Decodificarea sablonului pe baza reprezentarii interne a
limbajului

Cuvintele nu sunt citite caracter cu caracter — un cuvant e

perceput la fel de repede ca si un caracter — pe baza
formei cuvantului

Prin inlaturarea indictilor legate de forma cuvintelor (modificand

\ literele mici in litere mari) — scade acuratetea si viteza de citire

Citirea
Citirea

Experimental, s-a determinat ca textele cel mai bine citite sunt

Citirea de texte este un caz particular al perceptiei vizuale, un caz
cele cu /ungime de maxim 12cm avand caractere de 9-12 pt.
extrem de important avand in vedere volumul mare de
Observatie. Citirea pe ecran este mai lenta decdt citirea de pe o
informatie care este transmis prin intermediul textelor.
foaie de hartie datorita unor factori ca lungimea liniei,
Perceptia unui text cuprinde urmatoarele etape:
orientarea, familiarizarea cu mediul.
>perceptia modelului unui cuvant
Interfetele textuale trebuie sa asigure un cadru optim pentru citire:
>Decodificarea referintei catre reprezentarea interna un contrast negativ (text de culoare inchisa pe culoare
>Analiza sintactica si semantica a textului; deschisa) creste acuitatea vizuala.
> In timpul citirii se produc migcari ale ochilor urmate de fixarea
privirii — perceptia textului care ocupa peste 90% din timpul in Philosophie == yee MB ae l=eeseiplel=
care se face citirea. Naturalis Principia eye) a) UL)
Mathematica Dl-ty-) at Desert
>» Miscarea ochiului inainte si inapoi se numeste regresie. Cu cat
textul este mai complex cu atat vor fi mai multe regresii. Bad Good 7

Exemplu

Pe bzaa uonr sudii a ueni universitati egzlene, nu are Omul ca procesor al informatie!
inportanta in ce ordinrr satu liertele itnr-un cvunat.
Imatpornt etse ca pmria si umtlia lireta sa fie la Icoul
pitovrit. Rtseul leilretor pot sta in ocire odrnie si Pe bZaa U Nr sUDt auEni UVeTSniaRITie ZLE e.,...
tustoi ptoi ctii. Atsa e psboiil prnteu ca noi ctiim
cunelvite irngtei si nu letira cu Itirea. CR3S13RUL UMAN 3 C4P4B1L DS

LUCRUR1 1MP051B1L3! D4C4 POT1

The quick brown ’ C1T1

C3 NU
4574,

4U
35T1

N1C1
UNUL

O PROBL3M4
DIN C31

1N
R3SCUNO45T3R34 ORIC4RU1
Sistemul vizual fox jumps over the
Gla Ae el ek

Cuvintele cunoscute sunt recunoscute pe baza , deci se poate

the lazy dog. tolera si o forma care nu coincide cu cea corecta.

13
 24.11.2020

4C357 M354J D3MON57R3424 C4 MiIN73A

NO457R4 E573 C4P4B1L4 D3 LUCRUR1
3X7R40RD1N4R3! 4B50LU7 1MPR3510N4N73! Citirea
L4 1NC3PU7 A FO57 M41 GR3U, D4R 4CUM,
M1IN73A 74 INC3P3 54 C17345C4 4U70M4T,
FAR4 54 M41 GAND345C4. P071 5473
M4NDR3571! NU 7071 04M3N11 PO7 C171 © ee
73X7UL 4574. —— “i
D157R1BU13 D4C4 41 PU7U7 C171 1! — eo ———___ nice!

Daca 0 poti citi esti un GENIU.

Citirea

Heading
Heading

White text on headings, tithes and labels can make them brighter,
sharper and more vibrant without hurting the user's eyed.

This OK but boring

serif fonts sans serif fonts

Ue Times New Roman _| Arial
This is ubso OK petting. Sonlidedles Georgia Verdana
ae ———— Times New Roman Arial
oil i LL Georgia Verdana Y
Rich and Regal Enlightened and Healthy

Business-like and Stabbe

Font vs. Typeface

Wart Dfenep
> Diferenta este evidenta daca ne gandim la tiparirea traditionala
= Exemplu de typeface: Cambria & DOWNLOAD

=» Exemplu de font: bold Cambria 24pt

> fonturile similare ca aspect (dar diferite ca marime si

sketch:+) tockwell
”
caracteristici consitituie un typeface)
>
& DOWNLOAD
>In lumea digitala se refera la modul de reprezentare a
simbolurilor
> Fonturile sunt descrise in forma vectoriala pentru a permite Re: | Sah |
randarea independent de marime si rezolutie FONT A VSe - A TE “4
> Fonturile TrueType, standard dezvoltat de Apple si Microsoft
permit afisarea caracterelor pe ecran si imprimanta in forma
WYSIWYG http: / /[Link]/

14
 24.11.2020

Dimensiunea unui typeface (Nu toate sunt create la fel)

Dimensiune font: =" Proportional - respecta faptul ca unele litere ocupa mai mult spatiu pe
ascent ascender height
orizontala
= Monospace — ocupa acelati spatiu pe orizontala

Proportional
cap height

mean
Nea line
lire f mediaan x-height

descent
baseline

descender height
Monospace
= Toate fonturile de mai jos sunt de 12pt. Ele difera prin caracteristicile de
PORMIRE
proportionalitate (ascent, descent, ...)
Calibn (Corp) ‘fu =] a fae
This This Tw This This [his This This This ‘This
BF U = ele wow Gy UF
4LL THE ABOVE ARE IN 14-POINT TEXT, THOUGH THI LINE 6 10 POINT
-
Desenpbor de ternmabe

Clic pentru editare This is 12-point text in font

This is 12-point text in font
Anal
Avant Garde
Ths i CE pal tl i Mal ee
Thos os. | 24po1nt text on font Times New Roman

* Clic pentru editare stiluri te» his is 12-point text in font: Miller Text Roman

* Al doilea nivel
This is 12-point text in font Cronos Pro
* Al treilea nivel This is 12-point text in font: Comic Sans
* Al patrulea nivel This is 12-point text in font: Verdana
> Alcincilea nivel http:/ ‘[Link],
wiki / Typeface [his is 12-point text in font Adobe Caslon Pro
TH I@ 10-POINT TEXT IN FONT WEBLETTERER PRC

Serif versus Sans-Serif e conteaza de fapt - PPI (pixels per inch) PT Te TT

= Cate puncte de rezolutie pot fi = "7
desenate pe un inch ( 25.4mm) cl -
AaBb C (C Saittont Versiunile traditionale Windows erau 7 7
setate pe 96 PPI, in timp ce OS X utiliza [EU TT
AaBbCc 72 PPI (corespondenta cu standardele de
tT ee

tipar)
http: [Link] ‘wiki /Serit
Avantajele fonturilor serif Problema era datorata randarii corecte a
Ghideaza fluxul orizontal al ochilor in timpul citirii
fonturilor pe displayurile vremii
VVVVVV

Creste spatierea dintre litere si cuvinte sprijinind lizibilitatea

Sporeste contrastul si diferentele dintre litere usurand identificarea
Leaga caracterele in cuvinte intregi (sporeste coeziunea)
Sunt preferate de catre cititori
Sans serif sporeste oboseala
Avantajele fonturilor sans serif
> Sans serif sunt mai potrivite pentru paginile web (in functie de rezolutie, serifurile sunt
greu de reprodus)
> Sunt preferabile in cazul copiilor care invata sa citeasca (mai usor de recunoscut)
> La dimensiuni mici ale fonturilor sunt mai usor lizibile

Cum se poate imbunatati afisarea textulul pe ecran? Studiu de caz - Verdana vs. Calibri
m Rasterizare simpla a Verdana

Sample
sample @ Introdus de Microsoft in 1996
gw Destinat pentru a afisa informatii pe ecranele vremii
(monitoare 14" CRT, 60 PPI)
g Textul ramane lizibil la marime de 3 pixeli
a Calibri
w Introdus de Microsoft in 2007
» Rasterizare cu antialiasing general gs Destinat pentru a afisa informatii pe ecrane LCD cu
anti-aliasing (Clear Type)

sample
sample
gw Ocupa mai putin spatiu ca Verdana

The quick brown fox jumped in Verdana 28 px

The quick brown fox jumped in Calibri 28 px

» Rasterizare cu antialiasing la nivel de subpixel pentru

oni = Wardaaa Das

ecrane LCD cu matrice RGB > Tehnologia ClearType, implementarea Microsoft a anti-aliasingului folosind randare la nivel
de subpixel

sample
sample
> Se bazeaza pe cunoasterea aranjamentului de subpixeli red, green blue din cadrul monitorului
> Acestia pot fi controlati individual prin afisarea culorii rosii, verzi sau albastre pentru un pixel,
sau a unei combinatii
> Detalii despre ClearType in Windows 7

15
 24.11.2020

PS ” Omul ca procesor al informatiei

e e o

—
iste | Lot ——

ee a procesor al informatie a
Mixteeritatna
te poliahwscn brea EP Ewe ent || Useveritatn. * | | Burs rnertea Babar - Bebe -

x Picesen = Picken Comet + Fl Steet

Th Unreeritited Baleg-Gotyi, Clu-aapoca

© Unwersrrates POLMTEHNICA Ren let
hee Se ig Sle fel UE BEd =i fea

} DESPRE WEB

SOUR BEHOOES
ACT Eke
OTe es |
Adriane Licata © Stee de boarhas b STRUCT

+ Adreiere Maier + Seal de repsiera = f PROMEEC E

Aleve Cees oS de doe } CEADETARE

© Feed Peeidactorgie SPOOR

© Siete Paria fe REL ATH IMTIE RMA THIRALE

) BOTERRA DORAL STUDENTS

} COMUMTATE
Cr ia
Ds OTT
Se ee

ihe Bats Pompe ee a oem ie a oy Pe ae ab et)

Ewenl ard Stiri Fevivitates

de Absolvire 2011
Untvernebes: POLETEHASCA, Gio Bacereet Unsere POLITEHASCE, ie Becuret

[Link] Pee EA Ded TEE Ea

COMIRITATER
6. IM! DBE

— Omul
¢a procesor al informatici ye —_ » @ par ih
aaa fy Omul ca procesor al informatie ° s ©»
aaes ae

Pf urwvamsiatna
chy - Cladterm Gio, Urevenrintea
cle Macks ai _ © PB reraretatna ins Chutarn of) Hamme Urevermnates Aleman) Uvwerniates Tobrocd “Lh |e om
ni Beran © (Sekt x Etomet 7 Bi ance

inforatii pentru Universitatea Tehnica “Gheorghe Asachi” din lagi

i
sate Vy
, 1 Fagin por aid

: : i
dene 1} cs
= " i Pracumuran Joasuretics . Lienersdaiad Tehied din lag - o mee cul Gere atechaepi da beea Gare dao hdd ob iiigere 6 con i dorerel

ate OKT mere Cele umspesnece fowl ale ueveratita reomive. dotale cu isoorainas i schepamente de ule) ord, op oad Ip
— :
‘a é C4 dang
cath acltaee spacebar af pa FR europe
yi demand, und poeple svi rere
yi di apes
in Grol pe coe a
- ™ i AL beer 3) aes Seet comin ob Giplore J de by eeeerniigiea noasted
ea deser cheg succesul abl fe coned cil pin aap perseaal wines
:
a ii r | , ,
' =
cobaae - Vi agteplim, denne ail fr al Ge vee de induth
ce ob es urvereigies coos!
~.a,
4 ba = Fecha 7 Prof, ani,
dr, ing. fine GL ee .
Ficectorel Unheareinh] Tehmice “Ghoangic Aochi” din lap
P Ti i Fuecaliad

Dnformati despre " : i = Cecucerarts ig 2

ea
febrecaiioks mn
PUR P ails ae 1 ayag , ; See eaten
iret .
Bicentenarul Universitatii es Tehnice
; “Gheorghe Asachi"nar din lagi . Leghiu catra
acces Natoeal pagin Elecronc
sachs ty Litera
Pecultutea de Medicis cs " carte 3 = i = tal
Pubic ee Cp oe
poultates de Farnacie eae: davies di, Unewadaled Take
+ 5 es ‘i ts oe & fetes oat i ghee Ach din La peri pared DD
Facuitaten de Hedsriny Nowtati / Anunturi & Gi) Aaheva toatl 2 ‘Conaiiiudl WRACIS,
in gadhinga dia (4 full 2M,
@ acocdar Uatearsinigl Tehalce Ghoargie Asachi” din ba, in unm ava beal 007 : =
derdaee sdnretupe insstotionale,
gies cid icat de nce = Al Thlea Sivpezion de Isiora bratarastule

er 1” SHndelor Ceaeore ce iam, 17 fern 20717

= cer = Tua Profasoder Sasori Di . & Mosenbrs
aut
neater Ley 20LE | Pend i ties » Weaieazaed echutibder padi pedal role
arin char corinne tik
REDEN + Aliprteriee Urevatilates Tebreca “Gheorghe
bis Agach? din lai a COMPRECO
aie re CAAT - bores de toe
jo aekea 2c, Bnd | Detect intereepess! oo depray beprotioral Pah Frege in dpi “7 3 Cichoerbs
r : >
Olena heteks —~ Herebetene! Pairs opt Fie nai ia
Der. BI | [eetwte de eee contreote grantor cusienteni - apne
da (hpnutnry yfthe Evanarenle
a a.

(— Sugestii de prezentare J > Ch a wees

SCALE Eta

For font's sake,

etm elem alse) =)f- eo
> Observatie. Textele cu dimensiuni foarte mari trebuie sa aiba culori potrivite, care sa nu
deranjeze datorita marimii pe care o au caracterele acestora.

Sugestie. Se recomanda folosirea unui singur font tntr-un document

(chiar daca acesta se intinde pe mai multe pagini), eventual textele
putand avea dimensiuni diferite. De asemenea se recomanda
\\ evidentierea prin subliniere, boldare sau scriere italicd. > Se considera ca textele scrise cu fonturi rotunjite apar ca fiind mai “prietenoase” decat daca
ar fi scrise cu fonturi ascutite, cele scrise cu fonturi care imita scrisul de mana sugereaza o
notd elegantdé, sofisticatd.

16
 24.11.2020

Sugestii de prezentare a Sugestii de prezentare J

keep it Pe
> Textele cu impact vizual maxim (ca si culoare, dimensiune, efecte speciale) trebuie sd Dont [Link] ex Silas and ps
contind cele mai importante mesaje, ideile de bazd ale discursului continutin document. Someot t Heb st design [Link] the most simple

WONDERFUL WHITE SPACE

“simplicity is the ultimate sophistication”

> Tntr-un document trebuie asigurata “aerisierea” ideilor sau paragrafelor pentru a asigura
usurinta in citire.

_Personalitate

VI. Accesibilitate in HCI Sex: Ce jocuri le plac femeilor? Pac-man, Donkey Kong, Tetris
= De ce? (lpoteze: coloane sonore mai putin violente, mai linistite,
terenuri de joc pe deplin vizibile, culori mai moi, personalitate,
inchidere/ completitudine) \Seuat
Putem masura asta?

U) Produsele exclud utilizatorii in mod inutil Stil, ritm, invatare vizuala/audio, date dense/rare, de sus in jos / jos
in sus;
>» Cresterea accesibilitatii si utilizabilitatii a
Fara o simpla taxonomie a tipurilor de personalitate ale
produselor/sistemelor informatice interactive presupune utilizatorului . Ex. Indicatorul de tip Myers-Briggs
folosirea lor de oricine, indiferent de: = Extrovert vs. Introvert _
= Simtire vs. Intuitie
puncte tari / puncte slabe; = Perceptiv vs. Judecare — se
¢ nivelul de expertiza; # Sentiment vs gandire
Legatura slaba intre tipurile de personaiitate si interfete
¢ Handicap; Lpersonalitatea utilizatorului este importanta!

Diferente interindividuale si interculturale > Conditiile speciale in care se pot afla utilizatorii sunt de asemenea
"mu Proiectantul SI trebuie sa inteleaga diferentele dintre utilizatori pentru surse de variabilitate pe care proiectantii le iau in considerare.
Waaca putea proiecta un produs care sa se potriveasca unei mase largi de Utilizatorii se pot afla in incapacitate de miscare, cu capacitati
Wee Utilizatori sau versiuni diferite ale produsului pentru utilizatori cu nevoi limitate ale vederii si auzului sau chiar cu disabilitati de natura
PS si caracteristici diferite cognitiva. O categorie aparte este cea a utilizatorilor in varsta care
(Shneiderman 1998). intampina probleme de genul urmator: scaderea acuitafii vizuale si
= Ex, tastatura este construita pentru a putea fi utilizataé de cat mai auditive, diminuarea fortei si rapiditapii raspunsurilor motorii,
multi utilizatori. Totusi persoanele cu dimensiuni exceptionale ale
mainilor si degetelor (foarte mari sau foarte mici) au probleme in
dificultatilor de achizitie a deprinderilor mentale complexe. Masurile
folosirea tastaturii standard, dar astfel de persoane sunt foarte rare. In
care pot fi luate de proiectanfi pentru a veni in intampinarea nevoilor
schimb, in ceea ce priveste stralucirea ecranului este mult mai dificil
persoanelor varstnice includ: mdrirea dimensiunilor textelor afisate,
de creat un standard dar este posibil sa se puna la dispozitia
cresterea contrastului ecranului, periferice de control al interfefei
utilizatorului un mecanism de ajustare a straluciril.
mai usor de utilizat si limbaje de comanda simple.
=AaSenzatiile si perceptiile pot fi de asemenea surse ale diferentelor
eg individuale. Unii oameni nu pot distinge culorile in general sau doar > Sistemul cognitiv este cea mai importanta cauza a
“eyanumite culori. Acuitatea perceperii detaliilor, distanta optima sau diferentelor interindividuale intre utilizatori. Utilizatorii se
Fay perceptia miscarii sunt alte caracteristici care pot diferentia utilizatori. pot diferentia pe baza memoriei, atenfiei, raftionamentului,
Alte modalitati senzoriale (tactul, auzul) pot fi de asemenea importante.

17
 24.11.2020

Diferentele culturale reprezinta aspecte foarte importante Diversitatea culturala si Internationalizarea

= Ex. succesiunea textului pe ecran poate fi optima pe orizontala
(stanga-dreapta versus dreapta-stanga) sau pe verticala in functie de ¢ Limba
cultura in care a fost educat utilizatorul. Limbajul este puternic ¢ Conventii data
/ ora
influentat cultural si utilizatorii pot fi foarte sensibili la folosirea ¢ Greutati si masuri
termenilor in interactiune. De exemplu, folosirea cuvantului ,,abort’” ¢ De la stanga la dreapta
in interfata poate indeparta utilizatorii de gen feminin (Shneiderman ¢ Numere de telefon si adrese
1998). Cuvantul ,,cool’ poate avea conotatii diferite pentru un ¢ Nume, titluri, salutari
vorbitor nativ de englez4 si pentru un utilizator care nu cunoaste * SSN, ID, pasaport
decat limba engleza oficiala. ¢ Icoane, butoane, culori
= Ex. Culoare Rosie (semnificatie): ¢ Etichete
e Africa de Sud: culoarea doliului
China: noroc, adunare, celebrare, nunti
India: puritate, simbol al razboinicului
Indienii Cherokees: succes, triumf
Japonia: alaturi de alb, culoare a norocului
Occident: excitare, pericol, dragoste, pasiune, stop,
Craciun, fericire
e Orient: culoarea purtata de mirese:

Diferente culturale - culori Concluzie

Ma > Aplicarea principiilor derivate din studiul factorilor umani este utild
= po

- pentru proiectarea interfetelor prin:

" reducerea ratelor de eroare,
= scdderea duratei si a costurilor instruirii,
" cresterea ratei de acceptare a sistemului de catre utilizator etc.
> Au fost prezentate elemente introductive ale domentului factorilor
umani in interactiunea om-calculator.
m@ > Aplicarea principiilor derivate din studiul factorilor umani s-a
dovedit utila pentru proiectarea interfetelor prin: reducerea ratelor
de eroare, scdderea duratei si a costurilor instruirii, cresterea ratei
3 §=6de acceptare a sistemului de catre utilizator etc.
Sistem de a) > in viitor, noile spatii informationale vor fi generate in mod dinamic
mail in accord cu modelele utilizatorului. Accentul se va deplasa $i mai
utilizat in mult de la sistemele informatice catre nevoile si caracteristicile
6 tari??? utilizatorilor. Va fi necesara culegerea automata a datelor
utilizator in mod neintrusiv, iar colaborarea dintre protec
specialistii in JOC va devent cruciald

(— Bibliografie / referinte \

1. Alan Dix, Janet Finlay, Gregory D Abowd, Russell Beale - Human-Computer

Interaction, Prentice Hall, third edition, 2004
2. [Link] sau Curs_02.ppt
3. [Link]
4. [Link]
5. [Link]
utilizabilitatea-presentation
6. [Link]
[Link]
7. [Link]
8. Accesibilitatea si semnificatia culorilor
[Link]
. [Link]
html
10. Instrumente care verifica vizibilitatea unor pagini web pentru persoanele cu deficiente
de vedere [Link]
\U. Bailey, RW; Designing high quality, pro essional user interfaces for computer, Va multumesc pentru atentie!
ms te ob. 4 3}
PIUaaet, “Pp » UME SYOLEMS . \u a dil, U Ul 3 U

18
 14.12.2020

7 =
i Universitatea ”’Vasile Alecsandri” din BACAU 14
Sees Departamentul E.S.C. sone Cuprins
“Simple things should be simple.
. . v Complex things should be possible.”
Identitatea vizuala Identitate vizuala Alan Kay
— : : A. Numele
Reputatia interfetei (programulul) si instalarea B. Simbolurile (metaforice sau idiomice)
C. sigla ori pictogramele
wa D. Scheme de culori
va E. Corpul de litera (fontul)
nm F. Texturile
UW G. Dependentele interfetei

Bw "Testing can show the presense of bugs, but not their Reputatia programului
absence." E. Dijkstra
“Do not answer a fool according to his folly, or you will Instalarea aplicatiei/programului
be like him yourself.”
Proverbs 26:4 Optimizate prin AERO

(Authentic, Energetic, Reflective and ,

14.12.2020 2

Identitatea Vizuala:

> Totalitatea cailor prin care organizatia se prezinta pe sine reprezinta

identitatea acesteia
> Ceea ce percep diferitele categorii de utilizatori se numeste
“Adding features does not necessarily increase functionality: it just imagine
makes the manuals thicker." fortune § . . oo . . .
> ,,[dentitatea poate proiecta patru lucruri: cine esti, ce faci, cum faci

ldentitatea unui produs (software) este

-
; rei sé ajungi” (Wally
i unde vrei sa ajungi” (Wally Ollins
Ol nsy
> este un sistem de reguli si recomandari de aplicare si dezvoltare a
reflectata de interfata sa cu utilizatorul (Ul) elementelor vizuale fundamentale ale marcii: semnatura vizuala
; ; ; (logo + logotip + slogan), culori, fonturi, atitudine vizuala si ton.
® A) identitatea $l Imaginea Scopul acestui sistem este de a asigura coerenta, stabilitatea si
. oe dezvoltarea armonioasa in timp a imaginii marci.
e B) Managementul identitatii > Sistemul de identitate vizuald este in general sintetizat intr-un
manual de identitate a marcii, elementele vizuale fundamentale
\ / (diferitele versiuni permise ale semnaturii vizuale, fonturi, etc.) si
alte aplicatii fiind livrate pe CD (impreuna cu manualul in format
PDF).

UL Un sistem de identitate vizuala cuprinde urmatoarele 3 sectiuni A) Identitatea si Imaginea

dezvoltate SUCCESIV- . . ; “You've got three seconds to impress me. Three seconds to connect
° semnatura vizuala + reguli de aplicare with me, to make me fall in Love with your product.” (Kevin Roberts,
e icatii . ws . oo. - oe . L k:
aplicatt de utili ie Totalitatea cailor prin care o organizatie se prezinta pe sine repreania
exemple ce ulnizate COrecta . - oo | identitatea acesteia. Ceea ce percep diferitele categorii de utilizatori se
UL) Dezvoltarea intregului sistem de identitate vizuala are la baza . . . . . . . . »
eS . ote . - numeste imagine. Diferenta dintre identitate $1 imagine este aceea ca
= documentul de definire a marcii $i urmareste s4 implementeze - . . . n . . .
. . ws prin identitate o organizatie se regaseste in fata publicului sau prin
= vizual concluziile acestui document. Sunt urmirite: ; wept es . . uw ns
N es anumite modalitati, iar 1maginea reprezintaé modul in care publicul
5 » formarea elementelor fundamentale de reprezentare a marcii . , dusele/ ‘iil ta |
2 (semnaturad vizuala, culori, fonturi, etc.) astfel incdt acestea sa petcepe acea organizafie (ori produsele/serviciile pe care aceasta le
= asigure: pune la dispozitic). | "7gentitatea poate proiecta patru lucruri: cine esti,
= =" exprimarea personalitatii marcii (valori, atribute, asociatii) Deci: ce faci, cum faci $i unde vrei sa ajungi." (Wally Ollins)
S = asigurarea recunoasterii vizuale facile si memorabilitatea ei Identitate = totalitatea mijloacelor prin care o organizatie
- la nivelul publicului tintd (aplicatie, persoana) se prezinta pe sine
" diferentierea pozitiva faba de competitie Imagine = ceea ce percep diferitele categorii de utilizatori
> stabilirea imaginii coerente si corecte a marcii prin aplicatii gi despre organizatie (aplicatie, persoana)
exemple de aplicare corecta a identitatii vizuale Identitate # imagine
> coordonarea intregii comunicari vizuale specifice companiei Intr-o lume a concurentei, produsele, serviciile,
(marcit) organizatiile, persoanele se disting prin identitate
 14.12.2020

B) Managementul identitatii > Scop: asigurarea unei identitati consistente

"Identitatea poate proiecta patru lucruri: cine esti, ce faci, cum faci
gi unde vrei sa ajungi." (Wally Ollins)

> Mijloace de asigurare

a identitatii viz
LJ administrarea explicita a tuturor mijloacelor prin care auoace g t
organizatia se prezinta — explicit sau nu — audientelor [Link]
sale; . ,
> compania, organizatia , programul intentioneaza si se promoveze [Link] (metaforice sau
pe_sine, sd-si_exprime_caracteristicile, valorile, conceptiile, idiomice)
personalitatea. [Link] ori pictogramele
[Link] de culori
[Link] de litera (fontul)
L) Modul de comunicare al organizatiei cu personalul/publicul F. Texturile
poate fi: [Link] interfetei
>» Traditional - Carti de vizita, brosuri, calendare,...
>» Bazat pe mijloace electronice - Situl Web al companiei;
Sub-situl dedicat unui produs/serviciu > Constituirea branding-ului on-line
Nota: Trebuie sa se tina cont de audienta

1-4
sense and simplicity A. Numele » XEROX. | B. Simbolurle >

> Numele unuia/mai multi indivizi (fondatorii) Philips, Hewlett- la fel ca gi numele, pot fi si mai Se
Packard, Norton Utilities, Kai's PowerTools, [Link] sugestive. Simbolurile reflecta sigla Ae 6
>» Un termen ori set de termeni descriptiv British Airways, Word, (logo-ul) companiei/produsului si :
> naebniien P si multi to wenn comunices €.FO multimea pictogramelor elementelor Qe
revierea mai multi termeni Conoco, Vmware , er vet _
> Initialele unor cuvinte /BM, MSDN, [Link], [Link] Be con ul _proarannulet Seopa a a
> Numele sunt concepute sa arate si sa “sune” intr-un mod unic & .; os : % S
atractiv Xerox, Nokia, [Link] esential al unui simbol este acela de = &
> Reprezinta concepte, oferind o impresie privitoare la scopul a expune —_utilizatorului —ideea . Bie
urmarit Jaguar, PartitionMagic, Nero Burning ROM; centrala a organizatiei/produsului, 7 —_——
> Trebuie s& fie similar cu sau s@ intre in componenta numelui prin intermediul unui stil concis, ie ad
domeniului Internet alocat sitului companiei/produsului “Batalia” puternic si direct. ”
numelor de domenii [Link]; [Link]; [Link] Simbolurile actioneaza ca & Sr
> Schimbarea numelui conduce la dificultati in desfasurarea declansatori vizuali in producerea a & 4 ea
programelor de identitate: Poate sugera Oo unei succesiuni de idei in minte, ‘ -"
imbunatatire/alternativa la alt nume de marca Ex: Torrent intr-un mod mult mai eficient si a Ge @ 5
—Avalanche, eMule eDonkey rapid decat cuvintele.
qe Dy

Metafore: Metafora (din : metapherin) este o prin

>. dispozitiv
sq: .
conceptual
A
pentru
.
a rationa: despre: actiunile
.
umane.
sas
see
ot Interface
care. se. trece de. la sensul
.
obisnuitwe al unui
a
cuvant la alt sens,
> utilizate intens in proiectarea si descrierea interactiunii ccaber prin intermediul unei comparatii subintelese. Procesul de
umane cu computerul. P
> pot aborda text, expresie verbald, imagisticd, sunet si gesturi, for Software realizare a metaforei consta in "punerea semnului identitatii
intre doua obiecte diferite (lucruri, fiinte, persoane) prin
et Boagenor
ing dpe

> potrivirea entitétilor si operatiunilor dintre domeniul

interactiunii $i domeniul aplicatiei digitale,
= o metafora implica multe elemente ale modelului pentru un Gieeth Kore
numele lor, pe baza unei analogii".
utilizator care este familiarizat cu obiectul metaforic (de Figura de stil/trop prin care se trece de la semnificatia
exemplu, un desktop fizic).
= in general, un model necesité mai multé invatare cu ajutorul
obisnuita a unui cuvant (expresie), la o alta semnificatie, pe
metaforelor pe care utilizatorii fl pot ancora la experienta lor care cuvantul (expresia) nu o poate avea, decat in virtutea unei
anterioara.
(@) Clock
analogii, fara unificarea totala de sens. Transferul conduce la
imagini artistice, inedite si implica, adesea, termeni distincti ca
inteles ori chiar aflati in opozitie: concret - abstract.

e metafora biroului (desktop-ului) - oficiu, figete, dosare, cos de gunoi

(Macintosh, Windows, Motif etc.);
© metafora strazii - cladiri, strazi, magazine (MagiCap);
e metafora caminului (home) - camere, mobila, obiecte componente
(Microsoft Bob).
 14.12.2020

Metaforele si idiomurile folosite de:

ees)
ST A
7 A 10080 12:27 PM
ACROBAT PAD PHOTOSHOP ILLUSTRATOR = INDESIGN =| PREMIERE PRO
SEARCH La

GRAPHICS SUITE
Div Lr BAe fn)
DREAMWEAVER LIGHTROOM AFTER EFFECTS © AMIMATE BRIDGE

Puc hae Creative Suite:

saa come

suscseee le i
irl

a. Office 2019

= <P gC BE
PowerPoint — Chilnok: Pieter wo] a fcr prc

eee tt)

Utilizarea metaforelor si idiomurilor in cadrul

~ he (S) > C3 0 | i ; PP us. pe. meniurilor (Adobe & Android)
Eur nan Serer Skype tor Biirais = Ssarehront Pe = cart a a
Server 2019 Server 219

Evaluarea metaforelor in UI tangibile (TUL - Tangible User Interfaces ), (0 forma

de interfata multimodala) : Exemple de metafore

» cadru conceptual bazat pe trei componente:

TUE)
1) o reprezentare structurataé a maparilor care se afla jntre sursa
metaforelor, interfata si sistemul digitalul.;
2) un model conceptual pentru descrierea TUl-urilor metaforice;
3) trei proprietati relevante, coerenta, acoperire si conformitate, care
definesc in ce masura implementarea unei interfete tangibile metaforice
se potriveste cu metafora.

Tangible interface Digital application

(metaphor source) (metaphor target)

| <P> A
. Input objects _ Algorithm
Action lnput eee yhae) Input Lo
e 1 - artifacts =. commands
fit. functions — B ~ ‘
- BONSOrS V Baye : » Joanne K. Rowling

Structure “4 : 7 . 7
} P J ‘ 4 ff jit, Eat
| Contour objects Sees a ey
+ Z cae Hesighimer
des
Semantics }
J } E t
Output objects | yL a shee ep .
| - devices if B ‘ Provides. Output —

- artifacts " feedback functions *

U Perception = actuators N IM D
£P> |

ANALOGY METAPHOR Metafore utilizate incorect

eye e

Skilled writers use a variety of techniques that make their texts more interesting an Traduceri directe
appealing to their readers. This is especially true when it comes to fiction stories; li : 1 “Wy . b ] . d l
you'd rarely see a narration without such techniques as analogies and metaphors. Ap icatie CD p ayer Care necesita rotirea utonu ul e volum Cu

When you're using an ANALOGY

USAGE
you are [When you're using a METAPHOR, you are
USAGE mouse-ul (2 Metafora CD-player-ului | | Eee
comparing two completely different writing @ phrase or a word while actually
things to each other H g to something else. | i | i | | aa | = an | i |

EXAMPLES _EXAMPLES Aplicatie de telefonie care solicita utilizatorului sa se ocupe de o

Life is like a race eee Ce
ves me | “& book is like a garden carried in the anumita numerotare pe 0 tastatura simulata.

eR
Bem
aeee eeRs tate
aL ee A
lelateht
bad custom is like a good cake, better
Un site al unei companii aeriene care simuleaza calculul biletelor.
She is drowning in work broken than kept RAPID REWARDS DOUBLE CREDIT
That man was as tough as woodpecker ML 1 ee

eed
PO ee et
mea
Ce Ae De

Whenever you're comparing two seemingly uncomparable things,

you have an analogy. But when you're saying that something is
something else, though it isn't so literally, you have a metaphor.

Piam bste os f 2Pireet oe fe eid

Meee beat
 14.12.2020

lSigla trebuie:
| C) Sigla = sa atraga atentia si sa lase o impresie pozitiva.
; j (mai eficiente decat cuvintele)
> este imaginea numelui! - o reprezentare grafica a identitati "sa fie o imagine usor de memorat/inteles, pentru a se aminti
companiei. cu usurinta si sa transmita un mesaj clar. (vor avea
>» reflecta (logo-ul) companiei/produsului & multimea incredere.)
pictogramelor elementelor de interfafa utilizate, printr-un un sentiment de _ autenticitate si
stil concis, puternic & direct;
> expune ideea central4 a companiei (reflecté ceea ce Frame jak Art Gy
caracterizeaza si reprezinta compania) si poate cuprinde
simboluri grafice, culori distincte ilustratie,
tipografice, imagini fotografice.
caractere
Ficomed @2 ef
PH -2syjobs eurofinance TY
> Sigla poate fi un Jogotip, unicontip sau — Google "Poy ROTM BB
mixta téoes TN ‘A cm AMAYA
Sigla firmei si logoul sunt cele mai importante aspecte ale crearii
> Actioneaza ca declansatori vizuali tn cmrorxers OWN, rttininst Ee
producerea unei succesiuni de idei in minte aa ex “OE Rut emple: la Microsoft sigla este aelegatip ¢bemntatipar din caractere alfabetice, iar la
eeze.o imagine unica, distincta, simpla WMD 22 TIME emp, yple este mixta, compusa dintr-un logotip si un icontip, adica simbolul marului.
* a Qin ebY” cite etre
Raytheun HBe "iH
Mobil ASPCA
Tye Narijeck Gees Panasonic Canon TOSHIBA
eeeEh

Implicatii:
> Credibilitatea”...nearly half of all site evaluators (46.1%) (— . Pictograme \
used visual cues, Such as the site’s overall design or look,
to assess a Web site’s_ credibility.” (Consumer > Ar trebui sa fie mai usor de invadtat & recunoscut decat
ReportsWebWatch) comenzile;
> Flexibilitatea (empowerment vs. oppression) Dinamicitate, > Actualmente, populeaza orice aplicatie/sistem: - Obiecte de
inovare, invatare, sentimentul detinerii controlului pe desktop, instrumente (e.g., de desenare), aplicatii
(navigator Web, player,...), operatii (cut & paste), ...
> Asocierea intre reprezentare si conceptul referit se poate face:
Unele elemente privind identitatea ¢ Conform similaritatii (e.g., foaie goala = fisier nou)
>» Pot fi (re)“utilizate” si in alte contexte e Analogic (e.g., foarfece = cut)
si/sau de alte companii e Arbitrar (e.g., simbolul X = inchide fereastra)
> Necesitatea redefinirii & schimbarii >Cele mai efective sunt pictogramele proiectate conform
(rebranding)
similaritatii (Rogers, 2007);
SO eegame ar trebui sa aiba asociate etichete; J

A
Ge 7 pads nSOG

Exemplu: a Ca -
Aocessebality advanced Bocignoud Grr
(— ¥ Icon-ul programului/sitului \
== Aa Ey 33) iad O imagine valoreaza cat 100 de cuvinte
a Fort Keg tac pred Ghente ut erie fe Tenia.
(A picture is worth
a thousand words) oe & SG oO
2 9 @ 8. @
Sey [4 OF i Oneacw
Q Este important: Ge Ge @s
2 = ras on x Alegerea pictogramei + folosirea Sec OOS
=- ~ PBSorowse culorilor
& OB
= 7, ee oa o@ Dimensiuni tipice: 32(16) x 32(16) Gi « © ow @
= Ce FS mini @U. pixeli (versiuni raster)
4 = ——-riv FF CO GS Gl reprezentari vectoriale (ex., SVG) op Gs: eS
pe =| “a L SER Ct Coe | =
grija mare la semantica& BQ EBG a wa
contextul utilizarii;
a) oo
fs » » @ 5
DA Gelete €> sack eu
q Bie & Forward page Moree Ti
ca ip Linch xe oy cS Copy To
por Ow ER tag toot

WN ~) Properties Z) Refresh (2) Foaders

is a cut Py) Home E* Open
3 j=] Copy # Search Led Sava

g "+ Paste az favorites Priest

iS jo Fokker Oesbions 1 His bicer |) ew
 14.12.2020

Culoare [Link]

> Se numeste culoare perceptia de catre [ochi] a uneia

> impact major in dezvoltarea Ul sau a mai multor frecvente (sau lungimi de unda) de
lumina.
«= Daca nu pozitiv, atunci negativ ®
> perceptiea provine din abilitatea ochiului de a distinge
> Folosirea corecta a culorilor poate imbunatati procesul cateva (de obicei trei) analize filtrate diferite ale aceleiasi
de memorarea si formarea de modele mentale imagini. Perceptia culorii este influentata de biologie (de

Culoarea
corespunzatoare ex. unii Oameni se nasc vazand culorile diferit, altii nu le
percep deloc, vezi daltonism), de evolutia aceluiasi
observator sau si de culorile aflate in imediata apropiere
> Culorile primare: rosu, verde, galben, albastru — a celei percepute (aceasta fiind explicatia multor fuzii
atasarea de semnificatii culorilor sporeste usurinta in
utilizare optice).
> Stiinta culorii, denumita ,cromatica”, include printre
altele percepera culorii de catre ochiul uman, originea
Numarul magic: 5+2 culori intr-o interfata culorii in diversele materiale, teoria culorii in arta si
aspectele fizice ale culorii in spectrul electromagnetic.
Pentru concepte diferite,e folositi
dlifesrit culori diferite, nu
DL

Secolul XWIII
o = Teoria culorilor a fost formuilata in termeni de
culor primare sau primtive:
* Rosu — Galben — Albastru
Teoria culorii = “Red — VWellow — Blue”
*Capabile sA formeze prim amestec toate

a
celelalte culori

Secolul XIX
In pictura, grafica si fotografie — amestecul
colorilor = Cercetatorl germani $1 englezi au stabilit ca
percephia culori este mai bine descrisa in
termenii setului de culori primare Rosu — Verde
— Albastru (“Red - Green — Blue”)
® Teoria culorii: = Receptorii retinieini sunt sensibili la culorile
primare
" Principu scrise de Alberti (c.1435) & Leonardo
= Spatiul de culoare
da Vinci (c.1490) = Perceptia culorilor
# Secolul XVIII: teoria culorii a lui Isaac Newton Secolul XIX
(Opticks, 1704) - natura culorilor primare
=» CMYE: imprumarea culorilor
» Cyan - Magenta - Yellow - blak
= CMY: fotografie
= Cyan - Magenta - Yellow

Scheme de culori
Culori calde vs. culori reci > Culorile pot ajuta in formatarea informatiilor (gruparea
cromatica, focalizarea atentiei etc.)
® Culorile calde sunt asociate cu lumina zilei sau Ajuta la identificarea componentelor, structurarea ideilor, afisarea
Vv

lumina apusulut: surselor de date sau a starii lor;

> Stabileste ambientul
# De la nuante de rosu spre galben, maro
> Culoarea ca si cod vizual
® Culorile reci sunt asociate cu culorile unei zile > Un set de culori poate avea semantici diferite
intunecate, mohorate: > Folosirea inadecvata genereaza confuzie
® Prin contrastul cu celelalte culori orice culoare = Exemple: “Mesaj eroare’, “treceti stada acum! ”
poate sa apara calda sau rece > Probleme: acuitatea vizuala, interferenta cu alte culori/ferestre
(juxtapunere), diferentele disciplinare/culturale
> Semantica — dupa (Galitz, 2002) & (Goin, 2005): Indicarea
actiunilor ce trebuie realizate — cu/ori calde (rosu, oranj, galben).
> Oferirea de informatii de stare ori pentru fundal — cu/ori reci (verde,
| oe stone Aa al) i) (ie 1A
albastru, violet);
> Culorile alese trebuie s4 se conformeze activitatii desfasurate de
utilizator sau, mai general, cu societatea sa
Nu vom utiliza >4 culori afisate simultan;
 14.12.2020

Roata culorilor este o inventie destul de veche, fiind pusa lez

punct de Isaac Newton in anul 1666. Este un grafic in forma dé Culorile primare. Sunt acele culori de baza si nu pot fi
cerc in care este reprezentat intreg spectrul vizibil, de la rosu lz obtinute prin combinarea altor culori. Sunt 3 la numaér si
violet. Roata culorilor te ajuta sA alegi precis acele culori care alcatuiesc un triunghi echilateral pe cercul culorilor: rosu,
arata bine impreuna. galben, albastru. Ca fapt divers ele sunt reprezentate pe
steagul Romaniei. im
ie
Culorile secundare. Sunt obtinute prin combinarea a 2
> Relativ simplu de costruit, roata culorilor a devenit un culori primare. Ele completeaza cercul, dar nu il definitiveaza.
instrument absolut necesar in design pentru ca pune ir Sunt tot 3 la numar: verde, portocaliu, violet.
evidenta legaturile dintre culori. Astfel, in orice compozitie, sé
poate gasi foarte usor acea combinatie de culori caré
impresioneaza privirea si da o stare de armonie. Culorile tertiare. Completeaza intreg cercul. Se obtin prin
> Roata culorilor incepe prin reprezentarea echidistanta ¢ fie prin combinarea unei nunate primare cu una secundara, fie
culorilor primare, urmand a fi completata cu cele secundare s! prin combinarea a 2 nunate secundare.
tertiare. Nicio culoare nu este mai importanta decat altg
pentru ca toate formeaza un cerc.

> Lumina monocromatica (ideala) se caracterizeaza prin puterea

> Culoarea poate atrage atentia, in cazul in care contrasteaza
P transportata si prin frecventa f a oscilatiei. Alternativ, in loc de
suficient de mult cu fundalul.
frecventa, se utilizeaza lungime de unda . . c
> Sa exprime un sens (de ex: rosu - pericol sau stop ca la » Lumina monocromatica este vizibila pentru
semafor, se utilizeaza in cazul erorilor, verde - ai unda verde ochiul uman numai daca lungimea de unda se f
pentru a continua actiunea sau iti indica un mesaj de succes, incadreaza intre 380-400 nm si 700-760 nm
alpen -atentie). > o functie de distributie spectrala a puterii dP f? dP
(engl. Spectral Power Distribution — SPD). da = a af
>» Evidentiaza relasii dintre anumite elemente, (ex: elementele de
®fm Unde: c - este viteza luminii in vid;
Culoarea

aceeasi culoare poate indica ca facand parte dintr-un grup). w cule intervalul de bungimi de odd intervalul de frecvente

S Descompunerea spectrala
5
ol
> trebuie tinut cont si de cultura utlizatorilor in care culorile sunt
asociate cu simboluri! 0 BF 6G BY? o8 R f

LU!!! Atentie !!! Pentru utilizatorii cu probleme de vedere — Perceptia culorii luminii. Ochiul nu distinge, ca avand culori diferite,
diferentierea se face prin forma sau textura. (culoarea nu orice surse luminoase cu distributii spectrale SPD diferite. Pe retina se
conteaza) gasesc trei tipuri de receptori, fiind sensibili in mod diferit la diferitele
componente din spectrul luminii. Raspunsul este un nivel de excitatie,
Doua culori sunt percepute identic daca oricare dintre ele declanseaza

Similara cu un filtru *Culonle de baza pot fi obtinute prin

= Cele mai sensibile sunt frecventele medi descompunerea (dispersia) luminiu albe
* Cele mai putin sensibile sunt frecventele mari
Depinde de orientarea gradientului = Lumina alba poate fi obtinutaé prin sinteza
* Cele mai sensibile sunt onentanle onzontale culorilor de baza A. (iim)
wlet 390455
sau verticale
Perceptia culorilor
Perceptia culorilor

Modelul: modalitatea in care lumina este * Culor de baza: erde 2.577

577-597
transformata de ochi stralucire luminoasa
597-622
= capacitatea organismului sau a aparatului de 23-780

a distinge obiecte pe baza lungimii de unda a

lumini reflectate sau emise " Depinde de continutul spectral (compozitia
lungimilor de unda)
Culoarea (notiune perceptiva) = lungimea de
unda (notiune fizica) = 700 nm - rosu
® Spectrul unei culori
= Ochiul uman este incapabil sa distingaé intre
galbenul monocromatic (o singuré lungime de
© O lumina cu energi egale pe toate benzile
unda) si o compozitie de verde si rosu.
vizibile apare alba
 14.12.2020

Culori complementare cercul se imparte in doua pentru a separa

culorile calde de cele reci.
" Newton: Culort care anuleaza alte nuante pentru a
Nuantele calde sunt de la rosu, galben spre
ightivss

produce o imagine monocroma (alb, er, negru)

* Ipoteza: nuantele saturate la maxim sunt plasate pe o verde deschis sunt colori calde. De la violet,
circumferinta extertoara a cercului, in timp ce albul
acromatic este plasat in centru — albastru spre verde inchis sunt culori reci.
Saturatia unui amestec de doua spectre de nuantea = ""*
fost prezisa de o lime dreapta care le uneste ulori complementare. Sunt cele care se gasesc
= Un amestec de tre culori a fost prezis de centrul de iametral opus pe cerc. De exemplu rosu si verde.
gravitate sau centroidul a trei puncte situate pe un
trungli Folosirea a doua culori complementare genereaza un
= Siasa
. mai : departe Z Teona traditionala * a culoru deriva74 din pictura contrast inalt. Trebuie mare atentie in utilizarea lor
* Galben + Magenta
pentru ca pot crea o stare de discomfort privirii.
* Rogu aprins + albastru
" Magenta + verde
Vedeti cata tensiune existé in aceasta
nn

— determimd o anumitd ouanté de gn echivalentd j1 se oumesc

culon complementare pictura un predomina rosu gi verde crud?
® Legea Chevreul a contrastuhn culonlor: culonle care sunt
afigsate una langd cealalté vor fi alterate daca sunt
amestecate cu culoarea complementara a unet alte culori.
* O culoare galbena pe un fond albastru a aparea ca 91 portocaliu
deoarece portocaliml este culoarea complementard penta
albastru

Culori complementar divizate. Este o varianta a tridelor de culori in Doua modele pentru culori
care baza triunghiului este foarte ingusta pentru a selecta 2 culori
analog, iar varful ascutit selecteaza o culoare complementara celor
douad. Se bazeaza pe dominanta si contrast. Genereazé mai putina
tensiune decat o triada pentru ca doua culori se armonizeaza. LJ RGB a
¢ Specificari individuale pentru
ntru incepatori este o schema potrivita. RED, GREEN, si BLUE secon mds
L) HSB — (Hue, Saturation, si Brightness)- — / : ‘\ ee os
> Impreuna cele 2 modele formeaza A a ae
chromatica; si reprezinta culaorea Nee ee
Culori tetradice. Schema tetradica presupune utilizarea a 4 culori
>» Hue este distinctia dintre culori (ex., ros wen Bi UU!
aflate in varfurile unui dreptunghi. Aceasté schema ofera foarte multe
orange, galben, verde, etc.) a VT
posibilitati de alegere a nuantelor. Este mult mai complexa decat —
L) Saturatia este puritatea culorii, sau canti
schema triadelor.
atea de gri proportional cu nuanta
te indicata folosirea unei culori dominate.
o Saturatie mare -> foarte intens
o Saturatie redusa -> spalacit
ilizarea unui dreptunghi cu latura foarte ingusta, da voie la alegerea a o Saturatie Zero -> alb
e 2 perechie de culori complementare si culori analog. LL) Luminozitatea este numité luminescent

Reanons
ip DeLee
a} AGB bi CMY Lab color awes and b color axis Culori acromatice
SRGB primaries

*" =culoare cu continut cromatic scazut se numeste

8 yd
=" Nesaturata, acromatica sau neutra Sfera culorilor
blue | (00,14 evan yellow (0,0,2) a -
* Culori acromatice pure:
/ | wire” black “ & = Negru ———_
ra | y —

magenta f # pr A’ : =
= Alb
{a 8 « Nuantele de gri
| grayahstave [green sray seate mae
nagentas na
=" Aproape neutre:
red| , eo ny Ao 108 i white Ao)"
e fier amy *
= Maro
R /(1,0,0) pelrow cy (1,0;0) be = Pastel
- . b color axis # Culorile inchise
RGB - CMY Model * Culonle neutre se obtn prin amestecul culonlor
impure cu alb sau negru sau din amestecul a doua
Culoarea Rosu verde albastru
culon complementare
Red (rosu) 255 0 0
= Perceptia acestora este imfluentata de existenta
Green (verde) 0 255 0
adiacenta a une1 culor mai saturate
Blue (albastru) 0 0 255
« Dacd o hama rogu aprins se pune langd un perete gn,
Yellow (galben) 255 255 0 acesia Va aparea VWETzil
Cyan 0 255 255 * Negrul 51 albul se pot combina cu once alta culoare
Magenta 255 0 255 « Negru creste saturatia s1 lummozitatea aparentd a
White (alb) 255 255 255 culonlor pictate peste
Black (negru) 0 0 0
 14.12.2020

OT Peer Liste ATT PS er Ce

Sivtaleth

= selectia culorii se face prin (colour picker) in 3 moduri: pe = - t is i — E

* paleta predefinita de culori: abe Bom

"a
“ith oe
oe ‘im Gea hs ai rm cs pear
* Valori HSB
nent a HEL Sot LIr a
¢ Valori RGB . -
Sabor
anos
tramthe olor
heeslor

oie
ti angle i

Select a cele

A
fed) 137.41
1
sien
Scorn Green|
Ie
i26.64 i:
| |
eee
HEL. HEY

Green| 128.09 = rx euel ics.

nbn 103.0 £09.
c r =r Adjust Color Stiders
———eeee
Paleta Pre-definita
en ee dle
[Beaks] wen) wo
Pipe Color Ramp Red :
Red
Algorithm 1 atl (i
Ler ee ee ee |
plis L Yellow aSteen: 4 +) [256
repo ti] ae 1” 14
“| | Alua; «| | ‘| ju
a t I 1
Green
op —
fz me ae >— Cyan =
Black-White Ramp—— _. oe | patel
Parmar Prawew
Blué a a

of i OB wb eereie
To tere tee DB et erecta caren .- RA -.
MWiaieritea

ae o Sample Tint Sampls Tedd a8 Serpe Ter Garg a Oo . Foreground Selection

— -+4— Foreground/Background Switcher
Background Selection— Black/White Reset
[ck | cand | reset [cm | caxn | ceon | oe | cance
| reset |

Stabileste ambientul; Scheme de culori

> Culoarea drept cod vizual, indicand categoria Armonii (harmonies):
de informatie afisata utilizatorului
> Un setde culori poate avea semantici diferite, in :
functie de situatiile survenite si de audienta > Monocrome (alb, ne
> Folosirea inadecvata genereaza confuzie > analoage ee
Exemple: “Aceasta este o eroare”, “Format ZZ-LL- > complementare
mY!” > complementare divizate (split
complement harmonies
> cu 4 culori (tetrad colour
harmonies) >

Black

Scheme de culori (Linda Goin, 2005): > Resurse gratuite:

= [Link]
= [Link]
> Este important si contextul in care apare o culoare ( a se
= [Link]
vedea utilizarea internationala);
> conotatii multiple ale culorii (ex., rosu = pasiune, furie) C tt 0 di Potpeycolrmucl oe Sl in,

} Muri Colors a, 4 : s

>
aspectul Soe We leebem MmOarte
international: @itntiem fericire
nori itevem puritate
aristo- [itjijnems crimi- liber [Bitstieve
Color Palette Generator
Franta : Create Beautiful Color Sct
sible rar Biecetee $6 litate
ELE rospe-
tee i Ly moarte
India [exit succes [iiwiric:
; a uritate
sass aT P
furie cratie [BAytitn
Japonia - Tautate [iieniuc:
euceom nobil Pitot
pericol, BESinicy sigu- mascu-
USA puritate
stop [Eiji ranta linitate
 14.12.2020

Codificarea folosind culori - stabilirea de asocieri vizuale a elementelor

relationale: L) Etichetarea folosind culori

" Codificarea informatiilor folosind culori poate avea un efect benefic

= Folosirea extrema a culorilor poate duce la consecinte negative Probleme:
= Aproximativ 10% (9Q%B+I1%F) din persoane sufera de daltonism > Dificultati in identificare daca sunt foarte multe
(diverse forme); culori
i
Butea
y
ma
Pee
~
ine
Nt
rs > 4-5 culori este recomandabil !!!!

Combinatii problematice
text text fext text text text O wanr + text text text text [text text tesct tesct tesct te>t

text text fext text] text text ‘went qui TERT text text texttext text text text text text text

Text jaxttext texttext fexttent

ent text [extent
text text
text text text text

text text text text

text text text text

BcH00se ER tec sest i

= ‘aéValoping ééuintries

olutii

This is some yellow text.

This is some jrallkew test. Tihs is seme blue teri

Combinatii de culori This is some blue text

_) Lizibilitatea Recomandari/Concluzii privitoare la utilizarea culorilor

feet tant tact fen
> Folositi cu grija (zgarcenie) culorile:
leat tect hext hex
= Pot face lucrurile mai greu de inteles
> este greoaie la orice marime a fonturilor: ees « Mai multe culori=mai multa informatie
text text text text
» Limitati numarul de culori (4- maxim 7)
> culorile primare sunt 3 si sunt singurele ce nu pot fi obtinute prin
=| text text text text combinarea altor culori. Toate celelalte se obtin fie prin combinarea
celor primare, rezultand cele secundare, fie prin combinarea celor
primare cu cele secundare.
> Constientizati puterea de codificare a culorilor
Eta
L MLM ae | » Poate face recunoasterea mai usoara daca diferentele
oem ee
sunt clare si cunoscute
> combinatii care difera prin albastru > Faceti posibil ca utilizatorul sa poata renunta cu usurinta la culorile
text text text text din interfata
> De ce rosu, galben si albastru? Pentru ca sunt cele primare din care
prin combinare le poti obtine pe toate celelalte.
> Proiectati mai intai fara culori: dispozitia obiectelor este
esentiala, culorile sunt folosite doar pt a imbunatati
Few? fext Peal bet C3 9st Hid = a P|
>» Folositi schimbarea de culori la schimbarea starii sistemului
» Alegerea nepotrivita a culorilor poate fi mai rea decat lipsa acestora
 14.12.2020

1. Font Families
a | E) Corpul de litera fontul) > )
— Monospaced or fixed-pitch (tipografic)
Textul * Fiecare caracter ocupa aceeasi cantitate de spatiu
pe orizontala (cf. pas variabil)
e Caracterizat prin:
1) Font family —WNu faceti asa!
2) Stilul
3) Marimea si spatierea
ea
Pel ae dene

re en,pe oe ary cepa eae kn a Oar a ea eM ah eg ee et gl ee

Cee era

Fonturi
¢ Corpul de litera (fontul)
serif fonts sans serif fonts
— Famili de fonturi:
Times New Roman Arial « Cu serife (Bell, Garamond, Times,...)
Georgia Verdana ¢ Fara serife (Arial, Bedrock, Lucida Sans, Seqoe,...)
© Cursive (Commercial Srjet, Nuptia’, GAXAQ SAOXaA,....)
Times New Roman | Arial
* Mono-spatiate (Courier, Lucida Console....)
Georgia Verdana * Decorative (LwuBod, ALGERIAN, hil = @@,...)
— De luat in consideratie:
fonturile comune, lizibilitatea, consistenta
Serif
Un serif este o linie scurta care extinde de la si la
un unghi a liniilor superioare si inferioare ale unei
litere;
Fonturile serif facilita perceptia umana in a
Sans serif Serif distinge intre litere
Sans serif
far3i_serifs

Fonturi Spatierea
= Avantaje Serif:
JavaSwingTutorial/uiswing/painting/[Link]
> Ghideaza fluxul orizontal al ochilor in timpul citirii
> Creste spatierea dintre litere si cuvinte sprijinind
lizibilitatea
tere ae —AStender Line
> Sporeste contrastul si diferentele dintre litere usurand
identificarea
>» Leaga caracterele in cuvinte intregi (sporeste a
Baseline

coeziunea)
tees af-—Descender
Line
> Sunt preferate de catre cititori
> Sans serif sporeste oboseala
= Avantaje Sans Serif “Pre ------- -i— Ascender Line

ae
Serif sunt un artefact Baseline
—
VV

Sans serif sunt mai potrivite pentru paginile web (in getDescent 4 ieee Me PY er ie aeeng - @-— Descender Line
functie de rezolutie, serifurile sunt greu de reprodus)
La dimensiuni mici ale fonturilor sunt mai usor lizibile getHei ght Next line
VV

Sunt preferabile in cazul copiilor care invata sa ¥ of text

citeasca (mai usor de recunoscut)

10
 14.12.2020

2. Stylul fontului 3. Font Size (marimea fontului)

m Se masoara in puncte (un pct este cea mai mica unitate
de masura tipografuca egala cu = 1 / 72 inch (72 puncte

= Plain Bafta la Examene & Z

Times Wew Roman + 46 +

= Italic Bafta la Examene ® 2

48 point dimensiune

= Bold Baft&é la examene 8B Z

= BET) ten ee
Example Program
Tete ME

talict+bold Bafta la Examene \piz When the gun go of, the race be over--Ben Jotinson
Time and tide wait tor no man —Chaucer
Facts are the enemy of truth —O. Gutsote
Nota early. and vole offen A. Capone |Z Commands | Size Siyle
G4 0K oughtto be enough for arrbody--B. Gates = Restore [ 100 | T Italic
Exit Bold

Vote early, and vote offen

--A. Capone

3. Font Size (Dimensiunea fonturilor)

Lizibilitatea Text

> Exmplu cum stilurile fonturilor pot crea impresii false >» Uppercase vs lowercase
refetitor la dimensiunea relativa fonturilor; ¢ Cuvinte scrise MAJUSCULE ia mai mult timp pentru a fi citite
decat cele scrise cu litere mici;
* Cu toate acestea, un cuvant important scrise cu majuscule
este perceput repede cu conditia ca acesta este inconjurat de
This This Ta This This [his This This This This
cuvinte in litere mici;
All THE ABOVE ARE IM i4-POINT TEXT, THOUGH THiS LINE i 12 POINT
This is 12-point text in font Arial >» Serif vs sans serif
This Is 12-point text In fant Avant Garde
= Pentru text imprimat, fonturile serif sunt mai usor de citit;
Thin ts UP pint te in Fk Benet Feats
This is 12-point text in font: Times New Roman = Pentru textul de pe ecran, sunt recomandate fonturile sans
This is 12-point text in font: Miller Text Roman serif din cauza rezolutiei mai mici;
This 1s lé-point text in font: Letter Gothic
This is 12-point
text in fant: Cronos Pro
This ts 12-point text in font: Comic Sans
This is 12-point text in font: Verdana
This is 12-point text in font: Adebe Caslon Fre
THIS [@ LS-POINT TEXT IN FONT WEBLETIERER PRG

Lizibilitatea Lizibilitate
>Textul care trebuie citit trebuie sa aiba un
contrast sporit (recomandabil text negru pe
fundal alb sau galben pal), de evitat fundalul gri
>Se recomanda- atentie sporita nevoilor
m= Este dificila la toate dimensiunile fonturilor utilizatorilor mai varstnici dupa 45 = ani
m Diferite combinatii care difera prin albastru: majoritatea oamenilor sufera de o reducere a
transmisiei luminii in ochi
»Se recomanda folosirea fonturilor suficient de
lexi text text lexd ee eT mari pentru a putea fi citite pe monitoare
text text text text text text text text standard.
tent text text text »>Caracterele mai mari vor fi folosite pentru
text text text text
informatiile care se doresc a fi afisate, mai
Solutii

text text text text

degraba decat pentru etichete si instructiuni
ea Caer mGrt text text text text
(utilizatorii le vor recunoaste)
t=)qm t-) di)4 text text text text

11
 14.12.2020

4. Contrastul codificé informatia in conjunctie cu dimensiunile

3. Forma si marime — un mod de a spori eficienta interfetei
vizuale:
° perceptia diferentelor privitoare la o dimensiune vizuala;
Formele pot fi utilizate pentru a diferentia clementele, iar
* diferentele neimportante trebuie eliminate => asigurarea
importanta lor este scoasa in evidenta prin marime, find folosite
simplitatii;
usor de utilizator (ex. user-controls pentru apdsare sau
> Cat de inchis sau deschis este un element in relatie cu elementele
scrie/completare in ele).
din jurul lui are un efect direct asupra puterii de utilizare a unei
~* 5 2 interfete. Diminuarea contrastului anumitor elemente iti va
fi
ee 1G ss r dg permite sa le "ascunzi" in fundal, permitand utilizatorului sa faca
[Link] rezistenta izolatiei mp diferenta intre elemente mai mult sau mai putin importante.
rere 8s ITT Tipe
ly
ee Oa q. ps
Hue/Saturabon

Edit; | Masher 4 |
(a> arate Mim iiee
Le tel) Cross Platform eg
ae caine avertinare tensiune LNi 8 8. Hh. Hue +8 Caneal
[Link] timp 1 Fg je nt (with sama axceptions)
[Link] tim
[Link] TIME1 _ SeHect 0. Hy FF an oe = = valuo hue texture ||shape position orientation size
a aE
[Link] TIME2 aa Ay, 7 ‘,

I dicater PI (index de “F 4 9 SI wig 14 Lighbsess: eu «3 a) Gs / i ‘ i } il | )) \ /

coe ||@@ @|| © O

ee
polarizare) ;" a
11.c.c.
PLS Gent
12.c.a. —_— rl .

[Link] minus ak 10
[Link]
Monitor tensiune sent comenal rezistentei izolatiei Ls ttp://[Link]/~faaborg/files/20071114-iconicForms/[Link]

5. Dimensiunile Alte tehnici: Alte mijloace:

¢ Animating
=Asigurarea balantei (echi ¢ Annotating
Perceptia poate fi asociativa;
=Contrastul ¢ Chunking
> Usurinta ignorarii unei variabile, lasand deoparte toate distinctiile
=Directia ¢ Composin
conforme dimensiunii ignorate;
"Economia de mijloace ° Cutting
> Variabile asociative: pozitia, hue, textura, forma, orientarea;
=Dominanta (punctul focal ¢ Filtering
> Nu sunt asociative: marimea & valoarea:
=Proportia ¢ Fragmenti
¢ Marimea mica & valoarea joasa interfereaza in ceea ce priveste
#Ritmul ¢ Probing
receptarea valorii, texturii,formei etc.
"Unitatea ¢ Rearrangi
° Culoarea obiectelor mici e mai dificil de perceput.
ai, RUDD, 9 DESEMERIE, POLE Jens tare: aie bas is
¢ Repicturin
sissies ne mt ¢ Scoping
ra ——1am i ‘ion
¢ Searching
12945 Ce

Variabilele vizuale sunt utilizate pentru: ve

* Comunicare; meray Hi
¢ Spatiul
¢ Codificarea datelor; ¢ Valoare
¢ Realizarea distinctiei intre elementele vizuale ale interfetei; ¢ Elementele tipogr

7 Prin textura i se sugereaza utilizatorului cum elementul este

conceput a fi folosit.
F) Texturile »

texturile mai in pronuntate sunt »

»Caracterizate de ton (valoare), pattern & culoare utilizate pentru a da impresia unei
»Create si de materiale, (lumina, reflexie, distanta)
>Tipuri:
irri
FF ee
x! suprafete aderente de care utilizatorul
poate trage cu mouse-ul, in locul
Fie Edt Yew
" insealarea ochiului: maresc gradul de realism degetelor (Ex. striatiile din coltul
»
= Decorative: folosirea modelelor (patterns) | Leech me yor + ferestrei sugereaza utilizatorului

ladiess[Y mycompte5] posibilitatea ca acest element

(fereastra) poate fi redimensionata. /
3.3.5 Floopy (a)
é4

ge 0¥0 Drive (F:)

DVD-RAM Drive (E:)
EG

Texturile — des utilizate de 4)

interfetele jocurilor J objects | |g yg Cc)

A
electronice

12
 14.12.2020

Formatul fisierelor imagine (extensii: .gif, .jpg, .tiff, Examplu Transparent jpg, tif, bm]
Gif animat cu if
.bmp.....)
background transparent |
= .jpg == .jpeg = joint photographic experts group (pronuntat
jay-peg) Format File Size
= Foloseste culori pe 24-bit; gif 1231
of
iY
; a ;
= la compresie se reducere pana la 95%, dar se pierde din
, jpg 5146 a
tif 4671
calitatea imaginii, proportional cu vloarea compresiei;

m gif = graphics interchange format (pronuntat giff(cu ‘g’

apasat)
= = foarte popular pentru pagini web;
= Features
¢ Limitat la 256 colors (8-bit)
* compresie a datelor fara pierderi;
¢ Support pentru transparenta; (‘background’) este tratat ca
transparent)
¢ Support pentru animatii;

Dependentele - ferestrele auxiliare, informative:

IIT;:A, Fereastra About
oidentifica autorii/compania producatoare (credits);
statuteaza atentionarile legale (statutul software-ului si drepturile de
autor);
afiseaza numele utilizatorului care detine licenta de folosire, plus codul
L} ferestrele auxiliare, informative serial;
UL) situl Web (al aplicatiei) + comunitatea online ofera suport tehnic: telefon, fax, adresa, e-mail, legatura catre situl
produsului/producatorului;
ar trebui sa dezvaluie scopul programului, eventual versiunea si istoricul
versiunilor;
LJ Cele mai importante sunt:
ar putea oferi alte informatii utile.
About Mociily Feces —-f
@ Aber Orects [Devetoper 12 =o
A. Fereastra About
Firefox
(een-
Scent AE YE irc

B. Ecranul de senzatie (Splash Screen) ORACLE’

FUSION MIDOL WARD
4

Fieetone te deredibe Miomie, « gichal comeeumiby wearing

ioViLOAEA bogethar
tc larep than Mab cpa, cubis and accmmubs
bo all

LO C. Easter Eggs oy
Sind hee) Get irep hed

Stunde Edison ‘vermer i2 1.2

Fa 2

m | |

Fereastra About — Oracle JDeveloper Fereastra About - FireFox

IIIB. Ecranul de senzatie (splash screen)

Splash Screen
> apare la incarcarea programului (la prima executie sau la fiecare rulare,
pentru a fi citit de utilizator la o incarcare indelungata a programului) — de ~
exemplu, produsele Photoshop, Delphi, Bryce, Mozilla, OpenOffice, The
GIMP, Visual Studio .NET etc.; ®
S”
Ne
Ecranul de senzatie

> poate apare la anumite produse shareware (guilf screen sau nag
screen), eventual afisand numarul de zile care au ramas pana la ©
expirarea utilizarii; €
5
> poate apare ca ajutor pentru novici (afisand asa numitele sfaturi ale zilei - £
"Tips of the Day").
=
Pet] x i= SHG] Horkind Setware Compensation

®
Panda Antivirus Titanium (Shareware) S”
h

> Si472
D Thanks For choosing Panda Andvirus Titanium. This 6 &
Seremare version for evaluation gurposes only. does mot S77
es
5
induce the folowing services: Product updabes, E-mail technical
support or Sending of suspicious files (5.0.5 virus). You may
useit for 30 days bo determine whether it meets your

x
requirements. Ofber this time hes elansed, you must buy the
program or remove i From your computer,
To purchase the program, click on the ‘Buy’ icon in the upper
— — — = right-hand part of the Home window.
an de senzatie (guilt) JDeveloper.
| OK

13
 14.12.2020

Same ey E ene
YOeveloper Productivity His so II.C. Easter eggs
SP (Bit you bow.
Closing windows using the mouse wheel Suc Micruaysteta jus leased Project Soume Gap, eaceee graph API fhe Jere 20 > sunt atractive vizual, amuzante si nu neaparat utile;

Ths tho wc abe mh chat window fag wr Satkpmliciaripeetee abrearieabagen ents > pot afiga numele echipei de programatori care au lucrat la
pimdetan FOF Ua Ciel Hawe ecole ion aplicatie;
Fereastra Tip of the day

<Back | Next> ||Chose |

> sunt ascunse in cadrul aplicatiei,
3
si; vizibile la nevoie;

i i @ ‘J * sale areca = f {Oe

Showtipsaf startup

teste | __ses Oracle JDeveloper 11g

Tip of the Gay
Pec a ed a. Reet al! wie nat

pol the Day [Link].0

)) Did you know...
Lsrt ahd

Productivity with Cho BURNIN

¥ Did You know... en abies The BGroE Wiese! Go cai cay Soo a OF
fie ROM
G B
bul at Fhe Gureot location

em)S) ichanr
Nera a! ys
ego brenciodsrery
Dron’: chose the eidoei vou coin the meddleof Lacinc Copyright ©) 1997, 2011 Oracle and/or its affiliates, 4 im Shoechreserfie 1-15
avcay Keegy esses. PHS? Kariba, Mieeecy

A on
Warellds prea castrzecone
wera [Link]

fa Stew tian tart brig: nat Wands

Finn

MF Show fine fStop (oss | Bano Bunning ROM» Stian Aegidal, Eran Schum, Stigiy Aitenrerin, Thorshen Aust, Merend Bi

De retinut:
OHO OKOOOOS
OKOKH

> Software-ul unei corporatii trebuie sa aiba un aspect le de i Pp

four a Alan Cooper):
propriu, definitoriu (vezi Oracle, Adobe, Microsoft); TERESA -
Soe instalare:
> Interogheaza inutil utilizatorul;
> Sigla firmei sa fie prezenta si in cadrul interfetei (macar > Nu sunt flexibile;
in caseta About); > Modifica (tacit) configurarile de sistem (directoare de sistem,
OOOO

> Marcile conduc la cresterea increderii utilizatorului, figiere de configurare, registry, ...) sau ale altor aplicafit;
> Nu ofera dezinstalarea totala;
POKOK

datorita responsabilitati, garantiei si calitatil unui produs; ;

P Hh B 7? , P > Nu detecteaza o instalare esuata/corecta prealabila;
> Aplicatia trebuie sa aiba un nume sugestiv, scurt $i usor de > Nu informeaza asupra scopului actiunilor;
retinut, familiar utilizatorului (Word, OpenOffice, etc), dar > Esueaza sau actioneaza cu stupiditate;
se poate impune si o alta denumire, interfata nu trebuie sa > Pun intrebari la care utilizatorul nu poate raspunde;
fie copiata de la alte produse similare. > Abuzeaza de fisiere de configurare,
\S an de cele mai multe ori o interfata proiectata necorespunzator//

Adobe Creative Suite 3 Design Premium Installer: Proggess

: > Utilizatorul trebuie sa cunoasca diferenta intre
ADOBE . ve
ena ace liane: instalarea Full, Minimal & Custom
peer > Programul de instalare trebuie sa detecteze singur
secsan anumite date despre sistem, configuratie, intreruperi,...
Wel meld
Tel etait Overall Progress Exploring ae |

i Disc Progress: Disc 1 of 1

STE > armaitht camatine eared! commpeanis Cannot find D:4nia\Programssnetworksetup disk [Link].
+ Progress ain P Windows needs this file to mun 0: 4niasProgramsnetworksetupdisk] SE [Link]

e
5 e Eroare stupida a unui program de instalare
& ~~
= oP Insérez la disquette
eoO
SS Eicher Edin Aiichage 2
= mt 1 iT.

ib Solos Veutlez insérer le disque ‘Windows 35 CD-ROM"

= puis chquez sur OK.
fe @ Thit installation ony works for Micaosolt Windows 95:
a

(Cancel) ’ a

14
 14.12.2020

L) neajunsuri:
> Interogheaza inutil utilizatorul si Nu sunt flexibile; Incapacitate, Bulversarea utilizatorului
> Modifica (tacit) configurarile de sistem (directoare sistem, fisiere de
Exploting - disk1 |x|
configurare, registry etc.); .
OR ise a lose eae
" :
aL

A Cannot complete Windows Media Player 10 Setup

> Nu ofera dezinstalarea totala a produsului; AN Cannot find D:AniaSPrograms\networksetup'disk 1 \[Link]. ;

2
r
ET [Link]

>» Nu detecteaza o instalare esuata/corecta prealabila a programului.

4
c UL) Erori de proiectare:
Programul nu este capabil sa copie fisierele
a > Solicité raspunsuri fara a informa asupra consecintelor actiunilor
ww

aplicatiei la instalare.
utilizatorilor si Nu informeaza asupra scopului actiunilor;
—
o Programul de instalare pune intrebari la care utilizatorul nu poate i) Be ees net posite In complete Setup

Wedows: Fede: Player |Our: not intaied. To upcats: Windoves, sun Windoees Media Fleyer 30

S
WV

raspunde sau care sunt inutile; Seng agen

Insérez la dizquette
Esueaza sau actioneaza cu stupiditate;
= . ror!ae
o
VVVVVVV

Abuzeaza de fisiere de configurare; Veutllez ingerer le disque "Windows 95 CD-ROM

- ps ; ; {\;
£ Suprascrie fisiere partajate sau de sistem; ns sare puis cliquez sur OF.

& Nu se face evidenta instalarilor anterioare; Neal oie’

Nu se furnizeaza modalitati de dezinstalare;
2 Nu se ofera informatii despre programul care se instaleaza;
o. Se confunda instalarea cu configurarea sau personalizarea
Programul nu este capabil de al informa pe Bulversarea utilizatorului de catre
software-ului;
utilizator de eroarea survenita la instalare. programul de instalare (inserare disketa
Se stocheaza fisiere acolo unde nu trebuie;
sau CDROM?).
VV

Programele de instalare poseda o interfata greoaie, uneori poseda

oO anumita limba.

"Calculatorul munceste, utilizatorul gandeste".

Calculatorul nu trebuie sa gandeasca in locul omului, ci sa lucreze.
VVVVVV

Software-ul trebuie sa fie constient de el si cu datele de prelucrat.

Software-ul nu acorda ajutor efectiv utilizatorului.
Aplicatia nu trebuie sa astepte (eliminarea timpilor morti).
Software-ul ar trebuie sa utilizeze procesele din fundal, thread-urile -
>» Accent pus pe hover, transluciditate, caracter 3D
exploatarea multi-tasking-ului.
Software-ul trebuie sa dea sugestii (folositoare) utilizatorului. pronunfat, utilizabilitate (ex., navigabilitate);
VVVV

Software-ul trebuie sa memoreze actiunile utilizatorului si sa le refoloseasca.

Software-ul trebuie sa realizeze copii de siguranta a datelor.
> Se ofera controale noi (command links, network
Software-ul poate oferi o galerie de solutii bune (de exemplu clipart-uri, address controls);
sabloane, macro-uri si setari predefinite, proiecte de baza etc.).
Algebra booleana de inlocuit cu limbajul natural > O noua interactiune via notifications;
Vv

> Control de cautare (normala/instantanee), plasat in

Table Tools
dreapta-sus;
Developer Design co
> Ferestre de dialog de tip sarcina (task dialog);
ery | peel ay az v a a Eds | >
pl Raf : = Z| A 7. S22 = gs |
on tip de wizard, mai eficient & flexibil;

SS
Get External] Refresh z Sort Filter a Convert Text Remowe a Outline
Data * All = | to Table Buplicates =
|

interfata Office 2007: meniul ribbon optimizat pentru efectuarea de fask-

uri specifice.

> Software-ul: > evitarea vocilor monotone generate electronic

= trebuie sa comunice cu hardware-ul (sintetizare);
= nu trebuie sa dezamageasca utilizatotul; > folosirea unui stil vizual unificat (acelasi peste tot);
» $a fie cald, simplu & profund; > Eliminarea textului neimportant (simplitate);
=» Sa ofere la nevoie: f= * Ate
> meniuri contextuale pentru fiecare zona de interactiune;
¢ Clipart-uri bustin Sled Theme > Sarcinile sa fie grupate logic;
* magini See ay Ke > Interfata simpla aerisita si predictibila;
¢ Sabloane — a “oe > Optiunilor din meniu sa li se ataseze o tasta de acces
¢ Macro-uri “vc - in (Alt+tasta); a nu se confunda cu shortcut-urile
¢ Proiecte — = ree > Mesajele trebuie:
° Template-uri; = a » Sa evitare aroganta Acces nepermis!” sau “Cannot
° Setari predefinite | —: ’ delete Document: in loc de:. “This file is protected and
¢ Exemple; — | cannot be deleted without specific permission.”
=» Sa se evite termeni prea tehnici/tehnologici “Manual
duplex” vs. “Print on both sides of paper”
sas-4an
na sQOaocia
= Punerea accentului pe acuratete, politete si pe actiuni
aeaSsasastinaaaG orientate spre un scop clar;
agg = Folosirea persoanei | singular, in majoritatea cazurilor

15
 14.12.2020

LI Utilizarea gadget-urilor

> Mini-aplicatii disponibile in sidebar ori pe desktop Concluzii

> Un gadget realizeaza o activitate specifica, simpla & bine-
definita (indicata vizual) ® ldentitatea implica adoptarea unui design distinct al
> Interactiunea cu un gadget nu este deranjanta interfetei-utilizator
> Tipuri: >» Evolutia (identitatii) conduce si la schimbarea design-
: ¢ Informative (weather, RSS reader) ului;
N ¢ Utilitare (notes) » Structura identitatii trebuie sa fie clara, usor de
- ¢ Amuzante (puzzle) inteles;
= » Ocupa 130 pixeli latime in sidebar; maxim 400 (cand sunt >» Ul trebuie sa reflecte tipul de identitate (monolitica,
> detasabile) ; — oe bazata pe marca...)
>» O proiectarea judicioasa a interfetei conduce la
PA linet CF impunerea ori mentinerea_ identitatii aplicatiei
Teen /organizatiei (ex. Adobe. Corel, microsoft)
rele f > Proiectarea interfetei trebuie sa evolueze odata cu
a5 dezvoltarea identitatii, in functie de structura si de
stilul de promovare

Sfaturi.

> Interfata aplicatiei nu trebuie sa aiba o postura de

= superioritate (attitude).

<> utilizatrea limbajului natural in locul algebrei

> booleene.

s> Adoptarea metaforelor $1 a idiomurilor vizuale;

=> Comunicarea sw cu hw_ sunt de_ obicei

'= unidirectionale; (acesta trebuie sa controleze
=
actiunile hard-ului, asumandu-si in acelasi timp si
=
‘8

> responsabilitatea.)

s> Se considera ca sw este suficient de bun fiindca |

@ daca face exact ceea ce trebuie sa faca fara erori.
\

Bibliografie: Questions?
Comments:
co Objections « ath a
PADMNRPWN PE

htto/www_almadenibm.com/u/zhar/paperstongue/[Link]
http/portalioro/201 1/06/ce-inseammna-dentitate-vizuala/
http,/[Link]/design/identitate-vizuala/

httpy/[Link]/doc/207028526/Culoare-W
ikipedia
htto/tonisoft3xro/curs/interfaces10html
/ www .[Link]/cei-bin/[Link]?
/—

16