Proiectarea Interfetelor Utilizator

The user is always right unless proven otherwise by the developer.
Rule of Open-Source Programming #6
A mature process empowers people to work effectively and efficiently
Proiectarea interfeţelor utilizator
Capitolul II
Obiectivul principal:
Proiectarea interacţiunilor dintre utilizator şi calculator necesare

preluării intrărilor şi generării ieşirilor din sistem, fie ele
formulare/formate sau rapoarte.
„toate relaţiile puternice sunt exprimate prin comunicare. Chiar mai mult, formele
comunicării dau expresie şi relaţiilor. Între dragoste şi ură nu e decât un pas: câteva
cuvinte neinspirate pot schimba prezentul cu trecutul – câteva comenzi
necorespunzătoare pot transforma dragostea faţă de un produs-program în ură.
Mijloacele prin care trebuie să comunicăm cu calculatorul şi cele prin care el
comunică cu noi vor afecta în mod determinant relaţia noastră cu acesta”
Boris Beizer
1. Definirea conceptului de interfaţă utilizator
Accepţiuni ale noţiunii de interfaţă:
 interfaţa dintre sistemul informaţional şi mediul său extern relevant
 interfaţa dintre componentele software ale sistemului informatic
 interfaţa dintre om şi calculator – interfaţa utilizator
Definirea interfeţei utilizator:
 în sens restrâns – echipamentele de intrare-ieşire şi programele care le

deservesc.
 în sens larg – include şi alte componente: manualul de instruire şi alte

documentaţii
1. Definirea conceptului de interfaţă utilizator
În sens restrâns, interfaţa utilizator este formată din:
 componente hardware
 componente software
Componentele software ale interfeţei utilizator
 ecranele pentru culegerea datelor (formularele)
 meniul
 dialogurile prin intermediul cărora utilizatorii pot iniţia diferite operaţiuni

2. Identificarea interfeţelor utilizator
Această activitate presupune analiza atentă a intrărilor şi ieşirilor în/din sistem, pe baza
 diagramelor fluxurilor de date
 a graniţelor informatizării.
Exemple:
1. fluxul de intrare FACTURA sugerează proiectarea unui ecran prin intermediul căruia
utilizatorul să poată interacţiona cu sistemul în vederea preluării datelor din facturi
2. fluxul de ieşire JURNALUL DE CUMPĂRĂRI impune proiectarea unui set de dialoguri
care să permită utilizatorului generarea acestui raport
Există două categorii de intrări/ieşiri în/din sistem:

 care solicită utilizatorul în mod direct şi hotărâtor - interfeţe utilizator
 care nu presupun intervenţia utilizatorului sau ea este minimală - interfeţe sistem
2. Identificarea interfaţelor utilizator
Tipuri de interfeţe sistem
 Culegerea automată a datelor de intrare prin intermediul unor echipamente
speciale (scanerele, cititoarele de coduri bară – POS-uri, recunoasterea caracterelor
scrise cu cerneala magnetica, dispozitivele RFID, utilizarea chestionarelor)
 Intrări provenite de la alte aplicaţii, integrate prin:
schimbul de mesaje - de exemplu, o comandă primită prin sistemul EDI
partajarea unei baze de date comune - datele preluate şi stocate de o aplicaţie
vor putea fi accesate şi de alte aplicaţii, prin includerea în program a unei fraze
SELECT SQL.
 Ieşiri automate către alte aplicaţii – de exemplu, înregistrarea intrării în stoc a
produselor finite poate determina generarea şi transmiterea automată a unui mesaj
către sistemul de gestiune a vânzărilor
 Ieşiri care presupun intervenţie umană minimă – generarea şi transmiterea
lunară a situaţiei detaliate a soldului pentru clienţii importanţi.
3. Metode de interacţiune om – calculator
1. Limbaj-comandă
2. Meniuri
3. Ecrane pentru introducerea datelor (formulare)

Interacţiunea prin meniuri
Liste simple cu opţiuni

Zone cu comenzi şi linii-meniu
Meniuri de tip bară
Meniuri context
Meniuri prin imagini/pictograme (icons)
Interacţiunea prin meniuri. Meniuri context
Caracteristici
conţine doar opţiunile de lucru specifice obiectului selectat, în funcţie de
contextul de lucru în care se află utilizatorul
apare pe ecran lângă obiectul selectat
este activat prin selectarea unui obiect şi apăsarea butonului dreapta al
mouse-ului
Interacţiunea prin meniuri. Meniuri context
Interacţiunea prin meniuri. Meniuri prin imagini (icons)
Caracteristici:
 acţiunile de întreprins sunt exprimate prin imagini (icons), nu prin cuvinte
 imaginile folosite funcţionează ca butoanele
Avantaje:
 imaginile sunt cât se poate de sugestive, facilitând utilizarea, memorarea şi
recunoaşterea comenzilor
Dezavantaje:
 sensurile simbolurilor diferă de la o cultură la alta
Interacţiunea prin meniuri. Meniuri prin imagini (icons)
Meniu prin imagini

Interacţiunea prin ecrane pentru introducerea datelor
 permit utilizatorilor să completeze câmpurile din ecrane cu date preluate din
documentele primare
 datele introduse sunt salvate în baza de date
 permit şi vizualizarea într-o formă logică, structurată, a datelor din bază

Obiecte de control pentru construirea formularelor
Obiecte de control pentru construirea formularelor
Cycle button
Expander
Slider
Spinner Progress bar
Group
box
Exemplu de ecran pentru culegerea datelor (formular)
Funcţiuni ce trebuie incluse în formulare
 Deplasarea în formular
 Deplasarea de la un câmp la următorul/precedentul/primul/ultimul
 Posibilităţi de editare
 Ştergerea unei linii dintr-o grilă (grid)
 Facilităţi de ieşire
 Salvarea conţinutului formularului în baza de date
 Confirmarea salvării formei editate sau trecerea la un alt ecran
 Oferirea informaţiilor ajutătoare
 Furnizarea de informaţii despre orice câmp sau despre întregul formular
 Tehnici de validare a datelor introduse

 Testarea lipsei datelor în unele câmpuri
 Verificarea încadrării valorilor în anumite intervale
5. Principii de proiectare a interfeţelor utilizator
Standarde industriale
 Apple Computer (1992) -

https://developer.apple.com/library/mac/documentation/UserExperi
ence/Conceptual/OSXHIGuidelines/DesignPrinciples.html
 IBM (1992)
 Microsoft (1995) - https://msdn.microsoft.com/en-

us/library/windows/desktop/ff728831%28v=vs.85%29.aspx
Regulile de bază ale proiectării interfeţelor utilizator
1. Controlul aplicaţiei de către utilizator
2. Limitarea cantităţii de informaţii pe care utilizatorul o

memorează
3. Uniformitatea interfeţelor utilizator
Regula 1 - Controlul aplicaţiei de către utilizator
Utilizatorul trebuie să simtă că el controlează aplicaţia, nu invers
Aplicarea acestei reguli depinde de:
• experienţa utilizatorilor în lucrul cu interfeţe grafice şi
• experienţa utilizatorilor în domeniul problemei.
Exemplu de interfaţă în care utilizatorul este sub controlul aplicaţiei:
Doriţi să adăugaţi un nou material (d/n)? d

Introduceţi codul materialului: 108250
Introduceti denumirea materialului: Cherestea fag
Introduceti unitatea de măsură:
mc
Introduceti preţul:
560200
Doriţi sa salvaţi (d/n)?
d
Principii aplicate
 Utilizarea judicioasă a modurilor de lucru
 Păstrarea stilului de lucru al utilizatorilor
 Alegerea între utilizarea tastaturii şi/sau a mouse-ului
 Retroacţiunea (feed-back) imediată
 Asigurarea transparenţei detaliilor de proiectare a programelor şi a bazei

de date
Principiul utilizării judicioasă a modurilor de lucru
Mod de lucru - context în care se află o aplicaţie la un moment dat:

 în care utilizatorul poate efectua doar anumite operaţiuni
 de care depinde funcţia pe care o realizează un obiect al interfeţei
Exemple:
 modurile de lucru insert/overwrite din procesoarele de texte
 modul de lucru inserare obiect în Visible Analyst
Moduri de lucru comune în aplicaţiile economice:

 vizualizare
 adăugare
 editare.
Principiul utilizării judicioasă a modurilor de lucru
 modurile de lucru limitează controlul utilizatorului asupra aplicaţiei
 utilizatorul va efectua un număr suplimentar de operaţiuni, pentru a trece de la un
mod de lucru la altul
Utilizarea lor este recomandată atunci când:

 există diferite categorii de utilizatori cu drepturi diferite
 se urmăreşte simplificarea interfeţei
 realizarea unor operaţiuni critice
 frecvenţa redusă a operaţiunilor
Principiul retroacţiunii imediate
Aplicarea acestui principiu presupune ca interfaţa:
 să indice utilizatorului dacă acţiunea iniţiată de el a fost realizată

 să afişeze rezultatul acţiunii sale
 informarea despre starea operaţiunii în curs, dacă execuţia acesteia
durează mai mult timp
 precizarea modului în care o operaţiune poate fi suspendată sau anulată
Principiul retroacţiunii imediate
Lipsa retroacţiunii:
 crează utilizatorului o stare de nesiguranţă şi discomfort
 îl obligă la eforturi suplimentare pentru a se asigura că operaţiunea
iniţiată a fost finalizată
Moduri de informare a utilizatorului:

 prin actualizarea liniei de stare a ferestrei principale,
 prin afişarea unui mesaj,
 prin schimbarea culorilor
 prin iniţierea unei casete de dialog.
Principiul păstrării stilului de lucru al utilizatorilor
Interfaţa trebuie să reflecte:

 experienţa trecută a utilizatorilor
 aşteptările utilizatorilor
 părerile
 dorinţele utilizatorilor
Principiul alegerii între utilizarea tastaturii şi/sau a mouse-ului
 utilizatorii nu trebuie forţaţi să folosească mouse-ul
 interfaţa trebuie să fie optimizată pentru lucrul cu tastatura sau cu mouse-ul –

schimbarea tastaturii cu mouse-ul oboseşte utilizatorul şi îi diminuează randamentul
interfaţa trebuie optimizată pentru utilizarea tastaturii în cazul operaţiilor cu grad

mare de repetabilitate
 optimizarea interfeţei pentru lucrul cu tastatura implică acordarea unei atenţii

deosebite facilităţilor de deplasare
Principiul transparenţei interfeţei utilizator
Interfaţa trebuie sǎ ascundǎ detaliile privind:

 structura bazei de date
 logica prelucrǎrilor din modulele de program
Exemple:
 neafişarea codurilor interne din baza de date care nu interesează utilizatorii
 controlarea riguroasă a mesajelor de eroare
Regula 2 - Limitarea cantităţii de informaţii care trebuie memorată de utilizator
Limitele memoriei umane:
 memoria pe termen scurt este limitatǎ în ce priveşte perioada şi capacitatea de

memorare
 memoria pe termen lung este limitatǎ în ceea ce priveşte regǎsirea informaţiei
Principii aplicate
 degrevarea utilizatorului de memorarea pe termen scurt a unor informaţii
 Orientarea interfeţelor pe recunoaştere, nu pe amintire
 Prevederea formelor scurte de lucru
 Relevanţa vizuală a obiectelor interfeţei

Principiul degrevării utilizatorului de memorarea pe termen scurt
Atunci când se trece de la un ecran la altul, aplicaţia trebuie să memoreze
informaţiile necesare pentru utilizator
Trebuie luate în considerare limitele memorării pe termen scurt:
 timp redus de păstrare - aproximativ 30 de secunde
 volum redus - circa 5 – 9 elemente

Principiul orientării interfeţelor pe recunoaştere, nu pe amintire
Metode de regăsire a informaţiei memorată:

 recunoaşterea – se bazează pe utilizarea sugestiilor
 amintirea – fără utilizarea sugestiilor
Exemple:
 utilizarea listelor în locul căsuţelor de text, atunci când este posibilă
 selectarea unei comenzi din meniu în locul tastării ei
 utilizarea metaforelor
Principiul prevederii formelor scurte de lucru
Modalitǎţi de definirea a formelor scurte de lucru:
 utilizarea comenzilor mnemonice - pentru selectarea unei opţiuni din meni sau a
unui element dintr-o căsuţă de tip listǎ
 utilizarea tastelor speciale sau a combinaţiilor de taste - pentru iniţierea mai
directă operaţiunilor
Principiul relevanţei vizuale
 Sugestivitatea obiectelor - ele sǎ fie uşor de înţeles

- titluri explicite şi inteligibile pentru obiectele care conţin date
- nume sugestive pentru butoane şi grupurile de obiecte
 Organizarea obiectelor interfeţei - vizeazǎ gruparea şi aranjarea lor
- gruparea şi delimitarea prin linii sau chenare a obiectelor legate din
punct de vedere logic
- aranjarea obiectelor în concordanţǎ cu cerinţele funcţionale ale
utilizatorilor
- reflectarea structurii documentului de pe care se preiau datele
 Simplitatea interfeţei - evitarea creării de ecrane încǎrcate
- nu trebuie sacrificatǎ funcţionalitatea aplicaţiei de dragul simplitǎţii
Regula 3 - Uniformitatea interfeţelor utilizator
Aplicarea aceloraşi convenţii de proiectare a interfeţelor:
 în cadrul aplicaţiei
 în cadrul sistemului, între diferitele aplicaţii
 cu cele ale sistemului de operare
Beneficii:
 învăţarea mai uşoară a noilor aplicaţii
 reducerea numărului erorilor în culegerea datelor
Regula 3 - Uniformitatea interfeţelor utilizator
Principii aplicate:
 Principiul uniformităţii în prezentarea interfeţei – utilizatorul să vadă obiectele

interfeţei în acelaşi mod d.p.d.v logic, fizic şi vizual
 comenzile similare din ecrane diferite să aibă acelaşi nume
 Principiul uniformităţii în comportamentul interfeţei – acelaşi obiect trebuie

să aibă un comportament similar în situaţii şi ecrane diferite
 afişarea aceluiaşi mesaj de eroare pentru situaţiile similare ivite în locuri
diferite ale aplicaţiei
 Principiul uniformităţii interacţiunii cu interfaţa

 combinaţiile de taste trebuie sǎ aibǎ aceleaşi funcţiuni de la un ecran
la altul sau de la un program la altul
6. Demersul proiectării interfeţelor utilizator
Proiectarea interfeţelor trebuie să implice în mod direct utilizatorii
Principiile proiectării orientate spre utilizator:
 Orientarea spre utilizator şi atribuţiile sale de serviciu, încă de la începutul
dezvoltării sistemului informaţional
 Evaluarea specificaţiilor de proiectare în vederea asigurării uşurinţei
învăţării şi utilizării noului sistem
 Angajarea unui proces iterativ de dezvoltare

Fazele procesului iterativ de proiectare a interfeţelor utilizator:
1. Colectarea şi analiza informaţiilor privind utilizatorii si sarcinile lor de lucru

2. Proiectarea interfeţei utilizator
3. Implementarea interfeţei
4. Validarea interfeţei
2) Proiectarea 1) Analiza
3) Construirea 4) Validarea
Faza 1 Culegerea şi analiza informaţiilor privind utilizatorii
1. Determinarea profilului utilizatorilor – identificarea capacităţilor şi cunoştinţelor

utilizatorilor
Categorii de utilizatori:
 nu au cunoştinţe în domeniul lor de activitate şi nici experienţă în lucrul cu
calculatorul
 fără cunoştinţe în domeniul lor de activitate, dar sunt familiarizaţi cu
sistemele informatice
 au experienţă bogată în domeniul lor de activitate, dar mai puţină experienţă
în utilizarea calculatorului
 experimentaţi atât în domeniul lor de activitate, cât şi în utilizarea sistemelor
informatice
Faza 1 Culegerea şi analiza informaţiilor de la utilizatori
2. Analiza sarcinilor de lucru ale utilizatorilor
Oferă răspunsuri la unele întrebări, precum:

Care sunt sarcinile realizate de utilizatori?
Care atribuţii sunt mai importante pentru activitatea desfăşurată de utilizator?
Care sunt operaţiunile necesare pentru realizarea unei atribuţii de serviciu?
Care sunt informaţiile de care are nevoie utilizatorul pentru a-şi îndeplini
atribuţiile?
Care sunt rezultatele obţinute pentru fiecare atribuţie de serviciu?
Care este frecvenţa de realizare a fiecărei sarcini de serviciu?
Cum ar putea sistemul să-l ajute pe utilizator în realizarea atribuţiilor sale?
3. Identificarea cerinţelor de lucru ale utilizatorilor
 reducerea numărului de erori în culegerea datelor
 automatizarea unor activităţi
 sporirea vitezei de culegere a datelor
 efectuarea anumitor verificări asupra datelor introduse
 semnalarea unor situaţii de excepţie

4. Analiza mediului de lucru al utilizatorilor – culegerea de informaţii despre:
 caracteristicile fizice ale mediului de lucru (luminozitate, zgomote, spaţiu etc.)
 aspectele de ergonomie a muncii
 nevoi speciale ale utilizatorilor cu diverse infirmităţi
5. Armonizarea cerinţelor utilizatorilor cu sarcinile lor de serviciu - se verifică

dacă cerinţele exprimate de utilizatori corespund cu caracteristicile sarcinilor de lucru
Exemplu: Proiectarea ecranului pentru preluarea comenzilor primite de la clienţi
1. Profil utilizatori
- abilităţi minime în utilizarea calculatorului;
- o bună cunoaştere a produselor firmei;
- nivel mediu de experienţă în preluarea şi prelucrarea comenzilor.
2. Activităţile utilizatorilor
- înregistrarea unei comenzi noi;
- modificarea unei comenzi;
- anularea unei comenzi;
- vizualizarea datelor privind comenzile unui client.
3. Cerinţele utilizatorilor
- timpi mici de răspuns, mai ales în cazul primirii comenzilor prin telefon;
- interfeţe asemănătoare cu cele din mediul Windows;
- posibilitatea de tipărire a comenzilor;
- posibilitatea de transmitere de notificări către client, cu privire la
înregistrarea comenzii sale, mai ales în cazul primirii ei prin telefon;
- oferirea de informaţii privind stocul disponibil;
- servirea simultană a mai multor utilizatori;
- flexibilitatea derulării dialogurilor pentru situaţia primirii comenzii prin telefon;
- întreruperea şi abandonarea unei activităţi.
4. Mediul de lucru al utilizatorului

- cerinţele standard pentru utilizarea desktop-urilor conectate la reţeaua firmei pentru
accesarea bazei de date, în condiţiile utilizării telefonului;
- utilizarea de laptop-uri conectate la Internet pentru accesarea bazei de date a firmei
de la sediul clienţilor;
- servirea simultană a mai multor utilizatori.
5. Armonizarea cerinţelor cu sarcinile utilizatorilor

- stocurile trebuie actualizate la timp pentru a oferi clienţilor informaţii corecte;
- reţeaua de calculatoare a firmei trebuie să fie capabilă să gestioneze simultan cererile
mai multor utilizatori, în timp cât mai scurt.
Faza 2 Proiectarea interfeţei utilizator
1. Definirea obiectivelor de calitate a interfeţelor
Obiectivele generale privind calitatea interfeţelor utilizator:
 uşor de învăţat
 uşor de utilizat
Obiectivele se definesc în legătura cu patru factori:
 utilitatea - măsura în care interfaţa permite utilizatorului să-şi atingă scopul
 eficacitatea - uşurinţa şi rapiditatea realizării sarcinilor de lucru
 uşurinţa învăţării - timpului de instruire necesar
 atitudinea - percepţia şi opiniile utilizatorilor asupra celorlalţi trei factori

2. Definirea scenariilor şi sarcinilor de lucru
 scenariu = descriere generală a unei atribuţii de serviciu ca o succesiune de

operaţiuni executate de utilizator
 scenariile definite trebuie să ghideze proiectarea interfeţelor, nu invers
 definirea de scenarii de lucru distincte, pentru fiecare categorie de utilizatori

3. Definirea obiectelor şi acţiunilor interfeţei
Citirea descrierii scenariilor de lucru şi întocmirea unei liste care să conţină:
Substantivele Obiect Câmp de date (nume client, număr factură)
Verbele Acţiune Comandă (salvare date)
4. Determinarea reprezentărilor vizuale ale obiectelor interfeţei
 utilizarea unui meniu de tip bară dacă un ecran oferă mai mult de şase
opţiuni de lucru (recomandare IBM)
1. Definirea obiectivelor de calitate a interfeţelor
Factorii calităţii Obiectivele de calitate

Utilitatea După 5 scenarii de lucru, 90% dintre utilizatori vor fi capabili să
realizeze cu succes o operaţiune.
Eficacitatea După 5 scenarii de lucru, 75% dintre utilizatori vor fi capabili să
realizeze cu succes o operaţiune, în mai puţin de 2 minute
Uşurinţa După o oră de instruire, toţi utilizatorii vor fi capabili să realizeze
invăţării cele mai importante sarcini de lucru.
Atitudinea După efectuarea a 5 scenarii de lucru, 85% dintre utilizatori vor
aprecia satisfacţia obţinută prin nivelul 5.5, pe o scară de la 1
la 7.
Scenariul 1. Introducerea unei comenzi noi
 Alegerea clientului. Utilizatorul introduce codul clientului după care va verifica dacă
numele şi adresa acestuia corespund cu datele înscrise pe document; în cazul în care
utilizatorul nu ştie codul clientului, şi nici nu este trecut în document, atunci el va selecta
numele acestuia din lista clienţilor.
 Adăugarea unui client nou (dacă clientul dorit nu există în baza de date).
 Completarea datelor de individualizare a comenzii (numărul dat de client, numărul intern,
atribuit în mod automat de sistem, şi data înregistrării, preluată din sistem, dar care poate fi
modificată de utilizator).
 Completarea modalităţii de plată şi a termenului de livrare.
Scenariul 1. Introducerea unei comenzi noi (continuare)
Adăugarea articolelor comandate - operaţie reluată pentru fiecare articol:

 Selectarea produsului - utilizatorul introduce codul produsului după care va
verifica dacă denumirea acestuia corespunde cu cea înscrisă pe document; în cazul
în care codul produsului nu apare în document şi utilizatorul nu-l ştie sau acesta este
incorect, atunci el va selecta produsul respectiv dintr-o listă cu toate produsele.
 Verificarea unităţii de măsură, a stocului disponibil şi a preţului unitar.
 Completarea cantităţii comandate pentru articolul respectiv.
 Verificarea valorii calculate pentru articolul respectiv.
Scenariul 1. Introducerea unei comenzi noi (continuare)
Verificarea totalului valoric al comenzii, prin compararea totalului rezultat în urma adăugării
datelor cu totalul înscris în comandă.
Salvarea comenzii.
Transmiterea unei notificări către client; în cazul primirii comenzii prin telefon, clientul poate
solicita confirmarea înregistrării comenzii sale prin transmiterea unui email cu toate detaliile.
Tipărirea comenzii, dacă utilizatorul doreşte acest lucru (în special în cazul comenzilor
primite prin telefon).
3. Definirea obiectelor şi acţiunilor interfeţei
Obiectele ecranului Acţiunile ecranului
Client Adăugare client nou
Cod client Salvare comandă
Nume client (listă) Transmitere notificare
Adresă client Tipărire comandă
Comandă Căutare comandă
Numărul comenzii dat de client Modificare date
Cod intern al comenzii Adăugare articol
Data înregistrării comenzii Ştergere articol
Modalitatea de plată Abandonare
Termen de livrare Anulare comandă
Articol comandă
Cod produs
Denumire produs (listă)
Unitate de măsură
Stoc existent
Preţ unitar
Valoare articol
Total valoric comandă
Perioada de căutare/afişare comenzi
Faza 3 Construirea prototipului interfeţei utilizator
Reguli fundamentale de construire a prototipului:
 Construirea prototipului cât mai devreme cu putinţă
 Construirea de prototipuri pentru mai multe alternative de proiectare
 Renunţarea la codul scris pentru un prototip, dacă el nu corespunde
specificaţiilor finale
Medii pentru crearea prototipurilor:
 produse CASE
 instrumente grafice specializate - Prototypers (prototipizoare) sau Demo
Builders (constructori demo)
 mediul de implementare – Visual Basic, C#, Java
Exemple de GUI prototyping tools:
 Pidoco
 ForeUI
 AxureRP
 Pencil - An open-source GUI prototyping tool that's available for ALL platforms.
Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that
people can easily install and use to create mockups in popular desktop platforms.
 moqups – on-line tool
Concepte folosite:
 Wireframe
 Mockup
 Prototype
Exemplu: Proiectarea ferestrei de dialog pentru obţinerea raportului

“Situaţia vânzărilor pe gestiuni şi facturi“
Faza 4 Evaluarea şi validarea interfeţei utilizator
Proiectarea
preliminară
Construire
prototip nr. 1
Construire
prototip nr. N
Modificarea
Evaluarea
specificaţiilor
interfeţei
de proiectare
Analiza
rezultatelor
Interfaţă proiectată
complet
 Obiective - aprecierea comportamentului, performanţelor şi satisfacţiei utilizatorilor
 Evaluarea să fie realizată cât mai devreme şi cât mai des cu putinţă
7. Reguli de proiectare a meniurilor
Meniul conţine o ierarhie de opţiuni, grupate:

 după criterii funcţionale
•Exemplu: Înregistrare tranzacţii, Actualizare date clienţi şi Generare rapoarte
 pe baza obiectelor din sistem

•Exemplu: Comenzi, Livrări, Încasări, Clienţi, Produse
Proiectarea sistemului de meniuri porneşte de la analiza DFD-urilor:
 se ia în considerare caracteristica generală a sistemului (orientare pe
tranzacţii sau pe transformări)

7. Reguli de proiectare a meniurilor
Convenţii de proiectare a meniurilor:
 poziţia Help este întotdeauna ultima din linie
 o săgeată () plasată în dreapta ultimului element înseamnă descompunerea

acestuia în submeniuri
 prezentarea elementelor care, dacă sunt selectate, vor conduce la apariţia

meniurilor pop-up, marcate cu (…)
evidenţierea opţiunilor care pot fi activate la un moment dat
 structura meniului să reflecte succesiunea paşilor pe care o foloseşte utilizatorul
 oferirea accesului direct la opţiunile utilizate frecvent
 separarea opţiunilor care iniţiază acţiuni destructive de cele utilizate frecvent
 includerea în meniu a unor opţiuni de lucru care nu se regăsesc în cerinţele

funcţionale (restaurarea sau arhivarea bazei de date, administrarea utilizatorilor)
8. Reguli de proiectare a interfeţelor Web
1. Includerea numelui şi a logo-ului firmei în fiecare pagină, iar logo-ul să fie o

legătură către pagina de început (home page)
2. Oferirea funcţiei de căutare, dacă site-ul are mai mult de 100 de pagini
3. Scrierea unor antete şi titluri de pagină directe şi simple
4. Facilitarea explorării rapide - utilizarea grupării şi sub-antetelor pentru a

împărţi o listă lungă în câteva unităţi mai mici
5. Utilizarea hypertext-ului pentru a structura spaţiul de afişare - o pagină de

început şi mai multe pagini secundare, fiecare orientată pe un anumit subiect
8. Reguli de proiectare a interfeţelor Web
6. Evitarea construirii unor pagini cu multe fotografii
7. Utilizarea de imagini miniaturale relevante - se vor utiliza, în combinaţie,

redimensionarea şi decuparea.
8. Utilizarea de titluri sugestive pentru legături - care să ofere o imagine corectă

asupra conţinutului paginii înainte de a fi deschisă
9. Oferirea de facilităţi speciale de accesare utilizatorilor cu diferite infirmităţi
10. Conceperea interfeţei în aceeaşi manieră în care o fac ceilalţi

9. Controlul datelor în interfeţele utilizator
Did you know that last year (2012) there were
20,000 pregnant men in Great Britain?
Tipuri de erori:
 Erori de transcriere (transcription error)
 Erori de inversiune (transposition error) – 2758 in loc de 2578
Mecanisme pentru controlul automat al datelor:

 Tipul datelor
 Verosimilitatea datelor
 Alegerea unei valori în locul introducerii ei
 Depistarea datelor lipsă
 Tehnica cifrei de control
 Formatul datelor
 Intervale de valori
 Numărul de caractere
 Compararea datelor introduse cu cele stocate
Exemplu de utilizare a tehnicii cifrei de control
Se consideră codul numeric 12012
Numerele cu care va fi ponderată fiecare cifră din cod sunt: 1 2 0 1 2
1 2 3 5 7
Suma ponderată va fi 1x1 + 2x2 + 0x3 + 1x5 + 2x7 = 24
Restul împărţirii sumei la 9 (modulo 9 din sumă): 24 : 9 = 2, iar restul este 6
Cifra de control este 6, iar codul rezultat va fi 120126.

Alte mecanisme de control
 afişarea informaţiilor de identificare
 afişarea unor totaluri sau a altor câmpuri calculate

10. Formularea specificaţiilor de proiectare a interfeţelor
Specificaţie de proiectare
1. Prezentare generală descriptivă
1.1. Numele interfeţei/dialogului
1.2. Caracteristicile utilizatorului
1.3. Caracteristicile activităţii
1.4. Caracteristicile sistemului
1.5. Caracteristicile mediului de lucru
2. Proiectele interfeţelor/dialogurilor
2.1. Proiectele formularelor/formatelor/rapoartelor
2.2. Diagramele secvenţelor de derulare a dialogurilor şi prezentarea descriptivă a lor
3. Testarea şi evaluarea interfeţelor/dialogurilor în utilizare
3.1. Obiectivele testării
3.2. Procedurile testării
3.3. Rezultatele testării
3.3.1. Timpul de învăţare
3.3.2. Viteza de execuţie
3.3.3. Rata erorilor
3.3.4. Rezistenţa în timp
3.3.5. Satisfacţia şi alte percepţii ale utilizatorului
1. „Give users what they ask for. If they wants lots of reports and reams of
data, then that is what you should provide. Otherwise, they will feel that you
are trying to tell them how to do their jobs.”
2. “Systems analysts should let user know what information can be obtained
from the system. If you listen to users, you’ll never get anywhere, because they
really don’t know what they want and don’t understand information systems.”
• Optimize resizable window layouts for an effective resolution of 1024x768
pixels. Automatically resize these windows for lower screen resolutions in a way that
is still functional.
• Don't use blue text that isn't a link, because users may assume that it is a link.
Use bold or a shade of gray where you'd otherwise use colored text.
• Don't use OK for error messages. Users don't view errors as being OK. If the error
message has no direct action, use Close instead.
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511331.aspx
 Reconsider disabled controls. Disabled controls can be hard to use because users
literally have to deduce why they are disabled. Disable a control when users expect it
to apply and they can easily deduce why the control is disabled. Remove the control
when there is no way for users to enable it or they don't expect it to apply, or leave it
enabled, but provide an error message when it is used incorrectly.
Tip: If you aren't sure whether you should disable a control or provide an
error message, start by composing the error message that you might provide.
If the error message contains helpful information that target users aren't likely
to quickly deduce, leave the control enabled and provide the error. Otherwise,
disable the control.
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511331.aspx

Proiectarea Interfetelor Utilizator

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiectarea Interfetelor Utilizator

Încărcat de

Drepturi de autor:

Formate disponibile

The user is always right unless proven otherwise by the developer.

Rule of Open-Source Programming #6

A mature process empowers people to work effectively and efficiently

Proiectarea interfeţelor utilizator

Proiectarea interacţiunilor dintre utilizator şi calculator necesare

Accepţiuni ale noţiunii de interfaţă:

 interfaţa dintre sistemul informaţional şi mediul său extern relevant

 interfaţa dintre componentele software ale sistemului informatic

 interfaţa dintre om şi calculator – interfaţa utilizator

Definirea interfeţei utilizator:

 în sens restrâns – echipamentele de intrare-ieşire şi programele care le

 în sens larg – include şi alte componente: manualul de instruire şi alte

În sens restrâns, interfaţa utilizator este formată din:

Componentele software ale interfeţei utilizator

 ecranele pentru culegerea datelor (formularele)

 dialogurile prin intermediul cărora utilizatorii pot iniţia diferite operaţiuni

Există două categorii de intrări/ieşiri în/din sistem:

3. Ecrane pentru introducerea datelor (formulare)

Interacţiunea prin meniuri

Liste simple cu opţiuni

Interacţiunea prin meniuri. Meniuri context

conţine doar opţiunile de lucru specifice obiectului selectat, în funcţie de

contextul de lucru în care se află utilizatorul

apare pe ecran lângă obiectul selectat

este activat prin selectarea unui obiect şi apăsarea butonului dreapta al

Interacţiunea prin meniuri. Meniuri prin imagini (icons)

Interacţiunea prin meniuri. Meniuri prin imagini (icons)

Meniu prin imagini

 permit utilizatorilor să completeze câmpurile din ecrane cu date preluate din

 datele introduse sunt salvate în baza de date

 permit şi vizualizarea într-o formă logică, structurată, a datelor din bază

Spinner Progress bar

 Tehnici de validare a datelor introduse

 Apple Computer (1992) -

 Microsoft (1995) - https://msdn.microsoft.com/en-

Regulile de bază ale proiectării interfeţelor utilizator

1. Controlul aplicaţiei de către utilizator

2. Limitarea cantităţii de informaţii pe care utilizatorul o

Utilizatorul trebuie să simtă că el controlează aplicaţia, nu invers

Aplicarea acestei reguli depinde de:

• experienţa utilizatorilor în lucrul cu interfeţe grafice şi

• experienţa utilizatorilor în domeniul problemei.

Exemplu de interfaţă în care utilizatorul este sub controlul aplicaţiei:

Doriţi să adăugaţi un nou material (d/n)? d

 Utilizarea judicioasă a modurilor de lucru

 Păstrarea stilului de lucru al utilizatorilor

 Alegerea între utilizarea tastaturii şi/sau a mouse-ului

 Retroacţiunea (feed-back) imediată

 Asigurarea transparenţei detaliilor de proiectare a programelor şi a bazei

Mod de lucru - context în care se află o aplicaţie la un moment dat:

Moduri de lucru comune în aplicaţiile economice:

 modurile de lucru limitează controlul utilizatorului asupra aplicaţiei

 utilizatorul va efectua un număr suplimentar de operaţiuni, pentru a trece de la un

mod de lucru la altul

Utilizarea lor este recomandată atunci când:

Aplicarea acestui principiu presupune ca interfaţa:

 să indice utilizatorului dacă acţiunea iniţiată de el a fost realizată

Moduri de informare a utilizatorului:

Principiul păstrării stilului de lucru al utilizatorilor

Interfaţa trebuie să reflecte:

 utilizatorii nu trebuie forţaţi să folosească mouse-ul

 interfaţa trebuie să fie optimizată pentru lucrul cu tastatura sau cu mouse-ul –

interfaţa trebuie optimizată pentru utilizarea tastaturii în cazul operaţiilor cu grad

 optimizarea interfeţei pentru lucrul cu tastatura implică acordarea unei atenţii