Elemente grafice in interfata utilizator

1. Elemente grafice in interfata utilizator HCI – curs 7

2. 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

3. 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

4. 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!

5.   Cand optiunile nu sunt opuse… Check-box sau radio-button? • Ar fi mai potrivit un grup de butoane radio? • 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  

6. 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

7.     Recomandari • Grupati check-box-urile relationate • Aliniati check-box-urile vertical, nu orizontal • Nu folositi check-box-urile pt a indica progresul

8. 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 “:”

9.  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 check-box-ul • Daca o optiune e recomandata, puneti in eticheta mentiunea “recommended” • Nu folositi controale subordonate pentru a completa eticheta check-box-ului

10. 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

11. 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 check-box • Daca ambele controale sunt potrivite, atunci folositi butoane radio numai daca eticheta check-box-ului neselectat nu este extrem de clara  

12. 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  

13. 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  

14. 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    

15. Spatiere, dimensiuni

16. 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.

17. 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 “:” 

18. 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

19. 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

20. Butoane  

21. Afiseaza cutia de dialog Print - setari Listeaza o singura copie la imprimanta implicita Folosirea “…” • Atunci cand pentru efectuarea unei comenzi este nevoie de informatii suplimentare, inclusiv confirmare, adaugati etichetei butonului “…” • Nu folositi “…” pentru a indica faptul ca la apasarea butonului se va deschide o alta fereastra (comanda nu e incompleta!)

22. 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

23. 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

24. Forma scurta 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 “…”

25. 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

26. Moduri de utilizare • Butoane directionale: folosite pentru a indica directia in care are loc actiunea

27. 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)

28. 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…   

29. 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 check-box-uri • La butoanele split - faceti implicita optiunea cel mai des folosita  

30. 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

31. Dimensiuni, spatiere Conversii din pixeli: http://www.unitconversion.org

32.    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)

33. Incepe imediat 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

34.  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 !  

35. 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 “…” 

36. 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

37. 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

38. Liste derulante • Exista o valoareimplicita care esterecomandatapentrumajoritateautilizatorilor? Sunteminteresati in ascundealternativelept a nu incurajautilizatoriisafacaschimbari? Daca nu, folosimbutoane radio sauliste cu selectieunica • Doritisaatragetiatentiaasupraoptiunilor? Daca da – butoane radio, liste cu selectieunica ` • Economia de spatiupeecranesteprioritara? – spatiul e fix si independent de numarul de optiuni • Mai existasialtelistederulante in fereastra? Daca da - consistenta

39. 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?

40. 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.

41. Moduri de utilizare • Listederulante • Listederulante cu previzualizare - oferasprijinutilizatorilor in alegereauneioptiuniprinintermediulprevizualizarii   

42. 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

43. Recomandari • NU folositi evenimentul de modificare a unei liste sau a unui combo-box 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  

44. 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>)

45. Recomandari • Listederulante: • Limitatidimensiuneaintrariiatuncicand e posibil (dacavalorilesunt de la 0 -999 – 3 caractere) • Plasati la inceputullisteiderulantevalorilecelmai des folosite (nu toateposibilitatile, deoareceutilizatorii au sansasaintroducavaloriledorite) • Utilizareaprompturilor – cand se face economie de spatiusi nu se dorestefolosireauneietichete, scris in italic gri, needitabil, farasemne de punctuatie, iarprompterultrebuiesareaparadacacontrolulpierdefocusulsi nu a fostcompletat prompter

46. 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  

47. 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 “:”

48. 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)

49. 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

50. Moduri de folosire • Liste cu selectie unica • Liste cu selectie multipla: zonele selectate se stabilesc folosind CTRL+click, SHIFT+click