dezvoltarea aplicaţiilor web la nivel de client (cursul #3): design web. interacţiune,...
DESCRIPTION
Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.htmlTRANSCRIPT
![Page 1: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
design Web
interacțiune, utilizabilitate & metodologii de proiectare
![Page 2: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“I’ve been amazed at how often those outsidethe discipline of design assume that
what designers do is decoration.Good design is problem solving.”
Jeff Veen
![Page 3: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Scop
dezvoltarea de produse digitale(recurgând la tehnologii Web)
![Page 4: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
aspecte privind interacțiunea Web(Christian Crumlish & Erin Malone, 2009)
![Page 5: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
aspecte privind interacțiunea Web(Christian Crumlish & Erin Malone, 2009)
detalii în cursul de la master“Interacțiune om-calculator”
![Page 6: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Goal
Alan Cooper et al., 2007
![Page 7: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:numeroase idiomuri de interacțiune
Jenifer Tidwell, 2006
![Page 8: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:numeroase idiomuri de interacțiune
fiecare oferă propriul vocabular de elemente de interes, acțiuni și reprezentări (vizuale, sonore, tactile,…)
user experience – UX
![Page 9: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
forms
text editors
graphic editors
spreadsheets
Web browsers
calendars
multimedia players
charts
immersive games
Web documents
social (virtual) environments
e-business applications
maniere tipice de interacțiune cu utilizatorul
![Page 10: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:eterogenitatea platformelor actuale
calculatoare de tip desktop (personale)dispozitive portabile: smart-phones, tablete, automobile
soluții de redare: printer, fax, advertising screen etc.home appliances – e.g., (smart) TV, washing machine,…
dispozitive sociale: ATM, info kiosk, photo boothplatforme de amuzament – e.g., Blu-ray player, Wii, XBox
adaptare după Jean Vanderdonckt, 2006
![Page 11: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
la lucru
exemple: aplicații de birou/afaceri,
medii de dezvoltare (IDEs), utilitare etc.
![Page 12: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
acasă
exemplificări: software pentru amuzament personal/familial, player-e multimedia, aplicații sociale, jocuri,…
![Page 13: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
during travelling
exemple: management de informații personale, planificatoare, comunicare instantanee, servicii bazate
pe locația geografică, sisteme de recomandare,…
![Page 14: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:existența contextelor multiple de interacțiune
contexte/locații specificelocație de concert, spital, mall, restaurant, muzeu,…
exemplificări: aplicații/servicii “smart” oferite deplatforme mobile sau de chioșcuri informaționale
![Page 15: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
googlemobileads.blogspot.com/2012/08/navigating-new-multi-screen-world.html
![Page 16: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Realitate:volumul & diversitatea utilizatorilor
utilizatori tradiționalipersoane, comunitate de interes, populația unei țări,…
+utilizatori speciali
segment de vârstă (copii, vârstnici), profesiune,cu anumite probleme – disabilities: motorii, senzoriale etc.
![Page 17: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
De ce anume avem nevoiepentru a proiecta o interfață Web?
![Page 18: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
discipline și specializări (Challis Hodge)
![Page 19: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
discipline și specializări (Challis Hodge)
Creative Director, Information Architect, Interaction Designer,
Visual Designer, User Researcher, Usability Engineer
![Page 20: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe sarcinile de efectuat(task-centered interface design)
axată asupra scopurilor dezvoltatorului:usurința implementării, utilizarea tehnologiei,…
![Page 21: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe sarcinile de efectuat(task-centered interface design)
de obicei, utilizatorul este ignorat
![Page 22: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe sarcinile de efectuat(task-centered interface design)
feature-centric software (aplicații mamut)multe facilități, unele niciodată folosite
![Page 23: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe necesitățile utilizatorului(user-centered interface design)
proiectarea trebuie să ia în considerațieașteptările utilizatorului (user expectations)
![Page 24: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe necesitățile utilizatorului(user-centered interface design)
un aspect important îl reprezintă utilizabilitatea
![Page 25: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectare focalizată pe necesitățile utilizatorului(user-centered interface design)
aplicațiile Web trebuie să simplifice task-urilepe care le are de îndeplinit utilizatorul
![Page 26: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul utilizatorului (user model)versus
modelul de implementare (implementation model)
Alan Cooper, 1995, 2007
![Page 27: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul utilizatorului (user model)versus
modelul de implementare (implementation model)
cel mai simplu model trebuie să primeze
![Page 28: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Keep the Simple Simple
no matter how complex the overall system,there is no excuse for not keeping simple tasks simple
Jef Raskin, 2000
![Page 29: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Există puține cazuri în care utilizatoriichiar știu ceea ce doresc să realizeze
Rogers, 2007
![Page 30: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Activitățile “naturale” trebuie anticipatepe baza comportamentului perceput al utilizatorilor
Rogers, 2007
![Page 31: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
User InterfaceHumane Interface(Raskin, 2000)
an interface is humane if it is responsive tohuman needs and considerate of human frailties
![Page 32: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Design values
așteptările utilizatorilor referitoare la interfața Web
(Peter Morville)
![Page 33: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce reprezintă utilizabilitatea?
![Page 34: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
se referă la cât de “bine” utilizatoriipot exploata funcționalitatea unui sistem
Jakob Nielsenwww.useit.com/alertbox/20030825.html
![Page 35: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
learnability
cât de ușor o persoană poate învățasă utilizeze un sistem (interfața sa)
![Page 36: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
![Page 37: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
efficiency
după ce utilizatorul a învățat interfața,cum poate s-o folosească în mod optim?
![Page 38: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Firefox – o parte dintre combinațiile de taste
![Page 39: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
memorability
cât de facil este pentru utilizatorsă-și amintească interacțiunea cu un sistem?
![Page 40: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
![Page 41: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatoruluitrebuie să poate fi ușor detectate/corectate
![Page 42: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplu: utilizarea edit-in-placepentru modificarea datelor introduse
![Page 43: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizabilitatea
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?
![Page 44: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.flickr.com/groups/insults/
![Page 45: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“The applications that are easy to useare designed to be familiar.”
Jenifer Tidwell
![Page 46: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
![Page 47: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Există anumite metodologii de proiectare?
![Page 48: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Se preferă metodologii de proiectare iterative
“washing machine”
![Page 49: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
study
design
build
evaluate
![Page 50: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
understand
study
designbuild
evaluate
Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008
![Page 51: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Methodologies
fazele principale ale design-ului Web (Jesse Garrett)
![Page 52: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Metodologiile se pot baza pe diverse modele
![Page 53: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
modele conceptuale privind proiectarea interfeței Web (Robert Baxley, 2003)
![Page 54: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
QOC (Questions, Options, Criteria)Maclean et al., 1991
questions regarding design key issues
possible options to response to each question
evaluation criteria – e.g., ergonomics, accessibility,… –concerning every option
![Page 55: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
QOC (Questions, Options, Criteria)Maclean et al., 1991
exemplu
întrebare: cum alege utilizatorul o locație de livrare?opțiuni: listă de locații, câmp de intrare text,
folosirea unei hărți,…criterii de evaluare: eficiență, interacțiune exclusiv
naturală (e.g., tactilă) etc.
![Page 56: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
![Page 57: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplificare: QOC pentru interacțiunea tactilăcu o aplicație de monitorizare a pacienților
A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012
patientmo.wordpress.com
![Page 58: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea interativă poate atrage utilizatoriiîn diferitele stagii ale proiectului
aceste persoane pot evalua interfațadin primele etape de dezvoltare
![Page 59: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
evoluția dezvoltării de aplicații software(Cooper et al., 2007)
![Page 60: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
oferă o vedere generală a interfeței aplicației Web
![Page 61: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
propune o soluție de proiectareși nu funcționalitatea completă
![Page 62: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
poate avea un caracter dinamic
oferă maniere de experimentare
![Page 63: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Prototipizare (prototyping)
încurajează atragerea utilizatorilorîn procesul de proiectare
poate avea un rol important și în testare
![Page 64: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
prototipul pe hârtie al paginii principale a sitului FII(Sergiu Dumitriu, Marta Gârdea, Sabin Buraga, 2006)
![Page 65: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Twitter – conceptul inițialhttp://www.flickr.com/photos/jackdorsey/182613360/
![Page 66: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Storyboard
oferă descrierea manierei (concrete) de prezentarea informațiilor, fără a lua în considerație funcționalitatea
http://storyboardcentral.blogspot.com/
![Page 67: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Models & Methodologies
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
![Page 68: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Storyboard
în contextul proiectării Web, constă uzual în wireframes
![Page 69: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Wireframe
oferă o vedere generală a structurii interfeței Webși relațiile dintre pagini
wireframe-based design
![Page 70: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Wireframe
creat în prima etapă de dezvoltare a proiectului
oferă indicații designer-ilor și programatorilorprivind înfățișarea și comportamentul interfeței
conceptual page layouts
![Page 71: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
![Page 72: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mockup
oferă un prototip low-fidelityla dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
![Page 73: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mockup
oferă un prototip low-fidelityla dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
utilizat pentru demonstrații, evaluare, învățare,…
![Page 74: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
mockup-uri pentru o aplicație oferind recomandăribazate pe locația geografică
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
![Page 75: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Mockup
exemple de instrumente software:Balsamiq Mockups – www.balsamiq.com
HotGloo – www.hotgloo.comMockFlow – mockflow.com
Mocking Bird – gomockingbird.com/mockingbird/Moqups – moqups.com
Proto.io – http://proto.io/
![Page 76: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Asistent de interfață (wizard)
ajută utilizatorii să creeze în mod dinamic interfața
interactive prototyping
![Page 77: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Studiu de cazproiectarea interfeței Web pentru Apricado Music
http://jeff.io/posts/user-interface-wireframes
![Page 78: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pasul 1: prototip pe hârtie (sketch)
formular de înscriere
![Page 79: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pasul 2: wireframe
![Page 80: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pasul 3: mockup
![Page 81: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
pas 4: implementare
interfața Web concretă
(HTML+CSS+JS)
![Page 82: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Studiu de cazproiectarea interfeței unei aplicații iPhonepentru managementul bugetului personal
Andrei Potorac, 2011
![Page 83: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
storytelling – include notițe utile proiectantului/dezvoltatorului
![Page 84: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
de la mockup la prototipul interfeței(folosirea emulatorului de dispozitiv iPhone)
![Page 85: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
În vederea asigurării calității interfeței proiectate,trebuie urmate diverse standarde & reglementări
![Page 86: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Standarde
impuse de organisme (inter)naționale
www.w3c.org
![Page 87: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Reglementări
mai detaliate & sugestive
pot rezolva anumite conflicte de proiectare
![Page 88: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
ARIA (Accessible Rich Internet Applications) în contextulWeb Accessibility Initiative – www.w3.org/WAI/
![Page 89: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
accessibility (ARIA)
interactivity (JavaScript)
design (CSS)
semantics (HTML + RDFa)
content (text & HTTP)
adaptare după Aaron Gustafson, 2012
![Page 90: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
evaluarea accesibilității unui sit cu instrumentul WAVE(Web Accessibility Evaluation Tool)
![Page 91: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce putem afirma despre utilizatorii aplicațieipe care o vom dezvolta?
![Page 92: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
probabil, nu-l vom agrea (inițial)
![Page 93: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
acea persoană care interacționează direct cu produsul/serviciul (software)
![Page 94: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
acel individ care determină alte persoane să utilizeze produsul/serviciul
![Page 95: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
obține rezultate – de dorit, cele scontate –de la un produs/serviciu specific
![Page 96: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
persoană care ia decizii privind achiziția unui produs/serviciu
![Page 97: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cine este utilizatorul?
entitate care folosește produsul/serviciul oferit de competitor(i)
![Page 98: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
factori demografici
vârstă, gen, etnicitate+
profil psihologic
![Page 99: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
educație
școală primară vs. studii de masterat
![Page 100: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
abilități fizice
simțuri & percepție – e.g., acuitate vizualămemorie (de scurtă/lungă durată)
caracteristici anatomice: mărimea brațelor, înălțime, greutate, musculatură
etc.
![Page 101: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
abilități referitoare la utilizarea calculatoarelor
cunoștințe generale vs. avansate de informatică
eventual, vizând o platformă țintă – e.g., tabletă
![Page 102: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
deprinderi (skills)
citiremânuirea unor dispozitive: tastatură, mouse, telecomandă
interpretarea rezultateloretc.
![Page 103: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
experiența în domeniul specific aplicației
![Page 104: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorii fără cunoștințe anterioare privind Web-ul semantic pot înțelege
și exploata aplicația?
![Page 105: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/105.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
mediul de lucru (contextul)
inclusiv alți factori sociali(e.g., relații cu alte persoane,
moduri de comunicare – 1:1, 1:n, n:m)
![Page 106: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/106.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
exemplificare
![Page 107: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/107.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
Care e populația de utilizatori (beneficiarii)?
categorii principale: atleți, rudele & prietenii lor, personal administrativ, publicul, reporteri sportivi,…
exemplificare
![Page 108: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/108.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
Care sunt manierele de interacțiune?
tipuri de dispozitive: PC, telefoane mobile, chioșcuri informaționale, ecrane publice,
dispozitive oferind acces la Web: smart phones, tablete,…
exemplificare
![Page 109: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/109.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Proiectarea unei aplicații Web oferind servicii de comunicare online în contextul jocurilor olimpice de iarnă
Care sunt tipurile de conținuturi dorite?
date disponibile în formate multiplegrafice (charts)
date/interacțiuni limitate vs. complexeposibilități de căutare
filtrare – eventual, multicriterialăreutilizare – e.g., partajare în alte aplicații/servicii
exemplificare
![Page 110: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/110.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
abordări:
chestionare completate de utilizatori (user surveys)interviuri
observații (in)directe (user tracking, feedback)testare bazată pe utilizatori reali (user testing)
![Page 111: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/111.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Utilizatorul: caracteristici ce trebuie identificate
abordări:
chestionare completate de utilizatori (user surveys)interviuri
observații (in)directe (user tracking, feedback)testare bazată pe utilizatori reali (user testing)
user research
![Page 112: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/112.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
modelul (abstract) al utilizatoruluidin punct de vedere al abilităților cognitive
(Card, Moran & Newell, 1983; Wickens, 1984)
![Page 113: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/113.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum putem proiecta interfețele Webîn cazul în care nu știm care e audiența reală?
![Page 114: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/114.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Folosind modele abstracte,putem specifica diverse clase de utilizatori
personas
![Page 115: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/115.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
oferă o descriere precisă a utilizatorului unui sistemși ceea ce dorește acesta să realizeze
user archetype
Alan Cooper, 1999www.cooper.com/journal/personas/
![Page 116: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/116.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
deși nu substituie utilizatorul real,îl reprezintă pe parcursul fazelor de proiectare
Blomkvist, 2002
![Page 117: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/117.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
facilitează crearea profilului concretal unui utilizator tipic al aplicației Web
![Page 118: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/118.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
proiectarea trebuie realizatăconform necesităților și scopurilor
fiecărei categorii de utilizatori
![Page 119: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/119.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Persona
aspecte de considerat:vârstă, abilități, etnicitate, aspecte sociale etc.
![Page 120: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/120.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
Student Tourist Single (wo)man
Name Andreea G. Paul R. Ioana P.
Age 19 32 27
Location Iasi, Romania Paris, France Bucharest, Romania
Social Life
For her, going to university was a challenge because she
had to leave home, separate from her parents and beginning the process
of finding her identity, as an adult, and her place in the
world.
Because his earnings are above average and because he works at least 50 hours
per week, when he has some free time he likes to
make the most of it.
She doesn’t have time for dating wrong persons.
Work Life She is a student in
her freshman year at Computer Science.
He works as a software developer, but now he
is on vacation.
She is a hard working woman.
Goals
A new city meant new people & new friends.
That is why she was glad to take part of a Social Speed event. From her point of view, it’s a fun way to
He believes that the person blesses the place. That is way when he travels he
thinks it is very important to know and understand the residents. Because of
From her point of view, this application is the perfect
combination between online dating and real life dating. She knew from the
start that this was not a
![Page 121: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/121.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
Student Tourist Single (wo)man
Name Andreea G. Paul R. Ioana P.
Age 19 32 27
Location Iasi, Romania Paris, France Bucharest, Romania
Social Life
For her, going to university was a challenge because she
had to leave home, separate from her parents and beginning the process
of finding her identity, as an adult, and her place in the
world.
Because his earnings are above average and because he works at least 50 hours
per week, when he has some free time he likes to
make the most of it.
She doesn’t have time for dating wrong persons.
Work Life She is a student in
her freshman year at Computer Science.
He works as a software developer, but now he
is on vacation.
She is a hard working woman.
Goals
A new city meant new people & new friends.
That is why she was glad to take part of a Social Speed event. From her point of view, it’s a fun way to
He believes that the person blesses the place. That is way when he travels he
thinks it is very important to know and understand the residents. Because of
From her point of view, this application is the perfect
combination between online dating and real life dating. She knew from the
start that this was not a
unei persona i se atașează un nume, fotografie, plus anumite date demografice
![Page 122: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/122.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
persona – un template HTML5http://profs.info.uaic.ro/~stefan.negru/personas/
![Page 123: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/123.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
personas pentru proiectul PaMI (Patient Monitoring Interface)A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012
![Page 124: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/124.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
S.T.U.P.I.D. userStressed Tired Untrained Passive Independent Distracted
S.M.A.R.T. design
Simply Memorable Accept autopilot Recovery Test in realistic situations
www.boxesandarrows.com/view/are-your-users-s-t-u
![Page 125: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/125.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
www.vincentbroquaire.com
![Page 126: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare](https://reader033.vdocuments.net/reader033/viewer/2022060109/5552c0bdb4c90581158b4743/html5/thumbnails/126.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: proiectarea interacțiunii Web
gracefuldegradation
progressiveenhancement
responsiveWeb design
mobile first