Dr. Sabin Buragawww.purl.org/net/busaco

design Web

interacțiune, utilizabilitate & metodologii de proiectare
Jeff Veen

Dr. Sabin Buragawww.purl.org/net/busaco

“I’ve been amazed at how often those outside
the discipline of design...
dezvoltarea de produse digitale
(recurgând la tehnologii Web)

Dr. Sabin Buragawww.purl.org/net/busaco

Scop
(Christian Crumlish & Erin Malone, 2009)

Dr. Sabin Buragawww.purl.org/net/busaco

aspecte privind interacțiunea Web
(Christian Crumlish & Erin Malone, 2009)
detalii în cursul de la master
“Interacțiune om-calculator”

Dr. Sabin Buragawww...
Alan Cooper et al., 2007

Dr. Sabin Buragawww.purl.org/net/busaco

Goal
Jenifer Tidwell, 2006

Dr. Sabin Buragawww.purl.org/net/busaco

Realitate:
numeroase idiomuri de interacțiune
fiecare oferă propriul vocabular de elemente de interes,
acțiuni și reprezentări (vizuale, sonore, tactile,…)
user experi...
multimedia players
charts
immersive games
Web documents
social (virtual) environments
e-business applications

maniere tip...
calculatoare de tip desktop (personale)
dispozitive portabile: smart-phones, tablete, automobile
soluții de redare: printe...
la lucru

exemple:
aplicații de birou/afaceri,
medii de dezvoltare (IDEs), utilitare etc.

Dr. Sabin Buragawww.purl.org/n...
acasă

exemplificări:
software pentru amuzament personal/familial,
player-e multimedia, aplicații sociale, jocuri,…

Dr. S...
during travelling

exemple: management de informații personale,
planificatoare, comunicare instantanee, servicii bazate
pe...
contexte/locații specifice
locație de concert, spital, mall, restaurant, muzeu,…
exemplificări: aplicații/servicii “smart”...
Dr. Sabin Buragawww.purl.org/net/busaco

googlemobileads.blogspot.com/2012/08/navigating-new-multi-screen-world.html
Dr. Sabin Buragawww.purl.org/net/busaco

Realitate:
volumul & diversitatea utilizatorilor

utilizatori tradiționali
perso...
Dr. Sabin Buragawww.purl.org/net/busaco

De ce anume avem nevoie
pentru a proiecta o interfață Web?
Dr. Sabin Buragawww.purl.org/net/busaco

discipline și specializări (Challis Hodge)
Creative Director, Information Architect, Interaction Designer,
Visual Designer, User Researcher, Usability Engineer

Dr. ...
axată asupra scopurilor dezvoltatorului:
usurința implementării, utilizarea tehnologiei,…

Dr. Sabin Buragawww.purl.org/n...
de obicei, utilizatorul este ignorat

Dr. Sabin Buragawww.purl.org/net/busaco

Proiectare focalizată pe sarcinile de efec...
feature-centric software (aplicații mamut)
multe facilități, unele niciodată folosite

Dr. Sabin Buragawww.purl.org/net/...
proiectarea trebuie să ia în considerație
așteptările utilizatorului (user expectations)

Dr. Sabin Buragawww.purl.org/ne...
un aspect important îl reprezintă utilizabilitatea

Dr. Sabin Buragawww.purl.org/net/busaco

Proiectare focalizată pe nec...
aplicațiile Web trebuie să simplifice task-urile
pe care le are de îndeplinit utilizatorul

Dr. Sabin Buragawww.purl.org/...
Dr. Sabin Buragawww.purl.org/net/busaco

Modelul utilizatorului (user model)
versus
modelul de implementare (implementati...
Dr. Sabin Buragawww.purl.org/net/busaco

Modelul utilizatorului (user model)
versus
modelul de implementare (implementati...
no matter how complex the overall system,
there is no excuse for not keeping simple tasks simple

Jef Raskin, 2000

Dr. Sa...
Rogers, 2007

Dr. Sabin Buragawww.purl.org/net/busaco

Există puține cazuri în care utilizatorii
chiar știu ceea ce dores...
pe baza comportamentului perceput al utilizatorilor

Rogers, 2007

Dr. Sabin Buragawww.purl.org/net/busaco

Activitățile ...
an interface is humane if it is responsive to
human needs and considerate of human frailties

Dr. Sabin Buragawww.purl.or...
Dr. Sabin Buragawww.purl.org/net/busaco

Design values

așteptările utilizatorilor referitoare la interfața Web
(Peter Mo...
Ce reprezintă utilizabilitatea?
Dr. Sabin Buragawww.purl.org/net/busaco
se referă la cât de “bine” utilizatorii
pot exploata funcționalitatea unui sistem
Jakob Nielsen
www.useit.com/alertbox/200...
learnability
cât de ușor o persoană poate învăța
să utilizeze un sistem (interfața sa)

Dr. Sabin Buragawww.purl.org/net/...
Dr. Sabin Buragawww.purl.org/net/busaco
efficiency
după ce utilizatorul a învățat interfața,
cum poate s-o folosească în mod optim?

Dr. Sabin Buragawww.purl.org...
Dr. Sabin Buragawww.purl.org/net/busaco

Firefox – o parte dintre combinațiile de taste
memorability
cât de facil este pentru utilizator
să-și amintească interacțiunea cu un sistem?

Dr. Sabin Buragawww.purl.o...
Dr. Sabin Buragawww.purl.org/net/busaco
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatorului
trebuie să poate fi ușor detectate/core...
Dr. Sabin Buragawww.purl.org/net/busaco

exemplu: utilizarea edit-in-place
pentru modificarea datelor introduse
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?

Dr. Sabin Buragawww.purl.org/net/busaco

Utiliza...
www.flickr.com/groups/insults/
Dr. Sabin Buragawww.purl.org/net/busaco
Jenifer Tidwell

Dr. Sabin Buragawww.purl.org/net/busaco

“The applications that are easy to use
are designed to be famil...
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

Există anumite metodologii de proiectare?
“washing machine”

Dr. Sabin Buragawww.purl.org/net/busaco

Se preferă metodologii de proiectare iterative
evaluate
design

build

Dr. Sabin Buragawww.purl.org/net/busaco

study
evaluate

build

study

design

Richard Harper et al. (Eds.), Being Human, Microsoft Research, 2008

Dr. Sabin Buragawww....
Dr. Sabin Buragawww.purl.org/net/busaco

Methodologies

fazele principale ale design-ului Web (Jesse Garrett)
Dr. Sabin Buragawww.purl.org/net/busaco

Metodologiile se pot baza pe diverse modele
Dr. Sabin Buragawww.purl.org/net/busaco

modele conceptuale privind proiectarea interfeței Web
(Robert Baxley, 2003)
Maclean et al., 1991
questions regarding design key issues
possible options to response to each question
evaluation criter...
Maclean et al., 1991
exemplu
întrebare: cum alege utilizatorul o locație de livrare?
opțiuni: listă de locații, câmp de in...
Dr. Sabin Buragawww.purl.org/net/busaco
A. Berilă, A. Bulai, C. Chiric & M. Pleșca, 2012

patientmo.wordpress.com

Dr. Sabin Buragawww.purl.org/net/busaco

exemp...
aceste persoane pot evalua interfața
din primele etape de dezvoltare

Dr. Sabin Buragawww.purl.org/net/busaco

Proiectare...
Dr. Sabin Buragawww.purl.org/net/busaco

evoluția dezvoltării de aplicații software
(Cooper et al., 2007)
oferă o vedere generală a interfeței aplicației Web

Dr. Sabin Buragawww.purl.org/net/busaco

Prototipizare (prototyping)
propune o soluție de proiectare
și nu funcționalitatea completă

Dr. Sabin Buragawww.purl.org/net/busaco

Prototipizare (...
poate avea un caracter dinamic
oferă maniere de experimentare

Dr. Sabin Buragawww.purl.org/net/busaco

Prototipizare (pr...
încurajează atragerea utilizatorilor
în procesul de proiectare
poate avea un rol important și în testare

Dr. Sabin Buraga...
Dr. Sabin Buragawww.purl.org/net/busaco

prototipul pe hârtie al paginii principale a sitului FII
(Sergiu Dumitriu, Marta...
Dr. Sabin Buragawww.purl.org/net/busaco

Twitter – conceptul inițial
http://www.flickr.com/photos/jackdorsey/182613360/
oferă descrierea manierei (concrete) de prezentare
a informațiilor, fără a lua în considerație funcționalitatea
http://sto...
Dr. Sabin Buragawww.purl.org/net/busaco

Models & Methodologies

A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – a...
în contextul proiectării Web, constă uzual în wireframes

Dr. Sabin Buragawww.purl.org/net/busaco

Storyboard
oferă o vedere generală a structurii interfeței Web
și relațiile dintre pagini

wireframe-based design

Dr. Sabin Buraga...
creat în prima etapă de dezvoltare a proiectului
oferă indicații designer-ilor și programatorilor
privind înfățișarea și c...
Dr. Sabin Buragawww.purl.org/net/busaco

A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com
oferă un prototip low-fidelity
la dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.

Dr. Sabin Bur...
oferă un prototip low-fidelity
la dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
utilizat pentr...
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com

Dr. Sabin Buragawww.purl.org/net/busaco

...
exemple de instrumente software:
Balsamiq Mockups – www.balsamiq.com
HotGloo – www.hotgloo.com
MockFlow – mockflow.com
Moc...
ajută utilizatorii să creeze în mod dinamic interfața

interactive prototyping

Dr. Sabin Buragawww.purl.org/net/busaco
...
proiectarea interfeței Web pentru Apricado Music

http://jeff.io/posts/user-interface-wireframes

Dr. Sabin Buragawww.pur...
formular de
înscriere

Dr. Sabin Buragawww.purl.org/net/busaco

pasul 1: prototip pe hârtie (sketch)
pasul 2: wireframe
Dr. Sabin Buragawww.purl.org/net/busaco
pasul 3: mockup
Dr. Sabin Buragawww.purl.org/net/busaco
pas 4: implementare

Dr. Sabin Buragawww.purl.org/net/busaco

interfața Web
concretă
(HTML+CSS+JS)
proiectarea interfeței unei aplicații iPhone
pentru managementul bugetului personal

Andrei Potorac, 2011

Dr. Sabin Burag...
Dr. Sabin Buragawww.purl.org/net/busaco

storytelling – include notițe utile
proiectantului/dezvoltatorului
Dr. Sabin Buragawww.purl.org/net/busaco

de la mockup la prototipul interfeței
(folosirea emulatorului de dispozitiv iPho...
Dr. Sabin Buragawww.purl.org/net/busaco

În vederea asigurării calității interfeței proiectate,
trebuie urmate diverse st...
impuse de organisme (inter)naționale

www.w3c.org

Dr. Sabin Buragawww.purl.org/net/busaco

Standarde
mai detaliate & sugestive
pot rezolva anumite conflicte de proiectare

Dr. Sabin Buragawww.purl.org/net/busaco

Reglement...
Dr. Sabin Buragawww.purl.org/net/busaco

ARIA (Accessible Rich Internet Applications) în contextul
Web Accessibility Init...
interactivity (JavaScript)
design (CSS)
semantics (HTML + RDFa)
content (text & HTTP)

adaptare după Aaron Gustafson, 2012...
Dr. Sabin Buragawww.purl.org/net/busaco

evaluarea accesibilității unui sit cu instrumentul WAVE
(Web Accessibility Evalu...
Dr. Sabin Buragawww.purl.org/net/busaco

Ce putem afirma despre utilizatorii aplicației
pe care o vom dezvolta?
probabil, nu-l vom agrea (inițial)

Dr. Sabin Buragawww.purl.org/net/busaco

Cine este utilizatorul?
acea persoană care interacționează direct
cu produsul/serviciul (software)

Dr. Sabin Buragawww.purl.org/net/busaco

Cine...
acel individ care determină alte persoane
să utilizeze produsul/serviciul

Dr. Sabin Buragawww.purl.org/net/busaco

Cine ...
obține rezultate – de dorit, cele scontate –
de la un produs/serviciu specific

Dr. Sabin Buragawww.purl.org/net/busaco

...
persoană care ia decizii
privind achiziția unui produs/serviciu

Dr. Sabin Buragawww.purl.org/net/busaco

Cine este utili...
entitate care folosește produsul/serviciul
oferit de competitor(i)

Dr. Sabin Buragawww.purl.org/net/busaco

Cine este ut...
factori demografici
vârstă, gen, etnicitate
+
profil psihologic

Dr. Sabin Buragawww.purl.org/net/busaco

Utilizatorul: c...
educație
școală primară vs. studii de masterat

Dr. Sabin Buragawww.purl.org/net/busaco

Utilizatorul: caracteristici ce ...
abilități fizice
simțuri & percepție – e.g., acuitate vizuală
memorie (de scurtă/lungă durată)
caracteristici anatomice:
m...
abilități referitoare la utilizarea calculatoarelor
cunoștințe generale vs. avansate de informatică
eventual, vizând o pla...
deprinderi (skills)

Dr. Sabin Buragawww.purl.org/net/busaco

Utilizatorul: caracteristici ce trebuie identificate

citir...
experiența în domeniul specific aplicației

Dr. Sabin Buragawww.purl.org/net/busaco

Utilizatorul: caracteristici ce treb...
Dr. Sabin Buragawww.purl.org/net/busaco

Utilizatorii fără cunoștințe anterioare
privind Web-ul semantic pot înțelege
și ...
mediul de lucru (contextul)
inclusiv alți factori sociali
(e.g., relații cu alte persoane,
moduri de comunicare – 1:1, 1:n...
Dr. Sabin Buragawww.purl.org/net/busaco

exemplificare
Proiectarea unei aplicații Web oferind servicii de
comunicare onli...
Dr. Sabin Buragawww.purl.org/net/busaco

exemplificare
Proiectarea unei aplicații Web oferind servicii de
comunicare onli...
Dr. Sabin Buragawww.purl.org/net/busaco

exemplificare
Proiectarea unei aplicații Web oferind servicii de
comunicare onli...
Dr. Sabin Buragawww.purl.org/net/busaco

exemplificare
Proiectarea unei aplicații Web oferind servicii de
comunicare onli...
abordări:
chestionare completate de utilizatori (user surveys)
interviuri
observații (in)directe (user tracking, feedback)...
abordări:
chestionare completate de utilizatori (user surveys)
interviuri
observații (in)directe (user tracking, feedback)...
din punct de vedere al abilităților cognitive
(Card, Moran & Newell, 1983; Wickens, 1984)

Dr. Sabin Buragawww.purl.org/n...
Dr. Sabin Buragawww.purl.org/net/busaco

Cum putem proiecta interfețele Web
în cazul în care nu știm care e audiența real...


personas

Dr. Sabin Buragawww.purl.org/net/busaco

Folosind modele abstracte,
putem specifica diverse clase de utiliza...
oferă o descriere precisă a utilizatorului unui sistem
și ceea ce dorește acesta să realizeze
user archetype

Alan Cooper,...
deși nu substituie utilizatorul real,
îl reprezintă pe parcursul fazelor de proiectare

Blomkvist, 2002

Dr. Sabin Buraga...
facilitează crearea profilului concret
al unui utilizator tipic al aplicației Web

Dr. Sabin Buragawww.purl.org/net/busac...
proiectarea trebuie realizată
conform necesităților și scopurilor
fiecărei categorii de utilizatori

Dr. Sabin Buragawww....
aspecte de considerat:
vârstă, abilități, etnicitate, aspecte sociale etc.

Dr. Sabin Buragawww.purl.org/net/busaco

Pers...
Name
Age
Location

Social Life

Work Life

Goals

Tourist

Single (wo)man

Dr. Sabin Buragawww.purl.org/net/busaco

Stude...
Name
Age
Location

Social Life

Work Life

Goals

Tourist

Single (wo)man

Dr. Sabin Buragawww.purl.org/net/busaco

Stude...
http://profs.info.uaic.ro/~stefan.negru/personas/

Dr. Sabin Buragawww.purl.org/net/busaco

persona – un template HTML5
Dr. Sabin Buragawww.purl.org/net/busaco

personas pentru proiectul PaMI (Patient Monitoring Interface)
A. Berilă, A. Bula...
Dr. Sabin Buragawww.purl.org/net/busaco

S.T.U.P.I.D. user

Stressed Tired Untrained Passive Independent Distracted


S....
www.vincentbroquaire.com
Dr. Sabin Buragawww.purl.org/net/busaco
graceful
degradation

progressive
enhancement
mobile first

episodul viitor: proiectarea interacțiunii Web

Dr. Sabin Bura...
Upcoming SlideShare
Loading in …5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

627 views

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
627
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Interacţiune, utilizabilitate & metodologii de proiectare

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

×