Transcript Elemente grafice in interfata utilizator

Elemente grafice in interfata
utilizator
HCI – curs 7
Tipuri de elemente grafice
•
•
•
•
•
•
•
•
•
•
•
•
•
Check-box
Butoane radio
Butoane de comanda
Drop-down list/combo-box
Liste
Bare de progres
Slidere
Baloane de informare
Cutii de text
Bare de stare
Taburi
Tool-tipuri
Tree
semantica
Check-box -uri
• Folosite pentru a lasa utilizatorii sa aleaga intre doua optiuni care
sunt exclusive
• Eticheta asociata indica starea selectata
• Ar trebui folosite numai pentru a schimba o optiune din on in off sau
pentru a selecta/deselecta un item
Grup de check-box-uri
Este controlul potrivit?
• Este folosit pentru a schimba din on in off starea unui control sau
pentru a selecta un item?
• Starile selectate sau deselectate sunt in mod clar opuse (fara
ambiguitati)?
• Cand sunt folosite intr-un grup, optiunile sunt dependente astfel
incat sa poata fi selectate una sau mai multe optiuni? – check-box
cu tratarea neselectarii unei optiuni
• Numarul de optiuni din grup este mai mic sau egal cu 10? Daca nu,
folositi lista de check-box-uri!
Check-box sau radio-button?
• Ar fi mai potrivit un grup de butoane radio?


Cand optiunile nu sunt opuse…
• Se vor folosi butoane radio cand optiunile sunt suficient de
importante pentru a ocupa spatiul cu afisarea lor


• In general, recomandabil sa fie folosite in wizarduri, pentru a face
optiunile clar vizibile
Folosite cand…
• Selectie individuala
• Selectii independente dintr-un grup de check-box-uri (0 sau mai
multe)
• Selectii dependente
• Selectii mixte – pentru a indica faptul ca o setare are loc pentru un
numar de obiecte, dar nu neaparat toate
Recomandari
• Grupati check-box-urile relationate
• Aliniati check-box-urile vertical, nu orizontal



• Nu folositi check-box-urile pt a indica progresul

Recomandari
• Nu folositi selectarea unui check-box pentru:
– Deschiderea unei ferestre!
– Lansarea unor comenzi!
– Afisarea dinamica a unor controale relationate cu check-box-ul
(screen-reader-ele nu le pot detecta!)
• Controalele subordonate trebuie aliniate cu eticheta checkbox-ului,
iar aceasta trebuie sa se termine “:”
Etichete, dimensiuni si spatiere
• Etichetele:
– Puneti eticheta fiecarei optiuni
– Eticheta se scrie folosind Sentence case si fara semne de
punctuatie la sfarsit (exceptie – controale subordonate “:”)
– Pentru un grup de check-box-uri incercati sa aveti aceeasi
lungime a etichetelor
– Pentru un grup de check-box-uri puneti accent pe ceea ce le
diferentiaza (daca un text e comun tuturor, mutati-l la sfarsit)
– Daca eticheta e pe mai multe linii, aliniati prima linie cu checkbox-ul
– Daca o optiune e recomandata, puneti in eticheta mentiunea
“recommended”
– Nu folositi controale subordonate pentru a completa eticheta
check-box-ului

Butoane radio
• Permit utilizatorilor sa faca o selectie intre mai multe optiuni mutual
exclusive, dar relationate
• De obicei se folosesc in grupuri – functioneaza ca un control unic, in
care numai optiunea selectata este accesibila cu TAB, iar mutarea
de la o optiune la alta se face cu sagetile
Folosite cand…
• Controlul va fi folosit pentru selectia unei optiuni dintr-o lista de
optiuni exclusive?
• Numarul de optiuni este intre 2 si 7?
– Daca numarul e mai mare, se va folosi o lista cu selectie simpla
sau o lista drop-down
• Un check-box ar fi o alegere mai buna?
– Daca exista numai doua optiuni, se poate folosi un singur checkbox
– Daca ambele controale sunt potrivite, atunci folositi butoane
radio numai daca eticheta check-box-ului neselectat nu este
extrem de clara


Folosite cand…
• Folositi butoane radio in wizard-uri, pentru a face optiunile clare
• Folositi butoane radio daca aveti suficient spatiu pe ecran si
optiunile sunt suficient de importante pentru a ocupa spatiul de pe
ecran


• O lista drop-down ar fi o solutie mai buna? Daca exista o optiune
implicita recomandata, atunci e preferabil drop-down
• Ar fi mai potrivita folosirea unui grup de butoane de comanda sau un
split button?
– Daca butonul radio e folosit pentru a modifica modul in care se
executa o comanda – preferabil butoane
• Valorile nu sunt numerice? Daca valorile sunt numerice, preferabil
cutii de text , liste drop-down sau slidere
Recomandari
• Listati optiunile in ordine logica – de la cea mai frecvent selectata la
cea mai rar selectata, de la cele mai simple operatii la cele mai
complexe, de la cele cu risc mai redus la cele cu risc sporit
• Daca nici una din optiuni nu este o optiune valida, furnizati
posibilitatea unei noi optiuni (None sau Does not apply)
• Este preferabil sa aliniati butoanele radio vertical, nu orizontal

• Nu folositi butoane radio pentru:
– A efectua comenzi
– A afisa alte ferestre
– A afisa sau ascunde dinamic controale

Recomandari
• Nu folositi butoane radio imbricate, nici butoane radio in combinatie
cu check-box-uri


• Furnizati o optiune selectata implicit (cea mai sigura, cea mai
frecventa) – exceptii – nu exista o astfel de valoare, scopul e de a
culege date nebiasate, controlul trebuie sa reflecte starea interfetei
• Faceti prima optiune sa fie cea implicita


Spatiere, dimensiuni
Etichete
• Etichetele butoanelor radio:
– Puneti eticheta fiecarui buton
– Folositi majuscule pentru etichete
– Nu folositi semne de punctuatie
– Incercati sa folositi etichete de lungimi similare
– Puneti accent pe diferenta dintre optiuni
– Folositi afirmatii, nu negatii (do in loc de do not)
– Eticheta trebuie pastrata concisa; daca e nevoie de explicatii
suplimentare, acestea se vor pune sub eticheta, in forma unor
propozitii complete, cu punctuatie, in cadrul unor controale de tip
text.
Etichete
– Daca o optiune este recomandata, puneti in paranteze
(recommended)
– Daca o optiune este pentru utilizatori avansati, specificati langa
eticheta (advanced)
– Daca o eticheta se intinde pe mai multe linii, aliniati partea
superioara a etichetei cu butonul radio
• Etichete pentru grupuri de butoane radio:
– Folositi eticheta pentru a explica scopul grupului, nu pentru a
explica modul in care se face selectia
– Toate grupurile de butoane radio trebuie sa aiba etichete,
acestea nu trebuie sa fie propozitii si se incheie cu “:”

Butoane
• Folosite pentru a initia o comanda imediata
• Butonul implicit este activat la prima apasare a tastei Enter
• Orice buton devine implicit cand utilizatorul se muta cu tab-ul pe el
Folosit cand…
• Este folosit pentru a initia o actiune imediata?
• Un link ar fi o optiune mai buna?
– Actiunea este de navigare in alta pagina, help, fereastra
(exceptie Wizard – butoane Next /Prev)
– Comanda este inclusa intr-un text mai lung
– Comanda este parte a unui meniu sau a unui grup de link-uri
inrudite
– Eticheta este lunga, de 4-5 cuvinte
• O combinatie de butoane radio si butoane de comanda ar fi o solutie
preferabila?
– Daca sunt 5 sau mai multe actiuni posibile
– Utilizatorii au nevoie sa vada informatie suplimentara inainte de
a lua o decizie
– Utilizatorii vad posibilitatile ca si optiuni in loc de comenzi diferite
Butoane


Folosirea “…”
• Atunci cand pentru efectuarea unei comenzi este nevoie de
informatii suplimentare, inclusiv confirmare, adaugati etichetei
butonului “…”
Afiseaza cutia de dialog
Print - setari
Listeaza o singura copie la
imprimanta implicita
• Nu folositi “…” pentru a indica faptul ca la apasarea butonului se va
deschide o alta fereastra (comanda nu e incompleta!)
Moduri de utilizare
• Butoane implicite – actionate la ENTER
• Butoane standard
• Butoane “usoare” – li se vede conturul doar la trecerea mouseului
• Butoane de tip meniu – cand nu se doreste un meniu real (cutie de
dialog, toolbar) – pentru o multime redusa de optiuni
Moduri de utilizare
• Butoane split: pentru a grupa mai multe variatii ale aceleiasi
comenzi
– Deosebirea de butoane meniu – actionarea partii stangi a
meniului lanseaza direct comanda prezentata, fara a mai derula
lista de optiuni
– Salveaza si prezinta ultima actiune aleasa sau cel mai frecvent
aleasa optiune
Moduri de utilizare
• Butoane Browse:
• Lanseaza cutii de dialog care ajuta utilizatorii sa selecteze fisiere,
directoare, calculatoare, culori
• Etichetate cu Browse… pentru a indica faptul ca e nevoie de
informatii suplimentare
• Alte etichete Other… sau More…
• In ferestrele in care sunt necesare mai multe butoane Browse se
poate folosi forma scurta, care contine doar “…”
Forma scurta
Moduri de utilizare
• Butoane cu expunere progresiva (progressive disclosure buttons) –
folosite pentru a prezenta/ascunde informatii folosite rar
– Progressive disclosure – ascunderea optiunilor folosite rar
• Dupa actionare, eticheta se schimba pentru a indica faptul ca
urmatoarea actiune va avea efectul opus
Moduri de utilizare
• Butoane directionale: folosite pentru a indica directia in care are loc
actiunea
Recomandari
• Afisati un pointer care indica “busy” daca operatia nu se efectueaza
imediat, altfel s-ar putea ca utilizatorii sa efectueze click din nou
• Daca acelasi buton de comanda apare in mai multe ferestre,
incercati sa pastrati eticheta, tasta de acces si eventual si pozitia in
cadrul ferestrei, daca e posibil
• Pentru un buton de comanda care are eticheta, folositi inaltimea
standard si latimea minima necesara
• In fiecare fereastra, faceti butoanele sa aiba aceeasi latime. Daca
este imposibil, limitati latimile la maxim doua variante
• Cand exista o relatie intre o componenta grafica (textbox) si un
buton, pozitionati butonul in una din urmatoarele pozitii:
– In dreapta controlului (exemplu Browse)
– Sub control si aliniat la stanga
– Centrat vertical intre controalele cu care se afla in relatie
(butoane directionale)
Recomandari
• Daca exista mai multe butoane care interopereaza cu acelasi
control, acestea vor fi asezate vertical in partea dreapta a
controlului, aliniate orizontal cu controlul, sau sub control, aliniate
orizontal
• Nu lucrati cu butoane inghesuite, prea inalte sau inguste – vor arata
neprofesional…

 
Recomandari
• Evitati combinarea etichetelor cu elemente grafice – aglomereaza
• Sunt indicate numai daca simbolurile grafice sunt standard si aduc
informatie relevanta


• In general, textul este preferabil
• Nu folositi butoane pentru a seta stari – butoane radio sau checkbox-uri
• La butoanele split - faceti implicita optiunea cel mai des folosita
Recomandari
• Butoane implicite:
– Faceti astfel incat fiecare cutie de dialog sa aiba un buton
implicit
– Alegeti comanda cea mai sigura (fara pierdere de informatie) sa
fie implicita
– Nu faceti o actiune destructiva implicita, decat daca exista o
varianta usoara de anulare a consecintelor sale
Dimensiuni, spatiere
Conversii din pixeli: http://www.unitconversion.org
Etichete
• Asociati o eticheta fiecarui buton
• Daca un buton are ca eticheta doar un simbol grafic, asociati
valoare proprietatii Name (pentru screen readere)
• Asociati o singura tasta de acces unui buton, cu exceptia butoanelor
OK (Enter) si Cancel (Escape)
• Nu redenumiti butonul Cancel, decat daca provoaca ambiguitati (e
neclar care actiune este anulata)



Etichete
• Etichetele trebuie sa inceapa cu un verb imperativ
– Exceptii: Advanced, Back, Details, Forward, Less, More, New,
Next, No, OK, Options, Previous, Properties, Settings, Yes
• Cu toate ca etichetele scurte sunt preferabile, in unele situatii e mai
bine sa folosim suficient text care sa explice semnificatia butonului
• Prima litera a etichetei sa fie majuscula



• Nu folositi cuvantul “now” in etichetele butoanelor – pare caraghios
• Exceptie:
Duce la o fereastra de unde se poate face download
Incepe imediat
Etichete
• Nu folositi “later” decat daca actiunea are loc automat cu adevarat
mai tarziu

• Pentru butoanele care deschid alte ferestre alegeti o eticheta care
contine partial sau total titlul urmatoarei ferestre
• Cand utilizatorul trebuie sa raspunda la o intrebare cu Yes/No, nu
folositi butoanele Ok/Cancel !


Etichete
• Folositi “…” numai daca e nevoie de informatii suplimentare pentru a
efectua comanda (Browse…, Print…)
• Nu folositi “…” cand efectuarea cu succes a unei actiuni presupune
deschiderea unei ferestre noi
• About, Advanced, Options, Properties, Help nu sunt niciodata
urmate de “…”

Liste derulante si combo-box-uri
• Folosite pentru a permite utilizatorului sa selecteze una din mai
multe optiuni mutual exclusive
• Combo-box (casuta cu optiuni) permite si adaugarea unei optiuni
care nu e in lista
Folosite cand….
• Controlul este folosit pentru a alege una din mai multe optiuni
mutual exclusive?
• Optiunile sunt comenzi? Daca da → buton meniu sau split
• Continutul listei cuprinde date, mai degraba decat optiuni?
– pentru optiuni putine – radio button
Liste derulante
• Exista o valoare implicita care este recomandata pentru majoritatea
utilizatorilor? Suntem interesati in ascunde alternativele pt a nu
incuraja utilizatorii sa faca schimbari? Daca nu, folosim butoane
radio sau liste cu selectie unica
• Doriti sa atrageti atentia asupra optiunilor? Daca da – butoane radio,
liste cu selectie unica
`
• Economia de spatiu pe ecran este prioritara? – spatiul e fix si
independent de numarul de optiuni
• Mai exista si alte liste derulante in fereastra? Daca da - consistenta
Liste derulante editabile
• Regulile de la liste derulante +…
• Puteti prevedea cele mai frecvente optiuni?
• Lista este folosita pentru a afisa si inputurile anterioare ale
utilizatorilor?
• Utilizatorii au nevoie sa localizeze rapid o inregistrare?
Liste editabile
• Este important sa incurajam utilizatorii sa cantareasca optiunile?
• Vreti sa atrageti atentia asupra optiunilor?
• Spatiul de pe ecran este prioritar? Daca da – lista derulanta
editabila
• Daca folositi liste editabile, este indicat sa aveti cel putin 3 elemente
in lista pentru a justifica prezenta listei pe ecran.
Moduri de utilizare
• Liste derulante
• Liste derulante cu previzualizare - ofera sprijin utilizatorilor in
alegerea unei optiuni prin intermediul previzualizarii



Moduri de utilizare
• Liste derulante editabile – permit utilizatorilor sa introduca valori
care nu exista in lista derulanta
• Liste editabile –combo-box care permite introducerea de noi valori –
este preferabila unei liste derulante editabile pentru ca dorim sa
lasam utilizatorii sa evalueze alternativele
Recomandari
• NU folositi evenimentul de modificare a unei liste sau a unui combobox pentru:
– A efectua comenzi
– A afisa alte ferestre precum cutii de dialog care sa preia input
– A afisa dinamic alte controale (screen reader-ele nu le vad)
• Sortati logic componentele unei liste punand optiunile apropiate
impreuna, plasand optiunile cele mai frecvente la inceput sau
folosind ordonarea alfabetica


Recomandari
• Meta-optiunile All sau None trebuie sa fie la inceputul listei,
indiferent de modul de sortare a listei
• Meta-optiunile All, None trebuie incluse in paranteze ()
• Daca dezactivati o lista sau o lista derulanta, dezactivati si
butoanele si etichetele asociate
• Daca o lista derulanta este folosita pentru a schimba continutul unui
alt control, schimbati continutul controlului imediat, fara necesitatea
actionarii unui buton suplimentar
• Nu lasati elemente goale (blank) in lista, ci folositi metaoptiuni
(<All>, <None>)
Recomandari
• Liste derulante:
• Limitati dimensiunea intrarii atunci cand e posibil (daca valorile sunt
de la 0 -999 – 3 caractere)
• Plasati la inceputul listei derulante valorile cel mai des folosite (nu
toate posibilitatile, deoarece utilizatorii au sansa sa introduca
valorile dorite)
• Utilizarea prompturilor – cand se face economie de spatiu si nu se
doreste folosirea unei etichete, scris in italic gri, needitabil, fara
semne de punctuatie, iar prompterul trebuie sa reapara daca
controlul pierde focusul si nu a fost completat
prompter
Spatiere, dimensiune, etichete
• Latimea trebuie sa corespunda celei mai lungi date de intrare
• Alegeti o dimensiune a listei care sa evite scroll-ul vertical
nenecesar:
– Listele editabile – 3-12 elemente
– Listele derulante – pana la 30 itemi
• Etichete: un singur cuvant care incepe cu majuscula, urmat de “:”
• Pozitionate deasupra controlului sau in stanga sa, aliniat la stanga


Etichete, instructiuni
• Daca este nevoie de instructiuni suplimentare legate de utilizarea
controlului, plasati-le sub control
• Nu faceti controlul parte a unei propozitii…
• Daca e necesara specificarea unei unitati de masura sau a altor
detalii legate de control, acestea vor sta in paranteze, dupa eticheta,
inainte de “:”
Liste
• Utilizatorii pot sa selecteze dintr-o lista vizibila de optiuni fie o
optiune (lista cu selectie unica), fie zero sau mai multe valori (lista
cu selectie mutlipla)
Folosite cand…
• Utilizatorii trebuie sa aleaga dintre o multime de optiuni
• Lista necesita o interactiune continua?
• Selectia multipla este importanta pentru sarcina utilizatorilor? (daca
utilizatorii nu sunt experti, e preferabil un grup de check-box-uri pt ca
selectia este stabila)
• Exista o relatie ierarhica intre inregistrarile din lista? Daca da – tree
view
• Prezenta unor imagini face selectia mai usoara? Daca da – preview
list
Moduri de folosire
• Liste cu selectie unica
• Liste cu selectie multipla: zonele selectate se stabilesc folosind
CTRL+click, SHIFT+click
Moduri de folosire
• Liste de check-box-uri: indica in mod evident ca este posibila
selectia multipla, spre deosebire de listele cu selectie multipla
• Dezavantaj: atrag atentia asupra selectiei mai mult decat asupra
optiunilor, de aceea in mod comun se folosesc listele cu selectie
multipla
• Utilizarea listelor care necesita selectie multipla este destul de rar
intalnita
Moduri de utilizare
• Liste cu preview – permit vizualizarea consecintelor selectiei
• List builders: permit utilizatorilor sa construiasca continutul unei liste
adaugand elemente rand pe rand si modificarea ordinii elementelor
– Constau din doua liste cu selectie unica, cea din stanga contine
o lista fixa de optiuni, iar cea din dreapta este lista care se
construieste si butoanele Add si Remove
Moduri de utilizare
• Liste Add/Remove: permit utilizatorilor crearea unei liste de optiuni
prin adaugarea uneia sau mai multor inregistrari care sunt selectate
folosind o noua cutie de dialog si pot controla ordinea elementelor
• Avantajul list builderelor si listelor add/remove este ca utilizatorii au
control asupra ordinii elementelor atat la construirea listei, cat si
dupa formarea listei
• Utilizatorii pot sa revada continutul selectiei
Recomandari
• Organizati continutul listei intr-o ordine logica
• Optiunile <All>, <None> la inceputul listei
• Nu lasati optiuni goale (blank)


Interactiune
• Furnizati comportament pentru dublu-click echivalent cu selectia
unei inregistrari si actionarea butonului de comanda implicit
• Faceti comportamentul la dublu-click redundant – sa poata fi realizat
cu un buton sau un meniu contextual
• Daca utilizatorii nu pot face nimic cu optiunile selectate, nu permiteti
realizarea selectiei
• La dezactivarea unei liste, dezactivati si etichetele si butoanele de
comanda asociate
• Nu folositi evenimentul de schimbare a selectiei pentru a:
– Efectua comenzi
– Deschide ferestre de dialog care sa culeaga date de intrare
suplimentare
– Pentru a afisa dinamic controale asociate elementului selectatEXCEPTIE – puteti schimba textul care descrie elementul
selectat
Interactiune
• Evitati scroll-ul orizontal
• Scroll-ul orizontal este indicat atunci cand sunt mai multe coloane
care contin elemente sortate alfabetic si este suficient loc pe ecran
• Pentru listele care permit selectia multipla, afisati numarul
elementelor selectate sub lista
Dimensiune si spatiere
• Latimea ar trebui sa corespunda celei mai largi valori valide din lista
• Alegeti o inaltime astfel incat sa se afiseze un numar intreg de
elemente (sa nu apara itemi trunchiati)
• Alegeti o inaltime a listei care sa elimine scrollingul vertical
nenecesar – in general se vor afisa 3-20 itemi intr-o lista
• Daca utilizatorii au avantaje daca e posibil redimensionarea listei si
a ferestrei, faceti fereastra si lista redimensionabila, dar nu afisati
mai putin de 3 inregistrari in lista
Etichete
• Toate listele trebuie sa aiba etichete, scrise ca si cuvinte, dar nu
propozitii, urmate de “:”
• Eticheta trebuie sa inceapa cu majuscule
• Pozitionati eticheta la stanga sau deasupra controlului, aliniata la
stanga cu controlul




Etichete
• Pentru listele cu selectie multipla, faceti sa fie evident faptul ca
permit selectia multipla

 
Alegerea tipului potrivit de lista
Bare de progres (Progress bar)
• Utilizatorii pot urmari progresul unei operatii care este de durata
• O bara de progres poate indica o aproximare a procentajului pana la
finalizare, sau sa indice ca o operatie este in desfasurare
Folosite cand…
• Operatia se va finaliza in cam 5 secunde? Daca da, folositi un
pointer de mouse busy, si abia daca se constata ca operatia
dureaza mai mult, treceti la un progress bar
• Progresul este determinat de actiunile utilizatorului? – nu e indicat
un progress bar – doar pt progresul realizat de calculatoare
• Operatia este de lunga durata (2 minute) si utilizatorii sunt interesati
de finalizarea ei mai degraba decat de progres? Daca da, folositi o
notificare
• La finalizarea operatiei este posibil ca utilizatorii sa doreasca
revizualizarea rezultatului? Daca da, folositi un slider
Concepte de design
• De-a lungul unei operatii lungi, utilizatorii trebuie sa stie ce se
intampla. Ei mai trebuie sa stie:
– Ca o operatie lunga a inceput
– Ca se inregistreaza un progres si ca operatia se indreapta spre
finalizare (nu s-a blocat procesul)
– Procentajul din operatie care s-a inregistrat
– Daca ar trebui sa anuleze operatia daca nu merita sa mai
astepte finalizarea
– Daca mai trebuie sa astepte sau pot face altceva pana la
finalizarea operatiei
Modalitati de folosire
• Bare de progres modale – nu permit utilizatorului efectuarea altor
operatii pana la finalizarea operatiei
• Bare de progres modale cu Stop si Cancel
Modalitati de folosire
• Bare de progres modale cu butoane Cancel/ Stop si animatie
• Bare de progres modale duble – una arata progresul unei operatii,
iar cealalta arata progresul general al operatiei
Modalitati de folosire
• Bare de progres nemodale – utilizatorii mai pot sa faca si alte actiuni
• Bare de progres nedeterminate – indica pur si simplu ca un proces
se desfasoara
• Meters- controale care indica procentajul, dar nu e legat de progres
Recomandari
• Furnizati feedback atunci cand se inregistreaza un progres
(utilizatorii nu trebuie sa ghiceasca daca exista progres sau nu)
• Indicati in mod clar progresul
• Indicati in mod clar lipsa progresului – bara de progres nu trebuie sa
inainteze daca nu s-a facut nici un progres real
• Furnizati informatii relevante legate de progres – furnizati informatii
aditionale numai daca utilizatorilor le sunt de folos. Textul trebuie sa
fie vizibil suficient timp incat sa poata fi citit.
Rata mica a transferului

• Nu furnizati detalii nerelevante

Recomandari
• Furnizati animatii utile – daca sunt alese bine, animatiile
imbunatatesc experienta utilizator, ajutand la vizualizarea operatiei
care se desfasoara
• Nu folositi animatii nenecesare – animatiile pot crea confuzii,
deoarece ruleaza in alt thread decat procesul (nu se sincronizeaza
mereu corespunzator). Utilizatorii ar putea considera ca insasi
animatia e cauza unei incetiniri a procesului
Recomandari
• Animatiile se vor plasa central deasupra barei de progres
• Insotiti finalizarea unei operatii de un avertisment sonor numai daca
operatia dureaza mai mult de 2 minute, e neuzuala si se intampla
rar
• Nu mutati focusul pe progress bar – probabil utilizatorii doresc sa
faca si alte actiuni in timp ce asteapta
• Nu puneti procentajul, nici alt text, pe progress bar

• Nu combinati bara de progres cu un pointer ocupat (clepsidra, etc)
• Nu folositi bare de progres verticale
• Nu restartati progresul

Culori utilizate
• Folositi rosu si galben doar pentru a indica progresul, nu si
finalizarea operatiei (rosu sau galben ii indica utilizatorului faptul ca
el mai trebuie sa realizeze o actiune pentru a finaliza sarcina). Daca
se ajunge intr-o situatie care nu poate fi recuperata, lasati bara de
progres verde si afisati un mesaj explicativ
• Faceti bara de progres rosie in situatia in care este vorba de o stare
care poate fi recuperata si indicati utilizatorului ce trebuie sa faca pt
a merge mai departe
• Faceti bara de progres galbena pentru a indica faptul ca utilizatorul
a oprit temporar realizarea progresului (schimbati eticheta butonului
Pause in Resume) sau daca e o situatie care impiedica progresul
(explicatia problema si furnizati solutia)
Dimensiune si spatiu
• Folositi intotdeauna inaltimea recomandata
• Folositi latimea minima recomandata daca doriti ca bara de progres
sa nu deranjeze
Etichete
•
•
•
•
Folositi o eticheta cu text static, concis, care se termina cu “…”
Eticheta va incepe cu un verb (Copying…)
Textul va incepe cu majuscula
Textul se pozitioneaza deasupra barei de progres aliniat la stanga

• Daca bara de progres este modala, titlul acesteia trebuie sa fie
numele programului/operatiei care se desfasoara
• Nu puneti eticheta progress bar-ului ca titlu al ferestrei

Etichete
Titlul ferestrei este o repetitie a
etichetei barei de progres – ar fi
trebuit sa fie numele aplicatiei

Slidere
• Utilizatorul poate alege dintr-un interval continuu de valori
• Este compus dintr-o bara care marcheaza intervalul si un indicator
care indica valoarea selectata, si poate avea marcaje ale valorilor
Folosite cand…
• Stim ca utilizatorul se gandeste la o valoare relativa, nu la o valoare
precisa (Ex: volumul mediu sau tare)
• Intrebari ajutatoare:
• Setarile se refera la valori relative?
• Setarea este o valoare numerica cunoscuta? Daca da – textbox
numeric
• Utilizatorul are nevoie de feedback instant asupra efectuarii
schimbarii? – daca da – slider
• Setarile necesita 4 sau mai multe valori? Daca nu – butoane radio
• Utilizatorul poate schimba valoarea? Daca nu – textbox numeric
read-only
• Daca si textbox si slider sunt optiuni valide, atunci folositi textbox
daca spatiul e mic sau utilizatorii doresc sa foloseasca tastatura si
slider daca se doreste feedback instant
Recomandari
• Folositi o orientare naturala – daca sliderul reprezinta o valoare care
de obicei e prezentata pe verticala (temperatura) folositi un slider
vertical
• Respectati diferentele culturale (citire de la dreapta la stanga sau de
la stanga la dreapta)
• Dimensionati controlul astfel incat utilizatorii sa aleaga cu usurinta
valoarea dorita folosind mouse-ul
• De cate ori este posibil, furnizati feed-back in timp ce/ imediat dupa
ce utilizatorul a efectuat selectia
• Folositi etichete pentru a indica domeniul de valori
– Exceptie: daca sliderul e vertical si eticheta de la varf e High,
More, Maximum, atunci restul etichetelor pot fi omise
Recomandari
• Folositi marcaje pentru a furniza valoarea aproximativa a unei setari
• Folositi marcaje si etichete pentru a furniza valoarea exacta a unei
setari
• Pentru sliderele orizontale, pozitionati marcajele sub bara sliderului
• Pentru sliderele orientate vertical puneti etichetele la dreapta pentru
culturile care citesc de la dreapta la stanga, invers altfel
• Nu folositi un slider si un textbox numeric pentru aceeasi setare
(exceptie – nevoia de a seta o valoare exacta si feedback imediat)
• Nu folositi slidere pentru a indica progresul
• Nu schimbati dimensiunea sliderului de la valoarea implicita
• Nu etichetati fiecare marcaj
Dimensiuni, spatiere
Etichete
• Eticheta sliderului:
– text static urmat de “:”
– Foloseste majuscula la inceputul etichetei
– Pozitionata la stanga sliderului sau deasupra acestuia si aliniat
la stanga cu sliderul sau cu eticheta
• Etichetele din domeniu:
– Etichetati cele doua capete ale sliderului, daca nu cumva e
vertical si nu e nevoie
– Folositi doar cuvinte, daca e posibil, pentru fiecare eticheta
– Nu folositi semne de punctuatie
– Asigurati-va ca etichetele sunt antonime: Maximum/Minimum,
More/Less, Low/High, Soft/Loud
– Folositi majuscula pentru prima litera din eticheta