PROIECTAREA

INTERFEȚELOR
UTILIZATOR

Gianina GABOR
C8
 CUPRINS
 Capacități umane – percepție, capacități
motorii și decizionale, memoria, atenția, vederea
 Design vizual – elemente, aspecte, principii,
dimensiuni, strategii, greșeli
 Planificarea aplicației – flux vizual, principiul
suprapunerii, asigurarea orchestrației
 Planificarea interfeței
 Structura interfeței
 Overhead
 Capacități umane
procesarea informațiilor de către utilizatorii
umani ia în considerație
 percepția
 capacităţile motorii (motor skills)
 memoria
 capacitatea decizională (decision making)
atenţia
vederea (vision)
 Capacități umane
Abilităţile cognitive ca model abstract
(Card, Moran & Newell, ’83; Wickens, ’84)
 Capacități umane
Memoria - lungă & scurtă durată
• codificarea datelor - tipul “lucrurilor” stocate
• volum - numărul “lucrurilor” memorate
• durata/ decay time - cât timp durează “lucrurile”
memorate
pentru informaţii vizuale codificare = imagini
(nu pixeli ci proprietăţi fizice - muchii, lungimi)
volum ~17 (7-17 litere) decay ~ 200 ms
informaţiile audio codificarea = sunete
volumul ~5 decay ~1500 ms
caracterul acestora e pre-atenţional (“Ce ai zis?”)
 Capacități umane
 percepţia poate să se realizeze - de jos în sus
bottom-up când recurge la stimuli sau de
sus în jos top-down cand utilizează contextul
temporal/spaţial & influenţează memoria de
lungă durată
 unitatea de percepţie/memorare = chunk
 divizarea în chunks (gruparea) depinde de
modul de prezentare & cunoştinţele
anterioare
 codificarea cifrelor neînrudite recurge la 2 - 4
chunks
 Capacități umane
 Chunking
• BMWRCAAOLIBMFBI
• MWR CAA OLI BMF BIB
• BMW RCA AOL IBM FBI
 Memorarea numerelor de telefon
(via grupare)
• 0232201090
• 0232 20 10 90
 Capacități umane
Atenția & percepția
putem să ne focalizăm atenţia - procesorul
perceptual propriu se fixează asupra unui singur
canal de intrare al mediului la un moment dat 
metafora lanternei = spotlight metaphor
“lanterna” poate baleia mai multe canale de
comunicare în manieră secvenţială
atenţia vizuală primează asupra atenţiei auditive
în cadrul unui canal stimulii sunt procesaţi în
paralel  uzual apar interferenţe
 Capacități umane
Atenția & percepția - experiment
precizați culorile următoarelor cuvinte
 Capacități umane
Atenția & percepție experiment
precizați culorile următoarelor cuvinte

apariția interferenței – efectul Stroop

 Capacități umane
 procesarea cognitivă – creierul compară
stimulii & selecteaza un răspuns
 luarea deciziilor se bazează pe
• abilități / skills – învățarea prin practică → mers,
citit, vorbit, condus mașina, tehnoredactarea
• reguli / rules – dacă vreau să trec stada trebuie să
mă uit să nu vină mașini
• cunoaștere / knowledge – se bazează în general
pe cunoștințe anterior dobândite chiar și în cazuri
nefamiliare sau neașteptate
 Capacități umane
 Fenomenele cognitive pot fi distribuite
distributed cognition (Hutchins 1995)
• indivizi multipli
• artefacte sezoriale/informaționale dispersate
• reprezentări interne și externe

Reprezentările mentale sunt propagate în

cadrul grupurilor de indivizi
 Informațiile sunt oferite & trasformate prin
diverse medii de comunicare – tipărituri, radio,
TV, calculatoare, reclame, web, …
 Capacități umane
Divizare atenție - multi - tasking
atenţia ≡ resursă care poate fi divizată pentru
mai multe activităţi desfăşurate în paralel
atenția depinde de
Structura activităţii
• multi-modalitate  vizual vs. auditiv
• codificare  spaţial vs. verbal
• componente  perceptuală/cognitivă vs. motorie
Dificultate
• task-urile uşoare sau familiare/well-practiced
primează  este mai uşor de condus bicicleta pe o
stradă pustie
 Capacități umane
Procesare motorie
control cu buclă deschisă (open-loop control)
• se desfăşoară autonom trimiţându-se muşchilor
aceleaşi directive în mod repetat
• nu necesită feedback din partea sistemului perceptual
• cycle time ~ 70 ms
control cu buclă închisă (close-loop control)
• mişcările muşchilor (sau efectul lor) sunt percepute şi
comparate cu rezultatul dorit
• cycle time ~ 240 ms
 Capacități umane
 LEGEA LUI FITT - cât de rapid putem muta mâna
către o ţintă de o anumită mărime aflată la o distanţă
comparabilă cu lungimea braţului nostru
 Timp T de mutare mână la obiectul de mărime S aflat
la distanţa D
unde reprezintă indicele de dificultate
 LEGEA LUI FITT - se aplică şi la utilizare mouse
pentru a indica un obiect pe ecran → implicații
• meniu Macintosh aflat întotdeauna în partea superioară la
margine ecran mai rapid de utilizat decât bara meniu a oricărei
ferestre Windows
• meniuri “plăcintă”/pie mai uşor de folosit decât meniuri liniare
tip pop-up
 Capacități umane
Procesare motorie
sarcini navigaționale / steering tasks
timpul T pentru a muta mâna printr-un “tunel” de
lungime D şi lăţime S este T = a + b * D/S
indicele de dificultate este liniar nu logaritmic 
ghidare mouse mai dificilă decât pointing
consecinţa  meniurile în cascadă sunt dificil de
folosit
timpul pentru a executa o sarcină descreşte o
dată cu practica  timpul la a n-a realizare a
sarcinii este
 Capacități umane
 Memoria de lucru - working memory
• capacitate scăzută 7 ± 2 chunks (George Miller)
• uitare rapidă 7 secunde (valori comune: 5 .. 226)
⇒ repetiţii pentru menţinerea memorării
• interfețele conduc la uitare
 Memoria de lungă durata – long time
memory
• capacitate mult mai mare informațiile sunt
memorate mai mult timp
• repetițiile elaborate mută chunk-urile din memoria
de lucru în cea de lungă durată prin realizarea de
conexiuni/asociaţii cu alte chunk-uri ⇒ este foarte
important contextul
 CAPACITĂȚI UMANE
Recunoaștere vs. reaminitire
cum sunt acumulate informaţiile percepute şi cum
sunt transformate în experienţe?
reprezentările trebuie să fie uşor percepute &
recunoscute
oamenii îşi amintesc proprietăţi vizuale ale
lucrurilor - culoare, localizare, semne speciale
apar dificultăţi la învăţarea/reamintirea datelor
arbitrare - numere de telefon, date de naştere
interfeţele grafice facilitează recunoaşterea
navigatoarele Web, player-ele MP3,…
 Capacități umane
Utilizare adnotări & urme cognitive
(cognitive tracing, Rogers 2007)
adnotarea implică modificarea reprezentărilor
mentale, interne existente via marcări externe
• sublinieri, notiţe (scrise/electronice), tagging de text &
fotografii, replici asupra unei însemnări de blog
cognitive tracing implică manipularea externă a
unor “lucruri” în vederea (re)aranjării sau
(re)structurării
• scrabble, salvarea & organizarea bookmark-urilor Web
⇒ oferirea de reprezentări externe la nivelul interfeţei
reducându-se încărcarea cognitivă
CAPACITĂȚI UMANE
EXPERIMENTE
Capacități umane experimente
 Design vizual
 Crearea interfeței presupune o
proiectare vizuală
 Vizualizare ≡ reprezentare grafică a
datelor/conceptelor (Ware, 2004)
 Design vizual – elemente

 Elemente de bază (Dan Saffer, 2006)

• aranjament /layout- unde & cum sunt amplasate
controalele/conţinutul în manieră ierarhică
• grilă /grid - organizează datele în mod coerent
• flux /flow vizual - modul de parcurgere sau de
interacţiune cu datele oferite
• typography - corpuri de literă & reguli de redare
• culoare, formă /shape, textură
 Design vizual – aspecte
 Aspecte importante
• FUNCȚIA - designul (proiectarea) bun(ă) oferă
suport pentru activităţile utilizatorului
• FORMA - designul (proiectarea) bun(ă) trebuie
să impulsioneze utilizatorul să folosească
obiectul cu plăcere
 Design vizual – principii
 Simplitatea
 design-ul simplu este de obicei și cel mai
eficient
“Forma întotdeauan urmează funcției” (Sullivan )
 Dimensiunea, contrastul, proporția
 Organizarea & caracterul vizual al
structurii informaționale
 Design vizual – dimensiuni
 Contrastul codifică informaţia în conjuncţie
cu dimensiunile vizuale
• percepţia diferenţelor privitoare la o dimensiune
vizuală
• diferenţele neimportante trebuie eliminate
⇒ asigurarea simplităţii
 Design vizual – dimensiuni
 Dimensiunile vizuale pot fi diferenţiate
conform variabilelor vizuale (Jacques Bertin/1989)
(nu necesită procesare cognitivă suplimentară)
• valoare strălucire, luminanță (value)
• puritate, culoare (hue)
• textură (texture)
• formă (shape)
• poziție (position)
• orientare (orientation)
• mărime (size)
 Design vizual – dimensiuni
 Variabilele vizuale sunt utilizate pentru
 comunicare
 codificare date
 realizare distincție elemente vizuale interfață
 Înainte de a utiliza o variabilă vizuală trebuie
determinat în ce măsură aceasta comunică
utilizatorului informaţia dorită
 afișarea temperaturii se poate realiza prin intermediul
oricărei variabile vizuale – culoare, poziție pe o scală,
lungime termomentru, icon
 Design vizual – dimensiuni
 Caracteristici importante elemente vizuale
 Scala – tipuri de comparații posibile
• nominală (=)  toate variabilele
• ordonată (<,>)  inadecvataă pentru orientare,
formă
• cantitativă  doar pentru poziție & mărime
 Lungimea – număr niveluri percepție valori
• valori mari pentru formă & poziție
• aprox. 10 niveluri pentru unele variabile
(ex. mărime)
• aprox. 4 niveluri pentru orientare
 Design vizual – dimensiuni

Variabilele vizuale intervin privitor la

 ATENȚIE
• canalul de intrare = una sau mai multe
variabile (ex. poziție & puritate, culoare)

 PERCEPȚIE
• selectivă – în cazul poziției, mărimii,
purității & culorii, valorii, texturii
• neselectivă - pentru formă
Design vizual – dimensiuni
Experiment – detectați .....
 toate literele din dreapta ( poziție )
Design vizual – dimensiuni
Experiment – detectați .....
 toate literele verzi (puritate & culoare = hue )
Design vizual – dimensiuni
Experiment – detectați .....
 toate N-urile ( forma )
 Design vizual – dimensiuni
Percepția poate fi asociativă
uşurinţa ignorării unei variabile lăsând
deoparte toate distincţiile conforme
dimensiunii ignorate
variabile asociative - poziţia, hue, textura,
forma, orientarea
nu sunt asociative - mărimea & valoarea
 mărimea mică & joasă interefrează în ce
privește receptare valorii, texturii & formei
 culoarea obiectelor mici este mai greu de
perceput
 Design vizual – STRATEGII
 Grila/grid – des utilizată în
tipografie
 Focalizare /focus - evidențiere
1 sau mai multe elemente modulare
 Modularitatea
 Flexibilitatea – permite variații de la temă
 Consistența - nerespectarea ei implică
mai multă muncă de programare și întreţinere
a aplicaţiei
 Design vizual – STRATEGII
Diverse tipuri de șabloane vizuale / grid
(Dan Saffer, 2006)
 Design vizual
Greșeli comune
 poziții & dimensiuni arbitrare ale componentelor
 forme & dimensiuni arbitrare ale ferestrelor
 mărimi & reprezentări arbitrare icon-uri
 prezentări inconsistente
 limbaje vizuale inconsistente
Menținerea stucturii se poate realiza prin
repetarea elementelor de design pe parcursul
interfeţei (şabloane proiectare - design patterns)
 Design vizual – greșeli

 dezordinea & zgomotul

 interferenţa între elementele cu
acelaşi grad de importanţă
 complicarea evidentului
 detalierea excesivă
 Planificarea APLICAȚIEI
 Redare datelor & interacțiunea cu utilizatorul
trebuie realizate în mod organizat
 Obiectele de interfață sunt conținute de
ferestre principale & subordonate
(documente, casete de dialog)
 Programul trebuie să aibă o fereastră unică
principală
 Fereastra = camera & programul=casa
 Planificarea APLICATIEI

Fluxul vizual
urmărirea modelelor mentale - metaforele
idiomurile
calculatorul este încă privit ca instrument nu
ca partener de dialog
instrumentele trebuie păstrate la îndemână (se
asigură ergonomia)
 Planificarea aplicaȚiei
Fluxul vizual
 utilizatorul este confruntat cu apariția unor
ferestre ce pot fi de două tipuri de ferestre
• modale – utilizatorul trebuie să execute o anumită
sarcină în altă fereastră
• nemodale (modeless) – utilizatorul interacționează
cu aplicația în aceeași fereastră

feedback-ul trebuie să fie (cât) mai puțin modal

 Planificarea aplicatiei
Principiul suprapunerii (Alan Cooper)
concurenţa task-urilor
manevrarea ferestrelor
înlănţuirea (tiling)
desktop-urile virtuale
task-switcher-ul
• startbar din Windows
• dock & exposé la Mac OS X
• sidebar la Vista
 Planificarea APLICATIEI
Asigurarea orchestrației (Alan Cooper)
interfața trebuie să fie simplă & consistentă
interfața trebuie să fie invizibilă
posibilitate vs. probabilitate
 nu trebuie afișate informații cantitative
introducere grafică vs. textuală a datelor
programul trebuie să reflecte starea (gata de
lucru, adormit, ocupat)
 Planificarea APLICATIEI

Asigurarea orchestrației (Alan Cooper)

utilizatorul trebuie informat dar nu trebuie
folosite ferestre de dialog pentru a raporta
normalitatea
nu trebuie utilizate ferestre de dialog
(modale) pentru a interoga utilizatorii
 fiecare metaforă / idiom folosit(ă) trebuie să
aibă o motivație
 Planificarea APLICATIEI
Postura suverană
 aplicație utilizată timp îndelungat aproape
continuu (Word, Photoshop, Visual Studio)
 interacțiune complexă, atenția fiind focalizată
permanent
 utilizatorii suverani sunt cei cu experianță
 aplicația se execută maximizat
 paletă de culori discretă, odihnitoare
elemente de interfață elegante & productive
 interfața este ordonată cu controale dispuse
în colțurile ferestrei de dimensiuni reduse
 Planificarea APLICATIEI
Postura trecătoare
 programul e tranzient, axat pe o singură
funcție - arhivator, program scanare, antivirus
 interfața este clară cu butoane mari & precise
 programul poate reprezenta un suport pentru
o aplicație suverană
 nu se rulează maximizat dar poate rula în
fundal
 programele trecătoare ar trebui să folosească
o interfață mai incisivă
 Planificarea APLICATIEI
Postura demonică
 postură adoptată de daemon-i = programe ce
nu interacționează cu utilizatorii realizând
activități în fundal uneori vitale
 ar trebui să fie complet invizibile, nu ar trebui
să raporteze starea unei activități folosind o
interfață modală
 dacă daemon-ul trebuie configurat frecvent nu
trebuie să fie vizibil
Planificarea APLICATIEI
 Planificarea APLICATIEI

Postura parazită
se bazează deseori pe aplicații
suverane și trecătoare
prezență continuă cu rol mai mult de aplicație
trecătoare, uneori nu realizează nimic util
paraziții nu ar trebui să focalizeze (prea mult)
atenția utilizatorului
exemple - Xwindow
- widget-uri – Mac OS X
- gadget-uri – Vista
 Planificarea APLICATIEI
Postura mixtă - Delphi, Kylix, GIMP
 Planificarea interfeței
 trebuie să se urmărească strucutura task-
urilor = scopuri & subscopuri ale utilizatorului
 gruparea elementelor de interfață
 spațială
 elemente grafice de separare
 cromatică
 grupare logică vs. grupare fizică
 stabilirea unei ordini de prezentare
 de asigurat simetria & echilibrul
Planificarea interfeței
PLANIFICAREA interfeței
Planificarea interfeței
Planificarea interfeței
Planificarea interfeței
Planificarea interfeței
Planificarea interfeței
Planificarea interfeței
Contraexemplu
Structura interfeței
Structura interfeței
Structura interfeței
 Structura interfeței
Recomandări prezentare consistentă informații
proporția ferestrelor
numărul total de elemente de control
procentul de spațiu neocupat de controale
densitatea elementelor de interfață
 distanțele față de marginile ferestrei
 echilibrul afișării pe orizontală & verticală
omogenitatea textului afișat – font & mărime
 utilizarea adecvată a culorii
dimensiunile & amplasarea celor mai des
utilizate elemente de control
Structura interfeței
 Overhead

 Overhead ≡ costul de utilizare a unei

aplicaţii via o interfaţă și timpul pierdut
pentru a realiza o anumită operaţie

 Overhead-ul poate deveni benefic

pentru începători dar este deranjant
pentru utilizatorii experimentaţi
 Overhead
Apariția mesajelor de eroare
nu trebuie să se recurgă la altă fereastră
pentru a schimba ceva din fereastra curentă
utilizatorul nu trebuie forţat să-şi aducă
aminte
utilizatorul nu trebuie obligat să
redimensioneze şi/ sau să mute ferestrele -
mai ales la o interfaţă MDI
utilizatorul nu trebuie să-şi confirme
acţiunile
acţiunile utilizatorului nu trebuie să conducă
la eroare
 Overhead
Sfaturi
procesarea nu trebuie oprită prosteşte
prin dialoguri inutile

programul trebuie să se auto-protejeze

aplicaţia nu trebuie să devină stupidă
Overhead
 Overhead
Sfaturi
 în orice situație utilizatorul să poată face Undo
 conferă utilizatorului un semn de libertate
 toate dialogurile trebuie să aibă un buton
Cancel
datele oferite de utilizator trebuie să fie
editabile
de oferit shortcut-uri ușor de învățat pentru
operații frecvente
 acceleratori  CTRL+S, Alt+Tab
 abrevieri de comenzi – ex. ls, <p>, defun, ..
 bookmark-uri & istoric/ history
 stiluri, șabloane, biblioteci, soluții
 sugestii la căutare
 Overhead
Sfaturi
 operațiile executate timp îndelungat trebuie să
poată fi oprite (anulate)
 utilizatorul trebuie să fie informat despre
starea sistemului – modificare cursor, bara de
stare, highlight, schimbare stil de afișare
timp de răspuns – feedback
< 0.1 s  (aproape) instantaneu
0.1-1 s  nu necesită feedback deşi
utilizatorul observă că trebuie să aştepte
1-5 s  va apărea cursorul “ocupat” - busy
> 1-5 s  va fi afişată o bară de progres
 Overhead
Sfaturi
 evitarea supraîncărcării memoriei
meniurile de preferat limbajelor de comenzi
controale combo-box în loc de text-edit
de utilizat comenzi generice oricând e posibil
Open, Save, Copy, Paste, Quit, ...
toate informațiile necesare utilizatorului la un
moment dat să fie vizibile și ușor de găsit
ajutorul acordat trebuie să fie constructiv
 speak user language
proiectarea trebuie să fie minimalistă
 less is more
 Overhead
 aplicația trebuie să memoreze informațiile
introduse de utilizator
 din punctul de vedere al utilizatorului -
programul pare ignorant, uituc, slab, lipsit
de inițiativă, irascibil
 task-urile trebuie să fie coerente și naturale
 întrebări
cât de mult trebuie să ţină minte programele?
ce trebuie să ţină minte?
cât timp trebuie să ţină minte?
 REZUMAT
 Capacități umane – percepție, capacități
motorii și decizionale, memoria, atenția,
vederea
 Design vizual – elemente, aspecte, principii,
dimensiuni, strategii, greșeli
 Planificarea aplicației – flux vizual, principiul
suprapunerii, asigurarea orchestrației
 Planificarea interfeței
 Structura interfeței
 Overhead